redesign sidebar

2023-08-01 14:26:16 +07:00
parent 9941305998
commit e97d0281e2
22 changed files with 310 additions and 200 deletions
--- a/src/app/chats/components/item.tsx
+++ b/src/app/chats/components/item.tsx
@@ -6,14 +6,14 @@ import { Image } from '@shared/image';
 import { DEFAULT_AVATAR } from '@stores/constants';

 import { useProfile } from '@utils/hooks/useProfile';
-import { shortenKey } from '@utils/shortenKey';
+import { displayNpub } from '@utils/shortenKey';

 export function ChatsListItem({ data }: { data: any }) {
  const { status, user } = useProfile(data.sender_pubkey);

  if (status === 'loading') {
    return (
-      <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
+      <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
        <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
        <div className="h-2.5 w-2/3 animate-pulse rounded bg-zinc-800" />
      </div>
@@ -26,28 +26,24 @@ export function ChatsListItem({ data }: { data: any }) {
      preventScrollReset={true}
      className={({ isActive }) =>
        twMerge(
-          'inline-flex h-9 items-center gap-2.5 rounded-md px-2.5',
-          isActive ? 'bg-zinc-900/50 text-zinc-100' : ''
+          'inline-flex h-9 items-center gap-2.5 rounded-md px-2',
+          isActive ? 'bg-white/10 text-white' : 'text-white/80'
        )
      }
    >
-      <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
-        <Image
-          src={user?.picture || user?.image}
-          fallback={DEFAULT_AVATAR}
-          alt={data.sender_pubkey}
-          className="h-6 w-6 rounded object-cover"
-        />
-      </div>
-      <div className="inline-flex w-full items-center justify-between">
-        <div className="inline-flex items-baseline gap-1">
-          <h5 className="max-w-[10rem] truncate font-medium text-zinc-200">
-            {user?.nip05 ||
-              user?.name ||
-              user?.displayName ||
-              shortenKey(data.sender_pubkey)}
-          </h5>
-        </div>
+      <Image
+        src={user?.picture || user?.image}
+        fallback={DEFAULT_AVATAR}
+        alt={data.sender_pubkey}
+        className="h-6 w-6 shrink-0 rounded object-cover"
+      />
+      <div className="inline-flex w-full flex-1 items-center justify-between">
+        <h5 className="max-w-[10rem] truncate">
+          {user?.nip05 ||
+            user?.name ||
+            user?.displayName ||
+            displayNpub(data.sender_pubkey, 16)}
+        </h5>
        <div className="flex items-center">
          {data.new_messages > 0 && (
            <span className="inline-flex w-8 items-center justify-center rounded bg-fuchsia-400/10 px-1 py-1 text-xs font-medium text-fuchsia-500 ring-1 ring-inset ring-fuchsia-400/20">
--- a/src/app/chats/components/list.tsx
+++ b/src/app/chats/components/list.tsx
@@ -50,20 +50,20 @@ export function ChatsList() {
      {account ? (
        <ChatsListSelfItem data={account} />
      ) : (
-        <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
+        <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
          <div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
        </div>
      )}
      {chats.follows.map((item) => renderItem(item))}
-      {chats.unknowns.length > 0 && <UnknownsModal data={chats.unknowns} />}
-      <NewMessageModal />
      {isFetching && (
-        <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
+        <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
          <div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
        </div>
      )}
+      {chats.unknowns.length > 0 && <UnknownsModal data={chats.unknowns} />}
+      <NewMessageModal />
    </div>
  );
 }
--- a/src/app/chats/components/modal.tsx
+++ b/src/app/chats/components/modal.tsx
@@ -33,13 +33,13 @@ export function NewMessageModal() {
      <button
        type="button"
        onClick={() => openModal()}
-        className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5"
+        className="inline-flex h-9 items-center gap-2.5 rounded-md px-2"
      >
-        <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
-          <PlusIcon className="h-3 w-3 text-zinc-200" />
+        <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+          <PlusIcon className="h-3 w-3 text-white" />
        </div>
        <div>
-          <h5 className="font-medium text-zinc-400">New chat</h5>
+          <h5 className="text-white/50">New chat</h5>
        </div>
      </button>
      <Transition appear show={isOpen} as={Fragment}>
--- a/src/app/chats/components/self.tsx
+++ b/src/app/chats/components/self.tsx
@@ -6,14 +6,14 @@ import { Image } from '@shared/image';
 import { DEFAULT_AVATAR } from '@stores/constants';

 import { useProfile } from '@utils/hooks/useProfile';
-import { shortenKey } from '@utils/shortenKey';
+import { displayNpub } from '@utils/shortenKey';

 export function ChatsListSelfItem({ data }: { data: { pubkey: string } }) {
  const { status, user } = useProfile(data.pubkey);

  if (status === 'loading') {
    return (
-      <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
+      <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
        <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
        <div>
          <div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-base font-medium" />
@@ -28,24 +28,22 @@ export function ChatsListSelfItem({ data }: { data: { pubkey: string } }) {
      preventScrollReset={true}
      className={({ isActive }) =>
        twMerge(
-          'inline-flex h-9 items-center gap-2.5 rounded-md px-2.5',
-          isActive ? 'bg-zinc-900/50 text-zinc-100' : ''
+          'inline-flex h-9 items-center gap-2.5 rounded-md px-2',
+          isActive ? 'bg-white/10 text-white' : 'text-white/80'
        )
      }
    >
-      <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
-        <Image
-          src={user?.picture || user?.image}
-          fallback={DEFAULT_AVATAR}
-          alt={data.pubkey}
-          className="h-6 w-6 rounded bg-white object-cover"
-        />
-      </div>
+      <Image
+        src={user?.picture || user?.image}
+        fallback={DEFAULT_AVATAR}
+        alt={data.pubkey}
+        className="h-6 w-6 shrink-0 rounded bg-white object-cover"
+      />
      <div className="inline-flex items-baseline gap-1">
-        <h5 className="max-w-[9rem] truncate font-medium text-zinc-200">
-          {user?.nip05 || user?.name || shortenKey(data.pubkey)}
+        <h5 className="max-w-[10rem] truncate">
+          {user?.nip05 || user?.name || displayNpub(data.pubkey, 16)}
        </h5>
-        <span className="text-zinc-500">(you)</span>
+        <span className="text-white/50">(you)</span>
      </div>
    </NavLink>
  );
--- a/src/app/chats/components/unknowns.tsx
+++ b/src/app/chats/components/unknowns.tsx
@@ -31,15 +31,13 @@ export function UnknownsModal({ data }: { data: Chats[] }) {
      <button
        type="button"
        onClick={() => openModal()}
-        className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5"
+        className="inline-flex h-9 items-center gap-2.5 rounded-md px-2"
      >
-        <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
-          <StrangersIcon className="h-3 w-3 text-zinc-200" />
+        <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+          <StrangersIcon className="h-3 w-3 text-white" />
        </div>
        <div>
-          <h5 className="font-medium text-zinc-400">
-            {compactNumber.format(data.length)} unknowns
-          </h5>
+          <h5 className="text-white/50">{compactNumber.format(data.length)} unknowns</h5>
        </div>
      </button>
      <Transition appear show={isOpen} as={Fragment}>
--- a/src/app/root.tsx
+++ b/src/app/root.tsx
@@ -175,12 +175,9 @@ export function Root() {
  }, [status]);

  return (
-    <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">
+    <div className="h-screen w-screen">
      <div className="flex h-screen w-full flex-col">
-        <div
-          data-tauri-drag-region
-          className="relative h-11 shrink-0 border border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
-        />
+        <div data-tauri-drag-region className="h-11 shrink-0" />
        <div className="relative flex min-h-0 w-full flex-1 items-center justify-center">
          <div className="flex flex-col items-center justify-center gap-4">
            <LoaderIcon className="h-6 w-6 animate-spin text-zinc-100" />
--- a/src/shared/accounts/active.tsx
+++ b/src/shared/accounts/active.tsx
@@ -16,7 +16,7 @@ import { sendNativeNotification } from '@utils/notification';

 const lastLogin = await getLastLogin();

-export function ActiveAccount({ data }: { data: any }) {
+export function ActiveAccount({ data }: { data: { pubkey: string; npub: string } }) {
  const queryClient = useQueryClient();

  const { ndk } = useNDK();
--- a/src/shared/appHeader.tsx
+++ b/src/shared/appHeader.tsx
@@ -1,49 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-
-import { ArrowLeftIcon, ArrowRightIcon } from '@shared/icons';
-
-export function AppHeader({ reverse }: { reverse?: boolean }) {
-  const navigate = useNavigate();
-
-  const goBack = () => {
-    navigate(-1);
-  };
-
-  const goForward = () => {
-    navigate(1);
-  };
-
-  return (
-    <div
-      data-tauri-drag-region
-      className={`flex h-11 w-full shrink-0 items-center border-b border-zinc-900 px-3 ${
-        reverse ? 'justify-start' : 'justify-end'
-      }`}
-    >
-      <div className="flex gap-2.5">
-        <button
-          type="button"
-          onClick={() => goBack()}
-          className="group inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-900"
-        >
-          <ArrowLeftIcon
-            width={16}
-            height={16}
-            className="text-zinc-500 group-hover:text-zinc-300"
-          />
-        </button>
-        <button
-          type="button"
-          onClick={() => goForward()}
-          className="group inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-900"
-        >
-          <ArrowRightIcon
-            width={16}
-            height={16}
-            className="text-zinc-500 group-hover:text-zinc-300"
-          />
-        </button>
-      </div>
-    </div>
-  );
-}
--- a/src/shared/appLayout.tsx
+++ b/src/shared/appLayout.tsx
@@ -5,10 +5,10 @@ import { Navigation } from '@shared/navigation';
 export function AppLayout() {
  return (
    <div className="flex h-screen w-screen">
-      <div className="relative flex shrink-0 flex-row">
+      <div className="shrink-0">
        <Navigation />
      </div>
-      <div className="h-full w-full">
+      <div className="h-full w-full flex-1 bg-black">
        <Outlet />
        <ScrollRestoration />
      </div>
--- a/src/shared/button.tsx
+++ b/src/shared/button.tsx
@@ -16,7 +16,7 @@ export function Button({
  switch (preset) {
    case 'small':
      preClass =
-        'w-min h-9 px-4 bg-fuchsia-500 rounded-md text-sm font-medium text-zinc-100 hover:bg-fuchsia-600';
+        'w-min h-9 px-4 bg-white/10 rounded-md text-sm font-medium text-white hover:bg-fuchsia-500';
      break;
    case 'publish':
      preClass =
--- a/src/shared/logout.tsx
+++ b/src/shared/logout.tsx
@@ -34,9 +34,9 @@ export function Logout() {
        type="button"
        onClick={() => openModal()}
        aria-label="Logout"
-        className="inline-flex h-9 w-9 transform items-center justify-center rounded-md border-t border-zinc-700/50 bg-zinc-800 active:translate-y-1"
+        className="inline-flex h-9 w-9 transform items-center justify-center rounded-md bg-white/20 active:translate-y-1"
      >
-        <LogoutIcon className="h-4 w-4 text-zinc-400" />
+        <LogoutIcon className="h-4 w-4 text-white" />
      </button>
      <Transition appear show={isOpen} as={Fragment}>
        <Dialog as="div" className="relative z-10" onClose={closeModal}>
--- a/src/shared/lumeBar.tsx
+++ b/src/shared/lumeBar.tsx
@@ -11,7 +11,7 @@ export function LumeBar() {
  const { status, account } = useAccount();

  return (
-    <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900/80 p-2 backdrop-blur-md">
+    <div className="rounded-xl bg-white/10 p-2 backdrop-blur-xl">
      <div className="flex items-center justify-between">
        {status === 'loading' ? (
          <>
@@ -26,9 +26,9 @@ export function LumeBar() {
        )}
        <Link
          to="/settings/general"
-          className="inline-flex h-9 w-9 transform items-center justify-center rounded-md border-t border-zinc-700/50 bg-zinc-800 active:translate-y-1"
+          className="inline-flex h-9 w-9 transform items-center justify-center rounded-md bg-white/20 active:translate-y-1"
        >
-          <SettingsIcon className="h-4 w-4 text-zinc-400" />
+          <SettingsIcon className="h-4 w-4 text-white" />
        </Link>
        <Logout />
      </div>
--- a/src/shared/navigation.tsx
+++ b/src/shared/navigation.tsx
@@ -1,62 +1,123 @@
-import { Disclosure } from '@headlessui/react';
-import { NavLink } from 'react-router-dom';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { useState } from 'react';
+import { NavLink, useNavigate } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';

 import { ChatsList } from '@app/chats/components/list';

-import { AppHeader } from '@shared/appHeader';
 import { ComposerModal } from '@shared/composer/modal';
-import { NavArrowDownIcon, SpaceIcon, TrendingIcon } from '@shared/icons';
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  NavArrowDownIcon,
+  SpaceIcon,
+  TrendingIcon,
+} from '@shared/icons';
 import { LumeBar } from '@shared/lumeBar';

 export function Navigation() {
+  const navigate = useNavigate();
+
+  const [feeds, setFeeds] = useState(true);
+  const [chats, setChats] = useState(true);
+
  return (
-    <div className="relative flex w-[232px] flex-col gap-3 border-r border-zinc-900">
-      <AppHeader />
+    <div className="relative h-full w-[232px] bg-black/80">
      <div className="scrollbar-hide flex flex-col gap-5 overflow-y-auto pb-20">
-        <div className="inlin-lflex h-8 px-3.5">
+        <div className="inline-flex h-8 items-center justify-between px-2 pb-4 pt-14">
          <ComposerModal />
-        </div>
-        {/* Newsfeed */}
-        <div className="flex flex-col gap-0.5 px-1.5">
-          <div className="px-2.5">
-            <h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">
-              Feeds
-            </h3>
-          </div>
-          <div className="flex flex-col">
-            <NavLink
-              to="/app/space"
-              preventScrollReset={true}
-              className={({ isActive }) =>
-                twMerge(
-                  'flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200',
-                  isActive ? 'bg-zinc-900/50' : ''
-                )
-              }
+          <div className="flex gap-2.5">
+            <button
+              type="button"
+              onClick={() => navigate(-1)}
+              className="group inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
            >
-              <span className="inline-flex h-6 w-6 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
-                <SpaceIcon width={12} height={12} className="text-zinc-100" />
-              </span>
-              <span className="font-medium">Spaces</span>
-            </NavLink>
-            <NavLink
-              to="/app/trending"
-              preventScrollReset={true}
-              className={({ isActive }) =>
-                twMerge(
-                  'flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200',
-                  isActive ? 'bg-zinc-900/50' : ''
-                )
-              }
+              <ArrowLeftIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
+            </button>
+            <button
+              type="button"
+              onClick={() => navigate(1)}
+              className="group inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
            >
-              <span className="inline-flex h-6 w-6 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
-                <TrendingIcon width={12} height={12} className="text-zinc-100" />
-              </span>
-              <span className="font-medium">Trending</span>
-            </NavLink>
+              <ArrowRightIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
+            </button>
          </div>
        </div>
+        <Collapsible.Root open={feeds} onOpenChange={setFeeds}>
+          <div className="flex flex-col gap-1 px-2">
+            <Collapsible.Trigger asChild>
+              <button className="flex items-center gap-1">
+                <div
+                  className={twMerge(
+                    'inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out',
+                    open ? '' : 'rotate-180'
+                  )}
+                >
+                  <NavArrowDownIcon width={12} height={12} className="text-white/50" />
+                </div>
+                <h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
+                  Feeds
+                </h3>
+              </button>
+            </Collapsible.Trigger>
+            <Collapsible.Content>
+              <div className="flex flex-col">
+                <NavLink
+                  to="/app/space"
+                  preventScrollReset={true}
+                  className={({ isActive }) =>
+                    twMerge(
+                      'flex h-9 items-center gap-2.5 rounded-md px-2',
+                      isActive ? 'bg-white/10 text-white' : 'text-white/80'
+                    )
+                  }
+                >
+                  <span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
+                    <SpaceIcon className="h-3 w-3 text-white" />
+                  </span>
+                  <span className="font-medium">Spaces</span>
+                </NavLink>
+                <NavLink
+                  to="/app/trending"
+                  preventScrollReset={true}
+                  className={({ isActive }) =>
+                    twMerge(
+                      'flex h-9 items-center gap-2.5 rounded-md px-2 ',
+                      isActive ? 'bg-white/10 text-white' : 'text-white/80'
+                    )
+                  }
+                >
+                  <span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
+                    <TrendingIcon className="h-3 w-3 text-white" />
+                  </span>
+                  <span className="font-medium">Trending</span>
+                </NavLink>
+              </div>
+            </Collapsible.Content>
+          </div>
+        </Collapsible.Root>
+        <Collapsible.Root open={chats} onOpenChange={setChats}>
+          <div className="flex flex-col gap-1 px-2">
+            <Collapsible.Trigger asChild>
+              <button className="flex items-center gap-1">
+                <div
+                  className={twMerge(
+                    'inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out',
+                    open ? '' : 'rotate-180'
+                  )}
+                >
+                  <NavArrowDownIcon width={12} height={12} className="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>
        {/* Channels
 				<Disclosure defaultOpen={true}>
 					{({ open }) => (
@@ -84,28 +145,6 @@ export function Navigation() {
 					)}
 				</Disclosure>
 				 */}
-        {/* Chats */}
-        <Disclosure defaultOpen={true}>
-          {({ open }) => (
-            <div className="flex flex-col gap-0.5 px-1.5 pb-6">
-              <Disclosure.Button className="flex items-center gap-1 px-3">
-                <div
-                  className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
-                    open ? '' : 'rotate-180'
-                  }`}
-                >
-                  <NavArrowDownIcon width={12} height={12} className="text-zinc-700" />
-                </div>
-                <h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">
-                  Chats
-                </h3>
-              </Disclosure.Button>
-              <Disclosure.Panel>
-                <ChatsList />
-              </Disclosure.Panel>
-            </div>
-          )}
-        </Disclosure>
      </div>
      <div className="absolute bottom-3 left-0 w-full px-10">
        <LumeBar />
--- a/src/shared/notification/modal.tsx
+++ b/src/shared/notification/modal.tsx
@@ -51,9 +51,9 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
      <Dialog.Trigger asChild>
        <button
          type="button"
-          className="inline-flex h-9 w-9 transform items-center justify-center rounded-md border-t border-zinc-700/50 bg-zinc-800 active:translate-y-1"
+          className="inline-flex h-9 w-9 transform items-center justify-center rounded-md bg-white/20 active:translate-y-1"
        >
-          <BellIcon className="h-4 w-4 text-zinc-400" />
+          <BellIcon className="h-4 w-4 text-white" />
        </button>
      </Dialog.Trigger>
      <Dialog.Portal className="relative z-10">
--- a/src/shared/settingsLayout.tsx
+++ b/src/shared/settingsLayout.tsx
@@ -1,7 +1,6 @@
 import { NavLink, Outlet, ScrollRestoration } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';

-import { AppHeader } from '@shared/appHeader';
 import { LumeBar } from '@shared/lumeBar';

 export function SettingsLayout() {
@@ -9,7 +8,6 @@ export function SettingsLayout() {
    <div className="flex h-screen w-screen">
      <div className="relative flex shrink-0 flex-row">
        <div className="relative flex w-[232px] flex-col gap-3 border-r border-zinc-900">
-          <AppHeader />
          <div className="scrollbar-hide flex flex-col gap-5 overflow-y-auto pb-20">
            <div className="flex flex-col gap-0.5 px-1.5">
              <div className="px-2.5">