update user screen

src/app/users/components/profile.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
-import { UserMetadata } from '@app/users/components/metadata';
+import { UserStats } from '@app/users/components/stats';
 
 import { useStorage } from '@libs/storage/provider';
 
@@ -49,67 +49,85 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
     }
   }, [status]);
 
+  if (!user) return <p>Loading...</p>;
+
   return (
     <>
-      <div className="h-56 w-full bg-white">
-        <img src={user?.banner} alt={'banner'} className="h-full w-full object-cover" />
+      <div className="h-56 w-full">
+        {user.banner ? (
+          <img
+            src={user.banner}
+            alt="user banner"
+            className="h-full w-full object-cover"
+          />
+        ) : (
+          <div className="h-full w-full bg-black/50" />
+        )}
       </div>
-      <div className="-mt-7 w-full px-5">
+      <div className="-mt-7 flex w-full flex-col items-center px-5">
         <Image
-          src={user?.picture || user?.image}
+          src={user.picture || user.image}
           alt={pubkey}
-          className="h-14 w-14 rounded-md ring-2 ring-white/50"
+          className="h-14 w-14 rounded-lg ring-2 ring-black"
         />
-        <div className="mt-2 flex flex-1 flex-col gap-4">
-          <div className="flex items-center gap-16">
+        <div className="mt-2 flex flex-1 flex-col gap-6">
+          <div className="flex flex-col items-center gap-1">
             <div className="inline-flex flex-col gap-1.5">
-              <h5 className="text-lg font-semibold leading-none">
-                {user?.displayName || user?.name || 'No name'}
+              <h5 className="text-center text-xl font-semibold leading-none">
+                {user.display_name || user.displayName || user.name || 'No name'}
               </h5>
-              <span className="max-w-[15rem] truncate text-sm leading-none text-white/50">
-                {user?.nip05 || shortenKey(pubkey)}
+              <span className="max-w-[15rem] truncate text-center leading-none text-white/50">
+                {user.nip05 || user.username || shortenKey(pubkey)}
               </span>
             </div>
-            <div className="inline-flex items-center gap-2">
-              {status === 'loading' ? (
-                <button
-                  type="button"
-                  className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
-                >
-                  Loading...
-                </button>
-              ) : followed ? (
-                <button
-                  type="button"
-                  onClick={() => unfollowUser(pubkey)}
-                  className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
-                >
-                  Unfollow
-                </button>
+            <div className="flex flex-col gap-6">
+              {user.about || user.bio ? (
+                <p className="mt-2 max-w-[500px] select-text break-words text-center text-white">
+                  {user.about || user.bio}
+                </p>
               ) : (
-                <button
-                  type="button"
-                  onClick={() => followUser(pubkey)}
-                  className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
-                >
-                  Follow
-                </button>
+                <></>
               )}
-              <Link
-                to={`/chats/${pubkey}`}
-                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
-              >
-                Message
-              </Link>
-              <span className="mx-2 inline-flex h-4 w-px bg-white/10" />
-              {db.account.pubkey === pubkey && <EditProfileModal />}
+              <UserStats pubkey={pubkey} />
             </div>
           </div>
-          <div className="flex flex-col gap-8">
-            <p className="mt-2 max-w-[500px] select-text break-words text-white">
-              {user?.about || user?.bio}
-            </p>
-            <UserMetadata pubkey={pubkey} />
+          <div className="inline-flex items-center justify-center gap-2">
+            {status === 'loading' ? (
+              <button
+                type="button"
+                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
+              >
+                Loading...
+              </button>
+            ) : followed ? (
+              <button
+                type="button"
+                onClick={() => unfollowUser(pubkey)}
+                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
+              >
+                Unfollow
+              </button>
+            ) : (
+              <button
+                type="button"
+                onClick={() => followUser(pubkey)}
+                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
+              >
+                Follow
+              </button>
+            )}
+            <Link
+              to={`/chats/${pubkey}`}
+              className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
+            >
+              Message
+            </Link>
+            {db.account.pubkey === pubkey && (
+              <>
+                <span className="mx-2 inline-flex h-4 w-px bg-white/10" />
+                <EditProfileModal />
+              </>
+            )}
           </div>
         </div>
       </div>

src/app/users/components/stats.tsx

@@ -1,8 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 
+import { LoaderIcon } from '@shared/icons';
+
 import { compactNumber } from '@utils/number';
 
-export function UserMetadata({ pubkey }: { pubkey: string }) {
+export function UserStats({ pubkey }: { pubkey: string }) {
   const { status, data } = useQuery(['user-metadata', pubkey], async () => {
     const res = await fetch(`https://api.nostr.band/v0/stats/profile/${pubkey}`);
     if (!res.ok) {
@@ -12,24 +14,32 @@ export function UserMetadata({ pubkey }: { pubkey: string }) {
   });
 
   if (status === 'loading') {
-    return <p>Loading...</p>;
+    return (
+      <div className="flex w-full items-center justify-center">
+        <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+      </div>
+    );
+  }
+
+  if (status === 'error') {
+    return <div className="flex w-full items-center justify-center" />;
   }
 
   return (
     <div className="flex w-full items-center gap-10">
-      <div className="inline-flex flex-col gap-1">
+      <div className="inline-flex flex-col items-center gap-1">
         <span className="font-semibold leading-none text-white">
           {compactNumber.format(data.stats[pubkey].followers_pubkey_count) ?? 0}
         </span>
         <span className="text-sm leading-none text-white/50">Followers</span>
       </div>
-      <div className="inline-flex flex-col gap-1">
+      <div className="inline-flex flex-col items-center gap-1">
         <span className="font-semibold leading-none text-white">
           {compactNumber.format(data.stats[pubkey].pub_following_pubkey_count) ?? 0}
         </span>
         <span className="text-sm leading-none text-white/50">Following</span>
       </div>
-      <div className="inline-flex flex-col gap-1">
+      <div className="inline-flex flex-col items-center gap-1">
         <span className="font-semibold leading-none text-white">
           {data.stats[pubkey].zaps_received
             ? compactNumber.format(data.stats[pubkey].zaps_received.msats / 1000)
@@ -37,7 +47,7 @@ export function UserMetadata({ pubkey }: { pubkey: string }) {
         </span>
         <span className="text-sm leading-none text-white/50">Zaps received</span>
       </div>
-      <div className="inline-flex flex-col gap-1">
+      <div className="inline-flex flex-col items-center gap-1">
         <span className="font-semibold leading-none text-white">
           {data.stats[pubkey].zaps_sent
             ? compactNumber.format(data.stats[pubkey].zaps_sent.msats / 1000)

src/app/users/index.tsx

@@ -1,38 +1,115 @@
+import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 
+import { UserProfile } from '@app/users/components/profile';
+
 import { useNDK } from '@libs/ndk/provider';
 
-import { NoteSkeleton, TextNote } from '@shared/notes';
+import {
+  ArticleNote,
+  FileNote,
+  NoteSkeleton,
+  NoteWrapper,
+  Repost,
+  TextNote,
+  UnknownNote,
+} from '@shared/notes';
 
 import { nHoursAgo } from '@utils/date';
-import { LumeEvent } from '@utils/types';
-
-import { UserProfile } from './components/profile';
 
 export function UserScreen() {
-  const parentRef = useRef();
-
   const { pubkey } = useParams();
   const { ndk } = useNDK();
   const { status, data } = useQuery(['user-feed', pubkey], async () => {
     const events = await ndk.fetchEvents({
-      kinds: [1],
+      kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Article],
       authors: [pubkey],
       since: nHoursAgo(48),
     });
-    return [...events] as unknown as LumeEvent[];
+    return [...events] as unknown as NDKEvent[];
   });
 
-  const rowVirtualizer = useVirtualizer({
+  const parentRef = useRef();
+  const virtualizer = useVirtualizer({
     count: data ? data.length : 0,
     getScrollElement: () => parentRef.current,
-    estimateSize: () => 400,
+    estimateSize: () => 650,
+    overscan: 2,
   });
+  const items = virtualizer.getVirtualItems();
 
-  const itemsVirtualizer = rowVirtualizer.getVirtualItems();
+  // render event match event kind
+  const renderItem = useCallback(
+    (index: string | number) => {
+      const event: NDKEvent = data[index];
+      if (!event) return;
+
+      switch (event.kind) {
+        case NDKKind.Text:
+          return (
+            <div
+              key={event.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <NoteWrapper event={event}>
+                <TextNote event={event} />
+              </NoteWrapper>
+            </div>
+          );
+        case NDKKind.Repost:
+          return (
+            <div
+              key={event.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <Repost key={event.id} event={event} />
+            </div>
+          );
+        case 1063:
+          return (
+            <div
+              key={event.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <NoteWrapper event={event}>
+                <FileNote event={event} />
+              </NoteWrapper>
+            </div>
+          );
+        case NDKKind.Article:
+          return (
+            <div
+              key={event.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <NoteWrapper event={event}>
+                <ArticleNote event={event} />
+              </NoteWrapper>
+            </div>
+          );
+        default:
+          return (
+            <div
+              key={event.id + index}
+              data-index={index}
+              ref={virtualizer.measureElement}
+            >
+              <NoteWrapper event={event}>
+                <UnknownNote event={event} />
+              </NoteWrapper>
+            </div>
+          );
+      }
+    },
+    [data]
+  );
 
   return (
     <div
@@ -41,53 +118,42 @@ export function UserScreen() {
     >
       <div data-tauri-drag-region className="absolute left-0 top-0 h-11 w-full" />
       <UserProfile pubkey={pubkey} />
-      <div className="mt-8 h-full w-full border-t border-white/5 px-1.5">
-        <div className="flex flex-col justify-start gap-1 px-3 pt-4 text-start">
-          <p className="text-lg font-semibold leading-none text-white">Latest posts</p>
-          <span className="text-sm leading-none text-white/50">48 hours ago</span>
-        </div>
-        <div className="flex h-full max-w-[400px] flex-col justify-between gap-1.5 pb-4 pt-1.5">
+      <div className="mt-6 h-full w-full border-t border-white/5 px-1.5">
+        <h3 className="mb-2 pt-4 text-center text-lg font-semibold leading-none text-white">
+          Latest postrs
+        </h3>
+        <div className="mx-auto flex h-full max-w-[500px] flex-col justify-between gap-1.5 pb-4 pt-1.5">
           {status === 'loading' ? (
             <div className="px-3 py-1.5">
-              <div className="shadow-input rounded-xl bg-white/10">
+              <div className="rounded-xl bg-white/10 px-3 py-3">
                 <NoteSkeleton />
               </div>
             </div>
-          ) : itemsVirtualizer.length === 0 ? (
+          ) : items.length === 0 ? (
             <div className="px-3 py-1.5">
               <div className="rounded-xl bg-white/10 px-3 py-6">
                 <div className="flex flex-col items-center gap-4">
-                  <p className="text-center text-sm font-medium text-zinc-300">
-                    No new posts in 48 hours ago
+                  <p className="text-center text-sm font-medium text-white">
+                    User doesn&apos;t have any postrs in the last 48 hours.
                   </p>
                 </div>
               </div>
             </div>
           ) : (
             <div
-              className="relative w-full"
               style={{
-                height: `${rowVirtualizer.getTotalSize()}px`,
+                position: 'relative',
+                width: '100%',
+                height: `${virtualizer.getTotalSize()}px`,
               }}
             >
               <div
                 className="absolute left-0 top-0 w-full"
                 style={{
-                  transform: `translateY(${
-                    itemsVirtualizer[0].start - rowVirtualizer.options.scrollMargin
-                  }px)`,
+                  transform: `translateY(${items[0].start}px)`,
                 }}
               >
-                {itemsVirtualizer.map((virtualRow) => (
-                  <div
-                    key={virtualRow.key}
-                    data-index={virtualRow.index}
-                    ref={rowVirtualizer.measureElement}
-                  >
-                    <TextNote event={data[virtualRow.index]} />
-                  </div>
-                ))}
-                <div className="h-10" />
+                {items.map((item) => renderItem(item.index))}
               </div>
             </div>
           )}