From 728d104f91c8d450474d122e0102202fe8384934 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Thu, 7 Dec 2023 10:48:38 +0200
Subject: [PATCH] icon for grid notes with multiple media items

---
 packages/app/src/Element/Feed/TimelineRenderer.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/Element/Feed/TimelineRenderer.tsx b/packages/app/src/Element/Feed/TimelineRenderer.tsx
index 62ca60c5..d6ef7960 100644
--- a/packages/app/src/Element/Feed/TimelineRenderer.tsx
+++ b/packages/app/src/Element/Feed/TimelineRenderer.tsx
@@ -52,6 +52,7 @@ export function TimelineRenderer(props: TimelineRendererProps) {
 
       if (media.length === 0) return null;
 
+      const multiple = media.length > 1;
       const isVideo = media[0].mimeType?.startsWith("video/");
       const noteId = NostrLink.fromEvent(e).encode(CONFIG.eventLinkPrefix);
 
@@ -68,9 +69,10 @@ export function TimelineRenderer(props: TimelineRendererProps) {
       return (
         <Link to={`/${noteId}`} className="aspect-square cursor-pointer hover:opacity-80 relative" onClick={onClick}>
           <img src={proxy(media[0].content, 256)} alt="Note Media" className="w-full h-full object-cover" />
-          {isVideo && (
-            <Icon name="play-square-outline" className="absolute right-2 top-2 text-white opacity-80 drop-shadow-md" />
-          )}
+          <div className="absolute right-2 top-2 flex flex-col gap-2">
+            {multiple && <Icon name="copy-solid" className="text-white opacity-80 drop-shadow-md" />}
+            {isVideo && <Icon name="play-square-outline" className="text-white opacity-80 drop-shadow-md" />}
+          </div>
         </Link>
       );
     };