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] 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>
   );
 };