TimelineQueueButtonHeader: use shortNumberFormat

app/soapbox/components/__tests__/timeline_queue_button_header.test.js

@@ -33,7 +33,7 @@ describe('<TimelineQueueButtonHeader />', () => {
       undefined,
       { timelines: fromJS({ home: { totalQueuedItemsCount: 1 } }) },
     );
-    expect(screen.getByText('Click to see 1 new post', { hidden: true })).toBeInTheDocument();
+    expect(screen.getByText(/Click to see\s+1\s+new post/, { hidden: true })).toBeInTheDocument();
 
     render(
       <TimelineQueueButtonHeader
@@ -45,6 +45,6 @@ describe('<TimelineQueueButtonHeader />', () => {
       undefined,
       { timelines: fromJS({ home: { totalQueuedItemsCount: 9999999 } }) },
     );
-    expect(screen.getByText('Click to see 9999999 new posts', { hidden: true })).toBeInTheDocument();
+    expect(screen.getByText(/10.*M/, { hidden: true })).toBeInTheDocument();
   });
 });

app/soapbox/components/timeline_queue_button_header.tsx

@@ -6,6 +6,7 @@ import { useIntl, MessageDescriptor } from 'react-intl';
 import Icon from 'soapbox/components/icon';
 import { Text } from 'soapbox/components/ui';
 import { useAppSelector, useSettings } from 'soapbox/hooks';
+import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 interface ITimelineQueueButtonHeader {
   onClick: () => void,
@@ -73,7 +74,7 @@ const TimelineQueueButtonHeader: React.FC<ITimelineQueueButtonHeader> = ({
 
         {(count > 0) && (
           <Text theme='inherit' size='sm'>
-            {intl.formatMessage(message, { count })}
+            {intl.formatMessage(message, { count: shortNumberFormat(count) })}
           </Text>
         )}
       </a>