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" />