Fix duplicate counters (#36844)

app/javascript/mastodon/features/status/components/detailed_status.tsx

@@ -271,13 +271,17 @@ export const DetailedStatus: React.FC<{
         to={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}/reblogs`}
         className='detailed-status__link'
       >
-        <span className='detailed-status__reblogs'>
-          <AnimatedNumber value={status.get('reblogs_count')} />
-        </span>
         <FormattedMessage
-          id='status.reblogs'
+          id='status.reblogs_count'
-          defaultMessage='{count, plural, one {boost} other {boosts}}'
+          defaultMessage='{count, plural, one {{counter} boost} other {{counter} boosts}}'
-          values={{ count: status.get('reblogs_count') }}
+          values={{
+            count: status.get('reblogs_count'),
+            counter: (
+              <span className='detailed-status__reblogs'>
+                <AnimatedNumber value={status.get('reblogs_count')} />
+              </span>
+            ),
+          }}
         />
       </Link>
     );
@@ -291,26 +295,34 @@ export const DetailedStatus: React.FC<{
         to={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}/quotes`}
         className='detailed-status__link'
       >
-        <span className='detailed-status__quotes'>
-          <AnimatedNumber value={status.get('quotes_count')} />
-        </span>
         <FormattedMessage
-          id='status.quotes'
+          id='status.quotes_count'
-          defaultMessage='{count, plural, one {quote} other {quotes}}'
+          defaultMessage='{count, plural, one {{counter} quote} other {{counter} quotes}}'
-          values={{ count: status.get('quotes_count') }}
+          values={{
+            count: status.get('quotes_count'),
+            counter: (
+              <span className='detailed-status__quotes'>
+                <AnimatedNumber value={status.get('quotes_count')} />
+              </span>
+            ),
+          }}
         />
       </Link>
     );
   } else {
     quotesLink = (
       <span className='detailed-status__link'>
-        <span className='detailed-status__quotes'>
-          <AnimatedNumber value={status.get('quotes_count')} />
-        </span>
         <FormattedMessage
-          id='status.quotes'
+          id='status.quotes_count'
-          defaultMessage='{count, plural, one {quote} other {quotes}}'
+          defaultMessage='{count, plural, one {{counter} quote} other {{counter} quotes}}'
-          values={{ count: status.get('quotes_count') }}
+          values={{
+            count: status.get('quotes_count'),
+            counter: (
+              <span className='detailed-status__quotes'>
+                <AnimatedNumber value={status.get('quotes_count')} />
+              </span>
+            ),
+          }}
         />
       </span>
     );
@@ -321,13 +333,17 @@ export const DetailedStatus: React.FC<{
       to={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}/favourites`}
       className='detailed-status__link'
     >
-      <span className='detailed-status__favorites'>
-        <AnimatedNumber value={status.get('favourites_count')} />
-      </span>
       <FormattedMessage
-        id='status.favourites'
+        id='status.favourites_count'
-        defaultMessage='{count, plural, one {favorite} other {favorites}}'
+        defaultMessage='{count, plural, one {{counter} favorite} other {{counter} favorites}}'
-        values={{ count: status.get('favourites_count') }}
+        values={{
+          count: status.get('favourites_count'),
+          counter: (
+            <span className='detailed-status__favorites'>
+              <AnimatedNumber value={status.get('favourites_count')} />
+            </span>
+          ),
+        }}
       />
     </Link>
   );

app/javascript/mastodon/locales/en.json

@@ -903,7 +903,7 @@
   "status.edited_x_times": "Edited {count, plural, one {{count} time} other {{count} times}}",
   "status.embed": "Get embed code",
   "status.favourite": "Favorite",
-  "status.favourites": "{count, plural, one {favorite} other {favorites}}",
+  "status.favourites_count": "{count, plural, one {{counter} favorite} other {{counter} favorites}}",
   "status.filter": "Filter this post",
   "status.history.created": "{name} created {date}",
   "status.history.edited": "{name} edited {date}",
@@ -935,17 +935,17 @@
   "status.quote_policy_change": "Change who can quote",
   "status.quote_post_author": "Quoted a post by @{name}",
   "status.quote_private": "Private posts cannot be quoted",
-  "status.quotes": "{count, plural, one {quote} other {quotes}}",
   "status.quotes.empty": "No one has quoted this post yet. When someone does, it will show up here.",
   "status.quotes.local_other_disclaimer": "Quotes rejected by the author will not be shown.",
   "status.quotes.remote_other_disclaimer": "Only quotes from {domain} are guaranteed to be shown here. Quotes rejected by the author will not be shown.",
+  "status.quotes_count": "{count, plural, one {{counter} quote} other {{counter} quotes}}",
   "status.read_more": "Read more",
   "status.reblog": "Boost",
   "status.reblog_or_quote": "Boost or quote",
   "status.reblog_private": "Share again with your followers",
   "status.reblogged_by": "{name} boosted",
-  "status.reblogs": "{count, plural, one {boost} other {boosts}}",
   "status.reblogs.empty": "No one has boosted this post yet. When someone does, they will show up here.",
+  "status.reblogs_count": "{count, plural, one {{counter} boost} other {{counter} boosts}}",
   "status.redraft": "Delete & re-draft",
   "status.remove_bookmark": "Remove bookmark",
   "status.remove_favourite": "Remove from favorites",