wip: redesign nwc

src/shared/navigation.tsx

@@ -7,23 +7,24 @@ import { ChatsList } from '@app/chats/components/list';
 import { useStorage } from '@libs/storage/provider';
 
 import { ActiveAccount } from '@shared/accounts/active';
-import { AlbyConnectButton } from '@shared/alby';
 import { ComposerModal } from '@shared/composer';
 import { Frame } from '@shared/frame';
-import { BellIcon, NavArrowDownIcon, SpaceIcon } from '@shared/icons';
+import { BellIcon, NavArrowDownIcon, NwcIcon, SpaceIcon } from '@shared/icons';
 
 import { useActivities } from '@stores/activities';
 import { useSidebar } from '@stores/sidebar';
-import { useStronghold } from '@stores/stronghold';
 
 import { compactNumber } from '@utils/number';
 
 export function Navigation() {
   const { db } = useStorage();
-  const walletConnectURL = useStronghold((state) => state.walletConnectURL);
 
   const [totalNewActivities] = useActivities((state) => [state.totalNewActivities]);
   const [chats, toggleChats] = useSidebar((state) => [state.chats, state.toggleChats]);
+  const [integrations, toggleIntegrations] = useSidebar((state) => [
+    state.integrations,
+    state.toggleIntegrations,
+  ]);
 
   return (
     <Frame className="relative flex h-full w-[232px] flex-col" lighter>
@@ -77,6 +78,44 @@ export function Navigation() {
             ) : null}
           </NavLink>
         </div>
+        <Collapsible.Root open={integrations} onOpenChange={toggleIntegrations}>
+          <div className="flex flex-col gap-1 pr-2">
+            <Collapsible.Trigger asChild>
+              <button className="flex items-center gap-1 pl-[20px] pr-4">
+                <div
+                  className={twMerge(
+                    'inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out',
+                    integrations ? '' : 'rotate-180'
+                  )}
+                >
+                  <NavArrowDownIcon className="h-3 w-3 text-white/50" />
+                </div>
+                <h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
+                  Integrations
+                </h3>
+              </button>
+            </Collapsible.Trigger>
+            <Collapsible.Content>
+              <NavLink
+                to="/nwc"
+                preventScrollReset={true}
+                className={({ isActive }) =>
+                  twMerge(
+                    'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
+                    isActive
+                      ? 'border-fuchsia-500 bg-white/5 text-white'
+                      : 'border-transparent text-white/80'
+                  )
+                }
+              >
+                <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
+                  <NwcIcon className="h-4 w-4 text-white" />
+                </span>
+                Wallet Connect
+              </NavLink>
+            </Collapsible.Content>
+          </div>
+        </Collapsible.Root>
         <Collapsible.Root open={chats} onOpenChange={toggleChats}>
           <div className="flex flex-col gap-1 pr-2">
             <Collapsible.Trigger asChild>
@@ -101,11 +140,6 @@ export function Navigation() {
         </Collapsible.Root>
       </div>
       <div className="relative shrink-0">
-        {!walletConnectURL ? (
-          <div className="border-l-2 border-transparent pb-2 pl-4 pr-2">
-            <AlbyConnectButton />
-          </div>
-        ) : null}
         <ActiveAccount />
       </div>
     </Frame>