feat: add user screen

apps/desktop2/package.json

@@ -21,7 +21,6 @@
     "@tanstack/react-router": "^1.16.6",
     "i18next": "^23.10.0",
     "i18next-resources-to-backend": "^1.2.0",
-    "idb-keyval": "^6.2.1",
     "nostr-tools": "^2.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

apps/desktop2/src/routes/editor/index.tsx

@@ -222,7 +222,7 @@ function Screen() {
         <div className="flex h-full min-h-0 w-full">
           <div className="flex h-full w-full flex-1 flex-col gap-2 px-2 pb-2">
             {reply_to && !quote ? (
-              <div className="flex flex-col gap-2 rounded-xl bg-white p-5 shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5">
+              <div className="flex flex-col rounded-xl bg-white p-5 shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5">
                 <h3 className="font-medium">Reply to:</h3>
                 <MentionNote eventId={reply_to} />
               </div>

apps/desktop2/src/routes/users/$pubkey.lazy.tsx

@@ -1,11 +1,46 @@
 import { createLazyFileRoute } from "@tanstack/react-router";
+import { WindowVirtualizer } from "virtua";
+import { User } from "@lume/ui";
+import { EventList } from "./-components/eventList";
 
 export const Route = createLazyFileRoute("/users/$pubkey")({
-  component: User,
+  component: Screen,
 });
 
-function User() {
+function Screen() {
   const { pubkey } = Route.useParams();
 
-  return <div>{pubkey}</div>;
+  return (
+    <WindowVirtualizer>
+      <div className="flex h-screen w-screen flex-col bg-gradient-to-tr from-neutral-200 to-neutral-100 dark:from-neutral-950 dark:to-neutral-900">
+        <div data-tauri-drag-region className="h-11 w-full shrink-0" />
+        <div className="flex h-full min-h-0 w-full">
+          <div className="h-full w-full flex-1 px-2 pb-2">
+            <div className="h-full w-full overflow-hidden overflow-y-auto rounded-xl bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5">
+              <User.Provider pubkey={pubkey}>
+                <User.Root>
+                  <User.Cover className="h-44 w-full object-cover" />
+                  <div className="relative -mt-8 flex flex-col gap-4 px-5">
+                    <User.Avatar className="size-14 rounded-full" />
+                    <div className="inline-flex items-start justify-between">
+                      <div>
+                        <User.Name className="font-semibold leading-tight" />
+                        <User.NIP05 className="text-sm leading-tight text-neutral-600 dark:text-neutral-400" />
+                      </div>
+                      <User.Button className="h-9 w-24 rounded-full bg-black text-sm font-medium text-white hover:bg-neutral-900 dark:bg-neutral-900" />
+                    </div>
+                    <User.About />
+                  </div>
+                </User.Root>
+              </User.Provider>
+              <div className="mt-4 px-5">
+                <h3 className="mb-4 text-lg font-semibold">Notes</h3>
+                <EventList id={pubkey} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </WindowVirtualizer>
+  );
 }

apps/desktop2/src/routes/users/-components/eventList.tsx

@@ -0,0 +1,71 @@
+import { RepostNote } from "@/routes/$account/home/-components/repost";
+import { TextNote } from "@/routes/$account/home/-components/text";
+import { useArk } from "@lume/ark";
+import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
+import { Event, Kind } from "@lume/types";
+import { EmptyFeed } from "@lume/ui";
+import { FETCH_LIMIT } from "@lume/utils";
+import { useInfiniteQuery } from "@tanstack/react-query";
+
+export function EventList({ id }: { id: string }) {
+  const ark = useArk();
+  const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
+    useInfiniteQuery({
+      queryKey: ["events", id],
+      initialPageParam: 0,
+      queryFn: async ({ pageParam }: { pageParam: number }) => {
+        const events = await ark.get_events_from(id, FETCH_LIMIT, pageParam);
+        return events;
+      },
+      getNextPageParam: (lastPage) => {
+        const lastEvent = lastPage?.at(-1);
+        if (!lastEvent) return;
+        return lastEvent.created_at - 1;
+      },
+      select: (data) => data?.pages.flatMap((page) => page),
+      refetchOnWindowFocus: false,
+    });
+
+  const renderItem = (event: Event) => {
+    if (!event) return;
+    switch (event.kind) {
+      case Kind.Repost:
+        return <RepostNote key={event.id} event={event} />;
+      default:
+        return <TextNote key={event.id} event={event} />;
+    }
+  };
+
+  return (
+    <div>
+      {isLoading ? (
+        <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
+          <LoaderIcon className="size-5 animate-spin" />
+        </div>
+      ) : !data.length ? (
+        <EmptyFeed />
+      ) : (
+        data.map((item) => renderItem(item))
+      )}
+      <div className="flex h-20 items-center justify-center">
+        {hasNextPage ? (
+          <button
+            type="button"
+            onClick={() => fetchNextPage()}
+            disabled={!hasNextPage || isFetchingNextPage}
+            className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
+          >
+            {isFetchingNextPage ? (
+              <LoaderIcon className="size-5 animate-spin" />
+            ) : (
+              <>
+                <ArrowRightCircleIcon className="size-5" />
+                Load more
+              </>
+            )}
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+}