feat: improve

2024-03-02 15:21:28 +07:00
parent cfcb9bc6ed
commit ca0e041731
62 changed files with 1353 additions and 1631 deletions
--- a/apps/desktop2/src/components/accounts.tsx
+++ b/apps/desktop2/src/components/accounts.tsx
@@ -1,9 +1,12 @@
 import { useArk } from "@lume/ark";
-import { PlusIcon } from "@lume/icons";
 import { Account } from "@lume/types";
 import { User } from "@lume/ui";
-import { Link, useNavigate, useParams } from "@tanstack/react-router";
+import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { Link } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";

 export function Accounts() {
  const ark = useArk();
@@ -22,12 +25,6 @@ export function Accounts() {

  return (
    <div data-tauri-drag-region className="flex items-center gap-4">
-      <Link
-        to="/landing"
-        className="inline-flex size-7 items-center justify-center rounded-full bg-neutral-300 ring-offset-2 ring-offset-neutral-200 hover:ring-1 hover:ring-blue-500 dark:bg-neutral-700 dark:ring-offset-neutral-950"
-      >
-        <PlusIcon className="size-4" />
-      </Link>
      {accounts
        ? accounts.map((account) =>
            // @ts-ignore, useless
@@ -48,15 +45,14 @@ function Inactive({ pubkey }: { pubkey: string }) {

  const changeAccount = async (npub: string) => {
    const select = await ark.load_selected_account(npub);
-    if (select)
-      navigate({ to: "/$account/home/local", params: { account: npub } });
+    if (select) navigate({ to: "/$account/home", params: { account: npub } });
  };

  return (
    <button type="button" onClick={() => changeAccount(pubkey)}>
      <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 className="rounded-full">
+          <User.Avatar className="aspect-square h-auto w-8 rounded-full object-cover" />
        </User.Root>
      </User.Provider>
    </button>
@@ -64,11 +60,99 @@ function Inactive({ pubkey }: { pubkey: string }) {
 }

 function Active({ pubkey }: { pubkey: string }) {
+  const [open, setOpen] = useState(true);
+  // @ts-ignore, magic !!!
+  const { guest } = useSearch({ strict: false });
+  const { t } = useTranslation();
+
+  if (guest) {
+    return (
+      <Popover.Root open={open} onOpenChange={setOpen}>
+        <Popover.Trigger asChild>
+          <button type="button">
+            <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>
+          </button>
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content
+            className="flex w-[280px] flex-col gap-4 rounded-xl bg-black p-5 text-neutral-100 focus:outline-none dark:bg-white dark:text-neutral-900 dark:shadow-none"
+            sideOffset={10}
+            side="bottom"
+          >
+            <div>
+              <h1 className="mb-1 font-semibold">You're using guest account</h1>
+              <p className="text-sm text-neutral-500 dark:text-neutral-600">
+                You can continue by claim and backup this account, or you can
+                import your own account key.
+              </p>
+            </div>
+            <div className="flex flex-col gap-2">
+              <Link
+                to="/backup"
+                className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-white text-sm font-medium leading-tight text-neutral-900 hover:bg-neutral-100"
+              >
+                Claim & Backup
+              </Link>
+              <Link
+                to="/login"
+                className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-neutral-900 text-sm font-medium leading-tight text-neutral-100 hover:bg-neutral-800"
+              >
+                {t("welcome.login")}
+              </Link>
+            </div>
+            <Popover.Arrow className="fill-black dark:fill-white" />
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    );
+  }
+
  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>
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <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>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          className="flex w-[220px] flex-col rounded-xl bg-black p-2 text-neutral-100 focus:outline-none dark:bg-white dark:text-neutral-900 dark:shadow-none"
+          sideOffset={10}
+          side="bottom"
+        >
+          <DropdownMenu.Item className="group relative flex h-9 select-none items-center rounded-md px-3 text-sm font-medium leading-none outline-none hover:bg-neutral-900 dark:hover:bg-neutral-100">
+            Add account
+            <div className="ml-auto pl-5 text-xs text-neutral-800 dark:text-neutral-200">
+              ⌘+Shift+N
+            </div>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item className="group relative flex h-9 select-none items-center rounded-md px-3 text-sm font-medium leading-none outline-none hover:bg-neutral-900 dark:hover:bg-neutral-100">
+            Profile
+            <div className="ml-auto pl-5 text-xs text-neutral-800 dark:text-neutral-200">
+              ⌘+Shift+P
+            </div>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item className="group relative flex h-9 select-none items-center rounded-md px-3 text-sm font-medium leading-none outline-none hover:bg-neutral-900 dark:hover:bg-neutral-100">
+            Settings
+            <div className="ml-auto pl-5 text-xs text-neutral-800 dark:text-neutral-200">
+              ⌘+Shift+S
+            </div>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item className="group relative flex h-9 select-none items-center rounded-md px-3 text-sm font-medium leading-none outline-none hover:bg-neutral-900 dark:hover:bg-neutral-100">
+            Logout
+            <div className="ml-auto pl-5 text-xs text-neutral-800 dark:text-neutral-200">
+              ⌘+Shift+L
+            </div>
+          </DropdownMenu.Item>
+          <DropdownMenu.Arrow className="fill-black dark:fill-white" />
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
  );
 }
--- a/apps/desktop2/src/components/suggest.tsx
+++ b/apps/desktop2/src/components/suggest.tsx
@@ -0,0 +1,56 @@
+import { LoaderIcon } from "@lume/icons";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { User } from "@lume/ui";
+
+export function Suggest() {
+  const { t } = useTranslation();
+  const { isLoading, isError, data } = useQuery({
+    queryKey: ["trending-users"],
+    queryFn: async ({ signal }: { signal: AbortSignal }) => {
+      const res = await fetch("https://api.nostr.band/v0/trending/profiles", {
+        signal,
+      });
+      if (!res.ok) {
+        throw new Error("Failed to fetch trending users from nostr.band API.");
+      }
+      return res.json();
+    },
+  });
+
+  return (
+    <div className="flex flex-col divide-y divide-neutral-100 dark:divide-neutral-900">
+      <div className="h-10 shrink-0 text-lg font-semibold">
+        Suggested Follows
+      </div>
+      {isLoading ? (
+        <div className="flex h-44 w-full items-center justify-center">
+          <LoaderIcon className="size-4 animate-spin" />
+        </div>
+      ) : isError ? (
+        <div className="flex h-44 w-full items-center justify-center">
+          {t("suggestion.error")}
+        </div>
+      ) : (
+        data?.profiles.map((item: { pubkey: string }) => (
+          <div key={item.pubkey} className="h-max w-full overflow-hidden py-5">
+            <User.Provider pubkey={item.pubkey}>
+              <User.Root>
+                <div className="flex h-full w-full flex-col gap-2">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2.5">
+                      <User.Avatar className="size-10 shrink-0 rounded-full" />
+                      <User.Name className="leadning-tight max-w-[15rem] truncate font-semibold" />
+                    </div>
+                    <User.Button className="inline-flex h-8 w-20 items-center justify-center rounded-lg bg-neutral-100 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800" />
+                  </div>
+                  <User.About className="mt-1 line-clamp-3 max-w-none select-text text-neutral-800 dark:text-neutral-400" />
+                </div>
+              </User.Root>
+            </User.Provider>
+          </div>
+        ))
+      )}
+    </div>
+  );
+}
--- a/apps/desktop2/src/routes/$account.tsx
+++ b/apps/desktop2/src/routes/$account.tsx
@@ -1,17 +1,19 @@
 import {
  BellFilledIcon,
  BellIcon,
-  EditIcon,
+  ComposeFilledIcon,
  HomeFilledIcon,
  HomeIcon,
+  HorizontalDotsIcon,
  SpaceFilledIcon,
  SpaceIcon,
 } from "@lume/icons";
-import { Link, useParams } from "@tanstack/react-router";
+import { Link } from "@tanstack/react-router";
 import { Outlet, createFileRoute } from "@tanstack/react-router";
 import { cn } from "@lume/utils";
 import { Accounts } from "@/components/accounts";
 import { useArk } from "@lume/ark";
+import { Box } from "@lume/ui";

 export const Route = createFileRoute("/$account")({
  component: App,
@@ -36,37 +38,37 @@ function App() {
          <button
            type="button"
            onClick={() => ark.open_editor()}
-            className="inline-flex h-7 w-max items-center justify-center gap-1 rounded-full bg-blue-500 px-2.5 text-sm font-medium text-white hover:bg-blue-600"
+            className="inline-flex h-8 w-max items-center justify-center gap-1 rounded-full bg-blue-500 px-3 text-sm font-medium text-white hover:bg-blue-600"
          >
-            <EditIcon className="size-4" />
-            New
+            <ComposeFilledIcon className="size-4" />
+            New post
          </button>
        </div>
      </div>
-      <div className="flex h-full min-h-0 w-full">
-        <div className="h-full w-full flex-1 px-2 pb-2">
-          <Outlet />
-        </div>
-      </div>
+      <Box>
+        <Outlet />
+      </Box>
    </div>
  );
 }

 function Navigation() {
  // @ts-ignore, useless
-  const { account } = useParams({ strict: false });
+  const { account } = Route.useParams();

  return (
    <div
      data-tauri-drag-region
      className="flex h-full flex-1 items-center gap-2"
    >
-      <Link to="/$account/home/local" params={{ account }}>
+      <Link to="/$account/home" params={{ account }}>
        {({ 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" : "",
+              "inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-3",
+              isActive
+                ? "bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-800 dark:hover:bg-neutral-700"
+                : "hover:bg-black/10 dark:hover:bg-white/10",
            )}
          >
            {isActive ? (
@@ -82,8 +84,10 @@ function Navigation() {
        {({ 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" : "",
+              "inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-3 hover:bg-black/10 dark:hover:bg-white/10",
+              isActive
+                ? "bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-800 dark:hover:bg-neutral-700"
+                : "hover:bg-black/10 dark:hover:bg-white/10",
            )}
          >
            {isActive ? (
@@ -99,8 +103,10 @@ function Navigation() {
        {({ 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" : "",
+              "inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-3 hover:bg-black/10 dark:hover:bg-white/10",
+              isActive
+                ? "bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-800 dark:hover:bg-neutral-700"
+                : "hover:bg-black/10 dark:hover:bg-white/10",
            )}
          >
            {isActive ? (
--- a/apps/desktop2/src/routes/$account/home.lazy.tsx
+++ b/apps/desktop2/src/routes/$account/home.lazy.tsx
@@ -0,0 +1,133 @@
+import { RepostNote } from "@/components/repost";
+import { Suggest } from "@/components/suggest";
+import { TextNote } from "@/components/text";
+import { useArk } from "@lume/ark";
+import {
+  LoaderIcon,
+  ArrowRightCircleIcon,
+  RefreshIcon,
+  InfoIcon,
+} 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";
+
+export const Route = createLazyFileRoute("/$account/home")({
+  component: Home,
+});
+
+function Home() {
+  const ark = useArk();
+  const currentDate = new Date().toLocaleString("default", {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+  });
+
+  const { account } = Route.useParams();
+  const {
+    data,
+    hasNextPage,
+    isLoading,
+    isRefetching,
+    isFetchingNextPage,
+    fetchNextPage,
+    refetch,
+  } = useInfiniteQuery({
+    queryKey: ["local_newsfeed", account],
+    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) => {
+    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 className="flex flex-col gap-3">
+      <div className="mx-auto flex h-12 w-full max-w-xl shrink-0 items-center justify-between border-b border-neutral-100 dark:border-neutral-900">
+        <h3 className="text-sm font-medium uppercase leading-tight text-neutral-600 dark:text-neutral-400">
+          {currentDate}
+        </h3>
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            onClick={() => refetch()}
+            className="text-neutral-700 hover:text-blue-500 dark:text-neutral-300"
+          >
+            <RefreshIcon className="size-4" />
+          </button>
+        </div>
+      </div>
+      <div className="mx-auto flex w-full max-w-xl flex-1 flex-col">
+        <div className="flex-1">
+          {isLoading || isRefetching ? (
+            <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
+              <LoaderIcon className="size-5 animate-spin" />
+            </div>
+          ) : !data.length ? (
+            <div className="flex flex-col gap-3">
+              <div className="flex items-center gap-2 rounded-xl bg-neutral-100 p-3 dark:bg-neutral-900">
+                <InfoIcon className="size-5" />
+                <p>
+                  Empty newsfeed. Or you can go to{" "}
+                  <a href="" className="text-blue-500 hover:text-blue-600">
+                    Discover
+                  </a>
+                </p>
+              </div>
+              <Suggest />
+            </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>
+      </div>
+    </div>
+  );
+}
--- a/apps/desktop2/src/routes/$account/home.tsx
+++ b/apps/desktop2/src/routes/$account/home.tsx
@@ -1,66 +0,0 @@
-import { cn } from "@lume/utils";
-import {
-  Outlet,
-  Link,
-  createFileRoute,
-  useParams,
-} from "@tanstack/react-router";
-
-export const Route = createFileRoute("/$account/home")({
-  component: Home,
-});
-
-function Home() {
-  // @ts-ignore, useless
-  const { account } = useParams({ strict: false });
-
-  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="/$account/home/local"
-              params={{ account }}
-              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="/$account/home/global"
-              params={{ account }}
-              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>
-  );
-}
--- a/apps/desktop2/src/routes/$account/home/global.lazy.tsx
+++ b/apps/desktop2/src/routes/$account/home/global.lazy.tsx
@@ -1,92 +0,0 @@
-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("/$account/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>
-  );
-}
--- a/apps/desktop2/src/routes/$account/home/local.lazy.tsx
+++ b/apps/desktop2/src/routes/$account/home/local.lazy.tsx
@@ -1,89 +0,0 @@
-import { useArk } from "@lume/ark";
-import { ArrowRightCircleIcon, ArrowRightIcon, 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";
-import { createLazyFileRoute } from "@tanstack/react-router";
-import { Virtualizer } from "virtua";
-import { TextNote } from "@/components/text";
-import { RepostNote } from "@/components/repost";
-
-export const Route = createLazyFileRoute("/$account/home/local")({
-  component: LocalTimeline,
-});
-
-function LocalTimeline() {
-  const ark = useArk();
-
-  const { account } = Route.useParams();
-  const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
-    useInfiniteQuery({
-      queryKey: ["local_newsfeed", account],
-      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) => {
-    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" />
-          <p>Loading...</p>
-        </div>
-      ) : !data.length ? (
-        <div className="flex flex-col gap-3">
-          <EmptyFeed />
-        </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>
-  );
-}
--- a/apps/desktop2/src/routes/auth/create/self.lazy.tsx
+++ b/apps/desktop2/src/routes/auth/create/self.lazy.tsx
@@ -26,7 +26,7 @@ function Create() {
    try {
      await ark.save_account(keys);
      navigate({
-        to: "/$account/home/local",
+        to: "/$account/home",
        params: { account: keys.npub },
        search: { onboarding: true },
        replace: true,
--- a/apps/desktop2/src/routes/auth/import.lazy.tsx
+++ b/apps/desktop2/src/routes/auth/import.lazy.tsx
@@ -32,7 +32,7 @@ function Import() {
        nsec: key,
      });
      navigate({
-        to: "/$account/home/local",
+        to: "/$account/home",
        params: { account: npub },
        search: { onboarding: true },
        replace: true,
--- a/apps/desktop2/src/routes/backup.lazy.tsx
+++ b/apps/desktop2/src/routes/backup.lazy.tsx
@@ -0,0 +1,20 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+
+export const Route = createLazyFileRoute("/backup")({
+  component: Screen,
+});
+
+function Screen() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="mx-auto flex w-full max-w-md flex-col gap-8">
+        <div className="flex flex-col items-center gap-1 text-center">
+          <h1 className="text-2xl font-semibold">{t("backup.title")}</h1>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/apps/desktop2/src/routes/events/$eventId.lazy.tsx
+++ b/apps/desktop2/src/routes/events/$eventId.lazy.tsx
@@ -31,7 +31,7 @@ function Event() {
  return (
    <WindowVirtualizer>
      <Container withDrag>
-        <Box>
+        <Box className="px-3 pt-3">
          <MainNote data={data} />
          {data ? <ReplyList eventId={eventId} /> : null}
        </Box>
--- a/apps/desktop2/src/routes/index.tsx
+++ b/apps/desktop2/src/routes/index.tsx
@@ -11,13 +11,14 @@ export const Route = createFileRoute("/")({
    const accounts = await ark.get_all_accounts();

    switch (accounts.length) {
-      // Empty account
+      // Guest account
      case 0:
+        const guest = await ark.create_guest_account();
        throw redirect({
-          to: "/landing",
-          search: {
-            redirect: location.href,
-          },
+          to: "/$account/home",
+          params: { account: guest },
+          search: { guest: true },
+          replace: true,
        });
      // Only 1 account, skip account selection screen
      case 1:
@@ -25,11 +26,9 @@ export const Route = createFileRoute("/")({
        const loadAccount = await ark.load_selected_account(account);
        if (loadAccount) {
          throw redirect({
-            to: "/$account/home/local",
+            to: "/$account/home",
            params: { account },
-            search: {
-              redirect: location.href,
-            },
+            replace: true,
          });
        }
      // Account selection
@@ -51,24 +50,24 @@ function Screen() {
    const loadAccount = await ark.load_selected_account(npub);
    if (loadAccount) {
      navigate({
-        to: "/$account/home/local",
+        to: "/$account/home",
        params: { account: npub },
        replace: true,
      });
    }
  };

-  const weekday = new Date().toLocaleString("default", { weekday: "long" });
-  const day = new Date().getDate();
-  const month = new Date()
-    .toLocaleString("default", { month: "long" })
-    .toString();
+  const currentDate = new Date().toLocaleString("default", {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+  });

  return (
    <div className="relative flex h-full w-full items-center justify-center">
      <div className="relative z-20 flex flex-col items-center gap-16">
        <div className="text-center text-white">
-          <h2 className="mb-1 text-2xl">{`${weekday}, ${month} ${day}`}</h2>
+          <h2 className="mb-1 text-2xl">{currentDate}</h2>
          <h2 className="text-2xl font-semibold">Welcome back!</h2>
        </div>
        <div className="flex items-center justify-center gap-6">
--- a/apps/desktop2/src/routes/login.tsx
+++ b/apps/desktop2/src/routes/login.tsx
@@ -0,0 +1,14 @@
+import { Outlet, createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/login")({
+  component: Screen,
+});
+
+function Screen() {
+  return (
+    <div>
+      <h1>Login</h1>
+      <Outlet />
+    </div>
+  );
+}
--- a/apps/desktop2/src/routes/settings/index.lazy.tsx
+++ b/apps/desktop2/src/routes/settings/index.lazy.tsx
@@ -0,0 +1,9 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+
+export const Route = createLazyFileRoute("/settings/")({
+  component: Screen,
+});
+
+function Screen() {
+  return <div>Settings</div>;
+}