From 7ec4835c61bc4f50c08610980d636faae0e157f5 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Mon, 1 Dec 2025 00:05:09 +0800
Subject: [PATCH] feat: pinned users event

---
 src/App.tsx                                  |  23 +--
 src/components/UserAggregationList/index.tsx |  70 ++++----
 src/constants.ts                             |   3 +-
 src/providers/MuteListProvider.tsx           |  27 +--
 src/providers/NostrProvider/index.tsx        |  40 ++++-
 src/providers/PinnedUsersProvider.tsx        | 171 +++++++++++++++++++
 src/services/client.service.ts               |   4 +
 src/services/indexed-db.service.ts           |  37 ++--
 src/services/local-storage.service.ts        |  19 +--
 src/services/user-aggregation.service.ts     |  45 -----
 10 files changed, 303 insertions(+), 136 deletions(-)
 create mode 100644 src/providers/PinnedUsersProvider.tsx

diff --git a/src/App.tsx b/src/App.tsx
index f9be778..8c98026 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,6 +14,7 @@ import { MediaUploadServiceProvider } from '@/providers/MediaUploadServiceProvid
 import { MuteListProvider } from '@/providers/MuteListProvider'
 import { NostrProvider } from '@/providers/NostrProvider'
 import { PinListProvider } from '@/providers/PinListProvider'
+import { PinnedUsersProvider } from '@/providers/PinnedUsersProvider'
 import { ReplyProvider } from '@/providers/ReplyProvider'
 import { ScreenSizeProvider } from '@/providers/ScreenSizeProvider'
 import { ThemeProvider } from '@/providers/ThemeProvider'
@@ -40,16 +41,18 @@ export default function App(): JSX.Element {
                             <BookmarksProvider>
                               <EmojiPackProvider>
                                 <PinListProvider>
-                                  <FeedProvider>
-                                    <ReplyProvider>
-                                      <MediaUploadServiceProvider>
-                                        <KindFilterProvider>
-                                          <PageManager />
-                                          <Toaster />
-                                        </KindFilterProvider>
-                                      </MediaUploadServiceProvider>
-                                    </ReplyProvider>
-                                  </FeedProvider>
+                                  <PinnedUsersProvider>
+                                    <FeedProvider>
+                                      <ReplyProvider>
+                                        <MediaUploadServiceProvider>
+                                          <KindFilterProvider>
+                                            <PageManager />
+                                            <Toaster />
+                                          </KindFilterProvider>
+                                        </MediaUploadServiceProvider>
+                                      </ReplyProvider>
+                                    </FeedProvider>
+                                  </PinnedUsersProvider>
                                 </PinListProvider>
                               </EmojiPackProvider>
                             </BookmarksProvider>
diff --git a/src/components/UserAggregationList/index.tsx b/src/components/UserAggregationList/index.tsx
index 5cb74fd..4c7256d 100644
--- a/src/components/UserAggregationList/index.tsx
+++ b/src/components/UserAggregationList/index.tsx
@@ -11,6 +11,7 @@ import { useContentPolicy } from '@/providers/ContentPolicyProvider'
 import { useDeletedEvent } from '@/providers/DeletedEventProvider'
 import { useMuteList } from '@/providers/MuteListProvider'
 import { useNostr } from '@/providers/NostrProvider'
+import { usePinnedUsers } from '@/providers/PinnedUsersProvider'
 import { useUserTrust } from '@/providers/UserTrustProvider'
 import client from '@/services/client.service'
 import userAggregationService, { TUserAggregation } from '@/services/user-aggregation.service'
@@ -53,6 +54,7 @@ const UserAggregationList = forwardRef<
   const { push } = useSecondaryPage()
   const { hideUntrustedNotes, isUserTrusted } = useUserTrust()
   const { mutePubkeySet } = useMuteList()
+  const { pinnedPubkeySet } = usePinnedUsers()
   const { hideContentMentioningMutedUsers } = useContentPolicy()
   const { isEventDeleted } = useDeletedEvent()
   const [since, setSince] = useState(() => dayjs().subtract(1, 'day').unix())
@@ -64,9 +66,6 @@ const UserAggregationList = forwardRef<
   const [showCount, setShowCount] = useState(SHOW_COUNT)
   const [hasMore, setHasMore] = useState(true)
   const supportTouch = useMemo(() => isTouchDevice(), [])
-  const [pinnedPubkeys, setPinnedPubkeys] = useState<Set<string>>(
-    new Set(userAggregationService.getPinnedPubkeys())
-  )
   const feedId = useMemo(() => {
     return userAggregationService.getFeedId(subRequests, showKinds)
   }, [JSON.stringify(subRequests), JSON.stringify(showKinds)])
@@ -97,7 +96,6 @@ const UserAggregationList = forwardRef<
   useEffect(() => {
     if (!subRequests.length) return
 
-    setPinnedPubkeys(new Set(userAggregationService.getPinnedPubkeys()))
     setSince(dayjs().subtract(1, 'day').unix())
     setHasMore(true)
 
@@ -223,28 +221,24 @@ const UserAggregationList = forwardRef<
   const aggregations = useMemo(() => {
     const aggs = userAggregationService.aggregateByUser(filteredEvents)
     userAggregationService.saveAggregations(feedId, aggs)
+    return aggs
+  }, [feedId, filteredEvents])
 
-    const pinned: TUserAggregation[] = []
-    const unpinned: TUserAggregation[] = []
+  const pinnedAggregations = useMemo(() => {
+    return aggregations.filter((agg) => pinnedPubkeySet.has(agg.pubkey))
+  }, [aggregations, pinnedPubkeySet])
 
-    aggs.forEach((agg) => {
-      if (pinnedPubkeys.has(agg.pubkey)) {
-        pinned.push(agg)
-      } else {
-        unpinned.push(agg)
-      }
-    })
+  const normalAggregations = useMemo(() => {
+    return aggregations.filter((agg) => !pinnedPubkeySet.has(agg.pubkey))
+  }, [aggregations, pinnedPubkeySet])
 
-    return [...pinned, ...unpinned]
-  }, [feedId, filteredEvents, pinnedPubkeys])
-
-  const displayedAggregations = useMemo(() => {
-    return aggregations.slice(0, showCount)
-  }, [aggregations, showCount])
+  const displayedNormalAggregations = useMemo(() => {
+    return normalAggregations.slice(0, showCount)
+  }, [normalAggregations, showCount])
 
   const hasMoreToDisplay = useMemo(() => {
-    return aggregations.length > displayedAggregations.length
-  }, [aggregations, displayedAggregations])
+    return normalAggregations.length > displayedNormalAggregations.length
+  }, [normalAggregations, displayedNormalAggregations])
 
   useEffect(() => {
     const options = {
@@ -294,7 +288,7 @@ const UserAggregationList = forwardRef<
 
   const list = (
     <div className="min-h-screen">
-      {displayedAggregations.map((agg) => (
+      {pinnedAggregations.map((agg) => (
         <UserAggregationItem
           key={agg.pubkey}
           feedId={feedId}
@@ -302,11 +296,21 @@ const UserAggregationList = forwardRef<
           onClick={() => handleViewUser(agg)}
         />
       ))}
+
+      {normalAggregations.map((agg) => (
+        <UserAggregationItem
+          key={agg.pubkey}
+          feedId={feedId}
+          aggregation={agg}
+          onClick={() => handleViewUser(agg)}
+        />
+      ))}
+
       {loading || hasMoreToDisplay ? (
         <div ref={bottomRef}>
           <UserAggregationItemSkeleton />
         </div>
-      ) : displayedAggregations.length === 0 ? (
+      ) : aggregations.length === 0 ? (
         <div className="flex justify-center w-full mt-2">
           <Button size="lg" onClick={() => setRefreshCount((count) => count + 1)}>
             {t('Reload')}
@@ -373,7 +377,7 @@ function UserAggregationItem({
   const { t } = useTranslation()
   const supportTouch = useMemo(() => isTouchDevice(), [])
   const [hasNewEvents, setHasNewEvents] = useState(true)
-  const [isPinned, setIsPinned] = useState(userAggregationService.isPinned(aggregation.pubkey))
+  const { isPinned, togglePin } = usePinnedUsers()
 
   useEffect(() => {
     const update = () => {
@@ -396,13 +400,7 @@ function UserAggregationItem({
 
   const onTogglePin = (e: React.MouseEvent) => {
     e.stopPropagation()
-    if (isPinned) {
-      userAggregationService.unpinUser(aggregation.pubkey)
-      setIsPinned(false)
-    } else {
-      userAggregationService.pinUser(aggregation.pubkey)
-      setIsPinned(true)
-    }
+    togglePin(aggregation.pubkey)
   }
 
   const onToggleViewed = (e: React.MouseEvent) => {
@@ -459,13 +457,17 @@ function UserAggregationItem({
         size="icon"
         onClick={onTogglePin}
         className={`flex-shrink-0 ${
-          isPinned
+          isPinned(aggregation.pubkey)
             ? 'text-primary hover:text-primary/80'
             : 'text-muted-foreground hover:text-foreground'
         }`}
-        title={isPinned ? t('Unpin') : t('Pin')}
+        title={isPinned(aggregation.pubkey) ? t('Unpin') : t('Pin')}
       >
-        {isPinned ? <PinOff className="w-4 h-4" /> : <Pin className="w-4 h-4" />}
+        {isPinned(aggregation.pubkey) ? (
+          <PinOff className="w-4 h-4" />
+        ) : (
+          <Pin className="w-4 h-4" />
+        )}
       </Button>
 
       <button
diff --git a/src/constants.ts b/src/constants.ts
index db8b800..2ae7a26 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -41,7 +41,7 @@ export const StorageKey = {
   ENABLE_SINGLE_COLUMN_LAYOUT: 'enableSingleColumnLayout',
   FAVICON_URL_TEMPLATE: 'faviconUrlTemplate',
   FILTER_OUT_ONION_RELAYS: 'filterOutOnionRelays',
-  PINNED_PUBKEYS: 'pinnedPubkeys',
+  PINNED_PUBKEYS: 'pinnedPubkeys', // deprecated
   MEDIA_UPLOAD_SERVICE: 'mediaUploadService', // deprecated
   HIDE_UNTRUSTED_EVENTS: 'hideUntrustedEvents', // deprecated
   ACCOUNT_RELAY_LIST_EVENT_MAP: 'accountRelayListEventMap', // deprecated
@@ -80,6 +80,7 @@ export const ExtendedKind = {
   COMMENT: 1111,
   VOICE: 1222,
   VOICE_COMMENT: 1244,
+  PINNED_USERS: 10010,
   FAVORITE_RELAYS: 10012,
   BLOSSOM_SERVER_LIST: 10063,
   FOLLOW_PACK: 39089,
diff --git a/src/providers/MuteListProvider.tsx b/src/providers/MuteListProvider.tsx
index 3e8862f..edf551b 100644
--- a/src/providers/MuteListProvider.tsx
+++ b/src/providers/MuteListProvider.tsx
@@ -54,25 +54,30 @@ export function MuteListProvider({ children }: { children: React.ReactNode }) {
   }, [publicMutePubkeySet, privateMutePubkeySet])
   const [changing, setChanging] = useState(false)
 
-  const getPrivateTags = async (muteListEvent: Event) => {
-    if (!muteListEvent.content) return []
+  const getPrivateTags = useCallback(
+    async (muteListEvent: Event) => {
+      if (!muteListEvent.content) return []
 
-    const storedDecryptedTags = await indexedDb.getMuteDecryptedTags(muteListEvent.id)
-
-    if (storedDecryptedTags) {
-      return storedDecryptedTags
-    } else {
       try {
-        const plainText = await nip04Decrypt(muteListEvent.pubkey, muteListEvent.content)
+        const storedPlainText = await indexedDb.getDecryptedContent(muteListEvent.id)
+
+        let plainText: string
+        if (storedPlainText) {
+          plainText = storedPlainText
+        } else {
+          plainText = await nip04Decrypt(muteListEvent.pubkey, muteListEvent.content)
+          await indexedDb.putDecryptedContent(muteListEvent.id, plainText)
+        }
+
         const privateTags = z.array(z.array(z.string())).parse(JSON.parse(plainText))
-        await indexedDb.putMuteDecryptedTags(muteListEvent.id, privateTags)
         return privateTags
       } catch (error) {
         console.error('Failed to decrypt mute list content', error)
         return []
       }
-    }
-  }
+    },
+    [nip04Decrypt]
+  )
 
   useEffect(() => {
     const updateMuteTags = async () => {
diff --git a/src/providers/NostrProvider/index.tsx b/src/providers/NostrProvider/index.tsx
index 6407f0a..083d9b4 100644
--- a/src/providers/NostrProvider/index.tsx
+++ b/src/providers/NostrProvider/index.tsx
@@ -56,6 +56,7 @@ type TNostrContext = {
   favoriteRelaysEvent: Event | null
   userEmojiListEvent: Event | null
   pinListEvent: Event | null
+  pinnedUsersEvent: Event | null
   notificationsSeenAt: number
   account: TAccountPointer | null
   accounts: TAccountPointer[]
@@ -88,6 +89,7 @@ type TNostrContext = {
   updateFavoriteRelaysEvent: (favoriteRelaysEvent: Event) => Promise<void>
   updateUserEmojiListEvent: (userEmojiListEvent: Event) => Promise<void>
   updatePinListEvent: (pinListEvent: Event) => Promise<void>
+  updatePinnedUsersEvent: (pinnedUsersEvent: Event, privateTags?: string[][]) => Promise<void>
   updateNotificationsSeenAt: (skipPublish?: boolean) => Promise<void>
 }
 
@@ -119,6 +121,7 @@ export function NostrProvider({ children }: { children: React.ReactNode }) {
   const [relayList, setRelayList] = useState<TRelayList | null>(null)
   const [followListEvent, setFollowListEvent] = useState<Event | null>(null)
   const [muteListEvent, setMuteListEvent] = useState<Event | null>(null)
+  const [pinnedUsersEvent, setPinnedUsersEvent] = useState<Event | null>(null)
   const [bookmarkListEvent, setBookmarkListEvent] = useState<Event | null>(null)
   const [favoriteRelaysEvent, setFavoriteRelaysEvent] = useState<Event | null>(null)
   const [userEmojiListEvent, setUserEmojiListEvent] = useState<Event | null>(null)
@@ -195,7 +198,8 @@ export function NostrProvider({ children }: { children: React.ReactNode }) {
         storedBookmarkListEvent,
         storedFavoriteRelaysEvent,
         storedUserEmojiListEvent,
-        storedPinListEvent
+        storedPinListEvent,
+        storedPinnedUsersEvent
       ] = await Promise.all([
         indexedDb.getReplaceableEvent(account.pubkey, kinds.RelayList),
         indexedDb.getReplaceableEvent(account.pubkey, kinds.Metadata),
@@ -204,7 +208,8 @@ export function NostrProvider({ children }: { children: React.ReactNode }) {
         indexedDb.getReplaceableEvent(account.pubkey, kinds.BookmarkList),
         indexedDb.getReplaceableEvent(account.pubkey, ExtendedKind.FAVORITE_RELAYS),
         indexedDb.getReplaceableEvent(account.pubkey, kinds.UserEmojiList),
-        indexedDb.getReplaceableEvent(account.pubkey, kinds.Pinlist)
+        indexedDb.getReplaceableEvent(account.pubkey, kinds.Pinlist),
+        indexedDb.getReplaceableEvent(account.pubkey, ExtendedKind.PINNED_USERS)
       ])
       if (storedRelayListEvent) {
         setRelayList(getRelayListFromEvent(storedRelayListEvent, storage.getFilterOutOnionRelays()))
@@ -231,6 +236,9 @@ export function NostrProvider({ children }: { children: React.ReactNode }) {
       if (storedPinListEvent) {
         setPinListEvent(storedPinListEvent)
       }
+      if (storedPinnedUsersEvent !== undefined) {
+        setPinnedUsersEvent(storedPinnedUsersEvent)
+      }
 
       const relayListEvents = await client.fetchEvents(BIG_RELAY_URLS, {
         kinds: [kinds.RelayList],
@@ -254,7 +262,8 @@ export function NostrProvider({ children }: { children: React.ReactNode }) {
             ExtendedKind.FAVORITE_RELAYS,
             ExtendedKind.BLOSSOM_SERVER_LIST,
             kinds.UserEmojiList,
-            kinds.Pinlist
+            kinds.Pinlist,
+            ExtendedKind.PINNED_USERS
           ],
           authors: [account.pubkey]
         },
@@ -280,6 +289,8 @@ export function NostrProvider({ children }: { children: React.ReactNode }) {
           getReplaceableEventIdentifier(e) === ApplicationDataKey.NOTIFICATIONS_SEEN_AT
       )
       const pinnedNotesEvent = sortedEvents.find((e) => e.kind === kinds.Pinlist)
+      const pinnedUsersEvent = sortedEvents.find((e) => e.kind === ExtendedKind.PINNED_USERS)
+
       if (profileEvent) {
         const updatedProfileEvent = await indexedDb.putReplaceableEvent(profileEvent)
         if (updatedProfileEvent.id === profileEvent.id) {
@@ -332,6 +343,15 @@ export function NostrProvider({ children }: { children: React.ReactNode }) {
           setPinListEvent(updatedPinnedNotesEvent)
         }
       }
+      if (pinnedUsersEvent) {
+        const updatedPinnedUsersEvent = await indexedDb.putReplaceableEvent(pinnedUsersEvent)
+        if (updatedPinnedUsersEvent.id === pinnedUsersEvent.id) {
+          setPinnedUsersEvent(updatedPinnedUsersEvent)
+        }
+      } else {
+        await indexedDb.putNullReplaceableEvent(account.pubkey, ExtendedKind.PINNED_USERS)
+        setPinnedUsersEvent(null)
+      }
 
       const notificationsSeenAt = Math.max(
         notificationsSeenAtEvent?.created_at ?? 0,
@@ -726,7 +746,7 @@ export function NostrProvider({ children }: { children: React.ReactNode }) {
     const newMuteListEvent = await indexedDb.putReplaceableEvent(muteListEvent)
     if (newMuteListEvent.id !== muteListEvent.id) return
 
-    await indexedDb.putMuteDecryptedTags(muteListEvent.id, privateTags)
+    await indexedDb.putDecryptedContent(muteListEvent.id, JSON.stringify(privateTags))
     setMuteListEvent(muteListEvent)
   }
 
@@ -758,6 +778,16 @@ export function NostrProvider({ children }: { children: React.ReactNode }) {
     setPinListEvent(newPinListEvent)
   }
 
+  const updatePinnedUsersEvent = async (pinnedUsersEvent: Event, privateTags?: string[][]) => {
+    const newPinnedUsersEvent = await indexedDb.putReplaceableEvent(pinnedUsersEvent)
+    if (newPinnedUsersEvent.id !== pinnedUsersEvent.id) return
+
+    if (privateTags) {
+      await indexedDb.putDecryptedContent(pinnedUsersEvent.id, JSON.stringify(privateTags))
+    }
+    setPinnedUsersEvent(newPinnedUsersEvent)
+  }
+
   const updateNotificationsSeenAt = async (skipPublish = false) => {
     if (!account) return
 
@@ -794,6 +824,7 @@ export function NostrProvider({ children }: { children: React.ReactNode }) {
         favoriteRelaysEvent,
         userEmojiListEvent,
         pinListEvent,
+        pinnedUsersEvent,
         notificationsSeenAt,
         account,
         accounts,
@@ -823,6 +854,7 @@ export function NostrProvider({ children }: { children: React.ReactNode }) {
         updateFavoriteRelaysEvent,
         updateUserEmojiListEvent,
         updatePinListEvent,
+        updatePinnedUsersEvent,
         updateNotificationsSeenAt
       }}
     >
diff --git a/src/providers/PinnedUsersProvider.tsx b/src/providers/PinnedUsersProvider.tsx
new file mode 100644
index 0000000..386fb89
--- /dev/null
+++ b/src/providers/PinnedUsersProvider.tsx
@@ -0,0 +1,171 @@
+import { ExtendedKind } from '@/constants'
+import { getPubkeysFromPTags } from '@/lib/tag'
+import indexedDb from '@/services/indexed-db.service'
+import { Event } from 'nostr-tools'
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { z } from 'zod'
+import { useNostr } from './NostrProvider'
+
+type TPinnedUsersContext = {
+  pinnedPubkeySet: Set<string>
+  isPinned: (pubkey: string) => boolean
+  pinUser: (pubkey: string) => Promise<void>
+  unpinUser: (pubkey: string) => Promise<void>
+  togglePin: (pubkey: string) => Promise<void>
+}
+
+const PinnedUsersContext = createContext<TPinnedUsersContext | undefined>(undefined)
+
+export const usePinnedUsers = () => {
+  const context = useContext(PinnedUsersContext)
+  if (!context) {
+    throw new Error('usePinnedUsers must be used within a PinnedUsersProvider')
+  }
+  return context
+}
+
+function createPinnedUsersListDraftEvent(tags: string[][], content = '') {
+  return {
+    kind: ExtendedKind.PINNED_USERS,
+    content,
+    tags,
+    created_at: Math.floor(Date.now() / 1000)
+  }
+}
+
+export function PinnedUsersProvider({ children }: { children: React.ReactNode }) {
+  const {
+    pubkey: accountPubkey,
+    pinnedUsersEvent,
+    updatePinnedUsersEvent,
+    publish,
+    nip04Decrypt,
+    nip04Encrypt
+  } = useNostr()
+  const [privateTags, setPrivateTags] = useState<string[][]>([])
+  const pinnedPubkeySet = useMemo(() => {
+    if (!pinnedUsersEvent) return new Set<string>()
+    return new Set(getPubkeysFromPTags(pinnedUsersEvent.tags.concat(privateTags)))
+  }, [pinnedUsersEvent, privateTags])
+
+  useEffect(() => {
+    const updatePrivateTags = async () => {
+      if (!pinnedUsersEvent) {
+        setPrivateTags([])
+        return
+      }
+
+      const privateTags = await getPrivateTags(pinnedUsersEvent).catch(() => {
+        return []
+      })
+      setPrivateTags(privateTags)
+    }
+    updatePrivateTags()
+  }, [pinnedUsersEvent])
+
+  const getPrivateTags = useCallback(
+    async (event: Event) => {
+      if (!event.content) return []
+
+      try {
+        const storedPlainText = await indexedDb.getDecryptedContent(event.id)
+
+        let plainText: string
+        if (storedPlainText) {
+          plainText = storedPlainText
+        } else {
+          plainText = await nip04Decrypt(event.pubkey, event.content)
+          await indexedDb.putDecryptedContent(event.id, plainText)
+        }
+
+        const privateTags = z.array(z.array(z.string())).parse(JSON.parse(plainText))
+        return privateTags
+      } catch (error) {
+        console.error('Failed to decrypt pinned users content', error)
+        return []
+      }
+    },
+    [nip04Decrypt]
+  )
+
+  const isPinned = useCallback(
+    (pubkey: string) => {
+      return pinnedPubkeySet.has(pubkey)
+    },
+    [pinnedPubkeySet]
+  )
+
+  const pinUser = useCallback(
+    async (pubkey: string) => {
+      if (!accountPubkey || isPinned(pubkey)) return
+
+      try {
+        const newTags = [...(pinnedUsersEvent?.tags ?? []), ['p', pubkey]]
+        const draftEvent = createPinnedUsersListDraftEvent(newTags, pinnedUsersEvent?.content ?? '')
+        const newEvent = await publish(draftEvent)
+        await updatePinnedUsersEvent(newEvent, privateTags)
+      } catch (error) {
+        console.error('Failed to pin user:', error)
+      }
+    },
+    [accountPubkey, isPinned, pinnedUsersEvent, publish, updatePinnedUsersEvent, privateTags]
+  )
+
+  const unpinUser = useCallback(
+    async (pubkey: string) => {
+      if (!accountPubkey || !pinnedUsersEvent || !isPinned(pubkey)) return
+
+      try {
+        const newTags = pinnedUsersEvent.tags.filter(
+          ([tagName, tagValue]) => tagName !== 'p' || tagValue !== pubkey
+        )
+        const newPrivateTags = privateTags.filter(
+          ([tagName, tagValue]) => tagName !== 'p' || tagValue !== pubkey
+        )
+        let newContent = pinnedUsersEvent.content
+        if (newPrivateTags.length !== privateTags.length) {
+          newContent = await nip04Encrypt(pinnedUsersEvent.pubkey, JSON.stringify(newPrivateTags))
+        }
+        const draftEvent = createPinnedUsersListDraftEvent(newTags, newContent)
+        const newEvent = await publish(draftEvent)
+        await updatePinnedUsersEvent(newEvent, newPrivateTags)
+      } catch (error) {
+        console.error('Failed to unpin user:', error)
+      }
+    },
+    [
+      accountPubkey,
+      isPinned,
+      pinnedUsersEvent,
+      publish,
+      updatePinnedUsersEvent,
+      privateTags,
+      nip04Encrypt
+    ]
+  )
+
+  const togglePin = useCallback(
+    async (pubkey: string) => {
+      if (isPinned(pubkey)) {
+        await unpinUser(pubkey)
+      } else {
+        await pinUser(pubkey)
+      }
+    },
+    [isPinned, pinUser, unpinUser]
+  )
+
+  return (
+    <PinnedUsersContext.Provider
+      value={{
+        pinnedPubkeySet,
+        isPinned,
+        pinUser,
+        unpinUser,
+        togglePin
+      }}
+    >
+      {children}
+    </PinnedUsersContext.Provider>
+  )
+}
diff --git a/src/services/client.service.ts b/src/services/client.service.ts
index 8bcb750..2c44b4d 100644
--- a/src/services/client.service.ts
+++ b/src/services/client.service.ts
@@ -1397,6 +1397,10 @@ class ClientService extends EventTarget {
     return this.fetchReplaceableEvent(pubkey, kinds.UserEmojiList)
   }
 
+  async fetchPinnedUsersList(pubkey: string) {
+    return this.fetchReplaceableEvent(pubkey, ExtendedKind.PINNED_USERS)
+  }
+
   async updateBlossomServerListEventCache(evt: NEvent) {
     await this.updateReplaceableEventCache(evt)
   }
diff --git a/src/services/indexed-db.service.ts b/src/services/indexed-db.service.ts
index a1a15db..ba8f2cd 100644
--- a/src/services/indexed-db.service.ts
+++ b/src/services/indexed-db.service.ts
@@ -16,7 +16,6 @@ const StoreNames = {
   MUTE_LIST_EVENTS: 'muteListEvents',
   BOOKMARK_LIST_EVENTS: 'bookmarkListEvents',
   BLOSSOM_SERVER_LIST_EVENTS: 'blossomServerListEvents',
-  MUTE_DECRYPTED_TAGS: 'muteDecryptedTags',
   USER_EMOJI_LIST_EVENTS: 'userEmojiListEvents',
   EMOJI_SET_EVENTS: 'emojiSetEvents',
   PIN_LIST_EVENTS: 'pinListEvents',
@@ -24,6 +23,9 @@ const StoreNames = {
   RELAY_SETS: 'relaySets',
   FOLLOWING_FAVORITE_RELAYS: 'followingFavoriteRelays',
   RELAY_INFOS: 'relayInfos',
+  DECRYPTED_CONTENTS: 'decryptedContents',
+  PINNED_USERS_EVENTS: 'pinnedUsersEvents',
+  MUTE_DECRYPTED_TAGS: 'muteDecryptedTags', // deprecated
   RELAY_INFO_EVENTS: 'relayInfoEvents' // deprecated
 }
 
@@ -43,7 +45,7 @@ class IndexedDbService {
   init(): Promise<void> {
     if (!this.initPromise) {
       this.initPromise = new Promise((resolve, reject) => {
-        const request = window.indexedDB.open('jumble', 9)
+        const request = window.indexedDB.open('jumble', 10)
 
         request.onerror = (event) => {
           reject(event)
@@ -71,8 +73,8 @@ class IndexedDbService {
           if (!db.objectStoreNames.contains(StoreNames.BOOKMARK_LIST_EVENTS)) {
             db.createObjectStore(StoreNames.BOOKMARK_LIST_EVENTS, { keyPath: 'key' })
           }
-          if (!db.objectStoreNames.contains(StoreNames.MUTE_DECRYPTED_TAGS)) {
-            db.createObjectStore(StoreNames.MUTE_DECRYPTED_TAGS, { keyPath: 'key' })
+          if (!db.objectStoreNames.contains(StoreNames.DECRYPTED_CONTENTS)) {
+            db.createObjectStore(StoreNames.DECRYPTED_CONTENTS, { keyPath: 'key' })
           }
           if (!db.objectStoreNames.contains(StoreNames.FAVORITE_RELAYS)) {
             db.createObjectStore(StoreNames.FAVORITE_RELAYS, { keyPath: 'key' })
@@ -98,9 +100,16 @@ class IndexedDbService {
           if (!db.objectStoreNames.contains(StoreNames.PIN_LIST_EVENTS)) {
             db.createObjectStore(StoreNames.PIN_LIST_EVENTS, { keyPath: 'key' })
           }
+          if (!db.objectStoreNames.contains(StoreNames.PINNED_USERS_EVENTS)) {
+            db.createObjectStore(StoreNames.PINNED_USERS_EVENTS, { keyPath: 'key' })
+          }
+
           if (db.objectStoreNames.contains(StoreNames.RELAY_INFO_EVENTS)) {
             db.deleteObjectStore(StoreNames.RELAY_INFO_EVENTS)
           }
+          if (db.objectStoreNames.contains(StoreNames.MUTE_DECRYPTED_TAGS)) {
+            db.deleteObjectStore(StoreNames.MUTE_DECRYPTED_TAGS)
+          }
           this.db = db
         }
       })
@@ -268,19 +277,19 @@ class IndexedDbService {
     })
   }
 
-  async getMuteDecryptedTags(id: string): Promise<string[][] | null> {
+  async getDecryptedContent(key: string): Promise<string | null> {
     await this.initPromise
     return new Promise((resolve, reject) => {
       if (!this.db) {
         return reject('database not initialized')
       }
-      const transaction = this.db.transaction(StoreNames.MUTE_DECRYPTED_TAGS, 'readonly')
-      const store = transaction.objectStore(StoreNames.MUTE_DECRYPTED_TAGS)
-      const request = store.get(id)
+      const transaction = this.db.transaction(StoreNames.DECRYPTED_CONTENTS, 'readonly')
+      const store = transaction.objectStore(StoreNames.DECRYPTED_CONTENTS)
+      const request = store.get(key)
 
       request.onsuccess = () => {
         transaction.commit()
-        resolve((request.result as TValue<string[][]>)?.value)
+        resolve((request.result as TValue<string>)?.value)
       }
 
       request.onerror = (event) => {
@@ -290,16 +299,16 @@ class IndexedDbService {
     })
   }
 
-  async putMuteDecryptedTags(id: string, tags: string[][]): Promise<void> {
+  async putDecryptedContent(key: string, content: string): Promise<void> {
     await this.initPromise
     return new Promise((resolve, reject) => {
       if (!this.db) {
         return reject('database not initialized')
       }
-      const transaction = this.db.transaction(StoreNames.MUTE_DECRYPTED_TAGS, 'readwrite')
-      const store = transaction.objectStore(StoreNames.MUTE_DECRYPTED_TAGS)
+      const transaction = this.db.transaction(StoreNames.DECRYPTED_CONTENTS, 'readwrite')
+      const store = transaction.objectStore(StoreNames.DECRYPTED_CONTENTS)
 
-      const putRequest = store.put(this.formatValue(id, tags))
+      const putRequest = store.put(this.formatValue(key, content))
       putRequest.onsuccess = () => {
         transaction.commit()
         resolve()
@@ -471,6 +480,8 @@ class IndexedDbService {
         return StoreNames.EMOJI_SET_EVENTS
       case kinds.Pinlist:
         return StoreNames.PIN_LIST_EVENTS
+      case ExtendedKind.PINNED_USERS:
+        return StoreNames.PINNED_USERS_EVENTS
       default:
         return undefined
     }
diff --git a/src/services/local-storage.service.ts b/src/services/local-storage.service.ts
index 7701941..a17bcee 100644
--- a/src/services/local-storage.service.ts
+++ b/src/services/local-storage.service.ts
@@ -57,7 +57,6 @@ class LocalStorageService {
   private enableSingleColumnLayout: boolean = true
   private faviconUrlTemplate: string = DEFAULT_FAVICON_URL_TEMPLATE
   private filterOutOnionRelays: boolean = !isTorBrowser()
-  private pinnedPubkeys: Set<string> = new Set()
 
   constructor() {
     if (!LocalStorageService.instance) {
@@ -231,12 +230,8 @@ class LocalStorageService {
       this.filterOutOnionRelays = filterOutOnionRelaysStr !== 'false'
     }
 
-    const pinnedPubkeysStr = window.localStorage.getItem(StorageKey.PINNED_PUBKEYS)
-    if (pinnedPubkeysStr) {
-      this.pinnedPubkeys = new Set(JSON.parse(pinnedPubkeysStr))
-    }
-
     // Clean up deprecated data
+    window.localStorage.removeItem(StorageKey.PINNED_PUBKEYS)
     window.localStorage.removeItem(StorageKey.ACCOUNT_PROFILE_EVENT_MAP)
     window.localStorage.removeItem(StorageKey.ACCOUNT_FOLLOW_LIST_EVENT_MAP)
     window.localStorage.removeItem(StorageKey.ACCOUNT_RELAY_LIST_EVENT_MAP)
@@ -564,18 +559,6 @@ class LocalStorageService {
     this.filterOutOnionRelays = filterOut
     window.localStorage.setItem(StorageKey.FILTER_OUT_ONION_RELAYS, filterOut.toString())
   }
-
-  getPinnedPubkeys(): Set<string> {
-    return this.pinnedPubkeys
-  }
-
-  setPinnedPubkeys(pinnedPubkeys: Set<string>) {
-    this.pinnedPubkeys = pinnedPubkeys
-    window.localStorage.setItem(
-      StorageKey.PINNED_PUBKEYS,
-      JSON.stringify(Array.from(this.pinnedPubkeys))
-    )
-  }
 }
 
 const instance = new LocalStorageService()
diff --git a/src/services/user-aggregation.service.ts b/src/services/user-aggregation.service.ts
index 2d5ff77..cde0dae 100644
--- a/src/services/user-aggregation.service.ts
+++ b/src/services/user-aggregation.service.ts
@@ -1,5 +1,4 @@
 import { getEventKey } from '@/lib/event'
-import storage from '@/services/local-storage.service'
 import { TFeedSubRequest } from '@/types'
 import dayjs from 'dayjs'
 import { Event } from 'nostr-tools'
@@ -14,7 +13,6 @@ export type TUserAggregation = {
 class UserAggregationService {
   static instance: UserAggregationService
 
-  private pinnedPubkeys: Set<string> = new Set()
   private aggregationStore: Map<string, Map<string, Event[]>> = new Map()
   private listenersMap: Map<string, Set<() => void>> = new Map()
   private lastViewedMap: Map<string, number> = new Map()
@@ -24,7 +22,6 @@ class UserAggregationService {
       return UserAggregationService.instance
     }
     UserAggregationService.instance = this
-    this.pinnedPubkeys = storage.getPinnedPubkeys()
   }
 
   subscribeAggregationChange(feedId: string, pubkey: string, listener: () => void) {
@@ -64,33 +61,6 @@ class UserAggregationService {
     }
   }
 
-  // Pinned users management
-  getPinnedPubkeys(): string[] {
-    return [...this.pinnedPubkeys]
-  }
-
-  isPinned(pubkey: string): boolean {
-    return this.pinnedPubkeys.has(pubkey)
-  }
-
-  pinUser(pubkey: string) {
-    this.pinnedPubkeys.add(pubkey)
-    storage.setPinnedPubkeys(this.pinnedPubkeys)
-  }
-
-  unpinUser(pubkey: string) {
-    this.pinnedPubkeys.delete(pubkey)
-    storage.setPinnedPubkeys(this.pinnedPubkeys)
-  }
-
-  togglePin(pubkey: string) {
-    if (this.isPinned(pubkey)) {
-      this.unpinUser(pubkey)
-    } else {
-      this.pinUser(pubkey)
-    }
-  }
-
   // Aggregate events by user
   aggregateByUser(events: Event[]): TUserAggregation[] {
     const userEventsMap = new Map<string, Event[]>()
@@ -125,21 +95,6 @@ class UserAggregationService {
     })
   }
 
-  sortWithPinned(aggregations: TUserAggregation[]): TUserAggregation[] {
-    const pinned: TUserAggregation[] = []
-    const unpinned: TUserAggregation[] = []
-
-    aggregations.forEach((agg) => {
-      if (this.isPinned(agg.pubkey)) {
-        pinned.push(agg)
-      } else {
-        unpinned.push(agg)
-      }
-    })
-
-    return [...pinned, ...unpinned]
-  }
-
   saveAggregations(feedId: string, aggregations: TUserAggregation[]) {
     const map = new Map<string, Event[]>()
     aggregations.forEach((agg) => map.set(agg.pubkey, agg.events))