Merge pull request #67 from luminous-devs/main

v1.2.0
fix z-index issue
2023-08-13 11:19:51 +07:00 · 2023-08-13 09:07:59 +07:00 · 2023-08-12 15:43:50 +07:00 · 2023-08-12 11:18:10 +07:00 · 2023-08-11 15:25:33 +07:00 · 2023-08-11 11:55:31 +07:00
231 changed files with 10976 additions and 6856 deletions
@@ -0,0 +1,3 @@
+/**/node_modules/*
+node_modules/
+dist/
@@ -17,16 +17,10 @@ jobs:
        settings:
          - platform: 'macos-latest'
            args: '--target universal-apple-darwin'
-          - platform: 'macos-latest'
-            args: '--target x86_64-apple-darwin'
-          - platform: 'macos-latest'
-            args: '--target aarch64-apple-darwin'
          - platform: 'ubuntu-20.04'
            args: ''
          - platform: 'windows-latest'
            args: '--target x86_64-pc-windows-msvc'
-          - platform: 'windows-latest'
-            args: '--target i686-pc-windows-msvc'
    runs-on: ${{ matrix.settings.platform }}
    steps:
      - uses: actions/checkout@v3
@@ -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,7 @@
 {
  "name": "lume",
  "private": true,
-  "version": "1.0.1",
+  "version": "1.2.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
@@ -9,75 +9,106 @@
    "add-migrate": "cd src-tauri/ && sqlx migrate add",
    "prepare": "husky install",
    "lint": "eslint ./src --fix",
-    "format": "prettier ./src --write"
+    "format": "prettier ./src --write",
+    "dep-update": "pnpm update && cd src-tauri/ && cargo update"
  },
  "lint-staged": {
    "**/*.{ts, tsx}": "eslint --fix",
    "**/*.{ts, tsx, css, md, html, json}": "prettier --cache --write"
  },
  "dependencies": {
-    "@headlessui/react": "^1.7.15",
-    "@nostr-dev-kit/ndk": "^0.7.5",
+    "@ctrl/magnet-link": "^3.1.2",
+    "@headlessui/react": "^1.7.16",
+    "@nostr-dev-kit/ndk": "^0.8.11",
+    "@nostr-fetch/adapter-ndk": "^0.11.0",
+    "@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-popover": "^1.0.6",
    "@radix-ui/react-tooltip": "^1.0.6",
-    "@tanstack/react-query": "^4.29.19",
-    "@tanstack/react-query-devtools": "^4.29.19",
+    "@tanstack/react-query": "^4.32.6",
+    "@tanstack/react-query-devtools": "^4.32.6",
    "@tanstack/react-virtual": "3.0.0-beta.54",
-    "@tauri-apps/api": "^1.4.0",
+    "@tauri-apps/api": "2.0.0-alpha.5",
+    "@tauri-apps/plugin-app": "github:tauri-apps/tauri-plugin-app#v2",
+    "@tauri-apps/plugin-autostart": "github:tauri-apps/tauri-plugin-autostart#v2",
+    "@tauri-apps/plugin-clipboard-manager": "github:tauri-apps/tauri-plugin-clipboard-manager#v2",
+    "@tauri-apps/plugin-dialog": "github:tauri-apps/tauri-plugin-dialog#v2",
+    "@tauri-apps/plugin-fs": "github:tauri-apps/tauri-plugin-fs#v2",
+    "@tauri-apps/plugin-http": "github:tauri-apps/tauri-plugin-http#v2",
+    "@tauri-apps/plugin-notification": "github:tauri-apps/tauri-plugin-notification#v2",
+    "@tauri-apps/plugin-os": "github:tauri-apps/tauri-plugin-os#v2",
+    "@tauri-apps/plugin-process": "github:tauri-apps/tauri-plugin-process#v2",
+    "@tauri-apps/plugin-shell": "github:tauri-apps/tauri-plugin-shell#v2",
+    "@tauri-apps/plugin-sql": "github:tauri-apps/tauri-plugin-sql#v2",
+    "@tauri-apps/plugin-store": "github:tauri-apps/tauri-plugin-store#v2",
+    "@tauri-apps/plugin-stronghold": "github:tauri-apps/tauri-plugin-stronghold#v2",
+    "@tauri-apps/plugin-upload": "github:tauri-apps/tauri-plugin-upload#v2",
+    "@tauri-apps/plugin-window": "2.0.0-alpha.0",
+    "@tiptap/extension-image": "^2.0.4",
+    "@tiptap/extension-mention": "^2.0.4",
+    "@tiptap/extension-placeholder": "^2.0.4",
+    "@tiptap/pm": "^2.0.4",
+    "@tiptap/react": "^2.0.4",
+    "@tiptap/starter-kit": "^2.0.4",
+    "@tiptap/suggestion": "^2.0.4",
+    "@void-cat/api": "^1.0.7",
    "cheerio": "1.0.0-rc.12",
    "dayjs": "^1.11.9",
    "destr": "^1.2.2",
-    "framer-motion": "^10.12.18",
    "get-urls": "^11.0.0",
+    "html-to-text": "^9.0.5",
    "immer": "^10.0.2",
    "light-bolt11-decoder": "^3.0.0",
-    "nostr-tools": "^1.12.1",
+    "lru-cache": "^10.0.1",
+    "nostr-fetch": "^0.12.2",
+    "nostr-tools": "^1.14.0",
+    "qrcode.react": "^3.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.45.1",
+    "react-hook-form": "^7.45.4",
    "react-hotkeys-hook": "^4.4.1",
+    "react-markdown": "^8.0.7",
    "react-player": "^2.12.0",
-    "react-router-dom": "^6.14.1",
+    "react-router-dom": "^6.15.0",
    "react-string-replace": "^1.1.1",
-    "react-virtuoso": "^4.3.11",
-    "slate": "^0.94.1",
-    "slate-history": "^0.93.0",
-    "slate-react": "^0.94.2",
-    "tailwind-merge": "^1.13.2",
-    "tauri-plugin-autostart-api": "github:tauri-apps/tauri-plugin-autostart#v1",
-    "tauri-plugin-sql-api": "github:tauri-apps/tauri-plugin-sql",
-    "tauri-plugin-stronghold-api": "github:tauri-apps/tauri-plugin-stronghold#v1",
-    "zustand": "^4.3.9"
+    "react-virtuoso": "^4.5.0",
+    "remark-gfm": "^3.0.1",
+    "tippy.js": "^6.3.7",
+    "zustand": "^4.4.1"
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.9",
-    "@tauri-apps/cli": "^1.4.0",
-    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
-    "@types/node": "^18.16.19",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
+    "@tauri-apps/cli": "2.0.0-alpha.10",
+    "@trivago/prettier-plugin-sort-imports": "^4.2.0",
+    "@types/html-to-text": "^9.0.1",
+    "@types/node": "^18.17.5",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
    "@types/youtube-player": "^5.5.7",
-    "@typescript-eslint/eslint-plugin": "^5.61.0",
-    "@typescript-eslint/parser": "^5.61.0",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
    "@vitejs/plugin-react-swc": "^3.3.2",
    "autoprefixer": "^10.4.14",
+    "clsx": "^2.0.0",
    "cross-env": "^7.0.3",
    "csstype": "^3.1.2",
    "encoding": "^0.1.13",
-    "eslint": "^8.44.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "^8.47.0",
+    "eslint-config-prettier": "^8.10.0",
    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.33.1",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "husky": "^8.0.3",
    "lint-staged": "^13.2.3",
-    "postcss": "^8.4.25",
+    "postcss": "^8.4.27",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.3.0",
    "prop-types": "^15.8.1",
-    "tailwindcss": "^3.3.2",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss": "^3.3.3",
    "typescript": "^4.9.5",
-    "vite": "^4.4.2",
+    "vite": "^4.4.9",
    "vite-plugin-top-level-await": "^1.3.1",
    "vite-tsconfig-paths": "^4.2.0"
  }
@@ -1,38 +1,53 @@
 [package]
 name = "lume"
-version = "1.0.1"
+version = "1.2.0"
 description = "nostr client"
 authors = ["Ren Amamiya"]
 license = ""
 repository = ""
 edition = "2021"
-rust-version = "1.57"
+rust-version = "1.71"

 # 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 = "2.0.0-alpha.6", features = [] }

 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.2", features = [ "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"] }
-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" }
-sqlx-cli = {version = "0.7.0", default-features = false, features = ["sqlite"] }
+tauri = { version = "2.0.0-alpha.10", features = [
+  "macos-private-api",
+  "system-tray",
+] }
+tauri-plugin-single-instance = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
+tauri-plugin-autostart = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
+tauri-plugin-stronghold = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
+tauri-plugin-upload = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
+tauri-plugin-updater = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
+tauri-plugin-dialog = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
+tauri-plugin-http = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
+tauri-plugin-fs = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
+tauri-plugin-clipboard-manager = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
+tauri-plugin-notification = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
+tauri-plugin-app = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
+tauri-plugin-process = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
+tauri-plugin-os = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
+tauri-plugin-window = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
+tauri-plugin-store = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
+tauri-plugin-shell = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
+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"

 [dependencies.tauri-plugin-sql]
 git = "https://github.com/tauri-apps/plugins-workspace"
-branch = "v1"
+branch = "v2"
 features = ["sqlite"]

-[target.'cfg(target_os = "macos")'.dependencies]
-objc = "0.2.7"
-cocoa = "0.24.1"
-
 [features]
 # by default Tauri runs in production mode
 # when `tauri dev` runs it is executed with `cargo run --no-default-features` if `devPath` is an URL
@@ -0,0 +1,6 @@
+-- Add migration script here
+DROP TABLE IF EXISTS blacklist;
+
+DROP TABLE IF EXISTS channel_messages;
+
+DROP TABLE IF EXISTS channels;
@@ -0,0 +1,6 @@
+-- Add migration script here
+UPDATE settings
+SET
+  value = '["wss://relayable.org","wss://relay.damus.io","wss://relay.nostr.band/all","wss://nostr.mutinywallet.com"]'
+WHERE
+  key = 'relays';
@@ -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;
@@ -3,19 +3,11 @@
  windows_subsystem = "windows"
 )]

-#[cfg(target_os = "macos")]
-#[macro_use]
-extern crate objc;
-
 // use rand::distributions::{Alphanumeric, DistString};
-use tauri::{Manager, WindowEvent};
+use tauri::Manager;
 use tauri_plugin_autostart::MacosLauncher;
 use tauri_plugin_sql::{Migration, MigrationKind};
-
-#[cfg(target_os = "macos")]
-use window_ext::WindowExt;
-#[cfg(target_os = "macos")]
-mod window_ext;
+use window_vibrancy::{apply_mica, apply_vibrancy, NSVisualEffectMaterial};

 #[derive(Clone, serde::Serialize)]
 struct Payload {
@@ -23,31 +15,18 @@ struct Payload {
  cwd: String,
 }

+#[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 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)
-
-      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(
@@ -107,6 +86,36 @@ fn main() {
              sql: include_str!("../migrations/20230619082415_add_replies.sql"),
              kind: MigrationKind::Up,
            },
+            Migration {
+              version: 20230718072634,
+              description: "clean up",
+              sql: include_str!("../migrations/20230718072634_clean_up_old_tables.sql"),
+              kind: MigrationKind::Up,
+            },
+            Migration {
+              version: 20230725010250,
+              description: "update default relays",
+              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,
+            },
          ],
        )
        .build(),
@@ -144,6 +153,33 @@ fn main() {
        .emit_all("single-instance", Payload { args: argv, cwd })
        .unwrap();
    }))
+    .plugin(tauri_plugin_updater::Builder::new().build())
+    .plugin(tauri_plugin_upload::init())
+    .plugin(tauri_plugin_dialog::init())
+    .plugin(tauri_plugin_http::init())
+    .plugin(tauri_plugin_fs::init())
+    .plugin(tauri_plugin_clipboard_manager::init())
+    .plugin(tauri_plugin_notification::init())
+    .plugin(tauri_plugin_app::init())
+    .plugin(tauri_plugin_process::init())
+    .plugin(tauri_plugin_os::init())
+    .plugin(tauri_plugin_window::init())
+    .plugin(tauri_plugin_store::Builder::default().build())
+    .plugin(tauri_plugin_shell::init())
+    .setup(|app| {
+      let window = app.get_window("main").unwrap();
+
+      #[cfg(target_os = "macos")]
+      apply_vibrancy(&window, NSVisualEffectMaterial::HudWindow, None, None)
+        .expect("Unsupported platform! 'apply_vibrancy' is only supported on macOS");
+
+      #[cfg(target_os = "windows")]
+      apply_mica(&window, None, None)
+        .expect("Unsupported platform! 'apply_blur' is only supported on Windows");
+
+      Ok(())
+    })
+    .invoke_handler(tauri::generate_handler![close_splashscreen])
    .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,145 +1,125 @@
 {
-	"build": {
-		"beforeDevCommand": "pnpm dev",
-		"beforeBuildCommand": "pnpm build",
-		"devPath": "http://localhost:3000",
-		"distDir": "../dist",
-		"withGlobalTauri": true
-	},
-	"package": {
-		"productName": "Lume",
-		"version": "1.0.1"
-	},
-	"tauri": {
-		"allowlist": {
-			"all": false,
-			"app": {
-				"all": false
-			},
-			"os": {
-				"all": true
-			},
-			"http": {
-				"all": true,
-				"request": true,
-				"scope": ["http://**", "https://**"]
-			},
-			"fs": {
-				"all": false,
-				"readFile": true,
-				"readDir": true,
-				"scope": [
-					"$APPDATA/*",
-					"$DATA/*",
-					"$LOCALDATA/*",
-					"$DESKTOP/*",
-					"$DOCUMENT/*",
-					"$DOWNLOAD/*",
-					"$HOME/*",
-					"$PICTURE/*",
-					"$PUBLIC/*",
-					"$VIDEO/*"
-				]
-			},
-			"path": {
-				"all": true
-			},
-			"shell": {
-				"all": false,
-				"open": true
-			},
-			"clipboard": {
-				"all": false,
-				"writeText": true,
-				"readText": true
-			},
-			"dialog": {
-				"all": false,
-				"open": true
-			},
-			"notification": {
-				"all": true
-			},
-			"window": {
-				"startDragging": true,
-				"close": true
-			},
-			"process": {
-				"all": false,
-				"exit": false,
-				"relaunch": true,
-				"relaunchDangerousAllowSymlinkMacos": false
-			}
-		},
-		"bundle": {
-			"active": true,
-			"category": "SocialNetworking",
-			"copyright": "",
-			"appimage": {
-				"bundleMediaFramework": true
-			},
-			"deb": {
-				"depends": []
-			},
-			"externalBin": [],
-			"icon": [
-				"icons/32x32.png",
-				"icons/128x128.png",
-				"icons/128x128@2x.png",
-				"icons/icon.icns",
-				"icons/icon.ico"
-			],
-			"identifier": "com.lume.nu",
-			"longDescription": "",
-			"macOS": {
-				"entitlements": null,
-				"exceptionDomain": "",
-				"frameworks": [],
-				"providerShortName": null,
-				"signingIdentity": null
-			},
-			"resources": [],
-			"shortDescription": "",
-			"targets": "all",
-			"windows": {
-				"certificateThumbprint": null,
-				"digestAlgorithm": "sha256",
-				"timestampUrl": ""
-			}
-		},
-		"security": {
-			"csp": "upgrade-insecure-requests"
-		},
-		"updater": {
-			"active": true,
-			"dialog": true,
-			"endpoints": [
-				"https://lus.reya3772.workers.dev/v1/{{target}}/{{arch}}/{{current_version}}",
-				"https://lus.reya3772.workers.dev/{{target}}/{{current_version}}"
-			],
-			"pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEU4RjAzODFBREQ4MkM3RTEKUldUaHg0TGRHamp3NkI5bnhoOEVjanlHWFNzQ2Q3NDhubFFLUmJpSHJ1L2FqNnB3alF1Y2R3U3gK",
-			"windows": {
-				"installMode": "passive"
-			}
-		},
-		"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
-			}
-		]
-	}
+  "build": {
+    "beforeBuildCommand": "pnpm build",
+    "beforeDevCommand": "pnpm dev",
+    "devPath": "http://localhost:3000",
+    "distDir": "../dist",
+    "withGlobalTauri": true
+  },
+  "package": {
+    "productName": "Lume",
+    "version": "1.2.0"
+  },
+  "plugins": {
+    "fs": {
+      "scope": [
+        "$APPDATA/*",
+        "$DATA/*",
+        "$LOCALDATA/*",
+        "$DESKTOP/*",
+        "$DOCUMENT/*",
+        "$DOWNLOAD/*",
+        "$HOME/*",
+        "$PICTURE/*",
+        "$PUBLIC/*",
+        "$VIDEO/*"
+      ]
+    },
+    "http": {
+      "scope": [
+        "http://**/",
+        "https://**/"
+      ]
+    },
+    "shell": {
+      "open": true
+    },
+    "updater": {
+      "endpoints": [
+        "https://lus.reya3772.workers.dev/v1/{{target}}/{{arch}}/{{current_version}}",
+        "https://lus.reya3772.workers.dev/{{target}}/{{current_version}}"
+      ]
+    }
+  },
+  "tauri": {
+    "bundle": {
+      "active": true,
+      "appimage": {
+        "bundleMediaFramework": true
+      },
+      "category": "SocialNetworking",
+      "copyright": "",
+      "deb": {
+        "depends": []
+      },
+      "externalBin": [],
+      "icon": [
+        "icons/32x32.png",
+        "icons/128x128.png",
+        "icons/128x128@2x.png",
+        "icons/icon.icns",
+        "icons/icon.ico"
+      ],
+      "identifier": "com.lume.nu",
+      "longDescription": "",
+      "macOS": {
+        "entitlements": null,
+        "exceptionDomain": "",
+        "frameworks": [],
+        "providerShortName": null,
+        "signingIdentity": null
+      },
+      "resources": [],
+      "shortDescription": "",
+      "targets": "all",
+      "updater": {
+        "active": true,
+        "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEU4RjAzODFBREQ4MkM3RTEKUldUaHg0TGRHamp3NkI5bnhoOEVjanlHWFNzQ2Q3NDhubFFLUmJpSHJ1L2FqNnB3alF1Y2R3U3gK",
+        "windows": {
+          "installMode": "passive"
+        }
+      },
+      "windows": {
+        "certificateThumbprint": null,
+        "digestAlgorithm": "sha256",
+        "timestampUrl": ""
+      }
+    },
+    "security": {
+      "csp": "upgrade-insecure-requests"
+    },
+    "systemTray": {
+      "iconAsTemplate": true,
+      "iconPath": "icons/icon.png"
+    },
+    "windows": [
+      {
+        "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
+      },
+      {
+        "width": 400,
+        "height": 500,
+        "decorations": true,
+        "hiddenTitle": true,
+        "center": true,
+        "resizable": false,
+        "titleBarStyle": "Overlay",
+        "label": "splashscreen",
+        "url": "splashscreen"
+      }
+    ],
+    "macOSPrivateApi": true
+  }
 }
@@ -1,105 +1,237 @@
-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 { UnlockScreen } from '@app/auth/unlock';
-import { WelcomeScreen } from '@app/auth/welcome';
-import { ChannelScreen } from '@app/channel';
-import { ChatScreen } from '@app/chat';
 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/user';
+
+import { getActiveAccount } from '@libs/storage';

 import { AppLayout } from '@shared/appLayout';
 import { AuthLayout } from '@shared/authLayout';
-import { Protected } from '@shared/protected';
+import { LoaderIcon } from '@shared/icons';
 import { SettingsLayout } from '@shared/settingsLayout';

 import './index.css';

+const appLoader = async () => {
+  const account = await getActiveAccount();
+  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');
+  }
+
+  if (account && account.privkey.length > 35) {
+    return redirect('/auth/migrate');
+  }
+
+  if (account && !privkey) {
+    return redirect('/auth/unlock');
+  }
+
+  return null;
+};
+
 const router = createBrowserRouter([
  {
    path: '/',
-    element: (
-      <Protected>
-        <Root />
-      </Protected>
-    ),
+    element: <AppLayout />,
    errorElement: <ErrorScreen />,
+    loader: appLoader,
+    children: [
+      {
+        path: '',
+        async lazy() {
+          const { SpaceScreen } = await import('@app/space');
+          return { Component: SpaceScreen };
+        },
+      },
+      {
+        path: 'trending',
+        async lazy() {
+          const { TrendingScreen } = await import('@app/trending');
+          return { Component: TrendingScreen };
+        },
+      },
+      {
+        path: 'events/:id',
+        async lazy() {
+          const { EventScreen } = await import('@app/events');
+          return { Component: EventScreen };
+        },
+      },
+      {
+        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: '/splashscreen',
+    errorElement: <ErrorScreen />,
+    async lazy() {
+      const { SplashScreen } = await import('@app/splash');
+      return { Component: SplashScreen };
+    },
  },
  {
    path: '/auth',
    element: <AuthLayout />,
    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 />,
        children: [
-          { path: '', element: <ImportStep1Screen /> },
-          { path: 'step-2', element: <ImportStep2Screen /> },
-          { path: 'step-3', element: <ImportStep3Screen /> },
+          {
+            path: '',
+            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 />,
        children: [
-          { path: '', element: <CreateStep1Screen /> },
-          { path: 'step-2', element: <CreateStep2Screen /> },
-          { path: 'step-3', element: <CreateStep3Screen /> },
-          { path: 'step-4', element: <CreateStep4Screen /> },
-          { path: 'step-5', element: <CreateStep5Screen /> },
+          {
+            path: '',
+            async lazy() {
+              const { CreateStep1Screen } = await import('@app/auth/create/step-1');
+              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: '/app',
-    element: (
-      <Protected>
-        <AppLayout />
-      </Protected>
-    ),
-    children: [
-      { path: 'space', element: <SpaceScreen /> },
-      { path: 'trending', element: <TrendingScreen /> },
-      { path: 'note/:id', element: <NoteScreen /> },
-      { path: 'user/:pubkey', element: <UserScreen /> },
-      { path: 'chat/:pubkey', element: <ChatScreen /> },
-      { path: 'channel/:id', element: <ChannelScreen /> },
+      {
+        path: 'onboarding',
+        element: <OnboardingScreen />,
+        children: [
+          {
+            path: '',
+            async lazy() {
+              const { OnboardStep1Screen } = await import('@app/auth/onboarding/step-1');
+              return { Component: OnboardStep1Screen };
+            },
+          },
+          {
+            path: 'step-2',
+            async lazy() {
+              const { OnboardStep2Screen } = await import('@app/auth/onboarding/step-2');
+              return { Component: OnboardStep2Screen };
+            },
+          },
+          {
+            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: '/settings',
-    element: (
-      <Protected>
-        <SettingsLayout />
-      </Protected>
-    ),
+    element: <SettingsLayout />,
    children: [
-      { path: 'general', element: <GeneralSettingsScreen /> },
-      { path: 'shortcuts', element: <ShortcutsSettingsScreen /> },
-      { path: 'account', element: <AccountSettingsScreen /> },
+      {
+        path: 'general',
+        async lazy() {
+          const { GeneralSettingsScreen } = await import('@app/settings/general');
+          return { Component: GeneralSettingsScreen };
+        },
+      },
+      {
+        path: 'shortcuts',
+        async lazy() {
+          const { ShortcutsSettingsScreen } = await import('@app/settings/shortcuts');
+          return { Component: ShortcutsSettingsScreen };
+        },
+      },
+      {
+        path: 'account',
+        async lazy() {
+          const { AccountSettingsScreen } = await import('@app/settings/account');
+          return { Component: AccountSettingsScreen };
+        },
+      },
    ],
  },
 ]);
@@ -108,7 +240,11 @@ export default function App() {
  return (
    <RouterProvider
      router={router}
-      fallbackElement={<p>Loading..</p>}
+      fallbackElement={
+        <div className="flex h-full w-full items-center justify-center bg-black/90">
+          <LoaderIcon className="h-6 w-6 animate-spin text-white" />
+        </div>
+      }
      future={{ v7_startTransition: true }}
    />
  );
@@ -3,7 +3,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,10 +11,10 @@ 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" />
        <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-3 w-1/3 animate-pulse rounded bg-zinc-800" />
+          <span className="h-4 w-1/2 animate-pulse rounded bg-white/10" />
+          <span className="h-3 w-1/3 animate-pulse rounded bg-white/10" />
        </div>
      </div>
    );
@@ -24,18 +24,18 @@ export function User({ pubkey, fallback }: { pubkey: string; fallback?: string }
    <div className="flex items-center gap-2">
      <div className="relative h-10 w-10 shrink rounded-md">
        <Image
-          src={user.picture || user.image}
+          src={user?.picture || user?.image}
          fallback={DEFAULT_AVATAR}
          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">
-          {user.name || user.displayName || user.display_name}
+        <span className="truncate font-medium leading-tight text-white">
+          {user?.name || user?.display_name || user?.nip05}
        </span>
-        <span className="text-base leading-tight text-zinc-400">
-          {user.nip05?.toLowerCase() || shortenKey(pubkey)}
+        <span className="max-w-[15rem] truncate text-base leading-tight text-white/50">
+          {user?.nip05?.toLowerCase() || displayNpub(pubkey, 16)}
        </span>
      </div>
    </div>
@@ -0,0 +1,39 @@
+import { Image } from '@shared/image';
+
+import { DEFAULT_AVATAR } from '@stores/constants';
+
+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" />
+        <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" />
+          <span className="h-3 w-1/3 animate-pulse rounded bg-white/10" />
+        </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}
+          fallback={DEFAULT_AVATAR}
+          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 || user?.nip05 || 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,25 +1,29 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { BaseDirectory, writeTextFile } from '@tauri-apps/plugin-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 { 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 navigate = useNavigate();
  const queryClient = useQueryClient();
+  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 [setPubkey, setPrivkey] = useOnboarding((state) => [
-    state.setPubkey,
-    state.setPrivkey,
-  ]);
  const [privkeyInput, setPrivkeyInput] = useState('password');
  const [loading, setLoading] = useState(false);
+  const [downloaded, setDownloaded] = useState(false);

  const privkey = useMemo(() => generatePrivateKey(), []);
  const pubkey = getPublicKey(privkey);
@@ -35,6 +39,13 @@ export function CreateStep1Screen() {
    }
  };

+  const download = async () => {
+    await writeTextFile('lume-keys.txt', `Public key: ${npub}\nPrivate key: ${nsec}`, {
+      dir: BaseDirectory.Download,
+    });
+    setDownloaded(true);
+  };
+
  const account = useMutation({
    mutationFn: (data: {
      npub: string;
@@ -52,8 +63,9 @@ export function CreateStep1Screen() {
  const submit = () => {
    setLoading(true);

-    setPubkey(pubkey);
    setPrivkey(privkey);
+    setTempPrivkey(privkey); // only use if user close app and reopen it
+    setPubkey(pubkey);

    account.mutate({
      npub,
@@ -66,59 +78,84 @@ export function CreateStep1Screen() {
    setTimeout(() => navigate('/auth/create/step-2', { replace: true }), 1200);
  };

+  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">
-          Lume is auto-generated key for you
-        </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 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 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 hover:bg-white/10"
            >
              {privkeyInput === 'password' ? (
-                <EyeOffIcon
-                  width={20}
-                  height={20}
-                  className="text-zinc-500 group-hover:text-zinc-100"
-                />
+                <EyeOffIcon className="h-4 w-4 text-white/50 group-hover:text-white" />
              ) : (
-                <EyeOnIcon
-                  width={20}
-                  height={20}
-                  className="text-zinc-500 group-hover:text-zinc-100"
-                />
+                <EyeOnIcon className="h-4 w-4 text-white/50 group-hover:text-white" />
              )}
            </button>
          </div>
+          <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
+              to reset your private key.
+            </p>
+          </div>
        </div>
-        <Button preset="large" onClick={() => submit()}>
-          {loading ? (
-            <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
+        <div className="flex flex-col gap-2">
+          <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 ? (
+              <>
+                <span className="w-5" />
+                <span>Creating...</span>
+                <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+              </>
+            ) : (
+              <>
+                <span className="w-5" />
+                <span>I have saved my key, continue</span>
+                <ArrowRightCircleIcon className="h-5 w-5" />
+              </>
+            )}
+          </button>
+          {downloaded ? (
+            <span className="inline-flex h-11 w-full items-center justify-center text-sm text-white/50">
+              Saved in Download folder
+            </span>
          ) : (
-            'Continue →'
+            <Button preset="large-alt" onClick={() => download()}>
+              Download
+            </Button>
          )}
-        </Button>
+        </div>
      </div>
    </div>
  );
@@ -1,8 +1,9 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Resolver, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';

 import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
+import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';

 import { useOnboarding } from '@stores/onboarding';
 import { useStronghold } from '@stores/stronghold';
@@ -29,9 +30,10 @@ const resolver: Resolver<FormValues> = async (values) => {

 export function CreateStep2Screen() {
  const navigate = useNavigate();
-  const setPassword = useStronghold((state) => state.setPassword);
+  const setStep = useOnboarding((state) => state.setStep);
+  const pubkey = useOnboarding((state) => state.pubkey);
+  const privkey = useStronghold((state) => state.privkey);

-  const [pubkey, privkey] = useOnboarding((state) => [state.pubkey, state.privkey]);
  const [passwordInput, setPasswordInput] = useState('password');
  const [loading, setLoading] = useState(false);

@@ -56,9 +58,6 @@ export function CreateStep2Screen() {
  const onSubmit = async (data: { [x: string]: string }) => {
    setLoading(true);
    if (data.password.length > 3) {
-      // add password to local state
-      setPassword(data.password);
-
      // save privkey to secure storage
      await save(pubkey, privkey, data.password);

@@ -73,10 +72,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>
@@ -87,29 +91,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 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"
-                  />
+                  <EyeOffIcon className="h-4 w-4 text-white/50 group-hover:text-white" />
                ) : (
-                  <EyeOnIcon
-                    width={20}
-                    height={20}
-                    className="text-zinc-500 group-hover:text-zinc-100"
-                  />
+                  <EyeOnIcon className="h-4 w-4 text-white/50 group-hover:text-white" />
                )}
              </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
@@ -124,12 +120,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,67 +1,79 @@
-import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+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 queryClient = useQueryClient();

+  const [loading, setLoading] = useState(false);
  const [picture, setPicture] = useState(DEFAULT_AVATAR);
  const [banner, setBanner] = useState('');
-  const [loading, setLoading] = useState(false);

+  const { publish } = useNostr();
  const {
    register,
    handleSubmit,
    formState: { isDirty, isValid },
  } = useForm();

-  const onSubmit = (data: any) => {
+  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
-      setTimeout(() => navigate('/auth/create/step-4', { replace: true }), 1200);
-    } catch {
-      console.log('error');
+
+      const event = await publish({
+        content: JSON.stringify(profile),
+        kind: 0,
+        tags: [],
+      });
+
+      queryClient.invalidateQueries(['currentAccount']);
+
+      if (event) {
+        setTimeout(() => navigate('/auth/onboarding', { replace: true }), 1000);
+      }
+    } 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">
        <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col">
-          <input
-            type={'hidden'}
-            {...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"
-          />
+          <input type={'hidden'} {...register('picture')} value={picture} />
+          <input type={'hidden'} {...register('banner')} value={banner} />
          <div className="relative">
-            <div className="relative h-44 w-full bg-zinc-800">
+            <div className="relative h-44 w-full bg-white/10">
              <Image
                src={banner}
                fallback="https://void.cat/d/QY1myro5tkHVs2nY7dy74b.jpg"
@@ -78,7 +90,7 @@ export function CreateStep3Screen() {
                  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} />
@@ -90,7 +102,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>
@@ -101,26 +113,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 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 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>
@@ -130,18 +142,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 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 publish = usePublish();
-  const profile = useOnboarding((state) => state.profile);
-
-  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 publish = usePublish();
-
-  const [loading, setLoading] = useState(false);
-  const [follows, setFollows] = useState([]);
-
-  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: any) => {
-      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) : [];
-
-  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>
-  );
-}
@@ -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,14 +1,16 @@
 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 { LoaderIcon } from '@shared/icons';
+import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';

 import { useOnboarding } from '@stores/onboarding';
+import { useStronghold } from '@stores/stronghold';

 type FormValues = {
  privkey: string;
@@ -31,11 +33,11 @@ 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 [setPubkey, setPrivkey] = useOnboarding((state) => [
-    state.setPubkey,
-    state.setPrivkey,
-  ]);
  const [loading, setLoading] = useState(false);

  const account = useMutation({
@@ -72,9 +74,9 @@ export function ImportStep1Screen() {
        const pubkey = getPublicKey(privkey);
        const npub = nip19.npubEncode(pubkey);

-        // use for onboarding process only
-        setPubkey(pubkey);
        setPrivkey(privkey);
+        setTempPubkey(privkey); // only use if user close app and reopen it
+        setPubkey(pubkey);

        // add account to local database
        account.mutate({
@@ -90,25 +92,30 @@ export function ImportStep1Screen() {
    } 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 placeholder:text-white/50"
            />
            <span className="text-sm text-red-400">
              {errors.privkey && <p>{errors.privkey.message}</p>}
@@ -118,12 +125,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,8 +1,9 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Resolver, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';

 import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
+import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';

 import { useOnboarding } from '@stores/onboarding';
 import { useStronghold } from '@stores/stronghold';
@@ -29,11 +30,12 @@ const resolver: Resolver<FormValues> = async (values) => {

 export function ImportStep2Screen() {
  const navigate = useNavigate();
-  const setPassword = useStronghold((state) => state.setPassword);
+  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 [pubkey, privkey] = useOnboarding((state) => [state.pubkey, state.privkey]);

  const { save } = useSecureStorage();

@@ -56,9 +58,6 @@ export function ImportStep2Screen() {
  const onSubmit = async (data: { [x: string]: string }) => {
    setLoading(true);
    if (data.password.length > 3) {
-      // add password to local state
-      setPassword(data.password);
-
      // save privkey to secure storage
      await save(pubkey, privkey, data.password);

@@ -73,10 +72,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>
@@ -87,35 +91,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 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"
-                  />
+                  <EyeOffIcon className="h-4 w-4 text-white/50 group-hover:text-white" />
                ) : (
-                  <EyeOnIcon
-                    width={20}
-                    height={20}
-                    className="text-zinc-500 group-hover:text-zinc-100"
-                  />
+                  <EyeOnIcon className="h-4 w-4 text-white/50 group-hover:text-white" />
                )}
              </button>
            </div>
-            <div className="text-sm text-zinc-500">
-              <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
-                hexstring
-              </p>
-            </div>
+            <p className="text-sm text-white/50">
+              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
+              nsec or hexstring
+            </p>
            <span className="text-sm text-red-400">
              {errors.password && <p>{errors.password.message}</p>}
            </span>
@@ -124,12 +118,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,85 +1,92 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';

 import { User } from '@app/auth/components/user';

-import { useNDK } from '@libs/ndk/provider';
-import { updateAccount } from '@libs/storage';
+import { updateLastLogin } from '@libs/storage';

-import { Button } from '@shared/button';
-import { LoaderIcon } from '@shared/icons';
+import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
+
+import { useOnboarding } from '@stores/onboarding';

 import { useAccount } from '@utils/hooks/useAccount';
-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 { status, account } = useAccount();
-
-  const update = useMutation({
-    mutationFn: (follows: string[]) => {
-      return updateAccount('follows', follows, account.pubkey);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['currentAccount'] });
-    },
-  });
+  const { fetchNotes, fetchChats } = useNostr();

  const submit = async () => {
    try {
      // show loading indicator
      setLoading(true);

-      const user = ndk.getUser({ hexpubkey: account.pubkey });
-      const follows = await user.follows();
+      const now = Math.floor(Date.now() / 1000);
+      await fetchNotes();
+      await fetchChats();
+      await updateLastLogin(now);

-      // follows as list
-      const followsList = setToArray(follows);
+      queryClient.invalidateQueries(['currentAccount']);

-      // update
-      update.mutate([...followsList, account.pubkey]);
-
-      // redirect to next step
-      setTimeout(() => navigate('/auth/onboarding', { replace: true }), 1200);
-    } catch {
-      console.log('error');
+      navigate('/auth/onboarding/step-2', { replace: true });
+    } 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">
        {status === 'loading' ? (
          <div className="w-full">
            <div className="flex items-center gap-2">
-              <div className="h-11 w-11 animate-pulse rounded-lg bg-zinc-800" />
+              <div className="h-11 w-11 animate-pulse rounded-lg bg-white/10" />
              <div>
-                <div className="mb-1 h-4 w-16 animate-pulse rounded bg-zinc-800" />
-                <div className="h-3 w-36 animate-pulse rounded bg-zinc-800" />
+                <div className="mb-1 h-4 w-16 animate-pulse rounded bg-white/10" />
+                <div className="h-3 w-36 animate-pulse rounded bg-white/10" />
              </div>
            </div>
          </div>
        ) : (
          <div className="flex flex-col gap-3">
            <User pubkey={account.pubkey} />
-            <Button preset="large" onClick={() => submit()}>
+            <button
+              type="button"
+              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"
+              onClick={() => submit()}
+            >
              {loading ? (
-                <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
+                <>
+                  <span className="w-5" />
+                  <span>It might take a bit, please patient...</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>
+            </button>
          </div>
        )}
      </div>
@@ -1,10 +1,11 @@
+import { useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 import { Resolver, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';

 import { removePrivkey } from '@libs/storage';

-import { CheckCircleIcon, EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
+import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';

 import { useStronghold } from '@stores/stronghold';

@@ -30,17 +31,16 @@ const resolver: Resolver<FormValues> = async (values) => {
 };

 export function MigrateScreen() {
+  const queryClient = useQueryClient();
  const navigate = useNavigate();
+  const setPrivkey = useStronghold((state) => state.setPrivkey);

  const [passwordInput, setPasswordInput] = useState('password');
-  const [passwordStep, setPasswordStep] = useState({ loading: false, done: false });
-  const [privkeyStep, setPrivkeyStep] = useState({ loading: false, done: false });
+  const [loading, setLoading] = useState(false);

  const { account } = useAccount();
  const { save } = useSecureStorage();

-  const setPassword = useStronghold((state) => state.setPassword);
-
  // toggle private key
  const showPassword = () => {
    if (passwordInput === 'password') {
@@ -50,16 +50,6 @@ export function MigrateScreen() {
    }
  };

-  const clearPrivkey = async () => {
-    setPrivkeyStep((prev) => ({ ...prev, loading: true }));
-    const res = await removePrivkey();
-    if (res) {
-      setPrivkeyStep({ done: true, loading: false });
-    } else {
-      setPrivkeyStep((prev) => ({ ...prev, loading: false }));
-    }
-  };
-
  const {
    register,
    setError,
@@ -68,25 +58,29 @@ export function MigrateScreen() {
  } = useForm<FormValues>({ resolver });

  const onSubmit = async (data: { [x: string]: string }) => {
-    setPasswordStep((prev) => ({ ...prev, loading: true }));
+    setLoading(true);
    if (data.password.length > 3) {
-      // add password to local state
-      setPassword(data.password);
-
      // load private in secure storage
      try {
+        // save privkey to secure storage
        await save(account.pubkey, account.privkey, data.password);
+        // add privkey to state
+        setPrivkey(account.privkey);
+        // remove privkey in db
+        await removePrivkey();
+        // clear cache
+        await queryClient.invalidateQueries(['currentAccount']);
        // redirect to home
        navigate('/', { replace: true });
      } catch {
-        setPasswordStep((prev) => ({ ...prev, loading: false }));
+        setLoading(false);
        setError('password', {
          type: 'custom',
          message: 'Wrong password',
        });
      }
    } else {
-      setPasswordStep((prev) => ({ ...prev, loading: false }));
+      setLoading(false);
      setError('password', {
        type: 'custom',
        message: 'Password is required and must be greater than 3',
@@ -98,67 +92,39 @@ 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="flex flex-col gap-4">
            <div>
-              <h3 className="font-medium text-zinc-200">
-                Remove plaintext privkey store in local database
-              </h3>
              <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">To secure your private key</p>
-                <ul className="mt-2 list-outside list-disc pl-5 text-sm text-zinc-400">
-                  <li>Firstly, click button below to remove it from local database</li>
-                  <li>
-                    Then set password and Lume will put your private key in secure storage
-                  </li>
-                </ul>
-              </div>
-              <div className="mt-3">
-                <div className="relative">
-                  <input
-                    readOnly
-                    value={privkeyStep.done ? 'Nothing to see here' : account.privkey}
-                    className="relative w-full rounded-lg bg-zinc-800 px-3 py-3 text-zinc-100 !outline-none placeholder:text-zinc-500"
-                  />
-                  <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center rounded-lg bg-black/10 backdrop-blur-sm">
-                    {privkeyStep.done ? (
-                      privkeyStep.loading ? (
-                        <LoaderIcon className="h-4 w-4 animate-spin text-zinc-100" />
-                      ) : (
-                        <CheckCircleIcon className="h-5 w-5 text-green-500" />
-                      )
-                    ) : (
-                      <button
-                        type="button"
-                        onClick={() => clearPrivkey()}
-                        className="inline-flex w-max items-center justify-center rounded bg-fuchsia-500 px-2.5 py-1.5 text-sm hover:bg-fuchsia-600"
-                      >
-                        Click to remove
-                      </button>
-                    )}
-                  </div>
-                </div>
+                <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-white/50">
+                  It is not possible to start the app without applying this step, it is
+                  easy and fast!
+                </p>
              </div>
            </div>
            <form onSubmit={handleSubmit(onSubmit)} className="mb-0">
              <div className="flex flex-col gap-1">
                <span className="font-medium text-zinc-200">
-                  Set password to protect your key
+                  Set a password to protect your key
                </span>
                <div className="relative">
                  <input
                    {...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-zinc-800 py-3 pl-3.5 pr-11 text-white !outline-none placeholder:text-white/50"
                  />
                  <button
                    type="button"
@@ -169,13 +135,13 @@ export function MigrateScreen() {
                      <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>
@@ -185,19 +151,17 @@ export function MigrateScreen() {
                </span>
              </div>
              <div className="flex items-center justify-center">
-                {privkeyStep.done && (
-                  <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"
-                  >
-                    {passwordStep.loading ? (
-                      <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
-                    ) : (
-                      'Continue →'
-                    )}
-                  </button>
-                )}
+                <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-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-white" />
+                  ) : (
+                    'Continue →'
+                  )}
+                </button>
              </div>
            </form>
          </div>
@@ -1,102 +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 publish = usePublish();
-  const navigate = useNavigate();
-
-  const { status, account } = useAccount();
-  const [loading, setLoading] = useState(false);
-
-  const submit = async () => {
-    try {
-      setLoading(true);
-
-      // publish event
-      publish({
-        content:
-          'Running Lume, fighting for better future, join us here: 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-8 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 better future that we&apos;re fighting
-          </p>
-          <p className="text-sm text-zinc-300">
-            If Lume gets your attention, please help us spread via button below
-          </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, fighting for better future</p>
-              <p>
-                join us here:{' '}
-                <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>
-              </p>
-            </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>Publish</span>
-                <ArrowRightCircleIcon className="h-5 w-5" />
-              </>
-            )}
-          </button>
-          <Link
-            to="/"
-            className="inline-flex h-10 w-full items-center justify-center gap-2 rounded-lg px-6 text-sm font-medium text-zinc-200"
-          >
-            Skip for now
-          </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,136 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+
+import { User } from '@app/auth/components/user';
+
+import { updateAccount } from '@libs/storage';
+
+import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
+
+import { useOnboarding } from '@stores/onboarding';
+
+import { useAccount } from '@utils/hooks/useAccount';
+import { useNostr } from '@utils/hooks/useNostr';
+import { arrayToNIP02 } from '@utils/transform';
+
+export function OnboardStep1Screen() {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const setStep = useOnboarding((state) => state.setStep);
+
+  const { publish, fetchNotes } = useNostr();
+  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();
+  });
+
+  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, account.pubkey]);
+      const event = await publish({ content: '', kind: 3, tags: tags });
+      await updateAccount('follows', follows);
+
+      // prefetch notes with current follows
+      const notes = await fetchNotes(follows);
+
+      // redirect to next step
+      if (event && notes) {
+        setTimeout(() => {
+          queryClient.invalidateQueries(['currentAccount']);
+          navigate('/auth/onboarding/step-2', { replace: true });
+        }, 1000);
+      }
+    } catch {
+      console.log('error');
+    }
+  };
+
+  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">
+          {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 bg-white/10 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 hover:bg-white/10 focus:outline-none"
+          >
+            Skip, you can add later
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,124 @@
+import { useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+
+import { createWidget } from '@libs/storage';
+
+import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
+
+import { BLOCK_KINDS } from '@stores/constants';
+import { useOnboarding } from '@stores/onboarding';
+
+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 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 createWidget(BLOCK_KINDS.hashtag, tag, tag.replace('#', ''));
+      }
+
+      setTimeout(() => navigate('/auth/onboarding/step-3', { replace: true }), 1000);
+    } 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">
+          {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 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 hover:bg-white/10 focus:outline-none"
+          >
+            Skip, you can add later
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,183 @@
+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 { createRelay } from '@libs/storage';
+
+import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
+
+import { FULL_RELAYS } from '@stores/constants';
+import { useOnboarding } from '@stores/onboarding';
+
+import { useAccount } from '@utils/hooks/useAccount';
+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 { account } = useAccount();
+  const { ndk } = useNDK();
+  const { status, data } = useQuery(
+    ['relays'],
+    async () => {
+      const tmp = new Map<string, string>();
+      const events = await ndk.fetchEvents({ kinds: [10002], authors: account.follows });
+
+      if (events) {
+        events.forEach((event) => {
+          event.tags.forEach((tag) => {
+            tmp.set(tag[1], event.pubkey);
+          });
+        });
+      }
+
+      return tmp;
+    },
+    {
+      enabled: account ? true : 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 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 createRelay(relay);
+        }
+      }
+
+      setTimeout(() => {
+        clearStep();
+        navigate('/', { replace: true });
+      }, 1000);
+    } 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">
+          {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">
+              <p className="text-center text-white/50">
+                Can&apos;t found any relays, 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 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 hover:bg-white/10 focus:outline-none"
+          >
+            Skip, use default relays
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,166 @@
+import { getPublicKey, nip19 } from 'nostr-tools';
+import { useState } from 'react';
+import { Resolver, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+
+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;
+};
+
+const resolver: Resolver<FormValues> = async (values) => {
+  return {
+    values: values.password ? values : {},
+    errors: !values.password
+      ? {
+          password: {
+            type: 'required',
+            message: 'This is required.',
+          },
+        }
+      : {},
+  };
+};
+
+export function ResetScreen() {
+  const navigate = useNavigate();
+  const setPrivkey = useStronghold((state) => state.setPrivkey);
+
+  const [passwordInput, setPasswordInput] = useState('password');
+  const [loading, setLoading] = useState(false);
+
+  const { account } = useAccount();
+  const { save, reset } = useSecureStorage();
+
+  // toggle private key
+  const showPassword = () => {
+    if (passwordInput === 'password') {
+      setPasswordInput('text');
+    } else {
+      setPasswordInput('password');
+    }
+  };
+
+  const {
+    register,
+    setError,
+    handleSubmit,
+    formState: { errors, isDirty, isValid },
+  } = useForm<FormValues>({ resolver });
+
+  const onSubmit = async (data: { [x: string]: string }) => {
+    setLoading(true);
+    if (data.password.length > 3) {
+      try {
+        let privkey = data.privkey;
+        if (privkey.startsWith('nsec')) {
+          privkey = nip19.decode(privkey).data as string;
+        }
+
+        const tmpPubkey = getPublicKey(privkey);
+
+        if (tmpPubkey !== account.pubkey) {
+          setLoading(false);
+          setError('password', {
+            type: 'custom',
+            message:
+              "Private key don't match current account store in database, please check again",
+          });
+        } else {
+          // remove old stronghold
+          await reset();
+          // save privkey to secure storage
+          await save(account.pubkey, account.privkey, data.password);
+          // add privkey to state
+          setPrivkey(account.privkey);
+          // redirect to home
+          navigate('/auth/unlock', { replace: true });
+        }
+      } catch {
+        setLoading(false);
+        setError('password', {
+          type: 'custom',
+          message: 'Invalid private key',
+        });
+      }
+    } else {
+      setLoading(false);
+      setError('password', {
+        type: 'custom',
+        message: 'Password is required and must be greater than 3',
+      });
+    }
+  };
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="mx-auto w-full max-w-md">
+        <div className="mb-6 text-center">
+          <h1 className="text-2xl font-semibold text-white">Reset unlock password</h1>
+        </div>
+        <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col gap-3">
+          <div className="flex flex-col gap-1">
+            <label htmlFor="privkey" className="font-medium text-white/50">
+              Private key
+            </label>
+            <div className="relative">
+              <input
+                {...register('privkey', { required: true })}
+                type="text"
+                placeholder="nsec..."
+                className="relative h-12 w-full rounded-lg bg-white/10 px-3.5 py-1 text-white !outline-none placeholder:text-white/10"
+              />
+            </div>
+          </div>
+          <div className="flex flex-col gap-1">
+            <label htmlFor="password" className="font-medium text-white/50">
+              Set a new password to protect your key
+            </label>
+            <div className="relative">
+              <input
+                {...register('password', { required: true })}
+                type={passwordInput}
+                placeholder="min. 4 characters"
+                className="relative h-12 w-full rounded-lg bg-white/10 px-3.5 py-1 text-white !outline-none placeholder:text-white/10"
+              />
+              <button
+                type="button"
+                onClick={() => showPassword()}
+                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-white/10"
+              >
+                {passwordInput === 'password' ? (
+                  <EyeOffIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
+                ) : (
+                  <EyeOnIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
+                )}
+              </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"
+              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>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
@@ -1,6 +1,6 @@
 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 { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';

@@ -29,13 +29,10 @@ const resolver: Resolver<FormValues> = async (values) => {

 export function UnlockScreen() {
  const navigate = useNavigate();
+  const setPrivkey = useStronghold((state) => state.setPrivkey);

  const [passwordInput, setPasswordInput] = useState('password');
  const [loading, setLoading] = useState(false);
-  const [setPrivkey, setPassword] = useStronghold((state) => [
-    state.setPrivkey,
-    state.setPassword,
-  ]);

  const { account } = useAccount();
  const { load } = useSecureStorage();
@@ -59,9 +56,6 @@ export function UnlockScreen() {
  const onSubmit = async (data: { [x: string]: string }) => {
    setLoading(true);
    if (data.password.length > 3) {
-      // add password to local state
-      setPassword(data.password);
-
      // load private in secure storage
      try {
        const privkey = await load(account.pubkey, data.password);
@@ -87,59 +81,53 @@ 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">
-          <h1 className="text-xl font-semibold text-zinc-100">
-            Enter password to unlock
-          </h1>
+        <div className="mb-6 text-center">
+          <h1 className="text-2xl font-semibold text-white">Enter password to unlock</h1>
        </div>
-        <div className="flex flex-col gap-4">
-          <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-3">
-            <div className="flex flex-col gap-1">
-              <div className="relative">
-                <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"
-                />
-                <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">
+        <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col gap-3">
+          <div className="flex flex-col gap-1">
+            <div className="relative">
+              <input
+                {...register('password', { required: true })}
+                type={passwordInput}
+                className="relative h-12 w-full rounded-lg bg-white/10 py-1 text-center text-white !outline-none placeholder:text-white/10"
+              />
              <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"
+                type="button"
+                onClick={() => showPassword()}
+                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-white/10"
              >
-                {loading ? (
-                  <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
+                {passwordInput === 'password' ? (
+                  <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>
-        </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">
+            <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"
+            >
+              {loading ? (
+                <LoaderIcon className="h-4 w-4 animate-spin text-white" />
+              ) : (
+                'Continue →'
+              )}
+            </button>
+            <Link
+              to="/auth/reset"
+              className="inline-flex h-14 items-center justify-center text-center text-white/50"
+            >
+              Reset password
+            </Link>
+          </div>
+        </form>
      </div>
    </div>
  );
@@ -1,29 +1,41 @@
+import { LogicalSize, appWindow } from '@tauri-apps/plugin-window';
+import { useEffect } from 'react';
 import { Link } from 'react-router-dom';

 import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';

 export function WelcomeScreen() {
+  useEffect(() => {
+    async function setWindow() {
+      await appWindow.setSize(new LogicalSize(400, 500));
+      await appWindow.setResizable(false);
+      await appWindow.center();
+    }
+
+    setWindow();
+
+    return () => {
+      appWindow.setSize(new LogicalSize(1080, 800)).then(() => {
+        appWindow.setResizable(false);
+        appWindow.center();
+      });
+    };
+  }, []);
+
  return (
-    <div className="grid h-full w-full grid-cols-12 gap-4 px-4 py-4">
-      <div className="col-span-5 flex flex-col rounded-xl border-t border-zinc-800/50 bg-zinc-900">
-        <div className="flex h-full w-full flex-col justify-center gap-2 px-4 py-4">
-          <h1 className="text-4xl font-bold leading-none text-transparent text-zinc-700">
-            Preserve your <span className="text-fuchsia-300">freedom</span>
-          </h1>
-          <h2 className="text-4xl font-bold leading-none text-transparent text-zinc-700">
-            Protect your <span className="text-red-300">future</span>
-          </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>
+    <div className="flex h-screen w-full flex-col justify-between bg-white/10">
+      <div className="flex flex-col gap-10 pt-16">
+        <div className="flex flex-col gap-2 text-center">
+          <h1 className="text-3xl font-medium text-white">Welcome to Lume</h1>
+          <h3 className="mx-auto w-2/3 text-white/50">
+            Let&apos;s get you up and connecting with all peoples around the world on
+            Nostr
          </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-3 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 +43,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-zinc-200 hover:bg-white/20 focus:outline-none"
          >
            Create new key
          </Link>
        </div>
      </div>
-      <div
-        className="col-span-5 rounded-xl bg-zinc-900 bg-cover bg-center"
-        style={{
-          backgroundImage: `url("https://void.cat/d/Ps1b36vu5pdkEA2w75usuB")`,
-        }}
-      />
-      <div
-        className="col-span-2 rounded-xl bg-zinc-900 bg-cover bg-center"
-        style={{
-          backgroundImage: `url("https://void.cat/d/5FdJcBP5ZXKAjYqV8hpcp3")`,
-        }}
-      />
+      <div className="flex flex-1 items-end justify-center pb-10">
+        <img src="/lume.png" alt="lume" className="h-auto w-1/3" />
+      </div>
    </div>
  );
 }
@@ -18,7 +18,7 @@ export function ChannelBlackList({ blacklist }: { blacklist: any }) {
            <MuteIcon
              width={16}
              height={16}
-              className="text-zinc-400 group-hover:text-zinc-100"
+              className="text-white/50 group-hover:text-white"
            />
          </Popover.Button>
          <Transition
@@ -37,7 +37,7 @@ export function ChannelBlackList({ blacklist }: { blacklist: any }) {
                    <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">
+                    <p className="text-base leading-tight text-white/50">
                      Currently, unmute only affect locally, when you move to new client,
                      muted list will loaded again
                    </p>
@@ -93,7 +93,7 @@ export function ChannelCreateModal() {
        // close modal
        setIsOpen(false);
        // redirect to channel page
-        navigate(`/app/channel/${event.id}`);
+        navigate(`/channel/${event.id}`);
      }, 1000);
    } catch (e) {
      console.log('error: ', e);
@@ -112,10 +112,10 @@ export function ChannelCreateModal() {
        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" />
+          <PlusIcon width={12} height={12} className="text-white/50" />
        </div>
        <div>
-          <h5 className="font-medium text-zinc-400">Create channel</h5>
+          <h5 className="font-medium text-white/50">Create channel</h5>
        </div>
      </button>
      <Transition appear show={isOpen} as={Fragment}>
@@ -147,7 +147,7 @@ export function ChannelCreateModal() {
                    <div className="flex items-center justify-between">
                      <Dialog.Title
                        as="h3"
-                        className="text-lg font-semibold leading-none text-zinc-100"
+                        className="text-lg font-semibold leading-none text-white"
                      >
                        Create channel
                      </Dialog.Title>
@@ -159,7 +159,7 @@ export function ChannelCreateModal() {
                        <CancelIcon width={20} height={20} className="text-zinc-300" />
                      </button>
                    </div>
-                    <Dialog.Description className="text-sm leading-tight text-zinc-400">
+                    <Dialog.Description className="text-sm leading-tight text-white/50">
                      Channels are freedom square, everyone can speech freely, no one can
                      stop you or deceive what to speech
                    </Dialog.Description>
@@ -174,10 +174,10 @@ export function ChannelCreateModal() {
                      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"
+                      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-white/50 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-white/50"
                    />
                    <div className="flex flex-col gap-1">
-                      <span className="text-sm font-medium uppercase tracking-wider text-zinc-400">
+                      <span className="text-sm font-medium uppercase tracking-wider text-white/50">
                        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">
@@ -195,7 +195,7 @@ export function ChannelCreateModal() {
                    <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"
                      >
                        Channel name *
                      </label>
@@ -206,28 +206,28 @@ export function ChannelCreateModal() {
                          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-10 w-full rounded-lg bg-zinc-800 px-3 py-2 text-white !outline-none 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"
                      >
                        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"
+                        className="relative h-20 w-full resize-none rounded-lg bg-zinc-800 px-3 py-2 text-white !outline-none placeholder:text-white/50"
                      />
                    </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">
+                        <span className="font-semibold leading-none text-white">
                          Encrypted
                        </span>
-                        <p className="w-4/5 text-sm leading-none text-zinc-400">
+                        <p className="w-4/5 text-sm leading-none text-white/50">
                          All messages are encrypted and only invited members can view and
                          send message
                        </p>
@@ -248,10 +248,10 @@ export function ChannelCreateModal() {
                      <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"
+                        className="inline-flex h-11 w-full transform items-center justify-center gap-1 rounded-md bg-fuchsia-500 font-medium text-white 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" />
+                          <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />
                        ) : (
                          'Create channel →'
                        )}
@@ -7,17 +7,17 @@ export function ChannelsListItem({ data }: { data: any }) {
  const channel = useChannelProfile(data.event_id);
  return (
    <NavLink
-      to={`/app/channel/${data.event_id}`}
+      to={`/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' : ''
+          isActive ? 'bg-zinc-900/50 text-white' : ''
        )
      }
    >
      <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>
+        <span className="text-xs text-white">#</span>
      </div>
      <div className="inline-flex w-full items-center justify-between">
        <h5 className="truncate font-medium text-zinc-200">{channel?.name}</h5>
@@ -74,7 +74,7 @@ export function ChannelMessageForm({ channelID }: { channelID: string }) {
            <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 className="text-base text-white">{replyTo.content}</div>
              </div>
            </div>
            <button
@@ -82,7 +82,7 @@ export function ChannelMessageForm({ channelID }: { channelID: string }) {
              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" />
+              <CancelIcon width={12} height={12} className="text-white" />
            </button>
          </div>
        </div>
@@ -95,10 +95,10 @@ export function ChannelMessageForm({ channelID }: { channelID: string }) {
        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`}
+        } w-full resize-none rounded-md bg-zinc-800 px-5 !outline-none placeholder:text-white/50`}
      />
      <div className="absolute bottom-0 right-2 h-11">
-        <div className="flex h-full items-center justify-end gap-3 text-zinc-500">
+        <div className="flex h-full items-center justify-end gap-3 text-white/50">
          <MediaUploader setState={setValue} />
          <button
            type="button"
@@ -99,7 +99,7 @@ export function MessageHideButton({ id }: { id: string }) {
                        <CancelIcon width={20} height={20} className="text-zinc-300" />
                      </button>
                    </div>
-                    <Dialog.Description className="leading-tight text-zinc-400">
+                    <Dialog.Description className="leading-tight text-white/50">
                      This message will be hidden from your feed.
                    </Dialog.Description>
                  </div>
@@ -109,14 +109,14 @@ export function MessageHideButton({ id }: { id: string }) {
                    <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"
+                      className="inline-flex h-9 items-center justify-center rounded-md px-2 text-base font-medium text-white/50 hover:bg-zinc-800 hover:text-white"
                    >
                      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"
+                      className="inline-flex h-9 items-center justify-center rounded-md bg-red-500 px-2 text-base font-medium text-white hover:bg-red-600"
                    >
                      Confirm
                    </button>
@@ -19,7 +19,7 @@ export function ChannelMessageItem({ data }: { data: LumeEvent }) {
      <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">
+          <p className="select-text whitespace-pre-line break-words text-base text-white">
            {content.parsed}
          </p>
          {Array.isArray(content.images) && content.images.length ? (
@@ -99,7 +99,7 @@ export function MessageMuteButton({ pubkey }: { pubkey: string }) {
                        <CancelIcon width={20} height={20} className="text-zinc-300" />
                      </button>
                    </div>
-                    <Dialog.Description className="leading-tight text-zinc-400">
+                    <Dialog.Description className="leading-tight text-white/50">
                      You will no longer see messages from this user.
                    </Dialog.Description>
                  </div>
@@ -109,14 +109,14 @@ export function MessageMuteButton({ pubkey }: { pubkey: string }) {
                    <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"
+                      className="inline-flex h-9 items-center justify-center rounded-md px-2 text-base font-medium text-white/50 hover:bg-zinc-800 hover:text-white"
                    >
                      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"
+                      className="inline-flex h-9 items-center justify-center rounded-md bg-red-500 px-2 text-base font-medium text-white hover:bg-red-600"
                    >
                      Confirm
                    </button>
@@ -13,7 +13,7 @@ export function UserReply({ pubkey }: { pubkey: string }) {
      {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" />
+          <span className="h-2 w-10 animate-pulse rounded bg-zinc-800 text-base font-medium leading-none text-white/50" />
        </>
      ) : (
        <>
@@ -25,7 +25,7 @@ export function UserReply({ pubkey }: { pubkey: string }) {
              className="h-9 w-9 rounded object-cover"
            />
          </div>
-          <span className="max-w-[10rem] truncate text-sm font-medium leading-none text-zinc-500">
+          <span className="max-w-[10rem] truncate text-sm font-medium leading-none text-white/50">
            Replying to {user?.name || shortenKey(pubkey)}
          </span>
        </>
@@ -12,7 +12,7 @@ export function ChannelMetadata({ id }: { id: string }) {
  const noteID = id ? nip19.noteEncode(id) : null;

  const copyNoteID = async () => {
-    const { writeText } = await import('@tauri-apps/api/clipboard');
+    const { writeText } = await import('@tauri-apps/plugin-clipboard-manager');
    if (noteID) {
      await writeText(noteID);
    }
@@ -32,10 +32,10 @@ export function ChannelMetadata({ id }: { id: string }) {
        <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" />
+            <CopyIcon width={14} height={14} className="text-white/50" />
          </button>
        </div>
-        <p className="leading-tight text-zinc-400">
+        <p className="leading-tight text-white/50">
          {metadata?.about || (noteID && `${noteID.substring(0, 24)}...`)}
        </p>
      </div>
@@ -51,10 +51,10 @@ export function MutedItem({ data }: { data: any }) {
              />
            </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">
+              <span className="truncate text-base font-medium leading-none text-white">
                {user?.displayName || user?.name || 'Pleb'}
              </span>
-              <span className="text-base leading-none text-zinc-400">
+              <span className="text-base leading-none text-white/50">
                {shortenKey(data.content)}
              </span>
            </div>
@@ -64,7 +64,7 @@ export function MutedItem({ data }: { data: any }) {
              <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"
+                className="inline-flex h-6 w-min items-center justify-center rounded px-1.5 text-base font-medium leading-none text-white/50 hover:bg-zinc-800 hover:text-fuchsia-500"
              >
                Unmute
              </button>
@@ -72,7 +72,7 @@ export function MutedItem({ data }: { data: any }) {
              <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"
+                className="inline-flex h-6 w-min items-center justify-center rounded px-1.5 text-base font-medium leading-none text-white/50 hover:bg-zinc-800 hover:text-fuchsia-500"
              >
                Mute
              </button>
@@ -23,7 +23,7 @@ const Header = (
      <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">
+      <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-white/50 shadow-sm ring-1 ring-inset ring-zinc-800">
        {getHourAgo(24, now).toLocaleDateString('en-US', {
          weekday: 'long',
          year: 'numeric',
@@ -40,7 +40,7 @@ const Empty = (
    <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">
+    <p className="text-base leading-none text-white/50">
      Be the first to share a message in this channel.
    </p>
  </div>
@@ -102,7 +102,7 @@ export function ChannelScreen() {
          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>
+          <h3 className="font-semibold text-white">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">
@@ -1,61 +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 ChatsListItem({ data }: { data: any }) {
-  const { status, user } = useProfile(data.sender_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 className="h-2.5 w-2/3 animate-pulse rounded bg-zinc-800" />
-      </div>
-    );
-  }
-
-  return (
-    <NavLink
-      to={`/app/chat/${data.sender_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.sender_pubkey}
-          className="h-6 w-6 rounded object-cover"
-        />
-      </div>
-      <div className="inline-flex w-full items-center justify-between">
-        <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>
-  );
-}
@@ -1,45 +0,0 @@
-import { useDecryptMessage } from '@app/chat/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,
-  userPubkey,
-  userPrivkey,
-}: {
-  data: any;
-  userPubkey: string;
-  userPrivkey: string;
-}) {
-  const decryptedContent = useDecryptMessage(data, userPubkey, userPrivkey);
-  // if we have decrypted content, use it instead of the encrypted content
-  if (decryptedContent) {
-    data['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 flex-col">
-        <User pubkey={data.sender_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>
-          {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>
-  );
-}
@@ -1,123 +0,0 @@
-import { Dialog, Transition } from '@headlessui/react';
-import { Fragment, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { User } from '@app/auth/components/user';
-
-import { CancelIcon, LoaderIcon, PlusIcon } from '@shared/icons';
-
-import { useAccount } from '@utils/hooks/useAccount';
-
-export function NewMessageModal() {
-  const navigate = useNavigate();
-  const [isOpen, setIsOpen] = useState(false);
-
-  const { status, account } = useAccount();
-  const follows = account ? JSON.parse(account.follows) : [];
-
-  const closeModal = () => {
-    setIsOpen(false);
-  };
-
-  const openModal = () => {
-    setIsOpen(true);
-  };
-
-  const openChat = (pubkey: string) => {
-    closeModal();
-    navigate(`/app/chat/${pubkey}`);
-  };
-
-  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">New chat</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-1">
-                    <div className="flex items-center justify-between">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-semibold leading-none text-zinc-100"
-                      >
-                        New chat
-                      </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">
-                      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 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="inline-flex w-max translate-x-20 transform rounded border-t border-zinc-600/50 bg-zinc-700 px-3 py-1.5 text-sm transition-transform duration-150 ease-in-out hover:bg-fuchsia-500 group-hover:translate-x-0"
-                          >
-                            Chat
-                          </button>
-                        </div>
-                      </div>
-                    ))
-                  )}
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </Dialog>
-      </Transition>
-    </>
-  );
-}
@@ -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: any }) {
-  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/chat/${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>
-  );
-}
@@ -0,0 +1,58 @@
+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 { displayNpub } from '@utils/shortenKey';
+import { Chats } from '@utils/types';
+
+export function ChatsListItem({ data }: { data: Chats }) {
+  const { status, user } = useProfile(data.sender_pubkey);
+
+  if (status === 'loading') {
+    return (
+      <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
+        <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
+        <div className="h-2.5 w-2/3 animate-pulse rounded bg-white/10" />
+      </div>
+    );
+  }
+
+  return (
+    <NavLink
+      to={`/chats/${data.sender_pubkey}`}
+      preventScrollReset={true}
+      className={({ isActive }) =>
+        twMerge(
+          'inline-flex h-9 items-center gap-2.5 rounded-md px-2',
+          isActive ? 'bg-white/10 text-white' : 'text-white/80'
+        )
+      }
+    >
+      <Image
+        src={user?.picture || user?.image}
+        fallback={DEFAULT_AVATAR}
+        alt={data.sender_pubkey}
+        className="h-6 w-6 shrink-0 rounded object-cover"
+      />
+      <div className="inline-flex w-full flex-1 items-center justify-between">
+        <h5 className="max-w-[10rem] truncate">
+          {user?.nip05 ||
+            user?.name ||
+            user?.display_name ||
+            displayNpub(data.sender_pubkey, 16)}
+        </h5>
+        <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>
+  );
+}
@@ -1,12 +1,15 @@
 import { useQuery } from '@tanstack/react-query';
+import { useCallback } from 'react';

-import { ChatsListItem } from '@app/chat/components/item';
-import { NewMessageModal } from '@app/chat/components/modal';
-import { ChatsListSelfItem } from '@app/chat/components/self';
+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 { useAccount } from '@utils/hooks/useAccount';
+import { Chats } from '@utils/types';

 export function ChatsList() {
  const { account } = useAccount();
@@ -15,23 +18,28 @@ export function ChatsList() {
    data: chats,
    isFetching,
  } = useQuery(['chats'], async () => {
-    const chats = await getChats();
-    const sorted = chats.sort(
-      (a, b) => parseInt(a.new_messages) - parseInt(b.new_messages)
-    );
-    return sorted;
+    return await getChats();
  });

+  const renderItem = useCallback(
+    (item: Chats) => {
+      if (account?.pubkey !== item.sender_pubkey) {
+        return <ChatsListItem key={item.sender_pubkey} data={item} />;
+      }
+    },
+    [chats]
+  );
+
  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="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 className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
+          <div className="h-3 w-full animate-pulse rounded-sm bg-white/10" />
        </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 className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
+          <div className="h-3 w-full animate-pulse rounded-sm bg-white/10" />
        </div>
      </div>
    );
@@ -39,26 +47,23 @@ export function ChatsList() {

  return (
    <div className="flex flex-col">
-      <NewMessageModal />
      {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 className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
+          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
+          <div className="h-3 w-full animate-pulse rounded-sm bg-white/10" />
        </div>
      )}
-      {chats.map((item) => {
-        if (account.pubkey !== item.sender_pubkey) {
-          return <ChatsListItem key={item.sender_pubkey} data={item} />;
-        }
-      })}
+      {chats.follows.map((item) => renderItem(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 w-full animate-pulse rounded-sm bg-zinc-800" />
+        <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
+          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
+          <div className="h-3 w-full animate-pulse rounded-sm bg-white/10" />
        </div>
      )}
+      {chats.unknowns.length > 0 && <UnknownsModal data={chats.unknowns} />}
+      <NewMessageModal />
    </div>
  );
 }
@@ -4,7 +4,7 @@ import { useCallback, useState } from 'react';
 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 +14,7 @@ export function ChatMessageForm({
  userPubkey: string;
  userPrivkey: string;
 }) {
-  const publish = usePublish();
+  const { publish } = useNostr();
  const [value, setValue] = useState('');

  const encryptMessage = useCallback(async () => {
@@ -51,10 +51,10 @@ export function ChatMessageForm({
        onKeyDown={handleEnterPress}
        spellCheck={false}
        placeholder="Message"
-        className="relative h-11 w-full resize-none rounded-md bg-zinc-800 px-5 !outline-none placeholder:text-zinc-500"
+        className="relative h-11 w-full resize-none rounded-md bg-white/10 px-5 text-white !outline-none placeholder:text-white/50"
      />
      <div className="absolute right-2 top-0 h-11">
-        <div className="flex h-full items-center justify-end gap-3 text-zinc-500">
+        <div className="flex h-full items-center justify-end gap-3 text-white/50">
          <MediaUploader setState={setValue} />
          <button
            type="button"
@@ -0,0 +1,35 @@
+import { useDecryptMessage } from '@app/chats/hooks/useDecryptMessage';
+
+import { NoteContent } from '@shared/notes';
+import { User } from '@shared/user';
+
+import { parser } from '@utils/parser';
+
+export function ChatMessageItem({
+  data,
+  userPubkey,
+  userPrivkey,
+}: {
+  data: any;
+  userPubkey: string;
+  userPrivkey: string;
+}) {
+  const decryptedContent = useDecryptMessage(data, userPubkey, userPrivkey);
+  // if we have decrypted content, use it instead of the encrypted content
+  if (decryptedContent) {
+    data['content'] = decryptedContent;
+  }
+
+  return (
+    <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-white/10">
+      <div className="flex flex-col">
+        <User pubkey={data.sender_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-white">
+            {data.content}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,86 @@
+import * as Dialog from '@radix-ui/react-dialog';
+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 { useAccount } from '@utils/hooks/useAccount';
+
+export function NewMessageModal() {
+  const navigate = useNavigate();
+
+  const [open, setOpen] = useState(false);
+  const { status, account } = useAccount();
+
+  const openChat = (pubkey: string) => {
+    setOpen(false);
+    navigate(`/chats/${pubkey}`);
+  };
+
+  return (
+    <Dialog.Root open={open} onOpenChange={setOpen}>
+      <Dialog.Trigger asChild>
+        <button
+          type="button"
+          className="inline-flex h-9 items-center gap-2.5 rounded-md px-2"
+        >
+          <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+            <PlusIcon className="h-3 w-3 text-white" />
+          </div>
+          <div>
+            <h5 className="text-white/50">New chat</h5>
+          </div>
+        </button>
+      </Dialog.Trigger>
+      <Dialog.Portal className="relative z-10">
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
+        <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
+          <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10">
+            <div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">
+              <div className="flex flex-col gap-1">
+                <div className="flex items-center justify-between">
+                  <Dialog.Title className="text-lg font-semibold leading-none text-white">
+                    New chat
+                  </Dialog.Title>
+                  <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-white/10">
+                    <CancelIcon className="h-4 w-4 text-white/50" />
+                  </Dialog.Close>
+                </div>
+                <Dialog.Description className="text-sm leading-none text-white/50">
+                  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-2 pt-2">
+              {status === 'loading' ? (
+                <div className="inline-flex items-center justify-center px-4 py-3">
+                  <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+                </div>
+              ) : (
+                account?.follows?.map((follow) => (
+                  <div
+                    key={follow}
+                    className="group flex items-center justify-between px-4 py-2 hover:bg-white/10"
+                  >
+                    <User pubkey={follow} />
+                    <div>
+                      <button
+                        type="button"
+                        onClick={() => openChat(follow)}
+                        className="hidden w-max rounded bg-white/10 px-3 py-1 text-sm font-medium hover:bg-fuchsia-500 group-hover:inline-flex"
+                      >
+                        Chat
+                      </button>
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
@@ -0,0 +1,48 @@
+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 { displayNpub } 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">
+        <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
+        <div className="h-2.5 w-2/3 animate-pulse rounded bg-white/10" />
+      </div>
+    );
+  }
+
+  return (
+    <NavLink
+      to={`/chats/${data.pubkey}`}
+      preventScrollReset={true}
+      className={({ isActive }) =>
+        twMerge(
+          'inline-flex h-9 items-center gap-2.5 rounded-md px-2',
+          isActive ? 'bg-white/10 text-white' : 'text-white/80'
+        )
+      }
+    >
+      <Image
+        src={user?.picture || user?.image}
+        fallback={DEFAULT_AVATAR}
+        alt={data.pubkey}
+        className="h-6 w-6 shrink-0 rounded bg-white object-cover"
+      />
+      <div className="inline-flex items-baseline gap-1">
+        <h5 className="max-w-[10rem] truncate">
+          {user?.nip05 || user?.name || displayNpub(data.pubkey, 16)}
+        </h5>
+        <span className="text-white/50">(you)</span>
+      </div>
+    </NavLink>
+  );
+}
@@ -5,7 +5,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 ChatSidebar({ pubkey }: { pubkey: string }) {
  const { user } = useProfile(pubkey);
@@ -24,17 +24,17 @@ 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 || shortenKey(pubkey)}
+            <h5 className="leading-none text-white/50">
+              {user?.nip05 || displayNpub(pubkey, 16)}
            </h5>
          </div>
          <div>
            <p className="leading-tight">{user?.bio || user?.about}</p>
            <Link
-              to={`/app/user/${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"
+              to={`/users/${pubkey}`}
+              className="mt-3 inline-flex h-10 w-full items-center justify-center rounded-md bg-white/10 text-sm font-medium text-white hover:bg-fuchsia-500"
            >
              View full profile
            </Link>
@@ -0,0 +1,81 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { User } from '@app/auth/components/user';
+
+import { CancelIcon, PlusIcon } from '@shared/icons';
+
+import { compactNumber } from '@utils/number';
+import { Chats } from '@utils/types';
+
+export function UnknownsModal({ data }: { data: Chats[] }) {
+  const navigate = useNavigate();
+  const [open, setOpen] = useState(false);
+
+  const openChat = (pubkey: string) => {
+    setOpen(false);
+    navigate(`/chats/${pubkey}`);
+  };
+
+  return (
+    <Dialog.Root open={open} onOpenChange={setOpen}>
+      <Dialog.Trigger asChild>
+        <button
+          type="button"
+          className="inline-flex h-9 items-center gap-2.5 rounded-md px-2"
+        >
+          <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+            <PlusIcon className="h-3 w-3 text-white" />
+          </div>
+          <div>
+            <h5 className="text-white/50">
+              {compactNumber.format(data.length)} unknowns
+            </h5>
+          </div>
+        </button>
+      </Dialog.Trigger>
+      <Dialog.Portal className="relative z-10">
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
+        <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
+          <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10">
+            <div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">
+              <div className="flex flex-col gap-1">
+                <div className="flex items-center justify-between">
+                  <Dialog.Title className="text-lg font-semibold leading-none text-white">
+                    {data.length} unknowns
+                  </Dialog.Title>
+                  <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-white/10">
+                    <CancelIcon className="h-4 w-4 text-white/50" />
+                  </Dialog.Close>
+                </div>
+                <Dialog.Description className="text-sm leading-none text-white/50">
+                  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-2 pt-2">
+              {data.map((user) => (
+                <div
+                  key={user.sender_pubkey}
+                  className="group flex items-center justify-between px-4 py-2 hover:bg-white/10"
+                >
+                  <User pubkey={user.sender_pubkey} />
+                  <div>
+                    <button
+                      type="button"
+                      onClick={() => openChat(user.sender_pubkey)}
+                      className="hidden w-max rounded bg-white/10 px-3 py-1 text-sm font-medium hover:bg-fuchsia-500 group-hover:inline-flex"
+                    >
+                      Chat
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
@@ -1,7 +1,9 @@
 import { nip04 } from 'nostr-tools';
 import { useEffect, useState } from 'react';

-export function useDecryptMessage(data: any, userPubkey: string, userPriv: string) {
+import { Chats } from '@utils/types';
+
+export function useDecryptMessage(data: Chats, userPubkey: string, userPriv: string) {
  const [content, setContent] = useState(data.content);

  useEffect(() => {
@@ -4,9 +4,9 @@ import { useCallback, useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { Virtuoso } from 'react-virtuoso';

-import { ChatMessageForm } from '@app/chat/components/messages/form';
-import { ChatMessageItem } from '@app/chat/components/messages/item';
-import { ChatSidebar } from '@app/chat/components/sidebar';
+import { ChatMessageForm } from '@app/chats/components/messages/form';
+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';
@@ -14,6 +14,7 @@ import { createChat, getChatMessages } from '@libs/storage';
 import { useStronghold } from '@stores/stronghold';

 import { useAccount } from '@utils/hooks/useAccount';
+import { Chats } from '@utils/types';

 export function ChatScreen() {
  const queryClient = useQueryClient();
@@ -34,7 +35,7 @@ export function ChatScreen() {

  const userPrivkey = useStronghold((state) => state.privkey);

-  const itemContent: any = useCallback(
+  const itemContent = useCallback(
    (index: string | number) => {
      return (
        <ChatMessageItem
@@ -55,7 +56,7 @@ export function ChatScreen() {
  );

  const chat = useMutation({
-    mutationFn: (data: any) => {
+    mutationFn: (data: Chats) => {
      return createChat(
        data.id,
        data.receiver_pubkey,
@@ -100,16 +101,10 @@ export function ChatScreen() {
  }, [pubkey]);

  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">Encrypted Chat</h3>
-        </div>
+    <div className="grid h-full w-full grid-cols-3 bg-white/10">
+      <div className="col-span-2 border-r border-white/5">
        <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">
            <div className="h-full w-full flex-1">
              {status === 'loading' ? (
                <p>Loading...</p>
@@ -131,7 +126,7 @@ 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">
              <ChatMessageForm
                receiverPubkey={pubkey}
                userPubkey={account.pubkey}
@@ -141,11 +136,7 @@ export function ChatScreen() {
          </div>
        </div>
      </div>
-      <div className="col-span-1">
-        <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="col-span-1 pt-3">
        <ChatSidebar pubkey={pubkey} />
      </div>
    </div>
@@ -155,7 +146,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>
@@ -0,0 +1,51 @@
+import { useParams } from 'react-router-dom';
+
+import {
+  NoteActions,
+  NoteContent,
+  NoteReplyForm,
+  NoteStats,
+  ThreadUser,
+} from '@shared/notes';
+import { RepliesList } from '@shared/notes/replies/list';
+import { NoteSkeleton } from '@shared/notes/skeleton';
+
+import { useAccount } from '@utils/hooks/useAccount';
+import { useEvent } from '@utils/hooks/useEvent';
+
+export function EventScreen() {
+  const { id } = useParams();
+  const { account } = useAccount();
+  const { status, data } = useEvent(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 pt-11">
+        {status === 'loading' ? (
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-3">
+              <NoteSkeleton />
+            </div>
+          </div>
+        ) : (
+          <div className="h-min w-full px-3 pt-1.5">
+            <div className="rounded-xl bg-white/10 px-3 pt-3">
+              <ThreadUser pubkey={data.pubkey} time={data.created_at} />
+              <div className="mt-2">
+                <NoteContent content={data.content} />
+              </div>
+              <div>
+                <NoteActions id={id} pubkey={data.pubkey} noOpenThread={true} />
+                <NoteStats id={id} />
+              </div>
+            </div>
+          </div>
+        )}
+        <div className="px-3">
+          <NoteReplyForm id={id} pubkey={account.pubkey} />
+          <RepliesList id={id} />
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -1,60 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { useParams } from 'react-router-dom';
-
-import { useLiveThread } from '@app/space/hooks/useLiveThread';
-
-import { getNoteByID } from '@libs/storage';
-
-import { Kind1 } from '@shared/notes/contents/kind1';
-import { Kind1063 } from '@shared/notes/contents/kind1063';
-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 { parser } from '@utils/parser';
-
-export function NoteScreen() {
-  const { id } = useParams();
-  const { account } = useAccount();
-  const { status, data } = useQuery(['thread', id], async () => {
-    const res = await getNoteByID(id);
-    res['content'] = parser(res);
-    return res;
-  });
-
-  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">
-                {data.kind === 1 && <Kind1 content={data.content} />}
-                {data.kind === 1063 && <Kind1063 metadata={data.tags} />}
-                <NoteMetadata id={data.event_id || id} eventPubkey={data.pubkey} />
-              </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 parent_id={id} />
-        </div>
-      </div>
-    </div>
-  );
-}
@@ -1,186 +0,0 @@
-import { NDKFilter } from '@nostr-dev-kit/ndk';
-import { useEffect, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { useNDK } from '@libs/ndk/provider';
-import { prefetchEvents } from '@libs/ndk/utils';
-import {
-  countTotalNotes,
-  createChat,
-  createNote,
-  getLastLogin,
-  updateLastLogin,
-} from '@libs/storage';
-
-import { LoaderIcon, LumeIcon } from '@shared/icons';
-
-import { dateToUnix, getHourAgo } from '@utils/date';
-import { useAccount } from '@utils/hooks/useAccount';
-
-const totalNotes = await countTotalNotes();
-const lastLogin = await getLastLogin();
-
-export function Root() {
-  const now = useRef(new Date());
-  const navigate = useNavigate();
-
-  const { ndk } = useNDK();
-  const { status, account } = useAccount();
-
-  async function fetchNotes() {
-    try {
-      const follows = JSON.parse(account.follows);
-
-      if (follows.length > 0) {
-        let since: number;
-
-        if (totalNotes === 0 || lastLogin === 0) {
-          since = dateToUnix(getHourAgo(48, now.current));
-        } else {
-          since = lastLogin;
-        }
-
-        const filter: NDKFilter = {
-          kinds: [1, 6],
-          authors: follows,
-          since: since,
-        };
-
-        const events = await prefetchEvents(ndk, filter);
-        for (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 sendFilter: NDKFilter = {
-        kinds: [4],
-        authors: [account.pubkey],
-        since: lastLogin,
-      };
-
-      const receiveFilter: NDKFilter = {
-        kinds: [4],
-        '#p': [account.pubkey],
-        since: lastLogin,
-      };
-
-      const sendMessages = await prefetchEvents(ndk, sendFilter);
-      const receiveMessages = await prefetchEvents(ndk, receiveFilter);
-
-      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-black dark:text-zinc-100">
-      <div className="relative h-full overflow-hidden">
-        <div
-          data-tauri-drag-region
-          className="absolute left-0 top-0 z-20 h-16 w-full bg-transparent"
-        />
-        <div className="relative flex h-full flex-col items-center justify-center">
-          <div className="flex flex-col items-center gap-2">
-            <LumeIcon className="h-16 w-16 text-black dark:text-zinc-100" />
-            <div className="text-center">
-              <h3 className="text-lg font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
-                Here&apos;s an interesting fact:
-              </h3>
-              <p className="font-medium text-zinc-300 dark:text-zinc-600">
-                Bitcoin and Nostr can be used by anyone, and no one can stop you!
-              </p>
-            </div>
-          </div>
-          <div className="absolute bottom-16 left-1/2 -translate-x-1/2 transform">
-            <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
@@ -23,36 +23,36 @@ export function AccountSettingsScreen() {
  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">Account</h1>
+        <h1 className="text-lg font-semibold text-white">Account</h1>
        <div className="">
          {status === 'loading' ? (
            <p>Loading...</p>
          ) : (
            <div className="flex flex-col gap-4">
              <div className="flex flex-col gap-1">
-                <label htmlFor="pubkey" className="text-base font-semibold text-zinc-400">
+                <label htmlFor="pubkey" className="text-base font-semibold text-white/50">
                  Public Key
                </label>
                <input
                  readOnly
                  value={account.pubkey}
-                  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"
+                  className="relative w-2/3 rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none placeholder:text-white/50"
                />
              </div>
              <div className="flex flex-col gap-1">
-                <label htmlFor="npub" className="text-base font-semibold text-zinc-400">
+                <label htmlFor="npub" className="text-base font-semibold text-white/50">
                  Npub
                </label>
                <input
                  readOnly
                  value={account.npub}
-                  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"
+                  className="relative w-2/3 rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none placeholder:text-white/50"
                />
              </div>
              <div className="flex flex-col gap-1">
                <label
                  htmlFor="privkey"
-                  className="text-base font-semibold text-zinc-400"
+                  className="text-base font-semibold text-white/50"
                >
                  Private Key
                </label>
@@ -61,7 +61,7 @@ export function AccountSettingsScreen() {
                    readOnly
                    type={type}
                    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"
+                    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"
@@ -72,13 +72,13 @@ export function AccountSettingsScreen() {
                      <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>
@@ -1,7 +1,7 @@
 import { Switch } from '@headlessui/react';
+import { disable, enable, isEnabled } from '@tauri-apps/plugin-autostart';
 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';

@@ -36,7 +36,7 @@ export function AutoStartSetting() {
    <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}
@@ -20,7 +20,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 +37,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>
@@ -1,25 +1,34 @@
-import { getVersion } from '@tauri-apps/api/app';
+import { getVersion } from '@tauri-apps/plugin-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" />
+          <RefreshIcon className="h-4 w-4 text-white" />
        </button>
      </div>
    </div>
@@ -6,9 +6,9 @@ export function GeneralSettingsScreen() {
  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">General</h1>
-        <div className="w-full rounded-xl border-t border-zinc-800/50 bg-zinc-900">
-          <div className="flex h-full w-full flex-col divide-y divide-zinc-800">
+        <h1 className="text-lg font-semibold text-white">General</h1>
+        <div className="w-full rounded-xl bg-white/10">
+          <div className="flex h-full w-full flex-col divide-y divide-white/5">
            <AutoStartSetting />
            <CacheTimeSetting />
            <VersionSetting />
@@ -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>
-        <div className="w-full rounded-xl border-t border-zinc-800/50 bg-zinc-900">
-          <div className="flex h-full w-full flex-col divide-y divide-zinc-800">
+        <h1 className="text-lg font-semibold text-white">Shortcuts</h1>
+        <div className="w-full rounded-xl bg-white/10">
+          <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">
-                  Open composer
-                </span>
+                <span className="font-medium leading-none text-white">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">
-                  <CommandIcon width={12} height={12} className="text-zinc-500" />
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+                  <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">
-                  <span className="text-sm leading-none text-zinc-500">N</span>
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+                  <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">
-                  <CommandIcon width={12} height={12} className="text-zinc-500" />
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+                  <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">
-                  <span className="text-sm leading-none text-zinc-500">I</span>
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+                  <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">
-                  <CommandIcon width={12} height={12} className="text-zinc-500" />
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+                  <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">
-                  <span className="text-sm leading-none text-zinc-500">F</span>
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+                  <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">
-                  <CommandIcon width={12} height={12} className="text-zinc-500" />
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+                  <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">
-                  <span className="text-sm leading-none text-zinc-500">P</span>
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+                  <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">
-                  <CommandIcon width={12} height={12} className="text-zinc-500" />
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+                  <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">
-                  <span className="text-sm leading-none text-zinc-500">B</span>
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+                  <span className="text-sm leading-none text-white/50">B</span>
                </div>
              </div>
            </div>
@@ -1,11 +0,0 @@
-import { AddFeedBlock } from '@app/space/components/addFeed';
-import { AddImageBlock } from '@app/space/components/addImage';
-
-export function AddBlock() {
-  return (
-    <div className="flex flex-col gap-1">
-      <AddImageBlock />
-      <AddFeedBlock />
-    </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 { 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: any) => {
-      return createBlock(data.kind, data.title, data.content);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['blocks'] });
-    },
-  });
-
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState: { isDirty, isValid },
-  } = useForm();
-
-  const onSubmit = (data: any) => {
-    setLoading(true);
-
-    selected.forEach((item, index) => {
-      if (item.substring(0, 4) === 'npub') {
-        selected[index] = nip19.decode(item).data;
-      }
-    });
-
-    // insert to database
-    block.mutate({
-      kind: 1,
-      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-56 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).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,294 +0,0 @@
-import { Dialog, Transition } from '@headlessui/react';
-import { NDKEvent, NDKPrivateKeySigner } from '@nostr-dev-kit/ndk';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { open } from '@tauri-apps/api/dialog';
-import { Body, fetch } from '@tauri-apps/api/http';
-import { Fragment, useEffect, useRef, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { useHotkeys } from 'react-hotkeys-hook';
-
-import { useNDK } from '@libs/ndk/provider';
-import { createBlock } from '@libs/storage';
-
-import { CancelIcon, CommandIcon } from '@shared/icons';
-import { Image } from '@shared/image';
-
-import { DEFAULT_AVATAR } from '@stores/constants';
-import { ADD_IMAGEBLOCK_SHORTCUT } from '@stores/shortcuts';
-
-import { createBlobFromFile } from '@utils/createBlobFromFile';
-import { dateToUnix } from '@utils/date';
-import { useAccount } from '@utils/hooks/useAccount';
-import { usePublish } from '@utils/hooks/usePublish';
-
-export function AddImageBlock() {
-  const queryClient = useQueryClient();
-  const publish = usePublish();
-
-  const [loading, setLoading] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
-  const [image, setImage] = useState('');
-
-  const { ndk } = useNDK();
-  const { account } = useAccount();
-
-  const tags = useRef(null);
-
-  const openModal = () => {
-    setIsOpen(true);
-  };
-
-  const closeModal = () => {
-    setIsOpen(false);
-  };
-
-  useHotkeys(ADD_IMAGEBLOCK_SHORTCUT, () => openModal());
-
-  const {
-    register,
-    handleSubmit,
-    reset,
-    setValue,
-    formState: { isDirty, isValid },
-  } = useForm();
-
-  const openFileDialog = async () => {
-    const selected: any = await open({
-      multiple: false,
-      filters: [
-        {
-          name: 'Image',
-          extensions: ['png', 'jpeg', 'jpg'],
-        },
-      ],
-    });
-
-    if (Array.isArray(selected)) {
-      // user selected multiple files
-    } else if (selected === null) {
-      // user cancelled the selection
-    } else {
-      const filename = selected.split('/').pop();
-      const file = await createBlobFromFile(selected);
-      const buf = await file.arrayBuffer();
-
-      const res: any = await fetch('https://void.cat/upload?cli=false', {
-        method: 'POST',
-        timeout: 5,
-        headers: {
-          accept: '*/*',
-          'Content-Type': 'application/octet-stream',
-          'V-Filename': filename,
-          'V-Description': 'Upload from https://lume.nu',
-          'V-Strip-Metadata': 'true',
-        },
-        body: Body.bytes(buf),
-      });
-
-      if (res.ok) {
-        const imageURL = `https://void.cat/d/${res.data.file.id}.webp`;
-        tags.current = [
-          ['url', imageURL],
-          ['m', res.data.file.metadata.mimeType],
-          ['x', res.data.file.metadata.digest],
-          ['size', res.data.file.metadata.size],
-          ['magnet', res.data.file.metadata.magnetLink],
-        ];
-
-        setImage(imageURL);
-      }
-    }
-  };
-
-  const block = useMutation({
-    mutationFn: (data: any) => {
-      return createBlock(data.kind, data.title, data.content);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['blocks'] });
-    },
-  });
-
-  const onSubmit = async (data: any) => {
-    setLoading(true);
-
-    // publish file metedata
-    await publish({ content: data.title, kind: 1063, tags: tags.current });
-
-    // mutate
-    block.mutate({ kind: 0, title: data.title, content: data.content });
-
-    setLoading(false);
-    // reset form
-    reset();
-    // close modal
-    closeModal();
-  };
-
-  useEffect(() => {
-    setValue('content', image);
-  }, [setValue, image]);
-
-  return (
-    <>
-      <button
-        type="button"
-        onClick={() => openModal()}
-        className="inline-flex h-9 w-56 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">I</span>
-          </div>
-        </div>
-        <div>
-          <h5 className="font-medium text-zinc-400">New image 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 image 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 your favorite image to Space then you can view every time that
-                      you use Lume, your image will be broadcast to Nostr Relay as well
-                    </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('content')}
-                      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">
-                      <label
-                        htmlFor="title"
-                        className="text-sm font-medium uppercase tracking-wider text-zinc-400"
-                      >
-                        Title *
-                      </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('title', {
-                            required: true,
-                          })}
-                          spellCheck={false}
-                          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 className="flex flex-col gap-1">
-                      <label
-                        htmlFor="picture"
-                        className="text-sm font-medium uppercase tracking-wider text-zinc-400"
-                      >
-                        Picture
-                      </label>
-                      <div className="relative inline-flex h-56 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
-                        <Image
-                          src={image}
-                          fallback={DEFAULT_AVATAR}
-                          alt="content"
-                          className="relative z-10 h-auto max-h-[156px] w-[150px] rounded-md object-cover"
-                        />
-                        <div className="absolute bottom-3 right-3 z-10">
-                          <button
-                            onClick={() => openFileDialog()}
-                            type="button"
-                            className="inline-flex h-6 items-center justify-center rounded bg-zinc-900 px-3 text-sm font-medium text-zinc-300 ring-1 ring-zinc-800 hover:bg-zinc-800"
-                          >
-                            Upload
-                          </button>
-                        </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 ? (
-                          <svg
-                            className="h-4 w-4 animate-spin text-black dark:text-zinc-100"
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                          >
-                            <title id="loading">Loading</title>
-                            <circle
-                              className="opacity-25"
-                              cx="12"
-                              cy="12"
-                              r="10"
-                              stroke="currentColor"
-                              strokeWidth="4"
-                            />
-                            <path
-                              className="opacity-75"
-                              fill="currentColor"
-                              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                            />
-                          </svg>
-                        ) : (
-                          'Confirm'
-                        )}
-                      </button>
-                    </div>
-                  </form>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </Dialog>
-      </Transition>
-    </>
-  );
-}
@@ -1,18 +1,19 @@
-import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useEffect, useRef } from 'react';
-import { Link } from 'react-router-dom';
+import { useCallback, useEffect, useRef } from 'react';

-import { getNotesByAuthors, removeBlock } from '@libs/storage';
+import { getNotesByAuthors } from '@libs/storage';

-import { Note } from '@shared/notes/note';
+import { NoteKind_1, NoteKind_1063, NoteThread, Repost } from '@shared/notes';
+import { NoteKindUnsupport } from '@shared/notes/kinds/unsupport';
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';

+import { LumeEvent, Widget } from '@utils/types';
+
 const ITEM_PER_PAGE = 10;

-export function FeedBlock({ params }: { params: any }) {
-  const queryClient = useQueryClient();
+export function FeedBlock({ params }: { params: Widget }) {
  const { status, data, fetchNextPage, hasNextPage, isFetchingNextPage } =
    useInfiniteQuery({
      queryKey: ['newsfeed', params.content],
@@ -22,9 +23,9 @@ export function FeedBlock({ params }: { params: any }) {
      getNextPageParam: (lastPage) => lastPage.nextCursor,
    });

-  const notes = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
-  const parentRef = useRef();
+  const notes = data ? data.pages.flatMap((d: { data: LumeEvent[] }) => d.data) : [];

+  const parentRef = useRef();
  const rowVirtualizer = useVirtualizer({
    count: hasNextPage ? notes.length + 1 : notes.length,
    getScrollElement: () => parentRef.current,
@@ -33,6 +34,7 @@ export function FeedBlock({ params }: { params: any }) {
  });

  const itemsVirtualizer = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();

  useEffect(() => {
    const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
@@ -46,45 +48,86 @@ export function FeedBlock({ params }: { params: any }) {
    }
  }, [notes.length, fetchNextPage, rowVirtualizer.getVirtualItems()]);

-  const block = useMutation({
-    mutationFn: (id: string) => {
-      return removeBlock(id);
+  const renderItem = useCallback(
+    (index: string | number) => {
+      const note: LumeEvent = notes[index];
+      if (!note) return;
+      switch (note.kind) {
+        case 1: {
+          const root = note.tags.find((el) => el[3] === 'root')?.[1];
+          const reply = note.tags.find((el) => el[3] === 'reply')?.[1];
+          if (root || reply) {
+            return (
+              <div
+                key={note.event_id || note.id}
+                data-index={index}
+                ref={rowVirtualizer.measureElement}
+              >
+                <NoteThread event={note} root={root} reply={reply} />
+              </div>
+            );
+          } else {
+            return (
+              <div
+                key={note.event_id || note.id}
+                data-index={index}
+                ref={rowVirtualizer.measureElement}
+              >
+                <NoteKind_1 event={note} skipMetadata={false} />
+              </div>
+            );
+          }
+        }
+        case 6:
+          return (
+            <div
+              key={note.event_id || note.id}
+              data-index={index}
+              ref={rowVirtualizer.measureElement}
+            >
+              <Repost key={note.event_id} event={note} />
+            </div>
+          );
+        case 1063:
+          return (
+            <div
+              key={note.event_id || note.id}
+              data-index={index}
+              ref={rowVirtualizer.measureElement}
+            >
+              <NoteKind_1063 key={note.event_id} event={note} />
+            </div>
+          );
+        default:
+          return (
+            <div
+              key={note.event_id || note.id}
+              data-index={index}
+              ref={rowVirtualizer.measureElement}
+            >
+              <NoteKindUnsupport key={note.event_id} event={note} />
+            </div>
+          );
+      }
    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['blocks'] });
-    },
-  });
-
-  const renderItem = (index: string | number) => {
-    const note = notes[index];
-
-    if (!note) return;
-    return (
-      <div key={index} data-index={index} ref={rowVirtualizer.measureElement}>
-        <Note event={note} />
-      </div>
-    );
-  };
+    [notes]
+  );

  return (
-    <div className="w-[400px] shrink-0 border-r border-zinc-900">
-      <TitleBar title={params.title} onClick={() => block.mutate(params.id)} />
-      <div
-        ref={parentRef}
-        className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5"
-        style={{ contain: 'strict' }}
-      >
+    <div className="relative w-[400px] shrink-0 bg-white/10">
+      <TitleBar id={params.id} title={params.title} />
+      <div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
        {status === 'loading' ? (
          <div className="px-3 py-1.5">
-            <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
+            <div className="rounded-xl bg-white/10 px-3 py-3">
              <NoteSkeleton />
            </div>
          </div>
        ) : itemsVirtualizer.length === 0 ? (
          <div className="px-3 py-1.5">
-            <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-6">
+            <div className="bbg-white/10 rounded-xl px-3 py-6">
              <div className="flex flex-col items-center gap-4">
-                <p className="text-center text-sm text-zinc-300">
+                <p className="text-center text-sm text-white">
                  Not found any posts from last 48 hours
                </p>
              </div>
@@ -94,7 +137,7 @@ export function FeedBlock({ params }: { params: any }) {
          <div
            className="relative w-full"
            style={{
-              height: `${rowVirtualizer.getTotalSize()}px`,
+              height: `${totalSize}px`,
            }}
          >
            <div
@@ -105,15 +148,13 @@ export function FeedBlock({ params }: { params: any }) {
                }px)`,
              }}
            >
-              {rowVirtualizer
-                .getVirtualItems()
-                .map((virtualRow) => renderItem(virtualRow.index))}
+              {itemsVirtualizer.map((virtualRow) => renderItem(virtualRow.index))}
            </div>
          </div>
        )}
        {isFetchingNextPage && (
          <div className="px-3 py-1.5">
-            <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
+            <div className="rounded-xl bg-white/10 px-3 py-3">
              <NoteSkeleton />
            </div>
          </div>
@@ -1,157 +0,0 @@
-import { useInfiniteQuery } from '@tanstack/react-query';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { useEffect, useRef } from 'react';
-import { Link } from 'react-router-dom';
-
-import { useNewsfeed } from '@app/space/hooks/useNewsfeed';
-
-import { getNotes } from '@libs/storage';
-
-import { Note } from '@shared/notes/note';
-import { NoteSkeleton } from '@shared/notes/skeleton';
-import { TitleBar } from '@shared/titleBar';
-
-import { useNote } from '@stores/note';
-
-const ITEM_PER_PAGE = 10;
-
-export function FollowingBlock() {
-  // subscribe for live update
-  useNewsfeed();
-  // notify user that new note is arrive
-  const [hasNewNote, toggleHasNewNote] = useNote((state) => [
-    state.hasNewNote,
-    state.toggleHasNewNote,
-  ]);
-
-  const { status, data, fetchNextPage, hasNextPage, isFetchingNextPage, refetch } =
-    useInfiniteQuery({
-      queryKey: ['newsfeed-circle'],
-      queryFn: async ({ pageParam = 0 }) => {
-        return await getNotes(ITEM_PER_PAGE, pageParam);
-      },
-      getNextPageParam: (lastPage) => lastPage.nextCursor,
-    });
-
-  const notes = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
-  const parentRef = useRef();
-
-  const rowVirtualizer = useVirtualizer({
-    count: hasNextPage ? notes.length + 1 : notes.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 500,
-    overscan: 2,
-  });
-
-  const itemsVirtualizer = rowVirtualizer.getVirtualItems();
-
-  useEffect(() => {
-    const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
-
-    if (!lastItem) {
-      return;
-    }
-
-    if (lastItem.index >= notes.length - 1 && hasNextPage && !isFetchingNextPage) {
-      fetchNextPage();
-    }
-  }, [notes.length, fetchNextPage, rowVirtualizer.getVirtualItems()]);
-
-  const refreshFirstPage = () => {
-    // refetch
-    refetch({ refetchPage: (_, index: number) => index === 0 });
-    // scroll to top
-    rowVirtualizer.scrollToIndex(1);
-    // stop notify
-    toggleHasNewNote(false);
-  };
-
-  const renderItem = (index: string | number) => {
-    const note = notes[index];
-    if (!note) return;
-    return (
-      <div
-        key={note.event_id || note.id}
-        data-index={index}
-        ref={rowVirtualizer.measureElement}
-      >
-        <Note event={note} />
-      </div>
-    );
-  };
-
-  return (
-    <div className="relative w-[400px] shrink-0 border-r border-zinc-900">
-      <TitleBar title="Your Circle" />
-      {hasNewNote && (
-        <div className="absolute left-1/2 top-12 z-50 -translate-x-1/2 transform">
-          <button
-            type="button"
-            onClick={() => refreshFirstPage()}
-            className="inline-flex w-min items-center justify-center rounded-full border border-fuchsia-800/50 bg-fuchsia-500 px-3.5 py-1.5 text-sm hover:bg-fuchsia-600"
-          >
-            Newest
-          </button>
-        </div>
-      )}
-      <div
-        ref={parentRef}
-        className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5"
-        style={{ contain: 'strict' }}
-      >
-        {status === 'loading' ? (
-          <div className="px-3 py-1.5">
-            <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
-              <NoteSkeleton />
-            </div>
-          </div>
-        ) : itemsVirtualizer.length === 0 ? (
-          <div className="px-3 py-1.5">
-            <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-6">
-              <div className="flex flex-col items-center gap-4">
-                <p className="text-center text-sm text-zinc-300">
-                  You not have any posts to see yet
-                  <br />
-                  Follow more people to have more fun.
-                </p>
-                <Link
-                  to="/app/trending"
-                  className="inline-flex w-max rounded bg-fuchsia-500 px-2.5 py-1.5 text-sm hover:bg-fuchsia-600"
-                >
-                  Trending
-                </Link>
-              </div>
-            </div>
-          </div>
-        ) : (
-          <div
-            className="relative w-full"
-            style={{
-              height: `${rowVirtualizer.getTotalSize()}px`,
-            }}
-          >
-            <div
-              className="absolute left-0 top-0 w-full"
-              style={{
-                transform: `translateY(${
-                  itemsVirtualizer[0].start - rowVirtualizer.options.scrollMargin
-                }px)`,
-              }}
-            >
-              {rowVirtualizer
-                .getVirtualItems()
-                .map((virtualRow) => renderItem(virtualRow.index))}
-            </div>
-          </div>
-        )}
-        {isFetchingNextPage && (
-          <div className="px-3 py-1.5">
-            <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
-              <NoteSkeleton />
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
@@ -0,0 +1,84 @@
+import { useQuery } from '@tanstack/react-query';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useRef } from 'react';
+
+import { useNDK } from '@libs/ndk/provider';
+
+import { NoteKind_1, NoteSkeleton } from '@shared/notes';
+import { TitleBar } from '@shared/titleBar';
+
+import { nHoursAgo } from '@utils/date';
+import { LumeEvent, Widget } from '@utils/types';
+
+export function HashtagBlock({ params }: { params: Widget }) {
+  const { ndk } = useNDK();
+  const { status, data } = useQuery(['hashtag', params.content], async () => {
+    const events = await ndk.fetchEvents({
+      kinds: [1],
+      '#t': [params.content],
+      since: nHoursAgo(24),
+    });
+    return [...events] as unknown as LumeEvent[];
+  });
+
+  const parentRef = useRef();
+  const rowVirtualizer = useVirtualizer({
+    count: data ? data.length : 0,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 400,
+  });
+
+  const itemsVirtualizer = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
+
+  return (
+    <div className="relative w-[400px] shrink-0 bg-white/10">
+      <TitleBar id={params.id} title={params.title + ' in 24 hours ago'} />
+      <div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
+        {status === 'loading' ? (
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-3">
+              <NoteSkeleton />
+            </div>
+          </div>
+        ) : itemsVirtualizer.length === 0 ? (
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-6">
+              <div className="flex flex-col items-center gap-4">
+                <p className="text-center text-sm font-medium text-white">
+                  No new posts about this hashtag in 24 hours ago
+                </p>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div
+            className="relative w-full"
+            style={{
+              height: `${totalSize}px`,
+            }}
+          >
+            <div
+              className="absolute left-0 top-0 w-full"
+              style={{
+                transform: `translateY(${
+                  itemsVirtualizer[0].start - rowVirtualizer.options.scrollMargin
+                }px)`,
+              }}
+            >
+              {itemsVirtualizer.map((virtualRow) => (
+                <div
+                  key={virtualRow.key}
+                  data-index={virtualRow.index}
+                  ref={rowVirtualizer.measureElement}
+                >
+                  <NoteKind_1 event={data[virtualRow.index]} />
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Ren AmamiyaandGitHub	8cb3ef82b2	Merge pull request #67 from luminous-devs/main v1.2.0	2023-08-13 11:19:51 +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
Ren AmamiyaandGitHub	025562f9f0	Merge pull request #61 from luminous-devs/main v1.1.1	2023-07-27 09:26:26 +07:00
Ren Amamiya	15514887a4	bump version	2023-07-27 09:25:47 +07:00
Ren Amamiya	343e1a12d6	v1.1.1	2023-07-27 09:02:04 +07:00
Ren AmamiyaandGitHub	595bcc9b3c	Merge pull request #59 from luminous-devs/main v1.1.0	2023-07-26 09:27:39 +07:00
Ren Amamiya	f52ea04541	polish	2023-07-26 09:26:40 +07:00
Ren Amamiya	89dd4f5c9d	fix small issues	2023-07-26 08:25:08 +07:00
Ren Amamiya	e30ca0ff82	add hashtag support in composer	2023-07-25 17:45:32 +07:00
Ren Amamiya	8d761caf3e	add hashtag block modal	2023-07-25 17:06:18 +07:00
Ren Amamiya	a4e03a59eb	add unknown chats modal	2023-07-25 16:12:52 +07:00
Ren Amamiya	1362dfadda	update urls and user page	2023-07-25 13:25:14 +07:00
Ren Amamiya	7a245cd375	update icons	2023-07-25 10:39:32 +07:00
Ren Amamiya	a1b93cdb72	polish	2023-07-25 08:09:26 +07:00
Ren Amamiya	d30be10568	fix zap	2023-07-24 10:12:39 +07:00
Ren Amamiya	515fda5e97	wip: zap (done)	2023-07-24 09:30:57 +07:00
Ren Amamiya	22a678ec08	wip: zap	2023-07-23 21:39:04 +07:00
Ren Amamiya	71c4f3db22	add download button to image	2023-07-23 17:27:51 +07:00
Ren Amamiya	13ca8a2c54	update notification	2023-07-23 15:54:34 +07:00
Ren Amamiya	f0fb1bee1e	minor updates	2023-07-23 09:16:29 +07:00
Ren AmamiyaandGitHub	b66e11433f	Merge pull request #58 from luminous-devs/v1.1.0 prepare v1.1.0	2023-07-22 17:35:37 +07:00
Ren Amamiya	6d20f84489	fix small errors	2023-07-22 17:35:04 +07:00
Ren Amamiya	20a8ce9cba	update composer with image upload	2023-07-22 15:32:34 +07:00
Ren Amamiya	17d2a8cb56	add mention to composer	2023-07-21 18:07:17 +07:00
Ren Amamiya	64cd17389d	wip: tiptap editor	2023-07-21 16:16:41 +07:00
Ren Amamiya	8f4cf7e948	fix errors	2023-07-20 17:14:32 +07:00
Ren Amamiya	bbfdb139c6	update stronghold	2023-07-20 08:57:58 +07:00
Ren Amamiya	a80477b40e	update useProfile hook	2023-07-19 17:37:10 +07:00
Ren Amamiya	29d40ed406	render reply and sub reply accordingly	2023-07-19 17:07:25 +07:00
Ren Amamiya	22c1eaa541	add useBlock hook	2023-07-19 12:47:45 +07:00
Ren Amamiya	6307e8d1e4	add download keys button to onboarding process	2023-07-19 07:57:25 +07:00
Ren Amamiya	12bfa2fca1	clean up database and update depedencies	2023-07-18 14:37:03 +07:00
Ren Amamiya	100204b267	add user block	2023-07-17 17:00:01 +07:00
Ren Amamiya	7d38fa5d85	update depedencies	2023-07-17 15:21:56 +07:00
Ren Amamiya	5606dcb32f	update replies	2023-07-17 13:37:01 +07:00
Ren Amamiya	b3b790588a	add hashtag block	2023-07-17 08:54:17 +07:00
Ren Amamiya	4f41022b30	update	2023-07-17 07:51:00 +07:00
Ren Amamiya	9a09a04a5d	add strangers section to chats sidebar	2023-07-16 18:25:58 +07:00
Ren Amamiya	5ce9fa515a	add reaction	2023-07-16 15:46:01 +07:00
Ren Amamiya	abc53a0d9a	update note actions component	2023-07-16 14:24:19 +07:00
Ren Amamiya	e0a14ce6cf	update markdown	2023-07-15 21:01:27 +07:00
Ren Amamiya	f154d8f5f4	use markdown	2023-07-15 16:03:31 +07:00
Ren Amamiya	1f18d8bb44	refactor note component	2023-07-15 12:20:09 +07:00
Ren Amamiya	41460436df	add nostr-fetch	2023-07-11 14:27:14 +07:00
Ren AmamiyaandGitHub	15991d07ab	Merge pull request #53 from luminous-devs/main update set password flow	2023-07-10 17:20:26 +07:00
Ren Amamiya	339783a1a4	update set password flow	2023-07-10 17:16:43 +07:00
Ren AmamiyaandGitHub	99fc1f0b10	Merge pull request #52 from luminous-devs/main update gh action and fix migrate page	2023-07-10 15:34:03 +07:00
Ren Amamiya	c664b3e4a4	update gh action and fix migrate page	2023-07-10 15:30:15 +07:00