add user block

src/app/space/components/blocks/thread.tsx

@@ -3,7 +3,13 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 // import { useLiveThread } from '@app/space/hooks/useLiveThread';
 import { removeBlock } from '@libs/storage';
 
-import { NoteContent, NoteStats, ThreadUser } from '@shared/notes';
+import {
+  NoteActions,
+  NoteContent,
+  NoteReplyForm,
+  NoteStats,
+  ThreadUser,
+} from '@shared/notes';
 import { RepliesList } from '@shared/notes/replies/list';
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';
@@ -46,12 +52,14 @@ export function ThreadBlock({ params }: { params: Block }) {
                 <NoteContent content={data.content} />
               </div>
               <div>
+                <NoteActions id={data.id} pubkey={data.pubkey} noOpenThread={true} />
                 <NoteStats id={data.id} />
               </div>
             </div>
           </div>
         )}
         <div className="px-3">
+          <NoteReplyForm id={params.content} />
           <RepliesList id={params.content} />
         </div>
       </div>

src/app/space/components/blocks/user.tsx

@@ -0,0 +1,141 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import { UserFeed } from '@app/user/components/feed';
+import { UserMetadata } from '@app/user/components/metadata';
+
+import { removeBlock } from '@libs/storage';
+
+import { ZapIcon } from '@shared/icons';
+import { Image } from '@shared/image';
+import { TitleBar } from '@shared/titleBar';
+
+import { DEFAULT_AVATAR } from '@stores/constants';
+
+import { useProfile } from '@utils/hooks/useProfile';
+import { useSocial } from '@utils/hooks/useSocial';
+import { shortenKey } from '@utils/shortenKey';
+import { Block } from '@utils/types';
+
+export function UserBlock({ params }: { params: Block }) {
+  const queryClient = useQueryClient();
+
+  const { user } = useProfile(params.content);
+  const { status, userFollows, follow, unfollow } = useSocial();
+
+  const [followed, setFollowed] = useState(false);
+
+  const block = useMutation({
+    mutationFn: (id: string) => {
+      return removeBlock(id);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['blocks'] });
+    },
+  });
+
+  const followUser = (pubkey: string) => {
+    try {
+      follow(pubkey);
+
+      // update state
+      setFollowed(true);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const unfollowUser = (pubkey: string) => {
+    try {
+      unfollow(pubkey);
+
+      // update state
+      setFollowed(false);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    if (status === 'success' && userFollows) {
+      if (userFollows.includes(params.content)) {
+        setFollowed(true);
+      }
+    }
+  }, [status]);
+
+  return (
+    <div className="w-[400px] shrink-0 border-r border-zinc-900">
+      <TitleBar title={params.title} onClick={() => block.mutate(params.id)} />
+      <div className="scrollbar-hide flex h-full w-full flex-col gap-1.5 overflow-y-auto pb-20 pt-1.5">
+        <div className="px-3 pt-1.5">
+          <Image
+            src={user?.picture || user?.image}
+            fallback={DEFAULT_AVATAR}
+            alt={params.content}
+            className="h-14 w-14 rounded-md ring-2 ring-black"
+          />
+          <div className="mt-2 flex flex-1 flex-col gap-2">
+            <div className="flex flex-col gap-2">
+              <h5 className="text-lg font-semibold leading-none">
+                {user?.displayName || user?.name || 'No name'}
+              </h5>
+              <span className="max-w-[15rem] truncate text-sm leading-none text-zinc-500">
+                {user?.nip05 || shortenKey(params.content)}
+              </span>
+            </div>
+            <div className="flex flex-col gap-4">
+              <p className="mt-2 max-w-[500px] select-text break-words text-zinc-100">
+                {user?.about}
+              </p>
+              <UserMetadata pubkey={params.content} />
+            </div>
+            <div className="mt-4 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-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
+                >
+                  Loading...
+                </button>
+              ) : followed ? (
+                <button
+                  type="button"
+                  onClick={() => unfollowUser(params.content)}
+                  className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
+                >
+                  Unfollow
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  onClick={() => followUser(params.content)}
+                  className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
+                >
+                  Follow
+                </button>
+              )}
+              <Link
+                to={`/app/chat/${params.content}`}
+                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
+              >
+                Message
+              </Link>
+              <button
+                type="button"
+                className="group inline-flex h-10 w-10 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-orange-500"
+              >
+                <ZapIcon className="h-5 w-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+        <div>
+          <h3 className="mt-2 px-3 text-lg font-semibold text-zinc-300">Timeline</h3>
+          <UserFeed pubkey={params.content} />
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/space/index.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
 
+import { UserBlock } from '@app/space//components/blocks/user';
 import { AddBlock } from '@app/space/components/add';
 import { FeedBlock } from '@app/space/components/blocks/feed';
 import { FollowingBlock } from '@app/space/components/blocks/following';
@@ -43,6 +44,8 @@ export function SpaceScreen() {
           return <ThreadBlock key={block.id} params={block} />;
         case 3:
           return <HashtagBlock key={block.id} params={block} />;
+        case 5:
+          return <UserBlock key={block.id} params={block} />;
         default:
           break;
       }

src/app/user/components/feed.tsx

@@ -1,11 +1,17 @@
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useRef } from 'react';
 
 import { useNDK } from '@libs/ndk/provider';
 
+import { NoteKind_1, NoteSkeleton } from '@shared/notes';
+
 import { nHoursAgo } from '@utils/date';
 import { LumeEvent } from '@utils/types';
 
 export function UserFeed({ pubkey }: { pubkey: string }) {
+  const parentRef = useRef();
+
   const { fetcher, relayUrls } = useNDK();
   const { status, data } = useQuery(['user-feed', pubkey], async () => {
     const events = await fetcher.fetchAllEvents(
@@ -17,5 +23,63 @@ export function UserFeed({ pubkey }: { pubkey: string }) {
     return events as unknown as LumeEvent[];
   });
 
-  return <div className="w-full max-w-[400px] px-2 pb-10"></div>;
+  const rowVirtualizer = useVirtualizer({
+    count: data ? data.length : 0,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 400,
+  });
+
+  const itemsVirtualizer = rowVirtualizer.getVirtualItems();
+
+  return (
+    <div
+      ref={parentRef}
+      className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5"
+      style={{ contain: 'strict' }}
+    >
+      {status === 'loading' ? (
+        <div className="px-3 py-1.5">
+          <div className="shadow-input rounded-md bg-zinc-900 px-3 py-3 shadow-black/20">
+            <NoteSkeleton />
+          </div>
+        </div>
+      ) : itemsVirtualizer.length === 0 ? (
+        <div className="px-3 py-1.5">
+          <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-6">
+            <div className="flex flex-col items-center gap-4">
+              <p className="text-center text-sm text-zinc-300">
+                No new posts about this hashtag in 48 hours ago
+              </p>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div
+          className="relative w-full"
+          style={{
+            height: `${rowVirtualizer.getTotalSize()}px`,
+          }}
+        >
+          <div
+            className="absolute left-0 top-0 w-full"
+            style={{
+              transform: `translateY(${
+                itemsVirtualizer[0].start - rowVirtualizer.options.scrollMargin
+              }px)`,
+            }}
+          >
+            {itemsVirtualizer.map((virtualRow) => (
+              <div
+                key={virtualRow.key}
+                data-index={virtualRow.index}
+                ref={rowVirtualizer.measureElement}
+              >
+                <NoteKind_1 event={data[virtualRow.index]} />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
 }

src/app/user/components/metadata.tsx

@@ -19,13 +19,13 @@ export function UserMetadata({ pubkey }: { pubkey: string }) {
     <div className="flex w-full items-center gap-10">
       <div className="inline-flex flex-col gap-1">
         <span className="font-semibold leading-none text-zinc-100">
-          {data.stats[pubkey].followers_pubkey_count ?? 0}
+          {compactNumber.format(data.stats[pubkey].followers_pubkey_count) ?? 0}
         </span>
         <span className="text-sm leading-none text-zinc-400">Followers</span>
       </div>
       <div className="inline-flex flex-col gap-1">
         <span className="font-semibold leading-none text-zinc-100">
-          {data.stats[pubkey].pub_following_pubkey_count ?? 0}
+          {compactNumber.format(data.stats[pubkey].pub_following_pubkey_count) ?? 0}
         </span>
         <span className="text-sm leading-none text-zinc-400">Following</span>
       </div>