wip: update design

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

@@ -63,13 +63,13 @@ function Home() {
               {data.map((item) => renderItem(item))}
             </Virtualizer>
           )}
-          <div className="flex h-16 items-center justify-center">
+          <div className="flex h-20 items-center justify-center">
             {hasNextPage ? (
               <button
                 type="button"
                 onClick={() => fetchNextPage()}
                 disabled={!hasNextPage || isFetchingNextPage}
-                className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-neutral-100 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
+                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" />

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

@@ -1,4 +1,6 @@
+import { ReplyList, ThreadNote } from "@lume/ui";
 import { createLazyFileRoute } from "@tanstack/react-router";
+import { WindowVirtualizer } from "virtua";
 
 export const Route = createLazyFileRoute("/events/$eventId")({
   component: Event,
@@ -7,5 +9,15 @@ export const Route = createLazyFileRoute("/events/$eventId")({
 function Event() {
   const { eventId } = Route.useParams();
 
-  return <div>{eventId}</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} />
+        </div>
+      </WindowVirtualizer>
+    </div>
+  );
 }