diff --git a/package.json b/package.json
index 86bae666..79d3620a 100644
--- a/package.json
+++ b/package.json
@@ -76,13 +76,14 @@
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.17.0",
     "react-string-replace": "^1.1.1",
+    "react-xarrows": "^2.0.2",
     "reactflow": "^11.9.4",
     "remark-gfm": "^3.0.1",
     "sonner": "^1.0.3",
     "tailwind-scrollbar": "^3.0.5",
     "tauri-controls": "^0.2.0",
     "tippy.js": "^6.3.7",
-    "virtua": "^0.13.0",
+    "virtua": "^0.14.0",
     "zustand": "^4.4.3"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fe3d5304..06a1b85a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -179,6 +179,9 @@ dependencies:
   react-string-replace:
     specifier: ^1.1.1
     version: 1.1.1
+  react-xarrows:
+    specifier: ^2.0.2
+    version: 2.0.2(react@18.2.0)
   reactflow:
     specifier: ^11.9.4
     version: 11.9.4(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
@@ -198,8 +201,8 @@ dependencies:
     specifier: ^6.3.7
     version: 6.3.7
   virtua:
-    specifier: ^0.13.0
-    version: 0.13.0(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^0.14.0
+    version: 0.14.0(react-dom@18.2.0)(react@18.2.0)
   zustand:
     specifier: ^4.4.3
     version: 4.4.3(@types/react@18.2.29)(react@18.2.0)
@@ -4688,7 +4691,6 @@ packages:
 
   /lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
-    dev: true
 
   /log-update@5.0.1:
     resolution: {integrity: sha512-5UtUDQ/6edw4ofyljDNcOVJQ4c7OjDro4h3y8e1GQL5iYElYclVHJ3zeWchylvMaKnDbDilC8irOVyexnA/Slw==}
@@ -5947,6 +5949,17 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /react-xarrows@2.0.2(react@18.2.0):
+    resolution: {integrity: sha512-tDlAqaxHNmy0vegW/6NdhoWyXJq1LANX/WUAlHyzoHe9BwFVnJPPDghmDjYeVr7XWFmBrVTUrHsrW7GKYI6HtQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+    dependencies:
+      '@types/prop-types': 15.7.9
+      lodash: 4.17.21
+      prop-types: 15.8.1
+      react: 18.2.0
+    dev: false
+
   /react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
@@ -6728,8 +6741,8 @@ packages:
       vfile-message: 3.1.4
     dev: false
 
-  /virtua@0.13.0(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-NiM+3lhl/XMLWsT+Fc+rcMQrsAe7PDRvncu6CjP5UEgDtulIo05KAaugrJAr/ptBofP/iAnlZK/X0Bjd+UkjIQ==}
+  /virtua@0.14.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-+g3fxgFuQCqw6PpU5qzTRKhbSUGOeMEap0VbPaIRB1RiK5MfLiGXIMwID1iX1DmvUC/SqsBsJfVvlUaPNGWSVQ==}
     peerDependencies:
       react: '>=16.14.0'
       react-dom: '>=16.14.0'
diff --git a/src/app/notes/article.tsx b/src/app/notes/article.tsx
index 5374736b..1abcf764 100644
--- a/src/app/notes/article.tsx
+++ b/src/app/notes/article.tsx
@@ -15,7 +15,7 @@ import {
   NoteStats,
   UnknownNote,
 } from '@shared/notes';
-import { RepliesList } from '@shared/notes/replies/list';
+import { ReplyList } from '@shared/notes/replies/list';
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { User } from '@shared/user';
 
@@ -117,7 +117,7 @@ export function ArticleNoteScreen() {
                 </div>
                 <div ref={replyRef} className="px-3">
                   <NoteReplyForm id={data.id} pubkey={db.account.pubkey} />
-                  <RepliesList id={data.id} />
+                  <ReplyList id={data.id} />
                 </div>
               </>
             )}
diff --git a/src/app/notes/text.tsx b/src/app/notes/text.tsx
index 1d08cdae..ca6fa72c 100644
--- a/src/app/notes/text.tsx
+++ b/src/app/notes/text.tsx
@@ -17,7 +17,7 @@ import {
   TextNote,
   UnknownNote,
 } from '@shared/notes';
-import { RepliesList } from '@shared/notes/replies/list';
+import { ReplyList } from '@shared/notes/replies/list';
 import { User } from '@shared/user';
 
 import { useEvent } from '@utils/hooks/useEvent';
@@ -119,7 +119,7 @@ export function TextNoteScreen() {
             )}
             <div ref={replyRef} className="px-3">
               <NoteReplyForm id={id} pubkey={db.account.pubkey} />
-              <RepliesList id={id} />
+              <ReplyList id={id} />
             </div>
           </div>
           <div className="col-span-1" />
diff --git a/src/shared/accounts/active.tsx b/src/shared/accounts/active.tsx
index 8526741b..a199a835 100644
--- a/src/shared/accounts/active.tsx
+++ b/src/shared/accounts/active.tsx
@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
 import { useStorage } from '@libs/storage/provider';
 
 import { AccountMoreActions } from '@shared/accounts/more';
+import { NetworkStatusIndicator } from '@shared/networkStatusIndicator';
 
 import { useActivities } from '@stores/activities';
 
@@ -78,7 +79,7 @@ export function ActiveAccount() {
             />
           </Avatar.Fallback>
         </Avatar.Root>
-        <span className="absolute bottom-0 right-0 block h-2 w-2 rounded-full bg-teal-500 ring-2 ring-neutral-100 dark:ring-neutral-900" />
+        <NetworkStatusIndicator />
       </Link>
       <AccountMoreActions pubkey={db.account.pubkey} />
     </div>
diff --git a/src/shared/button.tsx b/src/shared/button.tsx
deleted file mode 100644
index c20ecb29..00000000
--- a/src/shared/button.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { ReactNode } from 'react';
-import { twMerge } from 'tailwind-merge';
-
-export function Button({
-  preset,
-  children,
-  disabled = false,
-  onClick = undefined,
-}: {
-  preset: 'small' | 'publish' | 'large' | 'large-alt';
-  children: ReactNode;
-  disabled?: boolean;
-  onClick?: () => void;
-}) {
-  let preClass: string;
-  switch (preset) {
-    case 'small':
-      preClass =
-        'w-min h-9 px-4 bg-neutral-400 dark:bg-neutral-600 rounded-md text-sm font-medium text-white hover:bg-blue-600';
-      break;
-    case 'publish':
-      preClass =
-        'w-min h-9 px-4 bg-blue-500 rounded-md text-sm font-medium text-white hover:bg-blue-600';
-      break;
-    case 'large':
-      preClass =
-        'h-11 w-full bg-blue-500 rounded-lg font-medium text-white hover:bg-blue-600';
-      break;
-    case 'large-alt':
-      preClass =
-        'h-11 w-full bg-neutral-400 dark:bg-neutral-600 rounded-lg font-medium text-white hover:bg-white/20';
-      break;
-    default:
-      break;
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      className={twMerge(
-        'inline-flex transform items-center justify-center gap-1 leading-none focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50',
-        preClass
-      )}
-    >
-      {children}
-    </button>
-  );
-}
diff --git a/src/shared/networkStatusIndicator.tsx b/src/shared/networkStatusIndicator.tsx
index dcf623ef..0f46526a 100644
--- a/src/shared/networkStatusIndicator.tsx
+++ b/src/shared/networkStatusIndicator.tsx
@@ -1,3 +1,5 @@
+import { twMerge } from 'tailwind-merge';
+
 import { useNetworkStatus } from '@utils/hooks/useNetworkStatus';
 
 export function NetworkStatusIndicator() {
@@ -5,9 +7,10 @@ export function NetworkStatusIndicator() {
 
   return (
     <span
-      className={`absolute right-0 top-0 block h-2 w-2 -translate-y-1/2 translate-x-1/2 transform rounded-full ${
-        isOnline ? 'bg-green-400' : 'bg-red-400'
-      } ring-2 ring-black`}
+      className={twMerge(
+        'absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-2 ring-neutral-100 dark:ring-neutral-900',
+        isOnline ? 'bg-teal-500' : 'bg-red-500'
+      )}
     />
   );
 }
diff --git a/src/shared/notes/replies/form.tsx b/src/shared/notes/replies/form.tsx
index e4b92c69..0fe4fbc8 100644
--- a/src/shared/notes/replies/form.tsx
+++ b/src/shared/notes/replies/form.tsx
@@ -1,14 +1,14 @@
 import { useState } from 'react';
 
-import { Button } from '@shared/button';
+import { useStorage } from '@libs/storage/provider';
+
+import { User } from '@shared/user';
 
 import { useNostr } from '@utils/hooks/useNostr';
-import { useProfile } from '@utils/hooks/useProfile';
-import { displayNpub } from '@utils/shortenKey';
 
-export function NoteReplyForm({ id, pubkey }: { id: string; pubkey: string }) {
+export function NoteReplyForm({ id }: { id: string }) {
   const { publish } = useNostr();
-  const { status, user } = useProfile(pubkey);
+  const { db } = useStorage();
 
   const [value, setValue] = useState('');
 
@@ -23,47 +23,23 @@ export function NoteReplyForm({ id, pubkey }: { id: string; pubkey: string }) {
   };
 
   return (
-    <div className="mt-3 flex flex-col rounded-xl bg-neutral-200 dark:bg-neutral-800">
-      <div className="relative w-full flex-1 overflow-hidden">
+    <div className="mt-3 flex gap-3">
+      <User pubkey={db.account.pubkey} variant="miniavatar" />
+      <div className="relative flex flex-1 flex-col rounded-xl bg-neutral-100 dark:bg-neutral-900">
         <textarea
           value={value}
           onChange={(e) => setValue(e.target.value)}
           placeholder="Reply to this thread..."
-          className=" relative h-24 w-full resize-none rounded-md bg-transparent px-3 py-3 text-base text-neutral-900 !outline-none placeholder:text-neutral-600 dark:text-neutral-100 dark:placeholder:text-neutral-400"
+          className="relative h-24 w-full resize-none bg-transparent p-3 text-base text-neutral-900 !outline-none placeholder:text-neutral-600 dark:text-neutral-100 dark:placeholder:text-neutral-400"
           spellCheck={false}
         />
-      </div>
-      <div className="w-full border-t border-neutral-300 px-3 py-3 dark:border-neutral-700">
-        {status === 'loading' ? (
-          <div>Loading</div>
-        ) : (
-          <div className="flex w-full items-center justify-between">
-            <div className="inline-flex items-center gap-2">
-              <div className="relative h-11 w-11 shrink-0 rounded">
-                <img
-                  src={user?.picture || user?.image}
-                  alt={pubkey}
-                  className="h-11 w-11 rounded-lg bg-white object-cover"
-                />
-              </div>
-              <div>
-                <p className="text-sm text-neutral-600 dark:text-neutral-400">Reply as</p>
-                <p className="font-semibold text-neutral-900 dark:text-neutral-100">
-                  {user?.name || displayNpub(pubkey, 16)}
-                </p>
-              </div>
-            </div>
-            <div className="flex items-center gap-2">
-              <Button
-                onClick={() => submit()}
-                disabled={value.length === 0 ? true : false}
-                preset="publish"
-              >
-                Reply
-              </Button>
-            </div>
-          </div>
-        )}
+        <button
+          onClick={() => submit()}
+          disabled={value.length === 0 ? true : false}
+          className="mb-2 ml-auto mr-2 h-9 w-20 rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50"
+        >
+          Reply
+        </button>
       </div>
     </div>
   );
diff --git a/src/shared/notes/replies/item.tsx b/src/shared/notes/replies/item.tsx
index b7c11997..07ed5e2b 100644
--- a/src/shared/notes/replies/item.tsx
+++ b/src/shared/notes/replies/item.tsx
@@ -1,34 +1,53 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import { NavArrowDownIcon } from '@shared/icons';
 import { MemoizedTextNote, NoteActions, SubReply } from '@shared/notes';
 import { User } from '@shared/user';
 
 import { NDKEventWithReplies } from '@utils/types';
 
 export function Reply({ event, root }: { event: NDKEventWithReplies; root?: string }) {
+  const [open, setOpen] = useState(false);
+
   return (
-    <div className="relative h-min w-full">
-      <div className="relative z-10">
-        <div className="relative flex flex-col">
-          <User pubkey={event.pubkey} time={event.created_at} eventId={event.id} />
-          <div className="-mt-4 flex items-start gap-3">
-            <div className="w-10 shrink-0" />
-            <div className="flex-1">
-              <MemoizedTextNote content={event.content} />
-              <NoteActions
-                id={event.id}
-                pubkey={event.pubkey}
-                root={root}
-                extraButtons={false}
-              />
-            </div>
+    <div className="relative">
+      <div className="relative flex flex-col">
+        <User pubkey={event.pubkey} time={event.created_at} eventId={event.id} />
+        <div className="-mt-4 flex items-start gap-3">
+          <div className="w-10 shrink-0" />
+          <div className="flex-1">
+            <MemoizedTextNote content={event.content} />
+            <NoteActions
+              id={event.id}
+              pubkey={event.pubkey}
+              root={root}
+              extraButtons={false}
+            />
           </div>
         </div>
-        <div className="pl-14">
-          {event.replies ? (
-            event.replies.map((sub) => <SubReply key={sub.id} event={sub} />)
-          ) : (
-            <div className="pb-3" />
-          )}
-        </div>
+      </div>
+      <div className="pl-[48px]">
+        <Collapsible.Root open={open} onOpenChange={setOpen}>
+          {event.replies?.length > 0 ? (
+            <div>
+              <Collapsible.Trigger asChild>
+                <div className="inline-flex h-10 items-center gap-1 font-semibold text-blue-500">
+                  <NavArrowDownIcon
+                    className={twMerge('h-3 w-3', open ? 'rotate-180 transform' : '')}
+                  />
+                  {event.replies?.length +
+                    ' ' +
+                    (event.replies?.length === 1 ? 'reply' : 'replies')}
+                </div>
+              </Collapsible.Trigger>
+              <Collapsible.Content>
+                {event.replies?.map((sub) => <SubReply key={sub.id} event={sub} />)}
+              </Collapsible.Content>
+            </div>
+          ) : null}
+        </Collapsible.Root>
       </div>
     </div>
   );
diff --git a/src/shared/notes/replies/list.tsx b/src/shared/notes/replies/list.tsx
index c3e8b739..5f118848 100644
--- a/src/shared/notes/replies/list.tsx
+++ b/src/shared/notes/replies/list.tsx
@@ -1,11 +1,12 @@
 import { useEffect, useState } from 'react';
 
-import { NoteSkeleton, Reply } from '@shared/notes';
+import { LoaderIcon } from '@shared/icons';
+import { Reply } from '@shared/notes';
 
 import { useNostr } from '@utils/hooks/useNostr';
 import { NDKEventWithReplies } from '@utils/types';
 
-export function RepliesList({ id }: { id: string }) {
+export function ReplyList({ id }: { id: string }) {
   const { fetchAllReplies, sub } = useNostr();
   const [data, setData] = useState<null | NDKEventWithReplies[]>(null);
 
@@ -36,33 +37,28 @@ export function RepliesList({ id }: { id: string }) {
 
   if (!data) {
     return (
-      <div className="mt-5 pb-10">
-        <div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
-          <NoteSkeleton />
+      <div className="mt-3">
+        <div className="flex h-16 items-center justify-center rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
+          <LoaderIcon className="h-5 w-5 animate-spin" />
         </div>
       </div>
     );
   }
 
   return (
-    <div className="mt-5 pb-10">
-      <h5 className="mb-2 text-lg font-semibold text-neutral-900 dark:text-neutral-100">
-        {data?.length || 0} replies
-      </h5>
-      <div className="flex flex-col gap-2">
-        {data?.length === 0 ? (
-          <div className="mt-2 flex w-full items-center justify-center rounded-xl bg-neutral-400 dark:bg-neutral-600">
-            <div className="flex flex-col items-center justify-center gap-2 py-6">
-              <h3 className="text-3xl">👋</h3>
-              <p className="leading-none text-neutral-600 dark:text-neutral-400">
-                Share your thought on it...
-              </p>
-            </div>
+    <div className="mt-3 flex flex-col gap-5">
+      {data?.length === 0 ? (
+        <div className="mt-2 flex w-full items-center justify-center rounded-xl bg-neutral-400 dark:bg-neutral-600">
+          <div className="flex flex-col items-center justify-center gap-2 py-6">
+            <h3 className="text-3xl">👋</h3>
+            <p className="leading-none text-neutral-600 dark:text-neutral-400">
+              Share your thought on it...
+            </p>
           </div>
-        ) : (
-          data.map((event) => <Reply key={event.id} event={event} root={id} />)
-        )}
-      </div>
+        </div>
+      ) : (
+        data.map((event) => <Reply key={event.id} event={event} root={id} />)
+      )}
     </div>
   );
 }
diff --git a/src/shared/notes/replies/sub.tsx b/src/shared/notes/replies/sub.tsx
index b8424d31..552063ce 100644
--- a/src/shared/notes/replies/sub.tsx
+++ b/src/shared/notes/replies/sub.tsx
@@ -5,7 +5,7 @@ import { User } from '@shared/user';
 
 export function SubReply({ event }: { event: NDKEvent }) {
   return (
-    <div className="relative z-10 mb-3 mt-5 flex flex-col">
+    <div className="mb-3 flex flex-col">
       <User pubkey={event.pubkey} time={event.created_at} eventId={event.id} />
       <div className="-mt-4 flex items-start gap-3">
         <div className="w-10 shrink-0" />
diff --git a/src/shared/user.tsx b/src/shared/user.tsx
index 93b30f91..cd804337 100644
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@@ -32,6 +32,7 @@ export const User = memo(function User({
     | 'chat'
     | 'large'
     | 'thread'
+    | 'miniavatar'
     | 'avatar'
     | 'stacked'
     | 'ministacked';
@@ -207,6 +208,28 @@ export const User = memo(function User({
     );
   }
 
+  if (variant === 'miniavatar') {
+    return (
+      <Avatar.Root>
+        <Avatar.Image
+          src={user?.picture || user?.image}
+          alt={pubkey}
+          loading="lazy"
+          decoding="async"
+          style={{ contentVisibility: 'auto' }}
+          className="h-10 w-10 rounded-lg"
+        />
+        <Avatar.Fallback delayMs={300}>
+          <img
+            src={svgURI}
+            alt={pubkey}
+            className="h-10 w-10 rounded-lg bg-black dark:bg-white"
+          />
+        </Avatar.Fallback>
+      </Avatar.Root>
+    );
+  }
+
   if (variant === 'stacked') {
     return (
       <Avatar.Root>
diff --git a/src/shared/widgets/local/thread.tsx b/src/shared/widgets/local/thread.tsx
index 0e432061..63809270 100644
--- a/src/shared/widgets/local/thread.tsx
+++ b/src/shared/widgets/local/thread.tsx
@@ -1,8 +1,7 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { useCallback } from 'react';
 
-import { useStorage } from '@libs/storage/provider';
-
+import { LoaderIcon } from '@shared/icons';
 import {
   MemoizedArticleNote,
   MemoizedFileNote,
@@ -12,8 +11,7 @@ import {
   NoteStats,
   UnknownNote,
 } from '@shared/notes';
-import { RepliesList } from '@shared/notes/replies/list';
-import { NoteSkeleton } from '@shared/notes/skeleton';
+import { ReplyList } from '@shared/notes/replies/list';
 import { TitleBar } from '@shared/titleBar';
 import { User } from '@shared/user';
 import { WidgetWrapper } from '@shared/widgets';
@@ -22,7 +20,6 @@ import { useEvent } from '@utils/hooks/useEvent';
 import { Widget } from '@utils/types';
 
 export function LocalThreadWidget({ params }: { params: Widget }) {
-  const { db } = useStorage();
   const { status, data } = useEvent(params.content);
 
   const renderKind = useCallback(
@@ -44,31 +41,22 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
   return (
     <WidgetWrapper>
       <TitleBar id={params.id} title={params.title} />
-      <div className="h-full overflow-y-auto scrollbar-none">
+      <div className="h-full overflow-y-auto px-3 scrollbar-none">
         {status === 'loading' ? (
-          <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
-              <NoteSkeleton />
-            </div>
+          <div className="flex h-16 items-center justify-center rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
+            <LoaderIcon className="h-5 w-5 animate-spin" />
           </div>
         ) : (
-          <div className="h-min w-full px-3">
-            <div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
-              <User pubkey={data.pubkey} time={data.created_at} variant="thread" />
-              <div className="mt-2">{renderKind(data)}</div>
-              <NoteActions
-                id={params.content}
-                pubkey={data.pubkey}
-                extraButtons={false}
-              />
-            </div>
+          <div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
+            <User pubkey={data.pubkey} time={data.created_at} variant="thread" />
+            <div className="mt-2">{renderKind(data)}</div>
+            <NoteActions id={params.content} pubkey={data.pubkey} extraButtons={false} />
           </div>
         )}
-        <div className="px-3">
-          <NoteStats id={params.content} />
-          <NoteReplyForm id={params.content} pubkey={db.account.pubkey} />
-          <RepliesList id={params.content} />
-        </div>
+        <NoteStats id={params.content} />
+        <hr className="my-4 h-px w-full border-none bg-neutral-100" />
+        <NoteReplyForm id={params.content} />
+        <ReplyList id={params.content} />
       </div>
     </WidgetWrapper>
   );
diff --git a/src/stores/sidebar.ts b/src/stores/sidebar.ts
deleted file mode 100644
index f8486e1e..00000000
--- a/src/stores/sidebar.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { create } from 'zustand';
-import { createJSONStorage, persist } from 'zustand/middleware';
-
-interface SidebarState {
-  feeds: boolean;
-  chats: boolean;
-  communities: boolean;
-  integrations: boolean;
-  toggleFeeds: () => void;
-  toggleChats: () => void;
-  toggleCommunities: () => void;
-  toggleIntegrations: () => void;
-}
-
-export const useSidebar = create<SidebarState>()(
-  persist(
-    (set) => ({
-      feeds: true,
-      chats: false,
-      communities: true,
-      integrations: true,
-      toggleFeeds: () => set((state) => ({ feeds: !state.feeds })),
-      toggleChats: () => set((state) => ({ chats: !state.chats })),
-      toggleCommunities: () => set((state) => ({ communities: !state.communities })),
-      toggleIntegrations: () => set((state) => ({ integrations: !state.integrations })),
-    }),
-    {
-      name: 'sidebar',
-      storage: createJSONStorage(() => localStorage),
-    }
-  )
-);