wip: new chat screen

src/app/chats/components/item.tsx

@@ -1,13 +1,30 @@
+import { NDKEvent } from '@nostr-dev-kit/ndk';
+import * as Avatar from '@radix-ui/react-avatar';
+import { minidenticon } from 'minidenticons';
+import { memo } from 'react';
 import { NavLink } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 
-import { Image } from '@shared/image';
+import { useDecryptMessage } from '@app/chats/hooks/useDecryptMessage';
 
+import { useStorage } from '@libs/storage/provider';
+
+import { useStronghold } from '@stores/stronghold';
+
+import { formatCreatedAt } from '@utils/createdAt';
 import { useProfile } from '@utils/hooks/useProfile';
 import { displayNpub } from '@utils/shortenKey';
 
-export function ChatsListItem({ pubkey }: { pubkey: string }) {
-  const { status, user } = useProfile(pubkey);
+export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEvent }) {
+  const { db } = useStorage();
+  const { status, user } = useProfile(event.pubkey);
+
+  const privkey = useStronghold((state) => state.privkey);
+  const decryptedContent = useDecryptMessage(event, db.account.pubkey, privkey);
+
+  const createdAt = formatCreatedAt(event.created_at, true);
+  const svgURI =
+    'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(event.pubkey, 90, 50));
 
   if (status === 'loading') {
     return (
@@ -20,30 +37,48 @@ export function ChatsListItem({ pubkey }: { pubkey: string }) {
 
   return (
     <NavLink
-      to={`/chats/${pubkey}`}
+      to={`/chats/chat/${event.pubkey}`}
       preventScrollReset={true}
       className={({ isActive }) =>
         twMerge(
-          'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3',
+          'flex items-center gap-2.5 px-3 py-2 hover:bg-white/10',
           isActive
             ? 'border-fuchsia-500 bg-white/5 text-white'
             : 'border-transparent text-white/70'
         )
       }
     >
-      <Image
-        src={user?.picture || user?.image}
-        alt={pubkey}
-        className="h-7 w-7 shrink-0 rounded"
-      />
-      <div className="inline-flex w-full flex-1 items-center justify-between">
-        <h5 className="max-w-[10rem] truncate">
+      <Avatar.Root className="shrink-0">
+        <Avatar.Image
+          src={user?.picture || user?.image}
+          alt={event.pubkey}
+          loading="lazy"
+          decoding="async"
+          style={{ contentVisibility: 'auto' }}
+          className="h-10 w-10 rounded-lg"
+        />
+        <Avatar.Fallback delayMs={300}>
+          <img
+            src={svgURI}
+            alt={event.pubkey}
+            className="h-10 w-10 rounded-lg border border-white/5 bg-black"
+          />
+        </Avatar.Fallback>
+      </Avatar.Root>
+      <div className="flex w-full flex-col">
+        <h5 className="max-w-[10rem] truncate font-semibold text-white">
           {user?.name ||
             user?.display_name ||
             user?.displayName ||
-            displayNpub(pubkey, 16)}
+            displayNpub(event.pubkey, 16)}
         </h5>
+        <div className="flex w-full items-center justify-between">
+          <p className="max-w-[8rem] truncate text-sm text-white/70">
+            {decryptedContent}
+          </p>
+          <p className="text-sm text-white/70">{createdAt}</p>
+        </div>
       </div>
     </NavLink>
   );
-}
+});

src/app/chats/components/list.tsx

@@ -1,54 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { useCallback } from 'react';
-
-import { ChatsListItem } from '@app/chats/components/item';
-import { NewMessageModal } from '@app/chats/components/modal';
-import { UnknownsModal } from '@app/chats/components/unknowns';
-
-import { useStorage } from '@libs/storage/provider';
-
-import { LoaderIcon } from '@shared/icons';
-
-import { useNostr } from '@utils/hooks/useNostr';
-
-export function ChatsList() {
-  const { db } = useStorage();
-  const { fetchNIP04Chats } = useNostr();
-  const { status, data: chats } = useQuery(
-    ['nip04-chats'],
-    async () => {
-      return await fetchNIP04Chats();
-    },
-    { refetchOnWindowFocus: false }
-  );
-
-  const renderItem = useCallback(
-    (item: string) => {
-      if (db.account.pubkey !== item) {
-        return <ChatsListItem key={item} pubkey={item} />;
-      }
-    },
-    [chats]
-  );
-
-  if (status === 'loading') {
-    return (
-      <div className="flex flex-col">
-        <div className="inline-flex h-10 items-center gap-2.5 border-l-2 border-transparent pl-4">
-          <div className="relative inline-flex h-7 w-7 shrink-0 items-center justify-center">
-            <LoaderIcon className="h-4 w-4 animate-spin text-white" />
-          </div>
-          <h5 className="text-white/50">Loading messages...</h5>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col">
-      {chats?.follows?.map((item) => renderItem(item))}
-      {chats?.unknowns?.length > 0 && <UnknownsModal data={chats.unknowns} />}
-      <NewMessageModal />
-    </div>
-  );
-}

src/app/chats/components/modal.tsx

@@ -23,17 +23,15 @@ export function NewMessageModal() {
       <Dialog.Trigger asChild>
         <button
           type="button"
-          className="inline-flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 border-transparent pl-4 pr-3"
+          className="inline-flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 border-transparent px-3"
         >
-          <div className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
-            <PlusIcon className="h-4 w-4 text-white" />
-          </div>
-          <div>
-            <h5 className="text-white/50">New chat</h5>
+          <div className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
+            <PlusIcon className="h-5 w-5" />
           </div>
+          <h5 className="font-medium text-white/50">New message</h5>
         </button>
       </Dialog.Trigger>
-      <Dialog.Portal className="relative z-10">
+      <Dialog.Portal>
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
         <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
           <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">

src/app/chats/components/sidebar.tsx

@@ -1,52 +0,0 @@
-import { Link } from 'react-router-dom';
-
-import { Image } from '@shared/image';
-import { NIP05 } from '@shared/nip05';
-
-import { useProfile } from '@utils/hooks/useProfile';
-import { displayNpub } from '@utils/shortenKey';
-
-export function ChatSidebar({ pubkey }: { pubkey: string }) {
-  const { user } = useProfile(pubkey);
-
-  return (
-    <div className="px-3 py-2">
-      <div className="flex flex-col gap-3">
-        <div className="relative h-11 w-11 shrink rounded-md">
-          <Image
-            src={user?.picture || user?.image}
-            alt={pubkey}
-            className="h-11 w-11 rounded-md object-cover"
-          />
-        </div>
-        <div className="flex flex-col gap-4">
-          <div className="flex flex-col gap-1">
-            <h3 className="text-lg font-semibold leading-none">
-              {user?.name || user?.display_name || user?.displayName}
-            </h3>
-            {user?.nip05 ? (
-              <NIP05
-                pubkey={pubkey}
-                nip05={user?.nip05}
-                className="leading-none text-white/50"
-              />
-            ) : (
-              <span className="leading-none text-white/50">
-                {displayNpub(pubkey, 16)}
-              </span>
-            )}
-          </div>
-          <div>
-            <p className="leading-tight">{user?.bio || user?.about}</p>
-            <Link
-              to={`/users/${pubkey}`}
-              className="mt-3 inline-flex h-10 w-full items-center justify-center rounded-md bg-white/10 text-sm font-medium text-white backdrop-blur-xl hover:bg-fuchsia-500"
-            >
-              View full profile
-            </Link>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/app/chats/components/unknowns.tsx

@@ -1,79 +0,0 @@
-import * as Dialog from '@radix-ui/react-dialog';
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { CancelIcon, StrangersIcon } from '@shared/icons';
-import { User } from '@shared/user';
-
-import { compactNumber } from '@utils/number';
-
-export function UnknownsModal({ data }: { data: string[] }) {
-  const navigate = useNavigate();
-  const [open, setOpen] = useState(false);
-
-  const openChat = (pubkey: string) => {
-    setOpen(false);
-    navigate(`/chats/${pubkey}`);
-  };
-
-  return (
-    <Dialog.Root open={open} onOpenChange={setOpen}>
-      <Dialog.Trigger asChild>
-        <button
-          type="button"
-          className="inline-flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 border-transparent pl-4 pr-3"
-        >
-          <div className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
-            <StrangersIcon className="h-4 w-4 text-white" />
-          </div>
-          <div>
-            <h5 className="text-white/50">
-              {compactNumber.format(data.length)} unknowns
-            </h5>
-          </div>
-        </button>
-      </Dialog.Trigger>
-      <Dialog.Portal className="relative z-10">
-        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
-        <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-          <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
-            <div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">
-              <div className="flex flex-col gap-1">
-                <div className="flex items-center justify-between">
-                  <Dialog.Title className="text-lg font-semibold leading-none text-white">
-                    {data.length} unknowns
-                  </Dialog.Title>
-                  <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-white/10">
-                    <CancelIcon className="h-4 w-4 text-white/50" />
-                  </Dialog.Close>
-                </div>
-                <Dialog.Description className="text-sm leading-none text-white/50">
-                  All messages from people you not follow
-                </Dialog.Description>
-              </div>
-            </div>
-            <div className="flex h-[500px] flex-col overflow-y-auto overflow-x-hidden pb-2 pt-2">
-              {data.map((pubkey) => (
-                <div
-                  key={pubkey}
-                  className="group flex items-center justify-between px-4 py-2 hover:bg-white/10"
-                >
-                  <User pubkey={pubkey} variant="simple" />
-                  <div>
-                    <button
-                      type="button"
-                      onClick={() => openChat(pubkey)}
-                      className="hidden w-max rounded bg-white/10 px-3 py-1 text-sm font-medium hover:bg-fuchsia-500 group-hover:inline-flex"
-                    >
-                      Chat
-                    </button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-}