feat: add pinned post functionality

src/components/NoteCard/MainNoteCard.tsx

@@ -1,10 +1,12 @@
 import { Separator } from '@/components/ui/separator'
 import { toNote } from '@/lib/link'
+import { cn } from '@/lib/utils'
 import { useSecondaryPage } from '@/PageManager'
 import { Event } from 'nostr-tools'
 import Collapsible from '../Collapsible'
 import Note from '../Note'
 import NoteStats from '../NoteStats'
+import PinnedButton from './PinnedButton'
 import RepostDescription from './RepostDescription'
 
 export default function MainNoteCard({
@@ -12,13 +14,15 @@ export default function MainNoteCard({
   className,
   reposter,
   embedded,
-  originalNoteId
+  originalNoteId,
+  pinned = false
 }: {
   event: Event
   className?: string
   reposter?: string
   embedded?: boolean
   originalNoteId?: string
+  pinned?: boolean
 }) {
   const { push } = useSecondaryPage()
 
@@ -30,8 +34,9 @@ export default function MainNoteCard({
         push(toNote(originalNoteId ?? event))
       }}
     >
-      <div className={`clickable ${embedded ? 'p-2 sm:p-3 border rounded-lg' : 'py-3'}`}>
+      <div className={cn('clickable', embedded ? 'p-2 sm:p-3 border rounded-lg' : 'py-3')}>
         <Collapsible alwaysExpand={embedded}>
+          {pinned && <PinnedButton event={event} />}
           <RepostDescription className={embedded ? '' : 'px-4'} reposter={reposter} />
           <Note
             className={embedded ? '' : 'px-4'}

src/components/NoteCard/PinnedButton.tsx

@@ -0,0 +1,46 @@
+import { Button } from '@/components/ui/button'
+import { useNostr } from '@/providers/NostrProvider'
+import { usePinList } from '@/providers/PinListProvider'
+import { Loader, Pin } from 'lucide-react'
+import { NostrEvent } from 'nostr-tools'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export default function PinnedButton({ event }: { event: NostrEvent }) {
+  const { t } = useTranslation()
+  const { pubkey } = useNostr()
+  const { unpin } = usePinList()
+  const [hovered, setHovered] = useState(false)
+  const [unpinning, setUnpinning] = useState(false)
+
+  if (event.pubkey !== pubkey) {
+    return (
+      <div className="flex gap-1 text-sm items-center text-primary mb-1 px-4 py-0 h-fit">
+        <Pin size={16} className="shrink-0" />
+        {t('Pinned')}
+      </div>
+    )
+  }
+
+  return (
+    <Button
+      className="flex gap-1 text-sm text-muted-foreground items-center mb-1 px-4 py-0.5 h-fit hover:text-foreground"
+      variant="link"
+      onClick={(e) => {
+        e.stopPropagation()
+        setUnpinning(true)
+        unpin(event).finally(() => setUnpinning(false))
+      }}
+      disabled={unpinning}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {unpinning ? (
+        <Loader size={16} className="animate-spin shrink-0" />
+      ) : (
+        <Pin size={16} className="shrink-0" />
+      )}
+      {unpinning ? t('Unpinning') : hovered ? t('Unpin') : t('Pinned')}
+    </Button>
+  )
+}

src/components/NoteCard/RepostNoteCard.tsx

@@ -10,11 +10,13 @@ import MainNoteCard from './MainNoteCard'
 export default function RepostNoteCard({
   event,
   className,
-  filterMutedNotes = true
+  filterMutedNotes = true,
+  pinned = false
 }: {
   event: Event
   className?: string
   filterMutedNotes?: boolean
+  pinned?: boolean
 }) {
   const { mutePubkeySet } = useMuteList()
   const { hideContentMentioningMutedUsers } = useContentPolicy()
@@ -71,5 +73,12 @@ export default function RepostNoteCard({
 
   if (!targetEvent || shouldHide) return null
 
-  return <MainNoteCard className={className} reposter={event.pubkey} event={targetEvent} />
+  return (
+    <MainNoteCard
+      className={className}
+      reposter={event.pubkey}
+      event={targetEvent}
+      pinned={pinned}
+    />
+  )
 }

src/components/NoteCard/index.tsx

@@ -10,11 +10,13 @@ import RepostNoteCard from './RepostNoteCard'
 export default function NoteCard({
   event,
   className,
-  filterMutedNotes = true
+  filterMutedNotes = true,
+  pinned = false
 }: {
   event: Event
   className?: string
   filterMutedNotes?: boolean
+  pinned?: boolean
 }) {
   const { mutePubkeySet } = useMuteList()
   const { hideContentMentioningMutedUsers } = useContentPolicy()
@@ -31,10 +33,15 @@ export default function NoteCard({
 
   if (event.kind === kinds.Repost) {
     return (
-      <RepostNoteCard event={event} className={className} filterMutedNotes={filterMutedNotes} />
+      <RepostNoteCard
+        event={event}
+        className={className}
+        filterMutedNotes={filterMutedNotes}
+        pinned={pinned}
+      />
     )
   }
-  return <MainNoteCard event={event} className={className} />
+  return <MainNoteCard event={event} className={className} pinned={pinned} />
 }
 
 export function NoteCardLoadingSkeleton() {

src/components/NoteList/index.tsx

@@ -43,7 +43,8 @@ const NoteList = forwardRef(
       hideReplies = false,
       hideUntrustedNotes = false,
       areAlgoRelays = false,
-      showRelayCloseReason = false
+      showRelayCloseReason = false,
+      filteredEventHexIdSet = new Set<string>()
     }: {
       subRequests: TFeedSubRequest[]
       showKinds: number[]
@@ -52,6 +53,7 @@ const NoteList = forwardRef(
       hideUntrustedNotes?: boolean
       areAlgoRelays?: boolean
       showRelayCloseReason?: boolean
+      filteredEventHexIdSet?: Set<string>
     },
     ref
   ) => {
@@ -74,6 +76,7 @@ const NoteList = forwardRef(
 
     const shouldHideEvent = useCallback(
       (evt: Event) => {
+        if (filteredEventHexIdSet.has(evt.id)) return true
         if (isEventDeleted(evt)) return true
         if (hideReplies && isReplyNoteEvent(evt)) return true
         if (hideUntrustedNotes && !isUserTrusted(evt.pubkey)) return true
@@ -88,7 +91,7 @@ const NoteList = forwardRef(
 
         return false
       },
-      [hideReplies, hideUntrustedNotes, mutePubkeySet, isEventDeleted]
+      [hideReplies, hideUntrustedNotes, mutePubkeySet, filteredEventHexIdSet, isEventDeleted]
     )
 
     const filteredEvents = useMemo(() => {

src/components/NoteOptions/useMenuActions.tsx

@@ -6,9 +6,21 @@ import { useCurrentRelays } from '@/providers/CurrentRelaysProvider'
 import { useFavoriteRelays } from '@/providers/FavoriteRelaysProvider'
 import { useMuteList } from '@/providers/MuteListProvider'
 import { useNostr } from '@/providers/NostrProvider'
+import { usePinList } from '@/providers/PinListProvider'
 import client from '@/services/client.service'
-import { Bell, BellOff, Code, Copy, Link, SatelliteDish, Trash2, TriangleAlert } from 'lucide-react'
-import { Event } from 'nostr-tools'
+import {
+  Bell,
+  BellOff,
+  Code,
+  Copy,
+  Link,
+  Pin,
+  PinOff,
+  SatelliteDish,
+  Trash2,
+  TriangleAlert
+} from 'lucide-react'
+import { Event, kinds } from 'nostr-tools'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
@@ -55,6 +67,7 @@ export function useMenuActions({
     return Array.from(new Set(currentBrowsingRelayUrls.concat(favoriteRelays)))
   }, [currentBrowsingRelayUrls, favoriteRelays])
   const { mutePubkeyPublicly, mutePubkeyPrivately, unmutePubkey, mutePubkeySet } = useMuteList()
+  const { pinnedEventHexIdSet, pin, unpin } = usePinList()
   const isMuted = useMemo(() => mutePubkeySet.has(event.pubkey), [mutePubkeySet, event])
 
   const broadcastSubMenu: SubMenuAction[] = useMemo(() => {
@@ -195,6 +208,18 @@ export function useMenuActions({
       })
     }
 
+    if (event.pubkey === pubkey && event.kind === kinds.ShortTextNote) {
+      const pinned = pinnedEventHexIdSet.has(event.id)
+      actions.push({
+        icon: pinned ? PinOff : Pin,
+        label: pinned ? t('Unpin from profile') : t('Pin to profile'),
+        onClick: async () => {
+          closeDrawer()
+          await (pinned ? unpin(event) : pin(event))
+        }
+      })
+    }
+
     if (pubkey && event.pubkey !== pubkey) {
       actions.push({
         icon: TriangleAlert,
@@ -266,6 +291,7 @@ export function useMenuActions({
     isMuted,
     isSmallScreen,
     broadcastSubMenu,
+    pinnedEventHexIdSet,
     closeDrawer,
     showSubMenuActions,
     setIsRawEventDialogOpen,

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