bump version

redesign widget list
update widgets
2023-09-06 16:53:05 +07:00 · 2023-09-06 14:30:57 +07:00 · 2023-09-06 08:58:02 +07:00 · 2023-09-06 07:46:31 +07:00 · 2023-09-05 17:25:00 +07:00 · 2023-09-05 13:07:21 +07:00
283 changed files with 11587 additions and 11931 deletions
@@ -0,0 +1,3 @@
 /**/node_modules/*
 node_modules/
 dist/
@@ -1,8 +1,5 @@
-name: 'publish'
+name: 'Publish'
-on:
+on: workflow_dispatch
  push:
    branches:
      - release
 env:
  CARGO_INCREMENTAL: 0
@@ -17,7 +14,7 @@ jobs:
        settings:
          - platform: 'macos-latest'
            args: '--target universal-apple-darwin'
-          - platform: 'ubuntu-20.04'
+          - platform: 'ubuntu-22.04'
            args: ''
          - platform: 'windows-latest'
            args: '--target x86_64-pc-windows-msvc'
@@ -32,14 +29,14 @@ jobs:
        with:
          targets: aarch64-apple-darwin
      - name: install dependencies (ubuntu only)
-        if: matrix.settings.platform == 'ubuntu-20.04'
+        if: matrix.settings.platform == 'ubuntu-22.04'
        run: |
          sudo apt-get update
-          sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev patchelf
+          sudo apt-get install -y build-essential libssl-dev libgtk-3-dev libwebkit2gtk-4.0-dev libappindicator3-dev librsvg2-dev patchelf
      - name: Install pnpm
        uses: pnpm/action-setup@v2
        with:
-          version: 7.x.x
+          version: 8.x.x
          run_install: false
      - name: Setup node and cache for package data
        uses: actions/setup-node@v3
@@ -63,9 +60,10 @@ jobs:
          APPLE_ID: ${{ secrets.APPLE_ID }}
          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
        with:
-          tagName: v__VERSION__ # the action automatically replaces \_\_VERSION\_\_ with the app version
+          tagName: v__VERSION__
          releaseName: 'App v__VERSION__'
          releaseBody: 'See the assets to download this version and install.'
          releaseDraft: true
          prerelease: false
          args: ${{ matrix.settings.args }}
          includeDebug: true
@@ -4,7 +4,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lume</title>
  </head>
-  <body class="cursor-default select-none overflow-hidden font-sans antialiased h-screen w-screen dark:bg-black dark:text-zinc-100">
+  <body class="relative cursor-default select-none overflow-hidden font-sans antialiased h-screen w-screen text-white">
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
@@ -1,7 +1,8 @@
 {
  "name": "lume",
  "description": "the communication app",
  "private": true,
-  "version": "1.1.1",
+  "version": "1.2.3",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
@@ -17,83 +18,86 @@
    "**/*.{ts, tsx, css, md, html, json}": "prettier --cache --write"
  },
  "dependencies": {
-    "@headlessui/react": "^1.7.15",
+    "@ctrl/magnet-link": "^3.1.2",
-    "@nostr-dev-kit/ndk": "^0.7.7",
+    "@getalby/sdk": "^2.4.0",
-    "@nostr-fetch/adapter-ndk": "^0.11.0",
+    "@nostr-dev-kit/ndk": "^0.8.23",
    "@nostr-fetch/adapter-ndk": "^0.12.2",
    "@radix-ui/react-alert-dialog": "^1.0.4",
    "@radix-ui/react-collapsible": "^1.0.3",
    "@radix-ui/react-dialog": "^1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.5",
    "@radix-ui/react-popover": "^1.0.6",
    "@radix-ui/react-tooltip": "^1.0.6",
-    "@tanstack/react-query": "^4.32.0",
+    "@tanstack/react-query": "^4.33.0",
    "@tanstack/react-query-devtools": "^4.32.0",
    "@tanstack/react-virtual": "3.0.0-beta.54",
    "@tauri-apps/api": "^1.4.0",
-    "@tiptap/extension-image": "^2.0.4",
+    "@tiptap/extension-image": "^2.1.8",
-    "@tiptap/extension-mention": "^2.0.4",
+    "@tiptap/extension-mention": "^2.1.8",
-    "@tiptap/extension-placeholder": "^2.0.4",
+    "@tiptap/extension-placeholder": "^2.1.8",
-    "@tiptap/pm": "^2.0.4",
+    "@tiptap/pm": "^2.1.8",
-    "@tiptap/react": "^2.0.4",
+    "@tiptap/react": "^2.1.8",
-    "@tiptap/starter-kit": "^2.0.4",
+    "@tiptap/starter-kit": "^2.1.8",
-    "@tiptap/suggestion": "^2.0.4",
+    "@tiptap/suggestion": "^2.1.8",
-    "cheerio": "1.0.0-rc.12",
+    "@void-cat/api": "^1.0.7",
    "dayjs": "^1.11.9",
-    "destr": "^1.2.2",
+    "destr": "^2.0.1",
-    "framer-motion": "^10.13.1",
+    "get-urls": "^12.1.0",
    "get-urls": "^11.0.0",
    "html-to-text": "^9.0.5",
    "immer": "^10.0.2",
    "light-bolt11-decoder": "^3.0.0",
-    "nostr-fetch": "^0.12.2",
+    "lru-cache": "^10.0.1",
-    "nostr-tools": "^1.13.1",
+    "minidenticons": "^4.2.0",
    "nostr-fetch": "^0.13.0",
    "nostr-tools": "^1.14.2",
    "qrcode.react": "^3.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.45.2",
+    "react-hook-form": "^7.46.1",
    "react-hotkeys-hook": "^4.4.1",
    "react-markdown": "^8.0.7",
-    "react-player": "^2.12.0",
+    "react-player": "^2.13.0",
-    "react-router-dom": "^6.14.2",
+    "react-router-dom": "^6.15.0",
-    "react-string-replace": "^1.1.1",
+    "react-textarea-autosize": "^8.5.3",
-    "react-virtuoso": "^4.4.2",
+    "react-virtuoso": "^4.5.0",
    "remark-gfm": "^3.0.1",
-    "tailwind-merge": "^1.14.0",
+    "tauri-plugin-sql-api": "github:tauri-apps/tauri-plugin-sql#v1",
-    "tauri-plugin-autostart-api": "github:tauri-apps/tauri-plugin-autostart#v1",
+    "tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store#v1",
    "tauri-plugin-sql-api": "github:tauri-apps/tauri-plugin-sql",
    "tauri-plugin-stronghold-api": "github:tauri-apps/tauri-plugin-stronghold#v1",
    "tauri-plugin-upload-api": "github:tauri-apps/tauri-plugin-upload#v1",
    "tippy.js": "^6.3.7",
-    "zustand": "^4.3.9"
+    "zustand": "^4.4.1"
  },
  "devDependencies": {
-    "@tailwindcss/typography": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.10",
    "@tauri-apps/cli": "^1.4.0",
    "@trivago/prettier-plugin-sort-imports": "^4.2.0",
    "@types/html-to-text": "^9.0.1",
-    "@types/node": "^18.17.1",
+    "@types/node": "^20.5.9",
-    "@types/react": "^18.2.17",
+    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",
    "@types/youtube-player": "^5.5.7",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/eslint-plugin": "^6.6.0",
-    "@typescript-eslint/parser": "^5.62.0",
+    "@typescript-eslint/parser": "^6.6.0",
    "@vitejs/plugin-react-swc": "^3.3.2",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.15",
    "clsx": "^2.0.0",
    "cross-env": "^7.0.3",
    "csstype": "^3.1.2",
    "encoding": "^0.1.13",
-    "eslint": "^8.45.0",
+    "eslint": "^8.48.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.33.0",
+    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "husky": "^8.0.3",
-    "lint-staged": "^13.2.3",
+    "lint-staged": "^14.0.1",
-    "postcss": "^8.4.27",
+    "postcss": "^8.4.29",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.3",
-    "prettier-plugin-tailwindcss": "^0.3.0",
+    "prettier-plugin-tailwindcss": "^0.5.4",
    "prop-types": "^15.8.1",
    "tailwind-merge": "^1.14.0",
    "tailwindcss": "^3.3.3",
-    "typescript": "^4.9.5",
+    "typescript": "^5.2.2",
-    "vite": "^4.4.7",
+    "vite": "^4.4.9",
    "vite-plugin-top-level-await": "^1.3.1",
    "vite-tsconfig-paths": "^4.2.0"
  }
 }
@@ -1,60 +1,56 @@
 [package]
 name = "lume"
-version = "1.1.1"
+version = "1.2.3"
-description = "nostr client"
+description = "the communication app"
 authors = ["Ren Amamiya"]
-license = ""
+license = "GPL-3.0"
-repository = ""
+repository = "https://github.com/luminous-devs/lume"
 edition = "2021"
-rust-version = "1.57"
+rust-version = "1.66"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 [build-dependencies]
-tauri-build = { version = "1.2", features = [] }
+tauri-build = { version = "1.4", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.2", features = [
+tauri = { version = "1.4", features = [
  "fs-remove-file",
  "fs-write-file",
  "window-create",
  "path-all",
  "fs-read-dir",
  "fs-read-file",
  "clipboard-read-text",
  "clipboard-write-text",
  "dialog-open",
  "http-all",
  "http-multipart",
  "notification-all",
  "os-all",
  "process-relaunch",
  "shell-open",
  "system-tray",
  "updater",
  "window-close",
  "window-start-dragging",
  "path-all",
  "http-all",
  "clipboard-write-text",
  "os-all",
  "notification-all",
  "clipboard-read-text",
  "window-set-resizable",
  "window-set-size",
  "shell-open",
  "fs-write-file",
  "app-all",
  "fs-remove-file",
  "window-center",
  "dialog-all",
  "macos-private-api",
  "http-multipart",
 ] }
 tauri-plugin-sql = { git = "hhttps://github.com/tauri-apps/plugins-workspace", branch = "v1", features = [
  "sqlite",
 ] }
 tauri-plugin-single-instance = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 tauri-plugin-autostart = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 tauri-plugin-stronghold = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 tauri-plugin-store = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 tauri-plugin-upload = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 window-vibrancy = { git = "https://github.com/tauri-apps/window-vibrancy", branch = "dev" }
 sqlx-cli = { version = "0.7.0", default-features = false, features = [
  "sqlite",
 ] }
 rust-argon2 = "1.0"
-rand = "0.8.5"
+webpage = { version = "1.6.0", features = ["serde"] }
 [dependencies.tauri-plugin-sql]
 git = "https://github.com/tauri-apps/plugins-workspace"
 branch = "v1"
 features = ["sqlite"]
 [target.'cfg(target_os = "macos")'.dependencies]
 objc = "0.2.7"
 cocoa = "0.24.1"
 [features]
 # by default Tauri runs in production mode
@@ -0,0 +1,2 @@
 -- Add migration script here
 ALTER TABLE accounts ADD network JSON;
@@ -0,0 +1,10 @@
 -- Add migration script here
 CREATE TABLE
  relays (
    id INTEGER NOT NULL PRIMARY KEY,
    account_id INTEGER NOT NULL,
    relay TEXT NOT NULL,
    purpose TEXT NOT NULL DEFAULT '',
    created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (account_id) REFERENCES accounts (id)
  );
@@ -0,0 +1,3 @@
 -- Add migration script here
 ALTER TABLE blocks
 RENAME TO widgets;
@@ -0,0 +1,13 @@
 -- Add migration script here
 CREATE TABLE
  events (
    id TEXT NOT NULL PRIMARY KEY,
    account_id INTEGER NOT NULL,
    event TEXT NOT NULL,
    author TEXT NOT NULL,
    kind NUMBER NOT NULL DEFAULt 1,
    root_id TEXT,
    reply_id TEXT,
    created_at INTEGER NOT NULL,
    FOREIGN KEY (account_id) REFERENCES accounts (id)
  );
@@ -0,0 +1,8 @@
 -- Add migration script here
 DROP TABLE IF EXISTS notes;
 DROP TABLE IF EXISTS chats;
 DROP TABLE IF EXISTS metadata;
 DROP TABLE IF EXISTS replies;
@@ -0,0 +1,3 @@
 -- Add migration script here
 ALTER TABLE accounts
 ADD COLUMN last_login_at NUMBER NOT NULL DEFAULT 0;
@@ -3,19 +3,14 @@
  windows_subsystem = "windows"
 )]
-#[cfg(target_os = "macos")]
+use tauri::Manager;
 #[macro_use]
 extern crate objc;
 // use rand::distributions::{Alphanumeric, DistString};
 use tauri::{Manager, WindowEvent};
 use tauri_plugin_autostart::MacosLauncher;
 use tauri_plugin_sql::{Migration, MigrationKind};
 use webpage::{Webpage, WebpageOptions};
 use std::time::Duration;
 #[cfg(target_os = "macos")]
-use window_ext::WindowExt;
+use window_vibrancy::{apply_vibrancy, NSVisualEffectMaterial};
 #[cfg(target_os = "macos")]
 mod window_ext;
 #[derive(Clone, serde::Serialize)]
 struct Payload {
@@ -23,31 +18,92 @@ struct Payload {
  cwd: String,
 }
 #[derive(serde::Serialize)]
 struct OpenGraphResponse {
  title: String,
  description: String,
  url: String,
  image: String,
 }
 async fn fetch_opengraph(url: String) -> OpenGraphResponse {
  let options = WebpageOptions {
    allow_insecure: false,
    max_redirections: 3,
    timeout: Duration::from_secs(15),
    useragent: "lume - desktop app".to_string(),
    ..Default::default()
  };
  let result = match Webpage::from_url(&url, options) {
    Ok(webpage) => webpage,
    Err(_) => {
      return OpenGraphResponse {
        title: "".to_string(),
        description: "".to_string(),
        url: "".to_string(),
        image: "".to_string(),
      }
    }
  };
  let html = result.html;
  return OpenGraphResponse {
    title: html
      .opengraph
      .properties
      .get("title")
      .cloned()
      .unwrap_or_default(),
    description: html
      .opengraph
      .properties
      .get("description")
      .cloned()
      .unwrap_or_default(),
    url: html
      .opengraph
      .properties
      .get("url")
      .cloned()
      .unwrap_or_default(),
    image: html
      .opengraph
      .images
      .get(0)
      .and_then(|i| Some(i.url.clone()))
      .unwrap_or_default(),
  };
 }
 #[tauri::command]
 async fn opengraph(url: String) -> OpenGraphResponse {
  let result = fetch_opengraph(url).await;
  return result;
 }
 #[tauri::command]
 async fn close_splashscreen(window: tauri::Window) {
  // Close splashscreen
  if let Some(splashscreen) = window.get_window("splashscreen") {
    splashscreen.close().unwrap();
  }
  // Show main window
  window.get_window("main").unwrap().show().unwrap();
 }
 fn main() {
  tauri::Builder::default()
    .setup(|app| {
-      #[cfg(target_os = "macos")]
+      let window = app.get_window("main").unwrap();
      let main_window = app.get_window("main").unwrap();
      #[cfg(target_os = "macos")]
-      main_window.position_traffic_lights(13.0, 17.0); // set inset for traffic lights (macos)
+      apply_vibrancy(&window, NSVisualEffectMaterial::HudWindow, None, None)
        .expect("Unsupported platform! 'apply_vibrancy' is only supported on macOS");
      Ok(())
    })
    .on_window_event(|e| {
      #[cfg(target_os = "macos")]
      let apply_offset = || {
        let win = e.window();
        // keep inset for traffic lights when window resize (macos)
        win.position_traffic_lights(13.0, 17.0);
      };
      #[cfg(target_os = "macos")]
      match e.event() {
        WindowEvent::Resized(..) => apply_offset(),
        WindowEvent::ThemeChanged(..) => apply_offset(),
        _ => {}
      }
    })
    .plugin(
      tauri_plugin_sql::Builder::default()
        .add_migrations(
@@ -119,6 +175,42 @@ fn main() {
              sql: include_str!("../migrations/20230725010250_update_default_relays.sql"),
              kind: MigrationKind::Up,
            },
            Migration {
              version: 20230804083544,
              description: "add network to accounts",
              sql: include_str!("../migrations/20230804083544_add_network_to_account.sql"),
              kind: MigrationKind::Up,
            },
            Migration {
              version: 20230808085847,
              description: "add relays",
              sql: include_str!("../migrations/20230808085847_add_relays_table.sql"),
              kind: MigrationKind::Up,
            },
            Migration {
              version: 20230811074423,
              description: "rename blocks to widgets",
              sql: include_str!("../migrations/20230811074423_rename_blocks_to_widgets.sql"),
              kind: MigrationKind::Up,
            },
            Migration {
              version: 20230814083543,
              description: "add events",
              sql: include_str!("../migrations/20230814083543_add_events_table.sql"),
              kind: MigrationKind::Up,
            },
            Migration {
              version: 20230816090508,
              description: "clean up tables",
              sql: include_str!("../migrations/20230816090508_clean_up_tables.sql"),
              kind: MigrationKind::Up,
            },
            Migration {
              version: 20230817014932,
              description: "add last login to account",
              sql: include_str!("../migrations/20230817014932_add_last_login_time_to_account.sql"),
              kind: MigrationKind::Up,
            },
          ],
        )
        .build(),
@@ -134,7 +226,6 @@ fn main() {
          ..Default::default()
        };
        // let salt = Alphanumeric.sample_string(&mut rand::thread_rng(), 12);
        let key = argon2::hash_raw(
          password.as_ref(),
          b"LUME_NEED_RUST_DEVELOPER_HELP_MAKE_SALT_RANDOM",
@@ -157,6 +248,8 @@ fn main() {
        .unwrap();
    }))
    .plugin(tauri_plugin_upload::init())
    .plugin(tauri_plugin_store::Builder::default().build())
    .invoke_handler(tauri::generate_handler![close_splashscreen, opengraph])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
 }
@@ -1,60 +0,0 @@
 use tauri::{Runtime, Window};
 pub trait WindowExt {
  #[cfg(target_os = "macos")]
  fn set_transparent_titlebar(&self, transparent: bool);
  fn position_traffic_lights(&self, x: f64, y: f64);
 }
 impl<R: Runtime> WindowExt for Window<R> {
  #[cfg(target_os = "macos")]
  fn set_transparent_titlebar(&self, transparent: bool) {
    use cocoa::appkit::{NSWindow, NSWindowTitleVisibility};
    let window = self.ns_window().unwrap() as cocoa::base::id;
    unsafe {
      window.setTitleVisibility_(NSWindowTitleVisibility::NSWindowTitleHidden);
      if transparent {
        window.setTitlebarAppearsTransparent_(cocoa::base::YES);
      } else {
        window.setTitlebarAppearsTransparent_(cocoa::base::NO);
      }
    }
  }
  #[cfg(target_os = "macos")]
  fn position_traffic_lights(&self, x: f64, y: f64) {
    use cocoa::appkit::{NSView, NSWindow, NSWindowButton};
    use cocoa::foundation::NSRect;
    let window = self.ns_window().unwrap() as cocoa::base::id;
    unsafe {
      let close = window.standardWindowButton_(NSWindowButton::NSWindowCloseButton);
      let miniaturize = window.standardWindowButton_(NSWindowButton::NSWindowMiniaturizeButton);
      let zoom = window.standardWindowButton_(NSWindowButton::NSWindowZoomButton);
      let title_bar_container_view = close.superview().superview();
      let close_rect: NSRect = msg_send![close, frame];
      let button_height = close_rect.size.height;
      let title_bar_frame_height = button_height + y;
      let mut title_bar_rect = NSView::frame(title_bar_container_view);
      title_bar_rect.size.height = title_bar_frame_height;
      title_bar_rect.origin.y = NSView::frame(window).size.height - title_bar_frame_height;
      let _: () = msg_send![title_bar_container_view, setFrame: title_bar_rect];
      let window_buttons = vec![close, miniaturize, zoom];
      let space_between = NSView::frame(miniaturize).origin.x - NSView::frame(close).origin.x;
      for (i, button) in window_buttons.into_iter().enumerate() {
        let mut rect: NSRect = NSView::frame(button);
        rect.origin.x = x + (i as f64 * space_between);
        button.setFrameOrigin(rect.origin);
      }
    }
  }
 }
@@ -1,148 +1,130 @@
 {
-	"build": {
+  "$schema": "../node_modules/@tauri-apps/cli/schema.json",
-		"beforeDevCommand": "pnpm dev",
+  "build": {
-		"beforeBuildCommand": "pnpm build",
+    "beforeBuildCommand": "pnpm build",
-		"devPath": "http://localhost:3000",
+    "beforeDevCommand": "pnpm dev",
-		"distDir": "../dist",
+    "devPath": "http://localhost:3000",
-		"withGlobalTauri": true
+    "distDir": "../dist",
-	},
+    "withGlobalTauri": true
-	"package": {
+  },
-		"productName": "Lume",
+  "package": {
-		"version": "1.1.1"
+    "productName": "Lume",
-	},
+    "version": "1.2.3"
-	"tauri": {
+  },
-		"allowlist": {
+  "tauri": {
-			"all": false,
+    "allowlist": {
-			"app": {
+      "app": {
-				"all": false
+        "all": true,
-			},
+        "show": true,
-			"os": {
+        "hide": true
-				"all": true
+      },
-			},
+      "path": {
-			"http": {
+        "all": true
-				"all": true,
+      },
-				"request": true,
+      "dialog": {
-				"scope": ["http://**", "https://**"]
+        "all": true,
-			},
+        "ask": true,
-			"fs": {
+        "confirm": true,
-				"all": false,
+        "message": true,
-				"readFile": true,
+        "open": true,
-				"readDir": true,
+        "save": true
-				"writeFile": true,
+      },
-				"removeFile": true,
+      "fs": {
-				"scope": [
+        "all": false,
-					"$APPDATA/*",
+        "removeFile": true,
-					"$DATA/*",
+        "writeFile": true,
-					"$LOCALDATA/*",
+        "readDir": true,
-					"$DESKTOP/*",
+        "readFile": true,
-					"$DOCUMENT/*",
+        "scope": [
-					"$DOWNLOAD/*",
+          "$APPDATA/*",
-					"$HOME/*",
+          "$DATA/*",
-					"$PICTURE/*",
+          "$LOCALDATA/*",
-					"$PUBLIC/*",
+          "$DESKTOP/*",
-					"$VIDEO/*"
+          "$DOCUMENT/*",
-				]
+          "$DOWNLOAD/*",
-			},
+          "$HOME/*",
-			"path": {
+          "$PICTURE/*",
-				"all": true
+          "$PUBLIC/*",
-			},
+          "$VIDEO/*"
-			"shell": {
+        ]
-				"all": false,
+      },
-				"open": true
+      "http": {
-			},
+        "all": true,
-			"clipboard": {
+        "scope": [
-				"all": false,
+          "http://**",
-				"writeText": true,
+          "https://**"
-				"readText": true
+        ]
-			},
+      },
-			"dialog": {
+      "shell": {
-				"all": false,
+        "all": false,
-				"open": true
+        "open": true
-			},
+      },
-			"notification": {
+      "os": {
-				"all": true
+        "all": true
-			},
+      },
-			"window": {
+      "window": {
-				"startDragging": true,
+        "all": false,
-				"close": true,
+        "center": true,
-				"create": true
+        "setResizable": true,
-			},
+        "setSize": true,
-			"process": {
+        "startDragging": true
-				"all": false,
+      },
-				"exit": false,
+      "clipboard": {
-				"relaunch": true,
+        "all": false,
-				"relaunchDangerousAllowSymlinkMacos": false
+        "writeText": true,
-			}
+        "readText": true
-		},
+      },
-		"bundle": {
+      "notification": {
-			"active": true,
+        "all": true
-			"category": "SocialNetworking",
+      }
-			"copyright": "",
+    },
-			"appimage": {
+    "bundle": {
-				"bundleMediaFramework": true
+      "active": true,
-			},
+      "appimage": {
-			"deb": {
+        "bundleMediaFramework": true
-				"depends": []
+      },
-			},
+      "category": "SocialNetworking",
-			"externalBin": [],
+      "copyright": "",
-			"icon": [
+      "deb": {
-				"icons/32x32.png",
+        "depends": []
-				"icons/128x128.png",
+      },
-				"icons/128x128@2x.png",
+      "externalBin": [],
-				"icons/icon.icns",
+      "icon": [
-				"icons/icon.ico"
+        "icons/32x32.png",
-			],
+        "icons/128x128.png",
-			"identifier": "com.lume.nu",
+        "icons/128x128@2x.png",
-			"longDescription": "",
+        "icons/icon.icns",
-			"macOS": {
+        "icons/icon.ico"
-				"entitlements": null,
+      ],
-				"exceptionDomain": "",
+      "identifier": "com.lume.nu",
-				"frameworks": [],
+      "longDescription": "",
-				"providerShortName": null,
+      "macOS": {
-				"signingIdentity": null
+        "entitlements": null,
-			},
+        "exceptionDomain": "",
-			"resources": [],
+        "frameworks": [],
-			"shortDescription": "",
+        "providerShortName": null,
-			"targets": "all",
+        "signingIdentity": null,
-			"windows": {
+        "minimumSystemVersion": "10.15.0"
-				"certificateThumbprint": null,
+      },
-				"digestAlgorithm": "sha256",
+      "resources": [],
-				"timestampUrl": ""
+      "shortDescription": "",
-			}
+      "targets": "all",
-		},
+      "windows": {
-		"security": {
+        "certificateThumbprint": null,
-			"csp": "upgrade-insecure-requests"
+        "digestAlgorithm": "sha256",
-		},
+        "timestampUrl": ""
-		"updater": {
+      }
-			"active": true,
+    },
-			"dialog": true,
+    "updater": {
-			"endpoints": [
+      "endpoints": [
-				"https://lus.reya3772.workers.dev/v1/{{target}}/{{arch}}/{{current_version}}",
+        "https://lus.reya3772.workers.dev/v1/{{target}}/{{arch}}/{{current_version}}",
-				"https://lus.reya3772.workers.dev/{{target}}/{{current_version}}"
+        "https://lus.reya3772.workers.dev/{{target}}/{{current_version}}"
-			],
+      ]
-			"pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEU4RjAzODFBREQ4MkM3RTEKUldUaHg0TGRHamp3NkI5bnhoOEVjanlHWFNzQ2Q3NDhubFFLUmJpSHJ1L2FqNnB3alF1Y2R3U3gK",
+    },
-			"windows": {
+    "security": {
-				"installMode": "passive"
+      "csp": {
-			}
+        "content-security-policy": "upgrade-insecure-requests"
-		},
+      }
-		"systemTray": {
+    }
-			"iconPath": "icons/icon.png",
+  }
 			"iconAsTemplate": true
 		},
 		"windows": [
 			{
 				"title": "Lume",
 				"theme": "Dark",
 				"titleBarStyle": "Overlay",
 				"hiddenTitle": true,
 				"transparent": false,
 				"fullscreen": false,
 				"resizable": true,
 				"width": 1080,
 				"height": 800,
 				"minWidth": 1080,
 				"minHeight": 720
 			}
 		]
 	}
 }
@@ -0,0 +1,32 @@
 {
  "$schema": "../node_modules/@tauri-apps/cli/schema.json",
  "tauri": {
    "windows": [
      {
        "width": 400,
        "height": 500,
        "decorations": false,
        "title": "Lume",
        "center": true,
        "resizable": false,
        "label": "splashscreen",
        "url": "splashscreen"
      },
      {
        "width": 1080,
        "height": 800,
        "minWidth": 1080,
        "minHeight": 800,
        "resizable": true,
        "theme": "Dark",
        "title": "Lume",
        "transparent": false,
        "center": true,
        "fullscreen": false,
        "hiddenTitle": true,
        "visible": false,
        "fileDropEnabled": true
      }
    ]
  }
 }
@@ -0,0 +1,36 @@
 {
  "$schema": "../node_modules/@tauri-apps/cli/schema.json",
  "tauri": {
    "macOSPrivateApi": true,
    "windows": [
      {
        "width": 400,
        "height": 500,
        "decorations": true,
        "title": "Lume",
        "titleBarStyle": "Overlay",
        "hiddenTitle": true,
        "center": true,
        "resizable": false,
        "label": "splashscreen",
        "url": "splashscreen"
      },
      {
        "width": 1080,
        "height": 800,
        "minWidth": 1080,
        "minHeight": 800,
        "resizable": true,
        "theme": "Dark",
        "title": "Lume",
        "titleBarStyle": "Overlay",
        "transparent": true,
        "center": true,
        "fullscreen": false,
        "hiddenTitle": true,
        "visible": false,
        "fileDropEnabled": true
      }
    ]
  }
 }
@@ -0,0 +1,32 @@
 {
  "$schema": "../node_modules/@tauri-apps/cli/schema.json",
  "tauri": {
    "windows": [
      {
        "width": 400,
        "height": 500,
        "decorations": false,
        "title": "Lume",
        "center": true,
        "resizable": false,
        "label": "splashscreen",
        "url": "splashscreen"
      },
      {
        "width": 1080,
        "height": 800,
        "minWidth": 1080,
        "minHeight": 800,
        "resizable": true,
        "theme": "Dark",
        "title": "Lume",
        "transparent": false,
        "center": true,
        "fullscreen": false,
        "hiddenTitle": true,
        "visible": false,
        "fileDropEnabled": true
      }
    ]
  }
 }
@@ -1,107 +1,258 @@
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { RouterProvider, createBrowserRouter, redirect } from 'react-router-dom';
 import { AuthCreateScreen } from '@app/auth/create';
 import { CreateStep1Screen } from '@app/auth/create/step-1';
 import { CreateStep2Screen } from '@app/auth/create/step-2';
 import { CreateStep3Screen } from '@app/auth/create/step-3';
 import { CreateStep4Screen } from '@app/auth/create/step-4';
 import { CreateStep5Screen } from '@app/auth/create/step-5';
 import { AuthImportScreen } from '@app/auth/import';
 import { ImportStep1Screen } from '@app/auth/import/step-1';
 import { ImportStep2Screen } from '@app/auth/import/step-2';
 import { ImportStep3Screen } from '@app/auth/import/step-3';
 import { MigrateScreen } from '@app/auth/migrate';
 import { OnboardingScreen } from '@app/auth/onboarding';
 import { ResetScreen } from '@app/auth/reset';
 import { UnlockScreen } from '@app/auth/unlock';
 import { WelcomeScreen } from '@app/auth/welcome';
 import { ChannelScreen } from '@app/channel';
 import { ChatScreen } from '@app/chats';
 import { ErrorScreen } from '@app/error';
 import { NoteScreen } from '@app/note';
 import { Root } from '@app/root';
 import { AccountSettingsScreen } from '@app/settings/account';
 import { GeneralSettingsScreen } from '@app/settings/general';
 import { ShortcutsSettingsScreen } from '@app/settings/shortcuts';
 import { SpaceScreen } from '@app/space';
 import { TrendingScreen } from '@app/trending';
 import { UserScreen } from '@app/users';
-import { AppLayout } from '@shared/appLayout';
+import { Frame } from '@shared/frame';
-import { AuthLayout } from '@shared/authLayout';
+import { LoaderIcon } from '@shared/icons';
-import { Protected } from '@shared/protected';
+import { AppLayout } from '@shared/layouts/app';
-import { SettingsLayout } from '@shared/settingsLayout';
+import { AuthLayout } from '@shared/layouts/auth';
 import { NoteLayout } from '@shared/layouts/note';
 import { SettingsLayout } from '@shared/layouts/settings';
 import { checkActiveAccount } from '@utils/checkActiveAccount';
 import './index.css';
 async function Loader() {
  try {
    const account = await checkActiveAccount();
    const stronghold = sessionStorage.getItem('stronghold');
    const privkey = JSON.parse(stronghold).state.privkey || null;
    const onboarding = localStorage.getItem('onboarding');
    const step = JSON.parse(onboarding).state.step || null;
    if (step) {
      return redirect(step);
    }
    if (!account) {
      return redirect('/auth/welcome');
    } else {
      if (!privkey) {
        return redirect('/auth/unlock');
      }
    }
    return null;
  } catch (e) {
    throw new Error('App failed to load');
  }
 }
 const router = createBrowserRouter([
  {
    path: '/',
-    element: (
+    element: <AppLayout />,
      <Protected>
        <Root />
      </Protected>
    ),
    errorElement: <ErrorScreen />,
    loader: Loader,
    children: [
      {
        path: '',
        async lazy() {
          const { SpaceScreen } = await import('@app/space');
          return { Component: SpaceScreen };
        },
      },
      {
        path: 'users/:pubkey',
        async lazy() {
          const { UserScreen } = await import('@app/users');
          return { Component: UserScreen };
        },
      },
      {
        path: 'chats/:pubkey',
        async lazy() {
          const { ChatScreen } = await import('@app/chats');
          return { Component: ChatScreen };
        },
      },
      {
        path: 'notifications',
        async lazy() {
          const { NotificationScreen } = await import('@app/notifications');
          return { Component: NotificationScreen };
        },
      },
    ],
  },
  {
    path: '/notes',
    element: <NoteLayout />,
    errorElement: <ErrorScreen />,
    children: [
      {
        path: 'text/:id',
        async lazy() {
          const { TextNoteScreen } = await import('@app/notes/text');
          return { Component: TextNoteScreen };
        },
      },
      {
        path: 'article/:id',
        async lazy() {
          const { ArticleNoteScreen } = await import('@app/notes/article');
          return { Component: ArticleNoteScreen };
        },
      },
    ],
  },
  {
    path: '/splashscreen',
    errorElement: <ErrorScreen />,
    async lazy() {
      const { SplashScreen } = await import('@app/splash');
      return { Component: SplashScreen };
    },
  },
  {
    path: '/auth',
    element: <AuthLayout />,
    errorElement: <ErrorScreen />,
    children: [
-      { path: 'welcome', element: <WelcomeScreen /> },
+      {
-      { path: 'onboarding', element: <OnboardingScreen /> },
+        path: 'welcome',
        async lazy() {
          const { WelcomeScreen } = await import('@app/auth/welcome');
          return { Component: WelcomeScreen };
        },
      },
      {
        path: 'import',
        element: <AuthImportScreen />,
        errorElement: <ErrorScreen />,
        children: [
-          { path: '', element: <ImportStep1Screen /> },
+          {
-          { path: 'step-2', element: <ImportStep2Screen /> },
+            path: '',
-          { path: 'step-3', element: <ImportStep3Screen /> },
+            async lazy() {
              const { ImportStep1Screen } = await import('@app/auth/import/step-1');
              return { Component: ImportStep1Screen };
            },
          },
          {
            path: 'step-2',
            async lazy() {
              const { ImportStep2Screen } = await import('@app/auth/import/step-2');
              return { Component: ImportStep2Screen };
            },
          },
          {
            path: 'step-3',
            async lazy() {
              const { ImportStep3Screen } = await import('@app/auth/import/step-3');
              return { Component: ImportStep3Screen };
            },
          },
        ],
      },
      {
        path: 'create',
        element: <AuthCreateScreen />,
        errorElement: <ErrorScreen />,
        children: [
-          { path: '', element: <CreateStep1Screen /> },
+          {
-          { path: 'step-2', element: <CreateStep2Screen /> },
+            path: '',
-          { path: 'step-3', element: <CreateStep3Screen /> },
+            async lazy() {
-          { path: 'step-4', element: <CreateStep4Screen /> },
+              const { CreateStep1Screen } = await import('@app/auth/create/step-1');
-          { path: 'step-5', element: <CreateStep5Screen /> },
+              return { Component: CreateStep1Screen };
            },
          },
          {
            path: 'step-2',
            async lazy() {
              const { CreateStep2Screen } = await import('@app/auth/create/step-2');
              return { Component: CreateStep2Screen };
            },
          },
          {
            path: 'step-3',
            async lazy() {
              const { CreateStep3Screen } = await import('@app/auth/create/step-3');
              return { Component: CreateStep3Screen };
            },
          },
        ],
      },
-      { path: 'unlock', element: <UnlockScreen /> },
+      {
-      { path: 'migrate', element: <MigrateScreen /> },
+        path: 'onboarding',
-      { path: 'reset', element: <ResetScreen /> },
+        element: <OnboardingScreen />,
-    ],
+        errorElement: <ErrorScreen />,
-  },
+        children: [
-  {
+          {
-    path: '/app',
+            path: '',
-    element: (
+            async lazy() {
-      <Protected>
+              const { OnboardStep1Screen } = await import('@app/auth/onboarding/step-1');
-        <AppLayout />
+              return { Component: OnboardStep1Screen };
-      </Protected>
+            },
-    ),
+          },
-    children: [
+          {
-      { path: 'space', element: <SpaceScreen /> },
+            path: 'step-2',
-      { path: 'trending', element: <TrendingScreen /> },
+            async lazy() {
-      { path: 'note/:id', element: <NoteScreen /> },
+              const { OnboardStep2Screen } = await import('@app/auth/onboarding/step-2');
-      { path: 'users/:pubkey', element: <UserScreen /> },
+              return { Component: OnboardStep2Screen };
-      { path: 'chats/:pubkey', element: <ChatScreen /> },
+            },
-      { path: 'channel/:id', element: <ChannelScreen /> },
+          },
          {
            path: 'step-3',
            async lazy() {
              const { OnboardStep3Screen } = await import('@app/auth/onboarding/step-3');
              return { Component: OnboardStep3Screen };
            },
          },
        ],
      },
      {
        path: 'unlock',
        async lazy() {
          const { UnlockScreen } = await import('@app/auth/unlock');
          return { Component: UnlockScreen };
        },
      },
      {
        path: 'migrate',
        async lazy() {
          const { MigrateScreen } = await import('@app/auth/migrate');
          return { Component: MigrateScreen };
        },
      },
      {
        path: 'reset',
        async lazy() {
          const { ResetScreen } = await import('@app/auth/reset');
          return { Component: ResetScreen };
        },
      },
      {
        path: 'hard-reset',
        async lazy() {
          const { HardResetScreen } = await import('@app/auth/hardReset');
          return { Component: HardResetScreen };
        },
      },
    ],
  },
  {
    path: '/settings',
-    element: (
+    element: <SettingsLayout />,
-      <Protected>
+    errorElement: <ErrorScreen />,
        <SettingsLayout />
      </Protected>
    ),
    children: [
-      { path: 'general', element: <GeneralSettingsScreen /> },
+      {
-      { path: 'shortcuts', element: <ShortcutsSettingsScreen /> },
+        path: '',
-      { path: 'account', element: <AccountSettingsScreen /> },
+        async lazy() {
          const { GeneralSettingsScreen } = await import('@app/settings/general');
          return { Component: GeneralSettingsScreen };
        },
      },
      {
        path: 'backup',
        async lazy() {
          const { AccountSettingsScreen } = await import('@app/settings/account');
          return { Component: AccountSettingsScreen };
        },
      },
    ],
  },
 ]);
@@ -110,8 +261,11 @@ export default function App() {
  return (
    <RouterProvider
      router={router}
-      fallbackElement={<p>Loading..</p>}
+      fallbackElement={
-      future={{ v7_startTransition: true }}
+        <Frame className="flex h-full w-full items-center justify-center">
          <LoaderIcon className="h-6 w-6 animate-spin text-white" />
        </Frame>
      }
    />
  );
 }
@@ -1,9 +1,7 @@
 import { Image } from '@shared/image';
 import { DEFAULT_AVATAR } from '@stores/constants';
 import { useProfile } from '@utils/hooks/useProfile';
-import { shortenKey } from '@utils/shortenKey';
+import { displayNpub } from '@utils/shortenKey';
 export function User({ pubkey, fallback }: { pubkey: string; fallback?: string }) {
  const { status, user } = useProfile(pubkey, fallback);
@@ -11,31 +9,28 @@ export function User({ pubkey, fallback }: { pubkey: string; fallback?: string }
  if (status === 'loading') {
    return (
      <div className="flex items-center gap-2">
-        <div className="relative h-10 w-10 shrink-0 animate-pulse rounded-md bg-zinc-800" />
+        <div className="relative h-10 w-10 shrink-0 animate-pulse rounded-md bg-white/10 backdrop-blur-xl" />
        <div className="flex w-full flex-1 flex-col items-start gap-1 text-start">
-          <span className="h-4 w-1/2 animate-pulse rounded bg-zinc-800" />
+          <span className="h-4 w-1/2 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
-          <span className="h-3 w-1/3 animate-pulse rounded bg-zinc-800" />
+          <span className="h-3 w-1/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
        </div>
      </div>
    );
  }
  return (
-    <div className="flex items-center gap-2">
+    <div className="flex items-center gap-2.5">
-      <div className="relative h-10 w-10 shrink rounded-md">
+      <Image
-        <Image
+        src={user?.picture || user?.image}
-          src={user?.picture || user?.image}
+        alt={pubkey}
-          fallback={DEFAULT_AVATAR}
+        className="h-10 w-10 shrink-0 rounded-lg object-cover"
-          alt={pubkey}
+      />
          className="h-10 w-10 rounded-md object-cover"
        />
      </div>
      <div className="flex w-full flex-1 flex-col items-start text-start">
-        <span className="truncate font-medium leading-tight text-zinc-100">
+        <p className="max-w-[15rem] truncate font-medium leading-tight text-white">
-          {user?.name || user?.displayName || user?.display_name}
+          {user?.name || user?.display_name}
-        </span>
+        </p>
-        <span className="max-w-[15rem] truncate text-base leading-tight text-zinc-400">
+        <span className="max-w-[15rem] truncate leading-tight text-white/50">
-          {user?.nip05?.toLowerCase() || shortenKey(pubkey)}
+          {displayNpub(pubkey, 16)}
        </span>
      </div>
    </div>
@@ -0,0 +1,36 @@
 import { Image } from '@shared/image';
 import { useProfile } from '@utils/hooks/useProfile';
 import { displayNpub } from '@utils/shortenKey';
 export function UserRelay({ pubkey }: { pubkey: string }) {
  const { status, user } = useProfile(pubkey);
  if (status === 'loading') {
    return (
      <div className="flex items-center gap-2">
        <div className="relative h-10 w-10 shrink-0 animate-pulse rounded-md bg-white/10 backdrop-blur-xl" />
        <div className="flex w-full flex-1 flex-col items-start gap-1 text-start">
          <span className="h-4 w-1/2 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
          <span className="h-3 w-1/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
        </div>
      </div>
    );
  }
  return (
    <div className="inline-flex items-center gap-2 text-white/50">
      <span className="text-sm">Use by</span>
      <div className="inline-flex items-center gap-1">
        <Image
          src={user?.picture || user?.image}
          alt={pubkey}
          className="h-5 w-5 shrink-0 rounded object-cover"
        />
        <span className="truncate text-sm font-medium leading-none text-white">
          {user?.name || user?.display_name || displayNpub(pubkey, 16)}
        </span>
      </div>
    </div>
  );
 }
@@ -1,6 +1,19 @@
 import { useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 import { useOnboarding } from '@stores/onboarding';
 import { useStronghold } from '@stores/stronghold';
 export function AuthCreateScreen() {
  const [step, tmpPrivkey] = useOnboarding((state) => [state.step, state.tempPrivkey]);
  const setPrivkey = useStronghold((state) => state.setPrivkey);
  useEffect(() => {
    if (step) {
      setPrivkey(tmpPrivkey);
    }
  }, [tmpPrivkey]);
  return (
    <div className="flex h-full w-full items-center justify-center">
      <Outlet />
@@ -1,22 +1,25 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { BaseDirectory, writeTextFile } from '@tauri-apps/api/fs';
 import { generatePrivateKey, getPublicKey, nip19 } from 'nostr-tools';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { createAccount } from '@libs/storage';
+import { useStorage } from '@libs/storage/provider';
 import { Button } from '@shared/button';
 import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
 import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
 import { useOnboarding } from '@stores/onboarding';
 import { useStronghold } from '@stores/stronghold';
 export function CreateStep1Screen() {
-  const queryClient = useQueryClient();
+  const { db } = useStorage();
  const navigate = useNavigate();
  const setPrivkey = useStronghold((state) => state.setPrivkey);
  const setTempPrivkey = useOnboarding((state) => state.setTempPrivkey);
  const setPubkey = useOnboarding((state) => state.setPubkey);
  const setStep = useOnboarding((state) => state.setStep);
  const [privkeyInput, setPrivkeyInput] = useState('password');
  const [loading, setLoading] = useState(false);
@@ -38,8 +41,8 @@ export function CreateStep1Screen() {
  const download = async () => {
    await writeTextFile(
-      'lume-keys.txt',
+      `nostr_keys_${new Date().toISOString().slice(0, 10)}.txt`,
-      `Public key: ${pubkey}\nPrivate key: ${privkey}`,
+      `Generated by Lume (lume.nu)\nPublic key: ${npub}\nPrivate key: ${nsec}`,
      {
        dir: BaseDirectory.Download,
      }
@@ -47,81 +50,62 @@ export function CreateStep1Screen() {
    setDownloaded(true);
  };
  const account = useMutation({
    mutationFn: (data: {
      npub: string;
      pubkey: string;
      follows: null | string[][];
      is_active: number;
    }) => {
      return createAccount(data.npub, data.pubkey, null, 1);
    },
    onSuccess: (data) => {
      queryClient.setQueryData(['currentAccount'], data);
    },
  });
  const submit = () => {
    setLoading(true);
-    setPubkey(pubkey);
+    // update state
    setPrivkey(privkey);
    setTempPrivkey(privkey); // only use if user close app and reopen it
    setPubkey(pubkey);
-    account.mutate({
+    // save to database
-      npub,
+    db.createAccount(npub, pubkey);
      pubkey,
      follows: null,
      is_active: 1,
    });
    // redirect to next step
-    setTimeout(() => navigate('/auth/create/step-2', { replace: true }), 1200);
+    navigate('/auth/create/step-2', { replace: true });
  };
  useEffect(() => {
    // save current step, if user close app and reopen it
    setStep('/auth/create/step-1');
  }, []);
  return (
    <div className="mx-auto w-full max-w-md">
      <div className="mb-8 text-center">
-        <h1 className="text-xl font-semibold text-zinc-100">Save your access key!</h1>
+        <h1 className="text-xl font-semibold text-white">Save your access key!</h1>
      </div>
      <div className="flex flex-col gap-4">
        <div className="flex flex-col gap-1">
-          <span className="text-base font-semibold text-zinc-400">Public Key</span>
+          <span className="text-base font-semibold text-white/50">Public Key</span>
          <input
            readOnly
            value={npub}
-            className="relative w-full rounded-lg bg-zinc-800 py-3 pl-3.5 pr-11 text-zinc-100 !outline-none placeholder:text-zinc-400"
+            className="relative h-11 w-full rounded-lg bg-white/10 px-3.5 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
          />
        </div>
        <div className="flex flex-col gap-1">
-          <span className="text-base font-semibold text-zinc-400">Private Key</span>
+          <span className="text-base font-semibold text-white/50">Private Key</span>
          <div className="relative">
            <input
              readOnly
              type={privkeyInput}
              value={nsec}
-              className="relative w-full rounded-lg bg-zinc-800 py-3 pl-3.5 pr-11 text-zinc-100 !outline-none placeholder:text-zinc-400"
+              className="relative h-11 w-full rounded-lg bg-white/10 py-1 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
            />
            <button
              type="button"
              onClick={() => showPrivateKey()}
-              className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
+              className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 backdrop-blur-xl hover:bg-white/10"
            >
              {privkeyInput === 'password' ? (
-                <EyeOffIcon
+                <EyeOffIcon className="h-4 w-4 text-white/50 group-hover:text-white" />
                  width={20}
                  height={20}
                  className="text-zinc-500 group-hover:text-zinc-100"
                />
              ) : (
-                <EyeOnIcon
+                <EyeOnIcon className="h-4 w-4 text-white/50 group-hover:text-white" />
                  width={20}
                  height={20}
                  className="text-zinc-500 group-hover:text-zinc-100"
                />
              )}
            </button>
          </div>
-          <div className="mt-2 text-sm text-zinc-500">
+          <div className="mt-2 text-sm text-white/50">
            <p>
              Your private key is your password. If you lose this key, you will lose
              access to your account! Copy it and keep it in a safe place. There is no way
@@ -130,15 +114,29 @@ export function CreateStep1Screen() {
          </div>
        </div>
        <div className="flex flex-col gap-2">
-          <Button preset="large" onClick={() => submit()}>
+          <button
            type="button"
            onClick={() => submit()}
            className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
          >
            {loading ? (
-              <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
+              <>
                <span className="w-5" />
                <span>Creating...</span>
                <LoaderIcon className="h-5 w-5 animate-spin text-white" />
              </>
            ) : (
-              'I have saved my key, continue →'
+              <>
                <span className="w-5" />
                <span>I have saved my key, continue</span>
                <ArrowRightCircleIcon className="h-5 w-5" />
              </>
            )}
-          </Button>
+          </button>
          {downloaded ? (
-            <span className="text-sm text-zinc-400">Saved in download folder</span>
+            <span className="inline-flex h-11 w-full items-center justify-center text-sm text-white/50">
              Saved in Download folder
            </span>
          ) : (
            <Button preset="large-alt" onClick={() => download()}>
              Download
@@ -1,14 +1,17 @@
-import { useState } from 'react';
+import { appConfigDir } from '@tauri-apps/api/path';
 import { useEffect, useState } from 'react';
 import { Resolver, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { Stronghold } from 'tauri-plugin-stronghold-api';
 import { useStorage } from '@libs/storage/provider';
 import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
 import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
 import { useOnboarding } from '@stores/onboarding';
 import { useStronghold } from '@stores/stronghold';
 import { useSecureStorage } from '@utils/hooks/useSecureStorage';
 type FormValues = {
  password: string;
 };
@@ -29,14 +32,14 @@ const resolver: Resolver<FormValues> = async (values) => {
 export function CreateStep2Screen() {
  const navigate = useNavigate();
  const setStep = useOnboarding((state) => state.setStep);
  const pubkey = useOnboarding((state) => state.pubkey);
  const privkey = useStronghold((state) => state.privkey);
  const [passwordInput, setPasswordInput] = useState('password');
  const [loading, setLoading] = useState(false);
-  const privkey = useStronghold((state) => state.privkey);
+  const { db } = useStorage();
  const pubkey = useOnboarding((state) => state.pubkey);
  const { save } = useSecureStorage();
  // toggle private key
  const showPassword = () => {
@@ -57,8 +60,13 @@ export function CreateStep2Screen() {
  const onSubmit = async (data: { [x: string]: string }) => {
    setLoading(true);
    if (data.password.length > 3) {
      const dir = await appConfigDir();
      const stronghold = await Stronghold.load(`${dir}/lume.stronghold`, data.password);
      db.secureDB = stronghold;
      // save privkey to secure storage
-      await save(pubkey, privkey, data.password);
+      await db.secureSave(pubkey, privkey);
      // redirect to next step
      navigate('/auth/create/step-3', { replace: true });
@@ -71,10 +79,15 @@ export function CreateStep2Screen() {
    }
  };
  useEffect(() => {
    // save current step, if user close app and reopen it
    setStep('/auth/create/step-2');
  }, []);
  return (
    <div className="mx-auto w-full max-w-md">
      <div className="mb-8 text-center">
-        <h1 className="text-xl font-semibold text-zinc-100">
+        <h1 className="text-xl font-semibold text-white">
          Set password to secure your key
        </h1>
      </div>
@@ -85,29 +98,21 @@ export function CreateStep2Screen() {
              <input
                {...register('password', { required: true })}
                type={passwordInput}
-                className="relative w-full rounded-lg bg-zinc-800 py-3 pl-3.5 pr-11 text-zinc-100 !outline-none placeholder:text-zinc-400"
+                className="relative h-11 w-full rounded-lg bg-white/10 px-3.5 py-1 text-center text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
              />
              <button
                type="button"
                onClick={() => showPassword()}
-                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
+                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 backdrop-blur-xl hover:bg-white/10"
              >
                {passwordInput === 'password' ? (
-                  <EyeOffIcon
+                  <EyeOffIcon className="h-4 w-4 text-white/50 group-hover:text-white" />
                    width={20}
                    height={20}
                    className="text-zinc-500 group-hover:text-zinc-100"
                  />
                ) : (
-                  <EyeOnIcon
+                  <EyeOnIcon className="h-4 w-4 text-white/50 group-hover:text-white" />
                    width={20}
                    height={20}
                    className="text-zinc-500 group-hover:text-zinc-100"
                  />
                )}
              </button>
            </div>
-            <div className="text-sm text-zinc-500">
+            <div className="text-sm text-white/50">
              <p>
                Password is use to secure your key store in local machine, when you move
                to other clients, you just need to copy your private key as nsec or
@@ -122,12 +127,20 @@ export function CreateStep2Screen() {
            <button
              type="submit"
              disabled={!isDirty || !isValid}
-              className="inline-flex h-11 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-zinc-100 hover:bg-fuchsia-600 disabled:pointer-events-none disabled:opacity-50"
+              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
            >
              {loading ? (
-                <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
+                <>
                  <span className="w-5" />
                  <span>Creating...</span>
                  <LoaderIcon className="h-5 w-5 animate-spin text-white" />
                </>
              ) : (
-                'Continue →'
+                <>
                  <span className="w-5" />
                  <span>Continue</span>
                  <ArrowRightCircleIcon className="h-5 w-5" />
                </>
              )}
            </button>
          </div>
@@ -1,74 +1,84 @@
-import { useState } from 'react';
+import { NDKKind } from '@nostr-dev-kit/ndk';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { AvatarUploader } from '@shared/avatarUploader';
 import { BannerUploader } from '@shared/bannerUploader';
 import { LoaderIcon } from '@shared/icons';
 import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
 import { Image } from '@shared/image';
 import { DEFAULT_AVATAR } from '@stores/constants';
 import { useOnboarding } from '@stores/onboarding';
 import { useNostr } from '@utils/hooks/useNostr';
 export function CreateStep3Screen() {
  const navigate = useNavigate();
-  const createProfile = useOnboarding((state) => state.createProfile);
+  const setStep = useOnboarding((state) => state.setStep);
  const [picture, setPicture] = useState(DEFAULT_AVATAR);
  const [banner, setBanner] = useState('');
  const [loading, setLoading] = useState(false);
  const [picture, setPicture] = useState('https://void.cat/d/5VKmKyuHyxrNMf9bWSVPih');
  const [banner, setBanner] = useState('');
  const { publish } = useNostr();
  const {
    register,
    handleSubmit,
    formState: { isDirty, isValid },
  } = useForm();
-  const onSubmit = (data: { name: string; about: string }) => {
+  const onSubmit = async (data: { name: string; about: string; website: string }) => {
    setLoading(true);
    try {
      const profile = {
        ...data,
        username: data.name,
        name: data.name,
        display_name: data.name,
        bio: data.about,
        website: data.website,
      };
-      createProfile(profile);
+
-      // redirect to next step
+      const event = await publish({
-      setTimeout(() => navigate('/auth/create/step-4', { replace: true }), 1200);
+        content: JSON.stringify(profile),
-    } catch {
+        kind: NDKKind.Metadata,
-      console.log('error');
+        tags: [],
      });
      if (event) {
        navigate('/auth/onboarding', { replace: true });
      }
    } catch (e) {
      console.log('error: ', e);
      setLoading(false);
    }
  };
  useEffect(() => {
    // save current step, if user close app and reopen it
    setStep('/auth/create/step-3');
  }, []);
  return (
    <div className="mx-auto w-full max-w-md">
      <div className="mb-8 text-center">
-        <h1 className="text-xl font-semibold text-zinc-100">Create your profile</h1>
+        <h1 className="text-xl font-semibold text-white">Create your profile</h1>
      </div>
-      <div className="w-full overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900">
+      <div className="w-full overflow-hidden rounded-xl bg-white/10 backdrop-blur-xl">
        <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col">
-          <input
+          <input type={'hidden'} {...register('picture')} value={picture} />
-            type={'hidden'}
+          <input type={'hidden'} {...register('banner')} value={banner} />
            {...register('picture')}
            value={picture}
            className="shadow-input relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-black/10 dark:placeholder:text-zinc-500"
          />
          <input
            type={'hidden'}
            {...register('banner')}
            value={banner}
            className="shadow-input relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-black/10 dark:placeholder:text-zinc-500"
          />
          <div className="relative">
-            <div className="relative h-44 w-full bg-zinc-800">
+            <div className="relative h-44 w-full bg-white/10 backdrop-blur-xl">
-              <Image
+              {banner ? (
-                src={banner}
+                <Image
-                fallback="https://void.cat/d/QY1myro5tkHVs2nY7dy74b.jpg"
+                  src={banner}
-                alt="user's banner"
+                  alt="user's banner"
-                className="h-full w-full object-cover"
+                  className="h-full w-full object-cover"
-              />
+                />
              ) : (
                <div className="h-full w-full bg-black/50" />
              )}
              <div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform">
                <BannerUploader setBanner={setBanner} />
              </div>
@@ -77,9 +87,8 @@ export function CreateStep3Screen() {
              <div className="relative z-10 -mt-7 h-14 w-14">
                <Image
                  src={picture}
                  fallback={DEFAULT_AVATAR}
                  alt="user's avatar"
-                  className="h-14 w-14 rounded-lg object-cover ring-2 ring-zinc-900"
+                  className="h-14 w-14 rounded-lg object-cover ring-2 ring-white/10"
                />
                <div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform">
                  <AvatarUploader setPicture={setPicture} />
@@ -91,7 +100,7 @@ export function CreateStep3Screen() {
            <div className="flex flex-col gap-1">
              <label
                htmlFor="name"
-                className="text-sm font-semibold uppercase tracking-wider text-zinc-400"
+                className="text-sm font-semibold uppercase tracking-wider text-white/50"
              >
                Name *
              </label>
@@ -102,26 +111,26 @@ export function CreateStep3Screen() {
                  minLength: 4,
                })}
                spellCheck={false}
-                className="relative h-10 w-full rounded-lg bg-zinc-800 px-3 py-2 text-zinc-100 !outline-none placeholder:text-zinc-500"
+                className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
              />
            </div>
            <div className="flex flex-col gap-1">
              <label
                htmlFor="about"
-                className="text-sm font-semibold uppercase tracking-wider text-zinc-400"
+                className="text-sm font-semibold uppercase tracking-wider text-white/50"
              >
                Bio
              </label>
              <textarea
                {...register('about')}
                spellCheck={false}
-                className="relative h-20 w-full resize-none rounded-lg bg-zinc-800 px-3 py-2 text-zinc-100 !outline-none placeholder:text-zinc-500"
+                className="relative h-20 w-full resize-none rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
              />
            </div>
            <div className="flex flex-col gap-1">
              <label
                htmlFor="website"
-                className="text-sm font-semibold uppercase tracking-wider text-zinc-400"
+                className="text-sm font-semibold uppercase tracking-wider text-white/50"
              >
                Website
              </label>
@@ -131,18 +140,26 @@ export function CreateStep3Screen() {
                  required: false,
                })}
                spellCheck={false}
-                className="relative h-10 w-full rounded-lg bg-zinc-800 px-3 py-2 text-zinc-100 !outline-none placeholder:text-zinc-500"
+                className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
              />
            </div>
            <button
              type="submit"
              disabled={!isDirty || !isValid}
-              className="inline-flex h-11 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-zinc-100 hover:bg-fuchsia-600"
+              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
            >
              {loading ? (
-                <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
+                <>
                  <span className="w-5" />
                  <span>Creating...</span>
                  <LoaderIcon className="h-5 w-5 animate-spin text-white" />
                </>
              ) : (
-                'Continue →'
+                <>
                  <span className="w-5" />
                  <span>Continue</span>
                  <ArrowRightCircleIcon className="h-5 w-5" />
                </>
              )}
            </button>
          </div>
@@ -1,86 +0,0 @@
 import { Body, fetch } from '@tauri-apps/api/http';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Button } from '@shared/button';
 import { LoaderIcon } from '@shared/icons';
 import { useOnboarding } from '@stores/onboarding';
 import { useAccount } from '@utils/hooks/useAccount';
 import { usePublish } from '@utils/hooks/usePublish';
 export function CreateStep4Screen() {
  const navigate = useNavigate();
  const profile = useOnboarding((state) => state.profile);
  const { publish } = usePublish();
  const { account } = useAccount();
  const [username, setUsername] = useState('');
  const [loading, setLoading] = useState(false);
  const createNIP05 = async () => {
    try {
      setLoading(true);
      const response = await fetch('https://lume.nu/api/user-create', {
        method: 'POST',
        timeout: 30,
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
        },
        body: Body.json({
          username: username,
          pubkey: account.pubkey,
          lightningAddress: '',
        }),
      });
      if (response.ok) {
        const data = { ...profile, nip05: `${username}@lume.nu` };
        publish({ content: JSON.stringify(data), kind: 0, tags: [] });
        // redirect to step 4
        navigate('/auth/create/step-5', { replace: true });
      }
    } catch (error) {
      setLoading(false);
      console.error('Error:', error);
    }
  };
  return (
    <div className="mx-auto w-full max-w-md">
      <div className="mb-8 text-center">
        <h1 className="text-xl font-semibold text-zinc-100">Create your Lume ID</h1>
      </div>
      <div className="flex w-full flex-col items-center justify-center gap-4">
        <div className="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-zinc-800">
          <input
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            autoCapitalize="false"
            autoCorrect="none"
            spellCheck="false"
            placeholder="satoshi"
            className="relative w-full bg-transparent py-3 pl-3.5 text-zinc-100 !outline-none placeholder:text-zinc-500"
          />
          <span className="pr-3.5 font-semibold text-fuchsia-500">@lume.nu</span>
        </div>
        <Button
          preset="large"
          onClick={() => createNIP05()}
          disabled={username.length === 0}
        >
          {loading ? (
            <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
          ) : (
            'Continue →'
          )}
        </Button>
      </div>
    </div>
  );
 }
@@ -1,224 +0,0 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { User } from '@app/auth/components/user';
 import { updateAccount } from '@libs/storage';
 import { CheckCircleIcon, LoaderIcon } from '@shared/icons';
 import { useAccount } from '@utils/hooks/useAccount';
 import { usePublish } from '@utils/hooks/usePublish';
 import { arrayToNIP02 } from '@utils/transform';
 const INITIAL_LIST = [
  {
    pubkey: '82341f882b6eabcd2ba7f1ef90aad961cf074af15b9ef44a09f9d2a8fbfbe6a2',
  },
  {
    pubkey: 'a341f45ff9758f570a21b000c17d4e53a3a497c8397f26c0e6d61e5acffc7a98',
  },
  {
    pubkey: '04c915daefee38317fa734444acee390a8269fe5810b2241e5e6dd343dfbecc9',
  },
  {
    pubkey: 'c4eabae1be3cf657bc1855ee05e69de9f059cb7a059227168b80b89761cbc4e0',
  },
  {
    pubkey: '6e468422dfb74a5738702a8823b9b28168abab8655faacb6853cd0ee15deee93',
  },
  {
    pubkey: 'e88a691e98d9987c964521dff60025f60700378a4879180dcbbb4a5027850411',
  },
  {
    pubkey: '3bf0c63fcb93463407af97a5e5ee64fa883d107ef9e558472c4eb9aaaefa459d',
  },
  {
    pubkey: 'c49d52a573366792b9a6e4851587c28042fb24fa5625c6d67b8c95c8751aca15',
  },
  {
    pubkey: 'e33fe65f1fde44c6dc17eeb38fdad0fceaf1cae8722084332ed1e32496291d42',
  },
  {
    pubkey: '84dee6e676e5bb67b4ad4e042cf70cbd8681155db535942fcc6a0533858a7240',
  },
  {
    pubkey: '703e26b4f8bc0fa57f99d815dbb75b086012acc24fc557befa310f5aa08d1898',
  },
  {
    pubkey: 'bf2376e17ba4ec269d10fcc996a4746b451152be9031fa48e74553dde5526bce',
  },
  {
    pubkey: '4523be58d395b1b196a9b8c82b038b6895cb02b683d0c253a955068dba1facd0',
  },
  {
    pubkey: 'c9b19ffcd43e6a5f23b3d27106ce19e4ad2df89ba1031dd4617f1b591e108965',
  },
  {
    pubkey: 'c7dccba4fe4426a7b1ea239a5637ba40fab9862c8c86b3330fe65e9f667435f6',
  },
  {
    pubkey: '6e1534f56fc9e937e06237c8ba4b5662bcacc4e1a3cfab9c16d89390bec4fca3',
  },
  {
    pubkey: '50d94fc2d8580c682b071a542f8b1e31a200b0508bab95a33bef0855df281d63',
  },
  {
    pubkey: '3d2e51508699f98f0f2bdbe7a45b673c687fe6420f466dc296d90b908d51d594',
  },
  {
    pubkey: '6e3f51664e19e082df5217fd4492bb96907405a0b27028671dd7f297b688608c',
  },
  {
    pubkey: '2edbcea694d164629854a52583458fd6d965b161e3c48b57d3aff01940558884',
  },
  {
    pubkey: '3f770d65d3a764a9c5cb503ae123e62ec7598ad035d836e2a810f3877a745b24',
  },
  {
    pubkey: 'eab0e756d32b80bcd464f3d844b8040303075a13eabc3599a762c9ac7ab91f4f',
  },
  {
    pubkey: 'be1d89794bf92de5dd64c1e60f6a2c70c140abac9932418fee30c5c637fe9479',
  },
  {
    pubkey: 'a5e93aef8e820cbc7ab7b6205f854b87aed4b48c5f6b30fbbeba5c99e40dcf3f',
  },
  {
    pubkey: '1989034e56b8f606c724f45a12ce84a11841621aaf7182a1f6564380b9c4276b',
  },
  {
    pubkey: 'c48b5cced5ada74db078df6b00fa53fc1139d73bf0ed16de325d52220211dbd5',
  },
  {
    pubkey: '460c25e682fda7832b52d1f22d3d22b3176d972f60dcdc3212ed8c92ef85065c',
  },
  {
    pubkey: '7f3b464b9ff3623630485060cbda3a7790131c5339a7803bde8feb79a5e1b06a',
  },
  {
    pubkey: 'b99dbca0184a32ce55904cb267b22e434823c97f418f36daf5d2dff0dd7b5c27',
  },
  {
    pubkey: 'e9e4276490374a0daf7759fd5f475deff6ffb9b0fc5fa98c902b5f4b2fe3bba2',
  },
  {
    pubkey: 'ea2e3c814d08a378f8a5b8faecb2884d05855975c5ca4b5c25e2d6f936286f14',
  },
  {
    pubkey: 'ff04a0e6cd80c141b0b55825fed127d4532a6eecdb7e743a38a3c28bf9f44609',
  },
 ];
 export function CreateStep5Screen() {
  const queryClient = useQueryClient();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [follows, setFollows] = useState([]);
  const { publish } = usePublish();
  const { account } = useAccount();
  const { status, data } = useQuery(['trending-profiles'], async () => {
    const res = await fetch('https://api.nostr.band/v0/trending/profiles');
    if (!res.ok) {
      throw new Error('Error');
    }
    return res.json();
  });
  // toggle follow state
  const toggleFollow = (pubkey: string) => {
    const arr = follows.includes(pubkey)
      ? follows.filter((i) => i !== pubkey)
      : [...follows, pubkey];
    setFollows(arr);
  };
  const update = useMutation({
    mutationFn: (follows: string[]) => {
      return updateAccount('follows', follows, account.pubkey);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['currentAccount'] });
    },
  });
  // save follows to database then broadcast
  const submit = async () => {
    try {
      setLoading(true);
      const tags = arrayToNIP02([...follows, account.pubkey]);
      publish({ content: '', kind: 3, tags: tags });
      // update
      update.mutate([...follows, account.pubkey]);
      // redirect to next step
      setTimeout(() => navigate('/auth/onboarding', { replace: true }), 1200);
    } catch {
      console.log('error');
    }
  };
  const list = data ? data.profiles.concat(INITIAL_LIST) : INITIAL_LIST;
  return (
    <div className="mx-auto w-full max-w-md">
      <div className="mb-8 text-center">
        <h1 className="text-xl font-semibold text-zinc-100">
          Personalized your newsfeed
        </h1>
      </div>
      <div className="flex flex-col gap-4">
        <div className="w-full overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900">
          <div className="inline-flex h-10 w-full items-center gap-1 border-b border-zinc-800 px-4 text-base font-medium text-zinc-400">
            Follow at least
            <span className="font-semibold text-fuchsia-500">
              {follows.length}/10
            </span>{' '}
            plebs
          </div>
          {status === 'loading' ? (
            <div className="inline-flex h-11 w-full items-center justify-center px-4 py-2">
              <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
            </div>
          ) : (
            <div className="scrollbar-hide flex h-96 flex-col overflow-y-auto py-2">
              {list.map((item: { pubkey: string; profile: { content: string } }) => (
                <button
                  key={item.pubkey}
                  type="button"
                  onClick={() => toggleFollow(item.pubkey)}
                  className="inline-flex transform items-center justify-between bg-zinc-900 px-4 py-2 hover:bg-zinc-800 active:translate-y-1"
                >
                  <User pubkey={item.pubkey} fallback={item.profile?.content} />
                  {follows.includes(item.pubkey) && (
                    <div>
                      <CheckCircleIcon className="h-4 w-4 text-green-400" />
                    </div>
                  )}
                </button>
              ))}
            </div>
          )}
        </div>
        {follows.length >= 10 && (
          <button
            type="button"
            onClick={() => submit()}
            className="inline-flex h-11 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-zinc-100 hover:bg-fuchsia-600"
          >
            {loading ? (
              <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
            ) : (
              'Finish →'
            )}
          </button>
        )}
      </div>
    </div>
  );
 }
@@ -0,0 +1,7 @@
 export function HardResetScreen() {
  return (
    <div>
      <p>hard reset</p>
    </div>
  );
 }
@@ -1,6 +1,19 @@
 import { useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 import { useOnboarding } from '@stores/onboarding';
 import { useStronghold } from '@stores/stronghold';
 export function AuthImportScreen() {
  const [step, tmpPrivkey] = useOnboarding((state) => [state.step, state.tempPrivkey]);
  const setPrivkey = useStronghold((state) => state.setPrivkey);
  useEffect(() => {
    if (step) {
      setPrivkey(tmpPrivkey);
    }
  }, [tmpPrivkey]);
  return (
    <div className="flex h-full w-full items-center justify-center">
      <Outlet />
@@ -1,12 +1,12 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { getPublicKey, nip19 } from 'nostr-tools';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Resolver, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
-import { createAccount } from '@libs/storage';
+import { useStorage } from '@libs/storage/provider';
 import { LoaderIcon } from '@shared/icons';
 import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
 import { useOnboarding } from '@stores/onboarding';
 import { useStronghold } from '@stores/stronghold';
@@ -30,27 +30,15 @@ const resolver: Resolver<FormValues> = async (values) => {
 };
 export function ImportStep1Screen() {
  const queryClient = useQueryClient();
  const navigate = useNavigate();
  const setPrivkey = useStronghold((state) => state.setPrivkey);
  const setTempPubkey = useOnboarding((state) => state.setTempPrivkey);
  const setPubkey = useOnboarding((state) => state.setPubkey);
  const setStep = useOnboarding((state) => state.setStep);
  const [loading, setLoading] = useState(false);
-  const account = useMutation({
+  const { db } = useStorage();
    mutationFn: (data: {
      npub: string;
      pubkey: string;
      follows: null | string[];
      is_active: number | boolean;
    }) => {
      return createAccount(data.npub, data.pubkey, null, 1);
    },
    onSuccess: (data) => {
      queryClient.setQueryData(['currentAccount'], data);
    },
  });
  const {
    register,
    setError,
@@ -71,44 +59,43 @@ export function ImportStep1Screen() {
        const pubkey = getPublicKey(privkey);
        const npub = nip19.npubEncode(pubkey);
        // use for onboarding process only
        setPubkey(pubkey);
        // add stronghold state
        setPrivkey(privkey);
        setTempPubkey(privkey); // only use if user close app and reopen it
        setPubkey(pubkey);
        // add account to local database
-        account.mutate({
+        db.createAccount(npub, pubkey);
          npub,
          pubkey,
          follows: null,
          is_active: 1,
        });
        // redirect to step 2
-        setTimeout(() => navigate('/auth/import/step-2', { replace: true }), 1200);
+        navigate('/auth/import/step-2', { replace: true });
      }
    } catch (error) {
      setError('privkey', {
        type: 'custom',
-        message: 'Private Key is invalid, please check again',
+        message: 'Private key is invalid, please check again',
      });
    }
  };
  useEffect(() => {
    // save current step, if user close app and reopen it
    setStep('/auth/import/step-1');
  }, []);
  return (
    <div className="mx-auto w-full max-w-md">
      <div className="mb-8 text-center">
-        <h1 className="text-xl font-semibold text-zinc-100">Import your key</h1>
+        <h1 className="text-xl font-semibold text-white">Import your key</h1>
      </div>
      <div className="flex flex-col gap-4">
-        <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-3">
+        <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col gap-3">
          <div className="flex flex-col gap-1">
-            <span className="text-base font-semibold text-zinc-400">Private key</span>
+            <span className="text-base font-semibold text-white/50">Private key</span>
            <input
              {...register('privkey', { required: true, minLength: 32 })}
              type={'password'}
              placeholder="nsec or hexstring"
-              className="relative w-full rounded-lg bg-zinc-800 px-3 py-3 text-zinc-100 !outline-none placeholder:text-zinc-500"
+              className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
            />
            <span className="text-sm text-red-400">
              {errors.privkey && <p>{errors.privkey.message}</p>}
@@ -118,12 +105,20 @@ export function ImportStep1Screen() {
            <button
              type="submit"
              disabled={!isDirty || !isValid}
-              className="inline-flex h-11 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-zinc-100 hover:bg-fuchsia-600"
+              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
            >
              {loading ? (
-                <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
+                <>
                  <span className="w-5" />
                  <span>Creating...</span>
                  <LoaderIcon className="h-5 w-5 animate-spin text-white" />
                </>
              ) : (
-                'Continue →'
+                <>
                  <span className="w-5" />
                  <span>Continue</span>
                  <ArrowRightCircleIcon className="h-5 w-5" />
                </>
              )}
            </button>
          </div>
@@ -1,14 +1,17 @@
-import { useState } from 'react';
+import { appConfigDir } from '@tauri-apps/api/path';
 import { useEffect, useState } from 'react';
 import { Resolver, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { Stronghold } from 'tauri-plugin-stronghold-api';
 import { useStorage } from '@libs/storage/provider';
 import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
 import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
 import { useOnboarding } from '@stores/onboarding';
 import { useStronghold } from '@stores/stronghold';
 import { useSecureStorage } from '@utils/hooks/useSecureStorage';
 type FormValues = {
  password: string;
 };
@@ -29,14 +32,14 @@ const resolver: Resolver<FormValues> = async (values) => {
 export function ImportStep2Screen() {
  const navigate = useNavigate();
  const setStep = useOnboarding((state) => state.setStep);
  const pubkey = useOnboarding((state) => state.pubkey);
  const privkey = useStronghold((state) => state.privkey);
  const [passwordInput, setPasswordInput] = useState('password');
  const [loading, setLoading] = useState(false);
-  const privkey = useStronghold((state) => state.privkey);
+  const { db } = useStorage();
  const pubkey = useOnboarding((state) => state.pubkey);
  const { save } = useSecureStorage();
  // toggle private key
  const showPassword = () => {
@@ -57,8 +60,13 @@ export function ImportStep2Screen() {
  const onSubmit = async (data: { [x: string]: string }) => {
    setLoading(true);
    if (data.password.length > 3) {
      const dir = await appConfigDir();
      const stronghold = await Stronghold.load(`${dir}/lume.stronghold`, data.password);
      db.secureDB = stronghold;
      // save privkey to secure storage
-      await save(pubkey, privkey, data.password);
+      await db.secureSave(pubkey, privkey);
      // redirect to next step
      navigate('/auth/import/step-3', { replace: true });
@@ -71,10 +79,15 @@ export function ImportStep2Screen() {
    }
  };
  useEffect(() => {
    // save current step, if user close app and reopen it
    setStep('/auth/import/step-2');
  }, []);
  return (
    <div className="mx-auto w-full max-w-md">
      <div className="mb-8 text-center">
-        <h1 className="text-xl font-semibold text-zinc-100">
+        <h1 className="text-xl font-semibold text-white">
          Set password to secure your key
        </h1>
      </div>
@@ -85,35 +98,25 @@ export function ImportStep2Screen() {
              <input
                {...register('password', { required: true })}
                type={passwordInput}
-                className="relative w-full rounded-lg bg-zinc-800 py-3 pl-3.5 pr-11 text-zinc-100 !outline-none placeholder:text-zinc-400"
+                className="relative h-11 w-full rounded-lg bg-white/10 px-3.5 py-1 text-center text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
              />
              <button
                type="button"
                onClick={() => showPassword()}
-                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
+                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 backdrop-blur-xl hover:bg-white/10"
              >
                {passwordInput === 'password' ? (
-                  <EyeOffIcon
+                  <EyeOffIcon className="h-4 w-4 text-white/50 group-hover:text-white" />
                    width={20}
                    height={20}
                    className="text-zinc-500 group-hover:text-zinc-100"
                  />
                ) : (
-                  <EyeOnIcon
+                  <EyeOnIcon className="h-4 w-4 text-white/50 group-hover:text-white" />
                    width={20}
                    height={20}
                    className="text-zinc-500 group-hover:text-zinc-100"
                  />
                )}
              </button>
            </div>
-            <div className="text-sm text-zinc-500">
+            <p className="text-sm text-white/50">
-              <p>
+              Password is use to unlock app and secure your key store in local machine.
-                Password is use to unlock app and secure your key store in local machine.
+              When you move to other clients, you just need to copy your private key as
-                When you move to other clients, you just need to copy your private key as
+              nsec or hexstring
-                nsec or hexstring
+            </p>
              </p>
            </div>
            <span className="text-sm text-red-400">
              {errors.password && <p>{errors.password.message}</p>}
            </span>
@@ -122,12 +125,20 @@ export function ImportStep2Screen() {
            <button
              type="submit"
              disabled={!isDirty || !isValid}
-              className="inline-flex h-11 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-zinc-100 hover:bg-fuchsia-600 disabled:pointer-events-none disabled:opacity-50"
+              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
            >
              {loading ? (
-                <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
+                <>
                  <span className="w-5" />
                  <span>Creating...</span>
                  <LoaderIcon className="h-5 w-5 animate-spin text-white" />
                </>
              ) : (
-                'Continue →'
+                <>
                  <span className="w-5" />
                  <span>Continue</span>
                  <ArrowRightCircleIcon className="h-5 w-5" />
                </>
              )}
            </button>
          </div>
@@ -1,87 +1,82 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { User } from '@app/auth/components/user';
-import { useNDK } from '@libs/ndk/provider';
+import { useStorage } from '@libs/storage/provider';
 import { updateAccount } from '@libs/storage';
-import { Button } from '@shared/button';
+import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
 import { LoaderIcon } from '@shared/icons';
-import { useAccount } from '@utils/hooks/useAccount';
+import { useOnboarding } from '@stores/onboarding';
-import { setToArray } from '@utils/transform';
+
 import { useNostr } from '@utils/hooks/useNostr';
 export function ImportStep3Screen() {
  const queryClient = useQueryClient();
  const navigate = useNavigate();
  const setStep = useOnboarding((state) => state.setStep);
  const [loading, setLoading] = useState(false);
-  const { ndk } = useNDK();
+  const { db } = useStorage();
-  const { status, account } = useAccount();
+  const { fetchUserData, prefetchEvents } = useNostr();
  const update = useMutation({
    mutationFn: (follows: string[]) => {
      return updateAccount('follows', follows, account.pubkey);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['currentAccount'] });
    },
  });
  const submit = async () => {
    try {
      // show loading indicator
      setLoading(true);
-      const user = ndk.getUser({ hexpubkey: account.pubkey });
+      // prefetch data
-      const follows = await user.follows();
+      const user = await fetchUserData();
-
+      const data = await prefetchEvents();
      // follows as list
      const followsList = setToArray(follows);
      // update
      update.mutate([...followsList, account.pubkey]);
      // redirect to next step
-      setTimeout(() => navigate('/auth/onboarding', { replace: true }), 1200);
+      if (user.status === 'ok' && data.status === 'ok') {
-    } catch {
+        navigate('/auth/onboarding/step-2', { replace: true });
-      console.log('error');
+      } else {
        console.log('error: ', data.message);
        setLoading(false);
      }
    } catch (e) {
      console.log('error: ', e);
      setLoading(false);
    }
  };
  useEffect(() => {
    // save current step, if user close app and reopen it
    setStep('/auth/import/step-3');
  }, []);
  return (
    <div className="mx-auto w-full max-w-md">
      <div className="mb-8 text-center">
        <h1 className="text-xl font-semibold">
-          {loading ? 'Creating...' : 'Continue with'}
+          {loading ? 'Prefetching data...' : 'Continue with'}
        </h1>
      </div>
-      <div className="w-full rounded-xl border-t border-zinc-800/50 bg-zinc-900 p-4">
+      <div className="w-full rounded-xl bg-white/10 p-4 backdrop-blur-xl">
-        {status === 'loading' ? (
+        <div className="flex flex-col gap-3">
-          <div className="w-full">
+          <User pubkey={db.account.pubkey} />
-            <div className="flex items-center gap-2">
+          <button
-              <div className="h-11 w-11 animate-pulse rounded-lg bg-zinc-800" />
+            type="button"
-              <div>
+            className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
-                <div className="mb-1 h-4 w-16 animate-pulse rounded bg-zinc-800" />
+            onClick={() => submit()}
-                <div className="h-3 w-36 animate-pulse rounded bg-zinc-800" />
+          >
-              </div>
+            {loading ? (
-            </div>
+              <>
-          </div>
+                <span className="w-5" />
-        ) : (
+                <span>It might take a bit, please patient...</span>
-          <div className="flex flex-col gap-3">
+                <LoaderIcon className="h-5 w-5 animate-spin text-white" />
-            <User pubkey={account.pubkey} />
+              </>
-            <Button preset="large" onClick={() => submit()}>
+            ) : (
-              {loading ? (
+              <>
-                <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
+                <span className="w-5" />
-              ) : (
+                <span>Continue</span>
-                'Continue →'
+                <ArrowRightCircleIcon className="h-5 w-5" />
-              )}
+              </>
-            </Button>
+            )}
-          </div>
+          </button>
-        )}
+        </div>
      </div>
    </div>
  );
@@ -1,17 +1,16 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { appConfigDir } from '@tauri-apps/api/path';
 import { useState } from 'react';
 import { Resolver, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { Stronghold } from 'tauri-plugin-stronghold-api';
-import { removePrivkey } from '@libs/storage';
+import { useStorage } from '@libs/storage/provider';
 import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
 import { useStronghold } from '@stores/stronghold';
 import { useAccount } from '@utils/hooks/useAccount';
 import { useSecureStorage } from '@utils/hooks/useSecureStorage';
 type FormValues = {
  password: string;
 };
@@ -38,8 +37,7 @@ export function MigrateScreen() {
  const [passwordInput, setPasswordInput] = useState('password');
  const [loading, setLoading] = useState(false);
-  const { account } = useAccount();
+  const { db } = useStorage();
  const { save } = useSecureStorage();
  // toggle private key
  const showPassword = () => {
@@ -63,13 +61,18 @@ export function MigrateScreen() {
      // load private in secure storage
      try {
        // save privkey to secure storage
-        await save(account.pubkey, account.privkey, data.password);
+        const dir = await appConfigDir();
        const stronghold = await Stronghold.load(`${dir}/lume.stronghold`, data.password);
        if (!db.secureDB) db.secureDB = stronghold;
        await db.secureSave(db.account.pubkey, db.account.privkey);
        // add privkey to state
-        setPrivkey(account.privkey);
+        setPrivkey(db.account.privkey);
        // remove privkey in db
-        await removePrivkey();
+        await db.removePrivkey();
        // clear cache
-        await queryClient.invalidateQueries(['currentAccount']);
+        await queryClient.invalidateQueries(['account']);
        // redirect to home
        navigate('/', { replace: true });
      } catch {
@@ -92,23 +95,23 @@ export function MigrateScreen() {
    <div className="flex h-full w-full items-center justify-center">
      <div className="mx-auto w-full max-w-md">
        <div className="mb-8 text-center">
-          <h1 className="text-xl font-semibold text-zinc-100">
+          <h1 className="text-xl font-semibold text-white">
            Upgrade security for your account
          </h1>
        </div>
-        <div className="w-full rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
+        <div className="w-full rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
          <div className="flex flex-col gap-4">
            <div>
              <div className="mt-1">
-                <p className="text-sm text-zinc-400">
+                <p className="text-sm text-white/50">
                  You&apos;re using old Lume version which store your private key as
                  plaintext in database, this is huge security risk.
                </p>
-                <p className="mt-2 text-sm text-zinc-400">
+                <p className="mt-2 text-sm text-white/50">
                  To secure your private key, please set a password and Lume will put your
                  private key in secure storage.
                </p>
-                <p className="mt-2 text-sm text-zinc-400">
+                <p className="mt-2 text-sm text-white/50">
                  It is not possible to start the app without applying this step, it is
                  easy and fast!
                </p>
@@ -116,7 +119,7 @@ export function MigrateScreen() {
            </div>
            <form onSubmit={handleSubmit(onSubmit)} className="mb-0">
              <div className="flex flex-col gap-1">
-                <span className="font-medium text-zinc-200">
+                <span className="font-medium text-white">
                  Set a password to protect your key
                </span>
                <div className="relative">
@@ -124,24 +127,24 @@ export function MigrateScreen() {
                    {...register('password', { required: true })}
                    type={passwordInput}
                    placeholder="min. 4 characters"
-                    className="relative w-full rounded-lg bg-zinc-800 py-3 pl-3.5 pr-11 text-zinc-100 !outline-none placeholder:text-zinc-400"
+                    className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none placeholder:text-white/50"
                  />
                  <button
                    type="button"
                    onClick={() => showPassword()}
-                    className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
+                    className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-white/10"
                  >
                    {passwordInput === 'password' ? (
                      <EyeOffIcon
                        width={20}
                        height={20}
-                        className="text-zinc-500 group-hover:text-zinc-100"
+                        className="text-white/50 group-hover:text-white"
                      />
                    ) : (
                      <EyeOnIcon
                        width={20}
                        height={20}
-                        className="text-zinc-500 group-hover:text-zinc-100"
+                        className="text-white/50 group-hover:text-white"
                      />
                    )}
                  </button>
@@ -154,10 +157,10 @@ export function MigrateScreen() {
                <button
                  type="submit"
                  disabled={!isDirty || !isValid}
-                  className="mt-3 inline-flex h-11 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-zinc-100 hover:bg-fuchsia-600 disabled:pointer-events-none disabled:opacity-50"
+                  className="mt-3 inline-flex h-11 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-white hover:bg-fuchsia-600 disabled:pointer-events-none disabled:opacity-50"
                >
                  {loading ? (
-                    <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
+                    <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />
                  ) : (
                    'Continue →'
                  )}
@@ -1,100 +0,0 @@
 import { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { LoaderIcon } from '@shared/icons';
 import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
 import { User } from '@shared/user';
 import { useAccount } from '@utils/hooks/useAccount';
 import { usePublish } from '@utils/hooks/usePublish';
 export function OnboardingScreen() {
  const navigate = useNavigate();
  const { publish } = usePublish();
  const { status, account } = useAccount();
  const [loading, setLoading] = useState(false);
  const submit = async () => {
    try {
      setLoading(true);
      // publish event
      publish({
        content: 'Running Lume, join with me #nostr #lume : https://lume.nu',
        kind: 1,
        tags: [],
      });
      // redirect to home
      setTimeout(() => navigate('/', { replace: true }), 1200);
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <div className="flex h-full w-full items-center justify-center">
      <div className="mx-auto w-full max-w-md">
        <div className="mb-4 text-center">
          <h1 className="mb-2 text-xl font-semibold text-zinc-100">
            👋 Hello, welcome you to Lume
          </h1>
          <p className="text-sm text-zinc-300">
            You&apos;re a part of Nostr community now
          </p>
          <p className="text-sm text-zinc-300">
            If Lume gets your attention, please help us spread it and don&apos;t forget
            invite your friend join with you, we can have fun togother
          </p>
        </div>
        <div className="w-full rounded-xl border-t border-zinc-800/50 bg-zinc-900">
          <div className="h-min w-full px-5 py-3">
            {status === 'success' && (
              <User pubkey={account.pubkey} time={Math.floor(Date.now() / 1000)} />
            )}
            <div className="-mt-6 select-text whitespace-pre-line break-words	pl-[49px] text-base text-zinc-100">
              <p>Running Lume, join with me #nostr #lume</p>
              <a
                href="https://lume.nu"
                className="font-normal text-fuchsia-500 no-underline hover:text-fuchsia-600"
                target="_blank"
                rel="noreferrer"
              >
                https://lume.nu
              </a>
            </div>
          </div>
        </div>
        <div className="mt-4 flex w-full flex-col gap-2">
          <button
            type="button"
            onClick={() => submit()}
            className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium text-zinc-100 hover:bg-fuchsia-600"
          >
            {loading ? (
              <>
                <span className="w-5" />
                <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
                <span className="w-5" />
              </>
            ) : (
              <>
                <span className="w-5" />
                <span>Spread</span>
                <ArrowRightCircleIcon className="h-5 w-5" />
              </>
            )}
          </button>
          <Link
            to="/"
            className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-lg bg-zinc-800 px-6 font-medium text-zinc-300 hover:bg-zinc-900"
          >
            Skip
          </Link>
        </div>
      </div>
    </div>
  );
 }
@@ -0,0 +1,22 @@
 import { useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 import { useOnboarding } from '@stores/onboarding';
 import { useStronghold } from '@stores/stronghold';
 export function OnboardingScreen() {
  const [step, tmpPrivkey] = useOnboarding((state) => [state.step, state.tempPrivkey]);
  const setPrivkey = useStronghold((state) => state.setPrivkey);
  useEffect(() => {
    if (step) {
      setPrivkey(tmpPrivkey);
    }
  }, [tmpPrivkey]);
  return (
    <div className="flex h-full w-full items-center justify-center">
      <Outlet />
    </div>
  );
 }
@@ -0,0 +1,135 @@
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { User } from '@app/auth/components/user';
 import { useStorage } from '@libs/storage/provider';
 import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
 import { useOnboarding } from '@stores/onboarding';
 import { useNostr } from '@utils/hooks/useNostr';
 import { arrayToNIP02 } from '@utils/transform';
 export function OnboardStep1Screen() {
  const navigate = useNavigate();
  const setStep = useOnboarding((state) => state.setStep);
  const { publish, fetchUserData, prefetchEvents } = useNostr();
  const { db } = useStorage();
  const { status, data } = useQuery(['trending-profiles'], async () => {
    const res = await fetch('https://api.nostr.band/v0/trending/profiles');
    if (!res.ok) {
      throw new Error('Error');
    }
    return res.json();
  });
  const [loading, setLoading] = useState(false);
  const [follows, setFollows] = useState([]);
  // toggle follow state
  const toggleFollow = (pubkey: string) => {
    const arr = follows.includes(pubkey)
      ? follows.filter((i) => i !== pubkey)
      : [...follows, pubkey];
    setFollows(arr);
  };
  const submit = async () => {
    try {
      setLoading(true);
      const tags = arrayToNIP02([...follows, db.account.pubkey]);
      const event = await publish({ content: '', kind: 3, tags: tags });
      // prefetch data
      const user = await fetchUserData(follows);
      const data = await prefetchEvents();
      // redirect to next step
      if (event && user.status === 'ok' && data.status === 'ok') {
        navigate('/auth/onboarding/step-2', { replace: true });
      } else {
        setLoading(false);
        console.log('error: ', data.message);
      }
    } catch (e) {
      setLoading(false);
      console.log('error: ', e);
    }
  };
  useEffect(() => {
    // save current step, if user close app and reopen it
    setStep('/auth/onboarding');
  }, []);
  return (
    <div className="mx-auto w-full max-w-md">
      <div className="mb-8 text-center">
        <h1 className="text-xl font-semibold text-white">
          {loading ? 'Prefetching data...' : 'Enrich your network'}
        </h1>
        <p className="text-sm text-white/50">Choose account you want to follow</p>
      </div>
      <div className="flex flex-col gap-4">
        <div className="scrollbar-hide flex h-[500px] w-full flex-col overflow-y-auto rounded-xl bg-white/10 py-2 backdrop-blur-xl">
          {status === 'loading' ? (
            <div className="flex h-full w-full items-center justify-center">
              <LoaderIcon className="h-4 w-4 animate-spin text-white" />
            </div>
          ) : (
            data?.profiles.map(
              (item: { pubkey: string; profile: { content: string } }) => (
                <button
                  key={item.pubkey}
                  type="button"
                  onClick={() => toggleFollow(item.pubkey)}
                  className="inline-flex transform items-center justify-between px-4 py-2 hover:bg-white/20"
                >
                  <User pubkey={item.pubkey} fallback={item.profile?.content} />
                  {follows.includes(item.pubkey) && (
                    <div>
                      <CheckCircleIcon className="h-4 w-4 text-green-400" />
                    </div>
                  )}
                </button>
              )
            )
          )}
        </div>
        <div className="flex flex-col gap-2">
          <button
            type="button"
            onClick={submit}
            disabled={loading || follows.length === 0}
            className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
          >
            {loading ? (
              <>
                <span className="w-5" />
                <span>It might take a bit, please patient...</span>
                <LoaderIcon className="h-5 w-5 animate-spin text-white" />
              </>
            ) : (
              <>
                <span className="w-5" />
                <span>Follow {follows.length} accounts & Continue</span>
                <ArrowRightCircleIcon className="h-5 w-5" />
              </>
            )}
          </button>
          <Link
            to="/auth/onboarding/step-2"
            className="inline-flex h-11 w-full items-center justify-center rounded-lg px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/10 focus:outline-none"
          >
            Skip, you can add later
          </Link>
        </div>
      </div>
    </div>
  );
 }
@@ -0,0 +1,126 @@
 import { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useStorage } from '@libs/storage/provider';
 import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
 import { useOnboarding } from '@stores/onboarding';
 import { WidgetKinds } from '@stores/widgets';
 const data = [
  { hashtag: '#bitcoin' },
  { hashtag: '#nostr' },
  { hashtag: '#zap' },
  { hashtag: '#LFG' },
  { hashtag: '#zapchain' },
  { hashtag: '#plebchain' },
  { hashtag: '#nodes' },
  { hashtag: '#hodl' },
  { hashtag: '#stacksats' },
  { hashtag: '#nokyc' },
  { hashtag: '#anime' },
  { hashtag: '#waifu' },
  { hashtag: '#manga' },
  { hashtag: '#nostriches' },
  { hashtag: '#dev' },
 ];
 export function OnboardStep2Screen() {
  const navigate = useNavigate();
  const setStep = useOnboarding((state) => state.setStep);
  const [loading, setLoading] = useState(false);
  const [tags, setTags] = useState(new Set<string>());
  const { db } = useStorage();
  const toggleTag = (tag: string) => {
    if (tags.has(tag)) {
      setTags((prev) => {
        prev.delete(tag);
        return new Set(prev);
      });
    } else {
      if (tags.size >= 3) return;
      setTags((prev) => new Set(prev.add(tag)));
    }
  };
  const submit = async () => {
    try {
      setLoading(true);
      for (const tag of tags) {
        await db.createWidget(WidgetKinds.hashtag, tag, tag.replace('#', ''));
      }
      navigate('/auth/onboarding/step-3', { replace: true });
    } catch {
      console.log('error');
    }
  };
  useEffect(() => {
    // save current step, if user close app and reopen it
    setStep('/auth/onboarding/step-2');
  }, []);
  return (
    <div className="mx-auto w-full max-w-md">
      <div className="mb-8 text-center">
        <h1 className="text-xl font-semibold text-white">
          Choose {tags.size}/3 your favorite tags
        </h1>
        <p className="text-sm text-white/50">Customize your space which hashtag widget</p>
      </div>
      <div className="flex flex-col gap-4">
        <div className="scrollbar-hide flex h-[500px] w-full flex-col overflow-y-auto rounded-xl bg-white/10 backdrop-blur-xl">
          {data.map((item: { hashtag: string }) => (
            <button
              key={item.hashtag}
              type="button"
              onClick={() => toggleTag(item.hashtag)}
              className="inline-flex transform items-center justify-between bg-white/10 px-4 py-2 backdrop-blur-xl hover:bg-white/20"
            >
              <p className="text-white">{item.hashtag}</p>
              {tags.has(item.hashtag) && (
                <div>
                  <CheckCircleIcon className="h-4 w-4 text-green-400" />
                </div>
              )}
            </button>
          ))}
        </div>
        <div className="flex flex-col gap-2">
          <button
            type="button"
            onClick={submit}
            disabled={loading || tags.size === 0 || tags.size > 3}
            className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
          >
            {loading ? (
              <>
                <span className="w-5" />
                <span>Creating...</span>
                <LoaderIcon className="h-5 w-5 animate-spin text-white" />
              </>
            ) : (
              <>
                <span className="w-5" />
                <span>Add {tags.size} tags & Continue</span>
                <ArrowRightCircleIcon className="h-5 w-5" />
              </>
            )}
          </button>
          <Link
            to="/auth/onboarding/step-3"
            className="inline-flex h-11 w-full items-center justify-center rounded-lg px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/10 focus:outline-none"
          >
            Skip, you can add later
          </Link>
        </div>
      </div>
    </div>
  );
 }
@@ -0,0 +1,188 @@
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { UserRelay } from '@app/auth/components/userRelay';
 import { useNDK } from '@libs/ndk/provider';
 import { useStorage } from '@libs/storage/provider';
 import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
 import { FULL_RELAYS } from '@stores/constants';
 import { useOnboarding } from '@stores/onboarding';
 import { useNostr } from '@utils/hooks/useNostr';
 export function OnboardStep3Screen() {
  const navigate = useNavigate();
  const [setStep, clearStep] = useOnboarding((state) => [state.setStep, state.clearStep]);
  const [loading, setLoading] = useState(false);
  const [relays, setRelays] = useState(new Set<string>());
  const { publish } = useNostr();
  const { db } = useStorage();
  const { ndk } = useNDK();
  const { status, data } = useQuery(
    ['relays'],
    async () => {
      const tmp = new Map<string, string>();
      const events = await ndk.fetchEvents({
        kinds: [10002],
        authors: db.account.follows,
      });
      if (events) {
        events.forEach((event) => {
          event.tags.forEach((tag) => {
            tmp.set(tag[1], event.pubkey);
          });
        });
      }
      return tmp;
    },
    {
      enabled: db.account ? true : false,
      refetchOnWindowFocus: false,
    }
  );
  const toggleRelay = (relay: string) => {
    if (relays.has(relay)) {
      setRelays((prev) => {
        prev.delete(relay);
        return new Set(prev);
      });
    } else {
      setRelays((prev) => new Set(prev.add(relay)));
    }
  };
  const submit = async (skip?: boolean) => {
    setLoading(true);
    try {
      if (!skip) {
        for (const relay of relays) {
          await db.createRelay(relay);
        }
        const tags = Array.from(relays).map((relay) => ['r', relay.replace(/\/+$/, '')]);
        await publish({ content: '', kind: 10002, tags: tags });
      } else {
        for (const relay of FULL_RELAYS) {
          await db.createRelay(relay);
        }
      }
      // update last login
      await db.updateLastLogin();
      clearStep();
      navigate('/', { replace: true });
    } catch (e) {
      setLoading(false);
      console.log('error: ', e);
    }
  };
  const relaysAsArray = Array.from(data?.keys() || []);
  useEffect(() => {
    // save current step, if user close app and reopen it
    setStep('/auth/onboarding/step-3');
  }, []);
  return (
    <div className="mx-auto w-full max-w-md">
      <div className="mb-8 text-center">
        <h1 className="text-xl font-semibold text-white">Relay discovery</h1>
        <p className="text-sm text-white/50">
          You can add relay which is using by who you&apos;re following to easier reach
          their content. Learn more about relay{' '}
          <a
            href="https://nostr.com/relays"
            target="_blank"
            rel="noreferrer"
            className="text-fuchsia-500 underline"
          >
            here (nostr.com)
          </a>
        </p>
      </div>
      <div className="flex flex-col gap-4">
        <div className="scrollbar-hide relative flex h-[500px] w-full flex-col divide-y divide-white/10 overflow-y-auto rounded-xl bg-white/10 backdrop-blur-xl">
          {status === 'loading' ? (
            <div className="flex h-full w-full items-center justify-center">
              <LoaderIcon className="h-4 w-4 animate-spin text-white" />
            </div>
          ) : relaysAsArray.length === 0 ? (
            <div className="flex h-full w-full items-center justify-center px-6">
              <p className="text-center text-white/50">
                Lume couldn&apos;t find any relays from your follows.
                <br />
                You can skip this step and use default relays instead.
              </p>
            </div>
          ) : (
            relaysAsArray.map((item, index) => (
              <button
                key={item + index}
                type="button"
                onClick={() => toggleRelay(item)}
                className="inline-flex transform items-start justify-between bg-white/10 px-4 py-2 backdrop-blur-xl hover:bg-white/20"
              >
                <div className="flex flex-col items-start gap-1">
                  <p className="max-w-[15rem] truncate">{item.replace(/\/+$/, '')}</p>
                  <UserRelay pubkey={data.get(item)} />
                </div>
                {relays.has(item) && (
                  <div className="pt-1.5">
                    <CheckCircleIcon className="h-4 w-4 text-green-400" />
                  </div>
                )}
              </button>
            ))
          )}
          {relays.size > 5 && (
            <div className="sticky bottom-0 left-0 inline-flex w-full items-center justify-center bg-white/10 px-4 py-2 backdrop-blur-2xl">
              <p className="text-sm text-orange-400">
                Using too much relay can cause high resource usage
              </p>
            </div>
          )}
        </div>
        <div className="flex flex-col gap-2">
          <button
            type="button"
            disabled={loading}
            onClick={() => submit()}
            className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
          >
            {loading ? (
              <>
                <span className="w-5" />
                <span>Creating...</span>
                <LoaderIcon className="h-5 w-5 animate-spin text-white" />
              </>
            ) : (
              <>
                <span className="w-5" />
                <span>Add {relays.size} relays & Continue</span>
                <ArrowRightCircleIcon className="h-5 w-5" />
              </>
            )}
          </button>
          <button
            type="button"
            onClick={() => submit(true)}
            className="inline-flex h-11 w-full items-center justify-center rounded-lg px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/10 focus:outline-none"
          >
            Skip, use default relays
          </button>
        </div>
      </div>
    </div>
  );
 }
@@ -1,15 +1,16 @@
 import { appConfigDir } from '@tauri-apps/api/path';
 import { getPublicKey, nip19 } from 'nostr-tools';
 import { useState } from 'react';
 import { Resolver, useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { Stronghold } from 'tauri-plugin-stronghold-api';
 import { useStorage } from '@libs/storage/provider';
 import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
 import { useStronghold } from '@stores/stronghold';
 import { useAccount } from '@utils/hooks/useAccount';
 import { useSecureStorage } from '@utils/hooks/useSecureStorage';
 type FormValues = {
  password: string;
  privkey: string;
@@ -36,8 +37,7 @@ export function ResetScreen() {
  const [passwordInput, setPasswordInput] = useState('password');
  const [loading, setLoading] = useState(false);
-  const { account } = useAccount();
+  const { db } = useStorage();
  const { save, reset } = useSecureStorage();
  // toggle private key
  const showPassword = () => {
@@ -66,7 +66,7 @@ export function ResetScreen() {
        const tmpPubkey = getPublicKey(privkey);
-        if (tmpPubkey !== account.pubkey) {
+        if (tmpPubkey !== db.account.pubkey) {
          setLoading(false);
          setError('password', {
            type: 'custom',
@@ -75,11 +75,20 @@ export function ResetScreen() {
          });
        } else {
          // remove old stronghold
-          await reset();
+          await db.secureReset();
          // save privkey to secure storage
-          await save(account.pubkey, account.privkey, data.password);
+          const dir = await appConfigDir();
          const stronghold = await Stronghold.load(
            `${dir}/lume.stronghold`,
            data.password
          );
          if (!db.secureDB) db.secureDB = stronghold;
          await db.secureSave(db.account.pubkey, db.account.privkey);
          // add privkey to state
-          setPrivkey(account.privkey);
+          setPrivkey(db.account.privkey);
          // redirect to home
          navigate('/auth/unlock', { replace: true });
        }
@@ -102,74 +111,70 @@ export function ResetScreen() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <div className="mx-auto w-full max-w-md">
-        <div className="mb-8 text-center">
+        <div className="mb-6 text-center">
-          <h1 className="text-xl font-semibold text-zinc-100">Reset unlock password</h1>
+          <h1 className="text-2xl font-semibold text-white">Reset unlock password</h1>
        </div>
-        <div className="flex flex-col gap-4">
+        <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col gap-3">
-          <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col gap-3">
+          <div className="flex flex-col gap-1">
-            <div className="flex flex-col gap-1">
+            <label htmlFor="privkey" className="font-medium text-white/50">
-              <label htmlFor="privkey" className="font-medium text-zinc-200">
+              Private key
-                Private key
+            </label>
-              </label>
+            <div className="relative">
-              <div className="relative">
+              <input
-                <input
+                {...register('privkey', { required: true })}
-                  {...register('privkey', { required: true })}
+                type="text"
-                  type="text"
+                placeholder="nsec..."
-                  placeholder="nsec..."
+                className="relative h-12 w-full rounded-lg bg-white/10 px-3.5 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
-                  className="relative w-full rounded-lg bg-zinc-800 px-3.5 py-3 text-zinc-100 !outline-none placeholder:text-zinc-400"
+              />
                />
              </div>
            </div>
-            <div className="flex flex-col gap-1">
+          </div>
-              <label htmlFor="password" className="font-medium text-zinc-200">
+          <div className="flex flex-col gap-1">
-                Set a new password to protect your key
+            <label htmlFor="password" className="font-medium text-white/50">
-              </label>
+              Set a new password to protect your key
-              <div className="relative">
+            </label>
-                <input
+            <div className="relative">
-                  {...register('password', { required: true })}
+              <input
-                  type={passwordInput}
+                {...register('password', { required: true })}
-                  placeholder="min. 4 characters"
+                type={passwordInput}
-                  className="relative w-full rounded-lg bg-zinc-800 py-3 pl-3.5 pr-11 text-zinc-100 !outline-none placeholder:text-zinc-400"
+                placeholder="min. 4 characters"
-                />
+                className="relative h-12 w-full rounded-lg bg-white/10 px-3.5 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
-                <button
+              />
                  type="button"
                  onClick={() => showPassword()}
                  className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
                >
                  {passwordInput === 'password' ? (
                    <EyeOffIcon
                      width={20}
                      height={20}
                      className="text-zinc-500 group-hover:text-zinc-100"
                    />
                  ) : (
                    <EyeOnIcon
                      width={20}
                      height={20}
                      className="text-zinc-500 group-hover:text-zinc-100"
                    />
                  )}
                </button>
              </div>
              <span className="text-sm text-red-400">
                {errors.password && <p>{errors.password.message}</p>}
              </span>
            </div>
            <div className="flex items-center justify-center">
              <button
-                type="submit"
+                type="button"
-                disabled={!isDirty || !isValid}
+                onClick={() => showPassword()}
-                className="mt-3 inline-flex h-11 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-zinc-100 hover:bg-fuchsia-600 disabled:pointer-events-none disabled:opacity-50"
+                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 backdrop-blur-xl hover:bg-white/10"
              >
-                {loading ? (
+                {passwordInput === 'password' ? (
-                  <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
+                  <EyeOffIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
                ) : (
-                  'Continue →'
+                  <EyeOnIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
                )}
              </button>
            </div>
-          </form>
+            <span className="text-sm text-red-400">
-        </div>
+              {errors.password && <p>{errors.password.message}</p>}
            </span>
          </div>
          <div className="flex flex-col items-center justify-center">
            <button
              type="submit"
              disabled={!isDirty || !isValid}
              className="inline-flex h-12 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-white hover:bg-fuchsia-600 disabled:pointer-events-none disabled:opacity-50"
            >
              {loading ? (
                <LoaderIcon className="h-4 w-4 animate-spin text-white" />
              ) : (
                'Continue →'
              )}
            </button>
            <Link
              to="/auth/unlock"
              className="mt-1 inline-flex h-11 w-full items-center justify-center rounded-lg text-center text-white/50 hover:bg-white/10"
            >
              Back
            </Link>
          </div>
        </form>
      </div>
    </div>
  );
@@ -1,14 +1,17 @@
 import { appConfigDir } from '@tauri-apps/api/path';
 import { useState } from 'react';
 import { Resolver, useForm } from 'react-hook-form';
 import { Link, useNavigate } from 'react-router-dom';
 import { Stronghold } from 'tauri-plugin-stronghold-api';
-import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
+import { User } from '@app/auth/components/user';
 import { useStorage } from '@libs/storage/provider';
 import { ArrowRightCircleIcon, EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
 import { useStronghold } from '@stores/stronghold';
 import { useAccount } from '@utils/hooks/useAccount';
 import { useSecureStorage } from '@utils/hooks/useSecureStorage';
 type FormValues = {
  password: string;
 };
@@ -31,21 +34,10 @@ export function UnlockScreen() {
  const navigate = useNavigate();
  const setPrivkey = useStronghold((state) => state.setPrivkey);
-  const [passwordInput, setPasswordInput] = useState('password');
+  const [showPassword, setShowPassword] = useState<boolean>(false);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState<boolean>(false);
  const { account } = useAccount();
  const { load } = useSecureStorage();
  // toggle private key
  const showPassword = () => {
    if (passwordInput === 'password') {
      setPasswordInput('text');
    } else {
      setPasswordInput('password');
    }
  };
  const { db } = useStorage();
  const {
    register,
    setError,
@@ -54,26 +46,24 @@ export function UnlockScreen() {
  } = useForm<FormValues>({ resolver });
  const onSubmit = async (data: { [x: string]: string }) => {
-    setLoading(true);
+    try {
-    if (data.password.length > 3) {
+      setLoading(true);
-      // load private in secure storage
+
-      try {
+      const dir = await appConfigDir();
-        const privkey = await load(account.pubkey, data.password);
+      const stronghold = await Stronghold.load(`${dir}/lume.stronghold`, data.password);
-        setPrivkey(privkey);
+
-        // redirect to home
+      if (!db.secureDB) db.secureDB = stronghold;
-        navigate('/', { replace: true });
+
-      } catch {
+      const privkey = await db.secureLoad(db.account.pubkey);
-        setLoading(false);
+
-        setError('password', {
+      setPrivkey(privkey);
-          type: 'custom',
+      // redirect to home
-          message: 'Wrong password',
+      navigate('/', { replace: true });
-        });
+    } catch (e) {
      }
    } else {
      setLoading(false);
      setError('password', {
        type: 'custom',
-        message: 'Password is required and must be greater than 3',
+        message: e,
      });
    }
  };
@@ -81,65 +71,65 @@ export function UnlockScreen() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <div className="mx-auto w-full max-w-md">
-        <div className="mb-8 text-center">
+        <div className="mb-6 text-center">
-          <h1 className="text-xl font-semibold text-zinc-100">
+          <h1 className="text-2xl font-semibold text-white">Enter password to unlock</h1>
            Enter password to unlock
          </h1>
        </div>
-        <div className="flex flex-col gap-4">
+        <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col">
-          <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-3">
+          <div className="flex flex-col rounded-lg bg-white/5">
-            <div className="flex flex-col gap-1">
+            <div className="w-full rounded-t-lg border-b border-white/10 bg-white/5 p-4">
-              <div className="relative">
+              <User pubkey={db.account.pubkey} />
                <input
                  {...register('password', { required: true })}
                  type={passwordInput}
                  className="relative w-full rounded-lg bg-zinc-800 py-3 text-center text-zinc-100 !outline-none placeholder:text-zinc-400"
                />
                <button
                  type="button"
                  onClick={() => showPassword()}
                  className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
                >
                  {passwordInput === 'password' ? (
                    <EyeOffIcon
                      width={20}
                      height={20}
                      className="text-zinc-500 group-hover:text-zinc-100"
                    />
                  ) : (
                    <EyeOnIcon
                      width={20}
                      height={20}
                      className="text-zinc-500 group-hover:text-zinc-100"
                    />
                  )}
                </button>
              </div>
              <span className="text-sm text-red-400">
                {errors.password && <p>{errors.password.message}</p>}
              </span>
            </div>
-            <div className="flex flex-col items-center justify-center">
+            <div className="relative">
              <input
                {...register('password', { required: true, minLength: 4 })}
                type={showPassword ? 'text' : 'password'}
                placeholder="Password"
                className="relative h-12 w-full rounded-b-lg bg-white/10 py-1 text-center text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
              />
              <button
-                type="submit"
+                type="button"
-                disabled={!isDirty || !isValid}
+                onClick={() => setShowPassword((prev) => !prev)}
-                className="inline-flex h-11 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-zinc-100 hover:bg-fuchsia-600"
+                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 backdrop-blur-xl hover:bg-white/10"
              >
-                {loading ? (
+                {showPassword ? (
-                  <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
+                  <EyeOffIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
                ) : (
-                  'Continue →'
+                  <EyeOnIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
                )}
              </button>
              <Link
                to="/auth/reset"
                className="inline-flex h-12 items-center justify-center text-center text-sm text-zinc-400"
              >
                Reset password
              </Link>
            </div>
-          </form>
+          </div>
-        </div>
+          <div className="flex flex-col items-center justify-center">
            <span className="mb-3 text-sm text-red-400">
              {errors.password && <p>{errors.password.message}</p>}
            </span>
            <button
              type="submit"
              disabled={!isDirty || !isValid}
              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
            >
              {loading ? (
                <>
                  <span className="w-5" />
                  <span>Decryting...</span>
                  <LoaderIcon className="h-5 w-5 animate-spin text-white" />
                </>
              ) : (
                <>
                  <span className="w-5" />
                  <span>Continue</span>
                  <ArrowRightCircleIcon className="h-5 w-5" />
                </>
              )}
            </button>
            <Link
              to="/auth/reset"
              className="mt-1 inline-flex h-11 w-full items-center justify-center rounded-lg text-center text-white/50 hover:bg-white/10"
            >
              Reset password
            </Link>
          </div>
        </form>
      </div>
    </div>
  );
@@ -1,29 +1,47 @@
 import { LogicalSize, getCurrent } from '@tauri-apps/api/window';
 import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { Frame } from '@shared/frame';
 import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
 export function WelcomeScreen() {
  const appWindow = getCurrent();
  async function setWindow() {
    await appWindow.setSize(new LogicalSize(400, 500));
    await appWindow.setResizable(false);
    await appWindow.center();
  }
  async function resetWindow() {
    await appWindow.setSize(new LogicalSize(1080, 800));
    await appWindow.setResizable(false);
    await appWindow.center();
  }
  useEffect(() => {
    setWindow();
    return () => {
      resetWindow();
    };
  }, []);
  return (
-    <div className="grid h-full w-full grid-cols-12 gap-4 px-4 py-4">
+    <Frame className="flex h-screen w-full flex-col justify-between">
-      <div className="col-span-5 flex flex-col rounded-xl border-t border-zinc-800/50 bg-zinc-900">
+      <div className="flex flex-col gap-10 pt-16">
-        <div className="flex h-full w-full flex-col justify-center gap-2 px-4 py-4">
+        <div className="flex flex-col gap-1.5 text-center">
-          <h1 className="text-4xl font-bold leading-none text-transparent text-zinc-700">
+          <h1 className="text-3xl font-semibold text-white">Welcome to Lume</h1>
-            Preserve your <span className="text-fuchsia-300">freedom</span>
+          <p className="mx-auto w-2/3 leading-tight text-white/50">
-          </h1>
+            Let&apos;s get you up and connecting with all peoples around the world on
-          <h2 className="text-4xl font-bold leading-none text-transparent text-zinc-700">
+            Nostr
-            Protect your <span className="text-red-300">future</span>
+          </p>
          </h2>
          <h3 className="text-4xl font-bold leading-none text-transparent text-zinc-700">
            Stack <span className="text-orange-300">bitcoin</span>
          </h3>
          <h3 className="text-4xl font-bold leading-none text-transparent text-zinc-700">
            Use <span className="text-purple-300">nostr</span>
          </h3>
        </div>
-        <div className="mt-auto flex w-full flex-col gap-2 px-4 py-4">
+        <div className="inline-flex w-full flex-col items-center gap-2 px-4 pb-10">
          <Link
            to="/auth/import"
-            className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium text-zinc-100 hover:bg-fuchsia-600"
+            className="inline-flex h-11 w-2/3 items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
          >
            <span className="w-5" />
            <span>Login with private key</span>
@@ -31,24 +49,15 @@ export function WelcomeScreen() {
          </Link>
          <Link
            to="/auth/create"
-            className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-lg bg-zinc-800 px-6 font-medium text-zinc-200 hover:bg-zinc-700"
+            className="inline-flex h-11 w-2/3 items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/20 focus:outline-none"
          >
            Create new key
          </Link>
        </div>
      </div>
-      <div
+      <div className="flex flex-1 items-end justify-center pb-10">
-        className="col-span-5 rounded-xl bg-zinc-900 bg-cover bg-center"
+        <img src="/lume.png" alt="lume" className="h-auto w-1/3" />
-        style={{
+      </div>
-          backgroundImage: `url("https://void.cat/d/Ps1b36vu5pdkEA2w75usuB")`,
+    </Frame>
        }}
      />
      <div
        className="col-span-2 rounded-xl bg-zinc-900 bg-cover bg-center"
        style={{
          backgroundImage: `url("https://void.cat/d/5FdJcBP5ZXKAjYqV8hpcp3")`,
        }}
      />
    </div>
  );
 }
@@ -1,58 +0,0 @@
 import { Popover, Transition } from '@headlessui/react';
 import { Fragment } from 'react';
 import { MutedItem } from '@app/channel/components/mutedItem';
 import { MuteIcon } from '@shared/icons';
 export function ChannelBlackList({ blacklist }: { blacklist: any }) {
  return (
    <Popover className="relative">
      {({ open }) => (
        <>
          <Popover.Button
            className={`group inline-flex h-8 w-8 items-center justify-center rounded-md ring-2 ring-zinc-950 focus:outline-none ${
              open ? 'bg-zinc-800 hover:bg-zinc-700' : 'bg-zinc-900 hover:bg-zinc-800'
            }`}
          >
            <MuteIcon
              width={16}
              height={16}
              className="text-zinc-400 group-hover:text-zinc-100"
            />
          </Popover.Button>
          <Transition
            as={Fragment}
            enter="transition ease-out duration-200"
            enterFrom="opacity-0 translate-y-1"
            enterTo="opacity-100 translate-y-0"
            leave="transition ease-in duration-150"
            leaveFrom="opacity-100 translate-y-0"
            leaveTo="opacity-0 translate-y-1"
          >
            <Popover.Panel className="absolute right-0 z-10 mt-1 w-screen max-w-xs transform px-4 sm:px-0">
              <div className="shadow-popover flex flex-col gap-2 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900">
                <div className="h-min w-full shrink-0 border-b border-zinc-800 p-3">
                  <div className="flex flex-col gap-0.5">
                    <h3 className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text font-semibold leading-none text-transparent">
                      Your muted list
                    </h3>
                    <p className="text-base leading-tight text-zinc-400">
                      Currently, unmute only affect locally, when you move to new client,
                      muted list will loaded again
                    </p>
                  </div>
                </div>
                <div className="flex flex-col gap-2 px-3 pb-3 pt-1">
                  {blacklist.map((item: any) => (
                    <MutedItem key={item.id} data={item} />
                  ))}
                </div>
              </div>
            </Popover.Panel>
          </Transition>
        </>
      )}
    </Popover>
  );
 }
@@ -1,269 +0,0 @@
 import { Dialog, Transition } from '@headlessui/react';
 import { NDKEvent, NDKPrivateKeySigner } from '@nostr-dev-kit/ndk';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Fragment, useContext, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { useNDK } from '@libs/ndk/provider';
 import { createChannel } from '@libs/storage';
 import { AvatarUploader } from '@shared/avatarUploader';
 import { CancelIcon, LoaderIcon, PlusIcon } from '@shared/icons';
 import { Image } from '@shared/image';
 import { DEFAULT_AVATAR } from '@stores/constants';
 import { dateToUnix } from '@utils/date';
 import { useAccount } from '@utils/hooks/useAccount';
 export function ChannelCreateModal() {
  const { ndk } = useNDK();
  const queryClient = useQueryClient();
  const navigate = useNavigate();
  const [isOpen, setIsOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [image, setImage] = useState(DEFAULT_AVATAR);
  const { account } = useAccount();
  const closeModal = () => {
    setIsOpen(false);
  };
  const openModal = () => {
    setIsOpen(true);
  };
  const {
    register,
    handleSubmit,
    reset,
    setValue,
    formState: { isDirty, isValid },
  } = useForm();
  const addChannel = useMutation({
    mutationFn: (event: any) => {
      return createChannel(
        event.id,
        event.pubkey,
        event.name,
        event.picture,
        event.about,
        event.created_at
      );
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['channels'] });
    },
  });
  const onSubmit = (data: any) => {
    setLoading(true);
    try {
      const signer = new NDKPrivateKeySigner(account.privkey);
      ndk.signer = signer;
      const event = new NDKEvent(ndk);
      // build event
      event.content = JSON.stringify(data);
      event.kind = 40;
      event.created_at = dateToUnix();
      event.pubkey = account.pubkey;
      event.tags = [];
      // publish event
      event.publish();
      // insert to database
      addChannel.mutate({
        ...event,
        name: data.name,
        picture: data.picture,
        about: data.about,
      });
      // reset form
      reset();
      setTimeout(() => {
        // close modal
        setIsOpen(false);
        // redirect to channel page
        navigate(`/app/channel/${event.id}`);
      }, 1000);
    } catch (e) {
      console.log('error: ', e);
    }
  };
  useEffect(() => {
    setValue('picture', image);
  }, [setValue, image]);
  return (
    <>
      <button
        type="button"
        onClick={() => openModal()}
        className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5"
      >
        <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
          <PlusIcon width={12} height={12} className="text-zinc-500" />
        </div>
        <div>
          <h5 className="font-medium text-zinc-400">Create channel</h5>
        </div>
      </button>
      <Transition appear show={isOpen} as={Fragment}>
        <Dialog as="div" className="relative z-10" onClose={closeModal}>
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
          </Transition.Child>
          <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0 scale-95"
              enterTo="opacity-100 scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
            >
              <Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border-t border-zinc-800/50 bg-zinc-900">
                <div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-5">
                  <div className="flex flex-col gap-2">
                    <div className="flex items-center justify-between">
                      <Dialog.Title
                        as="h3"
                        className="text-lg font-semibold leading-none text-zinc-100"
                      >
                        Create channel
                      </Dialog.Title>
                      <button
                        type="button"
                        onClick={closeModal}
                        className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
                      >
                        <CancelIcon width={20} height={20} className="text-zinc-300" />
                      </button>
                    </div>
                    <Dialog.Description className="text-sm leading-tight text-zinc-400">
                      Channels are freedom square, everyone can speech freely, no one can
                      stop you or deceive what to speech
                    </Dialog.Description>
                  </div>
                </div>
                <div className="flex h-full w-full flex-col overflow-y-auto px-5 pb-5 pt-3">
                  <form
                    onSubmit={handleSubmit(onSubmit)}
                    className="mb-0 flex h-full w-full flex-col gap-4"
                  >
                    <input
                      type={'hidden'}
                      {...register('picture')}
                      value={image}
                      className="shadow-input relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-black/10 dark:placeholder:text-zinc-500"
                    />
                    <div className="flex flex-col gap-1">
                      <span className="text-sm font-medium uppercase tracking-wider text-zinc-400">
                        Picture
                      </span>
                      <div className="relative inline-flex h-36 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
                        <Image
                          src={image}
                          fallback={DEFAULT_AVATAR}
                          alt="channel picture"
                          className="relative z-10 h-11 w-11 rounded-md"
                        />
                        <div className="absolute bottom-3 right-3 z-10">
                          <AvatarUploader setPicture={setImage} />
                        </div>
                      </div>
                    </div>
                    <div className="flex flex-col gap-1">
                      <label
                        htmlFor="name"
                        className="text-sm font-semibold uppercase tracking-wider text-zinc-400"
                      >
                        Channel name *
                      </label>
                      <input
                        type={'text'}
                        {...register('name', {
                          required: true,
                          minLength: 4,
                        })}
                        spellCheck={false}
                        className="relative h-10 w-full rounded-lg bg-zinc-800 px-3 py-2 text-zinc-100 !outline-none placeholder:text-zinc-500"
                      />
                    </div>
                    <div className="flex flex-col gap-1">
                      <label
                        htmlFor="about"
                        className="text-sm font-semibold uppercase tracking-wider text-zinc-400"
                      >
                        Description
                      </label>
                      <textarea
                        {...register('about')}
                        spellCheck={false}
                        className="relative h-20 w-full resize-none rounded-lg bg-zinc-800 px-3 py-2 text-zinc-100 !outline-none placeholder:text-zinc-500"
                      />
                    </div>
                    <div className="flex h-20 items-center justify-between gap-1 rounded-lg bg-zinc-800 px-4 py-2">
                      <div className="flex flex-col gap-1">
                        <span className="font-semibold leading-none text-zinc-100">
                          Encrypted
                        </span>
                        <p className="w-4/5 text-sm leading-none text-zinc-400">
                          All messages are encrypted and only invited members can view and
                          send message
                        </p>
                      </div>
                      <div>
                        <button
                          type="button"
                          disabled
                          className="relative inline-flex h-6 w-11 flex-shrink-0  rounded-full border-2 border-transparent bg-zinc-900 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-fuchsia-600 focus:ring-offset-2"
                          role="switch"
                          aria-checked="false"
                        >
                          <span className="pointer-events-none inline-block h-5 w-5 translate-x-0 transform rounded-full bg-zinc-600 shadow ring-0 transition duration-200 ease-in-out" />
                        </button>
                      </div>
                    </div>
                    <div>
                      <button
                        type="submit"
                        disabled={!isDirty || !isValid}
                        className="inline-flex h-11 w-full transform items-center justify-center gap-1 rounded-md bg-fuchsia-500 font-medium text-zinc-100 hover:bg-fuchsia-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
                      >
                        {loading ? (
                          <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
                        ) : (
                          'Create channel →'
                        )}
                      </button>
                    </div>
                  </form>
                </div>
              </Dialog.Panel>
            </Transition.Child>
          </div>
        </Dialog>
      </Transition>
    </>
  );
 }
@@ -1,34 +0,0 @@
 import { NavLink } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 import { useChannelProfile } from '@app/channel/hooks/useChannelProfile';
 export function ChannelsListItem({ data }: { data: any }) {
  const channel = useChannelProfile(data.event_id);
  return (
    <NavLink
      to={`/app/channel/${data.event_id}`}
      preventScrollReset={true}
      className={({ isActive }) =>
        twMerge(
          'inline-flex h-9 items-center gap-2.5 rounded-md px-2.5',
          isActive ? 'bg-zinc-900/50 text-zinc-100' : ''
        )
      }
    >
      <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
        <span className="text-xs text-zinc-100">#</span>
      </div>
      <div className="inline-flex w-full items-center justify-between">
        <h5 className="truncate font-medium text-zinc-200">{channel?.name}</h5>
        <div className="flex items-center">
          {data.new_messages && (
            <span className="inline-flex w-8 items-center justify-center rounded bg-fuchsia-400/10 px-1 py-1 text-xs font-medium text-fuchsia-500 ring-1 ring-inset ring-fuchsia-400/20">
              {data.new_messages}
            </span>
          )}
        </div>
      </div>
    </NavLink>
  );
 }
@@ -1,52 +0,0 @@
 import { useQuery } from '@tanstack/react-query';
 import { ChannelCreateModal } from '@app/channel/components/createModal';
 import { ChannelsListItem } from '@app/channel/components/item';
 import { getChannels } from '@libs/storage';
 export function ChannelsList() {
  const {
    status,
    data: channels,
    isFetching,
  } = useQuery(
    ['channels'],
    async () => {
      return await getChannels();
    },
    {
      refetchOnMount: false,
      refetchOnReconnect: false,
      refetchOnWindowFocus: false,
    }
  );
  return (
    <div className="flex flex-col">
      {status === 'loading' ? (
        <>
          <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
            <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
            <div className="h-3.5 w-full animate-pulse rounded-sm bg-zinc-800" />
          </div>
          <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
            <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
            <div className="h-3.5 w-full animate-pulse rounded-sm bg-zinc-800" />
          </div>
        </>
      ) : (
        channels.map((item: { event_id: string }) => (
          <ChannelsListItem key={item.event_id} data={item} />
        ))
      )}
      {isFetching && (
        <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
          <div className="h-3.5 w-full animate-pulse rounded-sm bg-zinc-800" />
        </div>
      )}
      <ChannelCreateModal />
    </div>
  );
 }
@@ -1,24 +0,0 @@
 import { Image } from '@shared/image';
 import { DEFAULT_AVATAR } from '@stores/constants';
 import { useProfile } from '@utils/hooks/useProfile';
 export function Member({ pubkey }: { pubkey: string }) {
  const { user, isError, isLoading } = useProfile(pubkey);
  return (
    <>
      {isError || isLoading ? (
        <div className="h-7 w-7 animate-pulse rounded bg-zinc-800" />
      ) : (
        <Image
          className="inline-block h-7 w-7 rounded"
          src={user?.image}
          fallback={DEFAULT_AVATAR}
          alt={pubkey}
        />
      )}
    </>
  );
 }
@@ -1,28 +0,0 @@
 import { useQuery } from '@tanstack/react-query';
 import { Member } from '@app/channel/components/member';
 import { getChannelUsers } from '@libs/storage';
 export function ChannelMembers({ id }: { id: string }) {
  const { status, data, isFetching } = useQuery(['channel-members', id], async () => {
    return await getChannelUsers(id);
  });
  return (
    <div className="mt-3">
      <h5 className="border-b border-zinc-900 pb-1 font-semibold text-zinc-200">
        Members
      </h5>
      <div className="mt-3 flex w-full flex-wrap gap-1.5">
        {status === 'loading' || isFetching ? (
          <p>Loading...</p>
        ) : (
          data.map((member: { pubkey: string }) => (
            <Member key={member.pubkey} pubkey={member.pubkey} />
          ))
        )}
      </div>
    </div>
  );
 }
@@ -1,115 +0,0 @@
 import { NDKEvent, NDKPrivateKeySigner } from '@nostr-dev-kit/ndk';
 import { useContext, useState } from 'react';
 import { UserReply } from '@app/channel/components/messages/userReply';
 import { useNDK } from '@libs/ndk/provider';
 import { CancelIcon, EnterIcon } from '@shared/icons';
 import { MediaUploader } from '@shared/mediaUploader';
 import { useChannelMessages } from '@stores/channels';
 import { dateToUnix } from '@utils/date';
 import { useAccount } from '@utils/hooks/useAccount';
 export function ChannelMessageForm({ channelID }: { channelID: string }) {
  const { ndk } = useNDK();
  const [value, setValue] = useState('');
  const [replyTo, closeReply] = useChannelMessages((state: any) => [
    state.replyTo,
    state.closeReply,
  ]);
  const { account } = useAccount();
  const submit = () => {
    let tags: string[][];
    if (replyTo.id !== null) {
      tags = [
        ['e', channelID, '', 'root'],
        ['e', replyTo.id, '', 'reply'],
        ['p', replyTo.pubkey, ''],
      ];
    } else {
      tags = [['e', channelID, '', 'root']];
    }
    const signer = new NDKPrivateKeySigner(account.privkey);
    ndk.signer = signer;
    const event = new NDKEvent(ndk);
    // build event
    event.content = value;
    event.kind = 42;
    event.created_at = dateToUnix();
    event.pubkey = account.pubkey;
    event.tags = tags;
    // publish event
    event.publish();
    // reset state
    setValue('');
  };
  const handleEnterPress = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      submit();
    }
  };
  const stopReply = () => {
    closeReply();
  };
  return (
    <div className={`relative w-full ${replyTo.id ? 'h-36' : 'h-24'}`}>
      {replyTo.id && (
        <div className="absolute left-0 top-0 z-10 h-16 w-full p-[2px]">
          <div className="flex h-full w-full items-center justify-between rounded-t-md border-b border-zinc-700/70 bg-zinc-900 px-3">
            <div className="flex w-full flex-col">
              <UserReply pubkey={replyTo.pubkey} />
              <div className="-mt-5 pl-[38px]">
                <div className="text-base text-zinc-100">{replyTo.content}</div>
              </div>
            </div>
            <button
              type="button"
              onClick={() => stopReply()}
              className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800"
            >
              <CancelIcon width={12} height={12} className="text-zinc-100" />
            </button>
          </div>
        </div>
      )}
      <textarea
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onKeyDown={handleEnterPress}
        spellCheck={false}
        placeholder="Message"
        className={`relative ${
          replyTo.id ? 'h-36 pt-16' : 'h-24 pt-3'
        } w-full resize-none rounded-md bg-zinc-800 px-5 !outline-none placeholder:text-zinc-500`}
      />
      <div className="absolute bottom-0 right-2 h-11">
        <div className="flex h-full items-center justify-end gap-3 text-zinc-500">
          <MediaUploader setState={setValue} />
          <button
            type="button"
            onClick={submit}
            className="inline-flex items-center gap-1 text-sm leading-none"
          >
            <EnterIcon width={14} height={14} className="" />
            Send
          </button>
        </div>
      </div>
    </div>
  );
 }
@@ -1,132 +0,0 @@
 import { Dialog, Transition } from '@headlessui/react';
 import { NDKEvent, NDKPrivateKeySigner } from '@nostr-dev-kit/ndk';
 import { Fragment, useState } from 'react';
 import { useNDK } from '@libs/ndk/provider';
 import { CancelIcon, HideIcon } from '@shared/icons';
 import { useChannelMessages } from '@stores/channels';
 import { dateToUnix } from '@utils/date';
 import { useAccount } from '@utils/hooks/useAccount';
 export function MessageHideButton({ id }: { id: string }) {
  const { ndk } = useNDK();
  const hide = useChannelMessages((state: any) => state.hideMessage);
  const [isOpen, setIsOpen] = useState(false);
  const { account } = useAccount();
  const closeModal = () => {
    setIsOpen(false);
  };
  const openModal = () => {
    setIsOpen(true);
  };
  const hideMessage = () => {
    const signer = new NDKPrivateKeySigner(account.privkey);
    ndk.signer = signer;
    const event = new NDKEvent(ndk);
    // build event
    event.content = '';
    event.kind = 43;
    event.created_at = dateToUnix();
    event.pubkey = account.pubkey;
    event.tags = [['e', id]];
    // publish event
    event.publish();
    // update state
    hide(id);
    // close modal
    closeModal();
  };
  return (
    <>
      <button
        type="button"
        onClick={openModal}
        className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-800"
      >
        <HideIcon width={16} height={16} className="text-zinc-200" />
      </button>
      <Transition appear show={isOpen} as={Fragment}>
        <Dialog as="div" className="relative z-10" onClose={closeModal}>
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
          </Transition.Child>
          <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0 scale-95"
              enterTo="opacity-100 scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
            >
              <Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col rounded-lg border border-zinc-800 bg-zinc-900">
                <div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-6">
                  <div className="flex flex-col gap-2">
                    <div className="flex items-center justify-between">
                      <Dialog.Title
                        as="h3"
                        className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-xl font-semibold leading-none text-transparent"
                      >
                        Are you sure!
                      </Dialog.Title>
                      <button
                        type="button"
                        onClick={closeModal}
                        className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
                      >
                        <CancelIcon width={20} height={20} className="text-zinc-300" />
                      </button>
                    </div>
                    <Dialog.Description className="leading-tight text-zinc-400">
                      This message will be hidden from your feed.
                    </Dialog.Description>
                  </div>
                </div>
                <div className="flex h-full w-full flex-col items-end justify-center overflow-y-auto px-5 py-2.5">
                  <div className="flex items-center gap-2">
                    <button
                      type="button"
                      onClick={closeModal}
                      className="inline-flex h-9 items-center justify-center rounded-md px-2 text-base font-medium text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100"
                    >
                      Cancel
                    </button>
                    <button
                      type="button"
                      onClick={() => hideMessage()}
                      className="inline-flex h-9 items-center justify-center rounded-md bg-red-500 px-2 text-base font-medium text-zinc-100 hover:bg-red-600"
                    >
                      Confirm
                    </button>
                  </div>
                </div>
              </Dialog.Panel>
            </Transition.Child>
          </div>
        </Dialog>
      </Transition>
    </>
  );
 }
@@ -1,56 +0,0 @@
 import { MessageHideButton } from '@app/channel/components/messages/hideButton';
 import { MessageMuteButton } from '@app/channel/components/messages/muteButton';
 import { MessageReplyButton } from '@app/channel/components/messages/replyButton';
 import { MentionNote } from '@shared/notes/mentions/note';
 import { ImagePreview } from '@shared/notes/preview/image';
 import { LinkPreview } from '@shared/notes/preview/link';
 import { VideoPreview } from '@shared/notes/preview/video';
 import { User } from '@shared/user';
 import { parser } from '@utils/parser';
 import { LumeEvent } from '@utils/types';
 export function ChannelMessageItem({ data }: { data: LumeEvent }) {
  const content = parser(data);
  return (
    <div className="group relative flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-black/20">
      <div className="flex flex-col">
        <User pubkey={data.pubkey} time={data.created_at} isChat={true} />
        <div className="-mt-[20px] pl-[49px]">
          <p className="select-text whitespace-pre-line break-words text-base text-zinc-100">
            {content.parsed}
          </p>
          {Array.isArray(content.images) && content.images.length ? (
            <ImagePreview urls={content.images} />
          ) : (
            <></>
          )}
          {Array.isArray(content.videos) && content.videos.length ? (
            <VideoPreview urls={content.videos} />
          ) : (
            <></>
          )}
          {Array.isArray(content.links) && content.links.length ? (
            <LinkPreview urls={content.links} />
          ) : (
            <></>
          )}
          {Array.isArray(content.notes) && content.notes.length ? (
            content.notes.map((note: string) => <MentionNote key={note} id={note} />)
          ) : (
            <></>
          )}
        </div>
      </div>
      <div className="absolute -top-4 right-4 z-10 hidden group-hover:inline-flex">
        <div className="inline-flex h-8 items-center justify-center gap-1.5 rounded bg-zinc-900 px-0.5 shadow-md shadow-black/20 ring-1 ring-zinc-800">
          <MessageReplyButton id={data.id} pubkey={data.pubkey} content={data.content} />
          <MessageHideButton id={data.id} />
          <MessageMuteButton pubkey={data.pubkey} />
        </div>
      </div>
    </div>
  );
 }
@@ -1,132 +0,0 @@
 import { Dialog, Transition } from '@headlessui/react';
 import { NDKEvent, NDKPrivateKeySigner } from '@nostr-dev-kit/ndk';
 import { Fragment, useContext, useState } from 'react';
 import { useNDK } from '@libs/ndk/provider';
 import { CancelIcon, MuteIcon } from '@shared/icons';
 import { useChannelMessages } from '@stores/channels';
 import { dateToUnix } from '@utils/date';
 import { useAccount } from '@utils/hooks/useAccount';
 export function MessageMuteButton({ pubkey }: { pubkey: string }) {
  const { ndk } = useNDK();
  const mute = useChannelMessages((state: any) => state.muteUser);
  const [isOpen, setIsOpen] = useState(false);
  const { account } = useAccount();
  const closeModal = () => {
    setIsOpen(false);
  };
  const openModal = () => {
    setIsOpen(true);
  };
  const muteUser = () => {
    const signer = new NDKPrivateKeySigner(account.privkey);
    ndk.signer = signer;
    const event = new NDKEvent(ndk);
    // build event
    event.content = '';
    event.kind = 44;
    event.created_at = dateToUnix();
    event.pubkey = account.pubkey;
    event.tags = [['p', pubkey]];
    // publish event
    event.publish();
    // update state
    mute(pubkey);
    // close modal
    closeModal();
  };
  return (
    <>
      <button
        type="button"
        onClick={() => openModal()}
        className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-800"
      >
        <MuteIcon width={16} height={16} className="text-zinc-200" />
      </button>
      <Transition appear show={isOpen} as={Fragment}>
        <Dialog as="div" className="relative z-10" onClose={closeModal}>
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
          </Transition.Child>
          <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0 scale-95"
              enterTo="opacity-100 scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
            >
              <Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col rounded-lg border border-zinc-800 bg-zinc-900">
                <div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-6">
                  <div className="flex flex-col gap-2">
                    <div className="flex items-center justify-between">
                      <Dialog.Title
                        as="h3"
                        className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-xl font-semibold leading-none text-transparent"
                      >
                        Are you sure!
                      </Dialog.Title>
                      <button
                        type="button"
                        onClick={closeModal}
                        className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
                      >
                        <CancelIcon width={20} height={20} className="text-zinc-300" />
                      </button>
                    </div>
                    <Dialog.Description className="leading-tight text-zinc-400">
                      You will no longer see messages from this user.
                    </Dialog.Description>
                  </div>
                </div>
                <div className="flex h-full w-full flex-col items-end justify-center overflow-y-auto px-5 py-2.5">
                  <div className="flex items-center gap-2">
                    <button
                      type="button"
                      onClick={closeModal}
                      className="inline-flex h-9 items-center justify-center rounded-md px-2 text-base font-medium text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100"
                    >
                      Cancel
                    </button>
                    <button
                      type="button"
                      onClick={() => muteUser()}
                      className="inline-flex h-9 items-center justify-center rounded-md bg-red-500 px-2 text-base font-medium text-zinc-100 hover:bg-red-600"
                    >
                      Confirm
                    </button>
                  </div>
                </div>
              </Dialog.Panel>
            </Transition.Child>
          </div>
        </Dialog>
      </Transition>
    </>
  );
 }
@@ -1,29 +0,0 @@
 import { ReplyMessageIcon } from '@shared/icons';
 import { useChannelMessages } from '@stores/channels';
 export function MessageReplyButton({
  id,
  pubkey,
  content,
 }: {
  id: string;
  pubkey: string;
  content: string;
 }) {
  const openReply = useChannelMessages((state: any) => state.openReply);
  const createReply = () => {
    openReply(id, pubkey, content);
  };
  return (
    <button
      type="button"
      onClick={() => createReply()}
      className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-800"
    >
      <ReplyMessageIcon width={16} height={16} className="text-zinc-200" />
    </button>
  );
 }
@@ -1,40 +0,0 @@
 import { Image } from '@shared/image';
 import { DEFAULT_AVATAR } from '@stores/constants';
 import { useProfile } from '@utils/hooks/useProfile';
 export function ChannelMessageUserMute({ pubkey }: { pubkey: string }) {
  const { user, isError, isLoading } = useProfile(pubkey);
  return (
    <div className="flex items-center gap-3">
      {isError || isLoading ? (
        <>
          <div className="relative h-11 w-11 shrink animate-pulse rounded-md bg-zinc-800" />
          <div className="flex w-full flex-1 items-center justify-between">
            <div className="flex items-baseline gap-2 text-base">
              <div className="h-4 w-20 animate-pulse rounded bg-zinc-800" />
            </div>
          </div>
        </>
      ) : (
        <>
          <div className="relative h-11 w-11 shrink-0 rounded-md">
            <Image
              src={user?.image}
              fallback={DEFAULT_AVATAR}
              alt={pubkey}
              className="h-11 w-11 rounded-md object-cover"
            />
          </div>
          <div className="flex w-full flex-1 items-center justify-between">
            <span className="leading-none text-zinc-300">
              You has been muted this user
            </span>
          </div>
        </>
      )}
    </div>
  );
 }
@@ -1,35 +0,0 @@
 import { Image } from '@shared/image';
 import { DEFAULT_AVATAR } from '@stores/constants';
 import { useProfile } from '@utils/hooks/useProfile';
 import { shortenKey } from '@utils/shortenKey';
 export function UserReply({ pubkey }: { pubkey: string }) {
  const { user, isError, isLoading } = useProfile(pubkey);
  return (
    <div className="group flex items-start gap-2">
      {isError || isLoading ? (
        <>
          <div className="relative h-9 w-9 shrink animate-pulse overflow-hidden rounded bg-zinc-800" />
          <span className="h-2 w-10 animate-pulse rounded bg-zinc-800 text-base font-medium leading-none text-zinc-500" />
        </>
      ) : (
        <>
          <div className="relative h-9 w-9 shrink overflow-hidden rounded">
            <Image
              src={user?.image}
              fallback={DEFAULT_AVATAR}
              alt={pubkey}
              className="h-9 w-9 rounded object-cover"
            />
          </div>
          <span className="max-w-[10rem] truncate text-sm font-medium leading-none text-zinc-500">
            Replying to {user?.name || shortenKey(pubkey)}
          </span>
        </>
      )}
    </div>
  );
 }
@@ -1,44 +0,0 @@
 import { nip19 } from 'nostr-tools';
 import { useChannelProfile } from '@app/channel/hooks/useChannelProfile';
 import { CopyIcon } from '@shared/icons';
 import { Image } from '@shared/image';
 import { DEFAULT_AVATAR } from '@stores/constants';
 export function ChannelMetadata({ id }: { id: string }) {
  const metadata = useChannelProfile(id);
  const noteID = id ? nip19.noteEncode(id) : null;
  const copyNoteID = async () => {
    const { writeText } = await import('@tauri-apps/api/clipboard');
    if (noteID) {
      await writeText(noteID);
    }
  };
  return (
    <div className="flex flex-col gap-2">
      <div className="relative h-11 w-11 shrink-0 rounded-md">
        <Image
          src={metadata?.picture}
          fallback={DEFAULT_AVATAR}
          alt={id}
          className="h-11 w-11 rounded-md bg-zinc-900 object-contain"
        />
      </div>
      <div className="flex flex-col gap-2">
        <div className="inline-flex items-center gap-1">
          <h5 className="text-lg font-semibold leading-none">{metadata?.name}</h5>
          <button type="button" onClick={() => copyNoteID()}>
            <CopyIcon width={14} height={14} className="text-zinc-400" />
          </button>
        </div>
        <p className="leading-tight text-zinc-400">
          {metadata?.about || (noteID && `${noteID.substring(0, 24)}...`)}
        </p>
      </div>
    </div>
  );
 }
@@ -1,85 +0,0 @@
 import { useState } from 'react';
 import { Image } from '@shared/image';
 import { DEFAULT_AVATAR } from '@stores/constants';
 import { useProfile } from '@utils/hooks/useProfile';
 import { shortenKey } from '@utils/shortenKey';
 export function MutedItem({ data }: { data: any }) {
  const { user, isError, isLoading } = useProfile(data.content);
  const [status, setStatus] = useState(data.status);
  const unmute = async () => {
    const { updateItemInBlacklist } = await import('@libs/storage');
    const res = await updateItemInBlacklist(data.content, 0);
    if (res) {
      setStatus(0);
    }
  };
  const mute = async () => {
    const { updateItemInBlacklist } = await import('@libs/storage');
    const res = await updateItemInBlacklist(data.content, 1);
    if (res) {
      setStatus(1);
    }
  };
  return (
    <div className="flex items-center justify-between">
      {isError || isLoading ? (
        <>
          <div className="flex items-center gap-1.5">
            <div className="relative h-9 w-9 shrink animate-pulse rounded-md bg-zinc-800" />
            <div className="flex w-full flex-1 flex-col items-start gap-0.5 text-start">
              <div className="h-3 w-16 animate-pulse bg-zinc-800" />
              <div className="h-2 w-10 animate-pulse bg-zinc-800" />
            </div>
          </div>
        </>
      ) : (
        <>
          <div className="flex items-center gap-1.5">
            <div className="relative h-9 w-9 shrink rounded-md">
              <Image
                src={user?.image}
                fallback={DEFAULT_AVATAR}
                alt={data.content}
                className="h-9 w-9 rounded-md object-cover"
              />
            </div>
            <div className="flex w-full flex-1 flex-col items-start gap-0.5 text-start">
              <span className="truncate text-base font-medium leading-none text-zinc-100">
                {user?.displayName || user?.name || 'Pleb'}
              </span>
              <span className="text-base leading-none text-zinc-400">
                {shortenKey(data.content)}
              </span>
            </div>
          </div>
          <div>
            {status === 1 ? (
              <button
                type="button"
                onClick={() => unmute()}
                className="inline-flex h-6 w-min items-center justify-center rounded px-1.5 text-base font-medium leading-none text-zinc-400 hover:bg-zinc-800 hover:text-fuchsia-500"
              >
                Unmute
              </button>
            ) : (
              <button
                type="button"
                onClick={() => mute()}
                className="inline-flex h-6 w-min items-center justify-center rounded px-1.5 text-base font-medium leading-none text-zinc-400 hover:bg-zinc-800 hover:text-fuchsia-500"
              >
                Mute
              </button>
            )}
          </div>
        </>
      )}
    </div>
  );
 }
@@ -1,36 +0,0 @@
 import { useQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { useNDK } from '@libs/ndk/provider';
 import { getChannel, updateChannelMetadata } from '@libs/storage';
 export function useChannelProfile(id: string) {
  const { ndk } = useNDK();
  const { data } = useQuery(['channel-metadata', id], async () => {
    return await getChannel(id);
  });
  useEffect(() => {
    // subscribe to channel
    const sub = ndk.subscribe(
      {
        '#e': [id],
        kinds: [41],
      },
      {
        closeOnEose: true,
      }
    );
    sub.addListener('event', (event: { content: string }) => {
      // update in local database
      updateChannelMetadata(id, event.content);
    });
    return () => {
      sub.stop();
    };
  }, []);
  return data;
 }
@@ -1,149 +0,0 @@
 import { useCallback, useContext, useEffect, useLayoutEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { Virtuoso } from 'react-virtuoso';
 import { ChannelMembers } from '@app/channel/components/members';
 import { ChannelMessageForm } from '@app/channel/components/messages/form';
 import { ChannelMetadata } from '@app/channel/components/metadata';
 import { useNDK } from '@libs/ndk/provider';
 import { useChannelMessages } from '@stores/channels';
 import { dateToUnix, getHourAgo } from '@utils/date';
 import { LumeEvent } from '@utils/types';
 import { ChannelMessageItem } from './components/messages/item';
 const now = new Date();
 const Header = (
  <div className="relative py-4">
    <div className="absolute inset-0 flex items-center">
      <div className="w-full border-t border-zinc-800" />
    </div>
    <div className="relative flex justify-center">
      <div className="inline-flex items-center gap-x-1.5 rounded-full bg-zinc-900 px-3 py-1.5 text-sm font-medium text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-800">
        {getHourAgo(24, now).toLocaleDateString('en-US', {
          weekday: 'long',
          year: 'numeric',
          month: 'long',
          day: 'numeric',
        })}
      </div>
    </div>
  </div>
 );
 const Empty = (
  <div className="flex flex-col gap-1 text-center">
    <h3 className="text-base font-semibold leading-none text-white">
      Nothing to see here yet
    </h3>
    <p className="text-base leading-none text-zinc-400">
      Be the first to share a message in this channel.
    </p>
  </div>
 );
 export function ChannelScreen() {
  const { ndk } = useNDK();
  const virtuosoRef = useRef(null);
  const { id } = useParams();
  const [messages, fetchMessages, addMessage, clearMessages] = useChannelMessages(
    (state: any) => [state.messages, state.fetch, state.add, state.clear]
  );
  useLayoutEffect(() => {
    fetchMessages(id);
  }, [fetchMessages]);
  useEffect(() => {
    // subscribe to channel
    const sub = ndk.subscribe(
      {
        '#e': [id],
        kinds: [42],
        since: dateToUnix(),
      },
      { closeOnEose: false }
    );
    sub.addListener('event', (event: LumeEvent) => {
      addMessage(id, event);
    });
    return () => {
      clearMessages();
      sub.stop();
    };
  }, []);
  const itemContent: any = useCallback(
    (index: string | number) => {
      return <ChannelMessageItem data={messages[index]} />;
    },
    [messages]
  );
  const computeItemKey = useCallback(
    (index: string | number) => {
      return messages[index].event_id;
    },
    [messages]
  );
  return (
    <div className="grid h-full w-full grid-cols-3">
      <div className="col-span-2 flex flex-col justify-between border-r border-zinc-900">
        <div
          data-tauri-drag-region
          className="inline-flex h-11 w-full shrink-0 items-center justify-center border-b border-zinc-900"
        >
          <h3 className="font-semibold text-zinc-100">Public Channel</h3>
        </div>
        <div className="h-full w-full flex-1 p-3">
          <div className="flex h-full flex-col justify-between overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900">
            <div className="h-full w-full flex-1">
              {!messages ? (
                <p>Loading...</p>
              ) : (
                <Virtuoso
                  ref={virtuosoRef}
                  data={messages}
                  itemContent={itemContent}
                  computeItemKey={computeItemKey}
                  initialTopMostItemIndex={messages.length - 1}
                  alignToBottom={true}
                  followOutput={true}
                  overscan={50}
                  increaseViewportBy={{ top: 200, bottom: 200 }}
                  className="scrollbar-hide overflow-y-auto"
                  components={{
                    Header: () => Header,
                    EmptyPlaceholder: () => Empty,
                  }}
                />
              )}
            </div>
            <div className="z-50 shrink-0 rounded-b-xl border-t border-zinc-800 bg-zinc-900 p-3 px-5">
              <ChannelMessageForm channelID={id} />
            </div>
          </div>
        </div>
      </div>
      <div className="col-span-1 flex flex-col">
        <div
          data-tauri-drag-region
          className="inline-flex h-11 w-full shrink-0 items-center justify-center border-b border-zinc-900"
        />
        <div className="flex flex-col gap-3 p-3">
          <ChannelMetadata id={id} />
          <ChannelMembers id={id} />
        </div>
      </div>
    </div>
  );
 }
@@ -3,58 +3,43 @@ import { twMerge } from 'tailwind-merge';
 import { Image } from '@shared/image';
 import { DEFAULT_AVATAR } from '@stores/constants';
 import { useProfile } from '@utils/hooks/useProfile';
-import { shortenKey } from '@utils/shortenKey';
+import { displayNpub } from '@utils/shortenKey';
-export function ChatsListItem({ data }: { data: any }) {
+export function ChatsListItem({ pubkey }: { pubkey: string }) {
-  const { status, user } = useProfile(data.sender_pubkey);
+  const { status, user } = useProfile(pubkey);
  if (status === 'loading') {
    return (
-      <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
+      <div className="inline-flex h-10 items-center gap-2.5 rounded-md px-2">
-        <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
+        <div className="relative h-7 w-7 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
-        <div className="h-2.5 w-2/3 animate-pulse rounded bg-zinc-800" />
+        <div className="h-2.5 w-2/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
      </div>
    );
  }
  return (
    <NavLink
-      to={`/app/chats/${data.sender_pubkey}`}
+      to={`/chats/${pubkey}`}
      preventScrollReset={true}
      className={({ isActive }) =>
        twMerge(
-          'inline-flex h-9 items-center gap-2.5 rounded-md px-2.5',
+          'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
-          isActive ? 'bg-zinc-900/50 text-zinc-100' : ''
+          isActive
            ? 'border-fuchsia-500 bg-white/5 text-white'
            : 'border-transparent text-white/80'
        )
      }
    >
-      <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
+      <Image
-        <Image
+        src={user?.picture || user?.image}
-          src={user?.picture || user?.image}
+        alt={pubkey}
-          fallback={DEFAULT_AVATAR}
+        className="h-7 w-7 shrink-0 rounded"
-          alt={data.sender_pubkey}
+      />
-          className="h-6 w-6 rounded object-cover"
+      <div className="inline-flex w-full flex-1 items-center justify-between">
-        />
+        <h5 className="max-w-[10rem] truncate">
-      </div>
+          {user?.name || user?.display_name || displayNpub(pubkey, 16)}
-      <div className="inline-flex w-full items-center justify-between">
+        </h5>
        <div className="inline-flex items-baseline gap-1">
          <h5 className="max-w-[10rem] truncate font-medium text-zinc-200">
            {user?.nip05 ||
              user?.name ||
              user?.displayName ||
              shortenKey(data.sender_pubkey)}
          </h5>
        </div>
        <div className="flex items-center">
          {data.new_messages > 0 && (
            <span className="inline-flex w-8 items-center justify-center rounded bg-fuchsia-400/10 px-1 py-1 text-xs font-medium text-fuchsia-500 ring-1 ring-inset ring-fuchsia-400/20">
              {data.new_messages}
            </span>
          )}
        </div>
      </div>
    </NavLink>
  );
@@ -3,28 +3,27 @@ import { useCallback } from 'react';
 import { ChatsListItem } from '@app/chats/components/item';
 import { NewMessageModal } from '@app/chats/components/modal';
 import { ChatsListSelfItem } from '@app/chats/components/self';
 import { UnknownsModal } from '@app/chats/components/unknowns';
-import { getChats } from '@libs/storage';
+import { useStorage } from '@libs/storage/provider';
-import { useAccount } from '@utils/hooks/useAccount';
+import { useNostr } from '@utils/hooks/useNostr';
 import { Chats } from '@utils/types';
 export function ChatsList() {
-  const { account } = useAccount();
+  const { db } = useStorage();
-  const {
+  const { fetchNIP04Chats } = useNostr();
-    status,
+  const { status, data: chats } = useQuery(
-    data: chats,
+    ['nip04-chats'],
-    isFetching,
+    async () => {
-  } = useQuery(['chats'], async () => {
+      return await fetchNIP04Chats();
-    return await getChats();
+    },
-  });
+    { refetchOnWindowFocus: false }
  );
  const renderItem = useCallback(
-    (item: Chats) => {
+    (item: string) => {
-      if (account.pubkey !== item.sender_pubkey) {
+      if (db.account.pubkey !== item) {
-        return <ChatsListItem key={item.sender_pubkey} data={item} />;
+        return <ChatsListItem key={item} pubkey={item} />;
      }
    },
    [chats]
@@ -33,13 +32,9 @@ export function ChatsList() {
  if (status === 'loading') {
    return (
      <div className="flex flex-col">
-        <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
+        <div className="inline-flex h-10 items-center gap-2.5 border-l-2 border-transparent pl-4">
-          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
+          <div className="relative h-7 w-7 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
-          <div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
+          <div className="h-4 w-full animate-pulse rounded bg-white/10 backdrop-blur-xl" />
        </div>
        <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
          <div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
        </div>
      </div>
    );
@@ -47,23 +42,9 @@ export function ChatsList() {
  return (
    <div className="flex flex-col">
      {account ? (
        <ChatsListSelfItem data={account} />
      ) : (
        <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
          <div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
        </div>
      )}
      {chats.follows.map((item) => renderItem(item))}
      {chats.unknowns.length > 0 && <UnknownsModal data={chats.unknowns} />}
      <NewMessageModal />
      {isFetching && (
        <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
          <div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
        </div>
      )}
    </div>
  );
 }
@@ -1,10 +1,12 @@
 import { nip04 } from 'nostr-tools';
 import { useCallback, useState } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import { MediaUploader } from '@app/chats/components/messages/mediaUploader';
 import { EnterIcon } from '@shared/icons';
 import { MediaUploader } from '@shared/mediaUploader';
-import { usePublish } from '@utils/hooks/usePublish';
+import { useNostr } from '@utils/hooks/useNostr';
 export function ChatMessageForm({
  receiverPubkey,
@@ -14,7 +16,7 @@ export function ChatMessageForm({
  userPubkey: string;
  userPrivkey: string;
 }) {
-  const { publish } = usePublish();
+  const { publish } = useNostr();
  const [value, setValue] = useState('');
  const encryptMessage = useCallback(async () => {
@@ -34,7 +36,7 @@ export function ChatMessageForm({
  const handleEnterPress = (e: {
    key: string;
-    shiftKey: any;
+    shiftKey: KeyboardEvent['shiftKey'];
    preventDefault: () => void;
  }) => {
    if (e.key === 'Enter' && !e.shiftKey) {
@@ -44,27 +46,28 @@ export function ChatMessageForm({
  };
  return (
-    <div className="relative h-11 w-full">
+    <div className="flex w-full items-center justify-between rounded-md bg-white/20 px-3">
-      <input
+      <TextareaAutosize
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onKeyDown={handleEnterPress}
        spellCheck={false}
        autoComplete="off"
        autoCorrect="off"
        autoCapitalize="off"
        placeholder="Message"
-        className="relative h-11 w-full resize-none rounded-md bg-zinc-800 px-5 !outline-none placeholder:text-zinc-500"
+        className="min-h-[44px] flex-1 resize-none bg-transparent py-3 text-white !outline-none placeholder:text-white"
      />
-      <div className="absolute right-2 top-0 h-11">
+      <div className="inline-flex items-center gap-2">
-        <div className="flex h-full items-center justify-end gap-3 text-zinc-500">
+        <MediaUploader setState={setValue} />
-          <MediaUploader setState={setValue} />
+        <button
-          <button
+          type="button"
-            type="button"
+          onClick={submit}
-            onClick={submit}
+          className="inline-flex items-center gap-1.5 text-sm font-medium leading-none text-white/50"
-            className="inline-flex items-center gap-1 text-sm leading-none"
+        >
-          >
+          <EnterIcon className="h-5 w-5" />
-            <EnterIcon width={14} height={14} className="" />
+          Send
-            Send
+        </button>
          </button>
        </div>
      </div>
    </div>
  );
@@ -1,43 +1,32 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { useDecryptMessage } from '@app/chats/hooks/useDecryptMessage';
 import { MentionNote } from '@shared/notes/mentions/note';
 import { ImagePreview } from '@shared/notes/preview/image';
 import { LinkPreview } from '@shared/notes/preview/link';
 import { VideoPreview } from '@shared/notes/preview/video';
 import { User } from '@shared/user';
 import { parser } from '@utils/parser';
 export function ChatMessageItem({
-  data,
+  message,
  userPubkey,
  userPrivkey,
 }: {
-  data: any;
+  message: NDKEvent;
  userPubkey: string;
  userPrivkey: string;
 }) {
-  const decryptedContent = useDecryptMessage(data, userPubkey, userPrivkey);
+  const decryptedContent = useDecryptMessage(message, userPubkey, userPrivkey);
  // if we have decrypted content, use it instead of the encrypted content
  if (decryptedContent) {
-    data['content'] = decryptedContent;
+    message['content'] = decryptedContent;
  }
  // parse the note content
  const content = parser(data);
  return (
-    <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-black/20">
+    <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 backdrop-blur-xl hover:bg-white/10">
      <div className="flex flex-col">
-        <User pubkey={data.sender_pubkey} time={data.created_at} isChat={true} />
+        <User pubkey={message.pubkey} time={message.created_at} isChat={true} />
        <div className="-mt-[20px] pl-[49px]">
-          <p className="select-text whitespace-pre-line break-words text-base text-zinc-100">
+          <p className="select-text whitespace-pre-line break-words text-base text-white">
-            {content.parsed}
+            {message.content}
          </p>
          {content.images.length > 0 && <ImagePreview urls={content.images} />}
          {content.videos.length > 0 && <VideoPreview urls={content.videos} />}
          {content.links.length > 0 && <LinkPreview urls={content.links} />}
          {content.notes.length > 0 &&
            content.notes.map((note: string) => <MentionNote key={note} id={note} />)}
        </div>
      </div>
    </div>
@@ -0,0 +1,53 @@
 import * as Tooltip from '@radix-ui/react-tooltip';
 import { Dispatch, SetStateAction, useState } from 'react';
 import { LoaderIcon, MediaIcon } from '@shared/icons';
 import { useImageUploader } from '@utils/hooks/useUploader';
 export function MediaUploader({
  setState,
 }: {
  setState: Dispatch<SetStateAction<string>>;
 }) {
  const upload = useImageUploader();
  const [loading, setLoading] = useState(false);
  const uploadMedia = async () => {
    setLoading(true);
    const image = await upload(null);
    if (image.url) {
      setState((prev: string) => `${prev}\n${image.url}`);
    }
    setLoading(false);
  };
  return (
    <Tooltip.Provider>
      <Tooltip.Root delayDuration={150}>
        <Tooltip.Trigger asChild>
          <button
            type="button"
            onClick={() => uploadMedia()}
            className="group inline-flex h-8 w-8 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
          >
            {loading ? (
              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
            ) : (
              <MediaIcon className="h-5 w-5 text-white" />
            )}
          </button>
        </Tooltip.Trigger>
        <Tooltip.Portal>
          <Tooltip.Content
            className="-left-10 select-none rounded-md bg-black px-3.5 py-1.5 text-sm leading-none text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
            sideOffset={5}
          >
            Upload media
            <Tooltip.Arrow className="fill-black" />
          </Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  );
 }
@@ -1,123 +1,80 @@
-import { Dialog, Transition } from '@headlessui/react';
+import * as Dialog from '@radix-ui/react-dialog';
-import { Fragment, useState } from 'react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { User } from '@app/auth/components/user';
-import { CancelIcon, LoaderIcon, PlusIcon } from '@shared/icons';
+import { useStorage } from '@libs/storage/provider';
-import { useAccount } from '@utils/hooks/useAccount';
+import { CancelIcon, PlusIcon } from '@shared/icons';
 export function NewMessageModal() {
  const navigate = useNavigate();
  const [isOpen, setIsOpen] = useState(false);
-  const { status, account } = useAccount();
+  const [open, setOpen] = useState(false);
-  const follows = account ? JSON.parse(account.follows as string) : [];
+  const { db } = useStorage();
  const closeModal = () => {
    setIsOpen(false);
  };
  const openModal = () => {
    setIsOpen(true);
  };
  const openChat = (pubkey: string) => {
-    closeModal();
+    setOpen(false);
-    navigate(`/app/chats/${pubkey}`);
+    navigate(`/chats/${pubkey}`);
  };
  return (
-    <>
+    <Dialog.Root open={open} onOpenChange={setOpen}>
-      <button
+      <Dialog.Trigger asChild>
-        type="button"
+        <button
-        onClick={() => openModal()}
+          type="button"
-        className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5"
+          className="inline-flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 border-transparent pl-4 pr-2"
-      >
+        >
-        <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
+          <div className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
-          <PlusIcon className="h-3 w-3 text-zinc-200" />
+            <PlusIcon className="h-4 w-4 text-white" />
-        </div>
+          </div>
-        <div>
+          <div>
-          <h5 className="font-medium text-zinc-400">New chat</h5>
+            <h5 className="text-white/50">New chat</h5>
-        </div>
+          </div>
-      </button>
+        </button>
-      <Transition appear show={isOpen} as={Fragment}>
+      </Dialog.Trigger>
-        <Dialog as="div" className="relative z-10" onClose={closeModal}>
+      <Dialog.Portal className="relative z-10">
-          <Transition.Child
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
-            as={Fragment}
+        <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-            enter="ease-out duration-300"
+          <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
-            enterFrom="opacity-0"
+            <div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">
-            enterTo="opacity-100"
+              <div className="flex flex-col gap-1">
-            leave="ease-in duration-200"
+                <div className="flex items-center justify-between">
-            leaveFrom="opacity-100"
+                  <Dialog.Title className="text-lg font-semibold leading-none text-white">
-            leaveTo="opacity-0"
+                    New chat
-          >
+                  </Dialog.Title>
-            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
+                  <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10">
-          </Transition.Child>
+                    <CancelIcon className="h-4 w-4 text-white/50" />
-          <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
+                  </Dialog.Close>
-            <Transition.Child
+                </div>
-              as={Fragment}
+                <Dialog.Description className="text-sm leading-none text-white/50">
-              enter="ease-out duration-300"
+                  All messages will be encrypted, but anyone can see who you chat
-              enterFrom="opacity-0 scale-95"
+                </Dialog.Description>
-              enterTo="opacity-100 scale-100"
+              </div>
-              leave="ease-in duration-200"
+            </div>
-              leaveFrom="opacity-100 scale-100"
+            <div className="flex h-[500px] flex-col overflow-y-auto overflow-x-hidden pb-2 pt-2">
-              leaveTo="opacity-0 scale-95"
+              {db.account?.follows?.map((follow) => (
-            >
+                <div
-              <Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border-t border-zinc-800/50 bg-zinc-900">
+                  key={follow}
-                <div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-5">
+                  className="group flex items-center justify-between px-4 py-2 backdrop-blur-xl hover:bg-white/10"
-                  <div className="flex flex-col gap-1">
+                >
-                    <div className="flex items-center justify-between">
+                  <User pubkey={follow} />
-                      <Dialog.Title
+                  <div>
-                        as="h3"
+                    <button
-                        className="text-lg font-semibold leading-none text-zinc-100"
+                      type="button"
-                      >
+                      onClick={() => openChat(follow)}
-                        New chat
+                      className="hidden w-max rounded bg-white/10 px-3 py-1 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500 group-hover:inline-flex"
-                      </Dialog.Title>
+                    >
-                      <button
+                      Chat
-                        type="button"
+                    </button>
                        onClick={closeModal}
                        className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800"
                      >
                        <CancelIcon className="h-4 w-4 text-zinc-300" />
                      </button>
                    </div>
                    <Dialog.Description className="text-sm leading-tight text-zinc-400">
                      All messages will be encrypted, but anyone can see who you chat
                    </Dialog.Description>
                  </div>
                </div>
-                <div className="flex h-[500px] flex-col overflow-y-auto overflow-x-hidden pb-5">
+              ))}
-                  {status === 'loading' ? (
+            </div>
                    <div className="inline-flex items-center justify-center px-4 py-3">
                      <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
                    </div>
                  ) : (
                    follows.map((follow) => (
                      <div
                        key={follow}
                        className="group flex items-center justify-between px-4 py-3 hover:bg-zinc-800"
                      >
                        <User pubkey={follow} />
                        <div>
                          <button
                            type="button"
                            onClick={() => openChat(follow)}
                            className="hidden w-max rounded-md bg-zinc-700 px-3 py-1 text-sm font-medium hover:bg-fuchsia-500 group-hover:inline-flex"
                          >
                            Chat
                          </button>
                        </div>
                      </div>
                    ))
                  )}
                </div>
              </Dialog.Panel>
            </Transition.Child>
          </div>
-        </Dialog>
+        </Dialog.Content>
-      </Transition>
+      </Dialog.Portal>
-    </>
+    </Dialog.Root>
  );
 }
@@ -1,52 +0,0 @@
 import { NavLink } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 import { Image } from '@shared/image';
 import { DEFAULT_AVATAR } from '@stores/constants';
 import { useProfile } from '@utils/hooks/useProfile';
 import { shortenKey } from '@utils/shortenKey';
 export function ChatsListSelfItem({ data }: { data: { pubkey: string } }) {
  const { status, user } = useProfile(data.pubkey);
  if (status === 'loading') {
    return (
      <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
        <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
        <div>
          <div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-base font-medium" />
        </div>
      </div>
    );
  }
  return (
    <NavLink
      to={`/app/chats/${data.pubkey}`}
      preventScrollReset={true}
      className={({ isActive }) =>
        twMerge(
          'inline-flex h-9 items-center gap-2.5 rounded-md px-2.5',
          isActive ? 'bg-zinc-900/50 text-zinc-100' : ''
        )
      }
    >
      <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
        <Image
          src={user?.picture || user?.image}
          fallback={DEFAULT_AVATAR}
          alt={data.pubkey}
          className="h-6 w-6 rounded bg-white object-cover"
        />
      </div>
      <div className="inline-flex items-baseline gap-1">
        <h5 className="max-w-[9rem] truncate font-medium text-zinc-200">
          {user?.nip05 || user?.name || shortenKey(data.pubkey)}
        </h5>
        <span className="text-zinc-500">(you)</span>
      </div>
    </NavLink>
  );
 }
@@ -1,11 +1,10 @@
 import { Link } from 'react-router-dom';
 import { Image } from '@shared/image';
-
+import { NIP05 } from '@shared/nip05';
 import { DEFAULT_AVATAR } from '@stores/constants';
 import { useProfile } from '@utils/hooks/useProfile';
-import { shortenKey } from '@utils/shortenKey';
+import { displayNpub } from '@utils/shortenKey';
 export function ChatSidebar({ pubkey }: { pubkey: string }) {
  const { user } = useProfile(pubkey);
@@ -16,7 +15,6 @@ export function ChatSidebar({ pubkey }: { pubkey: string }) {
        <div className="relative h-11 w-11 shrink rounded-md">
          <Image
            src={user?.picture || user?.image}
            fallback={DEFAULT_AVATAR}
            alt={pubkey}
            className="h-11 w-11 rounded-md object-cover"
          />
@@ -24,17 +22,25 @@ export function ChatSidebar({ pubkey }: { pubkey: string }) {
        <div className="flex flex-col gap-4">
          <div className="flex flex-col gap-1">
            <h3 className="text-lg font-semibold leading-none">
-              {user?.displayName || user?.name}
+              {user?.display_name || user?.name}
            </h3>
-            <h5 className="leading-none text-zinc-400">
+            {user?.nip05 ? (
-              {user?.nip05 || shortenKey(pubkey)}
+              <NIP05
-            </h5>
+                pubkey={pubkey}
                nip05={user?.nip05}
                className="leading-none text-white/50"
              />
            ) : (
              <span className="leading-none text-white/50">
                {displayNpub(pubkey, 16)}
              </span>
            )}
          </div>
          <div>
            <p className="leading-tight">{user?.bio || user?.about}</p>
            <Link
-              to={`/app/users/${pubkey}`}
+              to={`/users/${pubkey}`}
-              className="mt-3 inline-flex h-10 w-full items-center justify-center rounded-md bg-zinc-900 text-sm font-medium text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100"
+              className="mt-3 inline-flex h-10 w-full items-center justify-center rounded-md bg-white/10 text-sm font-medium text-white backdrop-blur-xl hover:bg-fuchsia-500"
            >
              View full profile
            </Link>
@@ -1,5 +1,5 @@
-import { Dialog, Transition } from '@headlessui/react';
+import * as Dialog from '@radix-ui/react-dialog';
-import { Fragment, useState } from 'react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { User } from '@app/auth/components/user';
@@ -7,111 +7,74 @@ import { User } from '@app/auth/components/user';
 import { CancelIcon, StrangersIcon } from '@shared/icons';
 import { compactNumber } from '@utils/number';
 import { Chats } from '@utils/types';
-export function UnknownsModal({ data }: { data: Chats[] }) {
+export function UnknownsModal({ data }: { data: string[] }) {
  const navigate = useNavigate();
-  const [isOpen, setIsOpen] = useState(false);
+  const [open, setOpen] = useState(false);
  const closeModal = () => {
    setIsOpen(false);
  };
  const openModal = () => {
    setIsOpen(true);
  };
  const openChat = (pubkey: string) => {
-    closeModal();
+    setOpen(false);
-    navigate(`/app/chats/${pubkey}`);
+    navigate(`/chats/${pubkey}`);
  };
  return (
-    <>
+    <Dialog.Root open={open} onOpenChange={setOpen}>
-      <button
+      <Dialog.Trigger asChild>
-        type="button"
+        <button
-        onClick={() => openModal()}
+          type="button"
-        className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5"
+          className="inline-flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 border-transparent pl-4 pr-2"
-      >
+        >
-        <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
+          <div className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
-          <StrangersIcon className="h-3 w-3 text-zinc-200" />
+            <StrangersIcon className="h-4 w-4 text-white" />
-        </div>
+          </div>
-        <div>
+          <div>
-          <h5 className="font-medium text-zinc-400">
+            <h5 className="text-white/50">
-            {compactNumber.format(data.length)} unknowns
+              {compactNumber.format(data.length)} unknowns
-          </h5>
+            </h5>
-        </div>
+          </div>
-      </button>
+        </button>
-      <Transition appear show={isOpen} as={Fragment}>
+      </Dialog.Trigger>
-        <Dialog as="div" className="relative z-10" onClose={closeModal}>
+      <Dialog.Portal className="relative z-10">
-          <Transition.Child
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
-            as={Fragment}
+        <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-            enter="ease-out duration-300"
+          <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
-            enterFrom="opacity-0"
+            <div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">
-            enterTo="opacity-100"
+              <div className="flex flex-col gap-1">
-            leave="ease-in duration-200"
+                <div className="flex items-center justify-between">
-            leaveFrom="opacity-100"
+                  <Dialog.Title className="text-lg font-semibold leading-none text-white">
-            leaveTo="opacity-0"
+                    {data.length} unknowns
-          >
+                  </Dialog.Title>
-            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
+                  <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10">
-          </Transition.Child>
+                    <CancelIcon className="h-4 w-4 text-white/50" />
-          <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
+                  </Dialog.Close>
-            <Transition.Child
+                </div>
-              as={Fragment}
+                <Dialog.Description className="text-sm leading-none text-white/50">
-              enter="ease-out duration-300"
+                  All messages from people you not follow
-              enterFrom="opacity-0 scale-95"
+                </Dialog.Description>
-              enterTo="opacity-100 scale-100"
+              </div>
-              leave="ease-in duration-200"
+            </div>
-              leaveFrom="opacity-100 scale-100"
+            <div className="flex h-[500px] flex-col overflow-y-auto overflow-x-hidden pb-2 pt-2">
-              leaveTo="opacity-0 scale-95"
+              {data.map((pubkey) => (
-            >
+                <div
-              <Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border-t border-zinc-800/50 bg-zinc-900">
+                  key={pubkey}
-                <div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-5">
+                  className="group flex items-center justify-between px-4 py-2 backdrop-blur-xl hover:bg-white/10"
-                  <div className="flex flex-col gap-1">
+                >
-                    <div className="flex items-center justify-between">
+                  <User pubkey={pubkey} />
-                      <Dialog.Title
+                  <div>
-                        as="h3"
+                    <button
-                        className="text-lg font-semibold leading-none text-zinc-100"
+                      type="button"
-                      >
+                      onClick={() => openChat(pubkey)}
-                        {data.length} unknowns
+                      className="hidden w-max rounded bg-white/10 px-3 py-1 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500 group-hover:inline-flex"
-                      </Dialog.Title>
+                    >
-                      <button
+                      Chat
-                        type="button"
+                    </button>
                        onClick={closeModal}
                        className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800"
                      >
                        <CancelIcon className="h-4 w-4 text-zinc-300" />
                      </button>
                    </div>
                    <Dialog.Description className="text-sm leading-tight text-zinc-400">
                      All messages from people you not follow
                    </Dialog.Description>
                  </div>
                </div>
-                <div className="flex h-[500px] flex-col overflow-y-auto overflow-x-hidden pb-5">
+              ))}
-                  {data.map((user) => (
+            </div>
                    <div
                      key={user.sender_pubkey}
                      className="group flex items-center justify-between px-4 py-3 hover:bg-zinc-800"
                    >
                      <User pubkey={user.sender_pubkey} />
                      <div>
                        <button
                          type="button"
                          onClick={() => openChat(user.sender_pubkey)}
                          className="hidden w-max rounded-md bg-zinc-700 px-3 py-1 text-sm font-medium hover:bg-fuchsia-500 group-hover:inline-flex"
                        >
                          Chat
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </Dialog.Panel>
            </Transition.Child>
          </div>
-        </Dialog>
+        </Dialog.Content>
-      </Transition>
+      </Dialog.Portal>
-    </>
+    </Dialog.Root>
  );
 }
@@ -1,14 +1,21 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { nip04 } from 'nostr-tools';
 import { useEffect, useState } from 'react';
-export function useDecryptMessage(data: any, userPubkey: string, userPriv: string) {
+export function useDecryptMessage(
-  const [content, setContent] = useState(data.content);
+  message: NDKEvent,
  userPubkey: string,
  userPriv: string
 ) {
  const [content, setContent] = useState(message.content);
  useEffect(() => {
    async function decrypt() {
      const pubkey =
-        userPubkey === data.sender_pubkey ? data.receiver_pubkey : data.sender_pubkey;
+        userPubkey === message.pubkey
-      const result = await nip04.decrypt(userPriv, pubkey, data.content);
+          ? message.tags.find((el) => el[0] === 'p')[1]
          : message.pubkey;
      const result = await nip04.decrypt(userPriv, pubkey, message.content);
      setContent(result);
    }
@@ -1,5 +1,5 @@
 import { NDKSubscription } from '@nostr-dev-kit/ndk';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { useCallback, useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { Virtuoso } from 'react-virtuoso';
@@ -9,37 +9,34 @@ import { ChatMessageItem } from '@app/chats/components/messages/item';
 import { ChatSidebar } from '@app/chats/components/sidebar';
 import { useNDK } from '@libs/ndk/provider';
-import { createChat, getChatMessages } from '@libs/storage';
+import { useStorage } from '@libs/storage/provider';
 import { LoaderIcon } from '@shared/icons';
 import { useStronghold } from '@stores/stronghold';
-import { useAccount } from '@utils/hooks/useAccount';
+import { useNostr } from '@utils/hooks/useNostr';
 export function ChatScreen() {
  const queryClient = useQueryClient();
  const virtuosoRef = useRef(null);
  const { ndk } = useNDK();
  const { pubkey } = useParams();
  const { account } = useAccount();
  const { status, data } = useQuery(
    ['chat', pubkey],
    async () => {
      return await getChatMessages(account.pubkey, pubkey);
    },
    {
      enabled: account ? true : false,
    }
  );
  const userPrivkey = useStronghold((state) => state.privkey);
-  const itemContent: any = useCallback(
+  const { db } = useStorage();
  const { ndk } = useNDK();
  const { pubkey } = useParams();
  const { fetchNIP04Messages } = useNostr();
  const { status, data } = useQuery(['nip04-dm', pubkey], async () => {
    return await fetchNIP04Messages(pubkey);
  });
  const itemContent = useCallback(
    (index: string | number) => {
      const message = data[index];
      if (!message) return;
      return (
        <ChatMessageItem
-          data={data[index]}
+          message={message}
-          userPubkey={account.pubkey}
+          userPubkey={db.account.pubkey}
          userPrivkey={userPrivkey}
        />
      );
@@ -54,27 +51,11 @@ export function ChatScreen() {
    [data]
  );
  const chat = useMutation({
    mutationFn: (data: any) => {
      return createChat(
        data.id,
        data.receiver_pubkey,
        data.sender_pubkey,
        data.content,
        data.tags,
        data.created_at
      );
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['chat', pubkey] });
    },
  });
  useEffect(() => {
    const sub: NDKSubscription = ndk.subscribe(
      {
        kinds: [4],
-        authors: [account.pubkey],
+        authors: [db.account.pubkey],
        '#p': [pubkey],
        since: Math.floor(Date.now() / 1000),
      },
@@ -84,14 +65,7 @@ export function ChatScreen() {
    );
    sub.addListener('event', (event) => {
-      chat.mutate({
+      console.log(event);
        id: event.id,
        receiver_pubkey: pubkey,
        sender_pubkey: event.pubkey,
        content: event.content,
        tags: event.tags,
        created_at: event.created_at,
      });
    });
    return () => {
@@ -100,19 +74,18 @@ export function ChatScreen() {
  }, [pubkey]);
  return (
-    <div className="grid h-full w-full grid-cols-3">
+    <div className="grid h-full w-full grid-cols-3 bg-white/10 backdrop-blur-xl">
-      <div className="col-span-2 flex flex-col justify-between border-r border-zinc-900">
+      <div className="col-span-2 border-r border-white/5">
        <div
          data-tauri-drag-region
          className="inline-flex h-11 w-full shrink-0 items-center justify-center border-b border-zinc-900"
        >
          <h3 className="font-semibold text-zinc-100">Encrypted Chat</h3>
        </div>
        <div className="h-full w-full flex-1 p-3">
-          <div className="flex h-full flex-col justify-between overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900">
+          <div className="flex h-full flex-col justify-between overflow-hidden rounded-xl bg-white/10 backdrop-blur-xl">
            <div className="h-full w-full flex-1">
              {status === 'loading' ? (
-                <p>Loading...</p>
+                <div className="flex h-full w-full items-center justify-center">
                  <div className="flex flex-col items-center gap-1.5">
                    <LoaderIcon className="h-5 w-5 animate-spin text-white" />
                    <p className="text-sm font-medium text-white/50">Loading messages</p>
                  </div>
                </div>
              ) : (
                <Virtuoso
                  ref={virtuosoRef}
@@ -131,21 +104,17 @@ export function ChatScreen() {
                />
              )}
            </div>
-            <div className="z-50 shrink-0 rounded-b-xl border-t border-zinc-800 bg-zinc-900 p-3 px-5">
+            <div className="z-50 shrink-0 rounded-b-xl border-t border-white/5 bg-white/10 p-3 px-5 backdrop-blur-xl">
              <ChatMessageForm
                receiverPubkey={pubkey}
-                userPubkey={account.pubkey}
+                userPubkey={db.account.pubkey}
                userPrivkey={userPrivkey}
              />
            </div>
          </div>
        </div>
      </div>
-      <div className="col-span-1">
+      <div className="col-span-1 pt-3">
        <div
          data-tauri-drag-region
          className="inline-flex h-11 w-full shrink-0 items-center justify-center border-b border-zinc-900"
        />
        <ChatSidebar pubkey={pubkey} />
      </div>
    </div>
@@ -155,7 +124,7 @@ export function ChatScreen() {
 const Empty = (
  <div className="absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 transform flex-col gap-1 text-center">
    <h3 className="mb-2 text-4xl">🙌</h3>
-    <p className="leading-none text-zinc-400">
+    <p className="leading-none text-white/50">
      You two didn&apos;t talk yet, let&apos;s send first message
    </p>
  </div>
@@ -1,22 +1,93 @@
-import { useRouteError } from 'react-router-dom';
+import { useEffect, useState } from 'react';
 import { useLocation, useRouteError } from 'react-router-dom';
-interface IRouteError {
+import { Frame } from '@shared/frame';
 interface RouteError {
  statusText: string;
  message: string;
 }
 interface DebugInfo {
  os: null | string;
  version: null | string;
  appDir: null | string;
 }
 export function ErrorScreen() {
-  const error = useRouteError() as IRouteError;
+  const error = useRouteError() as RouteError;
  const location = useLocation();
  const [debugInfo, setDebugInfo] = useState<DebugInfo>({
    os: null,
    version: null,
    appDir: null,
  });
  useEffect(() => {
    async function getInformation() {
      const { platform, version } = await import('@tauri-apps/api/os');
      const { getVersion } = await import('@tauri-apps/api/app');
      const { appConfigDir } = await import('@tauri-apps/api/path');
      const platformName = await platform();
      const osVersion = await version();
      const appVersion = await getVersion();
      const appDir = await appConfigDir();
      setDebugInfo({
        os: platformName + ' ' + osVersion,
        version: appVersion,
        appDir: appDir,
      });
    }
    getInformation();
  }, []);
  return (
-    <div className="flex h-full w-full items-center justify-center">
+    <Frame className="flex h-full items-center justify-center">
-      <div>
+      <div className="flex w-full flex-col gap-4 px-4 md:max-w-lg md:px-0">
-        <h1>Oops!</h1>
+        <div className="flex flex-col">
-        <p>Sorry, an unexpected error has occurred.</p>
+          <h1 className="mb-1 text-2xl font-semibold text-white">
-        <p>
+            Sorry, an unexpected error has occurred.
-          <i>{error.statusText || error.message}</i>
+          </h1>
-        </p>
+          <div className="mt-4 inline-flex h-16 items-center justify-center rounded-xl border border-dashed border-red-400 bg-red-200/10 px-5">
            <p className="select-text text-sm font-medium text-red-400">
              {error.statusText || error.message}
            </p>
          </div>
          <div className="mt-4">
            <p className="font-medium text-white/50">
              Current location: {location.pathname}
            </p>
            <p className="font-medium text-white/50">App version: {debugInfo.version}</p>
            <p className="font-medium text-white/50">Platform: {debugInfo.os}</p>
          </div>
        </div>
        <div className="flex flex-col gap-2">
          <a
            href="https://github.com/luminous-devs/lume/issues/new"
            target="_blank"
            rel="noreferrer"
            className="inline-flex h-11 w-full items-center justify-center rounded-lg text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
          >
            Click here to report the issue on GitHub
          </a>
          <button
            type="button"
            className="inline-flex h-11 w-full items-center justify-center rounded-lg text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
          >
            Reload app
          </button>
          <button
            type="button"
            className="inline-flex h-11 w-full items-center justify-center rounded-lg text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
          >
            Reset app
          </button>
        </div>
      </div>
-    </div>
+    </Frame>
  );
 }
@@ -1,49 +0,0 @@
 import { useParams } from 'react-router-dom';
 import { useLiveThread } from '@app/space/hooks/useLiveThread';
 import { NoteMetadata } from '@shared/notes/metadata';
 import { NoteReplyForm } from '@shared/notes/replies/form';
 import { RepliesList } from '@shared/notes/replies/list';
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { User } from '@shared/user';
 import { useAccount } from '@utils/hooks/useAccount';
 import { useEvent } from '@utils/hooks/useEvent';
 export function NoteScreen() {
  const { id } = useParams();
  const { account } = useAccount();
  const { status, data } = useEvent(id);
  useLiveThread(id);
  return (
    <div className="mx-auto w-[600px]">
      <div className="scrollbar-hide flex h-full w-full flex-col gap-1.5 overflow-y-auto pb-20 pt-16">
        {status === 'loading' ? (
          <div className="px-3 py-1.5">
            <div className="shadow-input rounded-md bg-zinc-900 px-3 py-3 shadow-black/20">
              <NoteSkeleton />
            </div>
          </div>
        ) : (
          <div className="h-min w-full px-3 py-1.5">
            <div className="rounded-md bg-zinc-900 px-5 pt-5">
              <User pubkey={data.pubkey} time={data.created_at} />
              <div className="mt-3">
                <NoteMetadata id={data.event_id || id} />
              </div>
            </div>
            <div className="mt-3 rounded-md bg-zinc-900">
              {account && <NoteReplyForm rootID={id} userPubkey={account.pubkey} />}
            </div>
          </div>
        )}
        <div className="px-3">
          <RepliesList id={id} />
        </div>
      </div>
    </div>
  );
 }
@@ -0,0 +1,122 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { writeText } from '@tauri-apps/api/clipboard';
 import { nip19 } from 'nostr-tools';
 import { EventPointer } from 'nostr-tools/lib/nip19';
 import { useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useStorage } from '@libs/storage/provider';
 import { ArrowLeftIcon, CheckCircleIcon, ReplyIcon, ShareIcon } from '@shared/icons';
 import {
  ArticleDetailNote,
  NoteActions,
  NoteReplyForm,
  NoteStats,
  ThreadUser,
  UnknownNote,
 } from '@shared/notes';
 import { RepliesList } from '@shared/notes/replies/list';
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { useEvent } from '@utils/hooks/useEvent';
 export function ArticleNoteScreen() {
  const navigate = useNavigate();
  const replyRef = useRef(null);
  const { id } = useParams();
  const { db } = useStorage();
  const { status, data } = useEvent(id);
  const [isCopy, setIsCopy] = useState(false);
  const share = async () => {
    await writeText(
      'https://nostr.com/' +
        nip19.neventEncode({ id: data.id, author: data.pubkey } as EventPointer)
    );
    // update state
    setIsCopy(true);
    // reset state after 2 sec
    setTimeout(() => setIsCopy(false), 2000);
  };
  const scrollToReply = () => {
    replyRef.current.scrollIntoView();
  };
  const renderKind = (event: NDKEvent) => {
    switch (event.kind) {
      case NDKKind.Article:
        return <ArticleDetailNote event={event} />;
      default:
        return <UnknownNote event={event} />;
    }
  };
  return (
    <div className="scrollbar-hide h-full w-full overflow-y-auto scroll-smooth">
      <div className="container mx-auto px-4 pt-16 sm:px-6 lg:px-8">
        <div className="grid grid-cols-5">
          <div className="col-span-1 pr-8">
            <div className="sticky top-16 flex flex-col items-end gap-4">
              <button
                type="button"
                onClick={() => navigate(-1)}
                className="inline-flex h-12 w-12 items-center justify-center rounded-xl border border-white/10 bg-white/5"
              >
                <ArrowLeftIcon className="h-5 w-5 text-white" />
              </button>
              <div className="flex flex-col divide-y divide-white/5 rounded-xl border border-white/10 bg-white/5">
                <button
                  type="button"
                  onClick={share}
                  className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-t-xl "
                >
                  {isCopy ? (
                    <CheckCircleIcon className="h-5 w-5 text-green-500" />
                  ) : (
                    <ShareIcon className="h-5 w-5 text-white" />
                  )}
                </button>
                <button
                  type="button"
                  onClick={scrollToReply}
                  className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-b-xl"
                >
                  <ReplyIcon className="h-5 w-5 text-white" />
                </button>
              </div>
            </div>
          </div>
          <div className="col-span-3 flex flex-col gap-1.5">
            {status === 'loading' ? (
              <div className="px-3 py-1.5">
                <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
                  <NoteSkeleton />
                </div>
              </div>
            ) : (
              <div className="h-min w-full px-3">
                <div className="rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
                  <ThreadUser pubkey={data.pubkey} time={data.created_at} />
                  <div className="mt-2">{renderKind(data)}</div>
                  <div>
                    <NoteActions id={id} pubkey={data.pubkey} extraButtons={false} />
                    <NoteStats id={id} />
                  </div>
                </div>
              </div>
            )}
            <div ref={replyRef} className="px-3">
              <NoteReplyForm id={id} pubkey={db.account.pubkey} />
              <RepliesList id={id} />
            </div>
          </div>
          <div className="col-span-1" />
        </div>
      </div>
    </div>
  );
 }
@@ -0,0 +1,128 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { writeText } from '@tauri-apps/api/clipboard';
 import { nip19 } from 'nostr-tools';
 import { EventPointer } from 'nostr-tools/lib/nip19';
 import { useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useStorage } from '@libs/storage/provider';
 import { ArrowLeftIcon, CheckCircleIcon, ReplyIcon, ShareIcon } from '@shared/icons';
 import {
  ArticleNote,
  FileNote,
  NoteActions,
  NoteReplyForm,
  NoteStats,
  TextNote,
  ThreadUser,
  UnknownNote,
 } from '@shared/notes';
 import { RepliesList } from '@shared/notes/replies/list';
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { useEvent } from '@utils/hooks/useEvent';
 export function TextNoteScreen() {
  const navigate = useNavigate();
  const replyRef = useRef(null);
  const { id } = useParams();
  const { db } = useStorage();
  const { status, data } = useEvent(id);
  const [isCopy, setIsCopy] = useState(false);
  const share = async () => {
    await writeText(
      'https://nostr.com/' +
        nip19.neventEncode({ id: data.id, author: data.pubkey } as EventPointer)
    );
    // update state
    setIsCopy(true);
    // reset state after 2 sec
    setTimeout(() => setIsCopy(false), 2000);
  };
  const scrollToReply = () => {
    replyRef.current.scrollIntoView();
  };
  const renderKind = (event: NDKEvent) => {
    switch (event.kind) {
      case NDKKind.Text:
        return <TextNote content={event.content} />;
      case NDKKind.Article:
        return <ArticleNote event={event} />;
      case 1063:
        return <FileNote event={event} />;
      default:
        return <UnknownNote event={event} />;
    }
  };
  return (
    <div className="scrollbar-hide h-full w-full overflow-y-auto scroll-smooth">
      <div className="container mx-auto px-4 pt-16 sm:px-6 lg:px-8">
        <div className="grid grid-cols-5">
          <div className="col-span-1 pr-8">
            <div className="sticky top-16 flex flex-col items-end gap-4">
              <button
                type="button"
                onClick={() => navigate(-1)}
                className="inline-flex h-12 w-12 items-center justify-center rounded-xl border border-white/10 bg-white/5"
              >
                <ArrowLeftIcon className="h-5 w-5 text-white" />
              </button>
              <div className="flex flex-col divide-y divide-white/5 rounded-xl border border-white/10 bg-white/5">
                <button
                  type="button"
                  onClick={share}
                  className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-t-xl "
                >
                  {isCopy ? (
                    <CheckCircleIcon className="h-5 w-5 text-green-500" />
                  ) : (
                    <ShareIcon className="h-5 w-5 text-white" />
                  )}
                </button>
                <button
                  type="button"
                  onClick={scrollToReply}
                  className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-b-xl"
                >
                  <ReplyIcon className="h-5 w-5 text-white" />
                </button>
              </div>
            </div>
          </div>
          <div className="col-span-3 flex flex-col gap-1.5">
            {status === 'loading' ? (
              <div className="px-3 py-1.5">
                <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
                  <NoteSkeleton />
                </div>
              </div>
            ) : (
              <div className="h-min w-full px-3">
                <div className="rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
                  <ThreadUser pubkey={data.pubkey} time={data.created_at} />
                  <div className="mt-2">{renderKind(data)}</div>
                  <div>
                    <NoteActions id={id} pubkey={data.pubkey} extraButtons={false} />
                    <NoteStats id={id} />
                  </div>
                </div>
              </div>
            )}
            <div ref={replyRef} className="px-3">
              <NoteReplyForm id={id} pubkey={db.account.pubkey} />
              <RepliesList id={id} />
            </div>
          </div>
          <div className="col-span-1" />
        </div>
      </div>
    </div>
  );
 }
@@ -0,0 +1,27 @@
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { Hashtag, MentionUser } from '@shared/notes';
 import { RichContent } from '@utils/types';
 export function NotiContent({ content }: { content: RichContent }) {
  return (
    <>
      <ReactMarkdown
        className="markdown"
        remarkPlugins={[remarkGfm]}
        components={{
          del: ({ children }) => {
            const key = children[0] as string;
            if (key.startsWith('pub') && key.length > 50 && key.length < 100)
              return <MentionUser pubkey={key.replace('pub-', '')} />;
            if (key.startsWith('tag')) return <Hashtag tag={key.replace('tag-', '')} />;
          },
        }}
      >
        {content?.parsed}
      </ReactMarkdown>
    </>
  );
 }
@@ -0,0 +1,32 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { useMemo } from 'react';
 import { NotiContent } from '@app/notifications/components/content';
 import { NotiUser } from '@app/notifications/components/user';
 import { formatCreatedAt } from '@utils/createdAt';
 import { parser } from '@utils/parser';
 export function NotiMention({ event }: { event: NDKEvent }) {
  const createdAt = formatCreatedAt(event.created_at);
  const content = useMemo(() => parser(event), [event]);
  return (
    <div className="h-min w-full px-3 py-1.5">
      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
        <div className="flex items-start justify-between">
          <div className="flex items-start gap-1">
            <NotiUser pubkey={event.pubkey} />
            <p className="leading-none text-white/50">has reply you post · {createdAt}</p>
          </div>
        </div>
        <div className="f- relative z-10 -mt-6 flex gap-3">
          <div className="h-11 w-11 shrink-0" />
          <div className="mb-2 mt-3 w-full cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
            <NotiContent content={content} />
          </div>
        </div>
      </div>
    </div>
  );
 }
@@ -0,0 +1,30 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { SimpleNote } from '@app/notifications/components/simpleNote';
 import { NotiUser } from '@app/notifications/components/user';
 import { formatCreatedAt } from '@utils/createdAt';
 export function NotiReaction({ event }: { event: NDKEvent }) {
  const root = event.tags.find((e) => e[0] === 'e')?.[1];
  const createdAt = formatCreatedAt(event.created_at);
  return (
    <div className="h-min w-full px-3 py-1.5">
      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
        <div className="flex items-start justify-between">
          <div className="flex items-start gap-1">
            <NotiUser pubkey={event.pubkey} />
            <p className="leading-none text-white/50">
              reacted {event.content} · {createdAt}
            </p>
          </div>
        </div>
        <div className="relative z-10 -mt-6 flex gap-3">
          <div className="h-11 w-11 shrink-0" />
          <div className="flex-1">{root && <SimpleNote id={root} />}</div>
        </div>
      </div>
    </div>
  );
 }
@@ -0,0 +1,38 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { SimpleNote } from '@app/notifications/components/simpleNote';
 import { NotiUser } from '@app/notifications/components/user';
 import { useStorage } from '@libs/storage/provider';
 import { formatCreatedAt } from '@utils/createdAt';
 export function NotiRepost({ event }: { event: NDKEvent }) {
  const { db } = useStorage();
  const root = event.tags.find((e) => e[0] === 'e')?.[1];
  const createdAt = formatCreatedAt(event.created_at);
  return (
    <div className="h-min w-full px-3 py-1.5">
      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
        <div className="flex items-start justify-between">
          <div className="flex items-start gap-1">
            <NotiUser pubkey={event.pubkey} />
            <p className="leading-none text-white/50">
              repost{' '}
              {event.pubkey !== db.account.pubkey
                ? 'a post that mention you'
                : 'your post'}{' '}
              · {createdAt}
            </p>
          </div>
        </div>
        <div className="relative z-10 -mt-6 flex gap-3">
          <div className="h-11 w-11 shrink-0" />
          <div className="flex-1">{root && <SimpleNote id={root} />}</div>
        </div>
      </div>
    </div>
  );
 }
@@ -0,0 +1,61 @@
 import { memo } from 'react';
 import { useStorage } from '@libs/storage/provider';
 import { NoteSkeleton } from '@shared/notes';
 import { User } from '@shared/user';
 import { WidgetKinds, useWidgets } from '@stores/widgets';
 import { useEvent } from '@utils/hooks/useEvent';
 export const SimpleNote = memo(function SimpleNote({ id }: { id: string }) {
  const { db } = useStorage();
  const { status, data } = useEvent(id);
  const setWidget = useWidgets((state) => state.setWidget);
  const openThread = (event, thread: string) => {
    const selection = window.getSelection();
    if (selection.toString().length === 0) {
      setWidget(db, { kind: WidgetKinds.local.thread, title: 'Thread', content: thread });
    } else {
      event.stopPropagation();
    }
  };
  if (status === 'loading') {
    return (
      <div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
        <NoteSkeleton />
      </div>
    );
  }
  if (status === 'error') {
    return (
      <div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
        <p>Can&apos;t get event from relay</p>
      </div>
    );
  }
  return (
    <div
      onClick={(e) => openThread(e, id)}
      onKeyDown={(e) => openThread(e, id)}
      role="button"
      tabIndex={0}
      className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl"
    >
      <User pubkey={data.pubkey} time={data.created_at} size="small" />
      <div className="markdown">
        <p>
          {data.content.length > 200
            ? data.content.substring(0, 200) + '...'
            : data.content}
        </p>
      </div>
    </div>
  );
 });
@@ -1,7 +1,5 @@
 import { Image } from '@shared/image';
 import { DEFAULT_AVATAR } from '@stores/constants';
 import { useProfile } from '@utils/hooks/useProfile';
 import { displayNpub } from '@utils/shortenKey';
@@ -11,26 +9,23 @@ export function NotiUser({ pubkey }: { pubkey: string }) {
  if (status === 'loading') {
    return (
      <div className="flex items-start gap-2">
-        <div className="relative h-8 w-8 shrink-0 animate-pulse rounded-md bg-zinc-800" />
+        <div className="relative h-8 w-8 shrink-0 animate-pulse rounded-md bg-white/10" />
        <div className="flex w-full flex-1 flex-col items-start gap-1 text-start">
-          <span className="h-4 w-1/2 animate-pulse rounded bg-zinc-800" />
+          <span className="h-4 w-1/2 animate-pulse rounded bg-white/10" />
        </div>
      </div>
    );
  }
  return (
-    <div className="flex shrink-0 items-start justify-start gap-2">
+    <div className="flex shrink-0 items-start justify-start gap-3">
-      <div className="w-88 relative h-8 shrink-0 rounded-md">
+      <Image
-        <Image
+        src={user?.picture || user?.image}
-          src={user?.picture || user?.image}
+        alt={pubkey}
-          fallback={DEFAULT_AVATAR}
+        className="h-11 w-11 shrink-0 rounded-lg object-cover"
-          alt={pubkey}
+      />
-          className="w-88 h-8 rounded-md object-cover"
+      <span className="max-w-[10rem] flex-1 truncate font-medium leading-none text-white">
-        />
+        {user?.name || user?.display_name || displayNpub(pubkey, 16)}
      </div>
      <span className="max-w-[10rem] flex-1 truncate leading-none text-zinc-200">
        {user?.nip05 || user?.name || user?.displayName || displayNpub(pubkey, 16)}
      </span>
    </div>
  );
@@ -0,0 +1,73 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
 import { NotiMention } from '@app/notifications/components/mention';
 import { NotiReaction } from '@app/notifications/components/reaction';
 import { NotiRepost } from '@app/notifications/components/repost';
 import { useStorage } from '@libs/storage/provider';
 import { LoaderIcon } from '@shared/icons';
 import { TitleBar } from '@shared/titleBar';
 import { useNostr } from '@utils/hooks/useNostr';
 export function NotificationScreen() {
  const { db } = useStorage();
  const { fetchActivities } = useNostr();
  const { status, data } = useQuery(
    ['notifications', db.account.pubkey],
    async () => {
      return await fetchActivities();
    },
    { refetchOnWindowFocus: false }
  );
  const renderItem = useCallback(
    (event: NDKEvent) => {
      switch (event.kind) {
        case 1:
          return <NotiMention key={event.id} event={event} />;
        case 6:
          return <NotiRepost key={event.id} event={event} />;
        case 7:
          return <NotiReaction key={event.id} event={event} />;
        default:
          return null;
      }
    },
    [data]
  );
  return (
    <div className="scrollbar-hide h-full w-full overflow-y-auto bg-white/10 backdrop-blur-xl">
      <div className="grid h-full grid-cols-3">
        <div className="col-span-2 flex flex-col border-r border-white/5">
          <TitleBar title="Activities in the last 24 hours" />
          <div className="flex h-full flex-col gap-1.5">
            <div className="flex h-full flex-col">
              {status === 'loading' ? (
                <div className="flex h-full w-full items-center justify-center">
                  <div className="flex flex-col items-center gap-1.5">
                    <LoaderIcon className="h-5 w-5 animate-spin text-white" />
                    <p className="text-sm font-medium text-white/50">Loading</p>
                  </div>
                </div>
              ) : data?.length < 1 ? (
                <div className="flex h-full w-full flex-col items-center justify-center">
                  <p className="mb-1 text-4xl">🎉</p>
                  <p className="font-medium text-white/50">
                    Yo!, no new activities around you in the last 24 hours
                  </p>
                </div>
              ) : (
                data.map((event) => renderItem(event))
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
 }
@@ -1,200 +0,0 @@
 import { NDKUser } from '@nostr-dev-kit/ndk';
 import { nip19 } from 'nostr-tools';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useNDK } from '@libs/ndk/provider';
 import {
  countTotalNotes,
  createChat,
  createNote,
  getLastLogin,
  updateAccount,
  updateLastLogin,
 } from '@libs/storage';
 import { LoaderIcon } from '@shared/icons';
 import { nHoursAgo } from '@utils/date';
 import { useAccount } from '@utils/hooks/useAccount';
 const totalNotes = await countTotalNotes();
 const lastLogin = await getLastLogin();
 export function Root() {
  const navigate = useNavigate();
  const { ndk, relayUrls, fetcher } = useNDK();
  const { status, account } = useAccount();
  async function getFollows() {
    const authors: string[] = [];
    const user = ndk.getUser({ hexpubkey: account.pubkey });
    const follows = await user.follows();
    follows.forEach((follow: NDKUser) => {
      authors.push(nip19.decode(follow.npub).data as string);
    });
    // update follows in db
    await updateAccount('follows', authors, account.pubkey);
    return authors;
  }
  async function fetchNotes() {
    try {
      const follows = await getFollows();
      if (follows.length > 0) {
        let since: number;
        if (totalNotes === 0 || lastLogin === 0) {
          since = nHoursAgo(48);
        } else {
          since = lastLogin;
        }
        const events = fetcher.allEventsIterator(
          relayUrls,
          { kinds: [1], authors: follows },
          { since: since },
          { skipVerification: true }
        );
        for await (const event of events) {
          await createNote(
            event.id,
            event.pubkey,
            event.kind,
            event.tags,
            event.content,
            event.created_at
          );
        }
      }
      return true;
    } catch (e) {
      console.log('error: ', e);
    }
  }
  async function fetchChats() {
    try {
      const sendMessages = await fetcher.fetchAllEvents(
        relayUrls,
        {
          kinds: [4],
          authors: [account.pubkey],
        },
        { since: lastLogin }
      );
      const receiveMessages = await fetcher.fetchAllEvents(
        relayUrls,
        {
          kinds: [4],
          '#p': [account.pubkey],
        },
        { since: lastLogin }
      );
      const events = [...sendMessages, ...receiveMessages];
      for (const event of events) {
        const receiverPubkey = event.tags.find((t) => t[0] === 'p')[1] || account.pubkey;
        await createChat(
          event.id,
          receiverPubkey,
          event.pubkey,
          event.content,
          event.tags,
          event.created_at
        );
      }
      return true;
    } catch (e) {
      console.log('error: ', e);
    }
  }
  /*
  async function fetchChannelMessages() {
    try {
      const ids = [];
      const channels: any = await getChannels();
      channels.forEach((channel) => {
        ids.push(channel.event_id);
      });
      const since = lastLogin === 0 ? dateToUnix(getHourAgo(48, now.current)) : lastLogin;
      const filter: NDKFilter = {
        '#e': ids,
        kinds: [42],
        since: since,
      };
      const events = await prefetchEvents(ndk, filter);
      events.forEach((event) => {
        const channel_id = event.tags[0][1];
        if (channel_id) {
          createChannelMessage(
            channel_id,
            event.id,
            event.pubkey,
            event.kind,
            event.content,
            event.tags,
            event.created_at
          );
        }
      });
      return true;
    } catch (e) {
      console.log('error: ', e);
    }
  }
  */
  useEffect(() => {
    async function prefetch() {
      const notes = await fetchNotes();
      const chats = await fetchChats();
      if (notes && chats) {
        const now = Math.floor(Date.now() / 1000);
        await updateLastLogin(now);
        navigate('/app/space', { replace: true });
      }
    }
    if (status === 'success' && account) {
      prefetch();
    }
  }, [status]);
  return (
    <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">
      <div className="flex h-screen w-full flex-col">
        <div
          data-tauri-drag-region
          className="relative h-11 shrink-0 border border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
        />
        <div className="relative flex min-h-0 w-full flex-1 items-center justify-center">
          <div className="flex flex-col items-center justify-center gap-4">
            <LoaderIcon className="h-6 w-6 animate-spin text-zinc-100" />
            <div className="text-center">
              <h3 className="text-lg font-semibold leading-tight text-zinc-100">
                Prefetching data...
              </h3>
              <p className="text-zinc-600">
                This may take a few seconds, please don&apos;t close app.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
 }
@@ -1,91 +1,126 @@
-import { useState } from 'react';
+import { nip19 } from 'nostr-tools';
 import { useMemo, useState } from 'react';
 import { useStorage } from '@libs/storage/provider';
 import { EyeOffIcon, EyeOnIcon } from '@shared/icons';
 import { useStronghold } from '@stores/stronghold';
 import { useAccount } from '@utils/hooks/useAccount';
 export function AccountSettingsScreen() {
-  const { status, account } = useAccount();
+  const { db } = useStorage();
-  const [type, setType] = useState('password');
+
  const [privType, setPrivType] = useState('password');
  const [nsecType, setNsecType] = useState('password');
  const privkey = useStronghold((state) => state.privkey);
  const nsec = useMemo(() => nip19.nsecEncode(privkey), [privkey]);
-  const showPrivateKey = () => {
+  const showPrivkey = () => {
-    if (type === 'password') {
+    if (privType === 'password') {
-      setType('text');
+      setPrivType('text');
    } else {
-      setType('password');
+      setPrivType('password');
    }
  };
  const showNsec = () => {
    if (nsecType === 'password') {
      setNsecType('text');
    } else {
      setNsecType('password');
    }
  };
  return (
-    <div className="h-full w-full px-3 pt-12">
+    <div className="h-full w-full px-3 pt-11">
      <div className="flex flex-col gap-2">
-        <h1 className="text-lg font-semibold text-zinc-100">Account</h1>
+        <h1 className="text-xl font-semibold text-white">Account</h1>
-        <div className="">
+        <div className="flex flex-col gap-4 rounded-xl bg-white/10 p-3 backdrop-blur-xl">
-          {status === 'loading' ? (
+          <div className="flex flex-col gap-1">
-            <p>Loading...</p>
+            <label htmlFor="pubkey" className="text-base font-semibold text-white/50">
-          ) : (
+              Public Key
-            <div className="flex flex-col gap-4">
+            </label>
-              <div className="flex flex-col gap-1">
+            <input
-                <label htmlFor="pubkey" className="text-base font-semibold text-zinc-400">
+              readOnly
-                  Public Key
+              value={db.account.pubkey}
-                </label>
+              className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
-                <input
+            />
-                  readOnly
+          </div>
-                  value={account.pubkey}
+          <div className="flex flex-col gap-1">
-                  className="relative w-2/3 rounded-lg bg-zinc-800 py-3 pl-3.5 pr-11 text-zinc-100 !outline-none placeholder:text-zinc-400"
+            <label htmlFor="npub" className="text-base font-semibold text-white/50">
-                />
+              Npub
-              </div>
+            </label>
-              <div className="flex flex-col gap-1">
+            <input
-                <label htmlFor="npub" className="text-base font-semibold text-zinc-400">
+              readOnly
-                  Npub
+              value={db.account.npub}
-                </label>
+              className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
-                <input
+            />
-                  readOnly
+          </div>
-                  value={account.npub}
+          <div className="flex flex-col gap-1">
-                  className="relative w-2/3 rounded-lg bg-zinc-800 py-3 pl-3.5 pr-11 text-zinc-100 !outline-none placeholder:text-zinc-400"
+            <label htmlFor="privkey" className="text-base font-semibold text-white/50">
-                />
+              Private Key
-              </div>
+            </label>
-              <div className="flex flex-col gap-1">
+            <div className="relative w-full">
-                <label
+              <input
-                  htmlFor="privkey"
+                readOnly
-                  className="text-base font-semibold text-zinc-400"
+                type={privType}
-                >
+                value={privkey}
-                  Private Key
+                className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
-                </label>
+              />
-                <div className="relative w-2/3">
+              <button
-                  <input
+                type="button"
-                    readOnly
+                onClick={() => showPrivkey()}
-                    type={type}
+                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
-                    value={privkey}
+              >
-                    className="relative w-full rounded-lg bg-zinc-800 py-3 pl-3.5 pr-11 text-zinc-100 !outline-none placeholder:text-zinc-400"
+                {privType === 'password' ? (
                  <EyeOffIcon
                    width={20}
                    height={20}
                    className="text-white/50 group-hover:text-white"
                  />
-                  <button
+                ) : (
-                    type="button"
+                  <EyeOnIcon
-                    onClick={() => showPrivateKey()}
+                    width={20}
-                    className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
+                    height={20}
-                  >
+                    className="text-white/50 group-hover:text-white"
-                    {type === 'password' ? (
+                  />
-                      <EyeOffIcon
+                )}
-                        width={20}
+              </button>
                        height={20}
                        className="text-zinc-500 group-hover:text-zinc-100"
                      />
                    ) : (
                      <EyeOnIcon
                        width={20}
                        height={20}
                        className="text-zinc-500 group-hover:text-zinc-100"
                      />
                    )}
                  </button>
                </div>
              </div>
            </div>
-          )}
+          </div>
          <div className="flex flex-col gap-1">
            <label htmlFor="privkey" className="text-base font-semibold text-white/50">
              Nsec
            </label>
            <div className="relative w-full">
              <input
                readOnly
                type={nsecType}
                value={nsec}
                className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
              />
              <button
                type="button"
                onClick={() => showNsec()}
                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
              >
                {privType === 'password' ? (
                  <EyeOffIcon
                    width={20}
                    height={20}
                    className="text-white/50 group-hover:text-white"
                  />
                ) : (
                  <EyeOnIcon
                    width={20}
                    height={20}
                    className="text-white/50 group-hover:text-white"
                  />
                )}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
@@ -1,58 +1,10 @@
 import { Switch } from '@headlessui/react';
 import { useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { disable, enable, isEnabled } from 'tauri-plugin-autostart-api';
 import { getSetting, updateSetting } from '@libs/storage';
 export function AutoStartSetting() {
  const [enabled, setEnabled] = useState(false);
  const toggle = async () => {
    if (!enabled) {
      await enable();
      await updateSetting('auto_start', 1);
      console.log(`registered for autostart? ${await isEnabled()}`);
    } else {
      await disable();
      await updateSetting('auto_start', 0);
    }
    setEnabled(!enabled);
  };
  useEffect(() => {
    async function getAppSetting() {
      const setting = await getSetting('auto_start');
      if (parseInt(setting) === 0) {
        setEnabled(false);
      } else {
        setEnabled(true);
      }
    }
    getAppSetting();
  }, []);
  return (
    <div className="inline-flex items-center justify-between px-5 py-4">
      <div className="flex flex-col gap-1">
        <span className="font-medium leading-none text-zinc-200">Auto start</span>
-        <span className="text-sm leading-none text-zinc-400">Auto start at login</span>
+        <span className="text-sm leading-none text-white/50">Auto start at login</span>
      </div>
      <Switch
        checked={enabled}
        onChange={toggle}
        className={twMerge(
          'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2',
          enabled ? 'bg-fuchsia-500' : 'bg-zinc-700'
        )}
      >
        <span
          className={twMerge(
            'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-zinc-900 shadow ring-0 transition duration-200 ease-in-out',
            enabled ? 'translate-x-5' : 'translate-x-0'
          )}
        />
      </Switch>
    </div>
  );
 }
@@ -1,17 +1,12 @@
 import { useState } from 'react';
 import { getSetting, updateSetting } from '@libs/storage';
 import { CheckCircleIcon } from '@shared/icons';
 const setting = await getSetting('cache_time');
 const cacheTime = setting;
 export function CacheTimeSetting() {
-  const [time, setTime] = useState(cacheTime);
+  const [time, setTime] = useState('0');
  const update = async () => {
-    await updateSetting('cache_time', time);
+    // await updateSetting('cache_time', time);
  };
  return (
@@ -20,7 +15,7 @@ export function CacheTimeSetting() {
        <span className="font-medium leading-none text-zinc-200">
          Cache time (milliseconds)
        </span>
-        <span className="text-sm leading-none text-zinc-400">
+        <span className="text-sm leading-none text-white/50">
          The length of time before inactive data gets removed from the cache
        </span>
      </div>
@@ -37,7 +32,7 @@ export function CacheTimeSetting() {
          onClick={() => update()}
          className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-800 font-medium hover:bg-fuchsia-500"
        >
-          <CheckCircleIcon className="h-4 w-4 text-zinc-100" />
+          <CheckCircleIcon className="h-4 w-4 text-white" />
        </button>
      </div>
    </div>
@@ -0,0 +1,28 @@
 import { appConfigDir } from '@tauri-apps/api/path';
 import { useEffect, useState } from 'react';
 export function DataPath() {
  const [path, setPath] = useState<string>('');
  useEffect(() => {
    async function getPath() {
      const dir = await appConfigDir();
      setPath(dir);
    }
    getPath();
  }, []);
  return (
    <div className="inline-flex items-center justify-between px-5 py-4">
      <div className="flex flex-col gap-1">
        <span className="font-medium leading-none text-zinc-200">App data path</span>
        <span className="text-sm leading-none text-white/50">
          Where the local data is stored
        </span>
      </div>
      <div className="inline-flex items-center gap-2">
        <span className="font-medium text-zinc-300">{path}</span>
      </div>
    </div>
  );
 }
@@ -1,26 +1,27 @@
 import { getVersion } from '@tauri-apps/api/app';
-
+import { useEffect, useState } from 'react';
 import { RefreshIcon } from '@shared/icons';
 const appVersion = await getVersion();
 export function VersionSetting() {
  const [version, setVersion] = useState<string>('');
  useEffect(() => {
    async function checkVersion() {
      const appVersion = await getVersion();
      setVersion(appVersion);
    }
    checkVersion();
  }, []);
  return (
    <div className="inline-flex items-center justify-between px-5 py-4">
      <div className="flex flex-col gap-1">
        <span className="font-medium leading-none text-zinc-200">Version</span>
-        <span className="text-sm leading-none text-zinc-400">
+        <span className="text-sm leading-none text-white/50">
          You&apos;re using latest version
        </span>
      </div>
      <div className="inline-flex items-center gap-2">
-        <span className="font-medium text-zinc-300">{appVersion}</span>
+        <span className="font-medium text-zinc-300">{version}</span>
        <button
          type="button"
          className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-800 font-medium hover:bg-fuchsia-500"
        >
          <RefreshIcon className="h-4 w-4 text-zinc-100" />
        </button>
      </div>
    </div>
  );
@@ -1,16 +1,16 @@
 import { AutoStartSetting } from '@app/settings/components/autoStart';
-import { CacheTimeSetting } from '@app/settings/components/cacheTime';
+import { DataPath } from '@app/settings/components/dataPath';
 import { VersionSetting } from '@app/settings/components/version';
 export function GeneralSettingsScreen() {
  return (
-    <div className="h-full w-full px-3 pt-12">
+    <div className="h-full w-full px-3 pt-11">
      <div className="flex flex-col gap-2">
-        <h1 className="text-lg font-semibold text-zinc-100">General</h1>
+        <h1 className="text-xl font-semibold text-white">General</h1>
-        <div className="w-full rounded-xl border-t border-zinc-800/50 bg-zinc-900">
+        <div className="w-full rounded-xl bg-white/10 backdrop-blur-xl">
-          <div className="flex h-full w-full flex-col divide-y divide-zinc-800">
+          <div className="flex h-full w-full flex-col divide-y divide-white/5">
            <AutoStartSetting />
-            <CacheTimeSetting />
+            <DataPath />
            <VersionSetting />
          </div>
        </div>
@@ -4,81 +4,79 @@ export function ShortcutsSettingsScreen() {
  return (
    <div className="h-full w-full px-3 pt-12">
      <div className="flex flex-col gap-2">
-        <h1 className="text-lg font-semibold text-zinc-100">Shortcuts</h1>
+        <h1 className="text-lg font-semibold text-white">Shortcuts</h1>
-        <div className="w-full rounded-xl border-t border-zinc-800/50 bg-zinc-900">
+        <div className="w-full rounded-xl bg-white/10 backdrop-blur-xl">
-          <div className="flex h-full w-full flex-col divide-y divide-zinc-800">
+          <div className="flex h-full w-full flex-col divide-y divide-white/5">
            <div className="inline-flex items-center justify-between px-5 py-4">
              <div className="flex flex-col gap-1">
-                <span className="font-medium leading-none text-zinc-200">
+                <span className="font-medium leading-none text-white">Open composer</span>
                  Open composer
                </span>
              </div>
              <div className="flex items-center gap-2">
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
-                  <CommandIcon width={12} height={12} className="text-zinc-500" />
+                  <CommandIcon width={12} height={12} className="text-white/50" />
                </div>
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
-                  <span className="text-sm leading-none text-zinc-500">N</span>
+                  <span className="text-sm leading-none text-white/50">N</span>
                </div>
              </div>
            </div>
            <div className="inline-flex items-center justify-between px-5 py-4">
              <div className="flex flex-col gap-1">
-                <span className="font-medium leading-none text-zinc-200">
+                <span className="font-medium leading-none text-white">
                  Add image block
                </span>
              </div>
              <div className="flex items-center gap-2">
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
-                  <CommandIcon width={12} height={12} className="text-zinc-500" />
+                  <CommandIcon width={12} height={12} className="text-white/50" />
                </div>
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
-                  <span className="text-sm leading-none text-zinc-500">I</span>
+                  <span className="text-sm leading-none text-white/50">I</span>
                </div>
              </div>
            </div>
            <div className="inline-flex items-center justify-between px-5 py-4">
              <div className="flex flex-col gap-1">
-                <span className="font-medium leading-none text-zinc-200">
+                <span className="font-medium leading-none text-white">
                  Add newsfeed block
                </span>
              </div>
              <div className="flex items-center gap-2">
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
-                  <CommandIcon width={12} height={12} className="text-zinc-500" />
+                  <CommandIcon width={12} height={12} className="text-white/50" />
                </div>
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
-                  <span className="text-sm leading-none text-zinc-500">F</span>
+                  <span className="text-sm leading-none text-white/50">F</span>
                </div>
              </div>
            </div>
            <div className="inline-flex items-center justify-between px-5 py-4">
              <div className="flex flex-col gap-1">
-                <span className="font-medium leading-none text-zinc-200">
+                <span className="font-medium leading-none text-white">
                  Open personal page
                </span>
              </div>
              <div className="flex items-center gap-2">
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
-                  <CommandIcon width={12} height={12} className="text-zinc-500" />
+                  <CommandIcon width={12} height={12} className="text-white/50" />
                </div>
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
-                  <span className="text-sm leading-none text-zinc-500">P</span>
+                  <span className="text-sm leading-none text-white/50">P</span>
                </div>
              </div>
            </div>
            <div className="inline-flex items-center justify-between px-5 py-4">
              <div className="flex flex-col gap-1">
-                <span className="font-medium leading-none text-zinc-200">
+                <span className="font-medium leading-none text-white">
                  Open notification
                </span>
              </div>
              <div className="flex items-center gap-2">
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
-                  <CommandIcon width={12} height={12} className="text-zinc-500" />
+                  <CommandIcon width={12} height={12} className="text-white/50" />
                </div>
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
-                  <span className="text-sm leading-none text-zinc-500">B</span>
+                  <span className="text-sm leading-none text-white/50">B</span>
                </div>
              </div>
            </div>
@@ -1,13 +0,0 @@
 import { AddFeedBlock } from '@app/space/components/addFeed';
 import { AddHashTagBlock } from '@app/space/components/addHashtag';
 import { AddImageBlock } from '@app/space/components/addImage';
 export function AddBlock() {
  return (
    <div className="flex flex-col gap-1">
      <AddImageBlock />
      <AddFeedBlock />
      <AddHashTagBlock />
    </div>
  );
 }
@@ -1,252 +0,0 @@
 import { Dialog, Transition } from '@headlessui/react';
 import { Combobox } from '@headlessui/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { nip19 } from 'nostr-tools';
 import { Fragment, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { User } from '@app/auth/components/user';
 import { createBlock } from '@libs/storage';
 import { CancelIcon, CheckCircleIcon, CommandIcon, LoaderIcon } from '@shared/icons';
 import { BLOCK_KINDS, DEFAULT_AVATAR } from '@stores/constants';
 import { ADD_FEEDBLOCK_SHORTCUT } from '@stores/shortcuts';
 import { useAccount } from '@utils/hooks/useAccount';
 export function AddFeedBlock() {
  const queryClient = useQueryClient();
  const [loading, setLoading] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  const [selected, setSelected] = useState([]);
  const [query, setQuery] = useState('');
  const { status, account } = useAccount();
  const openModal = () => {
    setIsOpen(true);
  };
  const closeModal = () => {
    setIsOpen(false);
  };
  useHotkeys(ADD_FEEDBLOCK_SHORTCUT, () => openModal());
  const block = useMutation({
    mutationFn: (data: { kind: number; title: string; content: string }) => {
      return createBlock(data.kind, data.title, data.content);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['blocks'] });
    },
  });
  const {
    register,
    handleSubmit,
    reset,
    formState: { isDirty, isValid },
  } = useForm();
  const onSubmit = (data: { kind: number; title: string; content: string }) => {
    setLoading(true);
    selected.forEach((item, index) => {
      if (item.substring(0, 4) === 'npub') {
        selected[index] = nip19.decode(item).data;
      }
    });
    // insert to database
    block.mutate({
      kind: BLOCK_KINDS.feed,
      title: data.title,
      content: JSON.stringify(selected),
    });
    setLoading(false);
    // reset form
    reset();
    // close modal
    closeModal();
  };
  return (
    <>
      <button
        type="button"
        onClick={() => openModal()}
        className="inline-flex h-9 w-72 items-center justify-start gap-2.5 rounded-md px-2.5"
      >
        <div className="flex items-center gap-2">
          <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
            <CommandIcon width={12} height={12} className="text-zinc-500" />
          </div>
          <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
            <span className="text-sm leading-none text-zinc-500">F</span>
          </div>
        </div>
        <div>
          <h5 className="font-medium text-zinc-400">New feed block</h5>
        </div>
      </button>
      <Transition appear show={isOpen} as={Fragment}>
        <Dialog as="div" className="relative z-50" onClose={closeModal}>
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
          </Transition.Child>
          <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0 scale-95"
              enterTo="opacity-100 scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
            >
              <Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-xl border-t border-zinc-800/50 bg-zinc-900">
                <div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-5">
                  <div className="flex flex-col gap-1">
                    <div className="flex items-center justify-between">
                      <Dialog.Title
                        as="h3"
                        className="text-lg font-semibold leading-none text-zinc-100"
                      >
                        Create feed block
                      </Dialog.Title>
                      <button
                        type="button"
                        onClick={closeModal}
                        className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
                      >
                        <CancelIcon width={14} height={14} className="text-zinc-300" />
                      </button>
                    </div>
                    <Dialog.Description className="text-sm leading-tight text-zinc-400">
                      Specific newsfeed space for people you want to keep up to date
                    </Dialog.Description>
                  </div>
                </div>
                <div className="flex h-full w-full flex-col overflow-y-auto px-5 pb-5 pt-3">
                  <form
                    onSubmit={handleSubmit(onSubmit)}
                    className="mb-0 flex h-full w-full flex-col gap-4"
                  >
                    <div className="flex flex-col gap-1">
                      <label
                        htmlFor="title"
                        className="text-sm font-medium uppercase tracking-wider text-zinc-400"
                      >
                        Title *
                      </label>
                      <input
                        type={'text'}
                        {...register('title', {
                          required: true,
                        })}
                        spellCheck={false}
                        className="relative h-10 w-full rounded-md bg-zinc-800 px-3 py-2 text-zinc-100 !outline-none placeholder:text-zinc-500"
                      />
                    </div>
                    <div className="flex flex-col gap-1">
                      <span className="text-sm font-medium uppercase tracking-wider text-zinc-400">
                        Choose at least 1 user *
                      </span>
                      <div className="flex h-[300px] w-full flex-col overflow-y-auto overflow-x-hidden rounded-lg border-t border-zinc-700/50 bg-zinc-800">
                        <div className="w-full px-3 py-2">
                          <Combobox value={selected} onChange={setSelected} multiple>
                            <Combobox.Input
                              onChange={(event) => setQuery(event.target.value)}
                              spellCheck={false}
                              placeholder="Enter pubkey or npub..."
                              className="relative mb-2 h-10 w-full rounded-md bg-zinc-700 px-3 py-2 text-zinc-100 !outline-none placeholder:text-zinc-500"
                            />
                            <Combobox.Options static>
                              {query.length > 0 && (
                                <Combobox.Option
                                  value={query}
                                  className="group flex w-full items-center justify-between rounded-md px-2 py-2 hover:bg-zinc-700"
                                >
                                  {({ selected }) => (
                                    <>
                                      <div className="flex items-center gap-2">
                                        <img
                                          alt={query}
                                          src={DEFAULT_AVATAR}
                                          className="h-11 w-11 shrink-0 rounded object-cover"
                                        />
                                        <div className="inline-flex flex-col gap-1">
                                          <span className="text-base leading-tight text-zinc-400">
                                            {query}
                                          </span>
                                        </div>
                                      </div>
                                      {selected && (
                                        <CheckCircleIcon className="h-4 w-4 text-green-500" />
                                      )}
                                    </>
                                  )}
                                </Combobox.Option>
                              )}
                              {status === 'loading' ? (
                                <p>Loading...</p>
                              ) : (
                                JSON.parse(account.follows as string).map((follow) => (
                                  <Combobox.Option
                                    key={follow}
                                    value={follow}
                                    className="group flex w-full items-center justify-between rounded-md px-2 py-2 hover:bg-zinc-700"
                                  >
                                    {({ selected }) => (
                                      <>
                                        <User pubkey={follow} />
                                        {selected && (
                                          <CheckCircleIcon className="h-4 w-4 text-green-500" />
                                        )}
                                      </>
                                    )}
                                  </Combobox.Option>
                                ))
                              )}
                            </Combobox.Options>
                          </Combobox>
                        </div>
                      </div>
                    </div>
                    <div>
                      <button
                        type="submit"
                        disabled={!isDirty || !isValid}
                        className="shadow-button inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-zinc-100 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
                      >
                        {loading ? (
                          <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
                        ) : (
                          'Confirm'
                        )}
                      </button>
                    </div>
                  </form>
                </div>
              </Dialog.Panel>
            </Transition.Child>
          </div>
        </Dialog>
      </Transition>
    </>
  );
 }
@@ -1,174 +0,0 @@
 import { Dialog, Transition } from '@headlessui/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Fragment, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { createBlock } from '@libs/storage';
 import { CancelIcon, CommandIcon, LoaderIcon } from '@shared/icons';
 import { BLOCK_KINDS } from '@stores/constants';
 import { ADD_HASHTAGBLOCK_SHORTCUT } from '@stores/shortcuts';
 export function AddHashTagBlock() {
  const queryClient = useQueryClient();
  const [loading, setLoading] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  const openModal = () => {
    setIsOpen(true);
  };
  const closeModal = () => {
    setIsOpen(false);
  };
  useHotkeys(ADD_HASHTAGBLOCK_SHORTCUT, () => openModal());
  const {
    register,
    handleSubmit,
    reset,
    formState: { isDirty, isValid },
  } = useForm();
  const block = useMutation({
    mutationFn: (data: { kind: number; title: string; content: string }) => {
      return createBlock(data.kind, data.title, data.content);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['blocks'] });
    },
  });
  const onSubmit = async (data: { hashtag: string }) => {
    setLoading(true);
    // mutate
    block.mutate({
      kind: BLOCK_KINDS.hashtag,
      title: data.hashtag,
      content: data.hashtag.replace('#', ''),
    });
    setLoading(false);
    // reset form
    reset();
    // close modal
    closeModal();
  };
  return (
    <>
      <button
        type="button"
        onClick={() => openModal()}
        className="inline-flex h-9 w-72 items-center justify-start gap-2.5 rounded-md px-2.5"
      >
        <div className="flex items-center gap-2">
          <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
            <CommandIcon width={12} height={12} className="text-zinc-500" />
          </div>
          <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
            <span className="text-sm leading-none text-zinc-500">T</span>
          </div>
        </div>
        <div>
          <h5 className="font-medium text-zinc-400">New hashtag block</h5>
        </div>
      </button>
      <Transition appear show={isOpen} as={Fragment}>
        <Dialog as="div" className="relative z-50" onClose={closeModal}>
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
          </Transition.Child>
          <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0 scale-95"
              enterTo="opacity-100 scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
            >
              <Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-xl border-t border-zinc-800/50 bg-zinc-900">
                <div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-5">
                  <div className="flex flex-col gap-1">
                    <div className="flex items-center justify-between">
                      <Dialog.Title
                        as="h3"
                        className="text-lg font-semibold leading-none text-zinc-100"
                      >
                        Create hashtag block
                      </Dialog.Title>
                      <button
                        type="button"
                        onClick={closeModal}
                        className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
                      >
                        <CancelIcon width={14} height={14} className="text-zinc-300" />
                      </button>
                    </div>
                    <Dialog.Description className="text-sm leading-tight text-zinc-400">
                      Pin the hashtag you want to keep follow up
                    </Dialog.Description>
                  </div>
                </div>
                <div className="flex h-full w-full flex-col overflow-y-auto px-5 pb-5 pt-3">
                  <form
                    onSubmit={handleSubmit(onSubmit)}
                    className="mb-0 flex h-full w-full flex-col gap-4"
                  >
                    <div className="flex flex-col gap-1">
                      <label
                        htmlFor="title"
                        className="text-sm font-medium uppercase tracking-wider text-zinc-400"
                      >
                        Hashtag *
                      </label>
                      <div className="after:shadow-highlight relative w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[6px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[6px] after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
                        <input
                          type={'text'}
                          {...register('hashtag', {
                            required: true,
                          })}
                          spellCheck={false}
                          placeholder="#"
                          className="shadow-input relative h-10 w-full rounded-md border border-black/5 px-3 py-2 shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-black/10 dark:placeholder:text-zinc-500"
                        />
                      </div>
                    </div>
                    <div>
                      <button
                        type="submit"
                        disabled={!isDirty || !isValid}
                        className="shadow-button inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-zinc-100 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
                      >
                        {loading ? (
                          <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
                        ) : (
                          'Confirm'
                        )}
                      </button>
                    </div>
                  </form>
                </div>
              </Dialog.Panel>
            </Transition.Child>
          </div>
        </Dialog>
      </Transition>
    </>
  );
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Ren Amamiya	48066a4018	bump version	2023-09-06 16:53:05 +07:00
Ren Amamiya	5c8850ea8f	redesign widget list	2023-09-06 14:30:57 +07:00
Ren Amamiya	09aea3cff5	update widgets	2023-09-06 08:58:02 +07:00
Ren Amamiya	45c5a890b9	update tauri config	2023-09-06 07:46:31 +07:00
Ren Amamiya	69a3e85cb3	small updates and bump version	2023-09-05 17:25:00 +07:00
Ren Amamiya	224439f62b	support drag and drop upload in composer	2023-09-05 13:07:21 +07:00
Ren Amamiya	2389ad5fdc	replace void.cat with nostr.build	2023-09-05 12:46:00 +07:00
Ren Amamiya	4019623d99	small updates	2023-09-05 08:50:13 +07:00
Ren Amamiya	57c17ffbf9	use nostr.com to display unfound event	2023-09-04 18:09:41 +07:00
Ren Amamiya	98d2ccfc86	small fixes	2023-09-04 17:18:28 +07:00
Ren Amamiya	c74a81cfdb	re-add link preview	2023-09-04 14:35:57 +07:00
Ren Amamiya	3ebcf4a981	new parser, faster than before 50%	2023-09-04 14:05:04 +07:00
Ren Amamiya	5d45027776	fix build issue	2023-09-04 07:44:57 +07:00
Ren Amamiya	21ea8309c7	fix ci (final)	2023-09-03 12:02:59 +07:00
Ren Amamiya	431331174a	fix ci again	2023-09-03 11:30:45 +07:00
Ren Amamiya	c26cfc038d	fix ci	2023-09-03 11:08:13 +07:00
Ren Amamiya	39b7b34bb7	new mention popup in composer	2023-09-03 08:43:08 +07:00
Ren Amamiya	a4cf65e7c2	update ui consistent for cross platform	2023-09-03 07:43:38 +07:00
Ren Amamiya	37668393f1	expt: disable note metadata	2023-09-02 17:28:05 +07:00
Ren AmamiyaandGitHub	4309f734b6	Merge pull request #80 from luminous-devs/revert-to-tauri-v1 Revert to Tauri v1.4.0	2023-09-02 12:49:51 +07:00
Ren Amamiya	b4957bae1f	native fetch and shadow	2023-09-02 12:49:04 +07:00
Ren Amamiya	7a3b19bf7b	revert to tauri v1	2023-09-02 12:15:48 +07:00
Ren Amamiya	1931373515	update composer	2023-09-02 08:50:54 +07:00
Ren Amamiya	28939d1733	improve hashtag parser	2023-09-01 18:26:22 +07:00
Ren Amamiya	e6d35bc635	fix mention in composer and improve error handling	2023-09-01 15:57:31 +07:00
Ren Amamiya	cc315a190a	fully support nip05	2023-09-01 08:58:33 +07:00
Ren Amamiya	0d207d471c	fix nip94 widget	2023-08-31 09:04:09 +07:00
Ren Amamiya	f2eb7a90ad	update settings screen	2023-08-31 08:51:23 +07:00
Ren Amamiya	c29ed9669e	bump version	2023-08-30 16:23:38 +07:00
Ren Amamiya	aced6077bd	refactor widget	2023-08-30 16:21:42 +07:00
Ren Amamiya	abe4d11498	clean up & polish	2023-08-30 09:03:02 +07:00
Ren Amamiya	91e50efb1a	yup, lume is very solid now	2023-08-29 16:11:17 +07:00
Ren AmamiyaandGitHub	2914c54a47	Merge pull request #78 from luminous-devs/wip/ui Update for UI consistent	2023-08-29 12:15:19 +07:00
Ren Amamiya	d1701eff20	add focus button to note actionbar	2023-08-29 12:14:45 +07:00
Ren Amamiya	d4eb237e40	expandable composer	2023-08-29 11:13:36 +07:00
Ren Amamiya	f4b2458417	ui consistent	2023-08-29 08:24:18 +07:00
Ren Amamiya	c89e7e48ee	wip: cross platform ui	2023-08-28 16:00:11 +07:00
Ren Amamiya	5a3207f878	tauri config per platform	2023-08-28 12:19:40 +07:00
Ren Amamiya	3d4afb40bc	temporary using custom tauri build	2023-08-28 10:39:18 +07:00
Ren Amamiya	bf91187c1f	update notification screen	2023-08-27 14:46:48 +07:00
Ren Amamiya	963328e064	update notification screen	2023-08-27 10:38:32 +07:00
Ren Amamiya	53227c7050	clean up & update edit profile modal	2023-08-27 08:19:42 +07:00
Ren Amamiya	fe28cd95bd	clean up & small fixes	2023-08-26 14:52:02 +07:00
Ren Amamiya	0f212828a7	update note replies component	2023-08-26 10:54:06 +07:00
Ren Amamiya	bfb7d7915f	update single note screen	2023-08-26 09:45:39 +07:00
Ren Amamiya	92d49c306b	update user screen	2023-08-25 09:50:04 +07:00
Ren Amamiya	b2df8ae320	update widgets	2023-08-24 16:44:55 +07:00
Ren Amamiya	98687bd78b	fix small issues	2023-08-24 15:23:54 +07:00
Ren Amamiya	970115d059	update message form	2023-08-24 11:20:27 +07:00
Ren Amamiya	4893ebd932	re-enable nip-04 with more polish, prepare for nip-44	2023-08-24 09:05:34 +07:00
Ren Amamiya	3455eb701f	rename some files and add nip 94 widget	2023-08-23 15:18:59 +07:00
Ren Amamiya	c97c685149	refactor note component & add support for kind 30023	2023-08-23 09:48:22 +07:00
Ren Amamiya	0912948b31	add notifications screen	2023-08-22 16:34:47 +07:00
Ren Amamiya	4830f0b236	update space screen	2023-08-22 09:10:04 +07:00
Ren AmamiyaandGitHub	917e49b25d	Merge pull request #75 from luminous-devs/wip/optimize [WIP]: Refactor DB and optimize codebase	2023-08-20 15:59:36 +07:00
Ren Amamiya	fe8c2fd2c6	update depedencies	2023-08-20 15:59:07 +07:00
Ren Amamiya	c4a7ef8867	update space screen	2023-08-20 15:55:31 +07:00
Ren Amamiya	bac70b19ec	polish	2023-08-19 15:27:10 +07:00
Ren Amamiya	08e3a66ece	update default avatar	2023-08-19 11:18:27 +07:00
Ren Amamiya	eda18f8c34	fix some errors cause app crash	2023-08-19 08:56:19 +07:00
Ren Amamiya	c85502e427	small fixes	2023-08-18 17:42:25 +07:00
Ren Amamiya	5626579b3f	wip: refactor	2023-08-18 07:37:11 +07:00
Ren Amamiya	414dd50a5c	wip: refactor	2023-08-17 15:11:40 +07:00
Ren Amamiya	ab61bfb2cd	wip: clean up & refactor	2023-08-16 20:52:09 +07:00
Ren Amamiya	c05bb54976	wip: refactor	2023-08-16 11:43:04 +07:00
Ren Amamiya	2d53019c10	wip: refactor	2023-08-15 21:13:58 +07:00
Ren Amamiya	6e28bcdb96	wip: use new storage layer	2023-08-15 08:29:04 +07:00
Ren Amamiya	adca37223c	refactor storage layer	2023-08-14 18:15:58 +07:00
Ren Amamiya	823b203b73	update useNostr hook	2023-08-14 14:12:54 +07:00
Ren Amamiya	6c6f50444e	polish splash screen	2023-08-14 09:34:38 +07:00
Ren Amamiya	c42c78fc98	clean up and refactor open graph	2023-08-14 09:03:58 +07:00
Ren Amamiya	33fd7512e7	update zap modal to match new ui	2023-08-13 15:30:33 +07:00
Ren Amamiya	3b02b3f554	update build config for linux	2023-08-13 14:31:10 +07:00
Ren Amamiya	a02577bb55	fix build errors again	2023-08-13 12:28:10 +07:00
Ren Amamiya	f8753eca90	fix build errors	2023-08-13 12:03:00 +07:00
Ren Amamiya	4a0f2c9a67	fix z-index issue	2023-08-13 09:07:59 +07:00
Ren Amamiya	9e5f15e9d5	small updates	2023-08-12 15:43:50 +07:00
Ren Amamiya	bb089bb259	polish	2023-08-12 11:18:10 +07:00
Ren Amamiya	36b2acba6a	rename blocks to widgets	2023-08-11 15:25:33 +07:00
Ren Amamiya	0cfc3a48d8	update splash screen	2023-08-11 11:55:31 +07:00
Ren Amamiya	f2fc41018d	update settings screen	2023-08-10 17:18:53 +07:00
Ren Amamiya	8024c09642	fixes	2023-08-10 17:03:50 +07:00
Ren Amamiya	e6d8f084ae	clean up & save onboarding process as state	2023-08-10 12:34:11 +07:00
Ren Amamiya	d63690e9d0	small updates and bump version	2023-08-09 19:04:32 +07:00
Ren Amamiya	edf56bc97b	fix bugs	2023-08-09 13:17:07 +07:00
Ren Amamiya	d1d0a462f4	support nip94 and fix some bugs	2023-08-09 09:04:16 +07:00
Ren Amamiya	e6c6793f6e	wip: add relay discover to onboarding	2023-08-08 18:52:46 +07:00
Ren Amamiya	9c7b58ee99	wip: new onboarding process	2023-08-07 15:09:04 +07:00
Ren AmamiyaandGitHub	ed759086c9	Merge pull request #66 from luminous-devs/v1.2.0 prepare for v1.2.0	2023-08-07 09:08:56 +07:00
Ren Amamiya	aa2a9851c3	small fixes	2023-08-07 09:07:53 +07:00
Ren Amamiya	02ff9e3b68	polish	2023-08-06 15:11:58 +07:00
Ren Amamiya	71338b3b07	wip: network	2023-08-06 07:59:43 +07:00
Ren Amamiya	373a0f0608	add network to account	2023-08-04 15:38:38 +07:00
Ren Amamiya	4c7826bbb3	add more actions to note	2023-08-04 11:09:32 +07:00
Ren Amamiya	ac50cd1373	polish	2023-08-04 08:51:26 +07:00
Ren Amamiya	2e47415160	update trending screen and add tauri shell plugin	2023-08-03 16:12:27 +07:00
Ren Amamiya	3432005ade	polish	2023-08-03 15:17:28 +07:00
Ren Amamiya	d10462cd4a	wip: update chats to new ui	2023-08-03 14:09:12 +07:00
Ren Amamiya	ae1e84655a	polish	2023-08-03 08:56:36 +07:00
Ren Amamiya	babcd8698e	wip: port more component to new ui	2023-08-02 14:48:51 +07:00
Ren Amamiya	a85bcf917b	wip: convert more components to new ui	2023-08-02 08:28:43 +07:00
Ren Amamiya	1ddcbf1654	wip: new ui	2023-08-01 15:34:09 +07:00
Ren Amamiya	e97d0281e2	redesign sidebar	2023-08-01 14:26:16 +07:00
Ren Amamiya	9941305998	fix ndk cache	2023-08-01 07:53:58 +07:00
Ren Amamiya	a898e3013f	updated	2023-07-30 21:11:44 +07:00
Ren Amamiya	c80d554630	add ndk cache	2023-07-30 08:13:24 +07:00
Ren Amamiya	996ba3f82d	add tauri controls	2023-07-29 15:42:44 +07:00
Ren Amamiya	aca17f104e	fully support tauri v2	2023-07-29 09:28:15 +07:00
Ren Amamiya	a1a5544789	upgrade to tauri v2	2023-07-29 08:13:53 +07:00
Ren Amamiya	a17efcf4d3	update deps	2023-07-29 07:26:51 +07:00
		`@@ -0,0 +1,2 @@`
							`-- Add migration script here`
							`ALTER TABLE accounts ADD network JSON;`