feat: add multi-image icon

src/components/PictureContent/index.tsx

@@ -1,9 +1,7 @@
-import { isNsfwEvent } from '@/lib/event'
-import { extractImageInfoFromTag } from '@/lib/tag'
+import { extractImageInfosFromEventTags, isNsfwEvent } from '@/lib/event'
 import { cn } from '@/lib/utils'
-import { TImageInfo } from '@/types'
 import { Event } from 'nostr-tools'
-import { memo, ReactNode } from 'react'
+import { memo, ReactNode, useMemo } from 'react'
 import {
   embedded,
   embeddedHashtagRenderer,
@@ -15,13 +13,7 @@ import {
 import { ImageCarousel } from '../ImageCarousel'
 
 const PictureContent = memo(({ event, className }: { event: Event; className?: string }) => {
-  const images: TImageInfo[] = []
-  event.tags.forEach((tag) => {
-    const imageInfo = extractImageInfoFromTag(tag)
-    if (imageInfo) {
-      images.push(imageInfo)
-    }
-  })
+  const images = useMemo(() => extractImageInfosFromEventTags(event), [event])
   const isNsfw = isNsfwEvent(event)
 
   const nodes: ReactNode[] = [

src/components/PictureNoteCard/index.tsx

@@ -1,8 +1,9 @@
-import { extractFirstPictureFromPictureEvent } from '@/lib/event'
+import { extractImageInfosFromEventTags } from '@/lib/event'
 import { toNote } from '@/lib/link'
 import { tagNameEquals } from '@/lib/tag'
 import { cn } from '@/lib/utils'
 import { useSecondaryPage } from '@/PageManager'
+import { Images } from 'lucide-react'
 import { Event } from 'nostr-tools'
 import { useMemo } from 'react'
 import {
@@ -23,7 +24,7 @@ export default function PictureNoteCard({
   className?: string
 }) {
   const { push } = useSecondaryPage()
-  const firstImage = extractFirstPictureFromPictureEvent(event)
+  const images = useMemo(() => extractImageInfosFromEventTags(event), [event])
   const title = useMemo(() => {
     const title = event.tags.find(tagNameEquals('title'))?.[1] ?? event.content
     return embedded(title, [
@@ -32,11 +33,16 @@ export default function PictureNoteCard({
       embeddedHashtagRenderer
     ])
   }, [event])
-  if (!firstImage) return null
+  if (!images.length) return null
 
   return (
-    <div className={cn('cursor-pointer', className)} onClick={() => push(toNote(event))}>
-      <Image className="rounded-lg w-full aspect-[6/8]" image={firstImage} />
+    <div className={cn('cursor-pointer relative', className)} onClick={() => push(toNote(event))}>
+      <Image className="rounded-lg w-full aspect-[6/8]" image={images[0]} />
+      {images.length > 1 && (
+        <div className="absolute top-2 right-2 bg-background/50 rounded-full p-2">
+          <Images size={16} />
+        </div>
+      )}
       <div className="p-2 space-y-1">
         <div className="line-clamp-2 font-semibold">{title}</div>
         <div className="flex items-center gap-2">

src/lib/event.ts

@@ -1,6 +1,6 @@
 import { BIG_RELAY_URLS, COMMENT_EVENT_KIND, PICTURE_EVENT_KIND } from '@/constants'
 import client from '@/services/client.service'
-import { TRelayList } from '@/types'
+import { TImageInfo, TRelayList } from '@/types'
 import { Event, kinds, nip19 } from 'nostr-tools'
 import { extractImageInfoFromTag, isReplyETag, isRootETag, tagNameEquals } from './tag'
 import { isWebsocketUrl, normalizeUrl } from './url'
@@ -254,13 +254,15 @@ export function extractHashtags(content: string) {
   return hashtags
 }
 
-export function extractFirstPictureFromPictureEvent(event: Event) {
-  if (!isPictureEvent(event)) return null
-  for (const tag of event.tags) {
-    const url = extractImageInfoFromTag(tag)
-    if (url) return url
+export function extractImageInfosFromEventTags(event: Event) {
+  const images: TImageInfo[] = []
+  event.tags.forEach((tag) => {
+    const imageInfo = extractImageInfoFromTag(tag)
+    if (imageInfo) {
+      images.push(imageInfo)
     }
-  return null
+  })
+  return images
 }
 
 export function extractImagesFromContent(content: string) {