From d52abc6a1300ef1202b9f645dacc53ac03c85ab6 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Fri, 30 Aug 2024 14:21:49 +0200
Subject: [PATCH] Display description of first captioned media in notifications

---
 .../components/embedded_status.tsx            | 98 ++++++++++++++-----
 app/javascript/mastodon/locales/en.json       |  1 +
 .../styles/mastodon/components.scss           |  6 ++
 3 files changed, 79 insertions(+), 26 deletions(-)

diff --git a/app/javascript/mastodon/features/notifications_v2/components/embedded_status.tsx b/app/javascript/mastodon/features/notifications_v2/components/embedded_status.tsx
index 65ea9b5d5e..50427f3700 100644
--- a/app/javascript/mastodon/features/notifications_v2/components/embedded_status.tsx
+++ b/app/javascript/mastodon/features/notifications_v2/components/embedded_status.tsx
@@ -19,6 +19,11 @@ import { useAppSelector, useAppDispatch } from 'mastodon/store';
 import { EmbeddedStatusContent } from './embedded_status_content';
 
 export type Mention = RecordOf<{ url: string; acct: string }>;
+export type MediaAttachment = RecordOf<{
+  id: string;
+  type: string;
+  description?: string;
+}>;
 
 export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
   statusId,
@@ -114,9 +119,72 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
   const language = status.get('language') as string;
   const mentions = status.get('mentions') as ImmutableList<Mention>;
   const expanded = !status.get('hidden') || !contentWarning;
-  const mediaAttachmentsSize = (
-    status.get('media_attachments') as ImmutableList<unknown>
-  ).size;
+  const mediaAttachments = status.get(
+    'media_attachments',
+  ) as ImmutableList<MediaAttachment>;
+  const mediaAttachmentsSize = mediaAttachments.size;
+  const mediaAttachmentDescription = mediaAttachments.find(
+    (attachment) => !!attachment.get('description'),
+  )?.get('description');
+
+  const mediaAttachmentsList = [];
+  if (expanded) {
+    if (poll) {
+      mediaAttachmentsList.push(
+        <div
+          className='notification-group__embedded-status__attachments reply-indicator__attachments'
+          key='poll-indicator'
+        >
+          <Icon icon={BarChart4BarsIcon} id='bar-chart-4-bars' />
+          <FormattedMessage id='reply_indicator.poll' defaultMessage='Poll' />
+        </div>,
+      );
+    }
+
+    if (mediaAttachmentDescription) {
+      mediaAttachmentsList.push(
+        <div
+          className='notification-group__embedded-status__attachments reply-indicator__attachments'
+          key='media-description-indicator'
+        >
+          <Icon icon={PhotoLibraryIcon} id='photo-library' />
+          <span>
+            {mediaAttachmentDescription}
+          </span>
+        </div>,
+      );
+
+      if (mediaAttachmentsSize > 1) {
+        mediaAttachmentsList.push(
+          <div
+            className='notification-group__embedded-status__attachments reply-indicator__attachments'
+            key='media-other-indicator'
+          >
+            <Icon icon={PhotoLibraryIcon} id='photo-library' />
+            <FormattedMessage
+              id='reply_indicator.and_other_attachments'
+              defaultMessage='and {count, plural, one {# other attachment} other {# other attachments}}'
+              values={{ count: mediaAttachmentsSize - 1 }}
+            />
+          </div>,
+        );
+      }
+    } else if (mediaAttachmentsSize > 0) {
+      mediaAttachmentsList.push(
+        <div
+          className='notification-group__embedded-status__attachments reply-indicator__attachments'
+          key='media-indicator'
+        >
+          <Icon icon={PhotoLibraryIcon} id='photo-library' />
+          <FormattedMessage
+            id='reply_indicator.attachments'
+            defaultMessage='{count, plural, one {# attachment} other {# attachments}}'
+            values={{ count: mediaAttachmentsSize }}
+          />
+        </div>,
+      );
+    }
+  }
 
   return (
     <div
@@ -150,29 +218,7 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
         />
       )}
 
-      {expanded && (poll || mediaAttachmentsSize > 0) && (
-        <div className='notification-group__embedded-status__attachments reply-indicator__attachments'>
-          {!!poll && (
-            <>
-              <Icon icon={BarChart4BarsIcon} id='bar-chart-4-bars' />
-              <FormattedMessage
-                id='reply_indicator.poll'
-                defaultMessage='Poll'
-              />
-            </>
-          )}
-          {mediaAttachmentsSize > 0 && (
-            <>
-              <Icon icon={PhotoLibraryIcon} id='photo-library' />
-              <FormattedMessage
-                id='reply_indicator.attachments'
-                defaultMessage='{count, plural, one {# attachment} other {# attachments}}'
-                values={{ count: mediaAttachmentsSize }}
-              />
-            </>
-          )}
-        </div>
-      )}
+      {mediaAttachmentsList}
     </div>
   );
 };
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index 4321acef4b..2ad5329593 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -687,6 +687,7 @@
   "relative_time.minutes": "{number}m",
   "relative_time.seconds": "{number}s",
   "relative_time.today": "today",
+  "reply_indicator.and_other_attachments": "and {count, plural, one {# other attachment} other {# other attachments}}",
   "reply_indicator.attachments": "{count, plural, one {# attachment} other {# attachments}}",
   "reply_indicator.cancel": "Cancel",
   "reply_indicator.poll": "Poll",
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 208cdd6768..44f773fbea 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -10644,6 +10644,12 @@ noscript {
       font-size: 15px;
       line-height: 22px;
       color: $dark-text-color;
+
+      span {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
 }