feat: add special follow feed

src/components/FeedSwitcher/index.tsx

@@ -5,7 +5,8 @@ import { SecondaryPageLink } from '@/PageManager'
 import { useFavoriteRelays } from '@/providers/FavoriteRelaysProvider'
 import { useFeed } from '@/providers/FeedProvider'
 import { useNostr } from '@/providers/NostrProvider'
-import { UsersRound } from 'lucide-react'
+import { usePinnedUsers } from '@/providers/PinnedUsersProvider'
+import { Star, UsersRound } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import RelayIcon from '../RelayIcon'
 import RelaySetCard from '../RelaySetCard'
@@ -15,6 +16,7 @@ export default function FeedSwitcher({ close }: { close?: () => void }) {
   const { pubkey } = useNostr()
   const { relaySets, favoriteRelays } = useFavoriteRelays()
   const { feedInfo, switchFeed } = useFeed()
+  const { pinnedPubkeySet } = usePinnedUsers()
 
   return (
     <div className="space-y-2">
@@ -35,6 +37,23 @@ export default function FeedSwitcher({ close }: { close?: () => void }) {
         </div>
       </FeedSwitcherItem>
 
+      <FeedSwitcherItem
+        isActive={feedInfo?.feedType === 'pinned'}
+        disabled={!pubkey || pinnedPubkeySet.size === 0}
+        onClick={() => {
+          if (!pubkey) return
+          switchFeed('pinned', { pubkey })
+          close?.()
+        }}
+      >
+        <div className="flex gap-2 items-center">
+          <div className="flex justify-center items-center w-6 h-6 shrink-0">
+            <Star className="size-4" />
+          </div>
+          <div>{t('Special Follow')}</div>
+        </div>
+      </FeedSwitcherItem>
+
       <div className="flex justify-end items-center text-sm">
         <SecondaryPageLink
           to={toRelaySettings()}

src/components/Profile/SpecialFollowButton.tsx

@@ -0,0 +1,51 @@
+import { Button } from '@/components/ui/button'
+import { useNostr } from '@/providers/NostrProvider'
+import { usePinnedUsers } from '@/providers/PinnedUsersProvider'
+import { Loader, Star } from 'lucide-react'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+
+export default function SpecialFollowButton({ pubkey }: { pubkey: string }) {
+  const { t } = useTranslation()
+  const { pubkey: accountPubkey, checkLogin } = useNostr()
+  const { isPinned, togglePin } = usePinnedUsers()
+  const [updating, setUpdating] = useState(false)
+  const pinned = useMemo(() => isPinned(pubkey), [isPinned, pubkey])
+
+  if (!accountPubkey || (pubkey && pubkey === accountPubkey)) return null
+
+  const onToggle = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    checkLogin(async () => {
+      setUpdating(true)
+      try {
+        await togglePin(pubkey)
+      } catch (error) {
+        if (pinned) {
+          toast.error(t('Unfollow failed') + ': ' + (error as Error).message)
+        } else {
+          toast.error(t('Follow failed') + ': ' + (error as Error).message)
+        }
+      } finally {
+        setUpdating(false)
+      }
+    })
+  }
+
+  return (
+    <Button
+      variant="secondary"
+      size="icon"
+      className="rounded-full"
+      onClick={onToggle}
+      disabled={updating}
+    >
+      {updating ? (
+        <Loader className="animate-spin" />
+      ) : (
+        <Star className={pinned ? 'fill-primary stroke-primary' : ''} />
+      )}
+    </Button>
+  )
+}

src/components/Profile/index.tsx

@@ -27,6 +27,7 @@ import FollowedBy from './FollowedBy'
 import Followings from './Followings'
 import ProfileFeed from './ProfileFeed'
 import Relays from './Relays'
+import SpecialFollowButton from './SpecialFollowButton'
 
 export default function Profile({ id }: { id?: string }) {
   const { t } = useTranslation()
@@ -133,6 +134,7 @@ export default function Profile({ id }: { id?: string }) {
             ) : (
               <>
                 {!!lightningAddress && <ProfileZapButton pubkey={pubkey} />}
+                <SpecialFollowButton pubkey={pubkey} />
                 <FollowButton pubkey={pubkey} />
               </>
             )}

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 = (
       <>

src/providers/FeedProvider.tsx

@@ -65,6 +65,11 @@ export function FeedProvider({ children }: { children: React.ReactNode }) {
         return await switchFeed('following', { pubkey })
       }
 
+      // update pinned feed if pubkey changes
+      if (feedInfo?.feedType === 'pinned' && pubkey) {
+        return await switchFeed('pinned', { pubkey })
+      }
+
       setIsReady(true)
     }
 
@@ -147,6 +152,20 @@ export function FeedProvider({ children }: { children: React.ReactNode }) {
       setIsReady(true)
       return
     }
+    if (feedType === 'pinned') {
+      if (!options.pubkey) {
+        setIsReady(true)
+        return
+      }
+      const newFeedInfo = { feedType }
+      setFeedInfo(newFeedInfo)
+      feedInfoRef.current = newFeedInfo
+      storage.setFeedInfo(newFeedInfo, pubkey)
+
+      setRelayUrls([])
+      setIsReady(true)
+      return
+    }
     setIsReady(true)
   }
 

src/types/index.d.ts

@@ -107,7 +107,7 @@ export type TAccount = {
 
 export type TAccountPointer = Pick<TAccount, 'pubkey' | 'signerType'>
 
-export type TFeedType = 'following' | 'relays' | 'relay'
+export type TFeedType = 'following' | 'pinned' | 'relays' | 'relay'
 export type TFeedInfo = { feedType: TFeedType; id?: string } | null
 
 export type TLanguage = 'en' | 'zh' | 'pl'