feat: add pinned post functionality

src/components/Profile/ProfileFeed.tsx

@@ -1,14 +1,18 @@
 import KindFilter from '@/components/KindFilter'
 import NoteList, { TNoteListRef } from '@/components/NoteList'
 import Tabs from '@/components/Tabs'
-import { BIG_RELAY_URLS } from '@/constants'
+import { BIG_RELAY_URLS, MAX_PINNED_NOTES } from '@/constants'
+import { useFetchEvent } from '@/hooks'
+import { generateBech32IdFromETag } from '@/lib/tag'
 import { isTouchDevice } from '@/lib/utils'
 import { useKindFilter } from '@/providers/KindFilterProvider'
 import { useNostr } from '@/providers/NostrProvider'
 import client from '@/services/client.service'
 import storage from '@/services/local-storage.service'
 import { TFeedSubRequest, TNoteListMode } from '@/types'
+import { NostrEvent } from 'nostr-tools'
 import { useEffect, useMemo, useRef, useState } from 'react'
+import NoteCard, { NoteCardLoadingSkeleton } from '../NoteCard'
 import { RefreshButton } from '../RefreshButton'
 
 export default function ProfileFeed({
@@ -18,12 +22,13 @@ export default function ProfileFeed({
   pubkey: string
   topSpace?: number
 }) {
-  const { pubkey: myPubkey } = useNostr()
+  const { pubkey: myPubkey, pinListEvent: myPinListEvent } = useNostr()
   const { showKinds } = useKindFilter()
   const [temporaryShowKinds, setTemporaryShowKinds] = useState(showKinds)
   const [listMode, setListMode] = useState<TNoteListMode>(() => storage.getNoteListMode())
-  const noteListRef = useRef<TNoteListRef>(null)
   const [subRequests, setSubRequests] = useState<TFeedSubRequest[]>([])
+  const [pinnedEventIds, setPinnedEventIds] = useState<string[]>([])
+  const [pinnedEventHexIdSet, setPinnedEventHexIdSet] = useState<Set<string>>(new Set())
   const tabs = useMemo(() => {
     const _tabs = [
       { value: 'posts', label: 'Notes' },
@@ -37,6 +42,41 @@ export default function ProfileFeed({
     return _tabs
   }, [myPubkey, pubkey])
   const supportTouch = useMemo(() => isTouchDevice(), [])
+  const noteListRef = useRef<TNoteListRef>(null)
+  const topRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const initPinnedEventIds = async () => {
+      let evt: NostrEvent | null = null
+      if (pubkey === myPubkey) {
+        evt = myPinListEvent
+      } else {
+        evt = await client.fetchPinListEvent(pubkey)
+      }
+      const hexIdSet = new Set<string>()
+      const ids =
+        (evt?.tags
+          .filter((tag) => tag[0] === 'e')
+          .reverse()
+          .slice(0, MAX_PINNED_NOTES)
+          .map((tag) => {
+            const [, hexId, relay, _pubkey] = tag
+            if (!hexId || hexIdSet.has(hexId) || (_pubkey && _pubkey !== pubkey)) {
+              return undefined
+            }
+
+            const id = generateBech32IdFromETag(['e', hexId, relay ?? '', pubkey])
+            if (id) {
+              hexIdSet.add(hexId)
+            }
+            return id
+          })
+          .filter(Boolean) as string[]) ?? []
+      setPinnedEventIds(ids)
+      setPinnedEventHexIdSet(hexIdSet)
+    }
+    initPinnedEventIds()
+  }, [pubkey, myPubkey, myPinListEvent])
 
   useEffect(() => {
     const init = async () => {
@@ -85,12 +125,12 @@ export default function ProfileFeed({
 
   const handleListModeChange = (mode: TNoteListMode) => {
     setListMode(mode)
-    noteListRef.current?.scrollToTop('smooth')
+    topRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
   }
 
   const handleShowKindsChange = (newShowKinds: number[]) => {
     setTemporaryShowKinds(newShowKinds)
-    noteListRef.current?.scrollToTop()
+    topRef.current?.scrollIntoView({ behavior: 'instant', block: 'start' })
   }
 
   return (
@@ -109,13 +149,32 @@ export default function ProfileFeed({
           </>
         }
       />
+      <div ref={topRef} className="scroll-mt-[calc(6rem+1px)]" />
+      {pinnedEventIds.map((eventId) => (
+        <PinnedNote key={eventId} eventId={eventId} />
+      ))}
       <NoteList
         ref={noteListRef}
         subRequests={subRequests}
         showKinds={temporaryShowKinds}
         hideReplies={listMode === 'posts'}
         filterMutedNotes={false}
+        filteredEventHexIdSet={pinnedEventHexIdSet}
       />
     </>
   )
 }
+
+function PinnedNote({ eventId }: { eventId: string }) {
+  const { event, isFetching } = useFetchEvent(eventId)
+
+  if (isFetching) {
+    return <NoteCardLoadingSkeleton />
+  }
+
+  if (!event) {
+    return null
+  }
+
+  return <NoteCard event={event} className="w-full" pinned />
+}