Merge remote-tracking branch 'origin/main' into arbitrary-value-classname

.eslintrc.json

@@ -317,7 +317,7 @@
 
     "formatjs/enforce-default-message": "error",
     "formatjs/enforce-id": "error",
-    "formatjs/no-literal-string-in-jsx": "warn"
+    "formatjs/no-literal-string-in-jsx": "error"
   },
   "overrides": [
     {

src/components/account.tsx

@@ -239,7 +239,7 @@ const Account = ({
 
             <Stack space={withAccountNote || note ? 1 : 0}>
               <HStack alignItems='center' space={1}>
-                <Text theme='muted' size='sm' direction='ltr' truncate>@{acct ?? username}</Text>
+                <Text theme='muted' size='sm' direction='ltr' truncate>@{acct ?? username}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
 
                 {account.pleroma?.favicon && (
                   <InstanceFavicon account={account} disabled={!withLinkToProfile} />
@@ -247,7 +247,7 @@ const Account = ({
 
                 {(timestamp) ? (
                   <>
-                    <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+                    <Text tag='span' theme='muted' size='sm'>&middot;</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
 
                     {timestampUrl ? (
                       <Link to={timestampUrl} className='hover:underline' onClick={(event) => event.stopPropagation()}>
@@ -261,7 +261,7 @@ const Account = ({
 
                 {approvalStatus && ['pending', 'rejected'].includes(approvalStatus) && (
                   <>
-                    <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+                    <Text tag='span' theme='muted' size='sm'>&middot;</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
 
                     <Text tag='span' theme='muted' size='sm'>
                       {approvalStatus === 'pending'
@@ -273,7 +273,7 @@ const Account = ({
 
                 {showEdit ? (
                   <>
-                    <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+                    <Text tag='span' theme='muted' size='sm'>&middot;</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
 
                     <Icon className='size-5 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/pencil.svg')} />
                   </>
@@ -281,7 +281,7 @@ const Account = ({
 
                 {actionType === 'muting' && account.mute_expires_at ? (
                   <>
-                    <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+                    <Text tag='span' theme='muted' size='sm'>&middot;</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
 
                     <Text theme='muted' size='sm'><RelativeTimestamp timestamp={account.mute_expires_at} futureDate /></Text>
                   </>

src/components/announcements/announcement.tsx

@@ -41,9 +41,11 @@ const Announcement: React.FC<IAnnouncement> = ({ announcement, emojiMap }) => {
             hour={skipTime ? undefined : 'numeric'}
             minute={skipTime ? undefined : '2-digit'}
           />
+          {/* eslint-disable formatjs/no-literal-string-in-jsx */}
           {' '}
           -
           {' '}
+          {/* eslint-enable formatjs/no-literal-string-in-jsx */}
           <FormattedDate
             value={endsAt}
             hour12

src/components/announcements/reaction.tsx

@@ -51,7 +51,7 @@ const Reaction: React.FC<IReaction> = ({ announcementId, reaction, emojiMap, sty
       onClick={handleClick}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
-      title={`:${shortCode}:`}
+      title={`:${shortCode}:`} // eslint-disable-line formatjs/no-literal-string-in-jsx
       style={style}
     >
       <span className='block size-4'>

src/components/display-name-inline.tsx

@@ -31,12 +31,13 @@ const DisplayNameInline: React.FC<IDisplayName> = ({ account, withSuffix = true
     </HStack>
   );
 
+  // eslint-disable-next-line formatjs/no-literal-string-in-jsx
   const suffix = (<span className='display-name'>@{getAcct(account, displayFqn)}</span>);
 
   return (
     <div className='flex max-w-80 flex-col items-center justify-center text-center sm:flex-row sm:gap-2'>
       {displayName}
-      <span className='hidden text-xl font-bold sm:block'>-</span>
+      <span className='hidden text-xl font-bold sm:block'>-</span> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
       {withSuffix && suffix}
     </div>
   );

src/components/display-name.tsx

@@ -33,7 +33,7 @@ const DisplayName: React.FC<IDisplayName> = ({ account, children, withSuffix = t
     </HStack>
   );
 
-  const suffix = (<span className='display-name__account'>@{getAcct(account, displayFqn)}</span>);
+  const suffix = (<span className='display-name__account'>@{getAcct(account, displayFqn)}</span>); // eslint-disable-line formatjs/no-literal-string-in-jsx
 
   return (
     <span className='display-name' data-testid='display-name'>

src/components/hashtag.tsx

@@ -20,7 +20,7 @@ const Hashtag: React.FC<IHashtag> = ({ hashtag }) => {
     <HStack alignItems='center' justifyContent='between' data-testid='hashtag'>
       <Stack>
         <Link to={`/tags/${hashtag.name}`} className='hover:underline'>
-          <Text tag='span' size='sm' weight='semibold'>#{hashtag.name}</Text>
+          <Text tag='span' size='sm' weight='semibold'>#{hashtag.name}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
         </Link>
 
         {Boolean(count) && (

src/components/media-gallery.tsx

@@ -228,7 +228,7 @@ const Item: React.FC<IItem> = ({
           {...conditionalAttributes}
         />
 
-        <span className='media-gallery__gifv__label'>GIF</span>
+        <span className='media-gallery__gifv__label'>GIF</span> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
       </div>
     );
   } else if (attachment.type === 'audio') {
@@ -276,7 +276,7 @@ const Item: React.FC<IItem> = ({
       style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}
     >
       {last && total > ATTACHMENT_LIMIT && (
-        <div className='media-gallery__item-overflow'>
+        <div className='media-gallery__item-overflow'> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
           +{total - ATTACHMENT_LIMIT + 1}
         </div>
       )}

src/components/polls/poll-footer.tsx

@@ -63,7 +63,7 @@ const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX
               </Text>
             </Tooltip>
 
-            <Text theme='muted'>&middot;</Text>
+            <Text theme='muted'>&middot;</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
           </>
         )}
 
@@ -75,7 +75,7 @@ const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX
               </Text>
             </button>
 
-            <Text theme='muted'>&middot;</Text>
+            <Text theme='muted'>&middot;</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
           </>
         )}
 
@@ -85,7 +85,7 @@ const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX
 
         {poll.expires_at !== null && (
           <>
-            <Text theme='muted'>&middot;</Text>
+            <Text theme='muted'>&middot;</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
             <Text weight='medium' theme='muted' data-testid='poll-expiration'>{timeRemaining}</Text>
           </>
         )}

src/components/polls/poll-option.tsx

@@ -152,7 +152,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
               )}
 
               <div className='text-primary-600 dark:text-white'>
-                <Text weight='medium' theme='inherit'>{Math.round(percent)}%</Text>
+                <Text weight='medium' theme='inherit'>{Math.round(percent)}%</Text>  {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
               </div>
             </HStack>
           </HStack>

src/components/site-error-boundary.tsx

@@ -105,16 +105,20 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
             </p>
 
             <Text theme='muted'>
+              {/* eslint-disable formatjs/no-literal-string-in-jsx */}
               <Text weight='medium' tag='span' theme='muted'>{sourceCode.displayName}:</Text>
 
               {' '}{sourceCode.version}
+              {/* eslint-enable formatjs/no-literal-string-in-jsx */}
             </Text>
 
             <div className='mt-10'>
               <a href='/' className='text-base font-medium text-primary-600 hover:underline dark:text-accent-blue'>
+                {/* eslint-disable formatjs/no-literal-string-in-jsx */}
                 <FormattedMessage id='alert.unexpected.return_home' defaultMessage='Return Home' />
                 {' '}
                 <span className='inline-block rtl:rotate-180' aria-hidden='true'>&rarr;</span>
+                {/* eslint-enable formatjs/no-literal-string-in-jsx */}
               </a>
             </div>
           </div>

src/components/status-action-bar.tsx

@@ -321,7 +321,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     dispatch(openModal('CONFIRM', {
       icon: require('@tabler/icons/outline/ban.svg'),
       heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
-      message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />,
+      message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />, // eslint-disable-line formatjs/no-literal-string-in-jsx
       confirm: intl.formatMessage(messages.blockConfirm),
       onConfirm: () => dispatch(blockAccount(account.id)),
       secondary: intl.formatMessage(messages.blockAndReport),

src/components/status-reply-mentions.tsx

@@ -56,7 +56,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
         to={`/@${account.acct}`}
         className='reply-mentions__account max-w-[200px] truncate align-bottom'
         onClick={(e) => e.stopPropagation()}
-      >
+      > {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
         @{shortenNostr(account.username)}
       </Link>
     );

src/components/status.tsx

@@ -334,6 +334,7 @@ const Status: React.FC<IStatus> = (props) => {
     return (
       <HotKeys handlers={minHandlers}>
         <div className={clsx('status__wrapper text-center', { focusable })} tabIndex={focusable ? 0 : undefined} ref={node}>
+          {/* eslint-disable formatjs/no-literal-string-in-jsx */}
           <Text theme='muted'>
             <FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {status.filtered.join(', ')}.
             {' '}
@@ -341,6 +342,7 @@ const Status: React.FC<IStatus> = (props) => {
               <FormattedMessage id='status.show_filter_reason' defaultMessage='Show anyway' />
             </button>
           </Text>
+          {/* eslint-enable formatjs/no-literal-string-in-jsx */}
         </div>
       </HotKeys>
     );

src/components/statuses/sensitive-content-overlay.tsx

@@ -118,9 +118,11 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
 
               {status.spoiler_text && (
                 <div className='py-4 italic'>
+                  {/* eslint-disable formatjs/no-literal-string-in-jsx */}
                   <Text className='line-clamp-6' theme='white' size='md' weight='medium'>
                     &ldquo;<span dangerouslySetInnerHTML={{ __html: status.spoilerHtml }} />&rdquo;
                   </Text>
+                  {/* eslint-enable formatjs/no-literal-string-in-jsx */}
                 </div>
               )}
             </div>

src/components/ui/button/button.test.tsx

@@ -13,14 +13,14 @@ describe('<Button />', () => {
   });
 
   it('renders the children', () => {
-    render(<Button><p>children</p></Button>);
+    render(<Button><p>children</p></Button>); // eslint-disable-line formatjs/no-literal-string-in-jsx
 
     expect(screen.getByRole('button')).toHaveTextContent('children');
   });
 
   it('renders the props.text instead of children', () => {
     const text = 'foo';
-    const children = <p>children</p>;
+    const children = <p>children</p>;  // eslint-disable-line formatjs/no-literal-string-in-jsx
     render(<Button text={text}>{children}</Button>);
 
     expect(screen.getByRole('button')).toHaveTextContent('foo');
@@ -63,13 +63,13 @@ describe('<Button />', () => {
 
   describe('to prop', () => {
     it('renders a link', () => {
-      render(<Button to='/'>link</Button>);
+      render(<Button to='/'>link</Button>); // eslint-disable-line formatjs/no-literal-string-in-jsx
 
       expect(screen.getByRole('link')).toBeInTheDocument();
     });
 
     it('does not render a link', () => {
-      render(<Button>link</Button>);
+      render(<Button>link</Button>); //eslint-disable-line formatjs/no-literal-string-in-jsx
 
       expect(screen.queryAllByRole('link')).toHaveLength(0);
     });
@@ -77,13 +77,13 @@ describe('<Button />', () => {
 
   describe('icon prop', () => {
     it('renders an icon', () => {
-      render(<Button icon='icon.png'>button</Button>);
+      render(<Button icon='icon.png'>button</Button>); // eslint-disable-line formatjs/no-literal-string-in-jsx
 
       expect(screen.getByTestId('icon')).toBeInTheDocument();
     });
 
     it('does not render an icon', () => {
-      render(<Button>button</Button>);
+      render(<Button>button</Button>); // eslint-disable-line formatjs/no-literal-string-in-jsx
 
       expect(screen.queryAllByTestId('icon')).toHaveLength(0);
     });

src/components/ui/card/card.test.tsx

@@ -12,7 +12,7 @@ describe('<Card />', () => {
           <CardTitle title='Card Title' />
         </CardHeader>
 
-        <CardBody>
+        <CardBody> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
           Card Body
         </CardBody>
       </Card>,

src/components/ui/form-actions/form-actions.test.tsx

@@ -6,7 +6,7 @@ import FormActions from './form-actions';
 
 describe('<FormActions />', () => {
   it('renders successfully', () => {
-    render(<FormActions><div data-testid='child'>child</div></FormActions>);
+    render(<FormActions><div data-testid='child'>child</div></FormActions>); {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
 
     expect(screen.getByTestId('child')).toBeInTheDocument();
   });

src/components/ui/form/form.test.tsx

@@ -8,7 +8,7 @@ describe('<Form />', () => {
   it('renders children', () => {
     const onSubmitMock = vi.fn();
     render(
-      <Form onSubmit={onSubmitMock}>children</Form>,
+      <Form onSubmit={onSubmitMock}>children</Form>, // eslint-disable-line formatjs/no-literal-string-in-jsx
     );
 
     expect(screen.getByTestId('form')).toHaveTextContent('children');
@@ -17,7 +17,7 @@ describe('<Form />', () => {
   it('handles onSubmit prop', () => {
     const onSubmitMock = vi.fn();
     render(
-      <Form onSubmit={onSubmitMock}>children</Form>,
+      <Form onSubmit={onSubmitMock}>children</Form>, // eslint-disable-line formatjs/no-literal-string-in-jsx
     );
 
     fireEvent.submit(

src/features/about/index.tsx

@@ -39,7 +39,7 @@ const AboutPage: React.FC = () => {
   const alsoAvailable = (defaultLocale) && (
     <div>
       <FormattedMessage id='about.also_available' defaultMessage='Available in:' />
-      {' '}
+      {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
       <ul className='inline list-none p-0'>
         <li className="inline after:content-['_·_']">
           <a href='#' onClick={() => setLocale(defaultLocale)}>

src/features/account-gallery/components/media-item.tsx

@@ -94,7 +94,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
           {...conditionalAttributes}
         />
 
-        <span className='media-gallery__gifv__label'>GIF</span>
+        <span className='media-gallery__gifv__label'>GIF</span> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
       </div>
     );
   } else if (attachment.type === 'audio') {

src/features/account/components/header.tsx

@@ -137,7 +137,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       dispatch(openModal('CONFIRM', {
         icon: require('@tabler/icons/outline/ban.svg'),
         heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
-        message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />,
+        message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />, // eslint-disable-line formatjs/no-literal-string-in-jsx
         confirm: intl.formatMessage(messages.blockConfirm),
         onConfirm: () => dispatch(blockAccount(account.id)),
         secondary: intl.formatMessage(messages.blockAndReport),
@@ -222,7 +222,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       const unfollowModal = getSettings(getState()).get('unfollowModal');
       if (unfollowModal) {
         dispatch(openModal('CONFIRM', {
-          message: <FormattedMessage id='confirmations.remove_from_followers.message' defaultMessage='Are you sure you want to remove {name} from your followers?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />,
+          message: <FormattedMessage id='confirmations.remove_from_followers.message' defaultMessage='Are you sure you want to remove {name} from your followers?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />, // eslint-disable-line formatjs/no-literal-string-in-jsx
           confirm: intl.formatMessage(messages.removeFromFollowersConfirm),
           onConfirm: () => dispatch(removeFromFollowers(account.id)),
         }));

src/features/admin/announcements.tsx

@@ -52,7 +52,7 @@ const Announcement: React.FC<IAnnouncement> = ({ announcement }) => {
                 <Text tag='span' size='sm' weight='medium'>
                   <FormattedMessage id='admin.announcements.starts_at' defaultMessage='Starts at:' />
                 </Text>
-                {' '}
+                {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                 <FormattedDate value={announcement.starts_at} year='2-digit' month='short' day='2-digit' weekday='short' />
               </Text>
             )}
@@ -61,7 +61,7 @@ const Announcement: React.FC<IAnnouncement> = ({ announcement }) => {
                 <Text tag='span' size='sm' weight='medium'>
                   <FormattedMessage id='admin.announcements.ends_at' defaultMessage='Ends at:' />
                 </Text>
-                {' '}
+                {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                 <FormattedDate value={announcement.ends_at} year='2-digit' month='short' day='2-digit' weekday='short' />
               </Text>
             )}

src/features/admin/components/report.tsx

@@ -96,7 +96,7 @@ const Report: React.FC<IReport> = ({ id }) => {
             defaultMessage='Report on {acct}'
             values={{ acct: (
               <HoverRefWrapper accountId={targetAccount.id} inline>
-                <Link to={`/@${acct}`} title={acct}>@{acct}</Link>
+                <Link to={`/@${acct}`} title={acct}>@{acct}</Link> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
               </HoverRefWrapper>
             ) }}
           />
@@ -129,14 +129,14 @@ const Report: React.FC<IReport> = ({ id }) => {
           )}
 
           <HStack space={1}>
-            <Text theme='muted' tag='span'>&mdash;</Text>
+            <Text theme='muted' tag='span'>&mdash;</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
 
             <HoverRefWrapper accountId={account.id} inline>
               <Link
                 to={`/@${reporterAcct}`}
                 title={reporterAcct}
                 className='text-primary-600 hover:underline dark:text-accent-blue'
-              >
+              > {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                 @{reporterAcct}
               </Link>
             </HoverRefWrapper>

src/features/admin/domains.tsx

@@ -71,7 +71,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
             <Text tag='span' size='sm' weight='medium'>
               <FormattedMessage id='admin.domains.name' defaultMessage='Domain:' />
             </Text>
-            {' '}
+            {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
             {domain.domain}
           </Text>
           <Text tag='span' size='sm' weight='medium'>

src/features/admin/relays.tsx

@@ -40,7 +40,7 @@ const Relay: React.FC<IRelay> = ({ relay }) => {
             <Text tag='span' size='sm' weight='medium'>
               <FormattedMessage id='admin.relays.url' defaultMessage='Instance URL:' />
             </Text>
-            {' '}
+            {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
             {relay.actor}
           </Text>
           {relay.followed_back && (

src/features/admin/rules.tsx

@@ -51,7 +51,7 @@ const Rule: React.FC<IRule> = ({ rule }) => {
             <Text tag='span' size='sm' weight='medium'>
               <FormattedMessage id='admin.rule.priority' defaultMessage='Priority:' />
             </Text>
-            {' '}
+            {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
             {rule.priority}
           </Text>
         )}

src/features/admin/tabs/dashboard.tsx

@@ -159,7 +159,7 @@ const Dashboard: React.FC = () => {
         </ListItem>
 
         <ListItem label={<FormattedMessage id='admin.software.backend' defaultMessage='Backend' />}>
-          <span>{v.software + (v.build ? `+${v.build}` : '')} {v.version}</span>
+          <span>{v.software + (v.build ? `+${v.build}` : '')} {v.version}</span> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
         </ListItem>
       </List>
 

src/features/aliases/index.tsx

@@ -75,7 +75,7 @@ const Aliases = () => {
             <HStack alignItems='center' justifyContent='between' space={1} key={i} className='p-2'>
               <div>
                 <Text tag='span' theme='muted'><FormattedMessage id='aliases.account_label' defaultMessage='Old account:' /></Text>
-                {' '}
+                {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                 <Text tag='span'>{alias}</Text>
               </div>
               <div className='flex items-center' role='button' tabIndex={0} onClick={handleFilterDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}>

src/features/audio/index.tsx

@@ -554,7 +554,7 @@ const Audio: React.FC<IAudio> = (props) => {
             <span className='video-player__time'>
               <span className='video-player__time-current'>{formatTime(Math.floor(currentTime))}</span>
               {getDuration() && (<>
-                <span className='video-player__time-sep'>/</span>
+                <span className='video-player__time-sep'>/</span> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                 <span className='video-player__time-total'>{formatTime(Math.floor(getDuration()))}</span>
               </>)}
             </span>

src/features/auth-login/components/password-reset-confirm.test.tsx

@@ -9,7 +9,7 @@ import PasswordResetConfirm from './password-reset-confirm';
 const TestableComponent = () => (
   <Switch>
     <Route path='/edit' exact><PasswordResetConfirm /></Route>
-    <Route path='/' exact><span data-testid='home'>Homepage</span></Route>
+    <Route path='/' exact><span data-testid='home'>Homepage</span></Route> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
   </Switch>
 );
 

src/features/chats/components/chat-list-item.tsx

@@ -84,7 +84,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
 
           <Stack alignItems='start' className='overflow-hidden'>
             <div className='flex w-full grow items-center space-x-1'>
-              <Text weight='bold' size='sm' align='left' truncate>{chat.account?.display_name || `@${chat.account.username}`}</Text>
+              <Text weight='bold' size='sm' align='left' truncate>{chat.account?.display_name || `@${chat.account.username}`}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
               {chat.account?.verified && <VerificationBadge />}
             </div>
 

src/features/chats/components/chat-message-list-intro.tsx

@@ -74,13 +74,13 @@ const ChatMessageListIntro = () => {
         <Text size='lg' align='center'>
           {needsAcceptance ? (
             <>
-              <Text tag='span' weight='semibold'>@{chat.account.acct}</Text>
+              <Text tag='span' weight='semibold'>@{chat.account.acct}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
               {' '}
               <Text tag='span'>{intl.formatMessage(messages.intro)}</Text>
             </>
           ) : (
             <Link to={`/@${chat.account.acct}`}>
-              <Text tag='span' theme='inherit' weight='semibold'>@{chat.account.acct}</Text>
+              <Text tag='span' theme='inherit' weight='semibold'>@{chat.account.acct}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
             </Link>
           )}
         </Text>

src/features/chats/components/chat-message-list.tsx

@@ -195,7 +195,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
             <>
               <Text tag='span'>{intl.formatMessage(messages.blockedBy)}</Text>
               {' '}
-              <Text tag='span' theme='primary'>@{chat.account.acct}</Text>
+              <Text tag='span' theme='primary'>@{chat.account.acct}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
             </>
           </Text>
         </Stack>

src/features/chats/components/chat-page/components/chat-page-main.tsx

@@ -134,7 +134,7 @@ const ChatPageMain = () => {
             <div className='flex w-full grow items-center space-x-1'>
               <Link to={`/@${chat.account.acct}`}>
                 <Text weight='bold' size='sm' align='left' truncate>
-                  {chat.account.display_name || `@${chat.account.username}`}
+                  {chat.account.display_name || `@${chat.account.username}`} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                 </Text>
               </Link>
               {chat.account.verified && <VerificationBadge />}
@@ -173,7 +173,7 @@ const ChatPageMain = () => {
                 <Avatar src={chat.account.avatar_static} size={50} />
                 <Stack>
                   <Text weight='semibold'>{chat.account.display_name}</Text>
-                  <Text size='sm' theme='primary'>@{chat.account.acct}</Text>
+                  <Text size='sm' theme='primary'>@{chat.account.acct}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                 </Stack>
               </HStack>
 

src/features/chats/components/chat-pane-header.test.tsx

@@ -27,7 +27,7 @@ describe('<ChatPaneHeader />', () => {
     describe('when it is a node', () => {
       it('renders the title', () => {
         const title = (
-          <div><p>hello world</p></div>
+          <div><p>hello world</p></div> // eslint-disable-line formatjs/no-literal-string-in-jsx
         );
         render(<ChatPaneHeader title={title} onToggle={vi.fn()} isOpen />);
 

src/features/chats/components/chat-search/chat-search.test.tsx

@@ -12,7 +12,7 @@ const renderComponent = () => render(
   <VirtuosoMockContext.Provider value={{ viewportHeight: 300, itemHeight: 100 }}>
     <ChatProvider>
       <ChatSearch />
-    </ChatProvider>,
+    </ChatProvider>, {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
   </VirtuosoMockContext.Provider>,
 );
 

src/features/chats/components/chat-search/results.tsx

@@ -41,7 +41,7 @@ const Results = ({ accountSearchResult, onSelect }: IResults) => {
             <Text weight='bold' size='sm' truncate>{account.display_name}</Text>
             {account.verified && <VerificationBadge />}
           </div>
-          <Text size='sm' weight='medium' theme='muted' direction='ltr' truncate>@{account.acct}</Text>
+          <Text size='sm' weight='medium' theme='muted' direction='ltr' truncate>@{account.acct}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
         </Stack>
       </HStack>
     </button>

src/features/chats/components/chat-widget.test.tsx

@@ -35,8 +35,10 @@ describe('<ChatWidget />', () => {
     it('hides the widget', async () => {
       const App = () => (
         <Switch>
+          {/* eslint-disable formatjs/no-literal-string-in-jsx */}
           <Route path='/chats' exact><span>Chats page <ChatWidget /></span></Route>
           <Route path='/' exact><span data-testid='home'>Homepage <ChatWidget /></span></Route>
+          {/* eslint-enable formatjs/no-literal-string-in-jsx */}
         </Switch>
       );
 
@@ -85,8 +87,10 @@ describe('<ChatWidget />', () => {
     it('shows the widget', async () => {
       const App = () => (
         <Switch>
+          {/* eslint-disable formatjs/no-literal-string-in-jsx */}
           <Route path='/chats' exact><span>Chats page <ChatWidget /></span></Route>
           <Route path='/' exact><span data-testid='home'>Homepage <ChatWidget /></span></Route>
+          {/* eslint-enable formatjs/no-literal-string-in-jsx */}
         </Switch>
       );
 

src/features/chats/components/chat-widget/chat-pane-header.tsx

@@ -43,9 +43,11 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
 
         {(typeof unreadCount !== 'undefined' && unreadCount > 0) && (
           <HStack alignItems='center' space={2}>
+            {/* eslint-disable formatjs/no-literal-string-in-jsx */}
             <Text weight='semibold' data-testid='unread-count'>
               ({unreadCount})
             </Text>
+            {/* eslint-enable formatjs/no-literal-string-in-jsx */}
 
             <div className='size-2.5 rounded-full bg-accent-300' />
           </HStack>

src/features/chats/components/chat-widget/chat-settings.tsx

@@ -112,7 +112,7 @@ const ChatSettings = () => {
           <Avatar src={chat.account.avatar_static} size={50} />
           <Stack>
             <Text weight='semibold'>{chat.account.display_name}</Text>
-            <Text size='sm' theme='primary'>@{chat.account.acct}</Text>
+            <Text size='sm' theme='primary'>@{chat.account.acct}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
           </Stack>
         </HStack>
 

src/features/chats/components/chat-widget/chat-window.tsx

@@ -88,7 +88,7 @@ const ChatWindow = () => {
               <Stack alignItems='start'>
                 <LinkWrapper enabled={isOpen} to={`/@${chat.account.acct}`}>
                   <div className='flex grow items-center space-x-1'>
-                    <Text size='sm' weight='bold' truncate>{chat.account.display_name || `@${chat.account.acct}`}</Text>
+                    <Text size='sm' weight='bold' truncate>{chat.account.display_name || `@${chat.account.acct}`}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                     {chat.account.verified && <VerificationBadge />}
                   </div>
                 </LinkWrapper>

src/features/compose/components/polls/poll-form.tsx

@@ -74,7 +74,7 @@ const Option: React.FC<IOption> = ({
     <HStack alignItems='center' justifyContent='between' space={4}>
       <HStack alignItems='center' space={2} grow>
         <div className='w-6'>
-          <Text weight='bold'>{index + 1}.</Text>
+          <Text weight='bold'>{index + 1}.</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
         </div>
 
         <AutosuggestInput

src/features/compose/components/reply-mentions.tsx

@@ -55,7 +55,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
   const accounts = to.slice(0, 2).map((acct: string) => {
     const username = acct.split('@')[0];
     return (
-      <span className='reply-mentions__account'>
+      <span className='reply-mentions__account'> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
         @{shortenNostr(username)}
       </span>
     );

src/features/developers/developers-challenge.tsx

@@ -41,11 +41,13 @@ const DevelopersChallenge = () => {
     <Column label={intl.formatMessage(messages.heading)}>
       <Form onSubmit={handleSubmit}>
         <Text>
+          {/* eslint-disable formatjs/no-literal-string-in-jsx */}
           <FormattedMessage
             id='developers.challenge.message'
             defaultMessage='What is the result of calling {function}?'
             values={{ function: <span className='font-mono'>soapbox()</span> }}
           />
+          {/* eslint-enable formatjs/no-literal-string-in-jsx */}
         </Text>
 
         <Text tag='pre' family='mono' theme='muted'>

src/features/event/components/event-header.tsx

@@ -164,7 +164,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
     dispatch(openModal('CONFIRM', {
       icon: require('@tabler/icons/outline/ban.svg'),
       heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
-      message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.acct}</strong> }} />,
+      message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>{/* eslint-disable-line formatjs/no-literal-string-in-jsx */}@{account.acct}</strong> }} />,
       confirm: intl.formatMessage(messages.blockConfirm),
       onConfirm: () => dispatch(blockAccount(account.id)),
       secondary: intl.formatMessage(messages.blockAndReport),

src/features/feed-suggestions/feed-suggestions.tsx

@@ -50,7 +50,7 @@ const SuggestionItem: React.FC<ISuggestionItem> = ({ accountId }) => {
               {account.verified && <VerificationBadge />}
             </HStack>
 
-            <Text theme='muted' align='center' size='sm' truncate>@{account.acct}</Text>
+            <Text theme='muted' align='center' size='sm' truncate>@{account.acct}</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
           </Stack>
         </Stack>
       </Link>

src/features/filters/index.tsx

@@ -86,12 +86,12 @@ const Filters = () => {
                 <Stack className='grow' space={1}>
                   <Text weight='medium'>
                     <FormattedMessage id='filters.filters_list_phrases_label' defaultMessage='Keywords or phrases:' />
-                    {' '}
+                    {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                     <Text theme='muted' tag='span'>{filter.keywords.map(keyword => keyword.keyword).join(', ')}</Text>
                   </Text>
                   <Text weight='medium'>
                     <FormattedMessage id='filters.filters_list_context_label' defaultMessage='Filter contexts:' />
-                    {' '}
+                    {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                     <Text theme='muted' tag='span'>{filter.context.map(context => contexts[context] ? intl.formatMessage(contexts[context]) : context).join(', ')}</Text>
                   </Text>
                   <HStack space={4} wrap>

src/features/group/components/group-member-count.tsx

@@ -15,7 +15,7 @@ const GroupMemberCount = ({ group }: IGroupMemberCount) => {
     <Link to={`/group/${group.slug}/members`} className='hover:underline'>
       <Text theme='inherit' tag='span' size='sm' weight='medium' data-testid='group-member-count'>
         {shortNumberFormat(group.members_count)}
-        {' '}
+        {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
         <FormattedMessage
           id='groups.discover.search.results.member_count'
           defaultMessage='{members, plural, one {member} other {members}}'

src/features/group/components/group-tag-list-item.tsx

@@ -145,6 +145,7 @@ const GroupTagListItem = (props: IGroupMemberListItem) => {
     >
       <Link to={`/group/${group.slug}/tag/${tag.id}`} className='group grow'>
         <Stack>
+          {/* eslint-disable formatjs/no-literal-string-in-jsx */}
           <Text
             weight='bold'
             theme={(tag.visible || !isOwner) ? 'default' : 'subtle'}
@@ -153,9 +154,12 @@ const GroupTagListItem = (props: IGroupMemberListItem) => {
           >
             #{tag.name}
           </Text>
+          {/* eslint-enable formatjs/no-literal-string-in-jsx */}
           <Text size='sm' theme={(tag.visible || !isOwner) ? 'muted' : 'subtle'}>
+            {/* eslint-disable formatjs/no-literal-string-in-jsx */}
             {intl.formatMessage(messages.total)}:
             {' '}
+            {/* eslint-enable formatjs/no-literal-string-in-jsx */}
             <Text size='sm' theme='inherit' weight='semibold' tag='span'>
               {shortNumberFormat(tag.uses)}
             </Text>

src/features/groups/components/discover/group-grid-item.tsx

@@ -58,7 +58,7 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDiv
 
               <HStack alignItems='center' space={1}>
                 <GroupPrivacy group={group} />
-                <span>&bull;</span>
+                <span>&bull;</span> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                 <GroupMemberCount group={group} />
               </HStack>
             </Stack>

src/features/groups/components/discover/group-list-item.tsx

@@ -52,10 +52,10 @@ const GroupListItem = (props: IGroupListItem) => {
 
               {typeof group.members_count !== 'undefined' && (
                 <>
-                  <span>&bull;</span>
+                  <span>&bull;</span> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                   <Text theme='inherit' tag='span' size='sm' weight='medium'>
                     {shortNumberFormat(group.members_count)}
-                    {' '}
+                    {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
                     <FormattedMessage
                       id='groups.discover.search.results.member_count'
                       defaultMessage='{members, plural, one {member} other {members}}'

src/features/groups/components/discover/search/blankslate.test.tsx

@@ -19,8 +19,8 @@ describe('<Blankslate />', () => {
     it('should render correctly', () => {
       render(
         <Blankslate
-          title={<span>Title</span>}
+          title={<span>Title</span>} /* eslint-disable-line formatjs/no-literal-string-in-jsx */
-          subtitle={<span>Subtitle</span>}
+          subtitle={<span>Subtitle</span>} /* eslint-disable-line formatjs/no-literal-string-in-jsx */
         />);
 
       expect(screen.getByTestId('no-results')).toHaveTextContent('Title');

src/features/groups/components/discover/tag-list-item.tsx

@@ -23,17 +23,19 @@ const TagListItem = (props: ITagListItem) => {
         <Text
           weight='bold'
           className='group-hover:text-primary-600 group-hover:underline dark:group-hover:text-accent-blue'
-        >
+        > {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
           #{tag.name}
         </Text>
 
         <Text size='sm' theme='muted' weight='medium'>
+          {/* eslint-disable formatjs/no-literal-string-in-jsx */}
           <FormattedMessage
             id='groups.discovery.tags.no_of_groups'
             defaultMessage='Number of groups'
           />
           :{' '}
           {tag.groups}
+          {/* eslint-enable formatjs/no-literal-string-in-jsx */}
         </Text>
       </Stack>
     </Link>

src/features/placeholder/components/placeholder-group-search.tsx

@@ -27,6 +27,7 @@ export default ({ withJoinAction = true }: { withJoinAction?: boolean }) => {
               {generateText(6)}
             </Text>
 
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             <span>&bull;</span>
 
             <Text theme='inherit' tag='span' size='sm' weight='medium'>

src/features/security/mfa/otp-confirm-form.tsx

@@ -66,6 +66,7 @@ const OtpConfirmForm: React.FC = () => {
     <Stack space={4}>
       <Form onSubmit={handleSubmit}>
         <Stack>
+          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
           <Text weight='semibold' size='lg'>
             1. <FormattedMessage id='mfa.mfa_setup_scan_title' defaultMessage='Scan' />
           </Text>
@@ -78,6 +79,7 @@ const OtpConfirmForm: React.FC = () => {
         <QRCode className='rounded-lg' value={state.qrCodeURI} includeMargin />
         {state.confirmKey}
 
+        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
         <Text weight='semibold' size='lg'>
           2. <FormattedMessage id='mfa.mfa_setup_verify_title' defaultMessage='Verify' />
         </Text>

src/features/soapbox-config/components/site-preview.tsx

@@ -36,6 +36,7 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
 
   return (
     <div className={bodyClass}>
+      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
       <style>{`.site-preview {${generateThemeCss(soapboxConfig)}}`}</style>
       <BackgroundShapes position='absolute' />
 

src/features/ui/components/funding-panel.tsx

@@ -42,8 +42,10 @@ const FundingPanel: React.FC = () => {
   let ratioText;
 
   if (goalReached) {
+    // eslint-disable-next-line formatjs/no-literal-string-in-jsx
     ratioText = <><strong>{moneyFormat(goal)}</strong> per month <span>&mdash; reached!</span></>;
   } else {
+    // eslint-disable-next-line formatjs/no-literal-string-in-jsx
     ratioText = <><strong>{moneyFormat(amount)} out of {moneyFormat(goal)}</strong> per month</>;
   }
 

src/features/ui/components/modals/boost-modal.tsx

@@ -38,6 +38,7 @@ const BoostModal: React.FC<IBoostModal> = ({ status, onReblog, onClose }) => {
         <ReplyIndicator status={status} hideActions />
 
         <Text>
+          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
           <FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon className='inline-block align-middle' src={require('@tabler/icons/outline/repeat.svg')} /></span> }} />
         </Text>
       </Stack>

src/features/ui/components/modals/hotkeys-modal.tsx

@@ -38,36 +38,44 @@ const HotkeysModal: React.FC<IHotkeysModal> = ({ onClose }) => {
           </thead>
           <tbody>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>r</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.reply' defaultMessage='to reply' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>m</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.mention' defaultMessage='to mention author' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>p</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.profile' defaultMessage="to open author's profile" /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>f</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.favourite' defaultMessage='to like' /></TableCell>
             </tr>
             {features.emojiReacts && (
               <tr>
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                 <TableCell><Hotkey>e</Hotkey></TableCell>
                 <TableCell><FormattedMessage id='keyboard_shortcuts.react' defaultMessage='to react' /></TableCell>
               </tr>
             )}
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>b</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.boost' defaultMessage='to repost' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>enter</Hotkey>, <Hotkey>o</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.enter' defaultMessage='to open post' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>a</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.open_media' defaultMessage='to open media' /></TableCell>
             </tr>
@@ -82,41 +90,50 @@ const HotkeysModal: React.FC<IHotkeysModal> = ({ onClose }) => {
           <tbody>
             {features.spoilers && (
               <tr>
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                 <TableCell><Hotkey>x</Hotkey></TableCell>
                 <TableCell><FormattedMessage id='keyboard_shortcuts.toggle_hidden' defaultMessage='to show/hide text behind CW' /></TableCell>
               </tr>
             )}
             {features.spoilers && (
               <tr>
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                 <TableCell><Hotkey>h</Hotkey></TableCell>
                 <TableCell><FormattedMessage id='keyboard_shortcuts.toggle_sensitivity' defaultMessage='to show/hide media' /></TableCell>
               </tr>
             )}
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>up</Hotkey>, <Hotkey>k</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.up' defaultMessage='to move up in the list' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>down</Hotkey>, <Hotkey>j</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.down' defaultMessage='to move down in the list' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>n</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.compose' defaultMessage='to open the compose textarea' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>alt</Hotkey> + <Hotkey>n</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.toot' defaultMessage='to start a new post' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>backspace</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.back' defaultMessage='to navigate back' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>s</Hotkey>, <Hotkey>/</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.search' defaultMessage='to focus search' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>esc</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.unfocus' defaultMessage='to un-focus compose textarea/search' /></TableCell>
             </tr>
@@ -130,40 +147,49 @@ const HotkeysModal: React.FC<IHotkeysModal> = ({ onClose }) => {
           </thead>
           <tbody>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>g</Hotkey> + <Hotkey>h</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.home' defaultMessage='to open home timeline' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>g</Hotkey> + <Hotkey>n</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.notifications' defaultMessage='to open notifications column' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>g</Hotkey> + <Hotkey>f</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.favourites' defaultMessage='to open likes list' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>g</Hotkey> + <Hotkey>p</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.pinned' defaultMessage='to open pinned posts list' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>g</Hotkey> + <Hotkey>u</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.my_profile' defaultMessage='to open your profile' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>g</Hotkey> + <Hotkey>b</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.blocked' defaultMessage='to open blocked users list' /></TableCell>
             </tr>
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>g</Hotkey> + <Hotkey>m</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.muted' defaultMessage='to open muted users list' /></TableCell>
             </tr>
             {features.followRequests && (
               <tr>
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                 <TableCell><Hotkey>g</Hotkey> + <Hotkey>r</Hotkey></TableCell>
                 <TableCell><FormattedMessage id='keyboard_shortcuts.requests' defaultMessage='to open follow requests list' /></TableCell>
               </tr>
             )}
             <tr>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <TableCell><Hotkey>?</Hotkey></TableCell>
               <TableCell><FormattedMessage id='keyboard_shortcuts.legend' defaultMessage='to display this legend' /></TableCell>
             </tr>

src/features/ui/components/modals/mute-modal.tsx

@@ -59,6 +59,7 @@ const MuteModal = () => {
           <FormattedMessage
             id='confirmations.mute.message'
             defaultMessage='Are you sure you want to mute {name}?'
+            // eslint-disable-next-line formatjs/no-literal-string-in-jsx
             values={{ name: <strong className='break-words'>@{account.acct}</strong> }}
           />
         </Text>
@@ -93,6 +94,7 @@ const MuteModal = () => {
 
             {duration !== 0 && (
               <Stack space={2}>
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                 <Text weight='medium'><FormattedMessage id='mute_modal.duration' defaultMessage='Duration' />: </Text>
 
                 <DurationSelector onDurationChange={handleChangeMuteDuration} />

src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx

@@ -135,6 +135,7 @@ const CoverPhotoSelectionModal: React.FC<ICoverPhotoSelectionModal> = ({ onClose
             )}
 
             <Text weight='bold' size='sm'>{account?.display_name}</Text>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             <Text theme='muted' size='sm'>@{account?.username}</Text>
           </div>
         </div>

src/features/ui/components/modals/report-modal/report-modal.tsx

@@ -266,6 +266,7 @@ const ReportModal = ({ onClose }: IReportModal) => {
       case ReportableEntities.GROUP:
         return intl.formatMessage(messages.reportGroup);
       default:
+        // eslint-disable-next-line formatjs/no-literal-string-in-jsx
         return <FormattedMessage id='report.target' defaultMessage='Reporting {target}' values={{ target: <strong>@{account?.acct}</strong> }} />;
     }
   };

src/features/ui/components/modals/zap-split/display-name-row.tsx

@@ -37,11 +37,13 @@ const DisplayNameRow: React.FC<IDisplayName> = ({ account, withSuffix = true })
     </HStack>
   );
 
+  // eslint-disable-next-line formatjs/no-literal-string-in-jsx
   const suffix = (<span className='display-name'>@{getAcct(account, displayFqn)}</span>);
 
   return (
     <div className='flex max-w-80 flex-col items-center justify-center text-center sm:flex-row sm:gap-2'>
       {displayName}
+      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
       <span className='hidden text-2xl font-bold sm:block'>-</span>
       {withSuffix && suffix}
     </div>

src/features/ui/components/modals/zap-split/zap-split-modal.tsx

@@ -98,6 +98,7 @@ const ZapSplitModal: React.FC<IZapSplitModal> = ({ zapSplitAccounts, onClose, sp
         )}
         <p className='absolute -bottom-4 -right-2'>
           <span className='font-bold'>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             {currentStep + 1}/{zapSplitAccounts.length}
           </span>
         </p>

src/features/ui/components/modals/zap-split/zap-split.tsx

@@ -48,6 +48,7 @@ const ZapSplit = ({ zapData, zapAmount, invoice, onNext, isLastStep, onFinish }:
           <div className='bg-grey-500 dark:border-grey-800 -mx-4 w-full border-b border-solid sm:-mx-10' />
 
           <Stack justifyContent='center' alignItems='center' className='min-w-72 text-center' space={4}>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             <h3 className='text-xl font-bold'>
               Help this community grow!
             </h3>
@@ -65,6 +66,7 @@ const ZapSplit = ({ zapData, zapAmount, invoice, onNext, isLastStep, onFinish }:
 
         <div className='flex justify-center'>
           <div className='box-shadow:none rounded-none border-0 border-b-2 p-0.5 text-center !ring-0 dark:bg-transparent'>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             <span className='!text-5xl font-bold'>{zapAmount}</span> sats
           </div>
         </div>

src/features/ui/components/new-account-zap-split.tsx

@@ -75,6 +75,7 @@ const AddNewAccount: React.FC<AddNewAccountProps> = ({
 
         <HStack space={2} className='w-full md:justify-end'>
           <div className='flex w-[96%] flex-col md:w-40'>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             {formattedWeight(newWeight)}%
             <Slider value={newWeight} onChange={(e) => handleChange(e)} />
           </div>

src/features/ui/components/profile-info-panel.tsx

@@ -122,6 +122,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
         <Stack space={2}>
           <Stack>
             <HStack space={1} alignItems='center'>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <Text size='sm' theme='muted' direction='ltr' truncate>
                 @{username}
               </Text>
@@ -154,6 +155,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           </HStack>
 
           <HStack alignItems='center' space={0.5}>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             <Text size='sm' theme='muted' direction='ltr' truncate>
               @{displayFqn ? account.fqn : account.acct}
             </Text>

src/features/ui/components/user-panel.tsx

@@ -70,6 +70,7 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
           </Link>
 
           <HStack>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             <Text size='sm' theme='muted' direction='ltr' truncate>
               @{getAcct(account, fqn)}
             </Text>

src/features/video/index.tsx

@@ -544,6 +544,7 @@ const Video: React.FC<IVideo> = ({
             {(detailed || fullscreen) && (
               <span>
                 <span className='video-player__time-current'>{formatTime(currentTime)}</span>
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                 <span className='video-player__time-sep'>/</span>
                 <span className='video-player__time-total'>{formatTime(duration)}</span>
               </span>

src/features/zap/components/zap-pay-request-form.tsx

@@ -130,6 +130,7 @@ const ZapPayRequestForm = ({ account, status, onClose }: IZapPayRequestForm) =>
             type='text' onChange={handleCustomAmount} value={zapAmount}
             className='box-shadow:none max-w-20 rounded-none border-0 border-b-4 p-0 text-center !text-2xl font-bold !ring-0 dark:bg-transparent sm:max-w-28 sm:p-0.5 sm:!text-4xl'
           />
+          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
           {hasZapSplit && <p className='absolute right-0 font-bold sm:-right-6 sm:text-xl'>sats</p>}
         </div>
 

src/features/zap/components/zap-split-account-item.tsx

@@ -23,6 +23,7 @@ export const ZapSplitSlider: React.FC<IZapSplitSlider> = ({ initialWeight, onWei
 
   return (
     <div className={clsx('flex flex-col', width)}>
+      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
       {formattedWeight(value)}%
       <Slider
         value={value}

src/init/soapbox-head.tsx

@@ -44,7 +44,9 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
       <Helmet>
         <html lang={locale} className={clsx('h-full', { 'dark': theme === 'dark', 'dark black': theme === 'black' })} />
         <body className={bodyClass} dir={direction} />
+        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
         {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
+        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
         {['dark', 'black'].includes(theme) && <style type='text/css'>{':root { color-scheme: dark; }'}</style>}
         <meta name='theme-color' content={soapboxConfig.brandColor} />
       </Helmet>

src/toast.test.tsx

@@ -13,6 +13,7 @@ function renderApp() {
     toast,
     ...render(
       <IntlProvider locale='en'>
+        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
         <Toaster />,
       </IntlProvider>,
     ),

src/utils/numbers.tsx

@@ -34,6 +34,7 @@ export const shortNumberFormat = (number: any, max?: number): React.ReactNode =>
   }
 
   if (max && value > max) {
+    // eslint-disable-next-line formatjs/no-literal-string-in-jsx
     return <span>{max}+</span>;
   }