feat: improve

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>
   );
 }

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>
+  );
+}