fix errors

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

@@ -40,7 +40,7 @@ export function HashtagBlock({ params }: { params: Block }) {
       >
         {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">
+            <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
               <NoteSkeleton />
             </div>
           </div>

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

@@ -1,125 +1,100 @@
-import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useRef } from 'react';
 
-import { UserFeed } from '@app/user/components/feed';
-import { UserMetadata } from '@app/user/components/metadata';
+import { useNDK } from '@libs/ndk/provider';
 
-import { ZapIcon } from '@shared/icons';
-import { Image } from '@shared/image';
+import { NoteKind_1, NoteSkeleton } from '@shared/notes';
 import { TitleBar } from '@shared/titleBar';
+import { UserProfile } from '@shared/userProfile';
 
-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';
+import { nHoursAgo } from '@utils/date';
+import { Block, LumeEvent } from '@utils/types';
 
 export function UserBlock({ params }: { params: Block }) {
-  const { user } = useProfile(params.content);
-  const { status, userFollows, follow, unfollow } = useSocial();
+  const parentRef = useRef<HTMLDivElement>(null);
 
-  const [followed, setFollowed] = useState(false);
+  const { fetcher, relayUrls } = useNDK();
+  const { status, data } = useQuery(['user-feed', params.content], async () => {
+    const events = await fetcher.fetchAllEvents(
+      relayUrls,
+      { kinds: [1], authors: [params.content] },
+      { since: nHoursAgo(48) },
+      { sort: true }
+    );
+    return events as unknown as LumeEvent[];
+  });
 
-  const followUser = (pubkey: string) => {
-    try {
-      follow(pubkey);
+  const rowVirtualizer = useVirtualizer({
+    count: data ? data.length : 0,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 400,
+  });
 
-      // 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]);
+  const itemsVirtualizer = rowVirtualizer.getVirtualItems();
 
   return (
     <div className="w-[400px] shrink-0 border-r border-zinc-900">
       <TitleBar id={params.id} title={params.title} />
-      <div className="scrollbar-hide flex h-full w-full flex-col gap-1.5 overflow-y-auto pb-20 pt-1.5">
+      <div
+        ref={parentRef}
+        className="scrollbar-hide flex h-full w-full flex-col gap-1.5 overflow-y-auto 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>
+          <UserProfile pubkey={params.content} />
         </div>
         <div>
-          <h3 className="mt-2 px-3 text-lg font-semibold text-zinc-300">Timeline</h3>
-          <UserFeed pubkey={params.content} />
+          <h3 className="mt-2 px-3 text-lg font-semibold text-zinc-300">
+            Latest activities
+          </h3>
+          <div
+            className="flex h-full w-full flex-col justify-between gap-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>
         </div>
       </div>
     </div>

src/shared/notes/kinds/repost.tsx

@@ -37,16 +37,16 @@ export function Repost({ event }: { event: LumeEvent }) {
         <div className="flex flex-col">
           <div className="isolate flex flex-col -space-y-4 overflow-hidden">
             <RepostUser pubkey={event.pubkey} />
-            <User pubkey={data.pubkey} time={event.created_at} isRepost={true} />
+            <User pubkey={data.pubkey} time={data.created_at} isRepost={true} />
           </div>
           <div className="relative z-20 flex items-start gap-3">
             <div className="w-11 shrink-0" />
             <div className="flex-1">
               <NoteContent content={data.content} />
-              <NoteActions id={event.event_id} pubkey={event.pubkey} />
+              <NoteActions id={repostID} pubkey={data.pubkey} />
             </div>
           </div>
-          <NoteMetadata id={event.event_id} />
+          <NoteMetadata id={repostID} />
         </div>
       </div>
     </div>

src/shared/notes/kinds/sub.tsx

@@ -8,7 +8,7 @@ export function SubNote({ id }: { id: string }) {
 
   if (status === 'loading') {
     return (
-      <div className="relative overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
+      <div className="relative mb-5 overflow-hidden rounded-xl bg-zinc-900 pt-3">
         <NoteSkeleton />
       </div>
     );
@@ -16,7 +16,7 @@ export function SubNote({ id }: { id: string }) {
 
   if (status === 'error') {
     return (
-      <div className="flex items-center justify-center overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
+      <div className="mb-5 flex overflow-hidden rounded-xl bg-zinc-800 px-3 py-3">
         <p className="text-zinc-400">Failed to fetch</p>
       </div>
     );

src/shared/notes/skeleton.tsx

@@ -2,16 +2,16 @@ export function NoteSkeleton() {
   return (
     <div className="flex h-min flex-col pb-3">
       <div className="flex items-start gap-3">
-        <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />
+        <div className="relative h-11 w-11 shrink overflow-hidden rounded-lg bg-zinc-700" />
         <div className="flex flex-col gap-0.5">
-          <div className="h-4 w-20 rounded bg-zinc-700" />
+          <div className="h-3 w-20 rounded bg-zinc-700" />
         </div>
       </div>
       <div className="-mt-5 animate-pulse pl-[49px]">
         <div className="flex flex-col gap-1">
-          <div className="h-4 w-full rounded-sm bg-zinc-700" />
-          <div className="h-3 w-2/3 rounded-sm bg-zinc-700" />
-          <div className="h-3 w-1/2 rounded-sm bg-zinc-700" />
+          <div className="h-3 w-full rounded bg-zinc-700" />
+          <div className="h-3 w-2/3 rounded bg-zinc-700" />
+          <div className="h-3 w-1/2 rounded bg-zinc-700" />
         </div>
       </div>
     </div>

src/shared/userProfile.tsx

@@ -0,0 +1,115 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import { UserMetadata } from '@app/user/components/metadata';
+
+import { ZapIcon } from '@shared/icons';
+import { Image } from '@shared/image';
+
+import { DEFAULT_AVATAR } from '@stores/constants';
+
+import { useProfile } from '@utils/hooks/useProfile';
+import { useSocial } from '@utils/hooks/useSocial';
+import { displayNpub } from '@utils/shortenKey';
+
+export function UserProfile({ pubkey }: { pubkey: string }) {
+  const { user } = useProfile(pubkey);
+  const { status, userFollows, follow, unfollow } = useSocial();
+
+  const [followed, setFollowed] = useState(false);
+
+  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(pubkey)) {
+        setFollowed(true);
+      }
+    }
+  }, [status]);
+
+  return (
+    <div>
+      <Image
+        src={user?.picture || user?.image}
+        fallback={DEFAULT_AVATAR}
+        alt={pubkey}
+        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 || displayNpub(pubkey, 16)}
+          </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={pubkey} />
+        </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(pubkey)}
+              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(pubkey)}
+              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/${pubkey}`}
+            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>
+  );
+}

src/utils/hooks/useEvent.tsx

@@ -47,7 +47,7 @@ export function useEvent(id: string, fallback?: string) {
             }
             return event;
           } else {
-            return null;
+            throw new Error('Event not found');
           }
         }
       }

src/utils/hooks/useSocial.tsx

@@ -1,20 +1,18 @@
-import { NDKEvent, NDKFilter } from '@nostr-dev-kit/ndk';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 
 import { useNDK } from '@libs/ndk/provider';
 import { createNote } from '@libs/storage';
 
-import { dateToUnix, getHourAgo, nHoursAgo } from '@utils/date';
+import { nHoursAgo } from '@utils/date';
 import { useAccount } from '@utils/hooks/useAccount';
 import { usePublish } from '@utils/hooks/usePublish';
 import { nip02ToArray } from '@utils/transform';
-import { LumeEvent } from '@utils/types';
 
 export function useSocial() {
   const queryClient = useQueryClient();
   const publish = usePublish();
 
-  const { ndk, fetcher, relayUrls } = useNDK();
+  const { fetcher, relayUrls } = useNDK();
   const { account } = useAccount();
   const { status, data: userFollows } = useQuery(
     ['userFollows', account.pubkey],