feat: support viewing notes related to external content

src/lib/link.ts

@@ -8,11 +8,20 @@ export const toNote = (eventOrId: Pick<Event, 'id' | 'pubkey'> | string) => {
   const nevent = generateEventId(eventOrId)
   return `/notes/${nevent}`
 }
-export const toNoteList = ({ hashtag, search }: { hashtag?: string; search?: string }) => {
+export const toNoteList = ({
+  hashtag,
+  search,
+  externalContentId
+}: {
+  hashtag?: string
+  search?: string
+  externalContentId?: string
+}) => {
   const path = '/notes'
   const query = new URLSearchParams()
   if (hashtag) query.set('t', hashtag.toLowerCase())
   if (search) query.set('s', search)
+  if (externalContentId) query.set('i', externalContentId)
   return `${path}?${query.toString()}`
 }
 export const toProfile = (userId: string) => {

src/pages/secondary/NoteListPage/index.tsx

@@ -1,12 +1,14 @@
 import NoteList from '@/components/NoteList'
 import { BIG_RELAY_URLS, SEARCHABLE_RELAY_URLS } from '@/constants'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
+import { useNostr } from '@/providers/NostrProvider'
 import { Filter } from 'nostr-tools'
 import { forwardRef, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 const NoteListPage = forwardRef(({ index }: { index?: number }, ref) => {
   const { t } = useTranslation()
+  const { relayList } = useNostr()
   const {
     title = '',
     filter,
@@ -22,8 +24,7 @@ const NoteListPage = forwardRef(({ index }: { index?: number }, ref) => {
       return {
         title: `# ${hashtag}`,
         filter: { '#t': [hashtag] },
-        urls: BIG_RELAY_URLS,
-        type: 'hashtag'
+        urls: BIG_RELAY_URLS
       }
     }
     const search = searchParams.get('s')
@@ -31,8 +32,15 @@ const NoteListPage = forwardRef(({ index }: { index?: number }, ref) => {
       return {
         title: `${t('Search')}: ${search}`,
         filter: { search },
-        urls: SEARCHABLE_RELAY_URLS,
-        type: 'search'
+        urls: SEARCHABLE_RELAY_URLS
+      }
+    }
+    const externalContentId = searchParams.get('i')
+    if (externalContentId) {
+      return {
+        title: externalContentId,
+        filter: { '#I': [externalContentId] },
+        urls: BIG_RELAY_URLS.concat(relayList?.write || [])
       }
     }
     return { urls: BIG_RELAY_URLS }

src/pages/secondary/NotePage/index.tsx

@@ -12,7 +12,7 @@ import { ExtendedKind } from '@/constants'
 import { useFetchEvent } from '@/hooks'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import { getParentEventId, getRootEventId, isPictureEvent } from '@/lib/event'
-import { toNote } from '@/lib/link'
+import { toNote, toNoteList } from '@/lib/link'
 import { tagNameEquals } from '@/lib/tag'
 import { useMuteList } from '@/providers/MuteListProvider'
 import { forwardRef, useMemo } from 'react'
@@ -71,8 +71,8 @@ const NotePage = forwardRef(({ id, index }: { id?: string; index?: number }, ref
   return (
     <SecondaryPageLayout ref={ref} index={index} title={t('Note')} displayScrollToTopButton>
       <div className="px-4">
-        {rootITag && <OtherRoot value={rootITag[1]} />}
-        {!rootITag && rootEventId !== parentEventId && (
+        {rootITag && <ExternalRoot value={rootITag[1]} />}
+        {rootEventId !== parentEventId && (
           <ParentNote key={`root-note-${event.id}`} eventId={rootEventId} />
         )}
         <ParentNote key={`parent-note-${event.id}`} eventId={parentEventId} />
@@ -92,26 +92,15 @@ const NotePage = forwardRef(({ id, index }: { id?: string; index?: number }, ref
 NotePage.displayName = 'NotePage'
 export default NotePage
 
-function OtherRoot({ value }: { value: string }) {
-  const type = useMemo(() => (value.startsWith('http') ? 'url' : 'other'), [value])
-
-  if (type === 'url') {
-    return (
-      <div>
-        <Card
-          className="flex space-x-1 p-1 pl-2 clickable text-sm text-muted-foreground hover:text-foreground"
-          onClick={() => window.open(value, '_blank')}
-        >
-          <div className="truncate">{value}</div>
-        </Card>
-        <div className="ml-5 w-px h-2 bg-border" />
-      </div>
-    )
-  }
+function ExternalRoot({ value }: { value: string }) {
+  const { push } = useSecondaryPage()
 
   return (
     <div>
-      <Card className="flex space-x-1 p-1 text-sm text-muted-foreground">
+      <Card
+        className="flex space-x-1 p-1 items-center clickable text-sm text-muted-foreground hover:text-foreground"
+        onClick={() => push(toNoteList({ externalContentId: value }))}
+      >
         <div className="truncate">{value}</div>
       </Card>
       <div className="ml-5 w-px h-2 bg-border" />