diff --git a/app/javascript/flavours/glitch/components/account/index.tsx b/app/javascript/flavours/glitch/components/account/index.tsx index 4f7bd9a64b..99b2903dab 100644 --- a/app/javascript/flavours/glitch/components/account/index.tsx +++ b/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 = ({ defaultAction, withBio, withMenu = true, + extraAccountInfo, children, }) => { const intl = useIntl(); @@ -349,6 +351,8 @@ export const Account: React.FC = ({ /> ))} + + {extraAccountInfo} {!minimal && ( diff --git a/app/javascript/flavours/glitch/features/collections/editor/accounts.tsx b/app/javascript/flavours/glitch/features/collections/editor/accounts.tsx index 540b0e34b3..152e346764 100644 --- a/app/javascript/flavours/glitch/features/collections/editor/accounts.tsx +++ b/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) && ( + + } + icon={} + className={classes.accountBadge} + /> + ), + [account?.last_status_at], + ); + return ( - + {isRemovable && (