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