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 1/3] 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;
+      }
     }
   }
 }

From 502fc50939a93ea7198e145e834af75014c5c4a5 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Fri, 30 Aug 2024 15:26:56 +0200
Subject: [PATCH 2/3] Switch to one line per captioned media attachment

---
 .../components/embedded_status.tsx            | 110 ++++++++----------
 1 file changed, 47 insertions(+), 63 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 50427f3700..7395e915dc 100644
--- a/app/javascript/mastodon/features/notifications_v2/components/embedded_status.tsx
+++ b/app/javascript/mastodon/features/notifications_v2/components/embedded_status.tsx
@@ -122,69 +122,11 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
   const mediaAttachments = status.get(
     'media_attachments',
   ) as ImmutableList<MediaAttachment>;
-  const mediaAttachmentsSize = mediaAttachments.size;
-  const mediaAttachmentDescription = mediaAttachments.find(
+  const mediaAttachmentsWithDescription = mediaAttachments.filter(
     (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>,
-      );
-    }
-  }
+  );
+  const uncaptionedMediaCount =
+    mediaAttachments.size - mediaAttachmentsWithDescription.size;
 
   return (
     <div
@@ -218,7 +160,49 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
         />
       )}
 
-      {mediaAttachmentsList}
+      {expanded && !!poll && (
+        <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>
+      )}
+
+      {expanded &&
+        mediaAttachmentsWithDescription.size > 0 &&
+        mediaAttachmentsWithDescription.map((attachment) => (
+          <div
+            className='notification-group__embedded-status__attachments reply-indicator__attachments'
+            key={`media-description-${attachment.get('id')}}`}
+          >
+            <Icon icon={PhotoLibraryIcon} id='photo-library' />
+            <span>{attachment.get('description')}</span>
+          </div>
+        ))}
+
+      {expanded && uncaptionedMediaCount > 0 && (
+        <div
+          className='notification-group__embedded-status__attachments reply-indicator__attachments'
+          key='uncaptioned-media-indicator'
+        >
+          <Icon icon={PhotoLibraryIcon} id='photo-library' />
+          {mediaAttachmentsWithDescription.size > 0 ? (
+            <FormattedMessage
+              id='reply_indicator.and_other_attachments'
+              defaultMessage='and {count, plural, one {# other attachment} other {# other attachments}}'
+              values={{ count: uncaptionedMediaCount }}
+            />
+          ) : (
+            <FormattedMessage
+              id='reply_indicator.attachments'
+              defaultMessage='{count, plural, one {# attachment} other {# attachments}}'
+              values={{ count: uncaptionedMediaCount }}
+            />
+          )}
+        </div>
+      )}
     </div>
   );
 };

From e3d9b4405beec5c8d4881a93b4aa24aefd7db2b0 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Fri, 30 Aug 2024 15:30:33 +0200
Subject: [PATCH 3/3] Reword other_attachments translation string

---
 .../features/notifications_v2/components/embedded_status.tsx  | 4 ++--
 app/javascript/mastodon/locales/en.json                       | 2 +-
 2 files changed, 3 insertions(+), 3 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 7395e915dc..74e5cea187 100644
--- a/app/javascript/mastodon/features/notifications_v2/components/embedded_status.tsx
+++ b/app/javascript/mastodon/features/notifications_v2/components/embedded_status.tsx
@@ -190,8 +190,8 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
           <Icon icon={PhotoLibraryIcon} id='photo-library' />
           {mediaAttachmentsWithDescription.size > 0 ? (
             <FormattedMessage
-              id='reply_indicator.and_other_attachments'
-              defaultMessage='and {count, plural, one {# other attachment} other {# other attachments}}'
+              id='reply_indicator.other_attachments'
+              defaultMessage='{count, plural, one {# other attachment} other {# other attachments}}'
               values={{ count: uncaptionedMediaCount }}
             />
           ) : (
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index 2ad5329593..9f00354367 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -687,9 +687,9 @@
   "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.other_attachments": "{count, plural, one {# other attachment} other {# other attachments}}",
   "reply_indicator.poll": "Poll",
   "report.block": "Block",
   "report.block_explanation": "You will not see their posts. They will not be able to see your posts or follow you. They will be able to tell that they are blocked.",