bump version

Lume v2.2.0

package.json

@@ -2,7 +2,7 @@
   "name": "lume",
   "description": "the communication app",
   "private": true,
-  "version": "2.1.5",
+  "version": "2.2.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -18,10 +18,11 @@
     "**/*.{ts, tsx, css, md, html, json}": "prettier --cache --write"
   },
   "dependencies": {
-    "@evilmartians/harmony": "^1.1.0",
+    "@evilmartians/harmony": "^1.2.0",
     "@getalby/sdk": "^2.7.0",
-    "@nostr-dev-kit/ndk": "^2.1.1",
+    "@nostr-dev-kit/ndk": "^2.2.0",
     "@nostr-fetch/adapter-ndk": "^0.13.1",
+    "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",
@@ -32,7 +33,8 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toolbar": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@tanstack/react-query": "^5.8.7",
+    "@tanstack/react-query": "^5.12.1",
+    "@tanstack/react-query-devtools": "^5.12.1",
     "@tauri-apps/api": "2.0.0-alpha.11",
     "@tauri-apps/cli": "2.0.0-alpha.17",
     "@tauri-apps/plugin-autostart": "2.0.0-alpha.3",
@@ -47,25 +49,25 @@
     "@tauri-apps/plugin-sql": "2.0.0-alpha.3",
     "@tauri-apps/plugin-updater": "2.0.0-alpha.3",
     "@tauri-apps/plugin-upload": "2.0.0-alpha.3",
-    "@tiptap/extension-character-count": "^2.1.12",
+    "@tiptap/extension-character-count": "^2.1.13",
-    "@tiptap/extension-document": "^2.1.12",
+    "@tiptap/extension-document": "^2.1.13",
-    "@tiptap/extension-image": "^2.1.12",
+    "@tiptap/extension-image": "^2.1.13",
-    "@tiptap/extension-mention": "^2.1.12",
+    "@tiptap/extension-mention": "^2.1.13",
-    "@tiptap/extension-paragraph": "^2.1.12",
+    "@tiptap/extension-paragraph": "^2.1.13",
-    "@tiptap/extension-placeholder": "^2.1.12",
+    "@tiptap/extension-placeholder": "^2.1.13",
-    "@tiptap/extension-text": "^2.1.12",
+    "@tiptap/extension-text": "^2.1.13",
-    "@tiptap/pm": "^2.1.12",
+    "@tiptap/pm": "^2.1.13",
-    "@tiptap/react": "^2.1.12",
+    "@tiptap/react": "^2.1.13",
-    "@tiptap/starter-kit": "^2.1.12",
+    "@tiptap/starter-kit": "^2.1.13",
-    "@tiptap/suggestion": "^2.1.12",
+    "@tiptap/suggestion": "^2.1.13",
     "dayjs": "^1.11.10",
-    "framer-motion": "^10.16.5",
+    "framer-motion": "^10.16.12",
     "html-to-text": "^9.0.5",
     "idb-keyval": "^6.2.1",
     "light-bolt11-decoder": "^3.0.0",
     "lru-cache": "^10.1.0",
     "markdown-to-jsx": "^7.3.2",
-    "media-chrome": "^1.5.3",
+    "media-chrome": "^1.5.4",
     "minidenticons": "^4.2.0",
     "nanoid": "^5.0.3",
     "nostr-fetch": "^0.13.1",
@@ -77,34 +79,32 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
     "react-hotkeys-hook": "^4.4.1",
-    "react-router-dom": "^6.20.0",
+    "react-router-dom": "^6.20.1",
     "react-string-replace": "^1.1.1",
     "reactflow": "^11.10.1",
-    "sonner": "^1.2.3",
+    "sonner": "^1.2.4",
-    "tailwind-scrollbar": "^3.0.5",
     "tauri-controls": "github:reyamir/tauri-controls",
     "tippy.js": "^6.3.7",
-    "tiptap-markdown": "^0.8.4",
+    "tiptap-markdown": "^0.8.7",
     "virtua": "^0.16.7",
-    "zustand": "^4.4.6"
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/html-to-text": "^9.0.4",
-    "@types/node": "^20.10.0",
+    "@types/node": "^20.10.2",
-    "@types/react": "^18.2.38",
+    "@types/react": "^18.2.40",
     "@types/react-dom": "^18.2.17",
-    "@types/youtube-player": "^5.5.11",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
-    "@typescript-eslint/eslint-plugin": "^6.12.0",
+    "@typescript-eslint/parser": "^6.13.1",
-    "@typescript-eslint/parser": "^6.12.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.16",
     "clsx": "^2.0.0",
     "cross-env": "^7.0.3",
-    "csstype": "^3.1.2",
     "encoding": "^0.1.13",
-    "eslint": "^8.54.0",
+    "eslint": "^8.55.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
@@ -116,9 +116,11 @@
     "prettier-plugin-tailwindcss": "^0.5.7",
     "prop-types": "^15.8.1",
     "tailwind-merge": "^1.14.0",
+    "tailwind-scrollbar": "^3.0.5",
     "tailwindcss": "^3.3.5",
     "typescript": "^5.3.2",
     "vite": "^4.5.0",
+    "vite-plugin-top-level-await": "^1.3.1",
     "vite-tsconfig-paths": "^4.2.1"
   }
 }

src-tauri/Cargo.lock

@@ -253,7 +253,7 @@ dependencies = [
  "futures-lite 2.0.1",
  "parking",
  "polling 3.3.1",
- "rustix 0.38.25",
+ "rustix 0.38.26",
  "slab",
  "tracing",
  "windows-sys 0.52.0",
@@ -292,7 +292,7 @@ dependencies = [
  "cfg-if",
  "event-listener 3.1.0",
  "futures-lite 1.13.0",
- "rustix 0.38.25",
+ "rustix 0.38.26",
  "windows-sys 0.48.0",
 ]
 
@@ -319,7 +319,7 @@ dependencies = [
  "cfg-if",
  "futures-core",
  "futures-io",
- "rustix 0.38.25",
+ "rustix 0.38.26",
  "signal-hook-registry",
  "slab",
  "windows-sys 0.48.0",
@@ -382,11 +382,11 @@ checksum = "1505bd5d3d116872e7271a6d4e16d81d0c8570876c8de68093a09ac269d8aac0"
 
 [[package]]
 name = "atomic-write-file"
-version = "0.1.0"
+version = "0.1.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c232177ba50b16fe7a4588495bd474a62a9e45a8e4ca6fd7d0b7ac29d164631e"
+checksum = "edcdbedc2236483ab103a53415653d6b4442ea6141baf1ffa85df29635e88436"
 dependencies = [
- "nix 0.26.4",
+ "nix 0.27.1",
  "rand 0.8.5",
 ]
 
@@ -731,9 +731,9 @@ dependencies = [
 
 [[package]]
 name = "clap"
-version = "4.4.8"
+version = "4.4.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2275f18819641850fa26c89acc84d465c1bf91ce57bc2748b28c420473352f64"
+checksum = "41fffed7514f420abec6d183b1d3acfd9099c79c3a10a06ade4f8203f1411272"
 dependencies = [
  "clap_builder",
  "clap_derive",
@@ -741,9 +741,9 @@ dependencies = [
 
 [[package]]
 name = "clap_builder"
-version = "4.4.8"
+version = "4.4.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "07cdf1b148b25c1e1f7a42225e30a0d99a615cd4637eae7365548dd4529b95bc"
+checksum = "63361bae7eef3771745f02d8d892bec2fee5f6e34af316ba556e7f97a7069ff1"
 dependencies = [
  "anstream",
  "anstyle",
@@ -890,9 +890,9 @@ checksum = "6245d59a3e82a7fc217c5828a6692dbc6dfb63a0c8c90495621f7b9d79704a0e"
 
 [[package]]
 name = "core-foundation"
-version = "0.9.3"
+version = "0.9.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "194a7a9e6de53fa55116934067c844d9d749312f75c6f6d0980e8c252f8c2146"
+checksum = "91e195e091a93c46f7102ec7818a2aa394e1e1771c3ab4825963fa03e45afb8f"
 dependencies = [
  "core-foundation-sys",
  "libc",
@@ -900,9 +900,9 @@ dependencies = [
 
 [[package]]
 name = "core-foundation-sys"
-version = "0.8.4"
+version = "0.8.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e496a50fda8aacccc86d7529e2c1e0892dbd0f898a6b5645b5561b89c3210efa"
+checksum = "06ea2b9bc92be3c2baa9334a323ebca2d6f074ff852cd1d7b11064035cd3868f"
 
 [[package]]
 name = "core-graphics"
@@ -932,9 +932,9 @@ dependencies = [
 
 [[package]]
 name = "core-graphics-types"
-version = "0.1.2"
+version = "0.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2bb142d41022986c1d8ff29103a1411c8a3dfad3552f87a4f8dc50d61d4f4e33"
+checksum = "45390e6114f68f718cc7a830514a96f903cccd70d02a8f6d9f643ac4ba45afaf"
 dependencies = [
  "bitflags 1.3.2",
  "core-foundation",
@@ -1330,12 +1330,12 @@ checksum = "5443807d6dff69373d433ab9ef5378ad8df50ca6298caf15de6e52e24aaf54d5"
 
 [[package]]
 name = "errno"
-version = "0.3.7"
+version = "0.3.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f258a7194e7f7c2a7837a8913aeab7fd8c383457034fa20ce4dd3dcb813e8eb8"
+checksum = "a258e46cdc063eb8519c00b9fc845fc47bcfca4130e2f08e88665ceda8474245"
 dependencies = [
  "libc",
- "windows-sys 0.48.0",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -1419,7 +1419,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ef033ed5e9bad94e55838ca0ca906db0e043f517adda0c8b79c7a8c66c93c1b5"
 dependencies = [
  "cfg-if",
- "rustix 0.38.25",
+ "rustix 0.38.26",
  "windows-sys 0.48.0",
 ]
 
@@ -2088,9 +2088,9 @@ checksum = "8a9ee70c43aaf417c914396645a0fa852624801b24ebb7ae78fe8272889ac888"
 
 [[package]]
 name = "hashbrown"
-version = "0.14.2"
+version = "0.14.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f93e7192158dbcda357bdec5fb5788eebf8bbac027f3f33e719d29135ae84156"
+checksum = "290f1a1d9242c78d09ce40a5e87e7554ee637af1351968159f4952f028f75604"
 dependencies = [
  "ahash",
  "allocator-api2",
@@ -2102,7 +2102,7 @@ version = "0.8.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e8094feaf31ff591f651a2664fb9cfd92bba7a60ce3197265e9482ebe753c8f7"
 dependencies = [
- "hashbrown 0.14.2",
+ "hashbrown 0.14.3",
 ]
 
 [[package]]
@@ -2320,7 +2320,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d530e1a18b1cb4c484e6e34556a0d948706958449fca0cab753d649f2bce3d1f"
 dependencies = [
  "equivalent",
- "hashbrown 0.14.2",
+ "hashbrown 0.14.3",
  "serde",
 ]
 
@@ -2470,9 +2470,9 @@ checksum = "bc0000e42512c92e31c2252315bda326620a4e034105e900c98ec492fa077b3e"
 
 [[package]]
 name = "js-sys"
-version = "0.3.65"
+version = "0.3.66"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "54c0c35952f67de54bb584e9fd912b3023117cbafc0a77d8f3dee1fb5f572fe8"
+checksum = "cee9c64da59eae3b50095c18d3e74f8b73c0b86d2792824ff01bbce68ba229ca"
 dependencies = [
  "wasm-bindgen",
 ]
@@ -2643,9 +2643,9 @@ checksum = "ef53942eb7bf7ff43a617b3e2c1c4a5ecf5944a7c1bc12d7ee39bbb15e5c1519"
 
 [[package]]
 name = "linux-raw-sys"
-version = "0.4.11"
+version = "0.4.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "969488b55f8ac402214f3f5fd243ebb7206cf82de60d3172994707a4bcc2b829"
+checksum = "c4cd1a83af159aa67994778be9070f0ae1bd732942279cabb14f86f986a21456"
 
 [[package]]
 name = "lock_api"
@@ -2680,7 +2680,7 @@ dependencies = [
 
 [[package]]
 name = "lume"
-version = "2.1.5"
+version = "2.2.0"
 dependencies = [
  "keyring",
  "serde",
@@ -2961,7 +2961,17 @@ dependencies = [
  "cfg-if",
  "libc",
  "memoffset 0.7.1",
- "pin-utils",
+]
+
+[[package]]
+name = "nix"
+version = "0.27.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2eb04e9c688eff1c89d72b407f168cf79bb9e867a9d3323ed6c01519eb9cc053"
+dependencies = [
+ "bitflags 2.4.1",
+ "cfg-if",
+ "libc",
 ]
 
 [[package]]
@@ -3630,7 +3640,7 @@ dependencies = [
  "cfg-if",
  "concurrent-queue",
  "pin-project-lite",
- "rustix 0.38.25",
+ "rustix 0.38.26",
  "tracing",
  "windows-sys 0.52.0",
 ]
@@ -3704,9 +3714,9 @@ checksum = "dc375e1527247fe1a97d8b7156678dfe7c1af2fc075c9a4db3690ecd2a148068"
 
 [[package]]
 name = "proc-macro2"
-version = "1.0.69"
+version = "1.0.70"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "134c189feb4956b20f6f547d2cf727d4c0fe06722b20a0eec87ed445a97f92da"
+checksum = "39278fbbf5fb4f646ce651690877f89d1c5811a3d4acb27700c1cb3cdb78fd3b"
 dependencies = [
  "unicode-ident",
 ]
@@ -3993,9 +4003,9 @@ dependencies = [
 
 [[package]]
 name = "rsa"
-version = "0.9.4"
+version = "0.9.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6a3211b01eea83d80687da9eef70e39d65144a3894866a5153a2723e425a157f"
+checksum = "5d0e5124fcb30e76a7e79bfee683a2746db83784b86289f6251b54b7950a0dfc"
 dependencies = [
  "const-oid",
  "digest",
@@ -4042,15 +4052,15 @@ dependencies = [
 
 [[package]]
 name = "rustix"
-version = "0.38.25"
+version = "0.38.26"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dc99bc2d4f1fed22595588a013687477aedf3cdcfb26558c559edb67b4d9b22e"
+checksum = "9470c4bf8246c8daf25f9598dca807fb6510347b1e1cfa55749113850c79d88a"
 dependencies = [
  "bitflags 2.4.1",
  "errno",
  "libc",
- "linux-raw-sys 0.4.11",
+ "linux-raw-sys 0.4.12",
- "windows-sys 0.48.0",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -4470,9 +4480,9 @@ dependencies = [
 
 [[package]]
 name = "spki"
-version = "0.7.2"
+version = "0.7.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9d1e996ef02c474957d681f1b05213dfb0abab947b446a62d37770b23500184a"
+checksum = "d91ed6c858b01f942cd56b37a94b3e0a1798290327d1236e4d9cf4eaca44d29d"
 dependencies = [
  "base64ct",
  "der",
@@ -5056,7 +5066,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-autostart"
 version = "2.0.0-alpha.4"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#f49b391f10515db4465da32d839c5cc43ebdb3d3"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#e7c72c9816d14a218e702dd233a6cfec957c2ee6"
 dependencies = [
  "auto-launch",
  "log",
@@ -5069,7 +5079,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-cli"
 version = "2.0.0-alpha.4"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#f49b391f10515db4465da32d839c5cc43ebdb3d3"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#e7c72c9816d14a218e702dd233a6cfec957c2ee6"
 dependencies = [
  "clap",
  "log",
@@ -5082,7 +5092,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-clipboard-manager"
 version = "2.0.0-alpha.4"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#f49b391f10515db4465da32d839c5cc43ebdb3d3"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#e7c72c9816d14a218e702dd233a6cfec957c2ee6"
 dependencies = [
  "arboard",
  "log",
@@ -5096,7 +5106,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-dialog"
 version = "2.0.0-alpha.4"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#f49b391f10515db4465da32d839c5cc43ebdb3d3"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#e7c72c9816d14a218e702dd233a6cfec957c2ee6"
 dependencies = [
  "glib 0.16.9",
  "log",
@@ -5113,7 +5123,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-fs"
 version = "2.0.0-alpha.4"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#f49b391f10515db4465da32d839c5cc43ebdb3d3"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#e7c72c9816d14a218e702dd233a6cfec957c2ee6"
 dependencies = [
  "anyhow",
  "glob",
@@ -5126,7 +5136,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-http"
 version = "2.0.0-alpha.5"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#f49b391f10515db4465da32d839c5cc43ebdb3d3"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#e7c72c9816d14a218e702dd233a6cfec957c2ee6"
 dependencies = [
  "data-url",
  "glob",
@@ -5143,7 +5153,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-notification"
 version = "2.0.0-alpha.5"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#f49b391f10515db4465da32d839c5cc43ebdb3d3"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#e7c72c9816d14a218e702dd233a6cfec957c2ee6"
 dependencies = [
  "log",
  "notify-rust",
@@ -5161,7 +5171,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-os"
 version = "2.0.0-alpha.4"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#f49b391f10515db4465da32d839c5cc43ebdb3d3"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#e7c72c9816d14a218e702dd233a6cfec957c2ee6"
 dependencies = [
  "gethostname 0.4.3",
  "log",
@@ -5177,7 +5187,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-process"
 version = "2.0.0-alpha.4"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#f49b391f10515db4465da32d839c5cc43ebdb3d3"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#e7c72c9816d14a218e702dd233a6cfec957c2ee6"
 dependencies = [
  "tauri",
 ]
@@ -5185,7 +5195,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-shell"
 version = "2.0.0-alpha.4"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#f49b391f10515db4465da32d839c5cc43ebdb3d3"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#e7c72c9816d14a218e702dd233a6cfec957c2ee6"
 dependencies = [
  "encoding_rs",
  "log",
@@ -5202,7 +5212,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-sql"
 version = "2.0.0-alpha.4"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#f49b391f10515db4465da32d839c5cc43ebdb3d3"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#e7c72c9816d14a218e702dd233a6cfec957c2ee6"
 dependencies = [
  "futures-core",
  "log",
@@ -5218,7 +5228,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-store"
 version = "2.0.0-alpha.4"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#f49b391f10515db4465da32d839c5cc43ebdb3d3"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#e7c72c9816d14a218e702dd233a6cfec957c2ee6"
 dependencies = [
  "log",
  "serde",
@@ -5246,7 +5256,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-updater"
 version = "2.0.0-alpha.4"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#f49b391f10515db4465da32d839c5cc43ebdb3d3"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#e7c72c9816d14a218e702dd233a6cfec957c2ee6"
 dependencies = [
  "base64",
  "dirs-next",
@@ -5272,7 +5282,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-upload"
 version = "2.0.0-alpha.4"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#f49b391f10515db4465da32d839c5cc43ebdb3d3"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#e7c72c9816d14a218e702dd233a6cfec957c2ee6"
 dependencies = [
  "futures-util",
  "log",
@@ -5289,7 +5299,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-window-state"
 version = "2.0.0-alpha.4"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#f49b391f10515db4465da32d839c5cc43ebdb3d3"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v2#e7c72c9816d14a218e702dd233a6cfec957c2ee6"
 dependencies = [
  "bincode",
  "bitflags 2.4.1",
@@ -5397,7 +5407,7 @@ dependencies = [
  "cfg-if",
  "fastrand 2.0.1",
  "redox_syscall 0.4.1",
- "rustix 0.38.25",
+ "rustix 0.38.26",
  "windows-sys 0.48.0",
 ]
 
@@ -5926,9 +5936,9 @@ checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423"
 
 [[package]]
 name = "wasm-bindgen"
-version = "0.2.88"
+version = "0.2.89"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7daec296f25a1bae309c0cd5c29c4b260e510e6d813c286b19eaadf409d40fce"
+checksum = "0ed0d4f68a3015cc185aff4db9506a015f4b96f95303897bfa23f846db54064e"
 dependencies = [
  "cfg-if",
  "wasm-bindgen-macro",
@@ -5936,9 +5946,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-backend"
-version = "0.2.88"
+version = "0.2.89"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e397f4664c0e4e428e8313a469aaa58310d302159845980fd23b0f22a847f217"
+checksum = "1b56f625e64f3a1084ded111c4d5f477df9f8c92df113852fa5a374dbda78826"
 dependencies = [
  "bumpalo",
  "log",
@@ -5951,9 +5961,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-futures"
-version = "0.4.38"
+version = "0.4.39"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9afec9963e3d0994cac82455b2b3502b81a7f40f9a0d32181f7528d9f4b43e02"
+checksum = "ac36a15a220124ac510204aec1c3e5db8a22ab06fd6706d881dc6149f8ed9a12"
 dependencies = [
  "cfg-if",
  "js-sys",
@@ -5963,9 +5973,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro"
-version = "0.2.88"
+version = "0.2.89"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5961017b3b08ad5f3fe39f1e79877f8ee7c23c5e5fd5eb80de95abc41f1f16b2"
+checksum = "0162dbf37223cd2afce98f3d0785506dcb8d266223983e4b5b525859e6e182b2"
 dependencies = [
  "quote",
  "wasm-bindgen-macro-support",
@@ -5973,9 +5983,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro-support"
-version = "0.2.88"
+version = "0.2.89"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c5353b8dab669f5e10f5bd76df26a9360c748f054f862ff5f3f8aae0c7fb3907"
+checksum = "f0eb82fcb7930ae6219a7ecfd55b217f5f0893484b7a13022ebb2b2bf20b5283"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -5986,9 +5996,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-shared"
-version = "0.2.88"
+version = "0.2.89"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0d046c5d029ba91a1ed14da14dca44b68bf2f124cfbaf741c54151fdb3e0750b"
+checksum = "7ab9b36309365056cd639da3134bf87fa8f3d86008abf99e612384a6eecd459f"
 
 [[package]]
 name = "wasm-streams"
@@ -6005,9 +6015,9 @@ dependencies = [
 
 [[package]]
 name = "web-sys"
-version = "0.3.65"
+version = "0.3.66"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5db499c5f66323272151db0e666cd34f78617522fb0c1604d31a27c50c206a85"
+checksum = "50c24a44ec86bb68fbecd1b3efed7e85ea5621b39b35ef2766b66cd984f8010f"
 dependencies = [
  "js-sys",
  "wasm-bindgen",
@@ -6645,18 +6655,18 @@ dependencies = [
 
 [[package]]
 name = "zerocopy"
-version = "0.7.26"
+version = "0.7.28"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e97e415490559a91254a2979b4829267a57d2fcd741a98eee8b722fb57289aa0"
+checksum = "7d6f15f7ade05d2a4935e34a457b936c23dc70a05cc1d97133dc99e7a3fe0f0e"
 dependencies = [
  "zerocopy-derive",
 ]
 
 [[package]]
 name = "zerocopy-derive"
-version = "0.7.26"
+version = "0.7.28"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dd7e48ccf166952882ca8bd778a43502c64f33bf94c12ebe2a7f08e5a0f6689f"
+checksum = "dbbad221e3f78500350ecbd7dfa4e63ef945c05f4c61cb7f4d3f84cd0bba649b"
 dependencies = [
  "proc-macro2",
  "quote",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "lume"
-version = "2.1.5"
+version = "2.2.0"
 description = "the communication app"
 authors = ["Ren Amamiya"]
 license = "GPL-3.0"

src-tauri/migrations/20231130105202_clean_up_table.sql

@@ -0,0 +1,5 @@
+ALTER TABLE accounts DROP COLUMN follows;
+ALTER TABLE accounts DROP COLUMN circles;
+ALTER TABLE accounts DROP COLUMN last_login_at;
+DROP TABLE IF EXISTS events;
+DROP TABLE IF EXISTS relays;

src-tauri/src/main.rs

@@ -115,7 +115,6 @@ fn main() {
         .plugin(tauri_plugin_updater::Builder::new().build())?;
       Ok(())
     })
-    .plugin(ThemePlugin::init(ctx.config_mut()))
     .plugin(
       tauri_plugin_sql::Builder::default()
         .add_migrations(
@@ -133,10 +132,17 @@ fn main() {
               sql: include_str!("../migrations/20231028083224_add_ndk_cache_table.sql"),
               kind: MigrationKind::Up,
             },
+            Migration {
+              version: 20231130105202,
+              description: "clean up table",
+              sql: include_str!("../migrations/20231130105202_clean_up_table.sql"),
+              kind: MigrationKind::Up,
+            },
           ],
         )
         .build(),
     )
+    .plugin(ThemePlugin::init(ctx.config_mut()))
     .plugin(tauri_plugin_clipboard_manager::init())
     .plugin(tauri_plugin_dialog::init())
     .plugin(tauri_plugin_fs::init())

src-tauri/tauri.conf.json

@@ -9,7 +9,7 @@
   },
   "package": {
     "productName": "Lume",
-    "version": "2.1.5"
+    "version": "2.2.0"
   },
   "plugins": {
     "fs": {

src/app.css

@@ -1,4 +1,4 @@
-@import 'reactflow/dist/style.css';
+/* @import 'reactflow/dist/style.css'; */
 
 @tailwind base;
 @tailwind components;
@@ -50,19 +50,15 @@ input::-ms-clear {
   --video-brand: var(--brand-color);
   --video-focus-ring-color: var(--focus-color);
   --video-border-radius: 8px;
-  width: 100%;
+  @apply w-full;
 }
 
 .player[data-view-type='video'] {
-  aspect-ratio: 16 /9;
+  @apply aspect-video;
 }
 
 .ProseMirror p.is-empty::before {
-  @apply text-neutral-600 dark:text-neutral-400;
+  @apply text-neutral-600 dark:text-neutral-400 float-left h-0 pointer-events-none content-[attr(data-placeholder)];
-  content: attr(data-placeholder);
-  float: left;
-  height: 0;
-  pointer-events: none;
 }
 
 .ProseMirror img.ProseMirror-selectednode {

src/app.tsx

@@ -3,7 +3,6 @@ import { fetch } from '@tauri-apps/plugin-http';
 import { RouterProvider, createBrowserRouter, defer, redirect } from 'react-router-dom';
 import { ReactFlowProvider } from 'reactflow';
 
-import { OnboardingScreen } from '@app/auth/onboarding';
 import { ChatsScreen } from '@app/chats';
 import { ErrorScreen } from '@app/error';
 import { ExploreScreen } from '@app/explore';
@@ -197,37 +196,52 @@ export default function App() {
         },
         {
           path: 'onboarding',
-          element: <OnboardingScreen />,
+          async lazy() {
-          errorElement: <ErrorScreen />,
+            const { OnboardingScreen } = await import('@app/auth/onboarding');
-          children: [
+            return { Component: OnboardingScreen };
-            {
+          },
-              path: '',
+        },
-              async lazy() {
+        {
-                const { OnboardingListScreen } = await import(
+          path: 'follow',
-                  '@app/auth/onboarding/list'
+          async lazy() {
-                );
+            const { FollowScreen } = await import('@app/auth/follow');
-                return { Component: OnboardingListScreen };
+            return { Component: FollowScreen };
-              },
+          },
-            },
+        },
-            {
+        {
-              path: 'enrich',
+          path: 'finish',
-              async lazy() {
+          async lazy() {
-                const { OnboardEnrichScreen } = await import(
+            const { FinishScreen } = await import('@app/auth/finish');
-                  '@app/auth/onboarding/enrich'
+            return { Component: FinishScreen };
-                );
+          },
-                return { Component: OnboardEnrichScreen };
+        },
-              },
+        {
-            },
+          path: 'tutorials/note',
-            {
+          async lazy() {
-              path: 'hashtag',
+            const { TutorialNoteScreen } = await import('@app/auth/tutorials/note');
-              async lazy() {
+            return { Component: TutorialNoteScreen };
-                const { OnboardHashtagScreen } = await import(
+          },
-                  '@app/auth/onboarding/hashtag'
+        },
-                );
+        {
-                return { Component: OnboardHashtagScreen };
+          path: 'tutorials/widget',
-              },
+          async lazy() {
-            },
+            const { TutorialWidgetScreen } = await import('@app/auth/tutorials/widget');
-          ],
+            return { Component: TutorialWidgetScreen };
+          },
+        },
+        {
+          path: 'tutorials/posting',
+          async lazy() {
+            const { TutorialPostingScreen } = await import('@app/auth/tutorials/posting');
+            return { Component: TutorialPostingScreen };
+          },
+        },
+        {
+          path: 'tutorials/finish',
+          async lazy() {
+            const { TutorialFinishScreen } = await import('@app/auth/tutorials/finish');
+            return { Component: TutorialFinishScreen };
+          },
         },
       ],
     },

src/app/auth/components/features/allowNotification.tsx

@@ -1,50 +0,0 @@
-import { isPermissionGranted, requestPermission } from '@tauri-apps/plugin-notification';
-
-import { CheckCircleIcon } from '@shared/icons';
-
-import { useOnboarding } from '@stores/onboarding';
-
-export function AllowNotification() {
-  const [notification, setNotification] = useOnboarding((state) => [
-    state.notification,
-    state.toggleNotification,
-  ]);
-
-  const allow = async () => {
-    let permissionGranted = await isPermissionGranted();
-    if (!permissionGranted) {
-      const permission = await requestPermission();
-      permissionGranted = permission === 'granted';
-    }
-    if (permissionGranted) {
-      setNotification();
-    }
-  };
-
-  return (
-    <div className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
-      <div className="flex items-start justify-between gap-2">
-        <div>
-          <h5 className="font-semibold">Allow notification</h5>
-          <p className="text-sm">
-            By allowing Lume to send notifications in your OS settings, you will receive
-            notification messages when someone interacts with you or your content.
-          </p>
-        </div>
-        {notification ? (
-          <div className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-teal-500 text-white">
-            <CheckCircleIcon className="h-4 w-4" />
-          </div>
-        ) : (
-          <button
-            type="button"
-            onClick={allow}
-            className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-neutral-200 font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
-          >
-            Allow
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}

src/app/auth/components/features/enableCircle.tsx

@@ -1,100 +0,0 @@
-import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
-import { LRUCache } from 'lru-cache';
-import { useState } from 'react';
-import { toast } from 'sonner';
-
-import { useNDK } from '@libs/ndk/provider';
-import { useStorage } from '@libs/storage/provider';
-
-import { CheckCircleIcon, LoaderIcon } from '@shared/icons';
-
-import { useOnboarding } from '@stores/onboarding';
-
-export function Circle() {
-  const { db } = useStorage();
-  const { ndk } = useNDK();
-
-  const [circle, setCircle] = useOnboarding((state) => [
-    state.circle,
-    state.toggleCircle,
-  ]);
-  const [loading, setLoading] = useState(false);
-
-  const enableLinks = async () => {
-    setLoading(true);
-
-    const users = ndk.getUser({ pubkey: db.account.pubkey });
-    const follows = await users.follows();
-
-    if (follows.size === 0) {
-      setLoading(false);
-      return toast('You need to follow at least 1 account');
-    }
-
-    const lru = new LRUCache<string, string, void>({ max: 300 });
-    const followsAsArr = [];
-
-    // add user's follows to lru
-    follows.forEach((user) => {
-      lru.set(user.pubkey, user.pubkey);
-      followsAsArr.push(user.pubkey);
-    });
-
-    // get follows from follows
-    const events = await ndk.fetchEvents({
-      kinds: [NDKKind.Contacts],
-      authors: followsAsArr,
-      limit: 300,
-    });
-
-    events.forEach((event: NDKEvent) => {
-      event.tags.forEach((tag) => {
-        if (tag[0] === 'p') lru.set(tag[1], tag[1]);
-      });
-    });
-
-    // get lru values
-    const circleList = [...lru.values()] as string[];
-
-    // update db
-    await db.updateAccount('follows', JSON.stringify(followsAsArr));
-    await db.updateAccount('circles', JSON.stringify(circleList));
-
-    db.account.follows = followsAsArr;
-    db.account.circles = circleList;
-
-    // clear lru
-    lru.clear();
-
-    // done
-    await db.createSetting('circles', '1');
-    setCircle();
-  };
-
-  return (
-    <div className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
-      <div className="flex items-start justify-between gap-2">
-        <div>
-          <h5 className="font-semibold">Enable Circle</h5>
-          <p className="text-sm">
-            Beside newsfeed from your follows, you will see more content from all people
-            that followed by your follows.
-          </p>
-        </div>
-        {circle ? (
-          <div className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-teal-500 text-white">
-            <CheckCircleIcon className="h-4 w-4" />
-          </div>
-        ) : (
-          <button
-            type="button"
-            onClick={enableLinks}
-            className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-neutral-200 font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
-          >
-            {loading ? <LoaderIcon className="h-4 w-4 animate-spin" /> : 'Enable'}
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}

src/app/auth/components/features/enableOutbox.tsx

@@ -1,47 +0,0 @@
-import { useStorage } from '@libs/storage/provider';
-
-import { CheckCircleIcon } from '@shared/icons';
-
-import { useOnboarding } from '@stores/onboarding';
-
-export function OutboxModel() {
-  const { db } = useStorage();
-
-  const [outbox, setOutbox] = useOnboarding((state) => [
-    state.outbox,
-    state.toggleOutbox,
-  ]);
-
-  const enableOutbox = async () => {
-    await db.createSetting('outbox', '1');
-    setOutbox();
-  };
-
-  return (
-    <div className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
-      <div className="flex items-start justify-between gap-2">
-        <div>
-          <h5 className="font-semibold">Enable Outbox</h5>
-          <p className="text-sm">
-            When you request information about a user, Lume will automatically query the
-            user&apos;s outbox relays and subsequent queries will favour using those
-            relays for queries with that user&apos;s pubkey.
-          </p>
-        </div>
-        {outbox ? (
-          <div className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-teal-500 text-white">
-            <CheckCircleIcon className="h-4 w-4" />
-          </div>
-        ) : (
-          <button
-            type="button"
-            onClick={enableOutbox}
-            className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-neutral-200 font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
-          >
-            Enable
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}

src/app/auth/components/features/favoriteHashtag.tsx

@@ -1,35 +0,0 @@
-import { Link } from 'react-router-dom';
-
-import { CheckCircleIcon } from '@shared/icons';
-
-import { useOnboarding } from '@stores/onboarding';
-
-export function FavoriteHashtag() {
-  const hashtag = useOnboarding((state) => state.hashtag);
-
-  return (
-    <div className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
-      <div className="flex items-start justify-between">
-        <div>
-          <h5 className="font-semibold">Favorite topic</h5>
-          <p className="text-sm">
-            By adding favorite topic, Lume will display all contents related to this topic
-            for you
-          </p>
-        </div>
-        {hashtag ? (
-          <div className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-teal-500 text-white">
-            <CheckCircleIcon className="h-4 w-4" />
-          </div>
-        ) : (
-          <Link
-            to="/auth/onboarding/hashtag"
-            className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-neutral-200 font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
-          >
-            Add
-          </Link>
-        )}
-      </div>
-    </div>
-  );
-}

src/app/auth/components/features/followList.tsx

@@ -1,48 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-
-import { useNDK } from '@libs/ndk/provider';
-import { useStorage } from '@libs/storage/provider';
-
-import { LoaderIcon } from '@shared/icons';
-import { User } from '@shared/user';
-
-export function FollowList() {
-  const { db } = useStorage();
-  const { ndk } = useNDK();
-  const { status, data } = useQuery({
-    queryKey: ['follows'],
-    queryFn: async () => {
-      const user = ndk.getUser({ pubkey: db.account.pubkey });
-      const follows = [...(await user.follows())].map((user) => user.pubkey);
-
-      // update db
-      await db.updateAccount('follows', JSON.stringify(follows));
-      db.account.follows = follows;
-
-      return follows;
-    },
-    refetchOnWindowFocus: false,
-  });
-
-  return (
-    <div className="relative rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
-      <h5 className="font-semibold">Your follows</h5>
-      <div className="mt-2 flex w-full items-center justify-center">
-        {status === 'pending' ? (
-          <LoaderIcon className="h-4 w-4 animate-spin text-neutral-900 dark:text-neutral-100" />
-        ) : (
-          <div className="isolate flex -space-x-2">
-            {data.slice(0, 16).map((item) => (
-              <User key={item} pubkey={item} variant="stacked" />
-            ))}
-            {data.length > 16 ? (
-              <div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-900 ring-1 ring-neutral-200 dark:bg-neutral-800 dark:text-neutral-100 dark:ring-neutral-800">
-                <span className="text-xs font-medium">+{data.length}</span>
-              </div>
-            ) : null}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

src/app/auth/components/features/suggestFollow.tsx

@@ -1,35 +0,0 @@
-import { Link } from 'react-router-dom';
-
-import { CheckCircleIcon } from '@shared/icons';
-
-import { useOnboarding } from '@stores/onboarding';
-
-export function SuggestFollow() {
-  const enrich = useOnboarding((state) => state.enrich);
-
-  return (
-    <div className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
-      <div className="flex items-start justify-between">
-        <div>
-          <h5 className="font-semibold">Enrich your network</h5>
-          <p className="text-sm">
-            Follow more people to stay up to date with everything happening around the
-            world.
-          </p>
-        </div>
-        {enrich ? (
-          <div className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-teal-500 text-white">
-            <CheckCircleIcon className="h-4 w-4" />
-          </div>
-        ) : (
-          <Link
-            to="/auth/onboarding/enrich"
-            className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-neutral-200 font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
-          >
-            Check
-          </Link>
-        )}
-      </div>
-    </div>
-  );
-}

src/app/auth/create.tsx

@@ -1,7 +1,7 @@
 import { NDKEvent, NDKKind, NDKPrivateKeySigner } from '@nostr-dev-kit/ndk';
 import { downloadDir } from '@tauri-apps/api/path';
 import { writeText } from '@tauri-apps/plugin-clipboard-manager';
-import { message, save } from '@tauri-apps/plugin-dialog';
+import { save } from '@tauri-apps/plugin-dialog';
 import { writeTextFile } from '@tauri-apps/plugin-fs';
 import { motion } from 'framer-motion';
 import { minidenticon } from 'minidenticons';
@@ -15,7 +15,7 @@ import { useNDK } from '@libs/ndk/provider';
 import { useStorage } from '@libs/storage/provider';
 
 import { AvatarUploader } from '@shared/avatarUploader';
-import { ArrowLeftIcon, LoaderIcon } from '@shared/icons';
+import { ArrowLeftIcon, InfoIcon, LoaderIcon } from '@shared/icons';
 import { User } from '@shared/user';
 
 export function CreateAccountScreen() {
@@ -67,7 +67,6 @@ export function CreateAccountScreen() {
       const event = new NDKEvent(ndk);
       event.content = JSON.stringify(profile);
       event.kind = NDKKind.Metadata;
-      event.created_at = Math.floor(Date.now() / 1000);
       event.pubkey = userPubkey;
       event.tags = [];
 
@@ -76,6 +75,16 @@ export function CreateAccountScreen() {
       if (publish) {
         await db.createAccount(userNpub, userPubkey);
         await db.secureSave(userPubkey, userPrivkey);
+
+        const relayListEvent = new NDKEvent(ndk);
+        relayListEvent.kind = NDKKind.RelayList;
+        relayListEvent.tags = [...ndk.pool.relays.values()].map((item) => [
+          'r',
+          item.url,
+        ]);
+
+        await relayListEvent.publish();
+
         setKeys({
           npub: userNpub,
           nsec: userNsec,
@@ -88,7 +97,7 @@ export function CreateAccountScreen() {
         setLoading(false);
       }
     } catch (e) {
-      return toast(e);
+      return toast.error(e);
     }
   };
 
@@ -113,7 +122,7 @@ export function CreateAccountScreen() {
         setDownloaded(true);
       } // else { user cancel action }
     } catch (e) {
-      await message(e, { title: 'Cannot download account keys', type: 'error' });
+      return toast.error(e);
     }
   };
 
@@ -123,33 +132,33 @@ export function CreateAccountScreen() {
         {!keys ? (
           <button
             onClick={() => navigate(-1)}
-            className="inline-flex items-center gap-2 text-sm font-medium"
+            className="group inline-flex items-center gap-2 text-sm font-medium"
           >
-            <div className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-neutral-200 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-200">
+            <div className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-neutral-200 text-neutral-800 group-hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-200 dark:group-hover:bg-neutral-700">
-              <ArrowLeftIcon className="h-5 w-5" />
+              <ArrowLeftIcon className="h-4 w-4" />
             </div>
             Back
           </button>
         ) : null}
       </div>
       <div className="mx-auto flex w-full max-w-md flex-col gap-10">
-        <h1 className="text-center text-2xl font-semibold text-neutral-900 dark:text-neutral-100">
+        <h1 className="text-center text-2xl font-semibold">
           Let&apos;s set up your account.
         </h1>
         <div className="flex flex-col gap-3">
           {!keys ? (
-            <div className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
+            <div className="rounded-xl bg-neutral-50 p-3 dark:bg-neutral-950">
               <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col">
                 <input type={'hidden'} {...register('picture')} value={picture} />
                 <div className="flex flex-col gap-4">
                   <div className="flex flex-col gap-1">
                     <span className="font-semibold">Avatar</span>
-                    <div className="relative flex h-36 w-full items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-800">
+                    <div className="flex h-36 w-full flex-col items-center justify-center gap-3 rounded-lg bg-neutral-100 dark:bg-neutral-900">
                       {picture.length > 0 ? (
                         <img
                           src={picture}
                           alt="user's avatar"
-                          className="h-14 w-14 rounded-xl"
+                          className="h-14 w-14 rounded-xl object-cover"
                         />
                       ) : (
                         <img
@@ -158,9 +167,7 @@ export function CreateAccountScreen() {
                           className="h-14 w-14 rounded-xl bg-black dark:bg-white"
                         />
                       )}
-                      <div className="absolute bottom-2 right-2">
+                      <AvatarUploader setPicture={setPicture} />
-                        <AvatarUploader setPicture={setPicture} />
-                      </div>
                     </div>
                   </div>
                   <div className="flex flex-col gap-1">
@@ -174,7 +181,7 @@ export function CreateAccountScreen() {
                         minLength: 1,
                       })}
                       spellCheck={false}
-                      className="h-11 rounded-lg bg-neutral-200 px-3 placeholder:text-neutral-500 dark:bg-neutral-800 dark:placeholder:text-neutral-400"
+                      className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
                     />
                   </div>
                   <div className="flex flex-col gap-1">
@@ -184,20 +191,29 @@ export function CreateAccountScreen() {
                     <textarea
                       {...register('about')}
                       spellCheck={false}
-                      className="relative h-20 w-full resize-none rounded-lg bg-neutral-200 px-3 py-2 !outline-none placeholder:text-neutral-500 dark:bg-neutral-800 dark:placeholder:text-neutral-400"
+                      className="relative h-24 w-full resize-none rounded-lg border-transparent bg-neutral-100 px-3 py-2 !outline-none placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
                     />
                   </div>
-                  <button
+                  <div className="flex flex-col gap-3">
-                    type="submit"
+                    <div className="flex items-center gap-2 rounded-lg bg-blue-100 p-3 text-sm text-blue-800 dark:bg-blue-900 dark:text-blue-200">
-                    disabled={!isDirty || !isValid}
+                      <InfoIcon className="h-8 w-8" />
-                    className="inline-flex h-9 w-full shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
+                      <p>
-                  >
+                        There are many more settings you can configure from the
-                    {loading ? (
+                        &quot;Settings&quot; screen. Be sure to visit it later.
-                      <LoaderIcon className="h-5 w-4 animate-spin" />
+                      </p>
-                    ) : (
+                    </div>
-                      'Create and Continue'
+                    <button
-                    )}
+                      type="submit"
-                  </button>
+                      disabled={!isDirty || !isValid}
+                      className="inline-flex h-11 w-full shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
+                    >
+                      {loading ? (
+                        <LoaderIcon className="h-4 w-4 animate-spin" />
+                      ) : (
+                        'Create and Continue'
+                      )}
+                    </button>
+                  </div>
                 </div>
               </form>
             </div>
@@ -209,7 +225,7 @@ export function CreateAccountScreen() {
                   opacity: 1,
                   y: 0,
                 }}
-                className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200"
+                className="rounded-xl bg-neutral-50 p-3 dark:bg-neutral-950"
               >
                 <User pubkey={keys.pubkey} variant="simple" />
               </motion.div>
@@ -219,7 +235,7 @@ export function CreateAccountScreen() {
                   opacity: 1,
                   y: 0,
                 }}
-                className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200"
+                className="rounded-xl bg-neutral-50 p-3 dark:bg-neutral-950"
               >
                 <div className="flex flex-col gap-1.5">
                   <h5 className="font-semibold">Backup account</h5>
@@ -227,7 +243,7 @@ export function CreateAccountScreen() {
                     <p className="mb-2 select-text text-sm text-neutral-800 dark:text-neutral-200">
                       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.{' '}
-                      <span className="text-red-600">
+                      <span className="text-red-500">
                         There is no way to reset your private key.
                       </span>
                     </p>
@@ -247,13 +263,13 @@ export function CreateAccountScreen() {
                           value={
                             keys.nsec.substring(0, 10) + '**************************'
                           }
-                          className="h-11 w-full rounded-lg bg-neutral-200 px-3 placeholder:text-neutral-500 dark:bg-neutral-800 dark:placeholder:text-neutral-400"
+                          className="h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
                         />
                         <div className="absolute right-0 top-0 inline-flex h-11 items-center justify-center px-2">
                           <button
                             type="button"
                             onClick={copyNsec}
-                            className="rounded-md bg-neutral-300 px-2 py-1 text-sm font-medium hover:bg-neutral-400 dark:bg-neutral-700 dark:hover:bg-neutral-600"
+                            className="rounded-md bg-neutral-200 px-2 py-1 text-sm font-medium hover:bg-neutral-400 dark:bg-neutral-700 dark:hover:bg-neutral-600"
                           >
                             Copy
                           </button>
@@ -267,7 +283,7 @@ export function CreateAccountScreen() {
                       <input
                         readOnly
                         value={keys.npub}
-                        className="h-11 rounded-lg bg-neutral-200 px-3 placeholder:text-neutral-500 dark:bg-neutral-800 dark:placeholder:text-neutral-400"
+                        className="h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
                       />
                     </div>
                   </div>
@@ -275,7 +291,7 @@ export function CreateAccountScreen() {
                     <button
                       type="button"
                       onClick={() => download()}
-                      className="inline-flex h-9 w-full shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600"
+                      className="mt-1 inline-flex h-11 w-full shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600"
                     >
                       Download account keys
                     </button>
@@ -291,9 +307,9 @@ export function CreateAccountScreen() {
                 opacity: 1,
                 y: 0,
               }}
-              className="inline-flex h-9 w-full shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600"
+              className="inline-flex h-11 w-full shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600"
               type="button"
-              onClick={() => navigate('/auth/onboarding', { state: { newuser: true } })}
+              onClick={() => navigate('/auth/onboarding')}
             >
               Finish
             </motion.button>

src/app/auth/finish.tsx

@@ -0,0 +1,34 @@
+import { Link } from 'react-router-dom';
+
+export function FinishScreen() {
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="mx-auto flex w-full max-w-md flex-col gap-10">
+        <div className="text-center">
+          <img src="/icon.png" alt="Lume's logo" className="mx-auto mb-1 h-auto w-16" />
+          <h1 className="text-2xl font-light">
+            Yo, you&apos;re ready to use <span className="font-bold">Lume</span>
+          </h1>
+        </div>
+        <div className="flex flex-col gap-2">
+          <Link
+            to="/auth/tutorials/note"
+            className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
+          >
+            Start tutorial
+          </Link>
+          <Link
+            to="/"
+            className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-neutral-100 font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+          >
+            Skip
+          </Link>
+          <p className="text-center text-sm font-medium text-neutral-500 dark:text-neutral-600">
+            You need to restart app to make changes in previous step take effect or you
+            can continue with Lume default settings
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/auth/follow.tsx

@@ -0,0 +1,276 @@
+import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import * as Accordion from '@radix-ui/react-accordion';
+import { useQuery } from '@tanstack/react-query';
+import { nip19 } from 'nostr-tools';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+import { twMerge } from 'tailwind-merge';
+
+import { useNDK } from '@libs/ndk/provider';
+import { useStorage } from '@libs/storage/provider';
+
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  CancelIcon,
+  ChevronDownIcon,
+  LoaderIcon,
+  PlusIcon,
+} from '@shared/icons';
+import { User } from '@shared/user';
+
+const POPULAR_USERS = [
+  'npub180cvv07tjdrrgpa0j7j7tmnyl2yr6yr7l8j4s3evf6u64th6gkwsyjh6w6',
+  'npub1sg6plzptd64u62a878hep2kev88swjh3tw00gjsfl8f237lmu63q0uf63m',
+  'npub1xtscya34g58tk0z605fvr788k263gsu6cy9x0mhnm87echrgufzsevkk5s',
+  'npub1gcxzte5zlkncx26j68ez60fzkvtkm9e0vrwdcvsjakxf9mu9qewqlfnj5z',
+  'npub1az9xj85cmxv8e9j9y80lvqp97crsqdu2fpu3srwthd99qfu9qsgstam8y8',
+  'npub1a2cww4kn9wqte4ry70vyfwqyqvpswksna27rtxd8vty6c74era8sdcw83a',
+  'npub168ghgug469n4r2tuyw05dmqhqv5jcwm7nxytn67afmz8qkc4a4zqsu2dlc',
+  'npub133vj8ycevdle0cq8mtgddq0xtn34kxkwxvak983dx0u5vhqnycyqj6tcza',
+  'npub18ams6ewn5aj2n3wt2qawzglx9mr4nzksxhvrdc4gzrecw7n5tvjqctp424',
+  'npub1r0rs5q2gk0e3dk3nlc7gnu378ec6cnlenqp8a3cjhyzu6f8k5sgs4sq9ac',
+  'npub1prya33fnqerq0fljwjtp77ehtu7jlsjt5ydhwveuwmqdsdm6k8esk42xcv',
+  'npub19mduaf5569jx9xz555jcx3v06mvktvtpu0zgk47n4lcpjsz43zzqhj6vzk',
+];
+const LUME_USERS = ['npub1zfss807aer0j26mwp2la0ume0jqde3823rmu97ra6sgyyg956e0s6xw445'];
+
+export function FollowScreen() {
+  const { ndk } = useNDK();
+  const { db } = useStorage();
+  const { status, data } = useQuery({
+    queryKey: ['trending-profiles-widget'],
+    queryFn: 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<string[]>([]);
+
+  const navigate = useNavigate();
+
+  // 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);
+      if (!follows.length) return navigate('/auth/finish');
+
+      const event = new NDKEvent(ndk);
+      event.kind = NDKKind.Contacts;
+      event.tags = follows.map((item) => {
+        if (item.startsWith('npub')) return ['p', nip19.decode(item).data as string];
+        return ['p', item];
+      });
+
+      const publish = await event.publish();
+      if (publish) {
+        db.account.contacts = follows.map((item) => {
+          if (item.startsWith('npub')) return nip19.decode(item).data as string;
+          return item;
+        });
+
+        return navigate('/auth/finish');
+      }
+    } catch (e) {
+      setLoading(false);
+      toast.error(e);
+    }
+  };
+
+  return (
+    <div className="relative flex h-full w-full items-center justify-center">
+      <div className="mx-auto flex w-full max-w-md flex-col gap-10">
+        <div className="text-center">
+          <h1 className="text-2xl font-semibold">Dive into the nostrverse</h1>
+          <h2 className="text-neutral-700 dark:text-neutral-300">
+            Try following some users that interest you
+            <br />
+            to build up your timeline.
+          </h2>
+        </div>
+        <Accordion.Root type="single" defaultValue="recommended" collapsible>
+          <Accordion.Item value="recommended" className="mb-3 overflow-hidden rounded-xl">
+            <Accordion.Trigger className="flex h-12 w-full items-center justify-between rounded-t-xl bg-neutral-100 px-3 font-medium dark:bg-neutral-900">
+              Popular users
+              <ChevronDownIcon className="h-4 w-4" />
+            </Accordion.Trigger>
+            <Accordion.Content>
+              <div className="flex h-[420px] w-full flex-col gap-3 overflow-y-auto rounded-b-xl bg-neutral-50 p-3 dark:bg-neutral-950">
+                {POPULAR_USERS.map((pubkey) => (
+                  <div
+                    key={pubkey}
+                    className="flex h-max w-full shrink-0 flex-col overflow-hidden rounded-lg border border-neutral-100 bg-white dark:border-neutral-900 dark:bg-black"
+                  >
+                    <div className="p-3">
+                      <User pubkey={pubkey} variant="large" />
+                    </div>
+                    <div className="border-t border-neutral-100 px-3 py-4 dark:border-neutral-900">
+                      <button
+                        type="button"
+                        onClick={() => toggleFollow(pubkey)}
+                        className={twMerge(
+                          'inline-flex h-9 w-full items-center justify-center gap-1 rounded-lg font-medium text-white',
+                          follows.includes(pubkey)
+                            ? 'bg-red-500 hover:bg-red-600'
+                            : 'bg-blue-500 hover:bg-blue-600'
+                        )}
+                      >
+                        {follows.includes(pubkey) ? (
+                          <>
+                            <CancelIcon className="h-4 w-4" />
+                            Unfollow
+                          </>
+                        ) : (
+                          <>
+                            <PlusIcon className="h-4 w-4" />
+                            Follow
+                          </>
+                        )}
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </Accordion.Content>
+          </Accordion.Item>
+          <Accordion.Item value="trending" className="mb-3 overflow-hidden rounded-xl">
+            <Accordion.Trigger className="flex h-12 w-full items-center justify-between rounded-t-xl bg-neutral-100 px-3 font-medium dark:bg-neutral-900">
+              Trending users
+              <ChevronDownIcon className="h-4 w-4" />
+            </Accordion.Trigger>
+            <Accordion.Content>
+              <div className="flex h-[420px] w-full flex-col gap-3 overflow-y-auto rounded-b-xl bg-neutral-50 p-3 dark:bg-neutral-950">
+                {status === 'pending' ? (
+                  <div className="flex h-full w-full items-center justify-center">
+                    <LoaderIcon className="h-4 w-4 animate-spin" />
+                  </div>
+                ) : (
+                  data?.profiles.map(
+                    (item: { pubkey: string; profile: { content: string } }) => (
+                      <div
+                        key={item.pubkey}
+                        className="flex h-max w-full shrink-0 flex-col overflow-hidden rounded-lg border border-neutral-100 bg-white dark:border-neutral-900 dark:bg-black"
+                      >
+                        <div className="p-3">
+                          <User
+                            pubkey={item.pubkey}
+                            variant="large"
+                            embedProfile={item.profile?.content}
+                          />
+                        </div>
+                        <div className="border-t border-neutral-100 px-3 py-4 dark:border-neutral-900">
+                          <button
+                            type="button"
+                            onClick={() => toggleFollow(item.pubkey)}
+                            className={twMerge(
+                              'inline-flex h-9 w-full items-center justify-center gap-1 rounded-lg font-medium text-white',
+                              follows.includes(item.pubkey)
+                                ? 'bg-red-500 hover:bg-red-600'
+                                : 'bg-blue-500 hover:bg-blue-600'
+                            )}
+                          >
+                            {follows.includes(item.pubkey) ? (
+                              <>
+                                <CancelIcon className="h-4 w-4" />
+                                Unfollow
+                              </>
+                            ) : (
+                              <>
+                                <PlusIcon className="h-4 w-4" />
+                                Follow
+                              </>
+                            )}
+                          </button>
+                        </div>
+                      </div>
+                    )
+                  )
+                )}
+              </div>
+            </Accordion.Content>
+          </Accordion.Item>
+          <Accordion.Item value="lume" className="mb-3 overflow-hidden rounded-xl">
+            <Accordion.Trigger className="flex h-12 w-full items-center justify-between rounded-t-xl bg-neutral-100 px-3 font-medium dark:bg-neutral-900">
+              Lume team
+              <ChevronDownIcon className="h-4 w-4" />
+            </Accordion.Trigger>
+            <Accordion.Content>
+              <div className="flex h-[420px] w-full flex-col gap-3 overflow-y-auto rounded-b-xl bg-neutral-50 p-3 dark:bg-neutral-950">
+                {LUME_USERS.map((pubkey) => (
+                  <div
+                    key={pubkey}
+                    className="flex h-max w-full shrink-0 flex-col overflow-hidden rounded-lg border border-neutral-100 bg-white dark:border-neutral-900 dark:bg-black"
+                  >
+                    <div className="p-3">
+                      <User pubkey={pubkey} variant="large" />
+                    </div>
+                    <div className="border-t border-neutral-100 px-3 py-4 dark:border-neutral-900">
+                      <button
+                        type="button"
+                        onClick={() => toggleFollow(pubkey)}
+                        className={twMerge(
+                          'inline-flex h-9 w-full items-center justify-center gap-1 rounded-lg font-medium text-white',
+                          follows.includes(pubkey)
+                            ? 'bg-red-500 hover:bg-red-600'
+                            : 'bg-blue-500 hover:bg-blue-600'
+                        )}
+                      >
+                        {follows.includes(pubkey) ? (
+                          <>
+                            <CancelIcon className="h-4 w-4" />
+                            Unfollow
+                          </>
+                        ) : (
+                          <>
+                            <PlusIcon className="h-4 w-4" />
+                            Follow
+                          </>
+                        )}
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </Accordion.Content>
+          </Accordion.Item>
+        </Accordion.Root>
+      </div>
+      <div className="absolute bottom-3 right-3 flex w-full items-center justify-end gap-2">
+        <button
+          type="button"
+          onClick={() => navigate(-1)}
+          className="inline-flex h-11 w-max items-center justify-center gap-2 rounded-lg bg-neutral-100 px-3 font-semibold hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-blue-800"
+        >
+          <ArrowLeftIcon className="h-4 w-4" />
+          Back
+        </button>
+        <button
+          type="button"
+          onClick={submit}
+          disabled={loading}
+          className="inline-flex h-11 w-max items-center justify-center gap-2 rounded-lg bg-blue-500 px-3 font-semibold text-white hover:bg-blue-600"
+        >
+          Continue
+          {loading ? (
+            <LoaderIcon className="h-4 w-4 animate-spin" />
+          ) : (
+            <ArrowRightIcon className="h-4 w-4" />
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}

src/app/auth/import.tsx

@@ -1,4 +1,4 @@
-import { NDKNip46Signer, NDKPrivateKeySigner } from '@nostr-dev-kit/ndk';
+import NDK, { NDKNip46Signer, NDKPrivateKeySigner } from '@nostr-dev-kit/ndk';
 import { readText } from '@tauri-apps/plugin-clipboard-manager';
 import { motion } from 'framer-motion';
 import { nip19 } from 'nostr-tools';
@@ -10,21 +10,22 @@ import { twMerge } from 'tailwind-merge';
 import { useNDK } from '@libs/ndk/provider';
 import { useStorage } from '@libs/storage/provider';
 
-import { ArrowLeftIcon } from '@shared/icons';
+import { ArrowLeftIcon, LoaderIcon } from '@shared/icons';
 import { User } from '@shared/user';
 
 export function ImportAccountScreen() {
-  const navigate = useNavigate();
-
   const { db } = useStorage();
   const { ndk } = useNDK();
 
   const [npub, setNpub] = useState<string>('');
   const [nsec, setNsec] = useState<string>('');
   const [pubkey, setPubkey] = useState<undefined | string>(undefined);
+  const [loading, setLoading] = useState(false);
   const [created, setCreated] = useState({ ok: false, remote: false });
   const [savedPrivkey, setSavedPrivkey] = useState(false);
 
+  const navigate = useNavigate();
+
   const submitNpub = async () => {
     if (npub.length < 6) return toast.error('You must enter valid npub');
     if (!npub.startsWith('npub1')) return toast.error('npub must be starts with npub1');
@@ -44,11 +45,17 @@ export function ImportAccountScreen() {
     try {
       const pubkey = nip19.decode(npub.split('#')[0]).data as string;
       const localSigner = NDKPrivateKeySigner.generate();
-      await db.createSetting('nsecbunker', '1');
-      await db.secureSave(pubkey + '-nsecbunker', localSigner.privateKey);
 
-      const remoteSigner = new NDKNip46Signer(ndk, npub, localSigner);
+      await db.createSetting('nsecbunker', '1');
-      // await remoteSigner.blockUntilReady();
+      await db.secureSave(`${pubkey}-nsecbunker`, localSigner.privateKey);
+
+      const bunker = new NDK({
+        explicitRelayUrls: ['wss://relay.nsecbunker.com', 'wss://nostr.vulpem.com'],
+      });
+      bunker.connect();
+
+      const remoteSigner = new NDKNip46Signer(bunker, npub, localSigner);
+      await remoteSigner.blockUntilReady();
 
       ndk.signer = remoteSigner;
 
@@ -66,12 +73,25 @@ export function ImportAccountScreen() {
 
   const createAccount = async () => {
     try {
-      await db.createAccount(npub, pubkey);
+      setLoading(true);
-      setCreated((prev) => ({ ...prev, ok: true }));
 
-      if (created.remote) navigate('/auth/onboarding', { state: { newuser: false } });
+      // add account to db
+      await db.createAccount(npub, pubkey);
+
+      // get account metadata
+      const user = ndk.getUser({ pubkey });
+      if (user) {
+        db.account.contacts = [...(await user.follows())].map((user) => user.pubkey);
+        db.account.relayList = await user.relayList();
+      }
+
+      setCreated((prev) => ({ ...prev, ok: true }));
+      setLoading(false);
+
+      if (created.remote) navigate('/auth/onboarding');
     } catch (e) {
-      return toast(`Create account failed: ${e}`);
+      setLoading(false);
+      return toast.error(e);
     }
   };
 
@@ -112,11 +132,9 @@ export function ImportAccountScreen() {
         ) : null}
       </div>
       <div className="mx-auto flex w-full max-w-md flex-col gap-10">
-        <h1 className="text-center text-2xl font-semibold text-neutral-900 dark:text-neutral-100">
+        <h1 className="text-center text-2xl font-semibold">Import your account.</h1>
-          Import your account.
-        </h1>
         <div className="flex flex-col gap-3">
-          <div className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
+          <div className="rounded-xl bg-neutral-50 p-3 dark:bg-neutral-950">
             <div className="flex flex-col gap-1.5">
               <label htmlFor="npub" className="font-semibold">
                 Enter your public key:
@@ -132,21 +150,21 @@ export function ImportAccountScreen() {
                   autoCorrect="off"
                   autoCapitalize="off"
                   placeholder="npub1"
-                  className="h-11 w-full rounded-lg bg-neutral-200 px-3 placeholder:text-neutral-500 dark:bg-neutral-800 dark:placeholder:text-neutral-400"
+                  className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
                 />
                 {!pubkey ? (
                   <div className="flex flex-col gap-2">
                     <button
                       type="button"
                       onClick={submitNpub}
-                      className="h-9 w-full shrink-0 rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600"
+                      className="h-11 w-full shrink-0 rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600"
                     >
                       Continue
                     </button>
                     <button
                       type="button"
                       onClick={connectNsecBunker}
-                      className="h-9 w-full shrink-0 rounded-lg bg-neutral-200 font-semibold text-neutral-900 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700"
+                      className="h-11 w-full shrink-0 rounded-lg bg-neutral-200 font-medium hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700"
                     >
                       Continue with nsecBunker
                     </button>
@@ -162,16 +180,16 @@ export function ImportAccountScreen() {
                 opacity: 1,
                 y: 0,
               }}
-              className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200"
+              className="rounded-xl bg-neutral-50 p-3 dark:bg-neutral-950"
             >
               <h5 className="mb-1.5 font-semibold">Account found</h5>
               <div className="flex w-full flex-col gap-2">
-                <div className="flex h-full w-full items-center justify-between rounded-lg bg-neutral-200 p-2 dark:bg-neutral-800">
+                <div className="flex h-full w-full items-center justify-between rounded-lg bg-neutral-100 px-4 py-3 dark:bg-neutral-900">
                   <User pubkey={pubkey} variant="simple" />
                   <button
                     type="button"
                     onClick={changeAccount}
-                    className="h-8 w-20 shrink-0 rounded-lg bg-neutral-300 text-sm font-medium text-neutral-800 hover:bg-neutral-400 dark:bg-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-600"
+                    className="h-8 w-max shrink-0 rounded-lg bg-neutral-200 px-2.5 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700"
                   >
                     Change
                   </button>
@@ -180,9 +198,13 @@ export function ImportAccountScreen() {
                   <button
                     type="button"
                     onClick={createAccount}
-                    className="h-9 w-full shrink-0 rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600"
+                    className="inline-flex h-11 w-full shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600"
                   >
-                    Continue
+                    {loading ? (
+                      <LoaderIcon className="h-4 w-4 animate-spin" />
+                    ) : (
+                      'Continue'
+                    )}
                   </button>
                 ) : null}
               </div>
@@ -215,7 +237,7 @@ export function ImportAccountScreen() {
                           autoCorrect="off"
                           autoCapitalize="off"
                           placeholder="nsec1"
-                          className="h-11 w-full rounded-lg bg-neutral-200 px-3 placeholder:text-neutral-500 dark:bg-neutral-800 dark:placeholder:text-neutral-400"
+                          className="h-11 w-full rounded-lg border-transparent bg-neutral-200 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-800 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
                         />
                         {nsec.length < 5 ? (
                           <div className="absolute right-0 top-0 inline-flex h-11 items-center justify-center px-2">
@@ -282,11 +304,9 @@ export function ImportAccountScreen() {
                   opacity: 1,
                   y: 0,
                 }}
-                className="inline-flex h-9 w-full shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600"
+                className="inline-flex h-11 w-full shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600"
                 type="button"
-                onClick={() =>
+                onClick={() => navigate('/auth/onboarding')}
-                  navigate('/auth/onboarding', { state: { newuser: false } })
-                }
               >
                 Continue
               </motion.button>

src/app/auth/onboarding.tsx

@@ -0,0 +1,148 @@
+import * as Switch from '@radix-ui/react-switch';
+import { isPermissionGranted, requestPermission } from '@tauri-apps/plugin-notification';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { useStorage } from '@libs/storage/provider';
+
+import { InfoIcon } from '@shared/icons';
+
+export function OnboardingScreen() {
+  const { db } = useStorage();
+  const navigate = useNavigate();
+
+  const [settings, setSettings] = useState({
+    autoupdate: false,
+    outbox: false,
+    notification: false,
+  });
+
+  const next = () => {
+    if (!db.account.contacts.length) return navigate('/auth/follow');
+    return navigate('/auth/finish');
+  };
+
+  const toggleOutbox = async () => {
+    await db.createSetting('outbox', String(+!settings.outbox));
+    // update state
+    setSettings((prev) => ({ ...prev, outbox: !settings.outbox }));
+  };
+
+  const toggleAutoupdate = async () => {
+    await db.createSetting('autoupdate', String(+!settings.autoupdate));
+    db.settings.autoupdate = !settings.autoupdate;
+    // update state
+    setSettings((prev) => ({ ...prev, autoupdate: !settings.autoupdate }));
+  };
+
+  const toggleNofitication = async () => {
+    await requestPermission();
+    // update state
+    setSettings((prev) => ({ ...prev, notification: !settings.notification }));
+  };
+
+  useEffect(() => {
+    async function loadSettings() {
+      const permissionGranted = await isPermissionGranted();
+      setSettings((prev) => ({ ...prev, notification: permissionGranted }));
+
+      const data = await db.getAllSettings();
+      if (!data) return;
+
+      data.forEach((item) => {
+        if (item.key === 'autoupdate')
+          setSettings((prev) => ({
+            ...prev,
+            autoupdate: !!parseInt(item.value),
+          }));
+
+        if (item.key === 'outbox')
+          setSettings((prev) => ({
+            ...prev,
+            outbox: !!parseInt(item.value),
+          }));
+      });
+    }
+
+    loadSettings();
+  }, []);
+
+  return (
+    <div className="relative flex h-full w-full items-center justify-center">
+      <div className="mx-auto flex w-full max-w-md flex-col gap-10">
+        <div className="text-center">
+          <h1 className="text-2xl font-light text-neutral-900 dark:text-neutral-100">
+            You&apos;re almost ready to use Lume.
+          </h1>
+          <h2 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100">
+            Let&apos;s start personalizing your experience.
+          </h2>
+        </div>
+        <div className="flex flex-col gap-3">
+          <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
+            <Switch.Root
+              checked={settings.autoupdate}
+              onClick={() => toggleAutoupdate()}
+              className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+            >
+              <Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+            </Switch.Root>
+            <div>
+              <h3 className="font-semibold">Auto check for update on Login</h3>
+              <p className="text-sm">
+                Keep Lume up to date with latest version, always have new features and bug
+                free.
+              </p>
+            </div>
+          </div>
+          <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
+            <Switch.Root
+              checked={settings.notification}
+              onClick={() => toggleNofitication()}
+              className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+            >
+              <Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+            </Switch.Root>
+            <div>
+              <h3 className="font-semibold">Push notification</h3>
+              <p className="text-sm">
+                Enabling push notifications will allow you to receive notifications from
+                Lume directly on your device.
+              </p>
+            </div>
+          </div>
+          <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
+            <Switch.Root
+              checked={settings.outbox}
+              onClick={() => toggleOutbox()}
+              className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+            >
+              <Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+            </Switch.Root>
+            <div>
+              <h3 className="font-semibold">Use Gossip model (recommended)</h3>
+              <p className="text-sm">
+                Automatically discover relays to connect based on the preferences of each
+                author.
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2 rounded-lg bg-blue-100 p-3 text-sm text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+            <InfoIcon className="h-8 w-8" />
+            <p>
+              There are many more settings you can configure from the &quot;Settings&quot;
+              screen. Be sure to visit it later.
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={next}
+            className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600"
+          >
+            Continue
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/auth/onboarding/enrich.tsx

@@ -1,140 +0,0 @@
-import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
-import { useQuery } from '@tanstack/react-query';
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { toast } from 'sonner';
-
-import { useNDK } from '@libs/ndk/provider';
-import { useStorage } from '@libs/storage/provider';
-
-import { ArrowLeftIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
-import { User } from '@shared/user';
-
-import { useOnboarding } from '@stores/onboarding';
-
-import { arrayToNIP02 } from '@utils/transform';
-
-export function OnboardEnrichScreen() {
-  const { ndk } = useNDK();
-  const { db } = useStorage();
-  const { status, data } = useQuery({
-    queryKey: ['trending-profiles-widget'],
-    queryFn: 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([]);
-
-  const navigate = useNavigate();
-  const setEnrich = useOnboarding((state) => state.toggleEnrich);
-
-  // 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);
-      const event = new NDKEvent(ndk);
-      event.content = '';
-      event.kind = NDKKind.Contacts;
-      event.created_at = Math.floor(Date.now() / 1000);
-      event.tags = tags;
-
-      const publish = await event.publish();
-
-      // redirect to next step
-      if (publish) {
-        db.account.follows = follows;
-
-        await db.updateAccount('follows', JSON.stringify(follows));
-        await db.updateAccount('circles', JSON.stringify(follows));
-
-        setEnrich();
-        navigate(-1);
-      } else {
-        setLoading(false);
-      }
-    } catch (e) {
-      setLoading(false);
-      toast(e);
-    }
-  };
-
-  return (
-    <div className="relative flex h-full w-full flex-col justify-center">
-      <div className="absolute left-[8px] top-4">
-        <button
-          onClick={() => navigate(-1)}
-          className="inline-flex items-center gap-2 text-sm font-medium"
-        >
-          <div className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-neutral-200 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-200">
-            <ArrowLeftIcon className="h-5 w-5" />
-          </div>
-          Back
-        </button>
-      </div>
-      <div className="mx-auto mb-8 w-full max-w-md px-3">
-        <h1 className="text-center text-2xl font-semibold text-neutral-900 dark:text-neutral-100">
-          Enrich your network
-        </h1>
-      </div>
-      <div className="flex w-full flex-nowrap items-center gap-4 overflow-x-auto px-4 scrollbar-none">
-        {status === 'pending' ? (
-          <div className="flex h-full w-full items-center justify-center">
-            <LoaderIcon className="h-4 w-4 animate-spin text-neutral-900 dark:text-neutral-100" />
-          </div>
-        ) : (
-          data?.profiles.map((item: { pubkey: string; profile: { content: string } }) => (
-            <button
-              key={item.pubkey}
-              type="button"
-              onClick={() => toggleFollow(item.pubkey)}
-              className="relative h-[300px] shrink-0 grow-0 basis-[250px] overflow-hidden rounded-lg bg-neutral-200 px-4 py-4 hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700"
-            >
-              <User
-                pubkey={item.pubkey}
-                variant="large"
-                embedProfile={item.profile?.content}
-              />
-              {follows.includes(item.pubkey) && (
-                <div className="absolute right-2 top-2">
-                  <CheckCircleIcon className="h-5 w-5 text-teal-400" />
-                </div>
-              )}
-            </button>
-          ))
-        )}
-      </div>
-      <div className="mx-auto mt-8 w-full max-w-md px-3">
-        <button
-          type="button"
-          onClick={submit}
-          disabled={loading || follows.length === 0}
-          className="inline-flex h-9 w-full items-center justify-center gap-2 rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
-        >
-          {loading ? (
-            <>
-              <LoaderIcon className="h-4 w-4 animate-spin" />
-              <span>It might take a bit, please patient...</span>
-            </>
-          ) : (
-            <span>Follow {follows.length} accounts & Continue</span>
-          )}
-        </button>
-      </div>
-    </div>
-  );
-}

src/app/auth/onboarding/hashtag.tsx

@@ -1,93 +0,0 @@
-import { message } from '@tauri-apps/plugin-dialog';
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { ArrowLeftIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
-
-import { TOPICS, WIDGET_KIND } from '@stores/constants';
-import { useOnboarding } from '@stores/onboarding';
-
-import { useWidget } from '@utils/hooks/useWidget';
-
-export function OnboardHashtagScreen() {
-  const [loading, setLoading] = useState(false);
-  const [topic, setTopic] = useState(null);
-
-  const navigate = useNavigate();
-  const setHashtag = useOnboarding((state) => state.toggleHashtag);
-
-  const { addWidget } = useWidget();
-
-  const submit = async () => {
-    try {
-      setLoading(true);
-      setHashtag();
-
-      addWidget.mutate({
-        kind: WIDGET_KIND.topic,
-        title: topic.title,
-        content: JSON.stringify(topic.content),
-      });
-
-      navigate(-1);
-    } catch (e) {
-      setLoading(false);
-      await message(e, { title: 'Lume', type: 'error' });
-    }
-  };
-
-  return (
-    <div className="relative flex h-full w-full flex-col justify-center">
-      <div className="absolute left-[8px] top-4">
-        <button
-          onClick={() => navigate(-1)}
-          className="inline-flex items-center gap-2 text-sm font-medium"
-        >
-          <div className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-neutral-200 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-200">
-            <ArrowLeftIcon className="h-5 w-5" />
-          </div>
-          Back
-        </button>
-      </div>
-      <div className="mx-auto flex w-full max-w-md flex-col gap-10 px-3">
-        <h1 className="text-center text-2xl font-semibold text-neutral-900 dark:text-neutral-100">
-          Choose your favorite topic
-        </h1>
-        <div className="flex flex-col gap-4">
-          <div className="flex w-full flex-col gap-3">
-            {TOPICS.map((item) => (
-              <button
-                key={item.title}
-                type="button"
-                onClick={() => setTopic(item)}
-                className="inline-flex h-14 items-center justify-between rounded-xl bg-neutral-100 px-4 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
-              >
-                <p className="font-medium">{item.title}</p>
-                {topic && topic.title === item.title && (
-                  <div>
-                    <CheckCircleIcon className="h-5 w-5 text-teal-500" />
-                  </div>
-                )}
-              </button>
-            ))}
-          </div>
-          <button
-            type="button"
-            onClick={submit}
-            disabled={loading || !topic}
-            className="inline-flex h-9 w-full items-center justify-center gap-2 rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
-          >
-            {loading ? (
-              <>
-                <LoaderIcon className="h-4 w-4 animate-spin" />
-                <span>Adding...</span>
-              </>
-            ) : (
-              <span>Add & Continue</span>
-            )}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

src/app/auth/onboarding/index.tsx

@@ -1,5 +0,0 @@
-import { Outlet } from 'react-router-dom';
-
-export function OnboardingScreen() {
-  return <Outlet />;
-}

src/app/auth/onboarding/list.tsx

@@ -1,56 +0,0 @@
-import { useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-
-import { AllowNotification } from '@app/auth/components/features/allowNotification';
-import { OutboxModel } from '@app/auth/components/features/enableOutbox';
-import { FavoriteHashtag } from '@app/auth/components/features/favoriteHashtag';
-import { FollowList } from '@app/auth/components/features/followList';
-import { SuggestFollow } from '@app/auth/components/features/suggestFollow';
-
-import { LoaderIcon } from '@shared/icons';
-
-export function OnboardingListScreen() {
-  const { state } = useLocation();
-  const { newuser }: { newuser: boolean } = state;
-
-  const [loading, setLoading] = useState(false);
-
-  const navigate = useNavigate();
-
-  const completed = () => {
-    setLoading(true);
-
-    const timeout = setTimeout(() => setLoading(false), 200);
-    clearTimeout(timeout);
-
-    navigate('/');
-  };
-
-  return (
-    <div className="relative flex h-full w-full items-center justify-center">
-      <div className="mx-auto flex w-full max-w-md flex-col gap-10">
-        <div className="text-center">
-          <h1 className="text-2xl font-light text-neutral-900 dark:text-neutral-100">
-            You&apos;re almost ready to use Lume.
-          </h1>
-          <h2 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100">
-            Let&apos;s start personalizing your experience.
-          </h2>
-        </div>
-        <div className="flex flex-col gap-3">
-          {newuser ? <SuggestFollow /> : <FollowList />}
-          <FavoriteHashtag />
-          <OutboxModel />
-          <AllowNotification />
-          <button
-            type="button"
-            onClick={completed}
-            className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600"
-          >
-            {loading ? <LoaderIcon className="h-4 w-4 animate-spin" /> : ' Continue'}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

src/app/auth/onboarding/relays.tsx

@@ -1,160 +0,0 @@
-import { NDKEvent } from '@nostr-dev-kit/ndk';
-import { useQuery } from '@tanstack/react-query';
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { toast } from 'sonner';
-
-import { useNDK } from '@libs/ndk/provider';
-import { useStorage } from '@libs/storage/provider';
-
-import { ArrowLeftIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
-import { User } from '@shared/user';
-
-import { useOnboarding } from '@stores/onboarding';
-
-import { useNostr } from '@utils/hooks/useNostr';
-
-export function OnboardRelaysScreen() {
-  const navigate = useNavigate();
-  const toggleRelays = useOnboarding((state) => state.toggleRelays);
-
-  const [loading, setLoading] = useState(false);
-  const [relays, setRelays] = useState(new Set<string>());
-
-  const { db } = useStorage();
-  const { ndk } = useNDK();
-  const { getAllRelaysByUsers } = useNostr();
-  const { status, data } = useQuery({
-    queryKey: ['relays'],
-    queryFn: async () => {
-      return await getAllRelaysByUsers();
-    },
-    refetchOnWindowFocus: false,
-  });
-
-  const toggleRelay = (relay: string) => {
-    if (relays.has(relay)) {
-      setRelays((prev) => {
-        prev.delete(relay);
-        return new Set(prev);
-      });
-    } else {
-      setRelays((prev) => new Set(prev.add(relay)));
-    }
-  };
-
-  const submit = async () => {
-    try {
-      setLoading(true);
-
-      for (const relay of relays) {
-        await db.createRelay(relay);
-      }
-
-      const tags = Array.from(relays).map((relay) => ['r', relay.replace(/\/+$/, '')]);
-      const event = new NDKEvent(ndk);
-      event.content = '';
-      event.kind = 10002;
-      event.created_at = Math.floor(Date.now() / 1000);
-      event.tags = tags;
-
-      await event.publish();
-
-      toggleRelays();
-      navigate(-1);
-    } catch (e) {
-      setLoading(false);
-      toast.error(e);
-    }
-  };
-
-  return (
-    <div className="relative flex h-full w-full flex-col justify-center">
-      <div className="absolute left-[8px] top-4">
-        <button
-          onClick={() => navigate(-1)}
-          className="inline-flex items-center gap-2 text-sm font-medium"
-        >
-          <div className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-neutral-200 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-200">
-            <ArrowLeftIcon className="h-5 w-5" />
-          </div>
-          Back
-        </button>
-      </div>
-      <div className="mx-auto flex w-full max-w-md flex-col gap-10 px-3">
-        <h1 className="text-center text-2xl font-semibold text-neutral-900 dark:text-neutral-100">
-          Relay discovery
-        </h1>
-        <div className="flex flex-col gap-4">
-          <div className="flex h-[420px] w-full flex-col overflow-y-auto rounded-xl bg-neutral-100 dark:bg-neutral-900">
-            {status === 'pending' ? (
-              <div className="flex h-full w-full items-center justify-center">
-                <LoaderIcon className="h-4 w-4 animate-spin text-neutral-900 dark:text-neutral-100" />
-              </div>
-            ) : data.size === 0 ? (
-              <div className="flex h-full w-full items-center justify-center px-6">
-                <p className="text-center text-neutral-300 dark:text-neutral-600">
-                  Lume couldn&apos;t find any relays from your follows.
-                  <br />
-                  You can skip this step and use default relays instead.
-                </p>
-              </div>
-            ) : (
-              [...data].map(([key, value]) => (
-                <button
-                  key={key}
-                  type="button"
-                  onClick={() => toggleRelay(key)}
-                  className="inline-flex transform items-start justify-between px-4 py-2 hover:bg-neutral-300 dark:hover:bg-neutral-700"
-                >
-                  <div className="flex w-full items-center justify-between">
-                    <div className="inline-flex items-center gap-2">
-                      <div className="pt-1.5">
-                        {relays.has(key) ? (
-                          <CheckCircleIcon className="h-4 w-4 text-teal-500" />
-                        ) : (
-                          <CheckCircleIcon className="h-4 w-4 text-neutral-300 dark:text-neutral-700" />
-                        )}
-                      </div>
-                      <p className="max-w-[15rem] truncate">{key.replace(/\/+$/, '')}</p>
-                    </div>
-                    <div className="inline-flex items-center gap-2">
-                      <span className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
-                        Used by
-                      </span>
-                      <div className="isolate flex -space-x-2">
-                        {value.slice(0, 3).map((item) => (
-                          <User key={item} pubkey={item} variant="stacked" />
-                        ))}
-                        {value.length > 3 ? (
-                          <div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-900 ring-1 ring-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:ring-neutral-700">
-                            <span className="text-xs font-medium">+{value.length}</span>
-                          </div>
-                        ) : null}
-                      </div>
-                    </div>
-                  </div>
-                </button>
-              ))
-            )}
-          </div>
-          <button
-            type="button"
-            onClick={() => submit()}
-            disabled={loading}
-            className="inline-flex h-9 w-full items-center justify-center gap-2 rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
-          >
-            {loading ? (
-              <>
-                <LoaderIcon className="h-4 w-4 animate-spin" />
-                <span>Adding...</span>
-              </>
-            ) : (
-              <span>Add {relays.size} relays & Continue</span>
-            )}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

src/app/auth/tutorials/finish.tsx

@@ -0,0 +1,41 @@
+import { Link } from 'react-router-dom';
+
+export function TutorialFinishScreen() {
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="mx-auto flex w-full max-w-md flex-col gap-10">
+        <div className="text-center">
+          <img src="/icon.png" alt="Lume's logo" className="mx-auto mb-1 h-auto w-16" />
+          <h1 className="text-2xl font-light">
+            Yo, you&apos;ve understood basic features 🎉
+          </h1>
+        </div>
+        <div className="flex flex-col gap-2">
+          <Link
+            to="/"
+            className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
+          >
+            Start using
+          </Link>
+          <Link
+            to="https://nostr.how/"
+            target="_blank"
+            className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-neutral-100 font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+          >
+            Learn more about Nostr
+          </Link>
+          <p className="text-center text-sm font-medium text-neutral-500 dark:text-neutral-600">
+            If you&apos;ve trouble when user Lume, you can report the issue{' '}
+            <a
+              href="github.com/luminous-devs/lume"
+              target="_blank"
+              className="text-blue-500 !underline"
+            >
+              here
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/auth/tutorials/note.tsx

@@ -0,0 +1,91 @@
+import { NDKEvent } from '@nostr-dev-kit/ndk';
+import { Link } from 'react-router-dom';
+
+import { useNDK } from '@libs/ndk/provider';
+
+import { EditIcon, ReactionIcon, ReplyIcon, RepostIcon, ZapIcon } from '@shared/icons';
+import { TextNote } from '@shared/notes';
+
+export function TutorialNoteScreen() {
+  const { ndk } = useNDK();
+  const exampleEvent = new NDKEvent(ndk, {
+    id: 'a3527670dd9b178bf7c2a9ea673b63bc8bfe774942b196691145343623c45821',
+    pubkey: '04c915daefee38317fa734444acee390a8269fe5810b2241e5e6dd343dfbecc9',
+    created_at: 1701355223,
+    kind: 1,
+    tags: [],
+    content: 'good morning nostr, stay humble and stack sats 🫡',
+    sig: '9e0bd67ec25598744f20bff0fe360fdf190c4240edb9eea260e50f77e07f94ea767ececcc6270819b7f64e5e7ca1fe20b4971f46dc120e6db43114557f3a6dae',
+  });
+
+  return (
+    <div className="flex h-full w-full select-text items-center justify-center">
+      <div className="mx-auto flex w-full max-w-md flex-col gap-10">
+        <div className="flex flex-col items-center gap-3">
+          <div className="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+            <EditIcon className="h-5 w-5" />
+          </div>
+          <h1 className="text-2xl font-light">
+            What is a <span className="font-bold">Note?</span>
+          </h1>
+        </div>
+        <div className="flex flex-col gap-2">
+          <p className="px-3">
+            Posts on Nostr based Social Network client are usually called
+            &apos;Notes.&apos; Notes are arranged chronologically on the timeline and are
+            updated in real-time.
+          </p>
+          <p className="px-3 font-semibold">Here is one example:</p>
+          <TextNote event={exampleEvent} className="pointer-events-none my-2" />
+          <p className="px-3 font-semibold">Here are how you can interact with a note:</p>
+          <div className="flex flex-col gap-2 px-3">
+            <div className="inline-flex gap-3">
+              <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+                <ReplyIcon className="h-5 w-5 text-blue-500" />
+              </div>
+              <p>
+                Reply - Click on this button to reply to a note. It&apos;s also possible
+                to reply to replies, continuing the conversation like a thread.
+              </p>
+            </div>
+            <div className="inline-flex gap-3">
+              <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+                <ReactionIcon className="h-5 w-5 text-red-500" />
+              </div>
+              <p>Reaction - You can add reactions to the Note to express your concern.</p>
+            </div>
+            <div className="inline-flex gap-3">
+              <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+                <RepostIcon className="h-5 w-5 text-teal-500" />
+              </div>
+              <p>
+                Repost - You can share that note to your own timeline. You can also quote
+                them with your comments.
+              </p>
+            </div>
+            <div className="inline-flex gap-3">
+              <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+                <ZapIcon className="h-5 w-5 text-orange-500" />
+              </div>
+              <p>Zap - You can send tip in Bitcoin to that note owner with zero-fees</p>
+            </div>
+          </div>
+          <div className="mt-5 flex gap-2 px-3">
+            <Link
+              to="/auth/finish"
+              className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-neutral-100 font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+            >
+              Back
+            </Link>
+            <Link
+              to="/auth/tutorials/widget"
+              className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
+            >
+              Continue
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/auth/tutorials/posting.tsx

@@ -0,0 +1,3 @@
+export function TutorialPostingScreen() {
+  return <div></div>;
+}

src/app/auth/tutorials/widget.tsx

@@ -0,0 +1,64 @@
+import { Link } from 'react-router-dom';
+
+import { BellIcon, HomeIcon, PlusIcon } from '@shared/icons';
+
+export function TutorialWidgetScreen() {
+  return (
+    <div className="flex h-full w-full select-text items-center justify-center">
+      <div className="mx-auto flex w-full max-w-md flex-col gap-10">
+        <div className="flex flex-col items-center gap-3">
+          <div className="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+            <HomeIcon className="h-5 w-5" />
+          </div>
+          <h1 className="text-2xl font-light">
+            The concept of <span className="font-bold">Widgets</span>
+          </h1>
+        </div>
+        <div className="flex flex-col gap-2 px-3">
+          <p>
+            Lume provides multiple widgets based on usage. You always can control what you
+            need to show on your Home.
+          </p>
+          <p className="font-semibold">Default widgets:</p>
+          <div className="inline-flex gap-3">
+            <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+              <HomeIcon className="h-5 w-5" />
+            </div>
+            <p>Newsfeed - You can view notes from accounts you follow.</p>
+          </div>
+          <div className="inline-flex gap-3">
+            <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+              <BellIcon className="h-5 w-5" />
+            </div>
+            <p>Notification - You can view all notifications related to your account.</p>
+          </div>
+          <p>
+            If you want to add more widget, you can click to this button on Home Screen.
+          </p>
+          <div className="flex h-24 w-full items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+            <button
+              type="button"
+              className="inline-flex h-14 w-14 items-center justify-center rounded-full bg-neutral-200 text-neutral-900 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700"
+            >
+              <PlusIcon className="h-5 w-5" />
+            </button>
+          </div>
+          <div className="mt-5 flex gap-2">
+            <Link
+              to="/auth/tutorials/note"
+              className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-neutral-100 font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+            >
+              Back
+            </Link>
+            <Link
+              to="/auth/tutorials/finish"
+              className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
+            >
+              Continue
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/auth/welcome.tsx

@@ -7,19 +7,19 @@ export function WelcomeScreen() {
         <div className="text-center">
           <img src="/icon.png" alt="Lume's logo" className="mx-auto mb-1 h-auto w-16" />
           <h1 className="text-2xl">
-            Welcome to <span className="font-semibold">Lume</span>
+            Welcome to <span className="font-bold">Lume</span>
           </h1>
         </div>
         <div className="flex flex-col gap-2 px-8">
           <Link
             to="/auth/create"
-            className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
+            className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
           >
             Create new account
           </Link>
           <Link
             to="/auth/import"
-            className="inline-flex h-10 w-full items-center justify-center rounded-lg font-medium text-neutral-900 hover:bg-neutral-100 dark:text-neutral-100 dark:hover:bg-neutral-900"
+            className="inline-flex h-11 w-full items-center justify-center rounded-lg font-medium text-neutral-900 hover:bg-neutral-100 dark:text-neutral-100 dark:hover:bg-neutral-900"
           >
             Log in
           </Link>

src/app/chats/components/chatForm.tsx

@@ -54,7 +54,7 @@ export function ChatForm({ receiverPubkey }: { receiverPubkey: string }) {
           autoCorrect="off"
           autoCapitalize="off"
           placeholder="Message..."
-          className="h-10 flex-1 resize-none bg-transparent px-3 text-neutral-900 placeholder:text-neutral-600 focus:outline-none dark:text-neutral-100 dark:placeholder:text-neutral-300"
+          className="h-10 flex-1 resize-none border-none bg-transparent px-3 text-neutral-900 placeholder:text-neutral-600 focus:border-none focus:shadow-none focus:outline-none focus:ring-0 dark:text-neutral-100 dark:placeholder:text-neutral-300"
         />
         <button
           type="button"

src/app/error.tsx

@@ -116,17 +116,32 @@ export function ErrorScreen() {
               </div>
               <div className="select-text text-lg font-medium text-blue-300">
                 <p>
-                  While waiting for Lume&apos;s Devs to release the bug fixes, you always can use
+                  While waiting for Lume&apos;s Devs to release the bug fixes, you always
-                  other Nostr clients with your account:
+                  can use other Nostr clients with your account:
                 </p>
                 <div className="mt-2 flex flex-col gap-1 text-white">
-                  <a href="https://snort.social" className="hover:!underline">
+                  <a
+                    className="hover:!underline"
+                    href="https://snort.social"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
                     snort.social
                   </a>
-                  <a href="https://primal.net" className="hover:!underline">
+                  <a
+                    className="hover:!underline"
+                    href="https://primal.net"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
                     primal.net
                   </a>
-                  <a href="https://nostrudel.ninja" className="hover:!underline">
+                  <a
+                    className="hover:!underline"
+                    href="https://nostrudel.ninja"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
                     nostrudel.ninja
                   </a>
                 </div>

src/app/explore/components/userWithDrawer.tsx

@@ -67,7 +67,7 @@ export const UserWithDrawer = memo(function UserWithDrawer({
   };
 
   useEffect(() => {
-    if (db.account.follows.includes(pubkey)) {
+    if (db.account.contacts.includes(pubkey)) {
       setFollowed(true);
     }
   }, []);

src/app/explore/index.tsx

@@ -28,7 +28,7 @@ export function ExploreScreen() {
   const { getContactsByPubkey } = useNostr();
   const { project } = useReactFlow();
 
-  const defaultContacts = useMemo(() => getMultipleRandom(db.account.follows, 10), []);
+  const defaultContacts = useMemo(() => getMultipleRandom(db.account.contacts, 10), []);
   const reactFlowWrapper = useRef(null);
   const connectingNodeId = useRef(null);
 

src/app/home/index.tsx

@@ -21,8 +21,7 @@ import {
   WidgetList,
 } from '@shared/widgets';
 
-import { WIDGET_KIND } from '@stores/constants';
+import { WIDGET_KIND } from '@utils/constants';
-
 import { Widget } from '@utils/types';
 
 export function HomeScreen() {
@@ -35,18 +34,18 @@ export function HomeScreen() {
     queryFn: async () => {
       const dbWidgets = await db.getWidgets();
       const defaultWidgets = [
-        {
-          id: '9998',
-          title: 'Notification',
-          content: '',
-          kind: WIDGET_KIND.notification,
-        },
         {
           id: '9999',
           title: 'Newsfeed',
           content: '',
           kind: WIDGET_KIND.newsfeed,
         },
+        {
+          id: '9998',
+          title: 'Notification',
+          content: '',
+          kind: WIDGET_KIND.notification,
+        },
       ];
 
       return [...defaultWidgets, ...dbWidgets];

src/app/new/article.tsx

@@ -137,7 +137,7 @@ export function NewArticleScreen() {
           <div className="group flex justify-between gap-2">
             <input
               name="title"
-              className="h-9 flex-1 border-none bg-transparent text-2xl font-semibold text-neutral-900 shadow-none outline-none placeholder:text-neutral-400 dark:text-neutral-100 dark:placeholder:text-neutral-600"
+              className="h-9 flex-1 border-none bg-transparent px-0 text-2xl font-semibold text-neutral-900 shadow-none outline-none placeholder:text-neutral-400 focus:border-none focus:outline-none focus:ring-0 dark:text-neutral-100 dark:placeholder:text-neutral-600"
               placeholder="Untitled"
               value={title}
               onChange={(e) => setTitle(e.target.value)}

src/app/new/components/mentionPopup.tsx

@@ -32,8 +32,8 @@ export function MentionPopup({ editor }: { editor: Editor }) {
         className="h-full max-h-[200px] w-[250px] overflow-hidden overflow-y-auto rounded-lg border border-neutral-200 bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:bg-neutral-900"
       >
         <div className="flex flex-col gap-1 py-1">
-          {db.account.follows.length > 0 ? (
+          {db.account.contacts.length > 0 ? (
-            db.account.follows.map((item) => (
+            db.account.contacts.map((item) => (
               <button key={item} type="button" onClick={() => insertMention(item)}>
                 <MentionPopupItem pubkey={item} />
               </button>

src/app/new/post.tsx

@@ -18,8 +18,7 @@ import { useNDK } from '@libs/ndk/provider';
 import { CancelIcon, LoaderIcon } from '@shared/icons';
 import { MentionNote } from '@shared/notes';
 
-import { WIDGET_KIND } from '@stores/constants';
+import { WIDGET_KIND } from '@utils/constants';
-
 import { useSuggestion } from '@utils/hooks/useSuggestion';
 import { useWidget } from '@utils/hooks/useWidget';
 

src/app/new/privkey.tsx

@@ -62,7 +62,7 @@ export function NewPrivkeyScreen() {
           autoComplete="off"
           autoCorrect="off"
           autoCapitalize="off"
-          className="h-11 w-full rounded-lg bg-neutral-100 px-3 py-2 placeholder:text-neutral-500 dark:bg-neutral-900 dark:placeholder:text-neutral-400"
+          className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
         />
         <div className="mt-2 flex flex-col gap-2">
           <button

src/app/nwc/components/form.tsx

@@ -43,21 +43,19 @@ export function NWCForm({ setWalletConnectURL }) {
 
   return (
     <div className="flex flex-col gap-3 rounded-xl bg-neutral-100 p-3 dark:bg-neutral-900">
-      <div className="flex flex-col gap-1.5">
+      <textarea
-        <textarea
+        name="walletConnectURL"
-          name="walletConnectURL"
+        value={uri}
-          value={uri}
+        // eslint-disable-next-line jsx-a11y/no-autofocus
-          // eslint-disable-next-line jsx-a11y/no-autofocus
+        autoFocus={false}
-          autoFocus={false}
+        onChange={(e) => setUri(e.target.value)}
-          onChange={(e) => setUri(e.target.value)}
+        placeholder="nostr+walletconnect://"
-          placeholder="nostr+walletconnect://"
+        className="h-40 w-full resize-none rounded-lg border-transparent bg-neutral-200 px-3 py-3 text-neutral-900 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
-          className="h-40 w-full resize-none rounded-lg bg-neutral-200 px-3 py-3 text-neutral-900 !outline-none placeholder:text-neutral-600 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
+      />
-        />
-      </div>
       <button
         type="button"
         onClick={submit}
-        className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
+        className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
       >
         {loading ? <LoaderIcon className="h-4 w-4 animate-spin" /> : 'Connect'}
       </button>

src/app/nwc/index.tsx

@@ -11,7 +11,7 @@ export function NWCScreen() {
   const [walletConnectURL, setWalletConnectURL] = useState<null | string>(null);
 
   const remove = async () => {
-    await db.secureRemove('nwc');
+    await db.secureRemove(`${db.account.pubkey}-nwc`);
     setWalletConnectURL(null);
   };
 
@@ -41,16 +41,16 @@ export function NWCScreen() {
                 <CheckCircleIcon className="h-4 w-4" />
                 <div>You&apos;re using nostr wallet connect</div>
               </div>
-              <div className="flex flex-col gap-2">
+              <div className="flex flex-col gap-3">
                 <textarea
                   readOnly
                   value={walletConnectURL.substring(0, 120) + '****'}
-                  className="relative h-40 w-full resize-none rounded-lg bg-neutral-200 px-3 py-1 text-neutral-900 !outline-none placeholder:text-neutral-600 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
+                  className="h-40 w-full resize-none rounded-lg border-transparent bg-neutral-200 px-3 py-3 text-neutral-900 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
                 />
                 <button
                   type="button"
                   onClick={() => remove()}
-                  className="inline-flex h-9 w-full items-center justify-center gap-2 rounded-lg bg-neutral-200 px-6 font-medium text-red-500 hover:bg-red-500 hover:text-white focus:outline-none dark:bg-neutral-800 dark:text-neutral-100"
+                  className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-neutral-200 px-6 font-medium text-red-500 hover:bg-red-500 hover:text-white focus:outline-none dark:bg-neutral-800 dark:text-neutral-100"
                 >
                   Remove connection
                 </button>

src/app/relays/components/relayForm.tsx

@@ -1,69 +1,62 @@
-import { useQueryClient } from '@tanstack/react-query';
+import { NDKRelayUrl } from '@nostr-dev-kit/ndk';
+import { normalizeRelayUrl } from 'nostr-fetch';
 import { useState } from 'react';
-
+import { toast } from 'sonner';
-import { useStorage } from '@libs/storage/provider';
 
 import { PlusIcon } from '@shared/icons';
 
+import { useRelay } from '@utils/hooks/useRelay';
+
 const domainRegex = /^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$/;
 
 export function RelayForm() {
-  const { db } = useStorage();
+  const { connectRelay } = useRelay();
-  const queryClient = useQueryClient();
+  const [relay, setRelay] = useState<{
+    url: NDKRelayUrl;
+    purpose: 'read' | 'write' | undefined;
+  }>({ url: '', purpose: undefined });
 
-  const [url, setUrl] = useState('');
+  const create = () => {
-  const [error, setError] = useState('');
+    if (relay.url.length < 1) return toast.info('Please enter relay url');
-
-  const createRelay = async () => {
-    if (url.length < 1) return setError('Please enter relay url');
     try {
-      const relay = new URL(url.replace(/\s/g, ''));
+      const relayUrl = new URL(relay.url.replace(/\s/g, ''));
       if (
-        domainRegex.test(relay.host) &&
+        domainRegex.test(relayUrl.host) &&
-        (relay.protocol === 'wss:' || relay.protocol === 'ws:')
+        (relayUrl.protocol === 'wss:' || relayUrl.protocol === 'ws:')
       ) {
-        const res = await db.createRelay(url);
+        connectRelay.mutate(normalizeRelayUrl(relay.url));
-        if (!res) return setError("You're already using this relay");
+        setRelay({ url: '', purpose: undefined });
-
-        queryClient.invalidateQueries({
-          queryKey: ['user-relay'],
-        });
-
-        setError('');
-        setUrl('');
       } else {
-        return setError(
+        return toast.error(
           'URL is invalid, a relay must use websocket protocol (start with wss:// or ws://). Please check again'
         );
       }
     } catch {
-      return setError('Relay URL is not valid. Please check again');
+      return toast.error('Relay URL is not valid. Please check again');
     }
   };
 
   return (
     <div className="flex flex-col gap-1">
-      <div className="flex h-10 items-center justify-between rounded-lg bg-neutral-200 pr-1.5 dark:bg-neutral-800">
+      <div className="flex gap-2">
         <input
-          className="h-full w-full bg-transparent pl-3 pr-1.5 text-neutral-900 placeholder:text-neutral-600 focus:outline-none dark:text-neutral-100 dark:placeholder:text-neutral-400"
+          className="h-11 flex-1 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
-          type="url"
           placeholder="wss://"
           spellCheck={false}
           autoComplete="off"
           autoCorrect="off"
           autoCapitalize="off"
-          value={url}
+          value={relay.url}
-          onChange={(e) => setUrl(e.target.value)}
+          onChange={(e) => setRelay((prev) => ({ ...prev, url: e.target.value }))}
         />
         <button
           type="button"
-          onClick={() => createRelay()}
+          onClick={() => create()}
-          className="inline-flex h-6 w-6 items-center justify-center rounded bg-blue-500 text-white hover:bg-blue-600"
+          className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-blue-500 text-white hover:bg-blue-600"
         >
-          <PlusIcon className="h-4 w-4" />
+          <PlusIcon className="h-5 w-5" />
         </button>
       </div>
-      <span className="text-sm text-red-400">{error}</span>
     </div>
   );
 }

src/app/relays/components/relayList.tsx

@@ -1,22 +1,18 @@
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
-import { message } from '@tauri-apps/plugin-dialog';
-import { normalizeRelayUrl } from 'nostr-fetch';
 import { useNavigate } from 'react-router-dom';
 import { VList } from 'virtua';
 
-import { useStorage } from '@libs/storage/provider';
-
 import { LoaderIcon, PlusIcon, ShareIcon } from '@shared/icons';
 import { User } from '@shared/user';
 
 import { useNostr } from '@utils/hooks/useNostr';
+import { useRelay } from '@utils/hooks/useRelay';
 
 export function RelayList() {
   const navigate = useNavigate();
-  const queryClient = useQueryClient();
 
   const { getAllRelaysByUsers } = useNostr();
-  const { db } = useStorage();
+  const { connectRelay } = useRelay();
   const { status, data } = useQuery({
     queryKey: ['relays'],
     queryFn: async () => {
@@ -33,16 +29,6 @@ export function RelayList() {
     navigate(`/relays/${url.hostname}`);
   };
 
-  const connectRelay = async (relayUrl: string) => {
-    const url = normalizeRelayUrl(relayUrl);
-    const res = await db.createRelay(url);
-
-    if (!res) await message("You're aldready connected to this relay");
-    queryClient.invalidateQueries({
-      queryKey: ['user-relay'],
-    });
-  };
-
   return (
     <div className="col-span-2 border-r border-neutral-100 dark:border-neutral-900">
       {status === 'pending' ? (
@@ -55,9 +41,7 @@ export function RelayList() {
       ) : (
         <VList className="h-full">
           <div className="inline-flex h-16 w-full items-center border-b border-neutral-100 px-3 dark:border-neutral-900">
-            <h3 className="font-semibold text-neutral-950 dark:text-neutral-50">
+            <h3 className="font-semibold">Relay discovery</h3>
-              All relays
-            </h3>
           </div>
           {[...data].map(([key, value]) => (
             <div
@@ -76,7 +60,7 @@ export function RelayList() {
                   </button>
                   <button
                     type="button"
-                    onClick={() => connectRelay(key)}
+                    onClick={() => connectRelay.mutate(key)}
                     className="inline-flex h-6 w-6 items-center justify-center rounded text-neutral-900 hover:bg-neutral-200 dark:text-neutral-100 dark:hover:bg-neutral-800"
                   >
                     <PlusIcon className="h-3 w-3" />

src/app/relays/components/userRelay.tsx

@@ -1,71 +0,0 @@
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-
-import { RelayForm } from '@app/relays/components/relayForm';
-
-import { useNDK } from '@libs/ndk/provider';
-import { useStorage } from '@libs/storage/provider';
-
-import { CancelIcon } from '@shared/icons';
-
-export function UserRelay() {
-  const queryClient = useQueryClient();
-
-  const { relayUrls } = useNDK();
-  const { db } = useStorage();
-  const { status, data } = useQuery({
-    queryKey: ['user-relay'],
-    queryFn: async () => {
-      return await db.getExplicitRelayUrls();
-    },
-    refetchOnWindowFocus: false,
-  });
-
-  const removeRelay = async (relayUrl: string) => {
-    await db.removeRelay(relayUrl);
-    queryClient.invalidateQueries({
-      queryKey: ['user-relay'],
-    });
-  };
-
-  return (
-    <div className="mt-3 px-3">
-      {status === 'pending' ? (
-        <p>Loading...</p>
-      ) : (
-        <div className="flex flex-col gap-2">
-          {data.map((item) => (
-            <div
-              key={item}
-              className="group flex h-10 items-center justify-between rounded-lg bg-neutral-100 pl-3 pr-1.5 dark:bg-neutral-900"
-            >
-              <div className="inline-flex items-center gap-2.5">
-                {relayUrls.includes(item) ? (
-                  <span className="relative flex h-2 w-2">
-                    <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
-                    <span className="relative inline-flex h-2 w-2 rounded-full bg-teal-500"></span>
-                  </span>
-                ) : (
-                  <span className="relative flex h-2 w-2">
-                    <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75"></span>
-                    <span className="relative inline-flex h-2 w-2 rounded-full bg-red-500"></span>
-                  </span>
-                )}
-                <p className="max-w-[20rem] truncate text-sm font-medium text-neutral-900 dark:text-neutral-100">
-                  {item}
-                </p>
-              </div>
-              <button
-                type="button"
-                onClick={() => removeRelay(item)}
-                className="hidden h-6 w-6 items-center justify-center rounded group-hover:inline-flex hover:bg-neutral-300 dark:hover:bg-neutral-700"
-              >
-                <CancelIcon className="h-4 w-4 text-neutral-900 dark:text-neutral-100" />
-              </button>
-            </div>
-          ))}
-          <RelayForm />
-        </div>
-      )}
-    </div>
-  );
-}

src/app/relays/components/userRelayList.tsx

@@ -0,0 +1,91 @@
+import { NDKKind, NDKSubscriptionCacheUsage } from '@nostr-dev-kit/ndk';
+import { useQuery } from '@tanstack/react-query';
+
+import { RelayForm } from '@app/relays/components/relayForm';
+
+import { useNDK } from '@libs/ndk/provider';
+import { useStorage } from '@libs/storage/provider';
+
+import { CancelIcon } from '@shared/icons';
+
+import { useRelay } from '@utils/hooks/useRelay';
+
+export function UserRelayList() {
+  const { db } = useStorage();
+  const { ndk } = useNDK();
+  const { removeRelay } = useRelay();
+  const { status, data } = useQuery({
+    queryKey: ['relays', db.account.pubkey],
+    queryFn: async () => {
+      const event = await ndk.fetchEvent(
+        {
+          kinds: [NDKKind.RelayList],
+          authors: [db.account.pubkey],
+        },
+        { cacheUsage: NDKSubscriptionCacheUsage.ONLY_RELAY }
+      );
+
+      if (!event) throw new Error('relay set not found');
+      return event.tags;
+    },
+    refetchOnWindowFocus: false,
+  });
+
+  const currentRelays = new Set([...ndk.pool.relays.values()].map((item) => item.url));
+
+  return (
+    <div className="col-span-1">
+      <div className="inline-flex h-16 w-full items-center border-b border-neutral-100 px-3 dark:border-neutral-900">
+        <h3 className="font-semibold">Connected relays</h3>
+      </div>
+      <div className="mt-3 flex flex-col gap-2 px-3">
+        {status === 'pending' ? (
+          <p>Loading...</p>
+        ) : !data ? (
+          <div className="flex h-20 w-full items-center justify-center rounded-xl bg-neutral-100 dark:bg-neutral-900">
+            <p className="text-sm font-medium">You not have personal relay set yet</p>
+          </div>
+        ) : (
+          data.map((item) => (
+            <div
+              key={item[1]}
+              className="group flex h-11 items-center justify-between rounded-lg bg-neutral-100 px-3 dark:bg-neutral-900"
+            >
+              <div className="inline-flex items-baseline gap-2">
+                {currentRelays.has(item[1]) ? (
+                  <span className="relative flex h-2 w-2">
+                    <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
+                    <span className="relative inline-flex h-2 w-2 rounded-full bg-teal-500"></span>
+                  </span>
+                ) : (
+                  <span className="relative flex h-2 w-2">
+                    <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75"></span>
+                    <span className="relative inline-flex h-2 w-2 rounded-full bg-red-500"></span>
+                  </span>
+                )}
+                <p className="max-w-[20rem] truncate text-sm font-medium text-neutral-900 dark:text-neutral-100">
+                  {item[1]}
+                </p>
+              </div>
+              <div className="inline-flex items-center gap-2">
+                {item[2] ? (
+                  <div className="inline-flex h-6 w-max items-center justify-center rounded bg-neutral-200 px-2 text-xs font-medium capitalize dark:bg-neutral-900">
+                    {item[2]}
+                  </div>
+                ) : null}
+                <button
+                  type="button"
+                  onClick={() => removeRelay.mutate(item[1])}
+                  className="hidden h-6 w-6 items-center justify-center rounded group-hover:inline-flex hover:bg-neutral-300 dark:hover:bg-neutral-700"
+                >
+                  <CancelIcon className="h-4 w-4 text-neutral-900 dark:text-neutral-100" />
+                </button>
+              </div>
+            </div>
+          ))
+        )}
+        <RelayForm />
+      </div>
+    </div>
+  );
+}

src/app/relays/index.tsx

@@ -1,18 +1,11 @@
 import { RelayList } from '@app/relays/components/relayList';
-import { UserRelay } from '@app/relays/components/userRelay';
+import { UserRelayList } from '@app/relays/components/userRelayList';
 
 export function RelaysScreen() {
   return (
     <div className="grid h-full w-full grid-cols-3">
       <RelayList />
-      <div className="col-span-1">
+      <UserRelayList />
-        <div className="inline-flex h-16 w-full items-center border-b border-neutral-100 px-3 dark:border-neutral-900">
-          <h3 className="font-semibold text-neutral-900 dark:text-neutral-100">
-            Connected relays
-          </h3>
-        </div>
-        <UserRelay />
-      </div>
     </div>
   );
 }

src/app/settings/backup.tsx

@@ -39,7 +39,7 @@ export function BackupSettingScreen() {
                 readOnly
                 type={showPassword ? 'text' : 'password'}
                 value={nip19.nsecEncode(privkey)}
-                className="relative h-11 w-full resize-none rounded-lg bg-neutral-200 py-1 pl-3 pr-11 text-neutral-900 !outline-none placeholder:text-neutral-600 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
+                className="relative h-11 w-full resize-none rounded-lg border-none bg-neutral-200 py-1 pl-3 pr-11 text-neutral-900 !outline-none placeholder:text-neutral-600 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
               />
               <button
                 type="button"

src/app/settings/editProfile.tsx

@@ -186,7 +186,7 @@ export function EditProfileScreen() {
               type={'text'}
               {...register('display_name')}
               spellCheck={false}
-              className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
+              className="relative h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
             />
           </div>
           <div className="flex flex-col gap-1">
@@ -200,7 +200,7 @@ export function EditProfileScreen() {
               type={'text'}
               {...register('name')}
               spellCheck={false}
-              className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
+              className="relative h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
             />
           </div>
           <div className="flex flex-col gap-1">
@@ -214,7 +214,7 @@ export function EditProfileScreen() {
               <input
                 {...register('nip05')}
                 spellCheck={false}
-                className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
+                className="relative h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
               />
               <div className="absolute right-2 top-1/2 -translate-y-1/2 transform">
                 {nip05.verified ? (
@@ -247,7 +247,7 @@ export function EditProfileScreen() {
               type={'text'}
               {...register('website', { required: false })}
               spellCheck={false}
-              className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
+              className="relative h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
             />
           </div>
           <div className="flex flex-col gap-1">
@@ -261,7 +261,7 @@ export function EditProfileScreen() {
               type={'text'}
               {...register('lud16', { required: false })}
               spellCheck={false}
-              className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
+              className="relative h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
             />
           </div>
           <div className="flex flex-col gap-1">
@@ -274,14 +274,14 @@ export function EditProfileScreen() {
             <textarea
               {...register('about')}
               spellCheck={false}
-              className="relative h-20 w-full resize-none rounded-lg bg-neutral-100 px-3 py-2 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
+              className="relative h-20 w-full resize-none rounded-lg border-transparent bg-neutral-100 px-3 py-2 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
             />
           </div>
           <div>
             <button
               type="submit"
               disabled={!isValid}
-              className="mx-auto inline-flex h-9 w-full transform items-center justify-center gap-1 rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
+              className="mx-auto inline-flex h-11 w-full transform items-center justify-center gap-1 rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-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-white" />

src/app/settings/general.tsx

@@ -113,12 +113,6 @@ export function GeneralSettingScreen() {
             ...prev,
             hashtag: !!parseInt(item.value),
           }));
-
-        if (item.key === 'notification')
-          setSettings((prev) => ({
-            ...prev,
-            notification: !!parseInt(item.value),
-          }));
       });
     }
 

src/app/users/components/profile.tsx

@@ -26,49 +26,53 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
   const svgURI =
     'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(pubkey, 90, 50));
 
-  const follow = async (pubkey: string) => {
+  const follow = async () => {
     try {
+      if (!ndk.signer) return navigate('/new/privkey');
+      setFollowed(true);
+
       const user = ndk.getUser({ pubkey: db.account.pubkey });
       const contacts = await user.follows();
       const add = await user.follow(new NDKUser({ pubkey: pubkey }), contacts);
 
-      if (add) {
+      if (!add) {
-        setFollowed(true);
+        toast.success('You already follow this user');
-      } else {
+        setFollowed(false);
-        toast('You already follow this user');
       }
-    } catch (error) {
+    } catch (e) {
-      console.log(error);
+      toast.error(e);
+      setFollowed(false);
     }
   };
 
-  const unfollow = async (pubkey: string) => {
+  const unfollow = async () => {
     try {
       if (!ndk.signer) return navigate('/new/privkey');
+      setFollowed(false);
 
       const user = ndk.getUser({ pubkey: db.account.pubkey });
       const contacts = await user.follows();
       contacts.delete(new NDKUser({ pubkey: pubkey }));
 
-      let list: string[][];
+      const list = [...contacts].map((item) => [
-      contacts.forEach((el) => list.push(['p', el.pubkey, el.relayUrls?.[0] || '', '']));
+        'p',
-
+        item.pubkey,
+        item.relayUrls?.[0] || '',
+        '',
+      ]);
       const event = new NDKEvent(ndk);
       event.content = '';
       event.kind = NDKKind.Contacts;
       event.tags = list;
 
-      const publishedRelays = await event.publish();
+      await event.publish();
-      if (publishedRelays) {
+    } catch (e) {
-        setFollowed(false);
+      toast.error(e);
-      }
-    } catch (error) {
-      console.log(error);
     }
   };
 
   useEffect(() => {
-    if (db.account.follows.includes(pubkey)) {
+    if (db.account.contacts.includes(pubkey)) {
       setFollowed(true);
     }
   }, []);
@@ -96,7 +100,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
             loading="lazy"
             decoding="async"
             style={{ contentVisibility: 'auto' }}
-            className="h-14 w-14 rounded-lg bg-white ring-2 ring-neutral-100 dark:ring-neutral-900"
+            className="h-14 w-14 rounded-lg bg-white object-cover ring-2 ring-neutral-100 dark:ring-neutral-900"
           />
           <Avatar.Fallback delayMs={300}>
             <img
@@ -139,23 +143,23 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
             {followed ? (
               <button
                 type="button"
-                onClick={() => unfollow(pubkey)}
+                onClick={unfollow}
-                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-neutral-200 text-sm font-medium text-neutral-900 backdrop-blur-xl hover:bg-blue-600 hover:text-neutral-100 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-blue-600 dark:hover:text-neutral-100"
+                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-neutral-200 text-sm font-medium text-neutral-900 backdrop-blur-xl hover:bg-blue-500 hover:text-neutral-100 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-blue-600 dark:hover:text-neutral-100"
               >
                 Unfollow
               </button>
             ) : (
               <button
                 type="button"
-                onClick={() => follow(pubkey)}
+                onClick={follow}
-                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-neutral-200 text-sm font-medium text-neutral-900 backdrop-blur-xl hover:bg-blue-600 hover:text-neutral-100 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-blue-600 dark:hover:text-neutral-100"
+                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-neutral-200 text-sm font-medium text-neutral-900 backdrop-blur-xl hover:bg-blue-500 hover:text-neutral-100 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-blue-600 dark:hover:text-neutral-100"
               >
                 Follow
               </button>
             )}
             <Link
               to={`/chats/${pubkey}`}
-              className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-neutral-200 text-sm font-medium text-neutral-900 backdrop-blur-xl hover:bg-blue-600 hover:text-neutral-100 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-blue-600 dark:hover:text-neutral-100"
+              className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-neutral-200 text-sm font-medium text-neutral-900 backdrop-blur-xl hover:bg-blue-500 hover:text-neutral-100 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-blue-600 dark:hover:text-neutral-100"
             >
               Message
             </Link>

src/libs/ndk/instance.ts

@@ -1,127 +1,182 @@
-import NDK, { NDKNip46Signer, NDKPrivateKeySigner } from '@nostr-dev-kit/ndk';
+import NDK, {
+  NDKEvent,
+  NDKKind,
+  NDKNip46Signer,
+  NDKPrivateKeySigner,
+} from '@nostr-dev-kit/ndk';
 import { ndkAdapter } from '@nostr-fetch/adapter-ndk';
-import { message } from '@tauri-apps/plugin-dialog';
+import { useQueryClient } from '@tanstack/react-query';
-import { fetch } from '@tauri-apps/plugin-http';
+import { ask } from '@tauri-apps/plugin-dialog';
-import { NostrFetcher } from 'nostr-fetch';
+import { relaunch } from '@tauri-apps/plugin-process';
-import { useEffect, useMemo, useState } from 'react';
+import { NostrFetcher, normalizeRelayUrlSet } from 'nostr-fetch';
-import { toast } from 'sonner';
+import { useEffect, useState } from 'react';
 
 import NDKCacheAdapterTauri from '@libs/ndk/cache';
 import { useStorage } from '@libs/storage/provider';
 
+import { FETCH_LIMIT } from '@utils/constants';
+
 export const NDKInstance = () => {
-  const [ndk, setNDK] = useState<NDK | undefined>(undefined);
-  const [relayUrls, setRelayUrls] = useState<string[]>([]);
-
   const { db } = useStorage();
-  const fetcher = useMemo(
+  const queryClient = useQueryClient();
-    () => (ndk ? NostrFetcher.withCustomPool(ndkAdapter(ndk)) : null),
-    [ndk]
-  );
 
-  // TODO: fully support NIP-11
+  const [ndk, setNDK] = useState<NDK | undefined>(undefined);
-  async function getExplicitRelays() {
+  const [fetcher, setFetcher] = useState<NostrFetcher | undefined>(undefined);
-    try {
+  const [relayUrls, setRelayUrls] = useState<string[]>([]);
-      // get relays
-      const relays = await db.getExplicitRelayUrls();
-      const onlineRelays = new Set(relays);
-
-      const controller = new AbortController();
-      const timeoutId = setTimeout(() => controller.abort(), 8000);
-
-      for (const relay of relays) {
-        try {
-          const url = new URL(relay);
-          const res = await fetch(`https://${url.hostname}`, {
-            method: 'GET',
-            headers: {
-              Accept: 'application/nostr+json',
-            },
-            signal: controller.signal,
-          });
-
-          if (!res.ok) {
-            toast.warning(`${relay} is not working, skipping...`);
-            onlineRelays.delete(relay);
-          }
-
-          toast.success(`Connected to ${relay}`);
-        } catch {
-          toast.warning(`${relay} is not working, skipping...`);
-          onlineRelays.delete(relay);
-        } finally {
-          clearTimeout(timeoutId);
-        }
-      }
-
-      // return all online relays
-      return [...onlineRelays];
-    } catch (e) {
-      console.error(e);
-    }
-  }
 
   async function getSigner(nsecbunker?: boolean) {
     if (!db.account) return;
 
     // NIP-46 Signer
     if (nsecbunker) {
-      const localSignerPrivkey = await db.secureLoad(db.account.pubkey + '-nsecbunker');
+      const localSignerPrivkey = await db.secureLoad(`${db.account.pubkey}-nsecbunker`);
+      if (!localSignerPrivkey) return null;
+
       const localSigner = new NDKPrivateKeySigner(localSignerPrivkey);
-      // await remoteSigner.blockUntilReady();
+      const bunker = new NDK({
-      return new NDKNip46Signer(ndk, db.account.id, localSigner);
+        explicitRelayUrls: ['wss://relay.nsecbunker.com', 'wss://nostr.vulpem.com'],
+      });
+      bunker.connect();
+
+      const remoteSigner = new NDKNip46Signer(bunker, db.account.id, localSigner);
+      await remoteSigner.blockUntilReady();
+
+      return remoteSigner;
     }
 
-    // Private key Signer
+    // Privkey Signer
     const userPrivkey = await db.secureLoad(db.account.pubkey);
+    if (!userPrivkey) return null;
     return new NDKPrivateKeySigner(userPrivkey);
   }
 
   async function initNDK() {
-    const outboxSetting = await db.getSettingValue('outbox');
-    const bunkerSetting = await db.getSettingValue('nsecbunker');
-    const signer = await getSigner(!!parseInt(bunkerSetting));
-    const explicitRelayUrls = await getExplicitRelays();
-
-    const tauriAdapter = new NDKCacheAdapterTauri(db);
-    const instance = new NDK({
-      explicitRelayUrls,
-      cacheAdapter: tauriAdapter,
-      outboxRelayUrls: ['wss://purplepag.es'],
-      blacklistRelayUrls: [],
-      enableOutboxModel: !!parseInt(outboxSetting),
-    });
-    instance.signer = signer;
-
     try {
+      const outboxSetting = await db.getSettingValue('outbox');
+      const bunkerSetting = await db.getSettingValue('nsecbunker');
+      const explicitRelayUrls = normalizeRelayUrlSet([
+        'wss://relay.damus.io',
+        'wss://relay.nostr.band',
+        'wss://nos.lol',
+        'wss://nostr.mutinywallet.com',
+      ]);
+
+      const bunker = !!parseInt(bunkerSetting);
+      const outbox = !!parseInt(outboxSetting);
+
+      const tauriAdapter = new NDKCacheAdapterTauri(db);
+      const instance = new NDK({
+        explicitRelayUrls,
+        cacheAdapter: tauriAdapter,
+        outboxRelayUrls: ['wss://purplepag.es'],
+        enableOutboxModel: outbox,
+        autoConnectUserRelays: true,
+        autoFetchUserMutelist: true,
+        // clientName: 'Lume',
+        // clientNip89: '',
+      });
+
+      // add signer if exist
+      const signer = await getSigner(bunker);
+      if (signer) instance.signer = signer;
+
       // connect
-      await instance.connect(2000);
+      await instance.connect();
+      const _fetcher = NostrFetcher.withCustomPool(ndkAdapter(instance));
 
       // update account's metadata
       if (db.account) {
         const user = instance.getUser({ pubkey: db.account.pubkey });
-        const follows = [...(await user.follows())].map((user) => user.pubkey);
+        instance.activeUser = user;
-        const relayList = await user.relayList();
+        db.account.contacts = [...(await user.follows(undefined, outbox))].map(
+          (user) => user.pubkey
+        );
 
-        // update user's follows
+        // prefetch newsfeed
-        await db.updateAccount('follows', JSON.stringify(follows));
+        await queryClient.prefetchInfiniteQuery({
+          queryKey: ['newsfeed'],
+          initialPageParam: 0,
+          queryFn: async ({
+            signal,
+            pageParam,
+          }: {
+            signal: AbortSignal;
+            pageParam: number;
+          }) => {
+            const rootIds = new Set();
+            const dedupQueue = new Set();
 
-        // update user's relay list
+            const events = await _fetcher.fetchLatestEvents(
-        if (relayList) {
+              explicitRelayUrls,
-          for (const relay of relayList.relays) {
+              {
-            await db.createRelay(relay);
+                kinds: [NDKKind.Text, NDKKind.Repost],
-          }
+                authors: db.account.contacts,
-        }
+              },
+              FETCH_LIMIT,
+              { asOf: pageParam === 0 ? undefined : pageParam, abortSignal: signal }
+            );
+
+            const ndkEvents = events.map((event) => {
+              return new NDKEvent(ndk, event);
+            });
+
+            ndkEvents.forEach((event) => {
+              const tags = event.tags.filter((el) => el[0] === 'e');
+              if (tags && tags.length > 0) {
+                const rootId = tags.filter((el) => el[3] === 'root')[1] ?? tags[0][1];
+                if (rootIds.has(rootId)) return dedupQueue.add(event.id);
+                rootIds.add(rootId);
+              }
+            });
+
+            return ndkEvents
+              .filter((event) => !dedupQueue.has(event.id))
+              .sort((a, b) => b.created_at - a.created_at);
+          },
+        });
+
+        // prefetch notification
+        await queryClient.prefetchInfiniteQuery({
+          queryKey: ['notification'],
+          initialPageParam: 0,
+          queryFn: async ({
+            signal,
+            pageParam,
+          }: {
+            signal: AbortSignal;
+            pageParam: number;
+          }) => {
+            const events = await _fetcher.fetchLatestEvents(
+              explicitRelayUrls,
+              {
+                kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Reaction, NDKKind.Zap],
+                '#p': [db.account.pubkey],
+              },
+              FETCH_LIMIT,
+              { asOf: pageParam === 0 ? undefined : pageParam, abortSignal: signal }
+            );
+
+            const ndkEvents = events.map((event) => {
+              return new NDKEvent(ndk, event);
+            });
+
+            return ndkEvents.sort((a, b) => b.created_at - a.created_at);
+          },
+        });
       }
-    } catch (error) {
+
-      await message(`NDK instance init failed: ${error}`, {
+      setNDK(instance);
+      setFetcher(_fetcher);
+      setRelayUrls(explicitRelayUrls);
+    } catch (e) {
+      console.error(e);
+      const yes = await ask(e, {
         title: 'Lume',
         type: 'error',
+        okLabel: 'Yes',
       });
+      if (yes) relaunch();
     }
-
-    setNDK(instance);
-    setRelayUrls(explicitRelayUrls);
   }
 
   useEffect(() => {
@@ -130,7 +185,7 @@ export const NDKInstance = () => {
 
   return {
     ndk,
-    relayUrls,
     fetcher,
+    relayUrls,
   };
 };

src/libs/ndk/provider.tsx

@@ -8,7 +8,7 @@ import { NDKInstance } from '@libs/ndk/instance';
 
 import { LoaderIcon } from '@shared/icons';
 
-import { QUOTES } from '@stores/constants';
+import { QUOTES } from '@utils/constants';
 
 interface NDKContext {
   ndk: undefined | NDK;

src/libs/storage/instance.ts

@@ -3,8 +3,6 @@ import { invoke } from '@tauri-apps/api/primitives';
 import { Platform } from '@tauri-apps/plugin-os';
 import Database from '@tauri-apps/plugin-sql';
 
-import { FULL_RELAYS } from '@stores/constants';
-
 import { rawEvent } from '@utils/transform';
 import type {
   Account,
@@ -73,7 +71,7 @@ export class LumeStorage {
       [pubkey]
     );
 
-    if (results.length < 1) return null;
+    if (!results.length) return null;
 
     if (typeof results[0].profile === 'string')
       results[0].profile = JSON.parse(results[0].profile);
@@ -87,7 +85,7 @@ export class LumeStorage {
       [id]
     );
 
-    if (results.length < 1) return null;
+    if (!results.length) return null;
     return results[0];
   }
 
@@ -98,7 +96,7 @@ export class LumeStorage {
       `SELECT * FROM ndk_events WHERE id IN (${idsArr}) ORDER BY id;`
     );
 
-    if (results.length < 1) return [];
+    if (!results.length) return [];
     return results;
   }
 
@@ -108,7 +106,7 @@ export class LumeStorage {
       [pubkey]
     );
 
-    if (results.length < 1) return [];
+    if (!results.length) return [];
     return results;
   }
 
@@ -118,7 +116,7 @@ export class LumeStorage {
       [kind]
     );
 
-    if (results.length < 1) return [];
+    if (!results.length) return [];
     return results;
   }
 
@@ -128,7 +126,7 @@ export class LumeStorage {
       [kind, pubkey]
     );
 
-    if (results.length < 1) return [];
+    if (!results.length) return [];
     return results;
   }
 
@@ -138,7 +136,7 @@ export class LumeStorage {
       [tagValue]
     );
 
-    if (results.length < 1) return [];
+    if (!results.length) return [];
     return results;
   }
 
@@ -188,20 +186,9 @@ export class LumeStorage {
       'SELECT * FROM accounts WHERE is_active = "1" ORDER BY id DESC LIMIT 1;'
     );
 
-    if (results.length > 0) {
+    if (results.length) {
-      const account = results[0];
+      this.account = results[0];
-
+      this.account.contacts = [];
-      if (typeof account.follows === 'string')
-        account.follows = JSON.parse(account.follows) ?? [];
-
-      if (typeof account.circles === 'string')
-        account.circles = JSON.parse(account.circles) ?? [];
-
-      if (typeof account.last_login_at === 'string')
-        account.last_login_at = parseInt(account.last_login_at);
-
-      this.account = account;
-      return account;
     } else {
       console.log('no active account, please create new account');
       return null;
@@ -214,7 +201,7 @@ export class LumeStorage {
       [pubkey]
     );
 
-    if (existAccounts.length > 0) {
+    if (existAccounts.length) {
       await this.db.execute("UPDATE accounts SET is_active = '1' WHERE pubkey = $1;", [
         pubkey,
       ]);
@@ -225,8 +212,7 @@ export class LumeStorage {
       );
     }
 
-    const account = await this.getActiveAccount();
+    return await this.getActiveAccount();
-    return account;
   }
 
   public async updateAccount(column: string, value: string) {
@@ -241,15 +227,6 @@ export class LumeStorage {
     }
   }
 
-  public async updateLastLogin() {
-    const now = Math.floor(Date.now() / 1000);
-    this.account.last_login_at = now;
-    return await this.db.execute(
-      'UPDATE accounts SET last_login_at = $1 WHERE id = $2;',
-      [now, this.account.id]
-    );
-  }
-
   public async getWidgets() {
     const widgets: Array<Widget> = await this.db.select(
       'SELECT * FROM widgets WHERE account_id = $1 ORDER BY created_at DESC;',
@@ -421,24 +398,13 @@ export class LumeStorage {
     return results.length < 1;
   }
 
-  public async getExplicitRelayUrls() {
-    if (!this.account) return FULL_RELAYS;
-
-    const result: Relays[] = await this.db.select(
-      `SELECT * FROM relays WHERE account_id = "${this.account.id}" ORDER BY id DESC LIMIT 50;`
-    );
-
-    if (!result || !result.length) return FULL_RELAYS;
-    return result.map((el) => el.relay);
-  }
-
   public async createRelay(relay: string, purpose?: string) {
     const existRelays: Relays[] = await this.db.select(
       'SELECT * FROM relays WHERE relay = $1 AND account_id = $2 ORDER BY id DESC LIMIT 1;',
       [relay, this.account.id]
     );
 
-    if (!existRelays.length) return;
+    if (existRelays.length) return;
 
     return await this.db.execute(
       'INSERT OR IGNORE INTO relays (account_id, relay, purpose) VALUES ($1, $2, $3);',

src/libs/storage/provider.tsx

@@ -10,7 +10,7 @@ import { LumeStorage } from '@libs/storage/instance';
 
 import { LoaderIcon } from '@shared/icons';
 
-import { QUOTES } from '@stores/constants';
+import { QUOTES } from '@utils/constants';
 
 interface StorageContext {
   db: LumeStorage;

src/main.jsx

@@ -1,4 +1,5 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { createRoot } from 'react-dom/client';
 import { Toaster } from 'sonner';
 
@@ -11,6 +12,9 @@ const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       gcTime: 1000 * 60 * 60 * 24, // 24 hours
+      queries: {
+        retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000), // 10 seconds
+      },
     },
   },
 });
@@ -20,7 +24,8 @@ const root = createRoot(container);
 
 root.render(
   <QueryClientProvider client={queryClient}>
-    <Toaster position="top-center" closeButton theme="system" />
+    <ReactQueryDevtools initialIsOpen={false} />
+    <Toaster position="top-center" theme="system" closeButton />
     <StorageProvider>
       <NDKProvider>
         <App />

src/shared/accounts/active.tsx

@@ -11,18 +11,12 @@ import { useProfile } from '@utils/hooks/useProfile';
 
 export function ActiveAccount() {
   const { db } = useStorage();
-  const { status, user } = useProfile(db.account.pubkey);
+  const { user } = useProfile(db.account.pubkey);
 
   const svgURI =
     'data:image/svg+xml;utf8,' +
     encodeURIComponent(minidenticon(db.account.pubkey, 90, 50));
 
-  if (status === 'pending') {
-    return (
-      <div className="aspect-square h-auto w-full animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
-    );
-  }
-
   return (
     <div className="flex flex-col gap-1 rounded-lg bg-neutral-100 p-1 ring-1 ring-transparent hover:bg-neutral-200 hover:ring-blue-500 dark:bg-neutral-900 dark:hover:bg-neutral-800">
       <Link to="/settings/" className="relative inline-block">

src/shared/avatarUploader.tsx

@@ -1,7 +1,7 @@
 import { message } from '@tauri-apps/plugin-dialog';
 import { Dispatch, SetStateAction, useState } from 'react';
 
-import { LoaderIcon, PlusIcon } from '@shared/icons';
+import { LoaderIcon } from '@shared/icons';
 
 import { useNostr } from '@utils/hooks/useNostr';
 
@@ -37,14 +37,9 @@ export function AvatarUploader({
     <button
       type="button"
       onClick={() => uploadAvatar()}
-      className="inline-flex items-center gap-1 rounded-lg border border-blue-200 bg-blue-100 px-1.5 py-1 text-sm font-medium text-blue-500 hover:border-blue-300 hover:bg-blue-200 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-500 dark:hover:border-blue-800 dark:hover:bg-blue-800"
+      className="inline-flex items-center justify-center rounded-lg border border-blue-200 bg-blue-100 px-2 py-1.5 text-sm font-medium text-blue-500 hover:border-blue-300 hover:bg-blue-200 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-500 dark:hover:border-blue-800 dark:hover:bg-blue-800"
     >
-      {loading ? (
+      {loading ? <LoaderIcon className="h-4 w-4 animate-spin" /> : 'Change avatar'}
-        <LoaderIcon className="h-4 w-4 animate-spin" />
-      ) : (
-        <PlusIcon className="h-4 w-4" />
-      )}
-      Change avatar
     </button>
   );
 }

src/shared/layouts/auth.tsx

@@ -7,15 +7,17 @@ export function AuthLayout() {
   const { db } = useStorage();
 
   return (
-    <div className="flex h-screen w-screen flex-col bg-neutral-50 dark:bg-neutral-950">
+    <div className="flex h-screen w-screen flex-col">
       {db.platform !== 'macos' ? (
         <WindowTitlebar />
       ) : (
         <div data-tauri-drag-region className="h-9" />
       )}
-      <div className="flex h-full min-h-0 w-full">
+      <div className="h-full w-full px-2.5 pb-2.5 pt-1">
-        <Outlet />
+        <div className="flex h-full min-h-0 w-full rounded-lg bg-white p-3 shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-[inset_0_0_0.5px_1px_hsla(0,0%,100%,0.075),0_0_0_1px_hsla(0,0%,0%,0.05),0_0.3px_0.4px_hsla(0,0%,0%,0.02),0_0.9px_1.5px_hsla(0,0%,0%,0.045),0_3.5px_6px_hsla(0,0%,0%,0.09)]">
-        <ScrollRestoration />
+          <Outlet />
+          <ScrollRestoration />
+        </div>
       </div>
     </div>
   );

src/shared/logout.tsx

@@ -1,4 +1,5 @@
 import * as AlertDialog from '@radix-ui/react-alert-dialog';
+import { useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 
@@ -10,6 +11,7 @@ export function Logout() {
   const { ndk } = useNDK();
 
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
 
   const logout = async () => {
     try {
@@ -17,11 +19,14 @@ export function Logout() {
 
       // remove private key
       await db.secureRemove(db.account.pubkey);
-      await db.secureRemove(db.account.pubkey + '-bunker');
+      await db.secureRemove(db.account.pubkey + '-nsecbunker');
 
       // logout
       await db.accountLogout();
 
+      // clear cache
+      queryClient.clear();
+
       // redirect to welcome screen
       navigate('/auth/welcome');
     } catch (e) {

src/shared/notes/actions.tsx

@@ -7,8 +7,7 @@ import { NoteReaction } from '@shared/notes/actions/reaction';
 import { NoteRepost } from '@shared/notes/actions/repost';
 import { NoteZap } from '@shared/notes/actions/zap';
 
-import { WIDGET_KIND } from '@stores/constants';
+import { WIDGET_KIND } from '@utils/constants';
-
 import { useWidget } from '@utils/hooks/useWidget';
 
 export function NoteActions({

src/shared/notes/actions/zap.tsx

@@ -10,6 +10,7 @@ import CurrencyInput from 'react-currency-input-field';
 import { useNavigate } from 'react-router-dom';
 
 import { useNDK } from '@libs/ndk/provider';
+import { useStorage } from '@libs/storage/provider';
 
 import { CancelIcon, ZapIcon } from '@shared/icons';
 
@@ -21,6 +22,7 @@ export function NoteZap({ event }: { event: NDKEvent }) {
   const nwc = useRef(null);
   const navigate = useNavigate();
 
+  const { db } = useStorage();
   const { ndk } = useNDK();
   const { user } = useProfile(event.pubkey);
 
@@ -84,7 +86,9 @@ export function NoteZap({ event }: { event: NDKEvent }) {
 
   useEffect(() => {
     async function getWalletConnectURL() {
-      const uri: string = await invoke('secure_load', { key: 'nwc' });
+      const uri: string = await invoke('secure_load', {
+        key: `${db.account.pubkey}-nwc`,
+      });
       if (uri) setWalletConnectURL(uri);
     }
 
@@ -135,7 +139,7 @@ export function NoteZap({ event }: { event: NDKEvent }) {
                         max={10000} // 1M sats
                         maxLength={10000} // 1M sats
                         onValueChange={(value) => setAmount(value)}
-                        className="w-full flex-1 bg-transparent text-right text-4xl font-semibold placeholder:text-neutral-600 focus:outline-none dark:text-neutral-400"
+                        className="w-full flex-1 border-none bg-transparent text-right text-4xl font-semibold placeholder:text-neutral-600 focus:outline-none focus:ring-0 dark:text-neutral-400"
                       />
                       <span className="w-full flex-1 text-left text-4xl font-semibold text-neutral-600 dark:text-neutral-400">
                         sats
@@ -189,28 +193,28 @@ export function NoteZap({ event }: { event: NDKEvent }) {
                       autoCorrect="off"
                       autoCapitalize="off"
                       placeholder="Enter message (optional)"
-                      className="w-full resize-none rounded-lg bg-neutral-100 px-3 py-3 !outline-none placeholder:text-neutral-600 dark:bg-neutral-900 dark:text-neutral-400"
+                      className="w-full resize-none rounded-lg border-transparent bg-neutral-100 px-3 py-3 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-400"
                     />
                     <div className="flex flex-col gap-2">
                       {walletConnectURL ? (
                         <button
                           type="button"
                           onClick={() => createZapRequest()}
-                          className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 px-4 font-medium text-white hover:bg-blue-600"
+                          className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 px-4 font-medium text-white hover:bg-blue-600"
                         >
                           {isCompleted ? (
-                            <p>Successfully tipped</p>
+                            <p className="leading-tight">Successfully zapped</p>
                           ) : isLoading ? (
                             <span className="flex flex-col">
-                              <p>Waiting for approval</p>
+                              <p className="leading-tight">Waiting for approval</p>
-                              <p className="text-xs text-neutral-600 dark:text-neutral-400">
+                              <p className="text-xs leading-tight text-neutral-100">
                                 Go to your wallet and approve payment request
                               </p>
                             </span>
                           ) : (
                             <span className="flex flex-col">
-                              <p>Send tip</p>
+                              <p className="leading-tight">Send zap</p>
-                              <p className="text-xs text-neutral-600 dark:text-neutral-400">
+                              <p className="text-xs leading-tight text-neutral-100">
                                 You&apos;re using nostr wallet connect
                               </p>
                             </span>
@@ -220,7 +224,7 @@ export function NoteZap({ event }: { event: NDKEvent }) {
                         <button
                           type="button"
                           onClick={() => createZapRequest()}
-                          className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 px-4 font-medium text-white hover:bg-blue-600"
+                          className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 px-4 font-medium text-white hover:bg-blue-600"
                         >
                           Create Lightning invoice
                         </button>
@@ -234,7 +238,7 @@ export function NoteZap({ event }: { event: NDKEvent }) {
                     <QRCodeSVG value={invoice} size={256} />
                   </div>
                   <div className="flex flex-col items-center gap-1">
-                    <h3 className="text-lg font-medium">Scan to pay</h3>
+                    <h3 className="text-lg font-medium">Scan to zap</h3>
                     <span className="text-center text-sm text-neutral-600 dark:text-neutral-400">
                       You must use Bitcoin wallet which support Lightning
                       <br />

src/shared/notes/kinds/text.tsx

@@ -7,14 +7,14 @@ export function TextKind({ content, textmode }: { content: string; textmode?: bo
 
   if (textmode) {
     return (
-      <div className="break-p line-clamp-3 select-text leading-normal text-neutral-900 dark:text-neutral-100">
+      <div className="line-clamp-3 select-text leading-normal text-neutral-900 dark:text-neutral-100">
         {parsedContent}
       </div>
     );
   }
 
   return (
-    <div className={'min-w-0 px-3'}>
+    <div className="min-w-0 px-3">
       <div className="break-p select-text leading-normal text-neutral-900 dark:text-neutral-100">
         {parsedContent}
       </div>

src/shared/notes/mentions/hashtag.tsx

@@ -1,5 +1,4 @@
-import { WIDGET_KIND } from '@stores/constants';
+import { WIDGET_KIND } from '@utils/constants';
-
 import { useWidget } from '@utils/hooks/useWidget';
 
 export function Hashtag({ tag }: { tag: string }) {

src/shared/notes/mentions/note.tsx

@@ -9,8 +9,7 @@ import {
 } from '@shared/notes';
 import { User } from '@shared/user';
 
-import { WIDGET_KIND } from '@stores/constants';
+import { WIDGET_KIND } from '@utils/constants';
-
 import { useEvent } from '@utils/hooks/useEvent';
 import { useWidget } from '@utils/hooks/useWidget';
 

src/shared/notes/mentions/user.tsx

@@ -1,7 +1,6 @@
 import { memo } from 'react';
 
-import { WIDGET_KIND } from '@stores/constants';
+import { WIDGET_KIND } from '@utils/constants';
-
 import { useProfile } from '@utils/hooks/useProfile';
 import { useWidget } from '@utils/hooks/useWidget';
 

src/shared/notes/notify.tsx

@@ -1,109 +1,157 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { memo } from 'react';
 
-import { ShareIcon } from '@shared/icons';
+import { ReplyIcon, RepostIcon } from '@shared/icons';
-import {
+import { ChildNote, TextKind } from '@shared/notes';
-  MemoizedArticleKind,
-  MemoizedFileKind,
-  MemoizedTextKind,
-  NoteSkeleton,
-} from '@shared/notes';
 import { User } from '@shared/user';
 
-import { WIDGET_KIND } from '@stores/constants';
+import { WIDGET_KIND } from '@utils/constants';
-
 import { formatCreatedAt } from '@utils/createdAt';
-import { useEvent } from '@utils/hooks/useEvent';
+import { useNostr } from '@utils/hooks/useNostr';
 import { useWidget } from '@utils/hooks/useWidget';
 
 export function NotifyNote({ event }: { event: NDKEvent }) {
-  const createdAt = formatCreatedAt(event.created_at, false);
+  const { getEventThread } = useNostr();
-  const rootEventId = event.tags.find((el) => el[0] === 'e')?.[1];
-
-  const { status, data } = useEvent(rootEventId);
   const { addWidget } = useWidget();
 
-  const renderKind = (event: NDKEvent) => {
+  const thread = getEventThread(event.tags);
-    switch (event.kind) {
+  const createdAt = formatCreatedAt(event.created_at, false);
-      case NDKKind.Text:
-        return <MemoizedTextKind key={event.id} content={event.content} textmode />;
-      case NDKKind.Article:
-        return <MemoizedArticleKind key={event.id} id={event.id} tags={event.tags} />;
-      case 1063:
-        return <MemoizedFileKind key={event.id} tags={event.tags} />;
-      default:
-        return (
-          <div className="break-p line-clamp-3 select-text leading-normal text-neutral-900 dark:text-neutral-100">
-            {event.content}
-          </div>
-        );
-    }
-  };
 
-  const renderText = (kind: number) => {
+  if (event.kind === NDKKind.Reaction) {
-    switch (kind) {
-      case NDKKind.Text:
-        return 'replied';
-      case NDKKind.Reaction: {
-        return `reacted your post`;
-      }
-      case NDKKind.Repost:
-        return 'reposted your post';
-      case NDKKind.Zap:
-        return 'zapped your post';
-      default:
-        return 'unknown';
-    }
-  };
-
-  if (status === 'pending') {
     return (
-      <div className="h-min w-full px-3 pb-3">
+      <div className="mb-3 h-min w-full px-3">
-        <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+        <div className="flex flex-col gap-2 rounded-xl bg-neutral-50 p-3 dark:bg-neutral-950">
-          <NoteSkeleton />
+          <div className="flex h-10 items-center justify-between">
+            <div className="relative flex w-full items-center gap-2 px-3 pt-2">
+              <div className="absolute -left-0.5 -top-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-blue-100 text-xs ring-2 ring-neutral-50 dark:bg-blue-900 dark:ring-neutral-950">
+                {event.content === '+' ? '👍' : event.content}
+              </div>
+              <div className="flex flex-1 items-center justify-between">
+                <div className="inline-flex items-center gap-1.5">
+                  <User pubkey={event.pubkey} variant="notify" />
+                  <p className="text-neutral-700 dark:text-neutral-300">reacted</p>
+                </div>
+                <div className="text-neutral-500 dark:text-neutral-400">{createdAt}</div>
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col gap-2">
+            <div className="w-full px-3">
+              <div className="flex h-min w-full flex-col gap-3 rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
+                {thread.rootEventId ? <ChildNote id={thread.rootEventId} /> : null}
+              </div>
+            </div>
+            <button
+              type="button"
+              onClick={() =>
+                addWidget.mutate({
+                  kind: WIDGET_KIND.thread,
+                  title: 'Thread',
+                  content: thread.rootEventId,
+                })
+              }
+              className="self-start text-blue-500 hover:text-blue-600"
+            >
+              Show original post
+            </button>
+          </div>
         </div>
       </div>
     );
   }
 
-  return (
+  if (event.kind === NDKKind.Repost) {
-    <div className="mb-3 h-min w-full px-3">
+    return (
-      <div className="flex flex-col gap-2 rounded-xl bg-neutral-50 p-3 dark:bg-neutral-950">
+      <div className="mb-3 h-min w-full px-3">
-        <div className="flex h-10 items-center justify-between">
+        <div className="flex flex-col gap-2 rounded-xl bg-neutral-50 p-3 dark:bg-neutral-950">
-          <div className="relative flex w-full items-center gap-2 px-3 pt-2">
+          <div className="flex h-10 items-center justify-between">
-            <div className="absolute -left-0.5 -top-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-blue-100 text-xs ring-2 ring-neutral-50 dark:bg-blue-900 dark:ring-neutral-950">
+            <div className="relative flex w-full items-center gap-2 px-3 pt-2">
-              {event.kind === 7 ? (event.content === '+' ? '👍' : event.content) : '⚡️'}
+              <div className="absolute -left-0.5 -top-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-teal-500 text-xs ring-2 ring-neutral-50 dark:ring-neutral-950">
-            </div>
+                <RepostIcon className="h-4 w-4 text-white" />
-            <div className="flex flex-1 items-center justify-between">
+              </div>
-              <div className="inline-flex items-center gap-1.5">
+              <div className="flex flex-1 items-center justify-between">
-                <User pubkey={event.pubkey} variant="notify" />
+                <div className="inline-flex items-center gap-1.5">
-                <p className="text-neutral-900 dark:text-neutral-100">
+                  <User pubkey={event.pubkey} variant="notify" />
-                  {renderText(event.kind)}
+                  <p className="text-neutral-700 dark:text-neutral-300">reposted</p>
-                </p>
+                </div>
+                <div className="text-neutral-500 dark:text-neutral-400">{createdAt}</div>
               </div>
-              <div className="text-neutral-500 dark:text-neutral-400">{createdAt}</div>
             </div>
           </div>
-        </div>
+          <div className="flex flex-col gap-2">
-        <div className="flex gap-2">
+            <div className="w-full px-3">
-          <div className="flex-1">{data ? renderKind(data) : <p>Loading...</p>}</div>
+              <div className="flex h-min w-full flex-col gap-3 rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
-          <button
+                {thread.rootEventId ? <ChildNote id={thread.rootEventId} /> : null}
-            type="button"
+              </div>
-            onClick={() =>
+            </div>
-              addWidget.mutate({
+            <button
-                kind: WIDGET_KIND.thread,
+              type="button"
-                title: 'Thread',
+              onClick={() =>
-                content: data.id,
+                addWidget.mutate({
-              })
+                  kind: WIDGET_KIND.thread,
-            }
+                  title: 'Thread',
-            className="inline-flex min-h-full w-10 shrink-0 items-center justify-center rounded-lg text-neutral-600 hover:text-blue-500 dark:text-neutral-400"
+                  content: thread.rootEventId,
-          >
+                })
-            <ShareIcon className="h-5 w-5" />
+              }
-          </button>
+              className="self-start text-blue-500 hover:text-blue-600"
+            >
+              Show original post
+            </button>
+          </div>
         </div>
       </div>
-    </div>
+    );
-  );
+  }
+
+  if (event.kind === NDKKind.Text) {
+    return (
+      <div className="mb-3 h-min w-full px-3">
+        <div className="flex flex-col gap-2 rounded-xl bg-neutral-50 p-3 dark:bg-neutral-950">
+          <div className="flex h-10 items-center justify-between">
+            <div className="relative flex w-full items-center gap-2 px-3 pt-2">
+              <div className="absolute -left-0.5 -top-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-blue-500 text-xs ring-2 ring-neutral-50 dark:ring-neutral-950">
+                <ReplyIcon className="h-4 w-4 text-white" />
+              </div>
+              <div className="flex flex-1 items-center justify-between">
+                <div className="inline-flex items-center gap-1.5">
+                  <User pubkey={event.pubkey} variant="notify" />
+                  <p className="text-neutral-700 dark:text-neutral-300">replied</p>
+                </div>
+                <div className="text-neutral-500 dark:text-neutral-400">{createdAt}</div>
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col gap-2">
+            <div className="w-full px-3">
+              <div className="flex h-min w-full flex-col gap-3 rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
+                {thread?.replyEventId ? (
+                  <ChildNote id={thread?.replyEventId} />
+                ) : thread?.rootEventId ? (
+                  <ChildNote id={thread?.rootEventId} isRoot />
+                ) : null}
+                <button
+                  type="button"
+                  onClick={() =>
+                    addWidget.mutate({
+                      kind: WIDGET_KIND.thread,
+                      title: 'Thread',
+                      content: thread.replyEventId
+                        ? thread.replyEventId
+                        : thread.rootEventId,
+                    })
+                  }
+                  className="self-start text-blue-500 hover:text-blue-600"
+                >
+                  Show full thread
+                </button>
+              </div>
+            </div>
+            <TextKind content={event.content} textmode />
+          </div>
+        </div>
+      </div>
+    );
+  }
 }
 
 export const MemoizedNotifyNote = memo(NotifyNote);

src/shared/notes/replies/form.tsx

@@ -50,7 +50,7 @@ export function NoteReplyForm({ rootEvent }: { rootEvent: NDKEvent }) {
         value={value}
         onChange={(e) => setValue(e.target.value)}
         placeholder="Reply to this post..."
-        className="h-28 w-full resize-none rounded-t-xl bg-neutral-100 px-5 py-4 text-neutral-900 !outline-none placeholder:text-neutral-600 dark:bg-neutral-900 dark:text-neutral-100 dark:placeholder:text-neutral-400"
+        className="h-28 w-full resize-none rounded-t-xl border-transparent bg-neutral-100 px-5 py-4 text-neutral-900 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
         spellCheck={false}
       />
       <div className="inline-flex items-center justify-end gap-2 rounded-b-xl p-2">

src/shared/notes/text.tsx

@@ -1,16 +1,16 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { memo } from 'react';
+import { twMerge } from 'tailwind-merge';
 
 import { ChildNote, NoteActions } from '@shared/notes';
 import { User } from '@shared/user';
 
-import { WIDGET_KIND } from '@stores/constants';
+import { WIDGET_KIND } from '@utils/constants';
-
 import { useNostr } from '@utils/hooks/useNostr';
 import { useRichContent } from '@utils/hooks/useRichContent';
 import { useWidget } from '@utils/hooks/useWidget';
 
-export function TextNote({ event }: { event: NDKEvent }) {
+export function TextNote({ event, className }: { event: NDKEvent; className?: string }) {
   const { parsedContent } = useRichContent(event.content);
   const { addWidget } = useWidget();
   const { getEventThread } = useNostr();
@@ -18,7 +18,7 @@ export function TextNote({ event }: { event: NDKEvent }) {
   const thread = getEventThread(event.tags);
 
   return (
-    <div className="mb-3 h-min w-full px-3">
+    <div className={twMerge('mb-3 h-min w-full px-3', className)}>
       <div className="relative flex flex-col gap-2 overflow-hidden rounded-xl bg-neutral-50 pt-3 dark:bg-neutral-950">
         <User pubkey={event.pubkey} time={event.created_at} eventId={event.id} />
         {thread ? (

src/shared/titleBar.tsx

@@ -33,13 +33,13 @@ export function TitleBar({
       <div className="col-span-1 flex justify-center">
         {id === '9999' ? (
           <div className="isolate flex -space-x-2">
-            {db.account.follows
+            {db.account.contacts
               ?.slice(0, 8)
               .map((item) => <User key={item} pubkey={item} variant="ministacked" />)}
-            {db.account.follows?.length > 8 ? (
+            {db.account.contacts?.length > 8 ? (
               <div className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-neutral-300 text-neutral-900 ring-1 ring-white dark:bg-neutral-700 dark:text-neutral-100 dark:ring-black">
                 <span className="text-[8px] font-medium">
-                  +{db.account.follows?.length - 8}
+                  +{db.account.contacts?.length - 8}
                 </span>
               </div>
             ) : null}

src/shared/user.tsx

@@ -4,7 +4,7 @@ import { minidenticon } from 'minidenticons';
 import { memo, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
-import { RepostIcon, WorldIcon } from '@shared/icons';
+import { RepostIcon } from '@shared/icons';
 import { NIP05 } from '@shared/nip05';
 import { MoreActions } from '@shared/notes';
 
@@ -133,10 +133,9 @@ export const User = memo(function User({
       return (
         <div className="flex items-center gap-2.5">
           <div className="h-14 w-14 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
-          <div>
+          <div className="flex flex-col gap-1.5">
             <div className="h-3.5 w-36 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
             <div className="h-4 w-24 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
-            <div className="h-4 w-24 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
           </div>
         </div>
       );
@@ -150,37 +149,23 @@ export const User = memo(function User({
             alt={pubkey}
             loading="lazy"
             decoding="async"
-            className="h-14 w-14 rounded-lg object-cover"
+            className="h-11 w-11 rounded-lg object-cover"
           />
           <Avatar.Fallback delayMs={300}>
             <img
               src={svgURI}
               alt={pubkey}
-              className="h-14 w-14 rounded-lg bg-black dark:bg-white"
+              className="h-11 w-11 rounded-lg bg-black dark:bg-white"
             />
           </Avatar.Fallback>
         </Avatar.Root>
-        <div className="flex h-full flex-col items-start justify-between">
+        <div className="flex flex-col items-start text-start">
-          <div className="flex flex-col items-start gap-1 text-start">
+          <p className="max-w-[15rem] truncate text-lg font-semibold">
-            <p className="max-w-[15rem] truncate text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+            {user?.name || user?.display_name || user?.displayName}
-              {user?.name || user?.display_name || user?.displayName}
+          </p>
-            </p>
+          <p className="break-p prose prose-neutral max-w-none select-text whitespace-pre-line leading-normal dark:prose-invert">
-            <p className="break-p prose prose-neutral max-w-none select-text whitespace-pre-line leading-normal dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-1 prose-a:font-normal prose-a:text-blue-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-blue-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2 hover:prose-a:text-blue-500">
+            {user?.about || user?.bio || 'No bio'}
-              {user?.about || user?.bio || 'No bio'}
+          </p>
-            </p>
-          </div>
-          <div className="flex flex-col gap-2">
-            {user?.website ? (
-              <Link
-                to={user?.website}
-                target="_blank"
-                className="inline-flex items-center gap-2 text-sm text-neutral-900 dark:text-neutral-100/70"
-              >
-                <WorldIcon className="h-4 w-4" />
-                <p className="max-w-[10rem] truncate">{user?.website}</p>
-              </Link>
-            ) : null}
-          </div>
         </div>
       </div>
     );
@@ -222,7 +207,7 @@ export const User = memo(function User({
             {user?.name || user?.display_name || user?.displayName}
           </h3>
           <p className="max-w-[10rem] truncate text-sm text-neutral-900 dark:text-neutral-100/70">
-            {user?.username || displayNpub(pubkey, 16)}
+            {user?.nip05 || user?.username || displayNpub(pubkey, 16)}
           </p>
         </div>
       </div>

src/shared/userProfile.tsx

@@ -61,7 +61,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
   };
 
   useEffect(() => {
-    if (db.account.follows.includes(pubkey)) {
+    if (db.account.contacts.includes(pubkey)) {
       setFollowed(true);
     }
   }, []);

src/shared/widgets/article.tsx

@@ -12,8 +12,7 @@ import { MemoizedArticleNote } from '@shared/notes';
 import { TitleBar } from '@shared/titleBar';
 import { WidgetWrapper } from '@shared/widgets';
 
-import { FETCH_LIMIT } from '@stores/constants';
+import { FETCH_LIMIT } from '@utils/constants';
-
 import { Widget } from '@utils/types';
 
 export function ArticleWidget({ widget }: { widget: Widget }) {
@@ -40,7 +39,7 @@ export function ArticleWidget({ widget }: { widget: Widget }) {
         } else {
           filter = {
             kinds: [NDKKind.Article],
-            authors: db.account.follows,
+            authors: db.account.contacts,
           };
         }
 

src/shared/widgets/file.tsx

@@ -12,8 +12,7 @@ import { MemoizedFileNote } from '@shared/notes';
 import { TitleBar } from '@shared/titleBar';
 import { WidgetWrapper } from '@shared/widgets';
 
-import { FETCH_LIMIT } from '@stores/constants';
+import { FETCH_LIMIT } from '@utils/constants';
-
 import { Widget } from '@utils/types';
 
 export function FileWidget({ widget }: { widget: Widget }) {
@@ -40,7 +39,7 @@ export function FileWidget({ widget }: { widget: Widget }) {
         } else {
           filter = {
             kinds: [1063],
-            authors: db.account.follows,
+            authors: db.account.contacts,
           };
         }
 

src/shared/widgets/group.tsx

@@ -15,8 +15,7 @@ import {
 import { TitleBar } from '@shared/titleBar';
 import { WidgetWrapper } from '@shared/widgets';
 
-import { FETCH_LIMIT } from '@stores/constants';
+import { FETCH_LIMIT } from '@utils/constants';
-
 import { Widget } from '@utils/types';
 
 export function GroupWidget({ widget }: { widget: Widget }) {

src/shared/widgets/hashtag.tsx

@@ -10,8 +10,7 @@ import { MemoizedRepost, MemoizedTextNote, UnknownNote } from '@shared/notes';
 import { TitleBar } from '@shared/titleBar';
 import { WidgetWrapper } from '@shared/widgets';
 
-import { FETCH_LIMIT } from '@stores/constants';
+import { FETCH_LIMIT } from '@utils/constants';
-
 import { Widget } from '@utils/types';
 
 export function HashtagWidget({ widget }: { widget: Widget }) {

src/shared/widgets/newsfeed.tsx

@@ -16,7 +16,7 @@ import {
 import { TitleBar } from '@shared/titleBar';
 import { LiveUpdater, WidgetWrapper } from '@shared/widgets';
 
-import { FETCH_LIMIT } from '@stores/constants';
+import { FETCH_LIMIT } from '@utils/constants';
 
 export function NewsfeedWidget() {
   const { db } = useStorage();
@@ -39,7 +39,7 @@ export function NewsfeedWidget() {
           relayUrls,
           {
             kinds: [NDKKind.Text, NDKKind.Repost],
-            authors: db.account.follows,
+            authors: db.account.contacts,
           },
           FETCH_LIMIT,
           { asOf: pageParam === 0 ? undefined : pageParam, abortSignal: signal }

src/shared/widgets/notification.tsx

@@ -11,8 +11,7 @@ import { MemoizedNotifyNote, NoteSkeleton } from '@shared/notes';
 import { TitleBar } from '@shared/titleBar';
 import { WidgetWrapper } from '@shared/widgets';
 
-import { FETCH_LIMIT } from '@stores/constants';
+import { FETCH_LIMIT } from '@utils/constants';
-
 import { useNostr } from '@utils/hooks/useNostr';
 import { sendNativeNotification } from '@utils/notification';
 
@@ -54,7 +53,6 @@ export function NotificationWidget() {
         if (!lastEvent) return;
         return lastEvent.created_at - 1;
       },
-      enabled: false,
       refetchOnWindowFocus: false,
       refetchOnMount: false,
       refetchOnReconnect: false,

src/shared/widgets/other/addGroupFeeds.tsx

@@ -12,8 +12,7 @@ import {
 } from '@shared/icons';
 import { User } from '@shared/user';
 
-import { WIDGET_KIND } from '@stores/constants';
+import { WIDGET_KIND } from '@utils/constants';
-
 import { useWidget } from '@utils/hooks/useWidget';
 
 export function AddGroupFeeds({ currentWidgetId }: { currentWidgetId: string }) {
@@ -96,7 +95,7 @@ export function AddGroupFeeds({ currentWidgetId }: { currentWidgetId: string })
                   Users
                 </span>
                 <div className="flex h-[420px] flex-col overflow-y-auto rounded-xl bg-neutral-100 py-2 dark:bg-neutral-900">
-                  {db.account.follows.map((item: string) => (
+                  {db.account.contacts.map((item: string) => (
                     <button
                       key={item}
                       type="button"

src/shared/widgets/other/addHashtagFeeds.tsx

@@ -3,8 +3,7 @@ import { Resolver, useForm } from 'react-hook-form';
 
 import { CancelIcon, GroupFeedsIcon, PlusIcon } from '@shared/icons';
 
-import { HASHTAGS, WIDGET_KIND } from '@stores/constants';
+import { HASHTAGS, WIDGET_KIND } from '@utils/constants';
-
 import { useWidget } from '@utils/hooks/useWidget';
 
 type FormValues = {

src/shared/widgets/other/liveUpdater.tsx

@@ -30,12 +30,12 @@ export function LiveUpdater({ status }: { status: QueryStatus }) {
   useEffect(() => {
     let sub: NDKSubscription = undefined;
 
-    if (status === 'success' && db.account && db.account.follows.length > 0) {
+    if (status === 'success' && db.account && db.account?.follows?.length > 0) {
       queryClient.fetchQuery({ queryKey: ['notification'] });
 
       const filter: NDKFilter = {
         kinds: [NDKKind.Text, NDKKind.Repost],
-        authors: db.account.follows,
+        authors: db.account.contacts,
         since: Math.floor(Date.now() / 1000),
       };
 

src/shared/widgets/other/nostrBandUserProfile.tsx

@@ -1,4 +1,4 @@
-import { NDKEvent, NDKKind, NDKUser } from '@nostr-dev-kit/ndk';
+import { NDKUser } from '@nostr-dev-kit/ndk';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
@@ -6,7 +6,7 @@ import { toast } from 'sonner';
 import { useNDK } from '@libs/ndk/provider';
 import { useStorage } from '@libs/storage/provider';
 
-import { FollowIcon, UnfollowIcon } from '@shared/icons';
+import { FollowIcon } from '@shared/icons';
 
 import { shortenKey } from '@utils/shortenKey';
 
@@ -16,58 +16,35 @@ export interface Profile {
 }
 
 export function NostrBandUserProfile({ data }: { data: Profile }) {
-  const embedProfile = data.profile ? JSON.parse(data.profile.content) : null;
-  const profile = embedProfile;
-
   const { db } = useStorage();
   const { ndk } = useNDK();
 
   const [followed, setFollowed] = useState(false);
   const navigate = useNavigate();
 
+  const profile = data.profile ? JSON.parse(data.profile.content) : null;
+
   const follow = async (pubkey: string) => {
     try {
+      if (!ndk.signer) return navigate('/new/privkey');
+      setFollowed(true);
+
       const user = ndk.getUser({ pubkey: db.account.pubkey });
       const contacts = await user.follows();
       const add = await user.follow(new NDKUser({ pubkey: pubkey }), contacts);
 
-      if (add) {
+      if (!add) {
-        setFollowed(true);
+        toast.success('You already follow this user');
-      } else {
-        toast('You already follow this user');
-      }
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  const unfollow = async (pubkey: string) => {
-    try {
-      if (!ndk.signer) return navigate('/new/privkey');
-
-      const user = ndk.getUser({ pubkey: db.account.pubkey });
-      const contacts = await user.follows();
-      contacts.delete(new NDKUser({ pubkey: pubkey }));
-
-      let list: string[][];
-      contacts.forEach((el) => list.push(['p', el.pubkey, el.relayUrls?.[0] || '', '']));
-
-      const event = new NDKEvent(ndk);
-      event.content = '';
-      event.kind = NDKKind.Contacts;
-      event.tags = list;
-
-      const publishedRelays = await event.publish();
-      if (publishedRelays) {
         setFollowed(false);
       }
-    } catch (error) {
+    } catch (e) {
-      console.log(error);
+      toast.error(e);
+      setFollowed(false);
     }
   };
 
   useEffect(() => {
-    if (db.account.follows.includes(data.pubkey)) {
+    if (db.account.contacts.includes(data.pubkey)) {
       setFollowed(true);
     }
   }, []);
@@ -100,15 +77,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
             </div>
           </div>
           <div className="inline-flex items-center gap-2">
-            {followed ? (
+            {!followed ? (
-              <button
-                type="button"
-                onClick={() => unfollow(data.pubkey)}
-                className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-neutral-200 text-neutral-900 backdrop-blur-xl hover:bg-blue-600 hover:text-white dark:bg-neutral-800 dark:text-neutral-100 dark:hover:text-white"
-              >
-                <UnfollowIcon className="h-4 w-4" />
-              </button>
-            ) : (
               <button
                 type="button"
                 onClick={() => follow(data.pubkey)}
@@ -116,7 +85,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
               >
                 <FollowIcon className="h-4 w-4" />
               </button>
-            )}
+            ) : null}
           </div>
         </div>
         <div className="mt-2 line-clamp-5 whitespace-pre-line break-all text-neutral-900 dark:text-neutral-100">

src/shared/widgets/other/toggleWidgetList.tsx

@@ -1,8 +1,7 @@
 import { PlusIcon } from '@shared/icons';
 import { WidgetWrapper } from '@shared/widgets';
 
-import { WIDGET_KIND } from '@stores/constants';
+import { WIDGET_KIND } from '@utils/constants';
-
 import { useWidget } from '@utils/hooks/useWidget';
 
 export function ToggleWidgetList() {

src/shared/widgets/other/widgetList.tsx

@@ -2,8 +2,7 @@ import { ArticleIcon, MediaIcon, PlusIcon } from '@shared/icons';
 import { TitleBar } from '@shared/titleBar';
 import { AddGroupFeeds, AddHashtagFeeds, WidgetWrapper } from '@shared/widgets';
 
-import { TOPICS, WIDGET_KIND } from '@stores/constants';
+import { TOPICS, WIDGET_KIND } from '@utils/constants';
-
 import { useWidget } from '@utils/hooks/useWidget';
 import { Widget } from '@utils/types';
 

src/shared/widgets/topic.tsx

@@ -16,8 +16,7 @@ import {
 import { TitleBar } from '@shared/titleBar';
 import { WidgetWrapper } from '@shared/widgets';
 
-import { FETCH_LIMIT } from '@stores/constants';
+import { FETCH_LIMIT } from '@utils/constants';
-
 import { Widget } from '@utils/types';
 
 export function TopicWidget({ widget }: { widget: Widget }) {

src/stores/onboarding.ts

@@ -1,40 +0,0 @@
-import { create } from 'zustand';
-import { createJSONStorage, persist } from 'zustand/middleware';
-
-interface OnboardingState {
-  enrich: boolean;
-  hashtag: boolean;
-  circle: boolean;
-  relays: boolean;
-  outbox: boolean;
-  notification: boolean;
-  toggleEnrich: () => void;
-  toggleHashtag: () => void;
-  toggleCircle: () => void;
-  toggleRelays: () => void;
-  toggleOutbox: () => void;
-  toggleNotification: () => void;
-}
-
-export const useOnboarding = create<OnboardingState>()(
-  persist(
-    (set) => ({
-      enrich: false,
-      hashtag: false,
-      circle: false,
-      relays: false,
-      outbox: false,
-      notification: false,
-      toggleEnrich: () => set((state) => ({ enrich: !state.enrich })),
-      toggleHashtag: () => set((state) => ({ hashtag: !state.hashtag })),
-      toggleCircle: () => set((state) => ({ circle: !state.circle })),
-      toggleRelays: () => set((state) => ({ relays: !state.relays })),
-      toggleOutbox: () => set((state) => ({ outbox: !state.outbox })),
-      toggleNotification: () => set((state) => ({ notification: !state.notification })),
-    }),
-    {
-      name: 'onboarding',
-      storage: createJSONStorage(() => sessionStorage),
-    }
-  )
-);

src/utils/hooks/useNostr.ts

@@ -219,7 +219,7 @@ export function useNostr() {
     const relayMap = new Map<string, string[]>();
     const relayEvents = fetcher.fetchLatestEventsPerAuthor(
       {
-        authors: db.account.follows,
+        authors: db.account.contacts,
         relayUrls: relayUrls,
       },
       { kinds: [NDKKind.RelayList] },

src/utils/hooks/useProfile.ts

@@ -1,9 +1,11 @@
 import { NDKUserProfile } from '@nostr-dev-kit/ndk';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { nip19 } from 'nostr-tools';
 
 import { useNDK } from '@libs/ndk/provider';
 
 export function useProfile(pubkey: string, embed?: string) {
+  const queryClient = useQueryClient();
   const { ndk } = useNDK();
   const {
     status,
@@ -12,21 +14,34 @@ export function useProfile(pubkey: string, embed?: string) {
   } = useQuery({
     queryKey: ['user', pubkey],
     queryFn: async () => {
+      // parse data from nostr.band api
       if (embed) {
         const profile: NDKUserProfile = JSON.parse(embed);
         return profile;
       }
 
-      const cleanPubkey = pubkey.replace(/[^a-zA-Z0-9]/g, '');
+      // get clean pubkey without any special characters
-      const user = ndk.getUser({ pubkey: cleanPubkey });
+      let hexstring = pubkey.replace(/[^a-zA-Z0-9]/g, '');
 
-      if (!user) return Promise.reject(new Error("user's profile not found"));
+      if (hexstring.startsWith('npub1') || hexstring.startsWith('nprofile1')) {
-      return await user.fetchProfile();
+        const decoded = nip19.decode(hexstring);
+        if (decoded.type === 'nprofile') hexstring = decoded.data.pubkey;
+        if (decoded.type === 'npub') hexstring = decoded.data;
+      }
+
+      const user = ndk.getUser({ pubkey: hexstring });
+      const profile = await user.fetchProfile();
+
+      if (!profile)
+        throw new Error(
+          `Cannot get metadata for ${pubkey}, will be retry after 10 seconds`
+        );
+      return profile;
     },
-    staleTime: Infinity,
+    initialData: () => queryClient.getQueryData(['user', pubkey]) as NDKUserProfile,
-    refetchOnMount: false,
     refetchOnWindowFocus: false,
     refetchOnReconnect: false,
+    retry: 2,
   });
 
   return { status, user, error };

src/utils/hooks/useRelay.ts

@@ -0,0 +1,89 @@
+import { NDKEvent, NDKKind, NDKRelayUrl, NDKTag } from '@nostr-dev-kit/ndk';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { useNDK } from '@libs/ndk/provider';
+import { useStorage } from '@libs/storage/provider';
+
+export function useRelay() {
+  const { db } = useStorage();
+  const { ndk } = useNDK();
+
+  const queryClient = useQueryClient();
+
+  const connectRelay = useMutation({
+    mutationFn: async (relay: NDKRelayUrl, purpose?: 'read' | 'write' | undefined) => {
+      // Cancel any outgoing refetches
+      await queryClient.cancelQueries({ queryKey: ['relays', db.account.pubkey] });
+
+      // Snapshot the previous value
+      const prevRelays: NDKTag[] = queryClient.getQueryData([
+        'relays',
+        db.account.pubkey,
+      ]);
+
+      // create new relay list if not exist
+      if (!prevRelays) {
+        const newListEvent = new NDKEvent(ndk);
+        newListEvent.kind = NDKKind.RelayList;
+        newListEvent.tags = [['r', relay, purpose ?? '']];
+        await newListEvent.publish();
+      }
+
+      // add relay to exist list
+      const index = prevRelays.findIndex((el) => el[1] === relay);
+      if (index > -1) return;
+
+      const event = new NDKEvent(ndk);
+      event.kind = NDKKind.RelayList;
+      event.tags = [...prevRelays, ['r', relay, purpose ?? '']];
+
+      await event.publish();
+
+      // Optimistically update to the new value
+      queryClient.setQueryData(['relays', db.account.pubkey], (prev: NDKTag[]) => [
+        ...prev,
+        ['r', relay, purpose ?? ''],
+      ]);
+
+      // Return a context object with the snapshotted value
+      return { prevRelays };
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ['relays', db.account.pubkey] });
+    },
+  });
+
+  const removeRelay = useMutation({
+    mutationFn: async (relay: NDKRelayUrl) => {
+      // Cancel any outgoing refetches
+      await queryClient.cancelQueries({ queryKey: ['relays', db.account.pubkey] });
+
+      // Snapshot the previous value
+      const prevRelays: NDKTag[] = queryClient.getQueryData([
+        'relays',
+        db.account.pubkey,
+      ]);
+
+      if (!prevRelays) return;
+
+      const index = prevRelays.findIndex((el) => el[1] === relay);
+      if (index > -1) prevRelays.splice(index, 1);
+
+      const event = new NDKEvent(ndk);
+      event.kind = NDKKind.RelayList;
+      event.tags = prevRelays;
+      await event.publish();
+
+      // Optimistically update to the new value
+      queryClient.setQueryData(['relays', db.account.pubkey], prevRelays);
+
+      // Return a context object with the snapshotted value
+      return { prevRelays };
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ['relays', db.account.pubkey] });
+    },
+  });
+
+  return { connectRelay, removeRelay };
+}

src/utils/types.d.ts

@@ -1,4 +1,4 @@
-import { type NDKEvent, type NDKUserProfile } from '@nostr-dev-kit/ndk';
+import { type NDKEvent, NDKRelayList, type NDKUserProfile } from '@nostr-dev-kit/ndk';
 import { type Response } from '@tauri-apps/plugin-http';
 
 export interface RichContent {
@@ -21,18 +21,16 @@ export interface DBEvent {
   richContent?: RichContent;
 }
 
-export interface Account extends NDKUserProfile {
+export interface Account {
   id: string;
   pubkey: string;
-  follows: null | string[];
-  circles: null | string[];
   is_active: number;
-  last_login_at: number;
+  contacts: string[];
-}
+  relayList: NDKRelayList;
-
+  /**
-export interface Profile extends NDKUserProfile {
+   * @deprecated Use contacts instead
-  ident?: string;
+   */
-  pubkey?: string;
+  follows: string[];
 }
 
 export interface WidgetGroup {

tailwind.config.js

@@ -46,7 +46,9 @@ module.exports = {
     },
   },
   plugins: [
+    require('@tailwindcss/forms'),
     require('@tailwindcss/typography'),
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
     require('tailwind-scrollbar')({ nocompatible: true }),
   ],
 };

vite.config.ts

@@ -1,9 +1,17 @@
 import react from '@vitejs/plugin-react-swc';
 import { defineConfig } from 'vite';
+import topLevelAwait from 'vite-plugin-top-level-await';
 import viteTsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
-  plugins: [react(), viteTsconfigPaths()],
+  plugins: [
+    react(),
+    viteTsconfigPaths(),
+    topLevelAwait({
+      promiseExportName: '__tla',
+      promiseImportName: (i) => `__tla_${i}`,
+    }),
+  ],
   envPrefix: ['VITE_', 'TAURI_'],
   build: {
     target: process.env.TAURI_PLATFORM === 'windows' ? 'chrome105' : 'safari13',