Redesign: Update "favorite" wording to "like" (#40647)

2026-09-27 11:08:03 -05:00 · 2026-09-22 09:18:29 +00:00
parent 45d2fe7ec5
commit 4d818a63db
12 changed files with 177 additions and 50 deletions
--- a/app/javascript/mastodon/components/status/action_bar.tsx
+++ b/app/javascript/mastodon/components/status/action_bar.tsx
@@ -53,10 +53,10 @@ interface StatusActionBarProps {

 const messages = defineMessages({
  replyAll: { id: 'status.replyAll', defaultMessage: 'Reply to thread' },
-  favourite: { id: 'status.favourite', defaultMessage: 'Favorite' },
+  favourite: { id: 'status.like', defaultMessage: 'Like' },
  removeFavourite: {
-    id: 'status.remove_favourite',
-    defaultMessage: 'Remove from favorites',
+    id: 'status.unlike',
+    defaultMessage: 'Unlike',
  },
 });

@@ -184,11 +184,11 @@ export const StatusActionBar: React.FC<StatusActionBarProps> = ({
        onClick={handleBookmarkClick}
      >
        {!status.bookmarked ? (
-          <FormattedMessage id='status.bookmark' defaultMessage='Bookmark' />
+          <FormattedMessage id='status.save' defaultMessage='Save' />
        ) : (
          <FormattedMessage
-            id='status.remove_bookmark'
-            defaultMessage='Remove bookmark'
+            id='status.remove_from_saved'
+            defaultMessage='Remove from Saved'
          />
        )}
      </ToggleIconButton>
--- a/app/javascript/mastodon/components/status/legacy/action_bar/index.jsx
+++ b/app/javascript/mastodon/components/status/legacy/action_bar/index.jsx
@@ -28,9 +28,10 @@ import { BoostButton } from '../boost_button';
 import { RemoveQuoteHint } from './remove_quote_hint';
 import { quoteItemState } from '../../boost_button_utils';
 import { selectStatusConditions } from '@/mastodon/selectors/statuses';
+import { isRedesignEnabled } from '@/mastodon/utils/environment';


-const messages = defineMessages({
+const baseMessages = defineMessages({
  delete: { id: 'status.delete', defaultMessage: 'Delete' },
  redraft: { id: 'status.redraft', defaultMessage: 'Delete & re-draft' },
  edit: { id: 'status.edit', defaultMessage: 'Edit' },
@@ -67,6 +68,15 @@ const messages = defineMessages({
  quotePolicyChange: { id: 'status.quote_policy_change', defaultMessage: 'Change who can quote' },
 });

+const redesignMessages = defineMessages({
+  favourite: { id: 'status.like', defaultMessage: 'Like' },
+  removeFavourite: { id: 'status.unlike', defaultMessage: 'Unlike' },
+  bookmark: { id: 'status.save', defaultMessage: 'Save' },
+  removeBookmark: { id: 'status.remove_from_saved', defaultMessage: 'Remove from Saved' },
+});
+
+const messages = isRedesignEnabled() ? {...baseMessages, ...redesignMessages} : baseMessages;
+
 const mapStateToProps = (state, { status }) => {
  const quotedStatusId = status.getIn(['quote', 'quoted_status']);
  return ({
--- a/app/javascript/mastodon/features/annual_report/highlighted_post.tsx
+++ b/app/javascript/mastodon/features/annual_report/highlighted_post.tsx
@@ -11,6 +11,7 @@ import { FormattedMessage } from 'react-intl';

 import classNames from 'classnames';

+import { isRedesignEnabled } from '@/mastodon/utils/environment';
 import { Status } from 'mastodon/components/status';
 import { InterceptStatusClicks } from 'mastodon/components/status/intercept_status_clicks';
 import type { TopStatuses } from 'mastodon/models/annual_report';
@@ -65,7 +66,13 @@ export const HighlightedPost: React.FC<{
      />
    );
  } else if (by_favourites) {
-    label = (
+    label = isRedesignEnabled() ? (
+      <FormattedMessage
+        id='annual_report.summary.highlighted_post.like_count'
+        defaultMessage='This post was liked {count, plural, one {once} other {# times}}.'
+        values={{ count: status.get('favourites_count') }}
+      />
+    ) : (
      <FormattedMessage
        id='annual_report.summary.highlighted_post.favourite_count'
        defaultMessage='This post was favorited {count, plural, one {once} other {# times}}.'
--- a/app/javascript/mastodon/features/favourited_statuses/index.tsx
+++ b/app/javascript/mastodon/features/favourited_statuses/index.tsx
@@ -72,27 +72,31 @@ const Favourites: React.FC<{ columnId: string; multiColumn: boolean }> = ({

  const pinned = !!columnId;

-  const emptyMessage = (
+  const emptyMessage = isRedesignEnabled() ? (
+    <FormattedMessage
+      id='empty_column.liked_posts'
+      defaultMessage="You don't have any liked posts yet. When you like one, it will show up here."
+    />
+  ) : (
    <FormattedMessage
      id='empty_column.favourited_statuses'
      defaultMessage="You don't have any favorite posts yet. When you favorite one, it will show up here."
    />
  );

+  const title = intl.formatMessage(
+    isRedesignEnabled() ? messages.heading_redesign : messages.heading,
+  );
+
  return (
-    <Column
-      bindToDocument={!multiColumn}
-      label={intl.formatMessage(messages.heading)}
-    >
+    <Column bindToDocument={!multiColumn} label={title}>
      {isRedesignEnabled() ? (
        <ColumnHeader
-          title={intl.formatMessage(messages.heading_redesign)}
+          title={title}
          withBackButton={multiColumn && !pinned && 'auto'}
          extraButtons={
            multiColumn && (
-              <ColumnSettingsMenu
-                labelPrefix={intl.formatMessage(messages.heading_redesign)}
-              >
+              <ColumnSettingsMenu labelPrefix={title}>
                <MultiColumnMenuItems
                  onPin={handlePin}
                  onMove={handleMove}
@@ -106,7 +110,7 @@ const Favourites: React.FC<{ columnId: string; multiColumn: boolean }> = ({
        <LegacyColumnHeader
          icon='star'
          iconComponent={StarIcon}
-          title={intl.formatMessage(messages.heading)}
+          title={title}
          onPin={handlePin}
          onMove={handleMove}
          pinned={pinned}
@@ -128,7 +132,7 @@ const Favourites: React.FC<{ columnId: string; multiColumn: boolean }> = ({
      />

      <Helmet>
-        <title>{intl.formatMessage(messages.heading)}</title>
+        <title>{title}</title>
        <meta name='robots' content='noindex' />
      </Helmet>
    </Column>
--- a/app/javascript/mastodon/features/favourites/index.tsx
+++ b/app/javascript/mastodon/features/favourites/index.tsx
@@ -78,7 +78,12 @@ const Favourites: React.FC<{ multiColumn?: boolean }> = ({ multiColumn }) => {
    );
  }

-  const emptyMessage = (
+  const emptyMessage = isRedesignEnabled() ? (
+    <FormattedMessage
+      id='empty_column.likes'
+      defaultMessage='No one has liked this post yet. When someone does, they will show up here.'
+    />
+  ) : (
    <FormattedMessage
      id='empty_column.favourites'
      defaultMessage='No one has favorited this post yet. When someone does, they will show up here.'
--- a/app/javascript/mastodon/features/keyboard_shortcuts/index.jsx
+++ b/app/javascript/mastodon/features/keyboard_shortcuts/index.jsx
@@ -66,7 +66,13 @@ class KeyboardShortcuts extends ImmutablePureComponent {
              </tr>
              <tr>
                <td><kbd>f</kbd></td>
-                <td><FormattedMessage id='keyboard_shortcuts.favourite' defaultMessage='to favorite' /></td>
+                <td>
+                  {isRedesignEnabled() ? (
+                    <FormattedMessage id='keyboard_shortcuts.like' defaultMessage='Like post' />
+                  ) : (
+                    <FormattedMessage id='keyboard_shortcuts.favourite' defaultMessage='to favorite' />
+                  )}
+                </td>
              </tr>
              <tr>
                <td><kbd>b</kbd></td>
@@ -170,7 +176,13 @@ class KeyboardShortcuts extends ImmutablePureComponent {
              </tr>
              <tr>
                <td><kbd>g</kbd>+<kbd>f</kbd></td>
-                <td><FormattedMessage id='keyboard_shortcuts.favourites' defaultMessage='to open favorites list' /></td>
+                <td>
+                  {isRedesignEnabled() ? (
+                    <FormattedMessage id='keyboard_shortcuts.liked_posts' defaultMessage='Open liked posts' />
+                  ) : (
+                    <FormattedMessage id='keyboard_shortcuts.favourites' defaultMessage='to open favorites list' />
+                  )}
+                </td>
              </tr>
              <tr>
                <td><kbd>g</kbd>+<kbd>u</kbd></td>
--- a/app/javascript/mastodon/features/notifications/components/notification.jsx
+++ b/app/javascript/mastodon/features/notifications/components/notification.jsx
@@ -31,9 +31,11 @@ import FollowRequestContainer from '../containers/follow_request_container';
 import { ModerationWarning } from './moderation_warning';
 import { RelationshipsSeveranceEvent } from './relationships_severance_event';
 import Report from './report';
+import { isRedesignEnabled } from '@/mastodon/utils/environment';

 const messages = defineMessages({
  favourite: { id: 'notification.favourite', defaultMessage: '{name} favorited your post' },
+  favourite_redesign: { id: 'notification.like', defaultMessage: '{name} liked your post' },
  follow: { id: 'notification.follow', defaultMessage: '{name} followed you' },
  ownPoll: { id: 'notification.own_poll', defaultMessage: 'Your poll has ended' },
  poll: { id: 'notification.poll', defaultMessage: 'A poll you voted in has ended' },
@@ -182,14 +184,16 @@ class Notification extends ImmutablePureComponent {
  renderFavourite (notification, link) {
    const { intl, unread } = this.props;

+    const likeMessage = isRedesignEnabled() ? messages.favourite_redesign : messages.favourite;
+
    return (
      <Hotkeys handlers={this.getHandlers()}>
-        <div className={classNames('notification notification-favourite focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.favourite, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
+        <div className={classNames('notification notification-favourite focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(likeMessage, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
          <div className='notification__message'>
            <Icon id='star' icon={StarIcon} className='star-icon' />

            <span title={notification.get('created_at')}>
-              <FormattedMessage id='notification.favourite' defaultMessage='{name} favorited your post' values={{ name: link }} />
+              <FormattedMessage {...likeMessage} values={{ name: link }} />
            </span>
          </div>

--- a/app/javascript/mastodon/features/notifications_v2/components/notification_favourite.tsx
+++ b/app/javascript/mastodon/features/notifications_v2/components/notification_favourite.tsx
@@ -1,7 +1,8 @@
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';

 import { Link } from 'react-router-dom';

+import { isRedesignEnabled } from '@/mastodon/utils/environment';
 import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
 import type { NotificationGroupFavourite } from 'mastodon/models/notification_group';
 import { useAppSelector } from 'mastodon/store';
@@ -9,20 +10,59 @@ import { useAppSelector } from 'mastodon/store';
 import type { LabelRenderer } from './notification_group_with_status';
 import { NotificationGroupWithStatus } from './notification_group_with_status';

+const messagesLegacy = defineMessages({
+  like: {
+    id: 'notification.favourite',
+    defaultMessage: '{name} favorited your post',
+  },
+  likeByMultiple: {
+    id: 'notification.favourite.name_and_others_with_link',
+    defaultMessage:
+      '{name} and <a>{count, plural, one {# other} other {# others}}</a> favorited your post',
+  },
+  messageLike: {
+    id: 'notification.favourite_pm',
+    defaultMessage: '{name} favorited your private mention',
+  },
+  messageLikeByMultiple: {
+    id: 'notification.favourite_pm.name_and_others_with_link',
+    defaultMessage:
+      '{name} and <a>{count, plural, one {# other} other {# others}}</a> favorited your private mention',
+  },
+});
+
+const messagesRedesign = defineMessages({
+  like: {
+    id: 'notification.like',
+    defaultMessage: '{name} liked your post',
+  },
+  likeByMultiple: {
+    id: 'notification.like.name_and_others_with_link',
+    defaultMessage:
+      '{name} and <a>{count, plural, one {# other} other {# others}}</a> liked your post',
+  },
+  messageLike: {
+    id: 'notification.like_message',
+    defaultMessage: '{name} liked your message',
+  },
+  messageLikeByMultiple: {
+    id: 'notification.like_message.name_and_others_with_link',
+    defaultMessage:
+      '{name} and <a>{count, plural, one {# other} other {# others}}</a> liked your message',
+  },
+});
+
+const messages = isRedesignEnabled() ? messagesRedesign : messagesLegacy;
+
 const labelRenderer: LabelRenderer = (displayedName, total, seeMoreHref) => {
  if (total === 1)
    return (
-      <FormattedMessage
-        id='notification.favourite'
-        defaultMessage='{name} favorited your post'
-        values={{ name: displayedName }}
-      />
+      <FormattedMessage {...messages.like} values={{ name: displayedName }} />
    );

  return (
    <FormattedMessage
-      id='notification.favourite.name_and_others_with_link'
-      defaultMessage='{name} and <a>{count, plural, one {# other} other {# others}}</a> favorited your post'
+      {...messages.likeByMultiple}
      values={{
        name: displayedName,
        count: total - 1,
@@ -41,16 +81,14 @@ const privateLabelRenderer: LabelRenderer = (
  if (total === 1)
    return (
      <FormattedMessage
-        id='notification.favourite_pm'
-        defaultMessage='{name} favorited your private mention'
+        {...messages.messageLike}
        values={{ name: displayedName }}
      />
    );

  return (
    <FormattedMessage
-      id='notification.favourite_pm.name_and_others_with_link'
-      defaultMessage='{name} and <a>{count, plural, one {# other} other {# others}}</a> favorited your private mention'
+      {...messages.messageLikeByMultiple}
      values={{
        name: displayedName,
        count: total - 1,
--- a/app/javascript/mastodon/features/picture_in_picture/components/footer.tsx
+++ b/app/javascript/mastodon/features/picture_in_picture/components/footer.tsx
@@ -5,6 +5,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';

 import { BoostButton } from '@/mastodon/components/status/legacy/boost_button';
+import { isRedesignEnabled } from '@/mastodon/utils/environment';
 import OpenInNewIcon from '@/material-icons/400-24px/open_in_new.svg?react';
 import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
 import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
@@ -42,6 +43,8 @@ const messages = defineMessages({
    id: 'status.remove_favourite',
    defaultMessage: 'Remove from favorites',
  },
+  like: { id: 'status.like', defaultMessage: 'Like' },
+  unlike: { id: 'status.unlike', defaultMessage: 'Unlike' },
  open: { id: 'status.open', defaultMessage: 'Expand this status' },
 });

@@ -145,9 +148,14 @@ export const Footer: React.FC<{
    replyTitle = intl.formatMessage(messages.replyAll);
  }

-  const favouriteTitle = intl.formatMessage(
+  let favouriteTitle = intl.formatMessage(
    status.get('favourited') ? messages.removeFavourite : messages.favourite,
  );
+  if (isRedesignEnabled()) {
+    favouriteTitle = intl.formatMessage(
+      status.get('favourited') ? messages.unlike : messages.like,
+    );
+  }

  return (
    <div className='picture-in-picture__footer'>
--- a/app/javascript/mastodon/features/status/components/action_bar.jsx
+++ b/app/javascript/mastodon/features/status/components/action_bar.jsx
@@ -23,8 +23,9 @@ import { me, quickBoosting } from '@/mastodon/initial_state';
 import { BoostButton } from '@/mastodon/components/status/legacy/boost_button';
 import { quoteItemState } from '@/mastodon/components/status/boost_button_utils';
 import { selectStatusConditions } from '@/mastodon/selectors/statuses';
+import { isRedesignEnabled } from '@/mastodon/utils/environment';

-const messages = defineMessages({
+const baseMessages = defineMessages({
  delete: { id: 'status.delete', defaultMessage: 'Delete' },
  redraft: { id: 'status.redraft', defaultMessage: 'Delete & re-draft' },
  edit: { id: 'status.edit', defaultMessage: 'Edit' },
@@ -58,6 +59,15 @@ const messages = defineMessages({
  quotePolicyChange: { id: 'status.quote_policy_change', defaultMessage: 'Change who can quote' },
 });

+const redesignMessages = defineMessages({
+  favourite: { id: 'status.like', defaultMessage: 'Like' },
+  removeFavourite: { id: 'status.unlike', defaultMessage: 'Unlike' },
+  bookmark: { id: 'status.save', defaultMessage: 'Save' },
+  removeBookmark: { id: 'status.remove_from_saved', defaultMessage: 'Remove from Saved' },
+})
+
+const messages = isRedesignEnabled() ? {...baseMessages, ...redesignMessages} : baseMessages;
+
 const mapStateToProps = (state, { status }) => {
  const quotedStatusId = status.getIn(['quote', 'quoted_status']);
  return ({
--- a/app/javascript/mastodon/features/status/components/detailed_status.tsx
+++ b/app/javascript/mastodon/features/status/components/detailed_status.tsx
@@ -18,6 +18,7 @@ import type { StatusLike } from '@/mastodon/components/status/legacy/hashtag_bar
 import { getHashtagBarForStatus } from '@/mastodon/components/status/legacy/hashtag_bar';
 import { PictureInPicturePlaceholder } from '@/mastodon/components/status/legacy/picture_in_picture_placeholder';
 import { QuotedStatus } from '@/mastodon/components/status/legacy/quoted';
+import { isRedesignEnabled } from '@/mastodon/utils/environment';
 import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
 import { AnimatedNumber } from 'mastodon/components/animated_number';
 import { Avatar } from 'mastodon/components/avatar';
@@ -391,18 +392,33 @@ export const DetailedStatus: React.FC<{
      to={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}/favourites`}
      className='detailed-status__link'
    >
-      <FormattedMessage
-        id='status.favourites_count'
-        defaultMessage='{count, plural, one {{counter} favorite} other {{counter} favorites}}'
-        values={{
-          count: status.get('favourites_count'),
-          counter: (
-            <span className='detailed-status__favorites'>
-              <AnimatedNumber value={status.get('favourites_count')} />
-            </span>
-          ),
-        }}
-      />
+      {isRedesignEnabled() ? (
+        <FormattedMessage
+          id='status.likes_count'
+          defaultMessage='{count, plural, one {{counter} like} other {{counter} likes}}'
+          values={{
+            count: status.get('favourites_count'),
+            counter: (
+              <span className='detailed-status__favorites'>
+                <AnimatedNumber value={status.get('favourites_count')} />
+              </span>
+            ),
+          }}
+        />
+      ) : (
+        <FormattedMessage
+          id='status.favourites_count'
+          defaultMessage='{count, plural, one {{counter} favorite} other {{counter} favorites}}'
+          values={{
+            count: status.get('favourites_count'),
+            counter: (
+              <span className='detailed-status__favorites'>
+                <AnimatedNumber value={status.get('favourites_count')} />
+              </span>
+            ),
+          }}
+        />
+      )}
    </Link>
  );

--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -319,6 +319,7 @@
  "annual_report.summary.followers.new_followers": "{count, plural, one {new follower} other {new followers}}",
  "annual_report.summary.highlighted_post.boost_count": "This post was boosted {count, plural, one {once} other {# times}}.",
  "annual_report.summary.highlighted_post.favourite_count": "This post was favorited {count, plural, one {once} other {# times}}.",
+  "annual_report.summary.highlighted_post.like_count": "This post was liked {count, plural, one {once} other {# times}}.",
  "annual_report.summary.highlighted_post.reply_count": "This post got {count, plural, one {one reply} other {# replies}}.",
  "annual_report.summary.highlighted_post.title": "Most popular post",
  "annual_report.summary.most_used_app.most_used_app": "most used app",
@@ -786,6 +787,8 @@
  "empty_column.followed_tags": "You have not followed any hashtags yet. When you do, they will show up here.",
  "empty_column.hashtag": "There is nothing in this hashtag yet.",
  "empty_column.home": "Your home timeline is empty! Follow more people to fill it up.",
+  "empty_column.liked_posts": "You don't have any liked posts yet. When you like one, it will show up here.",
+  "empty_column.likes": "No one has liked this post yet. When someone does, they will show up here.",
  "empty_column.list": "There is nothing in this list yet. When members of this list publish new posts, they will appear here.",
  "empty_column.mutes": "You haven't muted any users yet.",
  "empty_column.notification_requests": "All clear! There is nothing here. When you receive new notifications, they will appear here according to your settings.",
@@ -956,6 +959,8 @@
  "keyboard_shortcuts.keys.page_down": "Page Down",
  "keyboard_shortcuts.keys.page_up": "Page Up",
  "keyboard_shortcuts.legend": "Display this legend",
+  "keyboard_shortcuts.like": "Like post",
+  "keyboard_shortcuts.liked_posts": "Open liked posts",
  "keyboard_shortcuts.load_more": "Focus \"Load more\" button",
  "keyboard_shortcuts.local": "Open local timeline",
  "keyboard_shortcuts.mention": "Mention author",
@@ -1093,6 +1098,10 @@
  "notification.label.private_reply": "Private reply",
  "notification.label.quote": "{name} quoted your post",
  "notification.label.reply": "Reply",
+  "notification.like": "{name} liked your post",
+  "notification.like.name_and_others_with_link": "{name} and <a>{count, plural, one {# other} other {# others}}</a> liked your post",
+  "notification.like_message": "{name} liked your message",
+  "notification.like_message.name_and_others_with_link": "{name} and <a>{count, plural, one {# other} other {# others}}</a> liked your message",
  "notification.mention": "Mention",
  "notification.mentioned_you": "{name} mentioned you",
  "notification.moderation-warning.learn_more": "Learn more",
@@ -1401,6 +1410,7 @@
  "status.header.to_followers": "{author} to Followers {count, plural, =0 {} one {+ # other} other {+ # others}}",
  "status.history.created": "{name} created {date}",
  "status.history.edited": "{name} edited {date}",
+  "status.like": "Like",
  "status.likes_count": "{count, plural, one {{counter} like} other {{counter} likes}}",
  "status.likes_title": "Post Likes",
  "status.link_preview.authors": "{count, plural, one {Find the author in the Fediverse:} other {Find the authors in the Fediverse:}}",
@@ -1450,6 +1460,7 @@
  "status.redraft": "Delete & re-draft",
  "status.remove_bookmark": "Remove bookmark",
  "status.remove_favourite": "Remove from favorites",
+  "status.remove_from_saved": "Remove from Saved",
  "status.remove_quote": "Remove",
  "status.replied_in_thread": "Replied in thread",
  "status.replied_to": "Replied to {name}",
@@ -1459,6 +1470,7 @@
  "status.report": "Report @{name}",
  "status.request_quote": "Request to quote",
  "status.revoke_quote": "Remove my post from @{name}’s post",
+  "status.save": "Save",
  "status.sensitive_warning": "Sensitive content",
  "status.share": "Share",
  "status.show_less_all": "Show less for all",
@@ -1472,6 +1484,7 @@
  "status.translate": "Translate",
  "status.translated_from_with": "Translated from {lang} using {provider}",
  "status.uncached_media_warning": "Preview not available",
+  "status.unlike": "Unlike",
  "status.unmute_conversation": "Unmute conversation",
  "status.unpin": "Unpin from profile",
  "status.view_post": "View full post",