feat: following badge

src/components/FollowButton/index.tsx

@@ -20,10 +20,10 @@ import { toast } from 'sonner'
 export default function FollowButton({ pubkey }: { pubkey: string }) {
   const { t } = useTranslation()
   const { pubkey: accountPubkey, checkLogin } = useNostr()
-  const { followings, follow, unfollow } = useFollowList()
+  const { followingSet, follow, unfollow } = useFollowList()
   const [updating, setUpdating] = useState(false)
   const [hover, setHover] = useState(false)
-  const isFollowing = useMemo(() => followings.includes(pubkey), [followings, pubkey])
+  const isFollowing = useMemo(() => followingSet.has(pubkey), [followingSet, pubkey])
 
   if (!accountPubkey || (pubkey && pubkey === accountPubkey)) return null
 

src/components/FollowingBadge/index.tsx

@@ -0,0 +1,23 @@
+import { userIdToPubkey } from '@/lib/pubkey'
+import { useFollowList } from '@/providers/FollowListProvider'
+import { UserRoundCheck } from 'lucide-react'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export default function FollowingBadge({ pubkey, userId }: { pubkey?: string; userId?: string }) {
+  const { t } = useTranslation()
+  const { followingSet } = useFollowList()
+  const isFollowing = useMemo(() => {
+    if (pubkey) return followingSet.has(pubkey)
+
+    return userId ? followingSet.has(userIdToPubkey(userId)) : false
+  }, [followingSet, pubkey, userId])
+
+  if (!isFollowing) return null
+
+  return (
+    <div className="rounded-full bg-muted px-2 py-0.5 flex items-center" title={t('Following')}>
+      <UserRoundCheck className="!size-3" />
+    </div>
+  )
+}

src/components/Note/index.tsx

@@ -10,6 +10,7 @@ import { useMemo, useState } from 'react'
 import AudioPlayer from '../AudioPlayer'
 import ClientTag from '../ClientTag'
 import Content from '../Content'
+import FollowingBadge from '../FollowingBadge'
 import { FormattedTimestamp } from '../FormattedTimestamp'
 import Nip05 from '../Nip05'
 import NoteOptions from '../NoteOptions'
@@ -28,9 +29,9 @@ import MutedNote from './MutedNote'
 import NsfwNote from './NsfwNote'
 import PictureNote from './PictureNote'
 import Poll from './Poll'
+import RelayReview from './RelayReview'
 import UnknownNote from './UnknownNote'
 import VideoNote from './VideoNote'
-import RelayReview from './RelayReview'
 
 export default function Note({
   event,
@@ -117,6 +118,7 @@ export default function Note({
                 className={`font-semibold flex truncate ${size === 'small' ? 'text-sm' : ''}`}
                 skeletonClassName={size === 'small' ? 'h-3' : 'h-4'}
               />
+              <FollowingBadge pubkey={event.pubkey} />
               <ClientTag event={event} />
             </div>
             <div className="flex items-center gap-1 text-sm text-muted-foreground">

src/components/PostEditor/PostTextarea/Mention/MentionList.tsx

@@ -1,3 +1,4 @@
+import FollowingBadge from '@/components/FollowingBadge'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { formatNpub, userIdToPubkey } from '@/lib/pubkey'
 import { cn } from '@/lib/utils'
@@ -87,7 +88,10 @@ const MentionList = forwardRef<MentionListHandle, MentionListProps>((props, ref)
           <div className="flex gap-2 w-80 items-center truncate pointer-events-none">
             <SimpleUserAvatar userId={item} />
             <div className="flex-1 w-0">
-              <SimpleUsername userId={item} className="font-semibold truncate" />
+              <div className="flex items-center gap-2">
+                <SimpleUsername userId={item} className="font-semibold truncate" />
+                <FollowingBadge userId={item} />
+              </div>
               <Nip05 pubkey={userIdToPubkey(item)} />
             </div>
           </div>

src/components/Profile/Followings.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next'
 export default function Followings({ pubkey }: { pubkey: string }) {
   const { t } = useTranslation()
   const { pubkey: accountPubkey } = useNostr()
-  const { followings: selfFollowings } = useFollowList()
+  const { followingSet: selfFollowingSet } = useFollowList()
   const { followings, isFetching } = useFetchFollowings(pubkey)
 
   return (
@@ -18,7 +18,7 @@ export default function Followings({ pubkey }: { pubkey: string }) {
       className="flex gap-1 hover:underline w-fit items-center"
     >
       {accountPubkey === pubkey ? (
-        selfFollowings.length
+        selfFollowingSet.size
       ) : isFetching ? (
         <Loader className="animate-spin size-4" />
       ) : (

src/components/ProfileList/index.tsx

@@ -37,7 +37,7 @@ export default function ProfileList({ pubkeys }: { pubkeys: string[] }) {
   return (
     <div className="px-4 pt-2">
       {visiblePubkeys.map((pubkey, index) => (
-        <UserItem key={`${index}-${pubkey}`} pubkey={pubkey} />
+        <UserItem key={`${index}-${pubkey}`} userId={pubkey} />
       ))}
       {pubkeys.length > visiblePubkeys.length && <div ref={bottomRef} />}
     </div>

src/components/ProfileListBySearch/index.tsx

@@ -67,7 +67,7 @@ export function ProfileListBySearch({ search }: { search: string }) {
   return (
     <div className="px-4">
       {Array.from(pubkeySet).map((pubkey, index) => (
-        <UserItem key={`${index}-${pubkey}`} pubkey={pubkey} />
+        <UserItem key={`${index}-${pubkey}`} userId={pubkey} />
       ))}
       {hasMore && <UserItemSkeleton />}
       {hasMore && <div ref={bottomRef} />}

src/components/SearchBar/index.tsx

@@ -378,7 +378,12 @@ function ProfileItem({
       className={cn('px-2 hover:bg-accent rounded-md cursor-pointer', selected && 'bg-accent')}
       onClick={onClick}
     >
-      <UserItem pubkey={userId} hideFollowButton className="pointer-events-none" />
+      <UserItem
+        userId={userId}
+        className="pointer-events-none"
+        hideFollowButton
+        showFollowingBadge
+      />
     </div>
   )
 }

src/components/UserItem/index.tsx

@@ -3,29 +3,39 @@ import Nip05 from '@/components/Nip05'
 import UserAvatar from '@/components/UserAvatar'
 import Username from '@/components/Username'
 import { Skeleton } from '@/components/ui/skeleton'
+import { userIdToPubkey } from '@/lib/pubkey'
 import { cn } from '@/lib/utils'
+import { useMemo } from 'react'
+import FollowingBadge from '../FollowingBadge'
 
 export default function UserItem({
-  pubkey,
+  userId,
   hideFollowButton,
+  showFollowingBadge = false,
   className
 }: {
-  pubkey: string
+  userId: string
   hideFollowButton?: boolean
+  showFollowingBadge?: boolean
   className?: string
 }) {
+  const pubkey = useMemo(() => userIdToPubkey(userId), [userId])
+
   return (
     <div className={cn('flex gap-2 items-center h-14', className)}>
-      <UserAvatar userId={pubkey} className="shrink-0" />
+      <UserAvatar userId={userId} className="shrink-0" />
       <div className="w-full overflow-hidden">
-        <Username
-          userId={pubkey}
-          className="font-semibold truncate max-w-full w-fit"
-          skeletonClassName="h-4"
-        />
-        <Nip05 pubkey={pubkey} />
+        <div className="flex items-center gap-2">
+          <Username
+            userId={userId}
+            className="font-semibold truncate max-w-full w-fit"
+            skeletonClassName="h-4"
+          />
+          {showFollowingBadge && <FollowingBadge pubkey={pubkey} />}
+        </div>
+        <Nip05 pubkey={userId} />
       </div>
-      {!hideFollowButton && <FollowButton pubkey={pubkey} />}
+      {!hideFollowButton && <FollowButton pubkey={userId} />}
     </div>
   )
 }

src/providers/FollowListProvider.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'
 import { useNostr } from './NostrProvider'
 
 type TFollowListContext = {
-  followings: string[]
+  followingSet: Set<string>
   follow: (pubkey: string) => Promise<void>
   unfollow: (pubkey: string) => Promise<void>
 }
@@ -24,8 +24,8 @@ export const useFollowList = () => {
 export function FollowListProvider({ children }: { children: React.ReactNode }) {
   const { t } = useTranslation()
   const { pubkey: accountPubkey, followListEvent, publish, updateFollowListEvent } = useNostr()
-  const followings = useMemo(
-    () => (followListEvent ? getPubkeysFromPTags(followListEvent.tags) : []),
+  const followingSet = useMemo(
+    () => new Set(followListEvent ? getPubkeysFromPTags(followListEvent.tags) : []),
     [followListEvent]
   )
 
@@ -65,7 +65,7 @@ export function FollowListProvider({ children }: { children: React.ReactNode })
   return (
     <FollowListContext.Provider
       value={{
-        followings,
+        followingSet,
         follow,
         unfollow
       }}