update multi accounts bar

src/shared/accounts/active.tsx

@@ -5,11 +5,11 @@ export default function ActiveAccount({ user }: { user: any }) {
   const userData = JSON.parse(user.metadata);
 
   return (
-    <button className="relative h-11 w-11 rounded-lg">
+    <button className="relative h-10 w-10 rounded-lg">
       <Image
         src={userData.picture || DEFAULT_AVATAR}
         alt="user's avatar"
-        className="h-11 w-11 rounded-lg object-cover"
+        className="h-10 w-10 rounded-lg object-cover"
       />
     </button>
   );

src/shared/accounts/inactive.tsx

@@ -5,11 +5,11 @@ export default function InactiveAccount({ user }: { user: any }) {
   const userData = JSON.parse(user.metadata);
 
   return (
-    <div className="relative h-11 w-11 shrink rounded-lg">
+    <div className="relative h-10 w-10 shrink rounded-lg">
       <Image
         src={userData.picture || DEFAULT_AVATAR}
         alt="user's avatar"
-        className="h-11 w-11 rounded-lg object-cover"
+        className="h-10 w-10 rounded-lg object-cover"
       />
     </div>
   );

src/shared/icons/bell.tsx

@@ -0,0 +1,13 @@
+import { SVGProps } from 'react';
+
+export default function BellIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M16 18.25C15.3267 20.0159 13.7891 21.25 12 21.25C10.2109 21.25 8.67327 20.0159 8 18.25M20.5 18.25L18.9554 8.67345C18.4048 5.2596 15.458 2.75 12 2.75C8.54203 2.75 5.59523 5.2596 5.04461 8.67345L3.5 18.25H20.5Z"
+        stroke="currentColor"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+}

src/shared/multiAccounts.tsx

@@ -1,39 +1,57 @@
 import ActiveAccount from '@lume/shared/accounts/active';
 import InactiveAccount from '@lume/shared/accounts/inactive';
+import BellIcon from '@lume/shared/icons/bell';
 import PlusIcon from '@lume/shared/icons/plus';
 import { APP_VERSION } from '@lume/stores/constants';
-import { getAccounts } from '@lume/utils/storage';
+import { getAccounts, getActiveAccount } from '@lume/utils/storage';
 
 import useSWR from 'swr';
 
-const fetcher = () => getAccounts();
+const allFetcher = () => getAccounts();
+const fetcher = () => getActiveAccount();
 
 export default function MultiAccounts() {
-  const { data, error }: any = useSWR('allAccounts', fetcher);
+  const { data: accounts }: any = useSWR('allAccounts', allFetcher);
+  const { data: activeAccount }: any = useSWR('activeAccount', fetcher);
 
   return (
     <div className="flex h-full flex-col items-center justify-between pb-4 pt-3">
+      <div className="flex flex-col items-center">
         <div className="flex flex-col gap-3">
           <>
-          {error && <div>failed to load</div>}
-          {!data ? (
-            <div className="group relative flex h-11 w-11 shrink animate-pulse cursor-pointer items-center justify-center rounded-lg bg-zinc-900"></div>
+            {!activeAccount ? (
+              <div className="group relative flex h-10 w-10 shrink animate-pulse cursor-pointer items-center justify-center rounded-lg bg-zinc-900"></div>
             ) : (
-            data.map((account: { is_active: number; pubkey: string }) => {
-              if (account.is_active === 1) {
-                return <ActiveAccount key={account.pubkey} user={account} />;
-              } else {
-                return <InactiveAccount key={account.pubkey} user={account} />;
-              }
-            })
+              <ActiveAccount user={activeAccount} />
             )}
           </>
-        <a
-          href="/onboarding"
-          className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-zinc-600 hover:border-zinc-400"
+          <div>
+            <button
+              type="button"
+              className="group relative flex h-10 w-10 shrink cursor-pointer items-center justify-center rounded-lg bg-zinc-900 hover:bg-zinc-800"
+            >
+              <BellIcon width={16} height={16} className="text-zinc-400 group-hover:text-zinc-200" />
+            </button>
+          </div>
+        </div>
+        <div className="my-2 h-px w-2/3 bg-zinc-800"></div>
+        <div className="flex flex-col gap-3">
+          <>
+            {!accounts ? (
+              <div className="group relative flex h-10 w-10 shrink animate-pulse cursor-pointer items-center justify-center rounded-lg bg-zinc-900"></div>
+            ) : (
+              accounts.map((account: { is_active: number; pubkey: string }) => (
+                <InactiveAccount key={account.pubkey} user={account} />
+              ))
+            )}
+          </>
+          <button
+            type="button"
+            className="group relative flex h-10 w-10 shrink cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-transparent hover:border-zinc-600"
           >
             <PlusIcon width={16} height={16} className="text-zinc-400 group-hover:text-zinc-200" />
-        </a>
+          </button>
+        </div>
       </div>
       <div className="flex flex-col gap-0.5 text-center">
         <span className="text-sm font-black uppercase leading-tight text-zinc-600">Lume</span>

src/utils/storage.tsx

@@ -23,7 +23,7 @@ export async function getActiveAccount() {
 // get all accounts
 export async function getAccounts() {
   const db = await connect();
-  return await db.select(`SELECT * FROM accounts ORDER BY created_at DESC;`);
+  return await db.select(`SELECT * FROM accounts WHERE is_active = 0 ORDER BY created_at DESC;`);
 }
 
 // create account