wip: new sidebar

2023-10-08 18:01:19 +07:00
parent 0946e9125e
commit ced23341d2
9 changed files with 209 additions and 163 deletions
--- a/src/shared/layouts/app.tsx
+++ b/src/shared/layouts/app.tsx
@@ -7,17 +7,19 @@ export function AppLayout() {
  return (
    <div className="flex h-screen w-screen flex-col">
      <WindowTitlebar />
-      <div className="flex h-full min-h-0 w-full bg-zinc-50 text-zinc-50 dark:bg-zinc-950 dark:text-zinc-950">
-        <div className="h-full shrink-0">
+      <div className="flex h-full min-h-0 w-full">
+        <div data-tauri-drag-region className="h-full w-[64px] shrink-0 pt-2">
          <Navigation />
        </div>
-        <div className="h-full flex-1">
-          <Outlet />
-          <ScrollRestoration
-            getKey={(location) => {
-              return location.pathname;
-            }}
-          />
+        <div className="flex h-full min-h-0 flex-1 rounded-tl-lg bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-[inset_0_0_0.5px_1px_hsla(0,0%,100%,0.075),0_0_0_1px_hsla(0,0%,0%,0.05),0_0.3px_0.4px_hsla(0,0%,0%,0.02),0_0.9px_1.5px_hsla(0,0%,0%,0.045),0_3.5px_6px_hsla(0,0%,0%,0.09)]">
+          <div className="h-full flex-1">
+            <Outlet />
+            <ScrollRestoration
+              getKey={(location) => {
+                return location.pathname;
+              }}
+            />
+          </div>
        </div>
      </div>
    </div>
--- a/src/shared/navigation.tsx
+++ b/src/shared/navigation.tsx
@@ -16,127 +16,149 @@ import {
 } from '@shared/icons';

 export function Navigation() {
-  const { db } = useStorage();
-  const navigate = useNavigate();
-
  return (
-    <div className="relative flex h-full w-[232px] flex-col border-r border-zinc-200 dark:border-zinc-800">
-      <div
-        data-tauri-drag-region
-        className="inline-flex h-16 w-full items-center justify-between px-3"
-      >
-        <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 text-zinc-400 hover:text-zinc-500 dark:text-zinc-500 dark:hover:text-zinc-100"
-          >
-            <ArrowLeftIcon className="h-5 w-5" />
-          </button>
-          <button
-            type="button"
-            onClick={() => navigate(1)}
-            className="inline-flex h-9 items-center justify-center text-zinc-400 hover:text-zinc-500 dark:text-zinc-500 dark:hover:text-zinc-100"
-          >
-            <ArrowRightIcon className="h-5 w-5" />
-          </button>
-        </div>
-        <ComposerModal />
-      </div>
-      <div
-        data-tauri-drag-region
-        className="scrollbar-hide flex h-full flex-1 flex-col gap-6 overflow-y-auto pr-3"
-      >
-        <div className="flex flex-col">
-          <NavLink
-            to="/"
-            preventScrollReset={true}
-            className={({ isActive }) =>
-              twMerge(
-                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
-                isActive
-                  ? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
-                  : 'border-transparent text-zinc-500 dark:text-zinc-500'
-              )
-            }
-          >
-            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
-              <HomeIcon className="h-5 w-5" />
-            </span>
-            Home
-          </NavLink>
-          <NavLink
-            to="/chats"
-            preventScrollReset={true}
-            className={({ isActive }) =>
-              twMerge(
-                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
-                isActive
-                  ? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
-                  : 'border-transparent text-zinc-500 dark:text-zinc-500'
-              )
-            }
-          >
-            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
-              <ChatsIcon className="h-5 w-5" />
-            </span>
-            Chats
-          </NavLink>
-          <NavLink
-            to="/communities"
-            preventScrollReset={true}
-            className={({ isActive }) =>
-              twMerge(
-                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
-                isActive
-                  ? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
-                  : 'border-transparent text-zinc-500 dark:text-zinc-500'
-              )
-            }
-          >
-            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
-              <CommunityIcon className="h-5 w-5" />
-            </span>
-            Communities
-          </NavLink>
-          <NavLink
-            to="/relays"
-            preventScrollReset={true}
-            className={({ isActive }) =>
-              twMerge(
-                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
-                isActive
-                  ? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
-                  : 'border-transparent text-zinc-500 dark:text-zinc-500'
-              )
-            }
-          >
-            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
-              <RelayIcon className="h-5 w-5" />
-            </span>
-            Relays
-          </NavLink>
-          <NavLink
-            to="/explore"
-            preventScrollReset={true}
-            className={({ isActive }) =>
-              twMerge(
-                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
-                isActive
-                  ? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
-                  : 'border-transparent text-zinc-500 dark:text-zinc-500'
-              )
-            }
-          >
-            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
-              <ExploreIcon className="h-5 w-5" />
-            </span>
-            Explore
-          </NavLink>
-        </div>
-      </div>
-      <div className="relative shrink-0">
-        <ActiveAccount />
+    <div className="flex h-full w-full flex-col justify-between p-3">
+      <div className="flex flex-col gap-5">
+        <NavLink
+          to="/"
+          preventScrollReset={true}
+          className="inline-flex flex-col items-center justify-center text-sm font-medium"
+        >
+          {({ isActive }) => (
+            <>
+              <div
+                className={twMerge(
+                  'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
+                  isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
+                )}
+              >
+                <HomeIcon className="h-6 w-6" />
+              </div>{' '}
+              <div
+                className={twMerge(
+                  '',
+                  isActive
+                    ? 'text-black dark:text-white'
+                    : 'text-black/50 dark:text-white/50'
+                )}
+              >
+                Home
+              </div>
+            </>
+          )}
+        </NavLink>
+        <NavLink
+          to="/chats"
+          preventScrollReset={true}
+          className="inline-flex flex-col items-center justify-center text-sm font-medium"
+        >
+          {({ isActive }) => (
+            <>
+              <div
+                className={twMerge(
+                  'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
+                  isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
+                )}
+              >
+                <ChatsIcon className="h-6 w-6" />
+              </div>{' '}
+              <div
+                className={twMerge(
+                  '',
+                  isActive
+                    ? 'text-black dark:text-white'
+                    : 'text-black/50 dark:text-white/50'
+                )}
+              >
+                Chats
+              </div>
+            </>
+          )}
+        </NavLink>
+        <NavLink
+          to="/communities"
+          preventScrollReset={true}
+          className="inline-flex flex-col items-center justify-center text-sm font-medium"
+        >
+          {({ isActive }) => (
+            <>
+              <div
+                className={twMerge(
+                  'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
+                  isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
+                )}
+              >
+                <CommunityIcon className="h-6 w-6" />
+              </div>{' '}
+              <div
+                className={twMerge(
+                  '',
+                  isActive
+                    ? 'text-black dark:text-white'
+                    : 'text-black/50 dark:text-white/50'
+                )}
+              >
+                Groups
+              </div>
+            </>
+          )}
+        </NavLink>
+        <NavLink
+          to="/relays"
+          preventScrollReset={true}
+          className="inline-flex flex-col items-center justify-center text-sm font-medium"
+        >
+          {({ isActive }) => (
+            <>
+              <div
+                className={twMerge(
+                  'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
+                  isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
+                )}
+              >
+                <RelayIcon className="h-6 w-6" />
+              </div>{' '}
+              <div
+                className={twMerge(
+                  '',
+                  isActive
+                    ? 'text-black dark:text-white'
+                    : 'text-black/50 dark:text-white/50'
+                )}
+              >
+                Relays
+              </div>
+            </>
+          )}
+        </NavLink>
+        <NavLink
+          to="/explore"
+          preventScrollReset={true}
+          className="inline-flex flex-col items-center justify-center text-sm font-medium"
+        >
+          {({ isActive }) => (
+            <>
+              <div
+                className={twMerge(
+                  'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
+                  isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
+                )}
+              >
+                <ExploreIcon className="h-6 w-6" />
+              </div>{' '}
+              <div
+                className={twMerge(
+                  '',
+                  isActive
+                    ? 'text-black dark:text-white'
+                    : 'text-black/50 dark:text-white/50'
+                )}
+              >
+                Explore
+              </div>
+            </>
+          )}
+        </NavLink>
      </div>
    </div>
  );
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@@ -76,18 +76,22 @@ export const User = memo(function User({
            className="h-6 w-6 rounded"
          />
          <Avatar.Fallback delayMs={300}>
-            <img src={svgURI} alt={pubkey} className="h-6 w-6 rounded bg-black" />
+            <img
+              src={svgURI}
+              alt={pubkey}
+              className="h-6 w-6 rounded bg-black dark:bg-white"
+            />
          </Avatar.Fallback>
        </Avatar.Root>
        <div className="flex flex-1 items-baseline gap-2">
-          <h5 className="max-w-[10rem] truncate font-semibold  text-white">
+          <h5 className="max-w-[10rem] truncate font-semibold  text-zinc-900 dark:text-zinc-100">
            {user?.name ||
              user?.display_name ||
              user?.displayName ||
              displayNpub(pubkey, 16)}
          </h5>
-          <span className="text-white/50">·</span>
-          <span className="text-white/50">{createdAt}</span>
+          <span className="text-zinc-500 dark:text-zinc-300">·</span>
+          <span className="text-zinc-500 dark:text-zinc-300">{createdAt}</span>
        </div>
      </div>
    );
@@ -106,12 +110,16 @@ export const User = memo(function User({
            className="h-14 w-14 rounded-lg"
          />
          <Avatar.Fallback delayMs={300}>
-            <img src={svgURI} alt={pubkey} className="h-14 w-14 rounded-lg bg-black" />
+            <img
+              src={svgURI}
+              alt={pubkey}
+              className="h-14 w-14 rounded-lg bg-black dark:bg-white"
+            />
          </Avatar.Fallback>
        </Avatar.Root>
        <div className="flex h-full flex-col items-start justify-between">
          <div className="flex flex-col items-start gap-1 text-start">
-            <p className="max-w-[15rem] truncate text-lg font-semibold text-white">
+            <p className="max-w-[15rem] truncate text-lg font-semibold text-zinc-900 dark:text-zinc-100">
              {user?.name || user?.display_name || user?.displayName}
            </p>
            <ReactMarkdown
@@ -129,7 +137,7 @@ export const User = memo(function User({
              <Link
                to={user?.website}
                target="_blank"
-                className="inline-flex items-center gap-2 text-sm text-white/70"
+                className="inline-flex items-center gap-2 text-sm text-zinc-900 dark:text-zinc-100/70"
              >
                <WorldIcon className="h-4 w-4" />
                <p className="max-w-[10rem] truncate">{user?.website}</p>
@@ -154,14 +162,18 @@ export const User = memo(function User({
            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" />
+            <img
+              src={svgURI}
+              alt={pubkey}
+              className="h-10 w-10 rounded-lg bg-black dark:bg-white"
+            />
          </Avatar.Fallback>
        </Avatar.Root>
        <div className="flex w-full flex-col items-start">
-          <h3 className="max-w-[15rem] truncate font-medium text-white">
+          <h3 className="max-w-[15rem] truncate font-medium text-zinc-900 dark:text-zinc-100">
            {user?.name || user?.display_name || user?.displayName}
          </h3>
-          <p className="max-w-[10rem] truncate text-sm text-white/70">
+          <p className="max-w-[10rem] truncate text-sm text-zinc-900 dark:text-zinc-100/70">
            {user?.nip05 || user?.username || displayNpub(pubkey, 16)}
          </p>
        </div>
@@ -181,7 +193,11 @@ export const User = memo(function User({
          className="h-12 w-12 rounded-lg"
        />
        <Avatar.Fallback delayMs={300}>
-          <img src={svgURI} alt={pubkey} className="h-12 w-12 rounded-lg bg-black" />
+          <img
+            src={svgURI}
+            alt={pubkey}
+            className="h-12 w-12 rounded-lg bg-black dark:bg-white"
+          />
        </Avatar.Fallback>
      </Avatar.Root>
    );
@@ -202,7 +218,7 @@ export const User = memo(function User({
          <img
            src={svgURI}
            alt={pubkey}
-            className="inline-block h-8 w-8 rounded-full bg-black ring-1 ring-black"
+            className="inline-block h-8 w-8 rounded-full bg-black ring-1 ring-black dark:bg-white"
          />
        </Avatar.Fallback>
      </Avatar.Root>
@@ -226,11 +242,15 @@ export const User = memo(function User({
              className="h-6 w-6 rounded"
            />
            <Avatar.Fallback delayMs={300}>
-              <img src={svgURI} alt={pubkey} className="h-6 w-6 rounded bg-black" />
+              <img
+                src={svgURI}
+                alt={pubkey}
+                className="h-6 w-6 rounded bg-black dark:bg-white"
+              />
            </Avatar.Fallback>
          </Avatar.Root>
          <div className="inline-flex items-baseline gap-1">
-            <h5 className="max-w-[10rem] truncate font-medium text-white/80">
+            <h5 className="max-w-[10rem] truncate font-medium text-zinc-900 dark:text-zinc-100/80">
              {user?.name ||
                user?.display_name ||
                user?.displayName ||
@@ -256,17 +276,23 @@ export const User = memo(function User({
            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" />
+            <img
+              src={svgURI}
+              alt={pubkey}
+              className="h-10 w-10 rounded-lg bg-black dark:bg-white"
+            />
          </Avatar.Fallback>
        </Avatar.Root>
        <div className="flex flex-1 flex-col gap-2">
-          <h5 className="max-w-[15rem] truncate font-semibold text-white">
+          <h5 className="max-w-[15rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
            {user?.name || user?.display_name || user?.displayName || 'Anon'}
          </h5>
          <div className="inline-flex items-center gap-2">
-            <span className="text-white/50">{createdAt}</span>
-            <span className="text-white/50">·</span>
-            <span className="text-white/50">{displayNpub(pubkey, 16)}</span>
+            <span className="text-zinc-500 dark:text-zinc-300">{createdAt}</span>
+            <span className="text-zinc-500 dark:text-zinc-300">·</span>
+            <span className="text-zinc-500 dark:text-zinc-300">
+              {displayNpub(pubkey, 16)}
+            </span>
          </div>
        </div>
      </div>
@@ -290,20 +316,20 @@ export const User = memo(function User({
              <img
                src={svgURI}
                alt={pubkey}
-                className="h-10 w-10 rounded-lg border border-white/5 bg-black"
+                className="h-10 w-10 rounded-lg border border-white/5 bg-black dark:bg-white"
              />
            </Avatar.Fallback>
          </Avatar.Root>
        </HoverCard.Trigger>
        <div className="flex flex-1 items-center gap-2">
-          <h5 className="max-w-[15rem] truncate font-semibold text-white">
+          <h5 className="max-w-[15rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
            {user?.name ||
              user?.display_name ||
              user?.displayName ||
              displayNpub(pubkey, 16)}
          </h5>
-          <span className="text-white/50">·</span>
-          <span className="text-white/50">{createdAt}</span>
+          <span className="text-zinc-500 dark:text-zinc-300">·</span>
+          <span className="text-zinc-500 dark:text-zinc-300">{createdAt}</span>
        </div>
      </div>
      <HoverCard.Portal>
@@ -325,7 +351,7 @@ export const User = memo(function User({
                <img
                  src={svgURI}
                  alt={pubkey}
-                  className="h-10 w-10 rounded-lg border border-white/5 bg-black"
+                  className="h-10 w-10 rounded-lg border border-white/5 bg-black dark:bg-white"
                />
              </Avatar.Fallback>
            </Avatar.Root>
@@ -341,16 +367,16 @@ export const User = memo(function User({
                  <NIP05
                    pubkey={pubkey}
                    nip05={user?.nip05}
-                    className="max-w-[15rem] truncate text-sm text-white/50"
+                    className="max-w-[15rem] truncate text-sm text-zinc-500 dark:text-zinc-300"
                  />
                ) : (
-                  <span className="max-w-[15rem] truncate text-sm text-white/50">
+                  <span className="max-w-[15rem] truncate text-sm text-zinc-500 dark:text-zinc-300">
                    {displayNpub(pubkey, 16)}
                  </span>
                )}
              </div>
              <div>
-                <p className="line-clamp-3 break-all text-sm leading-tight text-white">
+                <p className="line-clamp-3 break-all text-sm leading-tight text-zinc-900 dark:text-zinc-100">
                  {user?.about}
                </p>
              </div>
--- a/src/shared/widgets/eventLoader.tsx
+++ b/src/shared/widgets/eventLoader.tsx
@@ -57,7 +57,7 @@ export function EventLoader({ firstTime }: { firstTime: boolean }) {
            </div>
          ) : (
            <div className="text-center">
-              <h3 className="font-semibold leading-tight text-zinc-500">
+              <h3 className="font-semibold leading-tight text-zinc-500 dark:text-zinc-300">
                Downloading all events while you&apos;re away...
              </h3>
            </div>