wip

src/shared/navigation.tsx

@@ -1,9 +1,6 @@
-import * as Collapsible from '@radix-ui/react-collapsible';
 import { NavLink, useNavigate } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 
-import { ChatsList } from '@app/chats/components/list';
-
 import { useStorage } from '@libs/storage/provider';
 
 import { ActiveAccount } from '@shared/accounts/active';
@@ -12,30 +9,14 @@ import { Frame } from '@shared/frame';
 import {
   ArrowLeftIcon,
   ArrowRightIcon,
-  BellIcon,
-  NavArrowDownIcon,
-  NwcIcon,
+  ExploreIcon,
+  HomeIcon,
   RelayIcon,
-  SpaceIcon,
-  WorldIcon,
 } from '@shared/icons';
 
-import { useActivities } from '@stores/activities';
-import { useSidebar } from '@stores/sidebar';
-
-import { compactNumber } from '@utils/number';
-
 export function Navigation() {
   const { db } = useStorage();
-
   const navigate = useNavigate();
-  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
@@ -46,26 +27,27 @@ export function Navigation() {
         data-tauri-drag-region
         className="inline-flex h-16 w-full items-center justify-between px-3"
       >
-        {db.platform !== 'darwin' ? (
-          <div className="inline-flex items-center gap-4 pl-2">
-            <button
-              type="button"
-              onClick={() => navigate(-1)}
-              className="inline-flex h-9 items-center justify-center"
-            >
-              <ArrowLeftIcon className="h-5 w-5 text-white/50" />
-            </button>
-            <button
-              type="button"
-              onClick={() => navigate(1)}
-              className="inline-flex h-9 items-center justify-center"
-            >
-              <ArrowRightIcon className="h-5 w-5 text-white/50" />
-            </button>
-          </div>
-        ) : (
-          <div />
-        )}
+        <div
+          className={twMerge(
+            'inline-flex items-center gap-4',
+            db.platform === 'darwin' ? 'pl-20' : 'pl-2'
+          )}
+        >
+          <button
+            type="button"
+            onClick={() => navigate(-1)}
+            className="inline-flex h-9 items-center justify-center text-white/50 hover:text-white"
+          >
+            <ArrowLeftIcon className="h-5 w-5" />
+          </button>
+          <button
+            type="button"
+            onClick={() => navigate(1)}
+            className="inline-flex h-9 items-center justify-center text-white/50 hover:text-white"
+          >
+            <ArrowRightIcon className="h-5 w-5" />
+          </button>
+        </div>
         <ComposerModal />
       </div>
       <div
@@ -78,15 +60,15 @@ export function Navigation() {
             preventScrollReset={true}
             className={({ isActive }) =>
               twMerge(
-                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3',
+                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3 font-medium',
                 isActive
                   ? 'border-fuchsia-500 bg-white/5 text-white'
                   : 'border-transparent text-white/70'
               )
             }
           >
-            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
-              <SpaceIcon className="h-4 w-4 text-white" />
+            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
+              <HomeIcon className="h-5 w-5" />
             </span>
             Home
           </NavLink>
@@ -95,15 +77,15 @@ export function Navigation() {
             preventScrollReset={true}
             className={({ isActive }) =>
               twMerge(
-                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3',
+                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3 font-medium',
                 isActive
                   ? 'border-fuchsia-500 bg-white/5 text-white'
                   : 'border-transparent text-white/70'
               )
             }
           >
-            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
-              <RelayIcon className="h-4 w-4 text-white" />
+            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
+              <RelayIcon className="h-5 w-5" />
             </span>
             Relays
           </NavLink>
@@ -112,107 +94,19 @@ export function Navigation() {
             preventScrollReset={true}
             className={({ isActive }) =>
               twMerge(
-                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3',
+                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3 font-medium',
                 isActive
                   ? 'border-fuchsia-500 bg-white/5 text-white'
                   : 'border-transparent text-white/70'
               )
             }
           >
-            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
-              <WorldIcon className="h-4 w-4 text-white" />
+            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
+              <ExploreIcon className="h-5 w-5" />
             </span>
             Explore
           </NavLink>
-          <NavLink
-            to="/notifications"
-            preventScrollReset={true}
-            className={({ isActive }) =>
-              twMerge(
-                'flex h-10 items-center justify-between rounded-r-lg border-l-2 pl-4 pr-3',
-                isActive
-                  ? 'border-fuchsia-500 bg-white/5 text-white'
-                  : 'border-transparent text-white/70'
-              )
-            }
-          >
-            <div className="flex items-center gap-2.5">
-              {totalNewActivities > 0 ? (
-                <div className="relative inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-fuchsia-500/20 backdrop-blur-xl">
-                  <p className="text-sm font-bold text-fuchsia-500">
-                    {compactNumber.format(totalNewActivities)}
-                  </p>
-                  <span className="absolute right-0 top-0 block h-1 w-1 -translate-y-1/2 translate-x-1/2 transform rounded-full bg-fuchsia-500 ring-2 ring-black/80" />
-                </div>
-              ) : (
-                <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
-                  <BellIcon className="h-4 w-4 text-white" />
-                </span>
-              )}
-              Notifications
-            </div>
-          </NavLink>
         </div>
-        <Collapsible.Root open={integrations} onOpenChange={toggleIntegrations}>
-          <div className="flex flex-col gap-1 pr-3">
-            <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-3',
-                    isActive
-                      ? 'border-fuchsia-500 bg-white/5 text-white'
-                      : 'border-transparent text-white/70'
-                  )
-                }
-              >
-                <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-3">
-            <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',
-                    chats ? '' : 'rotate-180'
-                  )}
-                >
-                  <NavArrowDownIcon className="h-3 w-3 text-white/50" />
-                </div>
-                <h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
-                  Chats
-                </h3>
-              </button>
-            </Collapsible.Trigger>
-            <Collapsible.Content>
-              <ChatsList />
-            </Collapsible.Content>
-          </div>
-        </Collapsible.Root>
       </div>
       <div className="relative shrink-0">
         <ActiveAccount />