wip

apps/desktop2/package.json

@@ -14,10 +14,13 @@
     "@lume/ui": "workspace:^",
     "@lume/utils": "workspace:^",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.0.3",
     "@tanstack/react-query": "^5.20.5",
+    "@tanstack/react-query-persist-client": "^5.22.2",
     "@tanstack/react-router": "^1.16.2",
     "i18next": "^23.8.2",
     "i18next-resources-to-backend": "^1.2.0",
+    "idb-keyval": "^6.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.0.5",

apps/desktop2/src/app.tsx

@@ -10,8 +10,35 @@ import i18n from "./locale";
 import { Toaster } from "sonner";
 import { locale, platform } from "@tauri-apps/plugin-os";
 import { routeTree } from "./router.gen"; // auto generated file
+import { get, set, del } from "idb-keyval";
+import {
+  PersistedClient,
+  Persister,
+} from "@tanstack/react-query-persist-client";
+import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
 
-const queryClient = new QueryClient();
+function createIDBPersister(idbValidKey: IDBValidKey = "reactQuery") {
+  return {
+    persistClient: async (client: PersistedClient) => {
+      await set(idbValidKey, client);
+    },
+    restoreClient: async () => {
+      return await get<PersistedClient>(idbValidKey);
+    },
+    removeClient: async () => {
+      await del(idbValidKey);
+    },
+  } as Persister;
+}
+
+const persister = createIDBPersister();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 60 * 60 * 24, // 24 hours
+    },
+  },
+});
 const platformName = await platform();
 const osLocale = (await locale()).slice(0, 2);
 
@@ -53,12 +80,15 @@ if (!rootElement.innerHTML) {
   const root = ReactDOM.createRoot(rootElement);
   root.render(
     <I18nextProvider i18n={i18n} defaultNS={"translation"}>
-      <QueryClientProvider client={queryClient}>
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{ persister }}
+      >
         <StrictMode>
           <Toaster position="top-center" richColors />
           <App />
         </StrictMode>
-      </QueryClientProvider>
+      </PersistQueryClientProvider>
     </I18nextProvider>,
   );
 }

apps/desktop2/src/components/accounts.tsx

@@ -0,0 +1,38 @@
+import { useArk } from "@lume/ark";
+import { User } from "@lume/ui";
+
+export function Accounts() {
+  const ark = useArk();
+
+  return (
+    <div data-tauri-drag-region className="flex items-center gap-4">
+      {ark.accounts.map((account) =>
+        account.npub === ark.account.npub ? (
+          <Active pubkey={account.npub} />
+        ) : (
+          <Inactive pubkey={ark.account.npub} />
+        ),
+      )}
+    </div>
+  );
+}
+
+function Inactive({ pubkey }: { pubkey: string }) {
+  return (
+    <User.Provider pubkey={pubkey}>
+      <User.Root className="rounded-full ring-offset-2 ring-offset-neutral-200 hover:ring-1 hover:ring-blue-500 dark:ring-offset-neutral-950">
+        <User.Avatar className="aspect-square h-auto w-7 rounded-full object-cover" />
+      </User.Root>
+    </User.Provider>
+  );
+}
+
+function Active({ pubkey }: { pubkey: string }) {
+  return (
+    <User.Provider pubkey={pubkey}>
+      <User.Root className="rounded-full ring-1 ring-teal-500 ring-offset-2 ring-offset-neutral-200 dark:ring-offset-neutral-950">
+        <User.Avatar className="aspect-square h-auto w-7 rounded-full object-cover" />
+      </User.Root>
+    </User.Provider>
+  );
+}

apps/desktop2/src/routes/app.tsx

@@ -9,7 +9,7 @@ import {
 import { Link } from "@tanstack/react-router";
 import { Outlet, createFileRoute } from "@tanstack/react-router";
 import { cn } from "@lume/utils";
-import { ActiveAccount } from "@lume/ui";
+import { Accounts } from "@/components/accounts";
 
 export const Route = createFileRoute("/app")({
   component: App,
@@ -27,65 +27,8 @@ function App() {
           context.platform === "macos" ? "pl-24" : "pl-4",
         )}
       >
-        <div
-          data-tauri-drag-region
-          className="flex h-full flex-1 items-center gap-2"
-        >
-          <Link to="/app/home">
-            {({ isActive }) => (
-              <div
-                className={cn(
-                  "inline-flex h-9 w-max items-center justify-center gap-2 rounded-lg px-3 hover:bg-black/10 dark:hover:bg-white/10",
-                  isActive ? "bg-white shadow dark:bg-neutral-950" : "",
-                )}
-              >
-                {isActive ? (
-                  <HomeFilledIcon className="size-5" />
-                ) : (
-                  <HomeIcon className="size-5" />
-                )}
-                <span className="text-sm font-medium">Home</span>
-              </div>
-            )}
-          </Link>
-          <Link to="/app/space">
-            {({ isActive }) => (
-              <div
-                className={cn(
-                  "inline-flex h-9 w-max items-center justify-center gap-2 rounded-lg px-3 hover:bg-black/10 dark:hover:bg-white/10",
-                  isActive ? "bg-white shadow dark:bg-neutral-950" : "",
-                )}
-              >
-                {isActive ? (
-                  <SpaceFilledIcon className="size-5" />
-                ) : (
-                  <SpaceIcon className="size-5" />
-                )}
-                <span className="text-sm font-medium">Space</span>
-              </div>
-            )}
-          </Link>
-          <Link to="/app/activity">
-            {({ isActive }) => (
-              <div
-                className={cn(
-                  "inline-flex h-9 w-max items-center justify-center gap-2 rounded-lg px-3 hover:bg-black/10 dark:hover:bg-white/10",
-                  isActive ? "bg-white shadow dark:bg-neutral-950" : "",
-                )}
-              >
-                {isActive ? (
-                  <BellFilledIcon className="size-5" />
-                ) : (
-                  <BellIcon className="size-5" />
-                )}
-                <span className="text-sm font-medium">Activity</span>
-              </div>
-            )}
-          </Link>
-        </div>
-        <div data-tauri-drag-region className="flex items-center gap-2">
-          <ActiveAccount />
-        </div>
+        <Navigation />
+        <Accounts />
       </div>
       <div className="flex h-full min-h-0 w-full">
         <div className="h-full w-full flex-1 px-2 pb-2">
@@ -95,3 +38,64 @@ function App() {
     </div>
   );
 }
+
+function Navigation() {
+  return (
+    <div
+      data-tauri-drag-region
+      className="flex h-full flex-1 items-center gap-2"
+    >
+      <Link to="/app/home">
+        {({ isActive }) => (
+          <div
+            className={cn(
+              "inline-flex h-9 w-max items-center justify-center gap-2 rounded-lg px-3 hover:bg-black/10 dark:hover:bg-white/10",
+              isActive ? "bg-white shadow dark:bg-neutral-950" : "",
+            )}
+          >
+            {isActive ? (
+              <HomeFilledIcon className="size-5" />
+            ) : (
+              <HomeIcon className="size-5" />
+            )}
+            <span className="text-sm font-medium">Home</span>
+          </div>
+        )}
+      </Link>
+      <Link to="/app/space">
+        {({ isActive }) => (
+          <div
+            className={cn(
+              "inline-flex h-9 w-max items-center justify-center gap-2 rounded-lg px-3 hover:bg-black/10 dark:hover:bg-white/10",
+              isActive ? "bg-white shadow dark:bg-neutral-950" : "",
+            )}
+          >
+            {isActive ? (
+              <SpaceFilledIcon className="size-5" />
+            ) : (
+              <SpaceIcon className="size-5" />
+            )}
+            <span className="text-sm font-medium">Space</span>
+          </div>
+        )}
+      </Link>
+      <Link to="/app/activity">
+        {({ isActive }) => (
+          <div
+            className={cn(
+              "inline-flex h-9 w-max items-center justify-center gap-2 rounded-lg px-3 hover:bg-black/10 dark:hover:bg-white/10",
+              isActive ? "bg-white shadow dark:bg-neutral-950" : "",
+            )}
+          >
+            {isActive ? (
+              <BellFilledIcon className="size-5" />
+            ) : (
+              <BellIcon className="size-5" />
+            )}
+            <span className="text-sm font-medium">Activity</span>
+          </div>
+        )}
+      </Link>
+    </div>
+  );
+}

apps/desktop2/src/routes/app/home.lazy.tsx

@@ -1,94 +0,0 @@
-import { useArk } from "@lume/ark";
-import { ArrowRightCircleIcon, LoaderIcon, SearchIcon } from "@lume/icons";
-import { Event, Kind } from "@lume/types";
-import { EmptyFeed, RepostNote, TextNote } from "@lume/ui";
-import { FETCH_LIMIT } from "@lume/utils";
-import { useInfiniteQuery } from "@tanstack/react-query";
-import { createLazyFileRoute } from "@tanstack/react-router";
-import { Virtualizer } from "virtua";
-
-export const Route = createLazyFileRoute("/app/home")({
-  component: Home,
-});
-
-function Home() {
-  const ark = useArk();
-  const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
-    useInfiniteQuery({
-      queryKey: ["local_timeline"],
-      initialPageParam: 0,
-      queryFn: async ({ pageParam }: { pageParam: number }) => {
-        const events = await ark.get_events(
-          "local",
-          FETCH_LIMIT,
-          pageParam,
-          true,
-        );
-        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) => {
-    switch (event.kind) {
-      case Kind.Repost:
-        return <RepostNote key={event.id} event={event} />;
-      default:
-        return <TextNote key={event.id} event={event} />;
-    }
-  };
-
-  return (
-    <div className="h-full w-full overflow-hidden 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">
-      <div className="h-full w-full overflow-y-auto pt-10">
-        <div className="mx-auto w-full max-w-xl">
-          {isLoading ? (
-            <div className="flex h-20 w-full items-center justify-center">
-              <LoaderIcon className="size-5 animate-spin" />
-            </div>
-          ) : !data.length ? (
-            <div className="flex flex-col gap-3">
-              <EmptyFeed />
-              <a
-                href="/suggest"
-                className="inline-flex h-9 w-full items-center justify-center gap-2 rounded-lg bg-blue-500 text-sm font-medium text-white hover:bg-blue-600"
-              >
-                <SearchIcon className="size-5" />
-                Find accounts to follow
-              </a>
-            </div>
-          ) : (
-            <Virtualizer overscan={3}>
-              {data.map((item) => renderItem(item))}
-            </Virtualizer>
-          )}
-          <div className="flex h-20 items-center justify-center">
-            {hasNextPage ? (
-              <button
-                type="button"
-                onClick={() => fetchNextPage()}
-                disabled={!hasNextPage || isFetchingNextPage}
-                className="inline-flex h-11 w-max 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>
-      </div>
-    </div>
-  );
-}

apps/desktop2/src/routes/app/home.tsx

@@ -0,0 +1,51 @@
+import { cn } from "@lume/utils";
+import { Link } from "@tanstack/react-router";
+import { Outlet, createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/app/home")({
+  component: Home,
+});
+
+function Home() {
+  return (
+    <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">
+      <div className="mx-auto flex w-full max-w-xl flex-col">
+        <div className="mx-auto flex h-28 w-1/2 items-center">
+          <div className="flex h-11 w-full flex-1 items-center rounded-full bg-neutral-100 dark:bg-neutral-900">
+            <Link to="/app/home/local" className="h-11 flex-1 p-1">
+              {({ isActive }) => (
+                <div
+                  className={cn(
+                    "inline-flex h-full w-full items-center justify-center rounded-full text-sm font-medium",
+                    isActive
+                      ? "bg-white shadow shadow-neutral-500/20 dark:bg-black dark:shadow-none dark:ring-1 dark:ring-neutral-800"
+                      : "",
+                  )}
+                >
+                  Local
+                </div>
+              )}
+            </Link>
+            <Link to="/app/home/global" className="h-11 flex-1 p-1">
+              {({ isActive }) => (
+                <div
+                  className={cn(
+                    "inline-flex h-full w-full items-center justify-center rounded-full text-sm font-medium",
+                    isActive
+                      ? "bg-white shadow shadow-neutral-500/20 dark:bg-black dark:shadow-none dark:ring-1 dark:ring-neutral-800"
+                      : "",
+                  )}
+                >
+                  Global
+                </div>
+              )}
+            </Link>
+          </div>
+        </div>
+        <div className="flex-1">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/desktop2/src/routes/app/home/-components/repost.tsx

@@ -0,0 +1,114 @@
+import { RepostIcon } from "@lume/icons";
+import { Event } from "@lume/types";
+import { cn } from "@lume/utils";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { useArk } from "@lume/ark";
+import { Note, User } from "@lume/ui";
+
+export function RepostNote({
+  event,
+  className,
+}: {
+  event: Event;
+  className?: string;
+}) {
+  const ark = useArk();
+
+  const { t } = useTranslation();
+  const {
+    isLoading,
+    isError,
+    data: repostEvent,
+  } = useQuery({
+    queryKey: ["repost", event.id],
+    queryFn: async () => {
+      try {
+        if (event.content.length > 50) {
+          const embed: Event = JSON.parse(event.content);
+          return embed;
+        }
+        const id = event.tags.find((el) => el[0] === "e")[1];
+        return await ark.get_event(id);
+      } catch {
+        throw new Error("Failed to get repost event");
+      }
+    },
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+  });
+
+  if (isLoading) {
+    return <div className="w-full px-3 pb-3">Loading...</div>;
+  }
+
+  if (isError || !repostEvent) {
+    return (
+      <Note.Root className={className}>
+        <User.Provider pubkey={event.pubkey}>
+          <User.Root className="flex h-14 gap-2 px-3">
+            <div className="inline-flex w-10 shrink-0 items-center justify-center">
+              <RepostIcon className="h-5 w-5 text-blue-500" />
+            </div>
+            <div className="inline-flex items-center gap-2">
+              <User.Avatar className="size-6 shrink-0 rounded object-cover" />
+              <div className="inline-flex items-baseline gap-1">
+                <User.Name className="font-medium text-neutral-900 dark:text-neutral-100" />
+                <span className="text-blue-500">{t("note.reposted")}</span>
+              </div>
+            </div>
+          </User.Root>
+        </User.Provider>
+        <div className="mb-3 select-text px-3">
+          <div className="flex flex-col items-start justify-start rounded-lg bg-red-100 px-3 py-3 dark:bg-red-900">
+            <p className="text-red-500">Failed to get event</p>
+          </div>
+        </div>
+      </Note.Root>
+    );
+  }
+
+  return (
+    <Note.Root
+      className={cn(
+        "mb-3 flex flex-col gap-2 border-b border-neutral-100 pb-3 dark:border-neutral-900",
+        className,
+      )}
+    >
+      <User.Provider pubkey={event.pubkey}>
+        <User.Root className="flex gap-3">
+          <div className="inline-flex w-10 shrink-0 items-center justify-center">
+            <RepostIcon className="h-5 w-5 text-blue-500" />
+          </div>
+          <div className="inline-flex items-center gap-2">
+            <User.Avatar className="size-6 shrink-0 rounded-full object-cover" />
+            <div className="inline-flex items-baseline gap-1">
+              <User.Name className="font-medium text-neutral-900 dark:text-neutral-100" />
+              <span className="text-blue-500">{t("note.reposted")}</span>
+            </div>
+          </div>
+        </User.Root>
+      </User.Provider>
+      <Note.Provider event={repostEvent}>
+        <div className="flex flex-col gap-2">
+          <Note.User />
+          <div className="flex gap-3">
+            <div className="size-10 shrink-0" />
+            <div className="min-w-0 flex-1">
+              <Note.Content />
+              <div className="mt-5 flex items-center justify-between">
+                <Note.Reaction />
+                <div className="inline-flex items-center gap-4">
+                  <Note.Reply />
+                  <Note.Repost />
+                  <Note.Zap />
+                  <Note.Menu />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Note.Provider>
+    </Note.Root>
+  );
+}

apps/desktop2/src/routes/app/home/-components/text.tsx

@@ -0,0 +1,40 @@
+import { Event } from "@lume/types";
+import { Note } from "@lume/ui";
+import { cn } from "@lume/utils";
+
+export function TextNote({
+  event,
+  className,
+}: {
+  event: Event;
+  className?: string;
+}) {
+  return (
+    <Note.Provider event={event}>
+      <Note.Root
+        className={cn(
+          "mb-3 flex flex-col gap-2 border-b border-neutral-100 pb-3 dark:border-neutral-900",
+          className,
+        )}
+      >
+        <Note.User />
+        <div className="flex gap-3">
+          <div className="size-11 shrink-0" />
+          <div className="min-w-0 flex-1">
+            <Note.Thread className="mb-2" />
+            <Note.Content />
+            <div className="mt-5 flex items-center justify-between">
+              <Note.Reaction />
+              <div className="inline-flex items-center gap-4">
+                <Note.Reply />
+                <Note.Repost />
+                <Note.Zap />
+                <Note.Menu />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Note.Root>
+    </Note.Provider>
+  );
+}

apps/desktop2/src/routes/app/home/global.lazy.tsx

@@ -0,0 +1,92 @@
+import { useArk } from "@lume/ark";
+import { ArrowRightCircleIcon, LoaderIcon, SearchIcon } 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";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { Virtualizer } from "virtua";
+import { TextNote } from "./-components/text";
+import { RepostNote } from "./-components/repost";
+
+export const Route = createLazyFileRoute("/app/home/global")({
+  component: GlobalTimeline,
+});
+
+function GlobalTimeline() {
+  const ark = useArk();
+  const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
+    useInfiniteQuery({
+      queryKey: ["events", "global"],
+      initialPageParam: 0,
+      queryFn: async ({ pageParam }: { pageParam: number }) => {
+        const events = await ark.get_events(
+          "global",
+          FETCH_LIMIT,
+          pageParam,
+          true,
+        );
+        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) => {
+    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 items-center justify-center">
+          <LoaderIcon className="size-5 animate-spin" />
+        </div>
+      ) : !data.length ? (
+        <div className="flex flex-col gap-3">
+          <EmptyFeed />
+          <a
+            href="/suggest"
+            className="inline-flex h-9 w-full items-center justify-center gap-2 rounded-lg bg-blue-500 text-sm font-medium text-white hover:bg-blue-600"
+          >
+            <SearchIcon className="size-5" />
+            Find accounts to follow
+          </a>
+        </div>
+      ) : (
+        <Virtualizer overscan={3}>
+          {data.map((item) => renderItem(item))}
+        </Virtualizer>
+      )}
+      <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>
+  );
+}

apps/desktop2/src/routes/app/home/local.lazy.tsx

@@ -0,0 +1,92 @@
+import { useArk } from "@lume/ark";
+import { ArrowRightCircleIcon, LoaderIcon, SearchIcon } 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";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { Virtualizer } from "virtua";
+import { TextNote } from "./-components/text";
+import { RepostNote } from "./-components/repost";
+
+export const Route = createLazyFileRoute("/app/home/local")({
+  component: LocalTimeline,
+});
+
+function LocalTimeline() {
+  const ark = useArk();
+  const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
+    useInfiniteQuery({
+      queryKey: ["events", "local"],
+      initialPageParam: 0,
+      queryFn: async ({ pageParam }: { pageParam: number }) => {
+        const events = await ark.get_events(
+          "local",
+          FETCH_LIMIT,
+          pageParam,
+          true,
+        );
+        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) => {
+    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 items-center justify-center">
+          <LoaderIcon className="size-5 animate-spin" />
+        </div>
+      ) : !data.length ? (
+        <div className="flex flex-col gap-3">
+          <EmptyFeed />
+          <a
+            href="/suggest"
+            className="inline-flex h-9 w-full items-center justify-center gap-2 rounded-lg bg-blue-500 text-sm font-medium text-white hover:bg-blue-600"
+          >
+            <SearchIcon className="size-5" />
+            Find accounts to follow
+          </a>
+        </div>
+      ) : (
+        <Virtualizer overscan={3}>
+          {data.map((item) => renderItem(item))}
+        </Virtualizer>
+      )}
+      <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>
+  );
+}

apps/desktop2/src/routes/events/$eventId.lazy.tsx

@@ -1,6 +1,9 @@
-import { ReplyList, ThreadNote } from "@lume/ui";
+import { useEvent } from "@lume/ark";
+import { LoaderIcon } from "@lume/icons";
+import { Note, User } from "@lume/ui";
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { WindowVirtualizer } from "virtua";
+import { ReplyList } from "./-components/replyList";
 
 export const Route = createLazyFileRoute("/events/$eventId")({
   component: Event,
@@ -8,16 +11,63 @@ export const Route = createLazyFileRoute("/events/$eventId")({
 
 function Event() {
   const { eventId } = Route.useParams();
+  const { isLoading, isError, data } = useEvent(eventId);
+
+  if (isLoading) {
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <LoaderIcon className="size-5 animate-spin" />
+      </div>
+    );
+  }
+
+  if (isError) {
+    <div className="flex h-full w-full items-center justify-center">
+      <p>Not found.</p>
+    </div>;
+  }
 
   return (
-    <div className="relative h-screen w-screen overflow-y-auto overflow-x-hidden">
-      <div data-tauri-drag-region className="h-11 w-full" />
-      <WindowVirtualizer>
-        <div className="px-6">
-          <ThreadNote eventId={eventId} />
-          <ReplyList eventId={eventId} />
+    <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 px-3 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">
+              <Note.Provider event={data}>
+                <Note.Root className="flex flex-col">
+                  <div className="mb-2 flex items-center justify-between pt-4">
+                    <User.Provider pubkey={data.pubkey}>
+                      <User.Root className="flex flex-1 items-center gap-3">
+                        <User.Avatar className="size-11 shrink-0 rounded-full object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50" />
+                        <div className="flex flex-1 flex-col">
+                          <User.Name className="font-semibold text-neutral-900 dark:text-neutral-100" />
+                          <div className="inline-flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400">
+                            <User.Time time={data.created_at} />
+                            <span>·</span>
+                            <User.NIP05 />
+                          </div>
+                        </div>
+                      </User.Root>
+                    </User.Provider>
+                    <Note.Menu />
+                  </div>
+                  <Note.Thread className="mb-2" />
+                  <Note.Content className="min-w-0" />
+                  <div className="flex h-14 items-center justify-between">
+                    <Note.Reaction />
+                    <div className="inline-flex items-center gap-4">
+                      <Note.Repost />
+                      <Note.Zap />
+                    </div>
+                  </div>
+                </Note.Root>
+              </Note.Provider>
+              {data ? <ReplyList eventId={eventId} /> : null}
+            </div>
+          </div>
         </div>
-      </WindowVirtualizer>
-    </div>
+      </div>
+    </WindowVirtualizer>
   );
 }

apps/desktop2/src/routes/events/-components/reply.tsx

@@ -0,0 +1,65 @@
+import { NavArrowDownIcon } from "@lume/icons";
+import { EventWithReplies } from "@lume/types";
+import { cn } from "@lume/utils";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Note } from "@lume/ui";
+import { SubReply } from "./subReply";
+
+export function Reply({ event }: { event: EventWithReplies }) {
+  const [t] = useTranslation();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Collapsible.Root open={open} onOpenChange={setOpen}>
+      <Note.Provider event={event}>
+        <Note.Root className="pt-2">
+          <div className="flex h-14 items-center justify-between">
+            <Note.User className="flex-1 pr-2" />
+            <Note.Menu />
+          </div>
+          <Note.Content />
+          <div className="flex h-14 items-center justify-between">
+            {event.replies?.length > 0 ? (
+              <Collapsible.Trigger asChild>
+                <div className="inline-flex h-14 items-center gap-1 text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                  <NavArrowDownIcon
+                    className={cn("size-5", open ? "rotate-180 transform" : "")}
+                  />
+                  {`${event.replies?.length} ${
+                    event.replies?.length === 1
+                      ? t("note.reply.single")
+                      : t("note.reply.plural")
+                  }`}
+                </div>
+              </Collapsible.Trigger>
+            ) : (
+              <div />
+            )}
+            <div className="inline-flex items-center gap-4">
+              <Note.Reply />
+              <Note.Repost />
+              <Note.Zap />
+            </div>
+          </div>
+          <div
+            className={cn(
+              open
+                ? "border-t border-neutral-100 pb-3 dark:border-neutral-900"
+                : "",
+            )}
+          >
+            {event.replies?.length > 0 ? (
+              <Collapsible.Content className="divide-y divide-neutral-100 pl-6 dark:divide-neutral-900">
+                {event.replies?.map((childEvent) => (
+                  <SubReply key={childEvent.id} event={childEvent} />
+                ))}
+              </Collapsible.Content>
+            ) : null}
+          </div>
+        </Note.Root>
+      </Note.Provider>
+    </Collapsible.Root>
+  );
+}

apps/desktop2/src/routes/events/-components/replyList.tsx

@@ -0,0 +1,53 @@
+import { useArk } from "@lume/ark";
+import { LoaderIcon } from "@lume/icons";
+import { cn } from "@lume/utils";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { EventWithReplies } from "@lume/types";
+
+export function ReplyList({
+  eventId,
+  className,
+}: {
+  eventId: string;
+  className?: string;
+}) {
+  const ark = useArk();
+
+  const [t] = useTranslation();
+  const [data, setData] = useState<null | EventWithReplies[]>(null);
+
+  useEffect(() => {
+    async function getReplies() {
+      const events = await ark.get_event_thread(eventId);
+      setData(events);
+    }
+    getReplies();
+  }, [eventId]);
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col divide-y divide-neutral-100 dark:divide-neutral-900",
+        className,
+      )}
+    >
+      {!data ? (
+        <div className="mt-4 flex h-16 items-center justify-center p-3">
+          <LoaderIcon className="h-5 w-5 animate-spin" />
+        </div>
+      ) : data.length === 0 ? (
+        <div className="mt-4 flex w-full items-center justify-center">
+          <div className="flex flex-col items-center justify-center gap-2 py-6">
+            <h3 className="text-3xl">👋</h3>
+            <p className="leading-none text-neutral-600 dark:text-neutral-400">
+              {t("note.reply.empty")}
+            </p>
+          </div>
+        </div>
+      ) : (
+        data.map((event) => <Reply key={event.id} event={event} />)
+      )}
+    </div>
+  );
+}

apps/desktop2/src/routes/events/-components/subReply.tsx

@@ -0,0 +1,20 @@
+import { Event } from "@lume/types";
+import { Note } from "@lume/ui";
+
+export function SubReply({ event }: { event: Event; rootEventId?: string }) {
+  return (
+    <Note.Provider event={event}>
+      <Note.Root className="py-2">
+        <div className="flex h-14 items-center justify-between">
+          <Note.User className="flex-1 pr-2" />
+          <Note.Menu />
+        </div>
+        <Note.Content />
+        <div className="mt-2 flex items-center justify-end gap-4">
+          <Note.Repost />
+          <Note.Zap />
+        </div>
+      </Note.Root>
+    </Note.Provider>
+  );
+}

apps/desktop2/src/routes/index.tsx

@@ -23,7 +23,7 @@ export const Route = createFileRoute("/")({
         const loadAccount = await ark.load_selected_account(accounts[0].npub);
         if (loadAccount) {
           throw redirect({
-            to: "/app/home",
+            to: "/app/home/local",
             search: {
               redirect: location.href,
             },

apps/desktop2/tsconfig.json

@@ -1,8 +1,12 @@
 {
-	"extends": "@lume/tsconfig/base.json",
-	"compilerOptions": {
-		"outDir": "dist"
-	},
-	"include": ["src"],
-	"exclude": ["node_modules", "dist"]
+  "extends": "@lume/tsconfig/base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
 }