wip: new chat layout

2023-10-05 14:55:12 +07:00
parent 508a746578
commit cef6b9aca9
14 changed files with 143 additions and 83 deletions
--- a/src/app/chats/chat.tsx
+++ b/src/app/chats/chat.tsx
@@ -11,6 +11,7 @@ import { useNDK } from '@libs/ndk/provider';
 import { useStorage } from '@libs/storage/provider';

 import { LoaderIcon } from '@shared/icons';
+import { User } from '@shared/user';

 import { useStronghold } from '@stores/stronghold';

@@ -35,6 +36,7 @@ export function ChatScreen() {
          message={message}
          userPubkey={db.account.pubkey}
          userPrivkey={userPrivkey}
+          self={message.pubkey === db.account.pubkey}
        />
      );
    },
@@ -71,7 +73,10 @@ export function ChatScreen() {
    <div className="h-full w-full p-3">
      <div className="rounded-lg border-t border-white/5 bg-white/10 backdrop-blur-xl">
        <div className="flex h-full flex-col justify-between overflow-hidden">
-          <div className="h-full w-full flex-1">
+          <div className="flex h-16 shrink-0 items-center border-b border-white/10 px-3">
+            <User pubkey={pubkey} variant="simple" />
+          </div>
+          <div className="h-full w-full flex-1 px-3 py-3">
            {status === 'loading' ? (
              <div className="flex h-full w-full items-center justify-center">
                <div className="flex flex-col items-center gap-1.5">
@@ -92,7 +97,7 @@ export function ChatScreen() {
              </VList>
            )}
          </div>
-          <div className="z-50 shrink-0 rounded-b-xl border-t border-white/5 bg-white/10 p-3 backdrop-blur-xl">
+          <div className="z-50 shrink-0 rounded-b-lg border-t border-white/5 bg-white/10 p-3 backdrop-blur-xl">
            <ChatForm
              receiverPubkey={pubkey}
              userPubkey={db.account.pubkey}
--- a/src/app/chats/components/chatListItem.tsx
+++ b/src/app/chats/components/chatListItem.tsx
@@ -28,9 +28,12 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv

  if (status === 'loading') {
    return (
-      <div className="inline-flex h-10 items-center gap-2.5 rounded-md px-3">
-        <div className="relative h-7 w-7 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
-        <div className="h-2.5 w-2/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
+      <div className="flex items-center gap-2.5 rounded-md px-3">
+        <div className="h-9 w-9 shrink-0 animate-pulse rounded-lg bg-white/10 backdrop-blur-xl" />
+        <div className="flex w-full flex-col">
+          <div className="h-2.5 w-1/2 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
+          <div className="h-2.5 w-full animate-pulse rounded bg-white/10 backdrop-blur-xl" />
+        </div>
      </div>
    );
  }
@@ -55,24 +58,28 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
          loading="lazy"
          decoding="async"
          style={{ contentVisibility: 'auto' }}
-          className="h-9 w-9 rounded-lg"
+          className="h-10 w-10 rounded-lg"
        />
        <Avatar.Fallback delayMs={300}>
-          <img src={svgURI} alt={event.pubkey} className="h-9 w-9 rounded-lg bg-white" />
+          <img
+            src={svgURI}
+            alt={event.pubkey}
+            className="h-10 w-10 rounded-lg bg-white"
+          />
        </Avatar.Fallback>
      </Avatar.Root>
      <div className="flex w-full flex-col">
-        <h5 className="max-w-[10rem] truncate font-semibold text-white">
+        <div className="max-w-[10rem] truncate font-semibold text-white">
          {user?.name ||
            user?.display_name ||
            user?.displayName ||
            displayNpub(event.pubkey, 16)}
-        </h5>
+        </div>
        <div className="flex w-full items-center justify-between">
-          <p className="max-w-[8rem] truncate text-sm text-white/70">
+          <div className="max-w-[10rem] truncate text-sm text-white/70">
            {decryptedContent}
-          </p>
-          <p className="text-sm text-white/70">{createdAt}</p>
+          </div>
+          <div className="text-sm text-white/70">{createdAt}</div>
        </div>
      </div>
    </NavLink>
--- a/src/app/chats/components/message.tsx
+++ b/src/app/chats/components/message.tsx
@@ -1,9 +1,9 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
+import { twMerge } from 'tailwind-merge';

 import { useDecryptMessage } from '@app/chats/hooks/useDecryptMessage';

 import { ImagePreview, LinkPreview, MentionNote, VideoPreview } from '@shared/notes';
-import { User } from '@shared/user';

 import { parser } from '@utils/parser';

@@ -11,44 +11,41 @@ export function ChatMessage({
  message,
  userPubkey,
  userPrivkey,
+  self,
 }: {
  message: NDKEvent;
  userPubkey: string;
  userPrivkey: string;
+  self: boolean;
 }) {
  const decryptedContent = useDecryptMessage(message, userPubkey, userPrivkey);
  const richContent = parser(decryptedContent) ?? null;

  return (
-    <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-white/10">
-      <div className="flex flex-col">
-        <User pubkey={message.pubkey} time={message.created_at} variant="chat" />
-        <div className="-mt-6 flex items-start gap-3">
-          <div className="w-10 shrink-0" />
-          {!richContent ? (
-            <p>Decrypting...</p>
-          ) : (
-            <div>
-              <p className="select-text whitespace-pre-line text-white">
-                {richContent.parsed}
-              </p>
-              <div>
-                {richContent.images.length > 0 && (
-                  <ImagePreview urls={richContent.images} />
-                )}
-                {richContent.videos.length > 0 && (
-                  <VideoPreview urls={richContent.videos} />
-                )}
-                {richContent.links.length > 0 && <LinkPreview urls={richContent.links} />}
-                {richContent.notes.length > 0 &&
-                  richContent.notes.map((note: string) => (
-                    <MentionNote key={note} id={note} />
-                  ))}
-              </div>
-            </div>
-          )}
+    <div
+      className={twMerge(
+        'my-2 w-max max-w-[400px] rounded-t-xl px-3 py-3',
+        self ? 'ml-auto rounded-l-xl bg-fuchsia-500' : 'rounded-r-xl bg-white/10'
+      )}
+    >
+      {!richContent ? (
+        <p>Decrypting...</p>
+      ) : (
+        <div>
+          <p className="select-text whitespace-pre-line text-white">
+            {richContent.parsed}
+          </p>
+          <div>
+            {richContent.images.length > 0 && <ImagePreview urls={richContent.images} />}
+            {richContent.videos.length > 0 && <VideoPreview urls={richContent.videos} />}
+            {richContent.links.length > 0 && <LinkPreview urls={richContent.links} />}
+            {richContent.notes.length > 0 &&
+              richContent.notes.map((note: string) => (
+                <MentionNote key={note} id={note} />
+              ))}
+          </div>
        </div>
-      </div>
+      )}
    </div>
  );
 }
--- a/src/app/chats/index.tsx
+++ b/src/app/chats/index.tsx
@@ -16,7 +16,12 @@ export function ChatsScreen() {
    async () => {
      return await getAllNIP04Chats();
    },
-    { refetchOnWindowFocus: false }
+    {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      staleTime: Infinity,
+    }
  );

  const renderItem = useCallback(
@@ -31,9 +36,13 @@ export function ChatsScreen() {
      <div className="scrollbar-hide col-span-1 h-full overflow-y-auto border-r border-white/5">
        <div
          data-tauri-drag-region
-          className="h-16 w-full shrink-0 border-b border-white/5"
-        />
-        <div className="flex h-full flex-col gap-1 py-2">
+          className="flex h-11 w-full shrink-0 items-center border-b border-white/5 px-3"
+        >
+          <h3 className="bg-gradient-to-r from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent">
+            All chats
+          </h3>
+        </div>
+        <div className="flex h-full flex-col gap-1">
          {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">
--- a/src/app/space/components/widgetList.tsx
+++ b/src/app/space/components/widgetList.tsx
@@ -57,9 +57,9 @@ export function WidgetList({ params }: { params: Widget }) {
  );

  const renderItem = useCallback(
-    (row: WidgetGroup) => {
+    (row: WidgetGroup, index: number) => {
      return (
-        <div className="flex flex-col gap-3">
+        <div key={index} className="flex flex-col gap-3">
          <h3 className="font-medium text-white/50">{row.title}</h3>
          <div className="flex flex-col divide-y divide-white/5 overflow-hidden rounded-xl bg-white/10">
            {row.data.map((item, index) => (
@@ -101,7 +101,9 @@ export function WidgetList({ params }: { params: Widget }) {
      <TitleBar id={params.id} title="Add widget" />
      <div className="scrollbar-hide h-full overflow-y-auto pb-20">
        <div className="flex flex-col gap-6 px-3">
-          {DefaultWidgets.map((row: WidgetGroup) => renderItem(row))}
+          {DefaultWidgets.map((row: WidgetGroup, index: number) =>
+            renderItem(row, index)
+          )}
          <div className="border-t border-white/5 pt-6">
            <button
              type="button"