[Glitch] Add quotes_count to statuses stats

Port 2560242972 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/api_types/statuses.ts

@@ -96,6 +96,7 @@ export interface ApiStatusJSON {
   replies_count: number;
   reblogs_count: number;
   favorites_count: number;
+  quotes_count: number;
   edited_at?: string;
 
   favorited?: boolean;

app/javascript/flavours/glitch/components/status/reblog_button.tsx

@@ -160,7 +160,12 @@ export const StatusReblogButton: FC<ReblogButtonProps> = ({
         )}
         icon='retweet'
         iconComponent={iconComponent}
-        counter={counters ? (status.get('reblogs_count') as number) : undefined}
+        counter={
+          counters
+            ? (status.get('reblogs_count') as number) +
+              (status.get('quotes_count') as number)
+            : undefined
+        }
         active={isReblogged}
       />
     </Dropdown>
@@ -283,7 +288,12 @@ export const LegacyReblogButton: FC<ReblogButtonProps> = ({
       icon='retweet'
       iconComponent={iconComponent}
       onClick={!disabled ? handleClick : undefined}
-      counter={counters ? (status.get('reblogs_count') as number) : undefined}
+      counter={
+        counters
+          ? (status.get('reblogs_count') as number) +
+            (status.get('quotes_count') as number)
+          : undefined
+      }
     />
   );
 };

app/javascript/flavours/glitch/features/picture_in_picture/components/footer.tsx

@@ -246,7 +246,10 @@ export const Footer: React.FC<{
         icon='retweet'
         iconComponent={reblogIconComponent}
         onClick={handleReblogClick}
-        counter={status.get('reblogs_count') as number}
+        counter={
+          (status.get('reblogs_count') as number) +
+          (status.get('quotes_count') as number)
+        }
       />
 
       <IconButton

app/javascript/flavours/glitch/features/status/components/detailed_status.tsx

@@ -147,6 +147,7 @@ export const DetailedStatus: React.FC<{
   let media;
   let applicationLink;
   let reblogLink;
+  let quotesLink;
   let attachmentAspectRatio;
 
   if (properStatus.get('media_attachments').getIn([0, 'type']) === 'video') {
@@ -323,6 +324,23 @@ export const DetailedStatus: React.FC<{
     );
   }
 
+  if (['private', 'direct'].includes(status.get('visibility') as string)) {
+    quotesLink = '';
+  } else {
+    quotesLink = (
+      <span className='detailed-status__link'>
+        <span className='detailed-status__quotes'>
+          <AnimatedNumber value={status.get('quotes_count')} />
+        </span>
+        <FormattedMessage
+          id='status.quotes'
+          defaultMessage='{count, plural, one {quote} other {quotes}}'
+          values={{ count: status.get('quotes_count') }}
+        />
+      </span>
+    );
+  }
+
   const favouriteLink = (
     <Link
       to={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}/favourites`}
@@ -460,6 +478,8 @@ export const DetailedStatus: React.FC<{
           <div className='detailed-status__meta__line'>
             {reblogLink}
             {reblogLink && <>·</>}
+            {quotesLink}
+            {quotesLink && <>·</>}
             {favouriteLink}
           </div>
         </div>