[Glitch] Show mute end date in badge

Port 7a4945c0d3ed3550e1a22e53c03c6de646d62aec to glitch-soc

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

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;

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<typeof badges.Badge>;
 
@@ -16,16 +16,22 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-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: <CelebrationIcon />,
   },
 };
@@ -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 <badges.MutedBadge {...args} expiresAt={futureDate} />;
+  },
+};
+
 export const Blocked: Story = {
   render(args) {
     return <badges.BlockedBadge {...args} />;

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<BadgeProps> = ({
   </div>
 );
 
-export const AdminBadge: FC<Partial<BadgeProps>> = (props) => (
+export const AdminBadge: FC<Partial<BadgeProps>> = ({ label, ...props }) => (
   <Badge
     icon={<AdminIcon />}
     label={
-      <FormattedMessage id='account.badges.admin' defaultMessage='Admin' />
+      label ?? (
+        <FormattedMessage id='account.badges.admin' defaultMessage='Admin' />
+      )
     }
     {...props}
   />
 );
 
-export const GroupBadge: FC<Partial<BadgeProps>> = (props) => (
+export const GroupBadge: FC<Partial<BadgeProps>> = ({ label, ...props }) => (
   <Badge
     icon={<GroupsIcon />}
     label={
-      <FormattedMessage id='account.badges.group' defaultMessage='Group' />
+      label ?? (
+        <FormattedMessage id='account.badges.group' defaultMessage='Group' />
+      )
     }
     {...props}
   />
@@ -66,21 +70,54 @@ export const AutomatedBadge: FC<{ className?: string }> = ({ className }) => (
   />
 );
 
-export const MutedBadge: FC<Partial<BadgeProps>> = (props) => (
+export const MutedBadge: FC<
-  <Badge
+  Partial<BadgeProps> & { expiresAt?: string | null }
-    icon={<VolumeOffIcon />}
+> = ({ expiresAt, label, ...props }) => {
-    label={
+  // Format the date, only showing the year if it's different from the current year.
-      <FormattedMessage id='account.badges.muted' defaultMessage='Muted' />
+  const intl = useIntl();
-    }
+  let formattedDate: string | null = null;
-    {...props}
+  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 (
+    <Badge
+      icon={<VolumeOffIcon />}
+      label={
+        label ??
+        (formattedDate ? (
+          <FormattedMessage
+            id='account.badges.muted_until'
+            defaultMessage='Muted until {until}'
+            values={{
+              until: formattedDate,
+            }}
+          />
+        ) : (
+          <FormattedMessage id='account.badges.muted' defaultMessage='Muted' />
+        ))
+      }
+      {...props}
+    />
+  );
+};
 
-export const BlockedBadge: FC<Partial<BadgeProps>> = (props) => (
+export const BlockedBadge: FC<Partial<BadgeProps>> = ({ label, ...props }) => (
   <Badge
     icon={<BlockIcon />}
     label={
-      <FormattedMessage id='account.badges.blocked' defaultMessage='Blocked' />
+      label ?? (
+        <FormattedMessage
+          id='account.badges.blocked'
+          defaultMessage='Blocked'
+        />
+      )
     }
     {...props}
   />

app/javascript/flavours/glitch/features/account_timeline/components/badges.tsx

@@ -106,6 +106,7 @@ export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
         <MutedBadge
           key='muted-badge'
           className={classNames(className, classes.badgeMuted)}
+          expiresAt={relationship.muting_expires_at}
         />,
       );
     }

app/javascript/flavours/glitch/models/relationship.ts

@@ -15,8 +15,9 @@ const RelationshipFactory = Record<RelationshipShape>({
   following: false,
   id: '',
   languages: null,
-  muting_notifications: false,
   muting: false,
+  muting_notifications: false,
+  muting_expires_at: null,
   note: '',
   notifying: false,
   requested_by: false,