Merge 7268e97900 into 14cb5ff881

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

app/javascript/mastodon/components/button/button.stories.tsx

@@ -8,6 +8,7 @@ const meta = {
   component: Button,
   args: {
     secondary: false,
+    plain: false,
     compact: false,
     dangerous: false,
     disabled: false,
@@ -57,6 +58,14 @@ export const Secondary: Story = {
   play: buttonTest,
 };
 
+export const Plain: Story = {
+  args: {
+    plain: true,
+    children: 'Plain button',
+  },
+  play: buttonTest,
+};
+
 export const Compact: Story = {
   args: {
     compact: true,
@@ -101,6 +110,14 @@ export const SecondaryDisabled: Story = {
   play: disabledButtonTest,
 };
 
+export const PlainDisabled: Story = {
+  args: {
+    ...Plain.args,
+    disabled: true,
+  },
+  play: disabledButtonTest,
+};
+
 const loadingButtonTest: Story['play'] = async ({
   args,
   canvas,

app/javascript/mastodon/components/button/index.tsx

@@ -9,6 +9,7 @@ interface BaseProps
   extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
   block?: boolean;
   secondary?: boolean;
+  plain?: boolean;
   compact?: boolean;
   dangerous?: boolean;
   loading?: boolean;
@@ -35,6 +36,7 @@ export const Button: React.FC<Props> = ({
   disabled,
   block,
   secondary,
+  plain,
   compact,
   dangerous,
   loading,
@@ -62,6 +64,7 @@ export const Button: React.FC<Props> = ({
     <button
       className={classNames('button', className, {
         'button-secondary': secondary,
+        'button--plain': plain,
         'button--compact': compact,
         'button--block': block,
         'button--dangerous': dangerous,

app/javascript/mastodon/components/hover_card_account.stories.tsx

@@ -0,0 +1,150 @@
+import { Map as ImmutableMap } from 'immutable';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { accountFactory, accountFactoryState } from '@/testing/factories';
+
+import { HoverCardAccount } from './hover_card_account';
+
+const meta = {
+  title: 'Components/HoverCardAccount',
+  component: HoverCardAccount,
+  argTypes: {
+    accountId: {
+      type: 'string',
+      description: 'ID of the account to display in the hover card',
+    },
+  },
+  args: {
+    accountId: '1',
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          padding: '20px',
+          backgroundColor: '#f5f5f5',
+          minHeight: '300px',
+        }}
+      >
+        <p style={{ marginBottom: '20px', color: '#666' }}>
+          Hover card examples - demonstrating Issue #35623 fix for moved
+          accounts
+        </p>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof HoverCardAccount>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Mock data for different account states
+const regularAccount = accountFactoryState({
+  id: '1',
+  username: 'alice',
+  acct: 'alice@mastodon.social',
+  display_name: 'Alice Johnson',
+  note: 'Frontend developer who loves building amazing user interfaces. Coffee enthusiast ☕',
+  followers_count: 1250,
+  following_count: 342,
+  statuses_count: 1840,
+  avatar: 'https://picsum.photos/200/200?random=1',
+  header: 'https://picsum.photos/600/200?random=1',
+  fields: [
+    { name: 'Website', value: 'https://alice.dev', verified_at: null },
+    { name: 'Location', value: 'San Francisco, CA', verified_at: null },
+  ],
+});
+
+const movedAccount = accountFactoryState({
+  id: '2',
+  username: 'bob_old',
+  acct: 'bob_old@mastodon.social',
+  display_name: 'Bob Smith (Moved)',
+  note: 'I have moved to a new account. Please follow me there!',
+  followers_count: 890,
+  following_count: 156,
+  statuses_count: 420,
+  avatar: 'https://picsum.photos/200/200?random=2',
+  header: 'https://picsum.photos/600/200?random=2',
+  moved: accountFactory({
+    id: '3',
+    username: 'bob_new',
+    acct: 'bob_new@social.example',
+    display_name: 'Bob Smith',
+    followers_count: 950,
+    following_count: 180,
+    statuses_count: 45,
+    avatar: 'https://picsum.photos/200/200?random=3',
+    header: 'https://picsum.photos/600/200?random=3',
+  }),
+});
+
+const newAccount = accountFactoryState({
+  id: '3',
+  username: 'bob_new',
+  acct: 'bob_new@social.example',
+  display_name: 'Bob Smith',
+  note: 'This is my new account! Thanks for following me here.',
+  followers_count: 950,
+  following_count: 180,
+  statuses_count: 45,
+  avatar: 'https://picsum.photos/200/200?random=3',
+  header: 'https://picsum.photos/600/200?random=3',
+});
+
+export const RegularAccount: Story = {
+  args: {
+    accountId: '1',
+  },
+  parameters: {
+    state: {
+      accounts: ImmutableMap({
+        '1': regularAccount,
+      }),
+      relationships: ImmutableMap(),
+      meta: ImmutableMap({
+        locale: 'en',
+        emoji_style: 'unicode',
+      }),
+    },
+  },
+};
+
+export const MovedAccount: Story = {
+  args: {
+    accountId: '2',
+  },
+  parameters: {
+    state: {
+      accounts: ImmutableMap({
+        '2': movedAccount,
+        '3': newAccount,
+      }),
+      relationships: ImmutableMap(),
+      meta: ImmutableMap({
+        locale: 'en',
+        emoji_style: 'unicode',
+      }),
+    },
+  },
+};
+
+export const LoadingState: Story = {
+  args: {
+    accountId: '999',
+  },
+  parameters: {
+    state: {
+      accounts: ImmutableMap(),
+      relationships: ImmutableMap(),
+      meta: ImmutableMap({
+        locale: 'en',
+        emoji_style: 'unicode',
+      }),
+    },
+  },
+};

app/javascript/mastodon/components/hover_card_account.tsx

@@ -32,6 +32,11 @@ export const HoverCardAccount = forwardRef<
   const account = useAppSelector((state) =>
     accountId ? state.accounts.get(accountId) : undefined,
   );
+  // Get the moved account data if this account has moved
+  // This allows us to show proper follow button for the new account
+  const movedAccount = useAppSelector((state) =>
+    account?.moved ? state.accounts.get(account.moved) : undefined,
+  );
   const suspended = account?.suspended;
   const hidden = useAppSelector((state) =>
     accountId ? getAccountHidden(state, accountId) : undefined,
@@ -98,6 +103,28 @@ export const HoverCardAccount = forwardRef<
                 />
               )}
             </div>
+          ) : account.moved ? (
+            // Issue #35623: Show moved account notice instead of regular content
+            // This prevents following the old account and provides a link + follow button for the new account
+            <div className='hover-card__moved-notice'>
+              <FormattedMessage
+                id='account.moved_to_short'
+                defaultMessage='This account has moved to {acct}'
+                values={{
+                  acct: movedAccount ? (
+                    <Link to={`/@${movedAccount.acct}`}>
+                      <strong>@{movedAccount.acct}</strong>
+                    </Link>
+                  ) : (
+                    <strong>@{account.moved}</strong>
+                  ),
+                }}
+              />
+              {/* Follow button that follows the NEW account, not the old one */}
+              {movedAccount && (
+                <FollowButton accountId={movedAccount.id} compact />
+              )}
+            </div>
           ) : (
             <>
               <div className='hover-card__text-row'>

app/javascript/mastodon/locales/en.json

@@ -58,6 +58,7 @@
   "account.media": "Media",
   "account.mention": "Mention @{name}",
   "account.moved_to": "{name} has indicated that their new account is now:",
+  "account.moved_to_short": "This account has moved to {acct}",
   "account.mute": "Mute @{name}",
   "account.mute_notifications_short": "Mute notifications",
   "account.mute_short": "Mute",

app/javascript/styles/mastodon/components.scss

@@ -201,6 +201,41 @@
     }
   }
 
+  &.button--plain {
+    color: $highlight-text-color;
+    background: transparent;
+    padding: 6px;
+
+    // The button has no outline, so we use negative margin to
+    // visually align its label with its surroundings while maintaining
+    // a generous click target
+    margin-inline: -6px;
+    border: 1px solid transparent;
+
+    &:active,
+    &:focus,
+    &:hover {
+      border-color: transparent;
+      color: lighten($highlight-text-color, 4%);
+      background-color: transparent;
+      text-decoration: none;
+    }
+
+    &:disabled,
+    &.disabled {
+      opacity: 0.7;
+      border-color: transparent;
+      color: $ui-button-disabled-color;
+
+      &:active,
+      &:focus,
+      &:hover {
+        border-color: transparent;
+        color: $ui-button-disabled-color;
+      }
+    }
+  }
+
   &.button-tertiary {
     background: transparent;
     padding: 6px 17px;
@@ -11179,6 +11214,26 @@ noscript {
     font-weight: 500;
   }
 
+  &__moved-notice {
+    text-align: center;
+    font-weight: 500;
+    color: $secondary-text-color;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: none;
+      }
+    }
+  }
+
   .display-name {
     font-size: 15px;
     line-height: 22px;

app/serializers/activitypub/note_serializer.rb

@@ -232,6 +232,15 @@ class ActivityPub::NoteSerializer < ActivityPub::Serializer
       canQuote: {
         automaticApproval: approved_uris,
       },
+      canReply: {
+        always: 'https://www.w3.org/ns/activitystreams#Public',
+      },
+      canLike: {
+        always: 'https://www.w3.org/ns/activitystreams#Public',
+      },
+      canAnnounce: {
+        always: 'https://www.w3.org/ns/activitystreams#Public',
+      },
     }
   end
 

yarn.lock

@@ -11957,8 +11957,8 @@ __metadata:
   linkType: hard
 
 "sass@npm:^1.62.1":
-  version: 1.91.0
-  resolution: "sass@npm:1.91.0"
+  version: 1.92.0
+  resolution: "sass@npm:1.92.0"
   dependencies:
     "@parcel/watcher": "npm:^2.4.1"
     chokidar: "npm:^4.0.0"
@@ -11969,7 +11969,7 @@ __metadata:
       optional: true
   bin:
     sass: sass.js
-  checksum: 10c0/5be1c98f7a618cb5f90b62f63d2aa0f78f9bf369c93ec7cd9880752a26b0ead19aa63cc341e8a26ce6c74d080baa5705f1685dff52fe6a3f28a7828ae50182b6
+  checksum: 10c0/bdff9fa6988620e2a81962efdd016e3894d19934cfadc105cf41db767f59dd47afd8ff32840e612ef700cb67e19d9e83c108f1724eb8f0bef56c4877dbe6f14d
   languageName: node
   linkType: hard