feat: improve notification content

src/components/NotificationList/index.tsx

@@ -13,6 +13,8 @@ import { useTranslation } from 'react-i18next'
 import PullToRefresh from 'react-simple-pull-to-refresh'
 import { FormattedTimestamp } from '../FormattedTimestamp'
 import UserAvatar from '../UserAvatar'
+import { embedded, embeddedNostrNpubRenderer, embeddedNostrProfileRenderer } from '../Embedded'
+import { extractEmbeddedNotesFromContent, extractImagesFromContent } from '@/lib/event'
 
 const LIMIT = 100
 
@@ -268,7 +270,17 @@ function CommentNotification({ notification }: { notification: Event }) {
 }
 
 function ContentPreview({ event }: { event?: Event }) {
+  const { t } = useTranslation()
+  const content = useMemo(() => {
+    if (!event) return null
+    const { contentWithoutEmbeddedNotes } = extractEmbeddedNotesFromContent(event.content)
+    const { contentWithoutImages, images } = extractImagesFromContent(contentWithoutEmbeddedNotes)
+    return embedded(contentWithoutImages + (images?.length ? `[${t('image')}]` : ''), [
+      embeddedNostrProfileRenderer,
+      embeddedNostrNpubRenderer
+    ])
+  }, [event])
   if (!event) return null
 
-  return <div className="truncate flex-1 w-0">{event.content}</div>
+  return <div className="truncate flex-1 w-0">{content}</div>
 }

src/i18n/en.ts

@@ -104,6 +104,7 @@ export default {
     'A special note for picture-first clients like Olas':
       'A special note for picture-first clients like Olas',
     'Picture note requires images': 'Picture note requires images',
-    Relays: 'Relays'
+    Relays: 'Relays',
+    image: 'image'
   }
 }

src/i18n/zh.ts

@@ -103,6 +103,7 @@ export default {
     'A special note for picture-first clients like Olas':
       '一种可以在图片优先客户端 (如 Olas) 中显示的特殊笔记',
     'Picture note requires images': '图片笔记需要有图片',
-    Relays: '服务器'
+    Relays: '服务器',
+    image: '图片'
   }
 }

src/lib/event.ts

@@ -215,3 +215,17 @@ export function extractImagesFromContent(content: string) {
   contentWithoutImages = contentWithoutImages.replace(/\n{3,}/g, '\n\n').trim()
   return { images, contentWithoutImages }
 }
+
+export function extractEmbeddedNotesFromContent(content: string) {
+  let c = content
+  const embeddedNotes: string[] = []
+  const embeddedNoteRegex = /nostr:(note1[a-z0-9]{58}|nevent1[a-z0-9]+|naddr1[a-z0-9]+)/g
+  ;(c.match(embeddedNoteRegex) || []).forEach((note) => {
+    c = c.replace(note, '').trim()
+    embeddedNotes.push(note)
+  })
+
+  c = c.replace(/\n{3,}/g, '\n\n').trim()
+
+  return { embeddedNotes, contentWithoutEmbeddedNotes: c }
+}