diff --git a/app/javascript/flavours/glitch/api_types/relationships.ts b/app/javascript/flavours/glitch/api_types/relationships.ts index 9f26a0ce9b..aa871d6f79 100644 --- a/app/javascript/flavours/glitch/api_types/relationships.ts +++ b/app/javascript/flavours/glitch/api_types/relationships.ts @@ -8,8 +8,9 @@ export interface ApiRelationshipJSON { following: boolean; id: string; languages: string[] | null; - muting_notifications: boolean; muting: boolean; + muting_notifications: boolean; + muting_expires_at: string | null; note: string; notifying: boolean; requested_by: boolean; diff --git a/app/javascript/flavours/glitch/components/badge.stories.tsx b/app/javascript/flavours/glitch/components/badge.stories.tsx index aaddcaa91a..6c4921809c 100644 --- a/app/javascript/flavours/glitch/components/badge.stories.tsx +++ b/app/javascript/flavours/glitch/components/badge.stories.tsx @@ -8,7 +8,7 @@ const meta = { component: badges.Badge, title: 'Components/Badge', args: { - label: 'Example', + label: undefined, }, } satisfies Meta; @@ -16,16 +16,22 @@ export default meta; type Story = StoryObj; -export const Default: Story = {}; +export const Default: Story = { + args: { + label: 'Example', + }, +}; export const Domain: Story = { args: { + ...Default.args, domain: 'example.com', }, }; export const CustomIcon: Story = { args: { + ...Default.args, icon: , }, }; @@ -57,6 +63,13 @@ export const Muted: Story = { }, }; +export const MutedWithDate: Story = { + render(args) { + const futureDate = new Date(new Date().getFullYear(), 11, 31).toISOString(); + return ; + }, +}; + export const Blocked: Story = { render(args) { return ; diff --git a/app/javascript/flavours/glitch/components/badge.tsx b/app/javascript/flavours/glitch/components/badge.tsx index 0ffb7baa8a..07ecdfa46c 100644 --- a/app/javascript/flavours/glitch/components/badge.tsx +++ b/app/javascript/flavours/glitch/components/badge.tsx @@ -1,6 +1,6 @@ import type { FC, ReactNode } from 'react'; -import { FormattedMessage } from 'react-intl'; +import { FormattedMessage, useIntl } from 'react-intl'; import classNames from 'classnames'; @@ -36,21 +36,25 @@ export const Badge: FC = ({ ); -export const AdminBadge: FC> = (props) => ( +export const AdminBadge: FC> = ({ label, ...props }) => ( } label={ - + label ?? ( + + ) } {...props} /> ); -export const GroupBadge: FC> = (props) => ( +export const GroupBadge: FC> = ({ label, ...props }) => ( } label={ - + label ?? ( + + ) } {...props} /> @@ -66,21 +70,54 @@ export const AutomatedBadge: FC<{ className?: string }> = ({ className }) => ( /> ); -export const MutedBadge: FC> = (props) => ( - } - label={ - - } - {...props} - /> -); +export const MutedBadge: FC< + Partial & { expiresAt?: string | null } +> = ({ expiresAt, label, ...props }) => { + // Format the date, only showing the year if it's different from the current year. + const intl = useIntl(); + let formattedDate: string | null = null; + if (expiresAt) { + const expiresDate = new Date(expiresAt); + const isCurrentYear = + expiresDate.getFullYear() === new Date().getFullYear(); + formattedDate = intl.formatDate(expiresDate, { + month: 'short', + day: 'numeric', + ...(isCurrentYear ? {} : { year: 'numeric' }), + }); + } + return ( + } + label={ + label ?? + (formattedDate ? ( + + ) : ( + + )) + } + {...props} + /> + ); +}; -export const BlockedBadge: FC> = (props) => ( +export const BlockedBadge: FC> = ({ label, ...props }) => ( } label={ - + label ?? ( + + ) } {...props} /> diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/badges.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/badges.tsx index de54dfe473..d28826042d 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/badges.tsx +++ b/app/javascript/flavours/glitch/features/account_timeline/components/badges.tsx @@ -106,6 +106,7 @@ export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => { , ); } diff --git a/app/javascript/flavours/glitch/models/relationship.ts b/app/javascript/flavours/glitch/models/relationship.ts index 4450cabe9d..9a412d2346 100644 --- a/app/javascript/flavours/glitch/models/relationship.ts +++ b/app/javascript/flavours/glitch/models/relationship.ts @@ -15,8 +15,9 @@ const RelationshipFactory = Record({ following: false, id: '', languages: null, - muting_notifications: false, muting: false, + muting_notifications: false, + muting_expires_at: null, note: '', notifying: false, requested_by: false,