From d1b7f140fd55b552ecea9ed109817a9fc1f27493 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Wed, 5 Feb 2025 23:31:49 +0800
Subject: [PATCH] fix: resolve display issue of embedded kind 20 events

---
 src/components/Embedded/EmbeddedNote.tsx                   | 7 ++++---
 .../NoteCard/{ShortTextNoteCard.tsx => NormalNoteCard.tsx} | 2 +-
 src/components/NoteCard/RepostNoteCard.tsx                 | 4 ++--
 src/components/NoteCard/index.tsx                          | 4 ++--
 4 files changed, 9 insertions(+), 8 deletions(-)
 rename src/components/NoteCard/{ShortTextNoteCard.tsx => NormalNoteCard.tsx} (97%)

diff --git a/src/components/Embedded/EmbeddedNote.tsx b/src/components/Embedded/EmbeddedNote.tsx
index f293312a..6e4b530c 100644
--- a/src/components/Embedded/EmbeddedNote.tsx
+++ b/src/components/Embedded/EmbeddedNote.tsx
@@ -1,14 +1,15 @@
+import { PICTURE_EVENT_KIND } from '@/constants'
 import { useFetchEvent } from '@/hooks'
 import { toNoStrudelArticle, toNoStrudelNote, toNoStrudelStream } from '@/lib/link'
 import { cn } from '@/lib/utils'
 import { kinds } from 'nostr-tools'
-import ShortTextNoteCard from '../NoteCard/ShortTextNoteCard'
+import NormalNoteCard from '../NoteCard/NormalNoteCard'
 
 export function EmbeddedNote({ noteId, className }: { noteId: string; className?: string }) {
   const { event } = useFetchEvent(noteId)
 
-  return event && event.kind === kinds.ShortTextNote ? (
-    <ShortTextNoteCard className={cn('w-full', className)} event={event} embedded />
+  return event && [kinds.ShortTextNote, PICTURE_EVENT_KIND].includes(event.kind) ? (
+    <NormalNoteCard className={cn('w-full', className)} event={event} embedded />
   ) : (
     <a
       href={
diff --git a/src/components/NoteCard/ShortTextNoteCard.tsx b/src/components/NoteCard/NormalNoteCard.tsx
similarity index 97%
rename from src/components/NoteCard/ShortTextNoteCard.tsx
rename to src/components/NoteCard/NormalNoteCard.tsx
index 878c5f0e..60f819a8 100644
--- a/src/components/NoteCard/ShortTextNoteCard.tsx
+++ b/src/components/NoteCard/NormalNoteCard.tsx
@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next'
 import Note from '../Note'
 import Username from '../Username'
 
-export default function ShortTextNoteCard({
+export default function NormalNoteCard({
   event,
   className,
   reposter,
diff --git a/src/components/NoteCard/RepostNoteCard.tsx b/src/components/NoteCard/RepostNoteCard.tsx
index 46a01aad..d98072ac 100644
--- a/src/components/NoteCard/RepostNoteCard.tsx
+++ b/src/components/NoteCard/RepostNoteCard.tsx
@@ -1,7 +1,7 @@
 import client from '@/services/client.service'
 import { Event, kinds, verifyEvent } from 'nostr-tools'
 import { useMemo } from 'react'
-import ShortTextNoteCard from './ShortTextNoteCard'
+import NormalNoteCard from './NormalNoteCard'
 
 export default function RepostNoteCard({ event, className }: { event: Event; className?: string }) {
   const targetEvent = useMemo(() => {
@@ -19,5 +19,5 @@ export default function RepostNoteCard({ event, className }: { event: Event; cla
   }, [event])
   if (!targetEvent) return null
 
-  return <ShortTextNoteCard className={className} reposter={event.pubkey} event={targetEvent} />
+  return <NormalNoteCard className={className} reposter={event.pubkey} event={targetEvent} />
 }
diff --git a/src/components/NoteCard/index.tsx b/src/components/NoteCard/index.tsx
index 08016327..25fed9d2 100644
--- a/src/components/NoteCard/index.tsx
+++ b/src/components/NoteCard/index.tsx
@@ -1,10 +1,10 @@
 import { Event, kinds } from 'nostr-tools'
 import RepostNoteCard from './RepostNoteCard'
-import ShortTextNoteCard from './ShortTextNoteCard'
+import NormalNoteCard from './NormalNoteCard'
 
 export default function NoteCard({ event, className }: { event: Event; className?: string }) {
   if (event.kind === kinds.Repost) {
     return <RepostNoteCard event={event} className={className} />
   }
-  return <ShortTextNoteCard event={event} className={className} />
+  return <NormalNoteCard event={event} className={className} />
 }