chore: small updates

apps/desktop2/src/components/col.tsx

@@ -2,7 +2,6 @@ import { useEffect, useRef } from "react";
 import { LumeColumn } from "@lume/types";
 import { invoke } from "@tauri-apps/api/core";
 import { LoaderIcon } from "@lume/icons";
-import { cn } from "@lume/utils";
 
 export function Col({
   column,
@@ -66,18 +65,13 @@ export function Col({
 
   return (
     <div ref={container} className="h-full w-[440px] shrink-0 p-2">
-      <div
-        className={cn(
-          "w-full h-full flex items-center justify-center",
-          !webview?.current?.length
-            ? "rounded-xl flex-col bg-black/5 dark:bg-white/5 backdrop-blur-lg"
-            : "",
-        )}
-      >
-        <button type="button" className="size-5" disabled>
-          <LoaderIcon className="size-5 animate-spin" />
-        </button>
-      </div>
+      {column.label !== "open" ? (
+        <div className="w-full h-full flex items-center justify-center rounded-xl flex-col bg-black/5 dark:bg-white/5 backdrop-blur-lg">
+          <button type="button" className="size-5" disabled>
+            <LoaderIcon className="size-5 animate-spin" />
+          </button>
+        </div>
+      ) : null}
     </div>
   );
 }

apps/desktop2/src/components/toolbar.tsx

@@ -1,39 +1,15 @@
-import { ArrowLeftIcon, ArrowRightIcon } from "@lume/icons";
-import { useEffect, useState } from "react";
+import { ReactNode } from "@tanstack/react-router";
+import { useLayoutEffect, useState } from "react";
 import { createPortal } from "react-dom";
 
-export function Toolbar({
-  moveLeft,
-  moveRight,
-}: {
-  moveLeft: () => void;
-  moveRight: () => void;
-}) {
+export function Toolbar({ children }: { children: ReactNode }) {
   const [domReady, setDomReady] = useState(false);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     setDomReady(true);
   }, []);
 
   return domReady
-    ? createPortal(
-        <div className="flex items-center gap-1">
-          <button
-            type="button"
-            onClick={() => moveLeft()}
-            className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-800"
-          >
-            <ArrowLeftIcon className="size-5" />
-          </button>
-          <button
-            type="button"
-            onClick={() => moveRight()}
-            className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-800"
-          >
-            <ArrowRightIcon className="size-5" />
-          </button>
-        </div>,
-        document.getElementById("toolbar"),
-      )
+    ? createPortal(children, document.getElementById("toolbar"))
     : null;
 }

apps/desktop2/src/routes/$account.home.tsx

@@ -1,6 +1,6 @@
 import { Col } from "@/components/col";
 import { Toolbar } from "@/components/toolbar";
-import { LoaderIcon } from "@lume/icons";
+import { ArrowLeftIcon, ArrowRightIcon, LoaderIcon } from "@lume/icons";
 import { EventColumns, LumeColumn } from "@lume/types";
 import { createFileRoute } from "@tanstack/react-router";
 import { listen } from "@tauri-apps/api/event";
@@ -77,6 +77,7 @@ function Screen() {
   }, 150);
 
   useEffect(() => {
+    // save state
     ark.set_columns(columns);
   }, [columns]);
 
@@ -101,25 +102,9 @@ function Screen() {
       <VList
         ref={vlistRef}
         horizontal
+        tabIndex={-1}
         itemSize={440}
-        tabIndex={0}
-        onKeyDown={(e) => {
-          if (!vlistRef.current) return;
-          switch (e.code) {
-            case "ArrowUp":
-            case "ArrowLeft": {
-              e.preventDefault();
-              goLeft();
-              break;
-            }
-            case "ArrowDown":
-            case "ArrowRight": {
-              e.preventDefault();
-              goRight();
-              break;
-            }
-          }
-        }}
+        overscan={3}
         onScroll={() => {
           setIsScroll(true);
         }}
@@ -137,7 +122,24 @@ function Screen() {
           />
         ))}
       </VList>
-      <Toolbar moveLeft={goLeft} moveRight={goRight} />
+      <Toolbar>
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={() => goLeft()}
+            className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-800"
+          >
+            <ArrowLeftIcon className="size-5" />
+          </button>
+          <button
+            type="button"
+            onClick={() => goRight()}
+            className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-800"
+          >
+            <ArrowRightIcon className="size-5" />
+          </button>
+        </div>
+      </Toolbar>
     </div>
   );
 }

apps/desktop2/src/routes/auth/settings.tsx

@@ -1,8 +1,8 @@
-import { LaurelIcon } from "@lume/icons";
+import { LaurelIcon, LoaderIcon } from "@lume/icons";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useTranslation } from "react-i18next";
 import * as Switch from "@radix-ui/react-switch";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { AppRouteSearch, Settings } from "@lume/types";
 import {
   isPermissionGranted,
@@ -16,7 +16,17 @@ export const Route = createFileRoute("/auth/settings")({
       account: search.account,
     };
   },
+  beforeLoad: async ({ context }) => {
+    const permissionGranted = await isPermissionGranted(); // get notification permission
+    const ark = context.ark;
+    const settings = await ark.get_settings();
+
+    return {
+      settings: { ...settings, notification: permissionGranted },
+    };
+  },
   component: Screen,
+  pendingComponent: Pending,
 });
 
 function Screen() {
@@ -24,39 +34,34 @@ function Screen() {
 
   const { account } = Route.useSearch();
   const { t } = useTranslation();
-  const { ark } = Route.useRouteContext();
+  const { ark, settings } = Route.useRouteContext();
 
-  const [settings, setSettings] = useState<Settings>({
-    notification: false,
-    enhancedPrivacy: false,
-    autoUpdate: false,
-    zap: false,
-  });
+  const [newSettings, setNewSettings] = useState<Settings>(settings);
 
   const toggleNofitication = async () => {
     await requestPermission();
-    setSettings((prev) => ({
+    setNewSettings((prev) => ({
       ...prev,
       notification: !settings.notification,
     }));
   };
 
   const toggleAutoUpdate = () => {
-    setSettings((prev) => ({
+    setNewSettings((prev) => ({
       ...prev,
       autoUpdate: !settings.autoUpdate,
     }));
   };
 
   const toggleEnhancedPrivacy = () => {
-    setSettings((prev) => ({
+    setNewSettings((prev) => ({
       ...prev,
       enhancedPrivacy: !settings.enhancedPrivacy,
     }));
   };
 
   const toggleZap = () => {
-    setSettings((prev) => ({
+    setNewSettings((prev) => ({
       ...prev,
       zap: !settings.zap,
     }));
@@ -73,16 +78,6 @@ function Screen() {
     }
   };
 
-  useEffect(() => {
-    async function loadSettings() {
-      const permissionGranted = await isPermissionGranted(); // get notification permission
-      const settings = await ark.get_settings();
-      setSettings({ ...settings, notification: permissionGranted });
-    }
-
-    loadSettings();
-  }, []);
-
   return (
     <div className="mx-auto flex h-full w-full flex-col items-center justify-center gap-6 px-5 xl:max-w-xl">
       <div className="flex flex-col items-center gap-5 text-center">
@@ -102,7 +97,7 @@ function Screen() {
         <div className="flex flex-col gap-3">
           <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
             <Switch.Root
-              checked={settings.notification}
+              checked={newSettings.notification}
               onClick={() => toggleNofitication()}
               className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
             >
@@ -118,7 +113,7 @@ function Screen() {
           </div>
           <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
             <Switch.Root
-              checked={settings.enhancedPrivacy}
+              checked={newSettings.enhancedPrivacy}
               onClick={() => toggleEnhancedPrivacy()}
               className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
             >
@@ -134,7 +129,7 @@ function Screen() {
           </div>
           <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
             <Switch.Root
-              checked={settings.autoUpdate}
+              checked={newSettings.autoUpdate}
               onClick={() => toggleAutoUpdate()}
               className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
             >
@@ -149,7 +144,7 @@ function Screen() {
           </div>
           <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
             <Switch.Root
-              checked={settings.zap}
+              checked={newSettings.zap}
               onClick={() => toggleZap()}
               className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
             >
@@ -181,3 +176,13 @@ function Screen() {
     </div>
   );
 }
+
+function Pending() {
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <button type="button" className="size-5" disabled>
+        <LoaderIcon className="size-5 animate-spin" />
+      </button>
+    </div>
+  );
+}

src-tauri/resources/system_columns.json

@@ -1,9 +1,4 @@
 [
   { "label": "newsfeed", "name": "Newsfeed", "content": "/newsfeed" },
-  { "label": "open", "name": "Open", "content": "/open" },
-  {
-    "label": "store",
-    "name": "Store",
-    "content": "/store/official"
-  }
+  { "label": "open", "name": "Open", "content": "/open" }
 ]

src-tauri/src/nostr/keys.rs

@@ -91,7 +91,7 @@ pub fn get_encrypted_key(npub: &str, password: &str) -> Result<String, String> {
 
   if let Ok(nsec) = keyring.get_password() {
     let secret_key = SecretKey::from_bech32(nsec).expect("Get secret key failed");
-    let new_key = EncryptedSecretKey::new(&secret_key, password, 16, KeySecurity::Medium);
+    let new_key = EncryptedSecretKey::new(&secret_key, password, 16, KeySecurity::Unknown);
 
     if let Ok(key) = new_key {
       Ok(key.to_bech32().unwrap())