fix: resolve display issue of embedded kind 20 events

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={

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,

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} />
 }

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} />
 }