From 4f92b8775d0420d5dafb31594b10463ea7a4a2e8 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng@outlook.com>
Date: Mon, 21 Apr 2025 09:44:54 +0800
Subject: [PATCH] fix: show images in embedded kind:20 notes

---
 src/components/Note/index.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Note/index.tsx b/src/components/Note/index.tsx
index 01de7cee..295a6878 100644
--- a/src/components/Note/index.tsx
+++ b/src/components/Note/index.tsx
@@ -1,11 +1,13 @@
 import { useSecondaryPage } from '@/PageManager'
+import { ExtendedKind } from '@/constants'
 import { useFetchEvent } from '@/hooks'
-import { getParentEventId, getUsingClient } from '@/lib/event'
+import { extractImageInfosFromEventTags, getParentEventId, getUsingClient } from '@/lib/event'
 import { toNote } from '@/lib/link'
 import { Event } from 'nostr-tools'
 import { useMemo } from 'react'
 import Content from '../Content'
 import { FormattedTimestamp } from '../FormattedTimestamp'
+import ImageGallery from '../ImageGallery'
 import NoteOptions from '../NoteOptions'
 import NoteStats from '../NoteStats'
 import ParentNotePreview from '../ParentNotePreview'
@@ -32,6 +34,7 @@ export default function Note({
     () => (hideParentNotePreview ? undefined : getParentEventId(event)),
     [event, hideParentNotePreview]
   )
+  const imageInfos = useMemo(() => extractImageInfosFromEventTags(event), [event])
   const { event: parentEvent, isFetching } = useFetchEvent(parentEventId)
   const usingClient = useMemo(() => getUsingClient(event), [event])
 
@@ -72,6 +75,9 @@ export default function Note({
         />
       )}
       <Content className="mt-2" event={event} />
+      {event.kind === ExtendedKind.PICTURE && imageInfos.length > 0 && (
+        <ImageGallery images={imageInfos} />
+      )}
       {!hideStats && (
         <NoteStats className="mt-3" event={event} fetchIfNotExisting={fetchNoteStats} />
       )}