chore: Migrated endorse translations

src/locales/en-US/app.ftl

@@ -92,9 +92,15 @@ account-StatusAction--block--MenuItem = { -icon }<wrapper>Block @{ $name }</wrap
 account-StatusAction--block-domain--MenuItem = { -icon }<wrapper>Hide everything from { $domain }</wrapper>{ -emblem }
   .title = Hide everything from { $domain }
 account-StatusAction--edit-profile = { -edit-profile }
+account-StatusAction--endorse--MenuItem = { -icon }<wrapper>Feature on profile</wrapper>{ -emblem }
+  .title = Feature on profile
 account-StatusAction--follow = Follow
 account-StatusAction--unblock = Unblock @{ $name }
+account-StatusAction--unendorse--MenuItem = { -icon }<wrapper>Don't feature on profile</wrapper>{ -emblem }
+  .title = Don't feature on profile
 account-StatusAction--unfollow = Unfollow
+account-Toast--endorsed = You are now featuring @{ $acct } on your profile
+account-Toast--unendorsed = You are no longer featuring @{ $acct }
 
 account-birthday-today = Birthday is today!
 account-block = Block @{ $name }

src/locales/id-ID/app.ftl

@@ -49,8 +49,12 @@ account-StatusAction--block--MenuItem = { -icon }<wrapper>Blokir @{ $name }</wra
 account-StatusAction--block-domain--MenuItem = { -icon }<wrapper>Sembunyikan segalanya dari { $domain }</wrapper>{ -emblem }
   .title = Sembunyikan segalanya dari { $domain }
 account-StatusAction--edit-profile = { -edit-profile }
+account-StatusAction--endorse--MenuItem = { -icon }<wrapper>Tampilkan di profil</wrapper>{ -emblem }
+  .title = Tampilkan di profil
 account-StatusAction--follow = Ikuti
 account-StatusAction--unblock = Hapus blokir @{ $name }
+account-StatusAction--unendorse--MenuItem = { -icon }<wrapper>Jangan tampilkan di profil</wrapper>{ -emblem }
+  .title = Jangan tampilkan di profil
 account-StatusAction--unfollow = Berhenti mengikuti
 
 account-birthday = Born { $date }

src/locales/ja-JP/app.ftl

@@ -51,8 +51,12 @@ account-StatusAction--block--MenuItem = { -icon }<wrapper>@{ $name }さんをブ
 account-StatusAction--block-domain--MenuItem = { -icon }<wrapper>{ $domain }全体を非表示</wrapper>{ -emblem }
   .title = { $domain }全体を非表示
 account-StatusAction--edit-profile = { -edit-profile }
+account-StatusAction--endorse--MenuItem = { -icon }<wrapper>プロフィールで紹介する</wrapper>{ -emblem }
+  .title = プロフィールで紹介する
 account-StatusAction--follow = フォロー
 account-StatusAction--unblock = @{ $name }さんのブロックを解除
+account-StatusAction--unendorse--MenuItem = { -icon }<wrapper>プロフィールから外す</wrapper>{ -emblem }
+  .title = プロフィールから外す
 account-StatusAction--unfollow = フォロー解除
 
 account-block = Block @{ $name }

src/soapbox/components/maybe-localized.tsx

@@ -7,6 +7,8 @@ export interface FluentOption {
   attrs?: Record<string, boolean>
   vars?: Record<string, FluentVariable>
   elems?: Record<string, React.ReactElement>
+  /** Not actually available in Fluent, mostly for Toast */
+  fallback?: string
 }
 
 interface LocalizedProps {
@@ -17,7 +19,10 @@ interface LocalizedProps {
 const MaybeLocalized: React.FC<LocalizedProps> = ({ children, fluent }) => {
   if (!fluent)
     return (<>{children}</>);
-  return (<Localized {...fluent}>{children}</Localized>);
+
+  const { fallback, ...filtered } = fluent;
+
+  return (<Localized {...filtered}>{children}</Localized>);
 };
 
 export default MaybeLocalized;

src/soapbox/components/ui/toast/toast.tsx

@@ -1,9 +1,11 @@
+import { Localized } from '@fluent/react';
 import clsx from 'clsx';
 import React from 'react';
 import toast, { Toast as RHToast } from 'react-hot-toast';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
+import { type FluentOption } from 'soapbox/components/maybe-localized';
 import { ToastText, ToastType } from 'soapbox/toast';
 
 import HStack from '../hstack/hstack';
@@ -14,6 +16,13 @@ import Text from '../text/text';
 const renderText = (text: ToastText) => {
   if (typeof text === 'string') {
     return text;
+  } else if (Object.prototype.hasOwnProperty.call(text, 'id')) {
+    const { fallback, ...rest } = text as FluentOption;
+    return (
+      <Localized {...rest}>
+        <span>{fallback}</span>
+      </Localized>
+    );
   } else {
     return <FormattedMessage {...text} />;
   }

src/soapbox/features/account/components/header.tsx

@@ -25,6 +25,7 @@ import VerificationBadge from 'soapbox/components/verification-badge';
 import MovedNote from 'soapbox/features/account-timeline/components/moved-note';
 import ActionButton from 'soapbox/features/ui/components/action-button';
 import SubscriptionButton from 'soapbox/features/ui/components/subscription-button';
+import { formatMessage } from 'soapbox/fluent';
 import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
 import { normalizeAttachment } from 'soapbox/normalizers';
 import { ChatKeys, useChats } from 'soapbox/queries/chats';
@@ -53,8 +54,6 @@ const messages = defineMessages({
   blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
   domain_blocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Hidden domains' },
   mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
-  endorse: { id: 'account.endorse', defaultMessage: 'Feature on profile' },
-  unendorse: { id: 'account.unendorse', defaultMessage: 'Don\'t feature on profile' },
   removeFromFollowers: { id: 'account.remove_from_followers', defaultMessage: 'Remove this follower' },
   adminAccount: { id: 'status.admin_account', defaultMessage: 'Moderate @{name}' },
   add_or_remove_from_list: { id: 'account.add_or_remove_from_list', defaultMessage: 'Add or Remove from lists' },
@@ -160,11 +159,15 @@ const Header: React.FC<IHeader> = ({ account }) => {
   const onEndorseToggle = () => {
     if (account.relationship?.endorsed) {
       dispatch(unpinAccount(account.id))
-        .then(() => toast.success(intl.formatMessage(messages.userUnendorsed, { acct: account.acct })))
+        .then(() => toast.success(
+          formatMessage({ id: 'account-Toast--unendorsed', vars: { acct: account.acct } }),
+        ))
         .catch(() => { });
     } else {
       dispatch(pinAccount(account.id))
-        .then(() => toast.success(intl.formatMessage(messages.userEndorsed, { acct: account.acct })))
+        .then(() => toast.success(
+          formatMessage({ id: 'account-Toast--endorsed', vars: { acct: account.acct } }),
+        ))
         .catch(() => { });
     }
   };
@@ -406,7 +409,10 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
         if (features.accountEndorsements) {
           menu.push({
-            text: intl.formatMessage(account.relationship?.endorsed ? messages.unendorse : messages.endorse),
+            fluent: {
+              id: `account-Header--${account.relationship?.endorsed ? 'unendorse' : 'endorse'}--MenuItem`,
+            },
+            text: 'Endorse/Unendorse',
             action: onEndorseToggle,
             icon: require('@tabler/icons/user-check.svg'),
           });

src/soapbox/fluent.ts

@@ -1,5 +1,7 @@
 import { FluentBundle, FluentResource } from '@fluent/bundle';
 
+import { FluentOption } from './components/maybe-localized';
+
 const DEFAULT_LOCALE = 'en-US';
 const AVAILABLE_LOCALES_TO_LOCALIZED_NAMES: Record<string, string> = {
   'en-GB': 'English (GB)',
@@ -28,11 +30,14 @@ function* lazyParseBundle(fetchedMessages: Array<[string, string]>) {
   }
 }
 
+const formatMessage = (opts: FluentOption): FluentOption => opts;
+
 export {
   AVAILABLE_LOCALES,
   AVAILABLE_LOCALES_TO_LOCALIZED_NAMES,
   DEFAULT_LOCALE,
   fetchMessages,
+  formatMessage,
   getAvailableLocales,
   lazyParseBundle,
 };

src/soapbox/locales/en.json

@@ -1,6 +1,5 @@
 {
   "about.also_available": "Available in:",
-  "account.endorse": "Feature on profile",
   "account.endorse.success": "You are now featuring @{acct} on your profile",
   "account.familiar_followers": "Followed by {accounts}",
   "account.familiar_followers.empty": "No one you know follows {name}.",
@@ -40,8 +39,6 @@
   "account.subscribe.failure": "An error occurred trying to subscribe to this account.",
   "account.subscribe.success": "You have subscribed to this account.",
   "account.unblock_domain": "Unhide {domain}",
-  "account.unendorse": "Don't feature on profile",
-  "account.unendorse.success": "You are no longer featuring @{acct}",
   "account.unmute": "Unmute @{name}",
   "account.unsubscribe": "Unsubscribe to notifications from @{name}",
   "account.unsubscribe.failure": "An error occurred trying to unsubscribe to this account.",

src/soapbox/toast.tsx

@@ -3,10 +3,12 @@ import React from 'react';
 import toast from 'react-hot-toast';
 import { defineMessages, MessageDescriptor } from 'react-intl';
 
+import { FluentOption } from './components/maybe-localized';
 import { Toast } from './components/ui';
 import { httpErrorMessages } from './utils/errors';
 
-export type ToastText = string | MessageDescriptor
+// TODO: Remove MessageDescriptor support
+export type ToastText = string | MessageDescriptor | FluentOption
 export type ToastType = 'success' | 'error' | 'info'
 
 interface IToastOptions {