wip: small updates

apps/desktop2/package.json

@@ -11,7 +11,6 @@
   "dependencies": {
     "@lume/ark": "workspace:^",
     "@lume/icons": "workspace:^",
-		"@lume/storage": "workspace:^",
     "@lume/ui": "workspace:^",
     "@lume/utils": "workspace:^",
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -19,7 +18,6 @@
     "@tanstack/react-router": "^1.16.2",
     "i18next": "^23.8.2",
     "i18next-resources-to-backend": "^1.2.0",
-		"jotai": "^2.6.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.0.5",

apps/desktop2/src/app.tsx

@@ -1,4 +1,3 @@
-import { StorageProvider } from "@lume/storage";
 import { useArk } from "@lume/ark";
 import { ArkProvider } from "./ark";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -8,17 +7,21 @@ import ReactDOM from "react-dom/client";
 import { I18nextProvider } from "react-i18next";
 import "./app.css";
 import i18n from "./locale";
-
+import { Toaster } from "sonner";
-// Import the generated route tree
+import { locale, platform } from "@tauri-apps/plugin-os";
-import { routeTree } from "./router.gen";
+import { routeTree } from "./router.gen"; // auto generated file
 
 const queryClient = new QueryClient();
+const platformName = await platform();
+const osLocale = (await locale()).slice(0, 2);
 
 // Set up a Router instance
 const router = createRouter({
   routeTree,
   context: {
     ark: undefined!,
+    platform: platformName,
+    locale: osLocale,
     queryClient,
   },
 });
@@ -51,11 +54,10 @@ if (!rootElement.innerHTML) {
   root.render(
     <I18nextProvider i18n={i18n} defaultNS={"translation"}>
       <QueryClientProvider client={queryClient}>
-        <StorageProvider>
         <StrictMode>
+          <Toaster position="top-center" richColors />
           <App />
         </StrictMode>
-        </StorageProvider>
       </QueryClientProvider>
     </I18nextProvider>,
   );

apps/desktop2/src/routes/__root.tsx

@@ -6,10 +6,13 @@ import {
 } from "@tanstack/react-router";
 import { type Ark } from "@lume/ark";
 import { type QueryClient } from "@tanstack/react-query";
+import { type Platform } from "@tauri-apps/plugin-os";
 
 interface RouterContext {
   ark: Ark;
   queryClient: QueryClient;
+  platform: Platform;
+  locale: string;
 }
 
 export const Route = createRootRouteWithContext<RouterContext>()({

apps/desktop2/src/routes/app.tsx

@@ -6,7 +6,6 @@ import {
   SpaceFilledIcon,
   SpaceIcon,
 } from "@lume/icons";
-import { useStorage } from "@lume/storage";
 import { Link } from "@tanstack/react-router";
 import { Outlet, createFileRoute } from "@tanstack/react-router";
 import { cn } from "@lume/utils";
@@ -17,15 +16,15 @@ export const Route = createFileRoute("/app")({
 });
 
 function App() {
-  const storage = useStorage();
+  const context = Route.useRouteContext();
 
   return (
     <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={cn(
-          "flex h-11 shrink-0 items-center justify-between",
+          "flex h-11 shrink-0 items-center justify-between pr-4",
-          storage.platform === "macos" ? "pl-24" : "",
+          context.platform === "macos" ? "pl-24" : "pl-4",
         )}
       >
         <div
@@ -84,7 +83,7 @@ function App() {
             )}
           </Link>
         </div>
-        <div data-tauri-drag-region className="flex items-center gap-2 pr-4">
+        <div data-tauri-drag-region className="flex items-center gap-2">
           <ActiveAccount />
         </div>
       </div>

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

@@ -18,7 +18,12 @@ function Home() {
       queryKey: ["timeline"],
       initialPageParam: 0,
       queryFn: async ({ pageParam }: { pageParam: number }) => {
-        const events = await ark.get_text_events(FETCH_LIMIT, pageParam, true);
+        const events = await ark.get_text_events(
+          FETCH_LIMIT,
+          pageParam,
+          undefined,
+          true,
+        );
         return events;
       },
       getNextPageParam: (lastPage) => {

apps/desktop2/src/routes/auth/create/index.lazy.tsx

@@ -28,7 +28,7 @@ function Screen() {
   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-2 text-center">
+        <div className="flex flex-col items-center gap-1 text-center">
           <h1 className="text-2xl font-semibold">{t("signup.title")}</h1>
           <p className="text-lg leading-snug text-neutral-600 dark:text-neutral-500">
             {t("signup.subtitle")}
@@ -69,7 +69,7 @@ function Screen() {
             <button
               type="button"
               onClick={next}
-              className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600"
+              className="inline-flex h-12 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600"
             >
               {loading ? (
                 <LoaderIcon className="size-5 animate-spin" />

apps/desktop2/src/routes/auth/create/self.lazy.tsx

@@ -1,7 +1,6 @@
 import { useArk } from "@lume/ark";
 import { CheckIcon, EyeOffIcon, EyeOnIcon, LoaderIcon } from "@lume/icons";
 import { Keys } from "@lume/types";
-import { onboardingAtom } from "@lume/utils";
 import * as Checkbox from "@radix-ui/react-checkbox";
 import { createLazyFileRoute, useNavigate } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
@@ -24,18 +23,17 @@ function Create() {
 
   const submit = async () => {
     setLoading(true);
-
+    try {
-    const save = await ark.save_account(keys);
+      await ark.save_account(keys);
-    if (!save) {
+      navigate({
+        to: "/app/home",
+        search: { onboarding: true },
+        replace: true,
+      });
+    } catch (e) {
       setLoading(false);
-      toast.error("Save account keys failed, please try again later.");
+      toast.error(e);
     }
-
-    // update state
-    setLoading(false);
-
-    // next step
-    navigate({ to: "/app/space", replace: true });
   };
 
   useEffect(() => {
@@ -49,7 +47,7 @@ function Create() {
   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-2 text-center">
+        <div className="flex flex-col items-center gap-1 text-center">
           <h1 className="text-2xl font-semibold">
             {t("signupWithSelfManage.title")}
           </h1>
@@ -58,20 +56,20 @@ function Create() {
           </p>
         </div>
         <div className="mb-0 flex flex-col gap-6">
-          <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-4">
             <div className="relative">
               {keys ? (
                 <input
                   readOnly
                   value={keys.nsec}
                   type={showKey ? "text" : "password"}
-                  className="h-11 w-full resize-none rounded-xl border-transparent bg-neutral-100 pl-3 pr-10 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
+                  className="h-12 w-full resize-none rounded-xl border-transparent bg-neutral-100 pl-3 pr-14 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
                 />
               ) : null}
               <button
                 type="button"
                 onClick={() => setShowKey((state) => !state)}
-                className="absolute right-2 top-2 inline-flex size-7 items-center justify-center rounded-lg bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700"
+                className="absolute right-2 top-2 inline-flex size-8 items-center justify-center rounded-lg bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700"
               >
                 {showKey ? (
                   <EyeOnIcon className="size-4" />
@@ -101,26 +99,6 @@ function Create() {
                   {t("signupWithSelfManage.confirm1")}
                 </label>
               </div>
-              <div className="flex items-center gap-2">
-                <Checkbox.Root
-                  checked={confirm.c2}
-                  onCheckedChange={() =>
-                    setConfirm((state) => ({ ...state, c2: !state.c2 }))
-                  }
-                  className="flex size-7 appearance-none items-center justify-center rounded-lg bg-neutral-100 outline-none dark:bg-neutral-900"
-                  id="confirm2"
-                >
-                  <Checkbox.Indicator className="text-blue-500">
-                    <CheckIcon className="size-4" />
-                  </Checkbox.Indicator>
-                </Checkbox.Root>
-                <label
-                  className="text-sm text-neutral-700 dark:text-neutral-400"
-                  htmlFor="confirm2"
-                >
-                  {t("signupWithSelfManage.confirm2")}
-                </label>
-              </div>
               <div className="flex items-center gap-2">
                 <Checkbox.Root
                   checked={confirm.c3}
@@ -141,13 +119,33 @@ function Create() {
                   {t("signupWithSelfManage.confirm3")}
                 </label>
               </div>
+              <div className="flex items-center gap-2">
+                <Checkbox.Root
+                  checked={confirm.c2}
+                  onCheckedChange={() =>
+                    setConfirm((state) => ({ ...state, c2: !state.c2 }))
+                  }
+                  className="flex size-7 appearance-none items-center justify-center rounded-lg bg-neutral-100 outline-none dark:bg-neutral-900"
+                  id="confirm2"
+                >
+                  <Checkbox.Indicator className="text-blue-500">
+                    <CheckIcon className="size-4" />
+                  </Checkbox.Indicator>
+                </Checkbox.Root>
+                <label
+                  className="text-sm text-neutral-700 dark:text-neutral-400"
+                  htmlFor="confirm2"
+                >
+                  {t("signupWithSelfManage.confirm2")}
+                </label>
+              </div>
             </div>
           </div>
           <button
             type="button"
             onClick={submit}
             disabled={!confirm.c1 || !confirm.c2 || !confirm.c3}
-            className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600 disabled:opacity-50"
+            className="inline-flex h-12 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600 disabled:opacity-50"
           >
             {loading ? (
               <LoaderIcon className="size-5 animate-spin" />

apps/desktop2/src/routes/auth/import.lazy.tsx

@@ -1,9 +1,10 @@
 import { useArk } from "@lume/ark";
-import { EyeOffIcon, EyeOnIcon, LoaderIcon } from "@lume/icons";
+import { LoaderIcon } from "@lume/icons";
 import { createLazyFileRoute, useNavigate } from "@tanstack/react-router";
 import { invoke } from "@tauri-apps/api/core";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 
 export const Route = createLazyFileRoute("/auth/import")({
   component: Import,
@@ -15,8 +16,8 @@ function Import() {
 
   const [t] = useTranslation();
   const [key, setKey] = useState("");
+  const [password, setPassword] = useState("");
   const [loading, setLoading] = useState(false);
-  const [showKey, setShowKey] = useState(false);
 
   const submit = async () => {
     if (!key.startsWith("nsec1")) return;
@@ -24,61 +25,67 @@ function Import() {
 
     setLoading(true);
 
+    try {
       const npub: string = await invoke("get_public_key", { nsec: key });
-    const keys = {
+      await ark.save_account({
         npub,
         nsec: key,
-    };
+      });
-
+      navigate({
-    const save = await ark.save_account(keys);
+        to: "/app/home",
-    if (save) {
+        search: { onboarding: true },
-      navigate({ to: "/" });
+        replace: true,
-    } else {
+      });
-      console.log("import failed");
+    } catch (e) {
-    }
-
-    // update state
       setLoading(false);
-
+      toast.error(e);
-    // next step
+    }
-    navigate({ to: "/app/space", replace: true });
   };
 
+  const isNip05 = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(key);
+  const isNip49 = key.startsWith("ncryptsec");
+
   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-2 text-center">
+        <div className="flex flex-col items-center gap-1 text-center">
           <h1 className="text-2xl font-semibold">{t("login.title")}</h1>
           <p className="text-lg leading-snug text-neutral-600 dark:text-neutral-500">
             {t("login.subtitle")}
           </p>
         </div>
-        <div className="mb-0 flex flex-col gap-6">
         <div className="flex flex-col gap-6">
-            <div className="relative">
+          <div className="flex flex-col gap-4">
+            <div>
               <input
                 value={key}
-                type={showKey ? "text" : "password"}
+                type="text"
                 onChange={(e) => setKey(e.target.value)}
-                className="h-11 w-full resize-none rounded-xl border-transparent bg-neutral-100 pl-3 pr-10 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
+                className="h-12 w-full resize-none rounded-xl border-transparent bg-neutral-100 pl-3 pr-10 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
               />
-              <button
-                type="button"
-                onClick={() => setShowKey((state) => !state)}
-                className="absolute right-2 top-2 inline-flex size-7 items-center justify-center rounded-lg bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700"
-              >
-                {showKey ? (
-                  <EyeOnIcon className="size-4" />
-                ) : (
-                  <EyeOffIcon className="size-4" />
-                )}
-              </button>
             </div>
+            {isNip05 || isNip49 ? (
+              <div className="flex flex-col gap-1.5">
+                <label
+                  htmlFor="password"
+                  className="font-medium text-neutral-900 dark:text-neutral-100"
+                >
+                  Password *
+                </label>
+                <input
+                  value={password}
+                  name="password"
+                  type="password"
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="h-12 w-full resize-none rounded-xl border-transparent bg-neutral-100 pl-3 pr-10 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
+                />
+              </div>
+            ) : null}
           </div>
           <button
             type="button"
             onClick={submit}
-            className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600 disabled:opacity-50"
+            className="inline-flex h-12 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600 disabled:opacity-50"
           >
             {loading ? (
               <LoaderIcon className="size-5 animate-spin" />

apps/desktop2/src/routes/index.tsx

@@ -69,7 +69,7 @@ function Screen() {
         </div>
         <div className="flex items-center justify-center gap-6">
           {loading ? (
-            <LoaderIcon className="size-5 animate-spin" />
+            <LoaderIcon className="size-6 animate-spin text-white" />
           ) : (
             <>
               {ark.accounts.map((account) => (

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

@@ -1,4 +1,3 @@
-import { useStorage } from "@lume/storage";
 import { Link, createFileRoute } from "@tanstack/react-router";
 import { useTranslation } from "react-i18next";
 
@@ -7,7 +6,7 @@ export const Route = createFileRoute("/landing/")({
 });
 
 function Screen() {
-  const storage = useStorage();
+  const context = Route.useRouteContext();
   const { t } = useTranslation();
 
   return (
@@ -17,8 +16,8 @@ function Screen() {
         <div className="mx-auto flex w-full max-w-4xl flex-col items-center gap-10">
           <div className="flex flex-col items-center text-center">
             <img
-              src={`/heading-${storage.locale}.png`}
+              src={`/heading-${context.locale}.png`}
-              srcSet={`/heading-${storage.locale}@2x.png 2x`}
+              srcSet={`/heading-${context.locale}@2x.png 2x`}
               alt="lume"
               className="w-2/3"
             />
@@ -29,13 +28,13 @@ function Screen() {
           <div className="mx-auto flex w-full max-w-sm flex-col gap-2">
             <Link
               to="/auth/create"
-              className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600"
+              className="inline-flex h-12 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600"
             >
               {t("welcome.signup")}
             </Link>
             <Link
               to="/auth/import"
-              className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-neutral-950 text-lg font-medium text-white hover:bg-neutral-900"
+              className="inline-flex h-12 w-full items-center justify-center rounded-xl bg-neutral-950 text-lg font-medium text-white hover:bg-neutral-900"
             >
               {t("welcome.login")}
             </Link>

apps/desktop2/src/routes/select.tsx

@@ -1,5 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/select')({
-  component: () => <div>Hello /select!</div>
-})

packages/ark/src/ark.ts

@@ -13,7 +13,7 @@ export class Ark {
 	public accounts: Array<Account>;
 
 	constructor() {
-		this.account = { npub: "" };
+		this.account = { npub: "", contacts: [] };
 	}
 
 	public async get_all_accounts() {
@@ -68,12 +68,12 @@ export class Ark {
 
 			if (cmd) {
 				await invoke("update_signer", { nsec: keys.nsec });
+				const contacts: string[] = await invoke("get_contact_list");
 				this.account.npub = keys.npub;
-
+				this.account.contacts = contacts;
-				return true;
 			}
 
-			return false;
+			return cmd;
 		} catch (e) {
 			console.error(String(e));
 		}
@@ -106,17 +106,24 @@ export class Ark {
 		}
 	}
 
-	public async get_text_events(limit: number, asOf?: number, dedup?: boolean) {
+	public async get_text_events(
+		limit: number,
+		asOf?: number,
+		authors?: string[],
+		dedup?: boolean,
+	) {
 		try {
 			let until: string = undefined;
 			if (asOf && asOf > 0) until = asOf.toString();
 
 			const seenIds = new Set<string>();
 			const dedupQueue = new Set<string>();
+			const contact_list = authors ?? this.account.contacts;
 
 			const nostrEvents: Event[] = await invoke("get_text_events", {
 				limit,
 				until,
+				contact_list,
 			});
 
 			if (dedup) {

pnpm-lock.yaml

@@ -66,9 +66,6 @@ importers:
       '@lume/icons':
         specifier: workspace:^
         version: link:../../packages/icons
-      '@lume/storage':
-        specifier: workspace:^
-        version: link:../../packages/storage
       '@lume/ui':
         specifier: workspace:^
         version: link:../../packages/ui
@@ -90,9 +87,6 @@ importers:
       i18next-resources-to-backend:
         specifier: ^1.2.0
         version: 1.2.0
-      jotai:
-        specifier: ^2.6.4
-        version: 2.6.4(@types/react@18.2.55)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0

src-tauri/locales/en.json

@@ -105,6 +105,7 @@
   },
   "login": {
     "title": "Welcome back, anon!",
+    "subtitle": "We're so excited to see you again!",
     "footer": "Lume will put your Private Key in Secure Storage depended on your OS Platform. It will be secured by Password or Biometric ID",
     "loginWithAddress": "Login with Nostr Address",
     "loginWithBunker": "Login with nsecBunker",