feat: add special follow feed

src/pages/primary/NoteListPage/FeedButton.tsx

@@ -6,7 +6,7 @@ import { cn } from '@/lib/utils'
 import { useFavoriteRelays } from '@/providers/FavoriteRelaysProvider'
 import { useFeed } from '@/providers/FeedProvider'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
-import { ChevronDown, Server, UsersRound } from 'lucide-react'
+import { ChevronDown, Server, Star, UsersRound } from 'lucide-react'
 import { forwardRef, HTMLAttributes, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -62,6 +62,9 @@ const FeedSwitcherTrigger = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEle
       if (feedInfo?.feedType === 'following') {
         return t('Following')
       }
+      if (feedInfo?.feedType === 'pinned') {
+        return t('Special Follow')
+      }
       if (relayUrls.length === 0) {
         return t('Choose a feed')
       }
@@ -73,13 +76,19 @@ const FeedSwitcherTrigger = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEle
       }
     }, [feedInfo, activeRelaySet])
 
+    const icon = useMemo(() => {
+      if (feedInfo?.feedType === 'following') return <UsersRound />
+      if (feedInfo?.feedType === 'pinned') return <Star />
+      return <Server />
+    }, [feedInfo])
+
     return (
       <div
         className={cn('flex items-center gap-2 clickable px-3 h-full rounded-xl', className)}
         ref={ref}
         {...props}
       >
-        {feedInfo?.feedType === 'following' ? <UsersRound /> : <Server />}
+        {icon}
         <div className="text-lg font-semibold truncate">{title}</div>
         <ChevronDown />
       </div>

src/pages/primary/NoteListPage/PinnedFeed.tsx

@@ -0,0 +1,34 @@
+import NormalFeed from '@/components/NormalFeed'
+import { useFeed } from '@/providers/FeedProvider'
+import { useNostr } from '@/providers/NostrProvider'
+import { usePinnedUsers } from '@/providers/PinnedUsersProvider'
+import client from '@/services/client.service'
+import { TFeedSubRequest } from '@/types'
+import { useEffect, useRef, useState } from 'react'
+
+export default function PinnedFeed() {
+  const { pubkey } = useNostr()
+  const { feedInfo } = useFeed()
+  const { pinnedPubkeySet } = usePinnedUsers()
+  const [subRequests, setSubRequests] = useState<TFeedSubRequest[]>([])
+  const initializedRef = useRef(false)
+
+  useEffect(() => {
+    if (initializedRef.current) return
+
+    async function init() {
+      if (feedInfo?.feedType !== 'pinned' || !pubkey || pinnedPubkeySet.size === 0) {
+        setSubRequests([])
+        return
+      }
+
+      initializedRef.current = true
+      const pinnedPubkeys = Array.from(pinnedPubkeySet)
+      setSubRequests(await client.generateSubRequestsForPubkeys(pinnedPubkeys, pubkey))
+    }
+
+    init()
+  }, [feedInfo?.feedType, pubkey, pinnedPubkeySet])
+
+  return <NormalFeed subRequests={subRequests} isMainFeed />
+}

src/pages/primary/NoteListPage/index.tsx

@@ -22,6 +22,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import FeedButton from './FeedButton'
 import FollowingFeed from './FollowingFeed'
+import PinnedFeed from './PinnedFeed'
 import RelaysFeed from './RelaysFeed'
 
 const NoteListPage = forwardRef<TPageRef>((_, ref) => {
@@ -59,8 +60,13 @@ const NoteListPage = forwardRef<TPageRef>((_, ref) => {
   } else if (feedInfo.feedType === 'following' && !pubkey) {
     switchFeed(null)
     return null
+  } else if (feedInfo.feedType === 'pinned' && !pubkey) {
+    switchFeed(null)
+    return null
   } else if (feedInfo.feedType === 'following') {
     content = <FollowingFeed />
+  } else if (feedInfo.feedType === 'pinned') {
+    content = <PinnedFeed />
   } else {
     content = (
       <>