wip: new chat screen

src/app/chats/chat.tsx

@@ -0,0 +1,108 @@
+import { NDKEvent, NDKSubscription } from '@nostr-dev-kit/ndk';
+import { useQuery } from '@tanstack/react-query';
+import { useCallback, useEffect, useRef } from 'react';
+import { useParams } from 'react-router-dom';
+import { VList, VListHandle } from 'virtua';
+
+import { ChatMessageForm } from '@app/chats/components/messages/form';
+import { ChatMessageItem } from '@app/chats/components/messages/item';
+
+import { useNDK } from '@libs/ndk/provider';
+import { useStorage } from '@libs/storage/provider';
+
+import { LoaderIcon } from '@shared/icons';
+
+import { useStronghold } from '@stores/stronghold';
+
+import { useNostr } from '@utils/hooks/useNostr';
+
+export function ChatScreen() {
+  const listRef = useRef<VListHandle>(null);
+  const userPrivkey = useStronghold((state) => state.privkey);
+
+  const { db } = useStorage();
+  const { ndk } = useNDK();
+  const { pubkey } = useParams();
+  const { fetchNIP04Messages } = useNostr();
+  const { status, data } = useQuery(['nip04-dm', pubkey], async () => {
+    return await fetchNIP04Messages(pubkey);
+  });
+
+  const renderItem = useCallback(
+    (message: NDKEvent) => {
+      return (
+        <ChatMessageItem
+          message={message}
+          userPubkey={db.account.pubkey}
+          userPrivkey={userPrivkey}
+        />
+      );
+    },
+    [data]
+  );
+
+  useEffect(() => {
+    if (data.length > 0) listRef.current?.scrollToIndex(data.length);
+  }, [data]);
+
+  useEffect(() => {
+    const sub: NDKSubscription = ndk.subscribe(
+      {
+        kinds: [4],
+        authors: [db.account.pubkey],
+        '#p': [pubkey],
+        since: Math.floor(Date.now() / 1000),
+      },
+      {
+        closeOnEose: false,
+      }
+    );
+
+    sub.addListener('event', (event) => {
+      console.log(event);
+    });
+
+    return () => {
+      sub.stop();
+    };
+  }, [pubkey]);
+
+  return (
+    <div className="grid h-full w-full grid-cols-3 bg-white/10 backdrop-blur-xl">
+      <div className="col-span-2 border-r border-white/5">
+        <div className="h-full w-full flex-1 p-3">
+          <div className="flex h-full flex-col justify-between overflow-hidden rounded-xl bg-white/10 backdrop-blur-xl">
+            <div className="h-full w-full flex-1">
+              {status === 'loading' ? (
+                <div className="flex h-full w-full items-center justify-center">
+                  <div className="flex flex-col items-center gap-1.5">
+                    <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+                    <p className="text-sm font-medium text-white/50">Loading messages</p>
+                  </div>
+                </div>
+              ) : data.length === 0 ? (
+                <div className="absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 transform flex-col gap-1 text-center">
+                  <h3 className="mb-2 text-4xl">🙌</h3>
+                  <p className="leading-none text-white/50">
+                    You two didn&apos;t talk yet, let&apos;s send first message
+                  </p>
+                </div>
+              ) : (
+                <VList ref={listRef} className="scrollbar-hide h-full" mode="reverse">
+                  {data.map((message) => renderItem(message))}
+                </VList>
+              )}
+            </div>
+            <div className="z-50 shrink-0 rounded-b-xl border-t border-white/5 bg-white/10 p-3 px-5 backdrop-blur-xl">
+              <ChatMessageForm
+                receiverPubkey={pubkey}
+                userPubkey={db.account.pubkey}
+                userPrivkey={userPrivkey}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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>
-  );
-}

src/app/chats/hooks/useDecryptMessage.tsx

@@ -2,24 +2,24 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { nip04 } from 'nostr-tools';
 import { useEffect, useState } from 'react';
 
-export function useDecryptMessage(
-  message: NDKEvent,
-  userPubkey: string,
-  userPriv: string
-) {
+export function useDecryptMessage(message: NDKEvent, pubkey: string, privkey: string) {
   const [content, setContent] = useState(message.content);
 
   useEffect(() => {
-    async function decrypt() {
-      const pubkey =
-        userPubkey === message.pubkey
-          ? message.tags.find((el) => el[0] === 'p')[1]
-          : message.pubkey;
-      const result = await nip04.decrypt(userPriv, pubkey, message.content);
-      setContent(result);
+    async function decryptContent() {
+      try {
+        const sender =
+          pubkey === message.pubkey
+            ? message.tags.find((el) => el[0] === 'p')[1]
+            : message.pubkey;
+        const result = await nip04.decrypt(privkey, sender, message.content);
+        setContent(result);
+      } catch (e) {
+        console.error(e);
+      }
     }
 
-    decrypt().catch(console.error);
+    decryptContent();
   }, []);
 
   return content;

src/app/chats/index.tsx

@@ -1,111 +1,55 @@
-import { NDKEvent, NDKSubscription } from '@nostr-dev-kit/ndk';
+import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';
-import { useCallback, useEffect, useRef } from 'react';
-import { useParams } from 'react-router-dom';
-import { VList, VListHandle } from 'virtua';
+import { useCallback } from 'react';
+import { Outlet } from 'react-router-dom';
 
-import { ChatMessageForm } from '@app/chats/components/messages/form';
-import { ChatMessageItem } from '@app/chats/components/messages/item';
-import { ChatSidebar } from '@app/chats/components/sidebar';
+import { ChatListItem } from '@app/chats/components/item';
 
-import { useNDK } from '@libs/ndk/provider';
 import { useStorage } from '@libs/storage/provider';
 
 import { LoaderIcon } from '@shared/icons';
 
-import { useStronghold } from '@stores/stronghold';
-
 import { useNostr } from '@utils/hooks/useNostr';
 
-export function ChatScreen() {
-  const listRef = useRef<VListHandle>(null);
-  const userPrivkey = useStronghold((state) => state.privkey);
-
+export function ChatsScreen() {
   const { db } = useStorage();
-  const { ndk } = useNDK();
-  const { pubkey } = useParams();
-  const { fetchNIP04Messages } = useNostr();
-  const { status, data } = useQuery(['nip04-dm', pubkey], async () => {
-    return await fetchNIP04Messages(pubkey);
-  });
+  const { getAllNIP04Chats } = useNostr();
+  const { status, data } = useQuery(
+    ['nip04-chats'],
+    async () => {
+      return await getAllNIP04Chats();
+    },
+    { refetchOnWindowFocus: false }
+  );
 
   const renderItem = useCallback(
-    (message: NDKEvent) => {
-      return (
-        <ChatMessageItem
-          message={message}
-          userPubkey={db.account.pubkey}
-          userPrivkey={userPrivkey}
-        />
-      );
+    (event: NDKEvent) => {
+      if (db.account.pubkey !== event.pubkey) {
+        return <ChatListItem key={event.id} event={event} />;
+      }
     },
     [data]
   );
 
-  useEffect(() => {
-    if (data.length > 0) listRef.current?.scrollToIndex(data.length);
-  }, [data]);
-
-  useEffect(() => {
-    const sub: NDKSubscription = ndk.subscribe(
-      {
-        kinds: [4],
-        authors: [db.account.pubkey],
-        '#p': [pubkey],
-        since: Math.floor(Date.now() / 1000),
-      },
-      {
-        closeOnEose: false,
-      }
-    );
-
-    sub.addListener('event', (event) => {
-      console.log(event);
-    });
-
-    return () => {
-      sub.stop();
-    };
-  }, [pubkey]);
-
   return (
-    <div className="grid h-full w-full grid-cols-3 bg-white/10 backdrop-blur-xl">
-      <div className="col-span-2 border-r border-white/5">
-        <div className="h-full w-full flex-1 p-3">
-          <div className="flex h-full flex-col justify-between overflow-hidden rounded-xl bg-white/10 backdrop-blur-xl">
-            <div className="h-full w-full flex-1">
-              {status === 'loading' ? (
-                <div className="flex h-full w-full items-center justify-center">
-                  <div className="flex flex-col items-center gap-1.5">
-                    <LoaderIcon className="h-5 w-5 animate-spin text-white" />
-                    <p className="text-sm font-medium text-white/50">Loading messages</p>
-                  </div>
-                </div>
-              ) : data.length === 0 ? (
-                <div className="absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 transform flex-col gap-1 text-center">
-                  <h3 className="mb-2 text-4xl">🙌</h3>
-                  <p className="leading-none text-white/50">
-                    You two didn&apos;t talk yet, let&apos;s send first message
-                  </p>
-                </div>
-              ) : (
-                <VList ref={listRef} className="scrollbar-hide h-full" mode="reverse">
-                  {data.map((message) => renderItem(message))}
-                </VList>
-              )}
+    <div className="grid h-full w-full grid-cols-3">
+      <div className="scrollbar-hide col-span-1 h-full overflow-y-auto border-r border-white/5">
+        <div className="h-16 w-full shrink-0 border-b border-white/5" />
+        <div className="flex h-full flex-col gap-1 py-2">
+          {status === 'loading' ? (
+            <div className="flex h-full w-full items-center justify-center pb-16">
+              <div className="inline-flex flex-col items-center justify-center gap-2">
+                <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+                <h5 className="text-white/50">Loading messages...</h5>
+              </div>
             </div>
-            <div className="z-50 shrink-0 rounded-b-xl border-t border-white/5 bg-white/10 p-3 px-5 backdrop-blur-xl">
-              <ChatMessageForm
-                receiverPubkey={pubkey}
-                userPubkey={db.account.pubkey}
-                userPrivkey={userPrivkey}
-              />
-            </div>
-          </div>
+          ) : (
+            data.map((item) => renderItem(item))
+          )}
         </div>
       </div>
-      <div className="col-span-1 pt-3">
-        <ChatSidebar pubkey={pubkey} />
+      <div className="col-span-2">
+        <Outlet />
       </div>
     </div>
   );