[Glitch] Collection accounts editor: Show info badge on accounts that haven't posted in over a week

Port 3d332948703c6bb02d8505e5a12ad6676791980c to glitch-soc

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

app/javascript/flavours/glitch/components/account/index.tsx

@@ -74,6 +74,7 @@ interface AccountProps {
   defaultAction?: 'block' | 'mute';
   withBio?: boolean;
   withMenu?: boolean;
+  extraAccountInfo?: React.ReactNode;
   children?: React.ReactNode;
 }
 
@@ -85,6 +86,7 @@ export const Account: React.FC<AccountProps> = ({
   defaultAction,
   withBio,
   withMenu = true,
+  extraAccountInfo,
   children,
 }) => {
   const intl = useIntl();
@@ -349,6 +351,8 @@ export const Account: React.FC<AccountProps> = ({
                 />
               </div>
             ))}
+
+          {extraAccountInfo}
         </div>
 
         {!minimal && (

app/javascript/flavours/glitch/features/collections/editor/accounts.tsx

@@ -6,12 +6,14 @@ import { useHistory, useLocation } from 'react-router-dom';
 
 import CancelIcon from '@/material-icons/400-24px/cancel.svg?react';
 import CheckIcon from '@/material-icons/400-24px/check.svg?react';
+import WarningIcon from '@/material-icons/400-24px/warning.svg?react';
 import { showAlertForError } from 'flavours/glitch/actions/alerts';
 import { openModal } from 'flavours/glitch/actions/modal';
 import { apiFollowAccount } from 'flavours/glitch/api/accounts';
 import type { ApiCollectionJSON } from 'flavours/glitch/api_types/collections';
 import { Account } from 'flavours/glitch/components/account';
 import { Avatar } from 'flavours/glitch/components/avatar';
+import { Badge } from 'flavours/glitch/components/badge';
 import { Button } from 'flavours/glitch/components/button';
 import { Callout } from 'flavours/glitch/components/callout';
 import { DisplayName } from 'flavours/glitch/components/display_name';
@@ -40,19 +42,51 @@ import { WizardStepHeader } from './wizard_step_header';
 const MIN_ACCOUNT_COUNT = 1;
 const MAX_ACCOUNT_COUNT = 25;
 
+function isOlderThanAWeek(date?: string): boolean {
+  if (!date) return false;
+
+  const targetDate = new Date(date);
+  const sevenDaysAgo = new Date();
+  sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
+  return targetDate < sevenDaysAgo;
+}
+
 const AddedAccountItem: React.FC<{
   accountId: string;
   isRemovable: boolean;
   onRemove: (id: string) => void;
 }> = ({ accountId, isRemovable, onRemove }) => {
   const intl = useIntl();
+  const account = useAccount(accountId);
 
   const handleRemoveAccount = useCallback(() => {
     onRemove(accountId);
   }, [accountId, onRemove]);
 
+  const lastPostHint = useMemo(
+    () =>
+      isOlderThanAWeek(account?.last_status_at) && (
+        <Badge
+          label={
+            <FormattedMessage
+              id='collections.old_last_post_note'
+              defaultMessage='Last posted over a week ago'
+            />
+          }
+          icon={<WarningIcon />}
+          className={classes.accountBadge}
+        />
+      ),
+    [account?.last_status_at],
+  );
+
   return (
-    <Account minimal key={accountId} id={accountId}>
+    <Account
+      minimal
+      key={accountId}
+      id={accountId}
+      extraAccountInfo={lastPostHint}
+    >
       {isRemovable && (
         <IconButton
           title={intl.formatMessage({

app/javascript/flavours/glitch/features/collections/editor/styles.module.scss

@@ -86,3 +86,12 @@
   margin-inline: auto;
   gap: 8px;
 }
+
+.accountBadge {
+  margin-inline-start: 56px;
+
+  @container (width < 360px) {
+    margin-top: 4px;
+    margin-inline-start: 46px;
+  }
+}