chore: make the ui consistent (#19)

Reviewed-on: #19
Co-authored-by: Ren Amamiya <reya@lume.nu>
Co-committed-by: Ren Amamiya <reya@lume.nu>

.github/workflows/release.yml

@@ -21,7 +21,7 @@ jobs:
             os: windows-11-arm
             target: aarch64-pc-windows-msvc
           - platform: macos-x64
-            os: macos-13
+            os: macos-15-intel
             target: x86_64-apple-darwin
           - platform: macos-arm64
             os: macos-latest
@@ -130,7 +130,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Make get-crate-version executable
         run: chmod +x script/get-crate-version
@@ -163,8 +163,6 @@ jobs:
           generate_release_notes: true
           files: |
             artifacts/**/*
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Output release info
         run: |

Cargo.toml

@@ -9,10 +9,9 @@ edition = "2021"
 publish = false
 
 [workspace.dependencies]
-
 # GPUI
 gpui = { git = "https://github.com/zed-industries/zed" }
-gpui_platform = { git = "https://github.com/zed-industries/zed", features = ["screen-capture", "x11", "wayland", "runtime_shaders"] }
+gpui_platform = { git = "https://github.com/zed-industries/zed", features = ["font-kit", "x11", "wayland"] }
 gpui_linux = { git = "https://github.com/zed-industries/zed" }
 gpui_windows = { git = "https://github.com/zed-industries/zed" }
 gpui_macos = { git = "https://github.com/zed-industries/zed" }
@@ -21,8 +20,10 @@ reqwest_client = { git = "https://github.com/zed-industries/zed" }
 
 # Nostr
 nostr-lmdb = { git = "https://github.com/rust-nostr/nostr" }
+nostr-memory = { git = "https://github.com/rust-nostr/nostr" }
 nostr-connect = { git = "https://github.com/rust-nostr/nostr" }
 nostr-blossom = { git = "https://github.com/rust-nostr/nostr" }
+nostr-gossip-sqlite = { git = "https://github.com/rust-nostr/nostr" }
 nostr-sdk = { git = "https://github.com/rust-nostr/nostr" }
 nostr = { git = "https://github.com/rust-nostr/nostr", features = [ "nip96", "nip59", "nip49", "nip44" ] }
 

assets/icons/device.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+<path d="M14.25 10.75C14.25 9.64543 15.1454 8.75 16.25 8.75H20.25C21.3546 8.75 22.25 9.64543 22.25 10.75V19.25C22.25 20.3546 21.3546 21.25 20.25 21.25H16.25C15.1454 21.25 14.25 20.3546 14.25 19.25V10.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M17.25 18.25H19.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.25 8.75V5.75C20.25 4.64543 19.3546 3.75 18.25 3.75H5.75C4.64543 3.75 3.75 4.64543 3.75 5.75V14.75C3.75 15.8546 2.85457 16.75 1.75 16.75V18.25C1.75 19.3546 2.64543 20.25 3.75 20.25H14.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.75 16.75H14.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/icons/group.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+<circle cx="12" cy="8.75" r="3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="4" cy="9.80005" r="2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="20" cy="9.80005" r="2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.25 16.625V16.5C7.25 13.8766 9.37665 11.75 12 11.75C14.6234 11.75 16.75 13.8766 16.75 16.5V16.625C16.75 17.5225 16.0225 18.25 15.125 18.25H8.875C7.97754 18.25 7.25 17.5225 7.25 16.625Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.25 17.2602H2.75C1.64543 17.2602 0.706551 16.3538 0.919944 15.2701C1.25877 13.5493 2.15049 12.3257 4 11.8301" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.75 17.2601H21.25C22.3546 17.2601 23.2935 16.3538 23.08 15.27C22.7412 13.5493 21.8495 12.3257 20 11.8301" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/icons/input.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+<path d="M11.75 6.75H19.25C20.3546 6.75 21.25 7.64543 21.25 8.75V15.25C21.25 16.3546 20.3546 17.25 19.25 17.25H11.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.75 6.75H4.75C3.64543 6.75 2.75 7.64543 2.75 8.75V15.25C2.75 16.3546 3.64543 17.25 4.75 17.25H5.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.75 3.75V20.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/icons/scan.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+<path d="M7.25 4.75H4.75C3.64543 4.75 2.75 5.64543 2.75 6.75V9.25M16.75 4.75H19.25C20.3546 4.75 21.25 5.64543 21.25 6.75V9.25M21.25 14.75V17.25C21.25 18.3546 20.3546 19.25 19.25 19.25H16.75M7.25 19.25H4.75C3.64543 19.25 2.75 18.3546 2.75 17.25V14.75M7.75 9.75V14.25M16.25 9.75V14.25M12 9.75V12.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/themes/aurora.json

@@ -0,0 +1,144 @@
+{
+  "id": "aurora",
+  "name": "Aurora",
+  "author": "Coop",
+  "url": "https://github.com/lumehq/coop",
+  "light": {
+    "background": "#fdfcfeff",
+    "surface_background": "#f8f8ffff",
+    "elevated_surface_background": "#f0f1feff",
+    "panel_background": "#fdfcfeff",
+    "overlay": "#211f4300",
+    "title_bar": "#f0f1feff",
+    "title_bar_inactive": "#fdfcfeff",
+    "window_border": "#dadcffff",
+    "border": "#dadcffff",
+    "border_variant": "#cbcdffff",
+    "border_focused": "#5b5bd6ff",
+    "border_selected": "#5b5bd6ff",
+    "border_transparent": "#00000000",
+    "border_disabled": "#e6e7ffff",
+    "ring": "#5151cdff",
+    "text": "#1f2d5cff",
+    "text_muted": "#5753c6ff",
+    "text_placeholder": "#9b9ef0ff",
+    "text_accent": "#5b5bd6ff",
+    "text_danger": "#e54d2eff",
+    "text_warning": "#f76b15ff",
+    "icon": "#5753c6ff",
+    "icon_muted": "#9b9ef0ff",
+    "icon_accent": "#5151cdff",
+    "element_foreground": "#ffffffff",
+    "element_background": "#5b5bd6ff",
+    "element_hover": "#5151cdff",
+    "element_active": "#6e56cfff",
+    "element_selected": "#654dc4ff",
+    "element_disabled": "#5b5bd64d",
+    "secondary_foreground": "#1f2d5cff",
+    "secondary_background": "#f0f1feff",
+    "secondary_hover": "#e6e7ffff",
+    "secondary_active": "#dadcffff",
+    "secondary_selected": "#dadcffff",
+    "secondary_disabled": "#5b5bd64d",
+    "danger_foreground": "#ffffffff",
+    "danger_background": "#feebe7ff",
+    "danger_hover": "#ffcdc2ff",
+    "danger_active": "#fdbdafff",
+    "danger_selected": "#fdbdafff",
+    "danger_disabled": "#e54d2e4d",
+    "warning_foreground": "#ffffffff",
+    "warning_background": "#fff7edff",
+    "warning_hover": "#ffd19aff",
+    "warning_active": "#ffc182ff",
+    "warning_selected": "#ffc182ff",
+    "warning_disabled": "#f76b154d",
+    "ghost_element_background": "#00000000",
+    "ghost_element_background_alt": "#f0f1feff",
+    "ghost_element_hover": "#211f430d",
+    "ghost_element_active": "#211f431a",
+    "ghost_element_selected": "#211f431a",
+    "ghost_element_disabled": "#211f4305",
+    "tab_background": "#f0f1feff",
+    "tab_foreground": "#5753c6ff",
+    "tab_hover_background": "#211f430d",
+    "tab_active_background": "#fdfcfeff",
+    "tab_active_foreground": "#1f2d5cff",
+    "scrollbar_thumb_background": "#211f431a",
+    "scrollbar_thumb_hover_background": "#211f4326",
+    "scrollbar_thumb_border": "#00000000",
+    "scrollbar_track_background": "#00000000",
+    "scrollbar_track_border": "#00000000",
+    "drop_target_background": "#5b5bd61a",
+    "cursor": "#5b5bd6ff",
+    "selection": "#5b5bd640"
+  },
+  "dark": {
+    "background": "#14121fff",
+    "surface_background": "#1b1525ff",
+    "elevated_surface_background": "#291f43ff",
+    "panel_background": "#14121fff",
+    "overlay": "#baa7ff1a",
+    "title_bar": "#291f43ff",
+    "title_bar_inactive": "#14121fff",
+    "window_border": "#473876ff",
+    "border": "#473876ff",
+    "border_variant": "#3c2e69ff",
+    "border_focused": "#7d66d9ff",
+    "border_selected": "#7d66d9ff",
+    "border_transparent": "#00000000",
+    "border_disabled": "#33255bff",
+    "ring": "#6e56cfff",
+    "text": "#e2ddfeff",
+    "text_muted": "#baa7ffff",
+    "text_placeholder": "#6958adff",
+    "text_accent": "#baa7ffff",
+    "text_danger": "#ff977dff",
+    "text_warning": "#ffa057ff",
+    "icon": "#baa7ffff",
+    "icon_muted": "#6958adff",
+    "icon_accent": "#6e56cfff",
+    "element_foreground": "#14121fff",
+    "element_background": "#7d66d9ff",
+    "element_hover": "#baa7ffff",
+    "element_active": "#6e56cfff",
+    "element_selected": "#654dc4ff",
+    "element_disabled": "#7d66d94d",
+    "secondary_foreground": "#e2ddfeff",
+    "secondary_background": "#291f43ff",
+    "secondary_hover": "#33255bff",
+    "secondary_active": "#3c2e69ff",
+    "secondary_selected": "#3c2e69ff",
+    "secondary_disabled": "#7d66d94d",
+    "danger_foreground": "#181111ff",
+    "danger_background": "#391714ff",
+    "danger_hover": "#5e1c16ff",
+    "danger_active": "#6e2920ff",
+    "danger_selected": "#6e2920ff",
+    "danger_disabled": "#ff977d4d",
+    "warning_foreground": "#17120eff",
+    "warning_background": "#331e0bff",
+    "warning_hover": "#562800ff",
+    "warning_active": "#66350cff",
+    "warning_selected": "#66350cff",
+    "warning_disabled": "#ffa0574d",
+    "ghost_element_background": "#00000000",
+    "ghost_element_background_alt": "#291f43ff",
+    "ghost_element_hover": "#baa7ff0d",
+    "ghost_element_active": "#baa7ff1a",
+    "ghost_element_selected": "#baa7ff1a",
+    "ghost_element_disabled": "#baa7ff05",
+    "tab_background": "#291f43ff",
+    "tab_foreground": "#baa7ffff",
+    "tab_hover_background": "#baa7ff0d",
+    "tab_active_background": "#14121fff",
+    "tab_active_foreground": "#e2ddfeff",
+    "scrollbar_thumb_background": "#baa7ff1a",
+    "scrollbar_thumb_hover_background": "#baa7ff26",
+    "scrollbar_thumb_border": "#00000000",
+    "scrollbar_track_background": "#00000000",
+    "scrollbar_track_border": "#00000000",
+    "drop_target_background": "#baa7ff1a",
+    "cursor": "#baa7ffff",
+    "selection": "#baa7ff40"
+  }
+}

assets/themes/catppuccin-frappe.json

@@ -1,74 +1,76 @@
 {
   "id": "catppuccin-frappe",
   "name": "Catppuccin Frappé",
-  "author": "Catppuccin",
+  "author": "Catppuccin Org (ported by Coop)",
-  "url": "https://github.com/catppuccin/catppuccin",
+  "url": "https://catppuccin.com",
   "light": {
     "background": "#303446",
     "surface_background": "#292c3c",
     "elevated_surface_background": "#232634",
     "panel_background": "#303446",
     "overlay": "#c6d0f51a",
-    "title_bar": "#292c3c",
+    "title_bar": "#232634",
-    "title_bar_inactive": "#232634",
+    "title_bar_inactive": "#303446",
-    "window_border": "#737994",
+    "window_border": "#51576d",
-    "border": "#626880",
+    "border": "#51576d",
-    "border_variant": "#51576d",
+    "border_variant": "#414559",
     "border_focused": "#8caaee",
     "border_selected": "#8caaee",
-    "border_transparent": "#00000000",
+    "border_transparent": "#c6d0f500",
-    "border_disabled": "#414559",
+    "border_disabled": "#292c3c",
-    "ring": "#8caaee",
+    "ring": "#babbf1",
     "text": "#c6d0f5",
-    "text_muted": "#b5bfe2",
+    "text_muted": "#a5adce",
-    "text_placeholder": "#a5adce",
+    "text_placeholder": "#838ba7",
     "text_accent": "#8caaee",
-    "icon": "#b5bfe2",
+    "text_danger": "#e78284",
-    "icon_muted": "#a5adce",
+    "text_warning": "#ef9f76",
-    "icon_accent": "#8caaee",
+    "icon": "#a5adce",
-    "element_foreground": "#232634",
+    "icon_muted": "#838ba7",
+    "icon_accent": "#babbf1",
+    "element_foreground": "#303446",
     "element_background": "#8caaee",
     "element_hover": "#babbf1",
-    "element_active": "#7e99d6",
+    "element_active": "#99d1db",
-    "element_selected": "#7088bf",
+    "element_selected": "#85c1dc",
     "element_disabled": "#8caaee4d",
-    "secondary_foreground": "#7088bf",
+    "secondary_foreground": "#c6d0f5",
-    "secondary_background": "#292c3c",
+    "secondary_background": "#414559",
-    "secondary_hover": "#8caaee33",
+    "secondary_hover": "#51576d",
-    "secondary_active": "#232634",
+    "secondary_active": "#626880",
-    "secondary_selected": "#232634",
+    "secondary_selected": "#626880",
     "secondary_disabled": "#8caaee4d",
-    "danger_foreground": "#232634",
+    "danger_foreground": "#303446",
     "danger_background": "#e78284",
     "danger_hover": "#ea999c",
-    "danger_active": "#d07576",
+    "danger_active": "#ef9f76",
-    "danger_selected": "#b96869",
+    "danger_selected": "#e5c890",
     "danger_disabled": "#e782844d",
-    "warning_foreground": "#232634",
+    "warning_foreground": "#303446",
-    "warning_background": "#e5c890",
+    "warning_background": "#ef9f76",
-    "warning_hover": "#ef9f76",
+    "warning_hover": "#e5c890",
-    "warning_active": "#ceb482",
+    "warning_active": "#a6d189",
-    "warning_selected": "#b7a074",
+    "warning_selected": "#81c8be",
-    "warning_disabled": "#e5c8904d",
+    "warning_disabled": "#ef9f764d",
-    "ghost_element_background": "#00000000",
+    "ghost_element_background": "#c6d0f500",
-    "ghost_element_background_alt": "#414559",
+    "ghost_element_background_alt": "#292c3c",
-    "ghost_element_hover": "#c6d0f533",
+    "ghost_element_hover": "#c6d0f50d",
-    "ghost_element_active": "#51576d",
+    "ghost_element_active": "#c6d0f51a",
-    "ghost_element_selected": "#51576d",
+    "ghost_element_selected": "#c6d0f51a",
-    "ghost_element_disabled": "#c6d0f50d",
+    "ghost_element_disabled": "#c6d0f505",
-    "tab_inactive_background": "#292c3c",
+    "tab_background": "#232634",
-    "tab_inactive_foreground": "#b5bfe2",
+    "tab_foreground": "#a5adce",
+    "tab_hover_background": "#c6d0f50d",
     "tab_active_background": "#303446",
     "tab_active_foreground": "#c6d0f5",
-    "tab_hover_foreground": "#babbf1",
+    "scrollbar_thumb_background": "#c6d0f51a",
-    "scrollbar_thumb_background": "#c6d0f533",
+    "scrollbar_thumb_hover_background": "#c6d0f526",
-    "scrollbar_thumb_hover_background": "#c6d0f580",
+    "scrollbar_thumb_border": "#c6d0f500",
-    "scrollbar_thumb_border": "#00000000",
+    "scrollbar_track_background": "#c6d0f500",
-    "scrollbar_track_background": "#00000000",
+    "scrollbar_track_border": "#c6d0f500",
-    "scrollbar_track_border": "#51576d",
     "drop_target_background": "#8caaee1a",
-    "cursor": "#f2d5cf",
+    "cursor": "#8caaee",
-    "selection": "#949cbb40"
+    "selection": "#8caaee40"
   },
   "dark": {
     "background": "#303446",
@@ -76,65 +78,67 @@
     "elevated_surface_background": "#232634",
     "panel_background": "#303446",
     "overlay": "#c6d0f51a",
-    "title_bar": "#292c3c",
+    "title_bar": "#232634",
-    "title_bar_inactive": "#232634",
+    "title_bar_inactive": "#303446",
-    "window_border": "#737994",
+    "window_border": "#51576d",
-    "border": "#626880",
+    "border": "#51576d",
-    "border_variant": "#51576d",
+    "border_variant": "#414559",
     "border_focused": "#8caaee",
     "border_selected": "#8caaee",
-    "border_transparent": "#00000000",
+    "border_transparent": "#c6d0f500",
-    "border_disabled": "#414559",
+    "border_disabled": "#292c3c",
-    "ring": "#8caaee",
+    "ring": "#babbf1",
     "text": "#c6d0f5",
-    "text_muted": "#b5bfe2",
+    "text_muted": "#a5adce",
-    "text_placeholder": "#a5adce",
+    "text_placeholder": "#838ba7",
     "text_accent": "#8caaee",
-    "icon": "#b5bfe2",
+    "text_danger": "#e78284",
-    "icon_muted": "#a5adce",
+    "text_warning": "#ef9f76",
-    "icon_accent": "#8caaee",
+    "icon": "#a5adce",
-    "element_foreground": "#232634",
+    "icon_muted": "#838ba7",
+    "icon_accent": "#babbf1",
+    "element_foreground": "#303446",
     "element_background": "#8caaee",
     "element_hover": "#babbf1",
-    "element_active": "#7e99d6",
+    "element_active": "#99d1db",
-    "element_selected": "#7088bf",
+    "element_selected": "#85c1dc",
     "element_disabled": "#8caaee4d",
-    "secondary_foreground": "#7088bf",
+    "secondary_foreground": "#c6d0f5",
-    "secondary_background": "#292c3c",
+    "secondary_background": "#414559",
-    "secondary_hover": "#8caaee33",
+    "secondary_hover": "#51576d",
-    "secondary_active": "#232634",
+    "secondary_active": "#626880",
-    "secondary_selected": "#232634",
+    "secondary_selected": "#626880",
     "secondary_disabled": "#8caaee4d",
-    "danger_foreground": "#232634",
+    "danger_foreground": "#303446",
     "danger_background": "#e78284",
     "danger_hover": "#ea999c",
-    "danger_active": "#d07576",
+    "danger_active": "#ef9f76",
-    "danger_selected": "#b96869",
+    "danger_selected": "#e5c890",
     "danger_disabled": "#e782844d",
-    "warning_foreground": "#232634",
+    "warning_foreground": "#303446",
-    "warning_background": "#e5c890",
+    "warning_background": "#ef9f76",
-    "warning_hover": "#ef9f76",
+    "warning_hover": "#e5c890",
-    "warning_active": "#ceb482",
+    "warning_active": "#a6d189",
-    "warning_selected": "#b7a074",
+    "warning_selected": "#81c8be",
-    "warning_disabled": "#e5c8904d",
+    "warning_disabled": "#ef9f764d",
-    "ghost_element_background": "#00000000",
+    "ghost_element_background": "#c6d0f500",
-    "ghost_element_background_alt": "#414559",
+    "ghost_element_background_alt": "#292c3c",
-    "ghost_element_hover": "#c6d0f533",
+    "ghost_element_hover": "#c6d0f50d",
-    "ghost_element_active": "#51576d",
+    "ghost_element_active": "#c6d0f51a",
-    "ghost_element_selected": "#51576d",
+    "ghost_element_selected": "#c6d0f51a",
-    "ghost_element_disabled": "#c6d0f50d",
+    "ghost_element_disabled": "#c6d0f505",
-    "tab_inactive_background": "#292c3c",
+    "tab_background": "#232634",
-    "tab_inactive_foreground": "#b5bfe2",
+    "tab_foreground": "#a5adce",
+    "tab_hover_background": "#c6d0f50d",
     "tab_active_background": "#303446",
     "tab_active_foreground": "#c6d0f5",
-    "tab_hover_foreground": "#babbf1",
+    "scrollbar_thumb_background": "#c6d0f51a",
-    "scrollbar_thumb_background": "#c6d0f533",
+    "scrollbar_thumb_hover_background": "#c6d0f526",
-    "scrollbar_thumb_hover_background": "#c6d0f580",
+    "scrollbar_thumb_border": "#c6d0f500",
-    "scrollbar_thumb_border": "#00000000",
+    "scrollbar_track_background": "#c6d0f500",
-    "scrollbar_track_background": "#00000000",
+    "scrollbar_track_border": "#c6d0f500",
-    "scrollbar_track_border": "#51576d",
     "drop_target_background": "#8caaee1a",
-    "cursor": "#f2d5cf",
+    "cursor": "#8caaee",
-    "selection": "#949cbb40"
+    "selection": "#8caaee40"
   }
 }

assets/themes/catppuccin-latte.json

@@ -1,74 +1,76 @@
 {
   "id": "catppuccin-latte",
   "name": "Catppuccin Latte",
-  "author": "Catppuccin",
+  "author": "Catppuccin Org (ported by Coop)",
-  "url": "https://github.com/catppuccin/catppuccin",
+  "url": "https://catppuccin.com",
   "light": {
     "background": "#eff1f5",
     "surface_background": "#e6e9ef",
     "elevated_surface_background": "#dce0e8",
     "panel_background": "#eff1f5",
     "overlay": "#4c4f691a",
-    "title_bar": "#e6e9ef",
+    "title_bar": "#dce0e8",
-    "title_bar_inactive": "#dce0e8",
+    "title_bar_inactive": "#eff1f5",
-    "window_border": "#9ca0b0",
+    "window_border": "#bcc0cc",
-    "border": "#acb0be",
+    "border": "#bcc0cc",
-    "border_variant": "#bcc0cc",
+    "border_variant": "#ccd0da",
     "border_focused": "#1e66f5",
     "border_selected": "#1e66f5",
-    "border_transparent": "#00000000",
+    "border_transparent": "#4c4f6900",
-    "border_disabled": "#ccd0da",
+    "border_disabled": "#e6e9ef",
-    "ring": "#1e66f5",
+    "ring": "#7287fd",
     "text": "#4c4f69",
-    "text_muted": "#5c5f77",
+    "text_muted": "#6c6f85",
-    "text_placeholder": "#6c6f85",
+    "text_placeholder": "#8c8fa1",
     "text_accent": "#1e66f5",
-    "icon": "#5c5f77",
+    "text_danger": "#d20f39",
-    "icon_muted": "#6c6f85",
+    "text_warning": "#fe640b",
-    "icon_accent": "#1e66f5",
+    "icon": "#6c6f85",
+    "icon_muted": "#8c8fa1",
+    "icon_accent": "#7287fd",
     "element_foreground": "#eff1f5",
     "element_background": "#1e66f5",
-    "element_hover": "#8839ef",
+    "element_hover": "#7287fd",
-    "element_active": "#1c5ce0",
+    "element_active": "#04a5e5",
-    "element_selected": "#1a52cc",
+    "element_selected": "#209fb5",
     "element_disabled": "#1e66f54d",
-    "secondary_foreground": "#1a52cc",
+    "secondary_foreground": "#4c4f69",
-    "secondary_background": "#e6e9ef",
+    "secondary_background": "#ccd0da",
-    "secondary_hover": "#8839ef33",
+    "secondary_hover": "#bcc0cc",
-    "secondary_active": "#dce0e8",
+    "secondary_active": "#acb0be",
-    "secondary_selected": "#dce0e8",
+    "secondary_selected": "#acb0be",
     "secondary_disabled": "#1e66f54d",
     "danger_foreground": "#eff1f5",
     "danger_background": "#d20f39",
     "danger_hover": "#e64553",
-    "danger_active": "#bd0d33",
+    "danger_active": "#fe640b",
-    "danger_selected": "#a80b2d",
+    "danger_selected": "#df8e1d",
     "danger_disabled": "#d20f394d",
-    "warning_foreground": "#4c4f69",
+    "warning_foreground": "#eff1f5",
-    "warning_background": "#df8e1d",
+    "warning_background": "#fe640b",
-    "warning_hover": "#fe640b",
+    "warning_hover": "#df8e1d",
-    "warning_active": "#c9801a",
+    "warning_active": "#40a02b",
-    "warning_selected": "#b47217",
+    "warning_selected": "#179299",
-    "warning_disabled": "#df8e1d4d",
+    "warning_disabled": "#fe640b4d",
-    "ghost_element_background": "#00000000",
+    "ghost_element_background": "#4c4f6900",
-    "ghost_element_background_alt": "#ccd0da",
+    "ghost_element_background_alt": "#e6e9ef",
-    "ghost_element_hover": "#4c4f6933",
+    "ghost_element_hover": "#4c4f690d",
-    "ghost_element_active": "#bcc0cc",
+    "ghost_element_active": "#4c4f691a",
-    "ghost_element_selected": "#bcc0cc",
+    "ghost_element_selected": "#4c4f691a",
-    "ghost_element_disabled": "#4c4f690d",
+    "ghost_element_disabled": "#4c4f6905",
-    "tab_inactive_background": "#e6e9ef",
+    "tab_background": "#e6e9ef",
-    "tab_inactive_foreground": "#5c5f77",
+    "tab_foreground": "#6c6f85",
+    "tab_hover_background": "#4c4f690d",
     "tab_active_background": "#eff1f5",
     "tab_active_foreground": "#4c4f69",
-    "tab_hover_foreground": "#8839ef",
+    "scrollbar_thumb_background": "#4c4f691a",
-    "scrollbar_thumb_background": "#4c4f6933",
+    "scrollbar_thumb_hover_background": "#4c4f6926",
-    "scrollbar_thumb_hover_background": "#4c4f6980",
+    "scrollbar_thumb_border": "#4c4f6900",
-    "scrollbar_thumb_border": "#00000000",
+    "scrollbar_track_background": "#4c4f6900",
-    "scrollbar_track_background": "#00000000",
+    "scrollbar_track_border": "#4c4f6900",
-    "scrollbar_track_border": "#bcc0cc",
     "drop_target_background": "#1e66f51a",
-    "cursor": "#dc8a78",
+    "cursor": "#1e66f5",
-    "selection": "#7c7f9340"
+    "selection": "#1e66f540"
   },
   "dark": {
     "background": "#eff1f5",
@@ -76,65 +78,67 @@
     "elevated_surface_background": "#dce0e8",
     "panel_background": "#eff1f5",
     "overlay": "#4c4f691a",
-    "title_bar": "#e6e9ef",
+    "title_bar": "#dce0e8",
-    "title_bar_inactive": "#dce0e8",
+    "title_bar_inactive": "#eff1f5",
-    "window_border": "#9ca0b0",
+    "window_border": "#bcc0cc",
-    "border": "#acb0be",
+    "border": "#bcc0cc",
-    "border_variant": "#bcc0cc",
+    "border_variant": "#ccd0da",
     "border_focused": "#1e66f5",
     "border_selected": "#1e66f5",
-    "border_transparent": "#00000000",
+    "border_transparent": "#4c4f6900",
-    "border_disabled": "#ccd0da",
+    "border_disabled": "#e6e9ef",
-    "ring": "#1e66f5",
+    "ring": "#7287fd",
     "text": "#4c4f69",
-    "text_muted": "#5c5f77",
+    "text_muted": "#6c6f85",
-    "text_placeholder": "#6c6f85",
+    "text_placeholder": "#8c8fa1",
     "text_accent": "#1e66f5",
-    "icon": "#5c5f77",
+    "text_danger": "#d20f39",
-    "icon_muted": "#6c6f85",
+    "text_warning": "#fe640b",
-    "icon_accent": "#1e66f5",
+    "icon": "#6c6f85",
+    "icon_muted": "#8c8fa1",
+    "icon_accent": "#7287fd",
     "element_foreground": "#eff1f5",
     "element_background": "#1e66f5",
-    "element_hover": "#8839ef",
+    "element_hover": "#7287fd",
-    "element_active": "#1c5ce0",
+    "element_active": "#04a5e5",
-    "element_selected": "#1a52cc",
+    "element_selected": "#209fb5",
     "element_disabled": "#1e66f54d",
-    "secondary_foreground": "#1a52cc",
+    "secondary_foreground": "#4c4f69",
-    "secondary_background": "#e6e9ef",
+    "secondary_background": "#ccd0da",
-    "secondary_hover": "#8839ef33",
+    "secondary_hover": "#bcc0cc",
-    "secondary_active": "#dce0e8",
+    "secondary_active": "#acb0be",
-    "secondary_selected": "#dce0e8",
+    "secondary_selected": "#acb0be",
     "secondary_disabled": "#1e66f54d",
     "danger_foreground": "#eff1f5",
     "danger_background": "#d20f39",
     "danger_hover": "#e64553",
-    "danger_active": "#bd0d33",
+    "danger_active": "#fe640b",
-    "danger_selected": "#a80b2d",
+    "danger_selected": "#df8e1d",
     "danger_disabled": "#d20f394d",
-    "warning_foreground": "#4c4f69",
+    "warning_foreground": "#eff1f5",
-    "warning_background": "#df8e1d",
+    "warning_background": "#fe640b",
-    "warning_hover": "#fe640b",
+    "warning_hover": "#df8e1d",
-    "warning_active": "#c9801a",
+    "warning_active": "#40a02b",
-    "warning_selected": "#b47217",
+    "warning_selected": "#179299",
-    "warning_disabled": "#df8e1d4d",
+    "warning_disabled": "#fe640b4d",
-    "ghost_element_background": "#00000000",
+    "ghost_element_background": "#4c4f6900",
-    "ghost_element_background_alt": "#ccd0da",
+    "ghost_element_background_alt": "#e6e9ef",
-    "ghost_element_hover": "#4c4f6933",
+    "ghost_element_hover": "#4c4f690d",
-    "ghost_element_active": "#bcc0cc",
+    "ghost_element_active": "#4c4f691a",
-    "ghost_element_selected": "#bcc0cc",
+    "ghost_element_selected": "#4c4f691a",
-    "ghost_element_disabled": "#4c4f690d",
+    "ghost_element_disabled": "#4c4f6905",
-    "tab_inactive_background": "#e6e9ef",
+    "tab_background": "#e6e9ef",
-    "tab_inactive_foreground": "#5c5f77",
+    "tab_foreground": "#6c6f85",
+    "tab_hover_background": "#4c4f690d",
     "tab_active_background": "#eff1f5",
     "tab_active_foreground": "#4c4f69",
-    "tab_hover_foreground": "#8839ef",
+    "scrollbar_thumb_background": "#4c4f691a",
-    "scrollbar_thumb_background": "#4c4f6933",
+    "scrollbar_thumb_hover_background": "#4c4f6926",
-    "scrollbar_thumb_hover_background": "#4c4f6980",
+    "scrollbar_thumb_border": "#4c4f6900",
-    "scrollbar_thumb_border": "#00000000",
+    "scrollbar_track_background": "#4c4f6900",
-    "scrollbar_track_background": "#00000000",
+    "scrollbar_track_border": "#4c4f6900",
-    "scrollbar_track_border": "#bcc0cc",
     "drop_target_background": "#1e66f51a",
-    "cursor": "#dc8a78",
+    "cursor": "#1e66f5",
-    "selection": "#7c7f9340"
+    "selection": "#1e66f540"
   }
 }

assets/themes/catppuccin-macchiato.json

@@ -1,74 +1,76 @@
 {
   "id": "catppuccin-macchiato",
   "name": "Catppuccin Macchiato",
-  "author": "Catppuccin",
+  "author": "Catppuccin Org (ported by Coop)",
-  "url": "https://github.com/catppuccin/catppuccin",
+  "url": "https://catppuccin.com",
   "light": {
     "background": "#24273a",
     "surface_background": "#1e2030",
     "elevated_surface_background": "#181926",
     "panel_background": "#24273a",
     "overlay": "#cad3f51a",
-    "title_bar": "#1e2030",
+    "title_bar": "#181926",
-    "title_bar_inactive": "#181926",
+    "title_bar_inactive": "#24273a",
-    "window_border": "#6e738d",
+    "window_border": "#494d64",
-    "border": "#5b6078",
+    "border": "#494d64",
-    "border_variant": "#494d64",
+    "border_variant": "#363a4f",
     "border_focused": "#8aadf4",
     "border_selected": "#8aadf4",
-    "border_transparent": "#00000000",
+    "border_transparent": "#cad3f500",
-    "border_disabled": "#363a4f",
+    "border_disabled": "#1e2030",
-    "ring": "#8aadf4",
+    "ring": "#b7bdf8",
     "text": "#cad3f5",
-    "text_muted": "#b8c0e0",
+    "text_muted": "#a5adcb",
-    "text_placeholder": "#a5adcb",
+    "text_placeholder": "#8087a2",
     "text_accent": "#8aadf4",
-    "icon": "#b8c0e0",
+    "text_danger": "#ed8796",
-    "icon_muted": "#a5adcb",
+    "text_warning": "#f5a97f",
-    "icon_accent": "#8aadf4",
+    "icon": "#a5adcb",
-    "element_foreground": "#181926",
+    "icon_muted": "#8087a2",
+    "icon_accent": "#b7bdf8",
+    "element_foreground": "#24273a",
     "element_background": "#8aadf4",
     "element_hover": "#b7bdf8",
-    "element_active": "#7c9cdc",
+    "element_active": "#91d7e3",
-    "element_selected": "#6e8bc5",
+    "element_selected": "#7dc4e4",
     "element_disabled": "#8aadf44d",
-    "secondary_foreground": "#6e8bc5",
+    "secondary_foreground": "#cad3f5",
-    "secondary_background": "#1e2030",
+    "secondary_background": "#363a4f",
-    "secondary_hover": "#8aadf433",
+    "secondary_hover": "#494d64",
-    "secondary_active": "#181926",
+    "secondary_active": "#5b6078",
-    "secondary_selected": "#181926",
+    "secondary_selected": "#5b6078",
     "secondary_disabled": "#8aadf44d",
-    "danger_foreground": "#181926",
+    "danger_foreground": "#24273a",
     "danger_background": "#ed8796",
     "danger_hover": "#ee99a0",
-    "danger_active": "#d57a87",
+    "danger_active": "#f5a97f",
-    "danger_selected": "#be6d78",
+    "danger_selected": "#eed49f",
     "danger_disabled": "#ed87964d",
-    "warning_foreground": "#181926",
+    "warning_foreground": "#24273a",
-    "warning_background": "#eed49f",
+    "warning_background": "#f5a97f",
-    "warning_hover": "#f5a97f",
+    "warning_hover": "#eed49f",
-    "warning_active": "#d6bf8f",
+    "warning_active": "#a6da95",
-    "warning_selected": "#beaa7f",
+    "warning_selected": "#8bd5ca",
-    "warning_disabled": "#eed49f4d",
+    "warning_disabled": "#f5a97f4d",
-    "ghost_element_background": "#00000000",
+    "ghost_element_background": "#cad3f500",
-    "ghost_element_background_alt": "#363a4f",
+    "ghost_element_background_alt": "#1e2030",
-    "ghost_element_hover": "#cad3f533",
+    "ghost_element_hover": "#cad3f50d",
-    "ghost_element_active": "#494d64",
+    "ghost_element_active": "#cad3f51a",
-    "ghost_element_selected": "#494d64",
+    "ghost_element_selected": "#cad3f51a",
-    "ghost_element_disabled": "#cad3f50d",
+    "ghost_element_disabled": "#cad3f505",
-    "tab_inactive_background": "#1e2030",
+    "tab_background": "#181926",
-    "tab_inactive_foreground": "#b8c0e0",
+    "tab_foreground": "#a5adcb",
+    "tab_hover_background": "#cad3f50d",
     "tab_active_background": "#24273a",
     "tab_active_foreground": "#cad3f5",
-    "tab_hover_foreground": "#b7bdf8",
+    "scrollbar_thumb_background": "#cad3f51a",
-    "scrollbar_thumb_background": "#cad3f533",
+    "scrollbar_thumb_hover_background": "#cad3f526",
-    "scrollbar_thumb_hover_background": "#cad3f580",
+    "scrollbar_thumb_border": "#cad3f500",
-    "scrollbar_thumb_border": "#00000000",
+    "scrollbar_track_background": "#cad3f500",
-    "scrollbar_track_background": "#00000000",
+    "scrollbar_track_border": "#cad3f500",
-    "scrollbar_track_border": "#494d64",
     "drop_target_background": "#8aadf41a",
-    "cursor": "#f4dbd6",
+    "cursor": "#8aadf4",
-    "selection": "#939ab740"
+    "selection": "#8aadf440"
   },
   "dark": {
     "background": "#24273a",
@@ -76,65 +78,67 @@
     "elevated_surface_background": "#181926",
     "panel_background": "#24273a",
     "overlay": "#cad3f51a",
-    "title_bar": "#1e2030",
+    "title_bar": "#181926",
-    "title_bar_inactive": "#181926",
+    "title_bar_inactive": "#24273a",
-    "window_border": "#6e738d",
+    "window_border": "#494d64",
-    "border": "#5b6078",
+    "border": "#494d64",
-    "border_variant": "#494d64",
+    "border_variant": "#363a4f",
     "border_focused": "#8aadf4",
     "border_selected": "#8aadf4",
-    "border_transparent": "#00000000",
+    "border_transparent": "#cad3f500",
-    "border_disabled": "#363a4f",
+    "border_disabled": "#1e2030",
-    "ring": "#8aadf4",
+    "ring": "#b7bdf8",
     "text": "#cad3f5",
-    "text_muted": "#b8c0e0",
+    "text_muted": "#a5adcb",
-    "text_placeholder": "#a5adcb",
+    "text_placeholder": "#8087a2",
     "text_accent": "#8aadf4",
-    "icon": "#b8c0e0",
+    "text_danger": "#ed8796",
-    "icon_muted": "#a5adcb",
+    "text_warning": "#f5a97f",
-    "icon_accent": "#8aadf4",
+    "icon": "#a5adcb",
-    "element_foreground": "#181926",
+    "icon_muted": "#8087a2",
+    "icon_accent": "#b7bdf8",
+    "element_foreground": "#24273a",
     "element_background": "#8aadf4",
     "element_hover": "#b7bdf8",
-    "element_active": "#7c9cdc",
+    "element_active": "#91d7e3",
-    "element_selected": "#6e8bc5",
+    "element_selected": "#7dc4e4",
     "element_disabled": "#8aadf44d",
-    "secondary_foreground": "#6e8bc5",
+    "secondary_foreground": "#cad3f5",
-    "secondary_background": "#1e2030",
+    "secondary_background": "#363a4f",
-    "secondary_hover": "#8aadf433",
+    "secondary_hover": "#494d64",
-    "secondary_active": "#181926",
+    "secondary_active": "#5b6078",
-    "secondary_selected": "#181926",
+    "secondary_selected": "#5b6078",
     "secondary_disabled": "#8aadf44d",
-    "danger_foreground": "#181926",
+    "danger_foreground": "#24273a",
     "danger_background": "#ed8796",
     "danger_hover": "#ee99a0",
-    "danger_active": "#d57a87",
+    "danger_active": "#f5a97f",
-    "danger_selected": "#be6d78",
+    "danger_selected": "#eed49f",
     "danger_disabled": "#ed87964d",
-    "warning_foreground": "#181926",
+    "warning_foreground": "#24273a",
-    "warning_background": "#eed49f",
+    "warning_background": "#f5a97f",
-    "warning_hover": "#f5a97f",
+    "warning_hover": "#eed49f",
-    "warning_active": "#d6bf8f",
+    "warning_active": "#a6da95",
-    "warning_selected": "#beaa7f",
+    "warning_selected": "#8bd5ca",
-    "warning_disabled": "#eed49f4d",
+    "warning_disabled": "#f5a97f4d",
-    "ghost_element_background": "#00000000",
+    "ghost_element_background": "#cad3f500",
-    "ghost_element_background_alt": "#363a4f",
+    "ghost_element_background_alt": "#1e2030",
-    "ghost_element_hover": "#cad3f533",
+    "ghost_element_hover": "#cad3f50d",
-    "ghost_element_active": "#494d64",
+    "ghost_element_active": "#cad3f51a",
-    "ghost_element_selected": "#494d64",
+    "ghost_element_selected": "#cad3f51a",
-    "ghost_element_disabled": "#cad3f50d",
+    "ghost_element_disabled": "#cad3f505",
-    "tab_inactive_background": "#1e2030",
+    "tab_background": "#181926",
-    "tab_inactive_foreground": "#b8c0e0",
+    "tab_foreground": "#a5adcb",
+    "tab_hover_background": "#cad3f50d",
     "tab_active_background": "#24273a",
     "tab_active_foreground": "#cad3f5",
-    "tab_hover_foreground": "#b7bdf8",
+    "scrollbar_thumb_background": "#cad3f51a",
-    "scrollbar_thumb_background": "#cad3f533",
+    "scrollbar_thumb_hover_background": "#cad3f526",
-    "scrollbar_thumb_hover_background": "#cad3f580",
+    "scrollbar_thumb_border": "#cad3f500",
-    "scrollbar_thumb_border": "#00000000",
+    "scrollbar_track_background": "#cad3f500",
-    "scrollbar_track_background": "#00000000",
+    "scrollbar_track_border": "#cad3f500",
-    "scrollbar_track_border": "#494d64",
     "drop_target_background": "#8aadf41a",
-    "cursor": "#f4dbd6",
+    "cursor": "#8aadf4",
-    "selection": "#939ab740"
+    "selection": "#8aadf440"
   }
 }

assets/themes/catppuccin-mocha.json

@@ -1,74 +1,76 @@
 {
   "id": "catppuccin-mocha",
   "name": "Catppuccin Mocha",
-  "author": "Catppuccin",
+  "author": "Catppuccin Org (ported by Coop)",
-  "url": "https://github.com/catppuccin/catppuccin",
+  "url": "https://catppuccin.com",
   "light": {
     "background": "#1e1e2e",
     "surface_background": "#181825",
     "elevated_surface_background": "#11111b",
     "panel_background": "#1e1e2e",
     "overlay": "#cdd6f41a",
-    "title_bar": "#181825",
+    "title_bar": "#11111b",
-    "title_bar_inactive": "#11111b",
+    "title_bar_inactive": "#1e1e2e",
-    "window_border": "#6c7086",
+    "window_border": "#45475a",
-    "border": "#585b70",
+    "border": "#45475a",
-    "border_variant": "#45475a",
+    "border_variant": "#313244",
     "border_focused": "#89b4fa",
     "border_selected": "#89b4fa",
-    "border_transparent": "#00000000",
+    "border_transparent": "#cdd6f400",
-    "border_disabled": "#313244",
+    "border_disabled": "#181825",
-    "ring": "#89b4fa",
+    "ring": "#b4befe",
     "text": "#cdd6f4",
-    "text_muted": "#bac2de",
+    "text_muted": "#a6adc8",
-    "text_placeholder": "#a6adc8",
+    "text_placeholder": "#7f849c",
     "text_accent": "#89b4fa",
-    "icon": "#bac2de",
+    "text_danger": "#f38ba8",
-    "icon_muted": "#a6adc8",
+    "text_warning": "#fab387",
-    "icon_accent": "#89b4fa",
+    "icon": "#a6adc8",
-    "element_foreground": "#11111b",
+    "icon_muted": "#7f849c",
+    "icon_accent": "#b4befe",
+    "element_foreground": "#1e1e2e",
     "element_background": "#89b4fa",
     "element_hover": "#b4befe",
-    "element_active": "#7ba2e1",
+    "element_active": "#89dceb",
-    "element_selected": "#6d90c9",
+    "element_selected": "#74c7ec",
     "element_disabled": "#89b4fa4d",
-    "secondary_foreground": "#6d90c9",
+    "secondary_foreground": "#cdd6f4",
-    "secondary_background": "#181825",
+    "secondary_background": "#313244",
-    "secondary_hover": "#89b4fa33",
+    "secondary_hover": "#45475a",
-    "secondary_active": "#11111b",
+    "secondary_active": "#585b70",
-    "secondary_selected": "#11111b",
+    "secondary_selected": "#585b70",
     "secondary_disabled": "#89b4fa4d",
-    "danger_foreground": "#11111b",
+    "danger_foreground": "#1e1e2e",
     "danger_background": "#f38ba8",
     "danger_hover": "#eba0ac",
-    "danger_active": "#db7d98",
+    "danger_active": "#fab387",
-    "danger_selected": "#c46f88",
+    "danger_selected": "#f9e2af",
     "danger_disabled": "#f38ba84d",
-    "warning_foreground": "#11111b",
+    "warning_foreground": "#1e1e2e",
-    "warning_background": "#f9e2af",
+    "warning_background": "#fab387",
-    "warning_hover": "#fab387",
+    "warning_hover": "#f9e2af",
-    "warning_active": "#e0cb9e",
+    "warning_active": "#a6e3a1",
-    "warning_selected": "#c8b48d",
+    "warning_selected": "#94e2d5",
-    "warning_disabled": "#f9e2af4d",
+    "warning_disabled": "#fab3874d",
-    "ghost_element_background": "#00000000",
+    "ghost_element_background": "#cdd6f400",
-    "ghost_element_background_alt": "#313244",
+    "ghost_element_background_alt": "#181825",
-    "ghost_element_hover": "#cdd6f433",
+    "ghost_element_hover": "#cdd6f40d",
-    "ghost_element_active": "#45475a",
+    "ghost_element_active": "#cdd6f41a",
-    "ghost_element_selected": "#45475a",
+    "ghost_element_selected": "#cdd6f41a",
-    "ghost_element_disabled": "#cdd6f40d",
+    "ghost_element_disabled": "#cdd6f405",
-    "tab_inactive_background": "#181825",
+    "tab_background": "#11111b",
-    "tab_inactive_foreground": "#bac2de",
+    "tab_foreground": "#a6adc8",
+    "tab_hover_background": "#cdd6f40d",
     "tab_active_background": "#1e1e2e",
     "tab_active_foreground": "#cdd6f4",
-    "tab_hover_foreground": "#b4befe",
+    "scrollbar_thumb_background": "#cdd6f41a",
-    "scrollbar_thumb_background": "#cdd6f433",
+    "scrollbar_thumb_hover_background": "#cdd6f426",
-    "scrollbar_thumb_hover_background": "#cdd6f580",
+    "scrollbar_thumb_border": "#cdd6f400",
-    "scrollbar_thumb_border": "#00000000",
+    "scrollbar_track_background": "#cdd6f400",
-    "scrollbar_track_background": "#00000000",
+    "scrollbar_track_border": "#cdd6f400",
-    "scrollbar_track_border": "#45475a",
     "drop_target_background": "#89b4fa1a",
-    "cursor": "#f5e0dc",
+    "cursor": "#89b4fa",
-    "selection": "#9399b240"
+    "selection": "#89b4fa40"
   },
   "dark": {
     "background": "#1e1e2e",
@@ -76,65 +78,67 @@
     "elevated_surface_background": "#11111b",
     "panel_background": "#1e1e2e",
     "overlay": "#cdd6f41a",
-    "title_bar": "#181825",
+    "title_bar": "#11111b",
-    "title_bar_inactive": "#11111b",
+    "title_bar_inactive": "#1e1e2e",
-    "window_border": "#6c7086",
+    "window_border": "#45475a",
-    "border": "#585b70",
+    "border": "#45475a",
-    "border_variant": "#45475a",
+    "border_variant": "#313244",
     "border_focused": "#89b4fa",
     "border_selected": "#89b4fa",
-    "border_transparent": "#00000000",
+    "border_transparent": "#cdd6f400",
-    "border_disabled": "#313244",
+    "border_disabled": "#181825",
-    "ring": "#89b4fa",
+    "ring": "#b4befe",
     "text": "#cdd6f4",
-    "text_muted": "#bac2de",
+    "text_muted": "#a6adc8",
-    "text_placeholder": "#a6adc8",
+    "text_placeholder": "#7f849c",
     "text_accent": "#89b4fa",
-    "icon": "#bac2de",
+    "text_danger": "#f38ba8",
-    "icon_muted": "#a6adc8",
+    "text_warning": "#fab387",
-    "icon_accent": "#89b4fa",
+    "icon": "#a6adc8",
-    "element_foreground": "#11111b",
+    "icon_muted": "#7f849c",
+    "icon_accent": "#b4befe",
+    "element_foreground": "#1e1e2e",
     "element_background": "#89b4fa",
     "element_hover": "#b4befe",
-    "element_active": "#7ba2e1",
+    "element_active": "#89dceb",
-    "element_selected": "#6d90c9",
+    "element_selected": "#74c7ec",
     "element_disabled": "#89b4fa4d",
-    "secondary_foreground": "#6d90c9",
+    "secondary_foreground": "#cdd6f4",
-    "secondary_background": "#181825",
+    "secondary_background": "#313244",
-    "secondary_hover": "#89b4fa33",
+    "secondary_hover": "#45475a",
-    "secondary_active": "#11111b",
+    "secondary_active": "#585b70",
-    "secondary_selected": "#11111b",
+    "secondary_selected": "#585b70",
     "secondary_disabled": "#89b4fa4d",
-    "danger_foreground": "#11111b",
+    "danger_foreground": "#1e1e2e",
     "danger_background": "#f38ba8",
     "danger_hover": "#eba0ac",
-    "danger_active": "#db7d98",
+    "danger_active": "#fab387",
-    "danger_selected": "#c46f88",
+    "danger_selected": "#f9e2af",
     "danger_disabled": "#f38ba84d",
-    "warning_foreground": "#11111b",
+    "warning_foreground": "#1e1e2e",
-    "warning_background": "#f9e2af",
+    "warning_background": "#fab387",
-    "warning_hover": "#fab387",
+    "warning_hover": "#f9e2af",
-    "warning_active": "#e0cb9e",
+    "warning_active": "#a6e3a1",
-    "warning_selected": "#c8b48d",
+    "warning_selected": "#94e2d5",
-    "warning_disabled": "#f9e2af4d",
+    "warning_disabled": "#fab3874d",
-    "ghost_element_background": "#00000000",
+    "ghost_element_background": "#cdd6f400",
-    "ghost_element_background_alt": "#313244",
+    "ghost_element_background_alt": "#181825",
-    "ghost_element_hover": "#cdd6f433",
+    "ghost_element_hover": "#cdd6f40d",
-    "ghost_element_active": "#45475a",
+    "ghost_element_active": "#cdd6f41a",
-    "ghost_element_selected": "#45475a",
+    "ghost_element_selected": "#cdd6f41a",
-    "ghost_element_disabled": "#cdd6f40d",
+    "ghost_element_disabled": "#cdd6f405",
-    "tab_inactive_background": "#181825",
+    "tab_background": "#11111b",
-    "tab_inactive_foreground": "#bac2de",
+    "tab_foreground": "#a6adc8",
+    "tab_hover_background": "#cdd6f40d",
     "tab_active_background": "#1e1e2e",
     "tab_active_foreground": "#cdd6f4",
-    "tab_hover_foreground": "#b4befe",
+    "scrollbar_thumb_background": "#cdd6f41a",
-    "scrollbar_thumb_background": "#cdd6f433",
+    "scrollbar_thumb_hover_background": "#cdd6f426",
-    "scrollbar_thumb_hover_background": "#cdd6f580",
+    "scrollbar_thumb_border": "#cdd6f400",
-    "scrollbar_thumb_border": "#00000000",
+    "scrollbar_track_background": "#cdd6f400",
-    "scrollbar_track_background": "#00000000",
+    "scrollbar_track_border": "#cdd6f400",
-    "scrollbar_track_border": "#45475a",
     "drop_target_background": "#89b4fa1a",
-    "cursor": "#f5e0dc",
+    "cursor": "#89b4fa",
-    "selection": "#9399b240"
+    "selection": "#89b4fa40"
   }
 }

assets/themes/flexoki.json

@@ -1,140 +1,144 @@
 {
   "id": "flexoki",
   "name": "Flexoki",
-  "author": "Stephan Ango",
+  "author": "Steph Ango (ported by Coop)",
   "url": "https://stephango.com/flexoki",
   "light": {
     "background": "#FFFCF0",
     "surface_background": "#F2F0E5",
     "elevated_surface_background": "#E6E4D9",
     "panel_background": "#FFFCF0",
-    "overlay": "#100F0F1a",
+    "overlay": "#100F0F1A",
-    "title_bar": "#F2F0E5",
+    "title_bar": "#E6E4D9",
-    "title_bar_inactive": "#E6E4D9",
+    "title_bar_inactive": "#FFFCF0",
-    "window_border": "#B7B5AC",
+    "window_border": "#CECDC3",
     "border": "#CECDC3",
     "border_variant": "#DAD8CE",
-    "border_focused": "#205EA6",
+    "border_focused": "#24837B",
-    "border_selected": "#205EA6",
+    "border_selected": "#24837B",
-    "border_transparent": "#00000000",
+    "border_transparent": "#100F0F00",
     "border_disabled": "#E6E4D9",
-    "ring": "#205EA6",
+    "ring": "#3AA99F",
     "text": "#100F0F",
     "text_muted": "#6F6E69",
-    "text_placeholder": "#9F9D96",
+    "text_placeholder": "#B7B5AC",
-    "text_accent": "#205EA6",
+    "text_accent": "#24837B",
+    "text_danger": "#AF3029",
+    "text_warning": "#BC5215",
     "icon": "#6F6E69",
-    "icon_muted": "#9F9D96",
+    "icon_muted": "#B7B5AC",
-    "icon_accent": "#205EA6",
+    "icon_accent": "#3AA99F",
     "element_foreground": "#FFFCF0",
-    "element_background": "#205EA6",
+    "element_background": "#24837B",
-    "element_hover": "#1A4F8C",
+    "element_hover": "#3AA99F",
-    "element_active": "#163B66",
+    "element_active": "#1C1B1A",
-    "element_selected": "#133051",
+    "element_selected": "#100F0F",
-    "element_disabled": "#205EA64d",
+    "element_disabled": "#24837B4D",
-    "secondary_foreground": "#163B66",
+    "secondary_foreground": "#100F0F",
-    "secondary_background": "#F2F0E5",
+    "secondary_background": "#E6E4D9",
-    "secondary_hover": "#205EA61a",
+    "secondary_hover": "#DAD8CE",
-    "secondary_active": "#E6E4D9",
+    "secondary_active": "#CECDC3",
-    "secondary_selected": "#E6E4D9",
+    "secondary_selected": "#CECDC3",
-    "secondary_disabled": "#205EA64d",
+    "secondary_disabled": "#24837B4D",
     "danger_foreground": "#FFFCF0",
-    "danger_background": "#D14D41",
+    "danger_background": "#AF3029",
-    "danger_hover": "#C03E35",
+    "danger_hover": "#D14D41",
-    "danger_active": "#AF3029",
+    "danger_active": "#1C1B1A",
-    "danger_selected": "#942822",
+    "danger_selected": "#100F0F",
-    "danger_disabled": "#D14D414d",
+    "danger_disabled": "#AF30294D",
-    "warning_foreground": "#100F0F",
+    "warning_foreground": "#FFFCF0",
-    "warning_background": "#D0A215",
+    "warning_background": "#BC5215",
-    "warning_hover": "#BE9207",
+    "warning_hover": "#DA702C",
-    "warning_active": "#AD8301",
+    "warning_active": "#1C1B1A",
-    "warning_selected": "#8E6B01",
+    "warning_selected": "#100F0F",
-    "warning_disabled": "#D0A2154d",
+    "warning_disabled": "#BC52154D",
-    "ghost_element_background": "#00000000",
+    "ghost_element_background": "#100F0F00",
-    "ghost_element_background_alt": "#E6E4D9",
+    "ghost_element_background_alt": "#F2F0E5",
-    "ghost_element_hover": "#100F0F1a",
+    "ghost_element_hover": "#100F0F0D",
-    "ghost_element_active": "#DAD8CE",
+    "ghost_element_active": "#100F0F1A",
-    "ghost_element_selected": "#DAD8CE",
+    "ghost_element_selected": "#100F0F1A",
-    "ghost_element_disabled": "#100F0F0d",
+    "ghost_element_disabled": "#100F0F05",
-    "tab_inactive_background": "#F2F0E5",
+    "tab_background": "#E6E4D9",
-    "tab_inactive_foreground": "#6F6E69",
+    "tab_foreground": "#6F6E69",
+    "tab_hover_background": "#100F0F0D",
     "tab_active_background": "#FFFCF0",
     "tab_active_foreground": "#100F0F",
-    "tab_hover_foreground": "#205EA6",
+    "scrollbar_thumb_background": "#100F0F1A",
-    "scrollbar_thumb_background": "#100F0F33",
+    "scrollbar_thumb_hover_background": "#100F0F26",
-    "scrollbar_thumb_hover_background": "#100F0F4d",
+    "scrollbar_thumb_border": "#100F0F00",
-    "scrollbar_thumb_border": "#00000000",
+    "scrollbar_track_background": "#100F0F00",
-    "scrollbar_track_background": "#00000000",
+    "scrollbar_track_border": "#100F0F00",
-    "scrollbar_track_border": "#DAD8CE",
+    "drop_target_background": "#24837B1A",
-    "drop_target_background": "#205EA61a",
+    "cursor": "#24837B",
-    "cursor": "#205EA6",
+    "selection": "#24837B40"
-    "selection": "#205EA640"
   },
   "dark": {
     "background": "#100F0F",
     "surface_background": "#1C1B1A",
     "elevated_surface_background": "#282726",
     "panel_background": "#100F0F",
-    "overlay": "#FFFCF01a",
+    "overlay": "#FFFCF01A",
-    "title_bar": "#1C1B1A",
+    "title_bar": "#282726",
-    "title_bar_inactive": "#282726",
+    "title_bar_inactive": "#100F0F",
-    "window_border": "#575653",
+    "window_border": "#403E3C",
     "border": "#403E3C",
     "border_variant": "#343331",
-    "border_focused": "#4385BE",
+    "border_focused": "#3AA99F",
-    "border_selected": "#4385BE",
+    "border_selected": "#3AA99F",
-    "border_transparent": "#00000000",
+    "border_transparent": "#100F0F00",
     "border_disabled": "#282726",
-    "ring": "#4385BE",
+    "ring": "#24837B",
-    "text": "#FFFCF0",
+    "text": "#CECDC3",
     "text_muted": "#878580",
-    "text_placeholder": "#6F6E69",
+    "text_placeholder": "#575653",
-    "text_accent": "#4385BE",
+    "text_accent": "#3AA99F",
+    "text_danger": "#D14D41",
+    "text_warning": "#DA702C",
     "icon": "#878580",
-    "icon_muted": "#6F6E69",
+    "icon_muted": "#575653",
-    "icon_accent": "#4385BE",
+    "icon_accent": "#24837B",
     "element_foreground": "#100F0F",
-    "element_background": "#4385BE",
+    "element_background": "#3AA99F",
-    "element_hover": "#3171B2",
+    "element_hover": "#24837B",
-    "element_active": "#205EA6",
+    "element_active": "#CECDC3",
-    "element_selected": "#1A4F8C",
+    "element_selected": "#F2F0E5",
-    "element_disabled": "#4385BE4d",
+    "element_disabled": "#3AA99F4D",
-    "secondary_foreground": "#205EA6",
+    "secondary_foreground": "#CECDC3",
     "secondary_background": "#1C1B1A",
-    "secondary_hover": "#4385BE1a",
+    "secondary_hover": "#282726",
-    "secondary_active": "#282726",
+    "secondary_active": "#343331",
-    "secondary_selected": "#282726",
+    "secondary_selected": "#343331",
-    "secondary_disabled": "#4385BE4d",
+    "secondary_disabled": "#3AA99F4D",
     "danger_foreground": "#100F0F",
-    "danger_background": "#E8705F",
+    "danger_background": "#D14D41",
-    "danger_hover": "#D14D41",
+    "danger_hover": "#AF3029",
-    "danger_active": "#C03E35",
+    "danger_active": "#CECDC3",
-    "danger_selected": "#AF3029",
+    "danger_selected": "#F2F0E5",
-    "danger_disabled": "#E8705F4d",
+    "danger_disabled": "#D14D414D",
     "warning_foreground": "#100F0F",
-    "warning_background": "#DFB431",
+    "warning_background": "#DA702C",
-    "warning_hover": "#D0A215",
+    "warning_hover": "#BC5215",
-    "warning_active": "#BE9207",
+    "warning_active": "#CECDC3",
-    "warning_selected": "#AD8301",
+    "warning_selected": "#F2F0E5",
-    "warning_disabled": "#DFB4314d",
+    "warning_disabled": "#DA702C4D",
-    "ghost_element_background": "#00000000",
+    "ghost_element_background": "#100F0F00",
-    "ghost_element_background_alt": "#282726",
+    "ghost_element_background_alt": "#1C1B1A",
-    "ghost_element_hover": "#FFFCF01a",
+    "ghost_element_hover": "#FFFCF00D",
-    "ghost_element_active": "#343331",
+    "ghost_element_active": "#FFFCF01A",
-    "ghost_element_selected": "#343331",
+    "ghost_element_selected": "#FFFCF01A",
-    "ghost_element_disabled": "#FFFCF00d",
+    "ghost_element_disabled": "#FFFCF005",
-    "tab_inactive_background": "#1C1B1A",
+    "tab_background": "#282726",
-    "tab_inactive_foreground": "#878580",
+    "tab_foreground": "#878580",
+    "tab_hover_background": "#FFFCF00D",
     "tab_active_background": "#100F0F",
-    "tab_active_foreground": "#FFFCF0",
+    "tab_active_foreground": "#CECDC3",
-    "tab_hover_foreground": "#4385BE",
+    "scrollbar_thumb_background": "#FFFCF01A",
-    "scrollbar_thumb_background": "#FFFCF033",
+    "scrollbar_thumb_hover_background": "#FFFCF026",
-    "scrollbar_thumb_hover_background": "#FFFCF04d",
+    "scrollbar_thumb_border": "#100F0F00",
-    "scrollbar_thumb_border": "#00000000",
+    "scrollbar_track_background": "#100F0F00",
-    "scrollbar_track_background": "#00000000",
+    "scrollbar_track_border": "#100F0F00",
-    "scrollbar_track_border": "#343331",
+    "drop_target_background": "#3AA99F1A",
-    "drop_target_background": "#4385BE1a",
+    "cursor": "#3AA99F",
-    "cursor": "#4385BE",
+    "selection": "#3AA99F40"
-    "selection": "#4385BE40"
   }
 }

assets/themes/forest.json

@@ -0,0 +1,144 @@
+{
+  "id": "forest",
+  "name": "Forest",
+  "author": "Coop",
+  "url": "https://github.com/lumehq/coop",
+  "light": {
+    "background": "#fbfefcff",
+    "surface_background": "#f4fbf6ff",
+    "elevated_surface_background": "#e9f6e9ff",
+    "panel_background": "#fbfefcff",
+    "overlay": "#193b2d1a",
+    "title_bar": "#e9f6e9ff",
+    "title_bar_inactive": "#fbfefcff",
+    "window_border": "#c4e8d1ff",
+    "border": "#c4e8d1ff",
+    "border_variant": "#b2ddb5ff",
+    "border_focused": "#30a46cff",
+    "border_selected": "#30a46cff",
+    "border_transparent": "#00000000",
+    "border_disabled": "#e0f3e6ff",
+    "ring": "#2b9a66ff",
+    "text": "#193b2dff",
+    "text_muted": "#2f7c57ff",
+    "text_placeholder": "#8eceaaff",
+    "text_accent": "#30a46cff",
+    "text_danger": "#e54d2eff",
+    "text_warning": "#f76b15ff",
+    "icon": "#2f7c57ff",
+    "icon_muted": "#8eceaaff",
+    "icon_accent": "#2b9a66ff",
+    "element_foreground": "#ffffffff",
+    "element_background": "#30a46cff",
+    "element_hover": "#2b9a66ff",
+    "element_active": "#2a7e3bff",
+    "element_selected": "#218358ff",
+    "element_disabled": "#30a46c4d",
+    "secondary_foreground": "#193b2dff",
+    "secondary_background": "#e9f6e9ff",
+    "secondary_hover": "#daf1dbff",
+    "secondary_active": "#c4e8d1ff",
+    "secondary_selected": "#c4e8d1ff",
+    "secondary_disabled": "#30a46c4d",
+    "danger_foreground": "#ffffffff",
+    "danger_background": "#feebe7ff",
+    "danger_hover": "#ffcdc2ff",
+    "danger_active": "#fdbdafff",
+    "danger_selected": "#fdbdafff",
+    "danger_disabled": "#e54d2e4d",
+    "warning_foreground": "#ffffffff",
+    "warning_background": "#fff7edff",
+    "warning_hover": "#ffd19aff",
+    "warning_active": "#ffc182ff",
+    "warning_selected": "#ffc182ff",
+    "warning_disabled": "#f76b154d",
+    "ghost_element_background": "#00000000",
+    "ghost_element_background_alt": "#e9f6e9ff",
+    "ghost_element_hover": "#193b2d0d",
+    "ghost_element_active": "#193b2d1a",
+    "ghost_element_selected": "#193b2d1a",
+    "ghost_element_disabled": "#193b2d05",
+    "tab_background": "#e9f6e9ff",
+    "tab_foreground": "#2f7c57ff",
+    "tab_hover_background": "#193b2d0d",
+    "tab_active_background": "#fbfefcff",
+    "tab_active_foreground": "#193b2dff",
+    "scrollbar_thumb_background": "#193b2d1a",
+    "scrollbar_thumb_hover_background": "#193b2d26",
+    "scrollbar_thumb_border": "#00000000",
+    "scrollbar_track_background": "#00000000",
+    "scrollbar_track_border": "#00000000",
+    "drop_target_background": "#30a46c1a",
+    "cursor": "#30a46cff",
+    "selection": "#30a46c40"
+  },
+  "dark": {
+    "background": "#0e1512ff",
+    "surface_background": "#121b17ff",
+    "elevated_surface_background": "#132d21ff",
+    "panel_background": "#0e1512ff",
+    "overlay": "#b1f1cb1a",
+    "title_bar": "#132d21ff",
+    "title_bar_inactive": "#0e1512ff",
+    "window_border": "#20573eff",
+    "border": "#20573eff",
+    "border_variant": "#174933ff",
+    "border_focused": "#33b074ff",
+    "border_selected": "#33b074ff",
+    "border_transparent": "#00000000",
+    "border_disabled": "#113b29ff",
+    "ring": "#33b074ff",
+    "text": "#b1f1cbff",
+    "text_muted": "#71d083ff",
+    "text_placeholder": "#2f7c57ff",
+    "text_accent": "#3dd68cff",
+    "text_danger": "#ff977dff",
+    "text_warning": "#ffa057ff",
+    "icon": "#71d083ff",
+    "icon_muted": "#2f7c57ff",
+    "icon_accent": "#33b074ff",
+    "element_foreground": "#0e1512ff",
+    "element_background": "#3dd68cff",
+    "element_hover": "#71d083ff",
+    "element_active": "#33b074ff",
+    "element_selected": "#30a46cff",
+    "element_disabled": "#3dd68c4d",
+    "secondary_foreground": "#b1f1cbff",
+    "secondary_background": "#132d21ff",
+    "secondary_hover": "#113b29ff",
+    "secondary_active": "#174933ff",
+    "secondary_selected": "#174933ff",
+    "secondary_disabled": "#3dd68c4d",
+    "danger_foreground": "#181111ff",
+    "danger_background": "#391714ff",
+    "danger_hover": "#5e1c16ff",
+    "danger_active": "#6e2920ff",
+    "danger_selected": "#6e2920ff",
+    "danger_disabled": "#ff977d4d",
+    "warning_foreground": "#17120eff",
+    "warning_background": "#331e0bff",
+    "warning_hover": "#562800ff",
+    "warning_active": "#66350cff",
+    "warning_selected": "#66350cff",
+    "warning_disabled": "#ffa0574d",
+    "ghost_element_background": "#00000000",
+    "ghost_element_background_alt": "#132d21ff",
+    "ghost_element_hover": "#b1f1cb0d",
+    "ghost_element_active": "#b1f1cb1a",
+    "ghost_element_selected": "#b1f1cb1a",
+    "ghost_element_disabled": "#b1f1cb05",
+    "tab_background": "#132d21ff",
+    "tab_foreground": "#71d083ff",
+    "tab_hover_background": "#b1f1cb0d",
+    "tab_active_background": "#0e1512ff",
+    "tab_active_foreground": "#b1f1cbff",
+    "scrollbar_thumb_background": "#b1f1cb1a",
+    "scrollbar_thumb_hover_background": "#b1f1cb26",
+    "scrollbar_thumb_border": "#00000000",
+    "scrollbar_track_background": "#00000000",
+    "scrollbar_track_border": "#00000000",
+    "drop_target_background": "#3dd68c1a",
+    "cursor": "#3dd68cff",
+    "selection": "#3dd68c40"
+  }
+}

assets/themes/ocean.json

@@ -0,0 +1,144 @@
+{
+  "id": "ocean",
+  "name": "Ocean",
+  "author": "Coop",
+  "url": "https://github.com/lumehq/coop",
+  "light": {
+    "background": "#fafefeff",
+    "surface_background": "#f2fbfaff",
+    "elevated_surface_background": "#e6f7f7ff",
+    "panel_background": "#fafefeff",
+    "overlay": "#00333f1a",
+    "title_bar": "#e6f7f7ff",
+    "title_bar_inactive": "#fafefeff",
+    "window_border": "#cce5e9ff",
+    "border": "#cce5e9ff",
+    "border_variant": "#b8dde3ff",
+    "border_focused": "#00a2c7ff",
+    "border_selected": "#00a2c7ff",
+    "border_transparent": "#00000000",
+    "border_disabled": "#e0f0f2ff",
+    "ring": "#0797b9ff",
+    "text": "#0d3c48ff",
+    "text_muted": "#107d98ff",
+    "text_placeholder": "#60b3d7ff",
+    "text_accent": "#00a2c7ff",
+    "text_danger": "#e54d2eff",
+    "text_warning": "#f76b15ff",
+    "icon": "#107d98ff",
+    "icon_muted": "#60b3d7ff",
+    "icon_accent": "#0797b9ff",
+    "element_foreground": "#ffffffff",
+    "element_background": "#00a2c7ff",
+    "element_hover": "#0797b9ff",
+    "element_active": "#12667eff",
+    "element_selected": "#0d4a5cff",
+    "element_disabled": "#00a2c74d",
+    "secondary_foreground": "#0d4a5cff",
+    "secondary_background": "#ddf9f2ff",
+    "secondary_hover": "#c8f4e9ff",
+    "secondary_active": "#b3ecdeff",
+    "secondary_selected": "#b3ecdeff",
+    "secondary_disabled": "#00a2c74d",
+    "danger_foreground": "#ffffffff",
+    "danger_background": "#feebe7ff",
+    "danger_hover": "#ffcdc2ff",
+    "danger_active": "#fdbdafff",
+    "danger_selected": "#fdbdafff",
+    "danger_disabled": "#e54d2e4d",
+    "warning_foreground": "#ffffffff",
+    "warning_background": "#fff7edff",
+    "warning_hover": "#ffd19aff",
+    "warning_active": "#ffc182ff",
+    "warning_selected": "#ffc182ff",
+    "warning_disabled": "#f76b154d",
+    "ghost_element_background": "#00000000",
+    "ghost_element_background_alt": "#e6f7f7ff",
+    "ghost_element_hover": "#00333f0d",
+    "ghost_element_active": "#00333f1a",
+    "ghost_element_selected": "#00333f1a",
+    "ghost_element_disabled": "#00333f05",
+    "tab_background": "#e6f7f7ff",
+    "tab_foreground": "#107d98ff",
+    "tab_hover_background": "#00333f0d",
+    "tab_active_background": "#fafefeff",
+    "tab_active_foreground": "#0d3c48ff",
+    "scrollbar_thumb_background": "#00333f1a",
+    "scrollbar_thumb_hover_background": "#00333f26",
+    "scrollbar_thumb_border": "#00000000",
+    "scrollbar_track_background": "#00000000",
+    "scrollbar_track_border": "#00000000",
+    "drop_target_background": "#00a2c71a",
+    "cursor": "#00a2c7ff",
+    "selection": "#00a2c740"
+  },
+  "dark": {
+    "background": "#0b161aff",
+    "surface_background": "#101b20ff",
+    "elevated_surface_background": "#082c36ff",
+    "panel_background": "#0b161aff",
+    "overlay": "#c2f3ff1a",
+    "title_bar": "#082c36ff",
+    "title_bar_inactive": "#0b161aff",
+    "window_border": "#1b537bff",
+    "border": "#1b537bff",
+    "border_variant": "#154467ff",
+    "border_focused": "#00a2c7ff",
+    "border_selected": "#00a2c7ff",
+    "border_transparent": "#00000000",
+    "border_disabled": "#112840ff",
+    "ring": "#23afd0ff",
+    "text": "#b6ecf7ff",
+    "text_muted": "#4ccce6ff",
+    "text_placeholder": "#197caeff",
+    "text_accent": "#7ce2feff",
+    "text_danger": "#ff977dff",
+    "text_warning": "#ffa057ff",
+    "icon": "#4ccce6ff",
+    "icon_muted": "#197caeff",
+    "icon_accent": "#23afd0ff",
+    "element_foreground": "#0b161aff",
+    "element_background": "#7ce2feff",
+    "element_hover": "#a8eeffff",
+    "element_active": "#23afd0ff",
+    "element_selected": "#00a2c7ff",
+    "element_disabled": "#7ce2fe4d",
+    "secondary_foreground": "#adf0ddff",
+    "secondary_background": "#0d2d2aff",
+    "secondary_hover": "#023b37ff",
+    "secondary_active": "#084843ff",
+    "secondary_selected": "#084843ff",
+    "secondary_disabled": "#7ce2fe4d",
+    "danger_foreground": "#181111ff",
+    "danger_background": "#391714ff",
+    "danger_hover": "#5e1c16ff",
+    "danger_active": "#6e2920ff",
+    "danger_selected": "#6e2920ff",
+    "danger_disabled": "#ff977d4d",
+    "warning_foreground": "#17120eff",
+    "warning_background": "#331e0bff",
+    "warning_hover": "#562800ff",
+    "warning_active": "#66350cff",
+    "warning_selected": "#66350cff",
+    "warning_disabled": "#ffa0574d",
+    "ghost_element_background": "#00000000",
+    "ghost_element_background_alt": "#082c36ff",
+    "ghost_element_hover": "#c2f3ff0d",
+    "ghost_element_active": "#c2f3ff1a",
+    "ghost_element_selected": "#c2f3ff1a",
+    "ghost_element_disabled": "#c2f3ff05",
+    "tab_background": "#082c36ff",
+    "tab_foreground": "#4ccce6ff",
+    "tab_hover_background": "#c2f3ff0d",
+    "tab_active_background": "#0b161aff",
+    "tab_active_foreground": "#b6ecf7ff",
+    "scrollbar_thumb_background": "#c2f3ff1a",
+    "scrollbar_thumb_hover_background": "#c2f3ff26",
+    "scrollbar_thumb_border": "#00000000",
+    "scrollbar_track_background": "#00000000",
+    "scrollbar_track_border": "#00000000",
+    "drop_target_background": "#7ce2fe1a",
+    "cursor": "#7ce2feff",
+    "selection": "#7ce2fe40"
+  }
+}

assets/themes/rose-pine-dawn.json

@@ -1,140 +0,0 @@
-{
-  "id": "rose-pine-dawn",
-  "name": "Rosé Pine Dawn",
-  "author": "Rosé Pine",
-  "url": "https://rosepinetheme.com/",
-  "light": {
-    "background": "#faf4ed",
-    "surface_background": "#fffaf3",
-    "elevated_surface_background": "#f2e9e1",
-    "panel_background": "#faf4ed",
-    "overlay": "#5752791a",
-    "title_bar": "#fffaf3",
-    "title_bar_inactive": "#f2e9e1",
-    "window_border": "#cecacd",
-    "border": "#dfdad9",
-    "border_variant": "#f4ede8",
-    "border_focused": "#907aa9",
-    "border_selected": "#907aa9",
-    "border_transparent": "#00000000",
-    "border_disabled": "#f2e9e1",
-    "ring": "#907aa9",
-    "text": "#575279",
-    "text_muted": "#797593",
-    "text_placeholder": "#9893a5",
-    "text_accent": "#907aa9",
-    "icon": "#797593",
-    "icon_muted": "#9893a5",
-    "icon_accent": "#907aa9",
-    "element_foreground": "#faf4ed",
-    "element_background": "#907aa9",
-    "element_hover": "#907aa9e6",
-    "element_active": "#826b95",
-    "element_selected": "#745c81",
-    "element_disabled": "#907aa94d",
-    "secondary_foreground": "#745c81",
-    "secondary_background": "#fffaf3",
-    "secondary_hover": "#907aa91a",
-    "secondary_active": "#f2e9e1",
-    "secondary_selected": "#f2e9e1",
-    "secondary_disabled": "#907aa94d",
-    "danger_foreground": "#faf4ed",
-    "danger_background": "#b4637a",
-    "danger_hover": "#a7586e",
-    "danger_active": "#9a4d62",
-    "danger_selected": "#8d4256",
-    "danger_disabled": "#b4637a4d",
-    "warning_foreground": "#575279",
-    "warning_background": "#ea9d34",
-    "warning_hover": "#d98e2f",
-    "warning_active": "#c87f2a",
-    "warning_selected": "#b77025",
-    "warning_disabled": "#ea9d344d",
-    "ghost_element_background": "#00000000",
-    "ghost_element_background_alt": "#f2e9e1",
-    "ghost_element_hover": "#5752791a",
-    "ghost_element_active": "#dfdad9",
-    "ghost_element_selected": "#dfdad9",
-    "ghost_element_disabled": "#5752790d",
-    "tab_inactive_background": "#fffaf3",
-    "tab_inactive_foreground": "#797593",
-    "tab_active_background": "#faf4ed",
-    "tab_active_foreground": "#575279",
-    "tab_hover_foreground": "#907aa9",
-    "scrollbar_thumb_background": "#57527933",
-    "scrollbar_thumb_hover_background": "#5752794d",
-    "scrollbar_thumb_border": "#00000000",
-    "scrollbar_track_background": "#00000000",
-    "scrollbar_track_border": "#dfdad9",
-    "drop_target_background": "#907aa91a",
-    "cursor": "#907aa9",
-    "selection": "#907aa940"
-  },
-  "dark": {
-    "background": "#faf4ed",
-    "surface_background": "#fffaf3",
-    "elevated_surface_background": "#f2e9e1",
-    "panel_background": "#faf4ed",
-    "overlay": "#5752791a",
-    "title_bar": "#fffaf3",
-    "title_bar_inactive": "#f2e9e1",
-    "window_border": "#cecacd",
-    "border": "#dfdad9",
-    "border_variant": "#f4ede8",
-    "border_focused": "#907aa9",
-    "border_selected": "#907aa9",
-    "border_transparent": "#00000000",
-    "border_disabled": "#f2e9e1",
-    "ring": "#907aa9",
-    "text": "#575279",
-    "text_muted": "#797593",
-    "text_placeholder": "#9893a5",
-    "text_accent": "#907aa9",
-    "icon": "#797593",
-    "icon_muted": "#9893a5",
-    "icon_accent": "#907aa9",
-    "element_foreground": "#faf4ed",
-    "element_background": "#907aa9",
-    "element_hover": "#907aa9e6",
-    "element_active": "#826b95",
-    "element_selected": "#745c81",
-    "element_disabled": "#907aa94d",
-    "secondary_foreground": "#745c81",
-    "secondary_background": "#fffaf3",
-    "secondary_hover": "#907aa91a",
-    "secondary_active": "#f2e9e1",
-    "secondary_selected": "#f2e9e1",
-    "secondary_disabled": "#907aa94d",
-    "danger_foreground": "#faf4ed",
-    "danger_background": "#b4637a",
-    "danger_hover": "#a7586e",
-    "danger_active": "#9a4d62",
-    "danger_selected": "#8d4256",
-    "danger_disabled": "#b4637a4d",
-    "warning_foreground": "#575279",
-    "warning_background": "#ea9d34",
-    "warning_hover": "#d98e2f",
-    "warning_active": "#c87f2a",
-    "warning_selected": "#b77025",
-    "warning_disabled": "#ea9d344d",
-    "ghost_element_background": "#00000000",
-    "ghost_element_background_alt": "#f2e9e1",
-    "ghost_element_hover": "#5752791a",
-    "ghost_element_active": "#dfdad9",
-    "ghost_element_selected": "#dfdad9",
-    "ghost_element_disabled": "#5752790d",
-    "tab_inactive_background": "#fffaf3",
-    "tab_inactive_foreground": "#797593",
-    "tab_active_background": "#faf4ed",
-    "tab_active_foreground": "#575279",
-    "tab_hover_foreground": "#907aa9",
-    "scrollbar_thumb_background": "#57527933",
-    "scrollbar_thumb_hover_background": "#5752794d",
-    "scrollbar_thumb_border": "#00000000",
-    "scrollbar_track_background": "#00000000",
-    "scrollbar_track_border": "#dfdad9",
-    "drop_target_background": "#907aa91a",
-    "cursor": "#907aa9",
-    "selection": "#907aa940"
-  }
-}

assets/themes/rose-pine-moon.json

@@ -1,140 +0,0 @@
-{
-  "id": "rose-pine-moon",
-  "name": "Rosé Pine Moon",
-  "author": "Rosé Pine",
-  "url": "https://rosepinetheme.com/",
-  "light": {
-    "background": "#232136",
-    "surface_background": "#2a273f",
-    "elevated_surface_background": "#393552",
-    "panel_background": "#232136",
-    "overlay": "#e0def41a",
-    "title_bar": "#2a273f",
-    "title_bar_inactive": "#393552",
-    "window_border": "#56526e",
-    "border": "#44415a",
-    "border_variant": "#393552",
-    "border_focused": "#c4a7e7",
-    "border_selected": "#c4a7e7",
-    "border_transparent": "#00000000",
-    "border_disabled": "#393552",
-    "ring": "#c4a7e7",
-    "text": "#e0def4",
-    "text_muted": "#908caa",
-    "text_placeholder": "#6e6a86",
-    "text_accent": "#c4a7e7",
-    "icon": "#908caa",
-    "icon_muted": "#6e6a86",
-    "icon_accent": "#c4a7e7",
-    "element_foreground": "#232136",
-    "element_background": "#c4a7e7",
-    "element_hover": "#c4a7e7e6",
-    "element_active": "#b296d6",
-    "element_selected": "#a085c5",
-    "element_disabled": "#c4a7e74d",
-    "secondary_foreground": "#a085c5",
-    "secondary_background": "#393552",
-    "secondary_hover": "#c4a7e71a",
-    "secondary_active": "#44415a",
-    "secondary_selected": "#44415a",
-    "secondary_disabled": "#c4a7e74d",
-    "danger_foreground": "#232136",
-    "danger_background": "#eb6f92",
-    "danger_hover": "#e55a82",
-    "danger_active": "#df4572",
-    "danger_selected": "#d93062",
-    "danger_disabled": "#eb6f924d",
-    "warning_foreground": "#232136",
-    "warning_background": "#f6c177",
-    "warning_hover": "#f4b35e",
-    "warning_active": "#f2a545",
-    "warning_selected": "#f0972c",
-    "warning_disabled": "#f6c1774d",
-    "ghost_element_background": "#00000000",
-    "ghost_element_background_alt": "#393552",
-    "ghost_element_hover": "#e0def41a",
-    "ghost_element_active": "#44415a",
-    "ghost_element_selected": "#44415a",
-    "ghost_element_disabled": "#e0def40d",
-    "tab_inactive_background": "#2a273f",
-    "tab_inactive_foreground": "#908caa",
-    "tab_active_background": "#232136",
-    "tab_active_foreground": "#e0def4",
-    "tab_hover_foreground": "#c4a7e7",
-    "scrollbar_thumb_background": "#e0def433",
-    "scrollbar_thumb_hover_background": "#e0def44d",
-    "scrollbar_thumb_border": "#00000000",
-    "scrollbar_track_background": "#00000000",
-    "scrollbar_track_border": "#44415a",
-    "drop_target_background": "#c4a7e71a",
-    "cursor": "#c4a7e7",
-    "selection": "#c4a7e740"
-  },
-  "dark": {
-    "background": "#232136",
-    "surface_background": "#2a273f",
-    "elevated_surface_background": "#393552",
-    "panel_background": "#232136",
-    "overlay": "#e0def41a",
-    "title_bar": "#2a273f",
-    "title_bar_inactive": "#393552",
-    "window_border": "#56526e",
-    "border": "#44415a",
-    "border_variant": "#393552",
-    "border_focused": "#c4a7e7",
-    "border_selected": "#c4a7e7",
-    "border_transparent": "#00000000",
-    "border_disabled": "#393552",
-    "ring": "#c4a7e7",
-    "text": "#e0def4",
-    "text_muted": "#908caa",
-    "text_placeholder": "#6e6a86",
-    "text_accent": "#c4a7e7",
-    "icon": "#908caa",
-    "icon_muted": "#6e6a86",
-    "icon_accent": "#c4a7e7",
-    "element_foreground": "#232136",
-    "element_background": "#c4a7e7",
-    "element_hover": "#c4a7e7e6",
-    "element_active": "#b296d6",
-    "element_selected": "#a085c5",
-    "element_disabled": "#c4a7e74d",
-    "secondary_foreground": "#a085c5",
-    "secondary_background": "#393552",
-    "secondary_hover": "#c4a7e71a",
-    "secondary_active": "#44415a",
-    "secondary_selected": "#44415a",
-    "secondary_disabled": "#c4a7e74d",
-    "danger_foreground": "#232136",
-    "danger_background": "#eb6f92",
-    "danger_hover": "#e55a82",
-    "danger_active": "#df4572",
-    "danger_selected": "#d93062",
-    "danger_disabled": "#eb6f924d",
-    "warning_foreground": "#232136",
-    "warning_background": "#f6c177",
-    "warning_hover": "#f4b35e",
-    "warning_active": "#f2a545",
-    "warning_selected": "#f0972c",
-    "warning_disabled": "#f6c1774d",
-    "ghost_element_background": "#00000000",
-    "ghost_element_background_alt": "#393552",
-    "ghost_element_hover": "#e0def41a",
-    "ghost_element_active": "#44415a",
-    "ghost_element_selected": "#44415a",
-    "ghost_element_disabled": "#e0def40d",
-    "tab_inactive_background": "#2a273f",
-    "tab_inactive_foreground": "#908caa",
-    "tab_active_background": "#232136",
-    "tab_active_foreground": "#e0def4",
-    "tab_hover_foreground": "#c4a7e7",
-    "scrollbar_thumb_background": "#e0def433",
-    "scrollbar_thumb_hover_background": "#e0def44d",
-    "scrollbar_thumb_border": "#00000000",
-    "scrollbar_track_background": "#00000000",
-    "scrollbar_track_border": "#44415a",
-    "drop_target_background": "#c4a7e71a",
-    "cursor": "#c4a7e7",
-    "selection": "#c4a7e740"
-  }
-}

assets/themes/rose-pine.json

@@ -1,140 +0,0 @@
-{
-  "id": "rose-pine",
-  "name": "Rosé Pine",
-  "author": "Rosé Pine",
-  "url": "https://rosepinetheme.com/",
-  "light": {
-    "background": "#191724",
-    "surface_background": "#1f1d2e",
-    "elevated_surface_background": "#26233a",
-    "panel_background": "#191724",
-    "overlay": "#e0def41a",
-    "title_bar": "#1f1d2e",
-    "title_bar_inactive": "#26233a",
-    "window_border": "#524f67",
-    "border": "#403d52",
-    "border_variant": "#26233a",
-    "border_focused": "#c4a7e7",
-    "border_selected": "#c4a7e7",
-    "border_transparent": "#00000000",
-    "border_disabled": "#26233a",
-    "ring": "#c4a7e7",
-    "text": "#e0def4",
-    "text_muted": "#908caa",
-    "text_placeholder": "#6e6a86",
-    "text_accent": "#c4a7e7",
-    "icon": "#908caa",
-    "icon_muted": "#6e6a86",
-    "icon_accent": "#c4a7e7",
-    "element_foreground": "#191724",
-    "element_background": "#c4a7e7",
-    "element_hover": "#c4a7e7e6",
-    "element_active": "#b296d6",
-    "element_selected": "#a085c5",
-    "element_disabled": "#c4a7e74d",
-    "secondary_foreground": "#a085c5",
-    "secondary_background": "#26233a",
-    "secondary_hover": "#c4a7e71a",
-    "secondary_active": "#403d52",
-    "secondary_selected": "#403d52",
-    "secondary_disabled": "#c4a7e74d",
-    "danger_foreground": "#191724",
-    "danger_background": "#eb6f92",
-    "danger_hover": "#e55a82",
-    "danger_active": "#df4572",
-    "danger_selected": "#d93062",
-    "danger_disabled": "#eb6f924d",
-    "warning_foreground": "#191724",
-    "warning_background": "#f6c177",
-    "warning_hover": "#f4b35e",
-    "warning_active": "#f2a545",
-    "warning_selected": "#f0972c",
-    "warning_disabled": "#f6c1774d",
-    "ghost_element_background": "#00000000",
-    "ghost_element_background_alt": "#26233a",
-    "ghost_element_hover": "#e0def41a",
-    "ghost_element_active": "#403d52",
-    "ghost_element_selected": "#403d52",
-    "ghost_element_disabled": "#e0def40d",
-    "tab_inactive_background": "#1f1d2e",
-    "tab_inactive_foreground": "#908caa",
-    "tab_active_background": "#191724",
-    "tab_active_foreground": "#e0def4",
-    "tab_hover_foreground": "#c4a7e7",
-    "scrollbar_thumb_background": "#e0def433",
-    "scrollbar_thumb_hover_background": "#e0def44d",
-    "scrollbar_thumb_border": "#00000000",
-    "scrollbar_track_background": "#00000000",
-    "scrollbar_track_border": "#403d52",
-    "drop_target_background": "#c4a7e71a",
-    "cursor": "#c4a7e7",
-    "selection": "#c4a7e740"
-  },
-  "dark": {
-    "background": "#191724",
-    "surface_background": "#1f1d2e",
-    "elevated_surface_background": "#26233a",
-    "panel_background": "#191724",
-    "overlay": "#e0def41a",
-    "title_bar": "#1f1d2e",
-    "title_bar_inactive": "#26233a",
-    "window_border": "#524f67",
-    "border": "#403d52",
-    "border_variant": "#26233a",
-    "border_focused": "#c4a7e7",
-    "border_selected": "#c4a7e7",
-    "border_transparent": "#00000000",
-    "border_disabled": "#26233a",
-    "ring": "#c4a7e7",
-    "text": "#e0def4",
-    "text_muted": "#908caa",
-    "text_placeholder": "#6e6a86",
-    "text_accent": "#c4a7e7",
-    "icon": "#908caa",
-    "icon_muted": "#6e6a86",
-    "icon_accent": "#c4a7e7",
-    "element_foreground": "#191724",
-    "element_background": "#c4a7e7",
-    "element_hover": "#c4a7e7e6",
-    "element_active": "#b296d6",
-    "element_selected": "#a085c5",
-    "element_disabled": "#c4a7e74d",
-    "secondary_foreground": "#a085c5",
-    "secondary_background": "#26233a",
-    "secondary_hover": "#c4a7e71a",
-    "secondary_active": "#403d52",
-    "secondary_selected": "#403d52",
-    "secondary_disabled": "#c4a7e74d",
-    "danger_foreground": "#191724",
-    "danger_background": "#eb6f92",
-    "danger_hover": "#e55a82",
-    "danger_active": "#df4572",
-    "danger_selected": "#d93062",
-    "danger_disabled": "#eb6f924d",
-    "warning_foreground": "#191724",
-    "warning_background": "#f6c177",
-    "warning_hover": "#f4b35e",
-    "warning_active": "#f2a545",
-    "warning_selected": "#f0972c",
-    "warning_disabled": "#f6c1774d",
-    "ghost_element_background": "#00000000",
-    "ghost_element_background_alt": "#26233a",
-    "ghost_element_hover": "#e0def41a",
-    "ghost_element_active": "#403d52",
-    "ghost_element_selected": "#403d52",
-    "ghost_element_disabled": "#e0def40d",
-    "tab_inactive_background": "#1f1d2e",
-    "tab_inactive_foreground": "#908caa",
-    "tab_active_background": "#191724",
-    "tab_active_foreground": "#e0def4",
-    "tab_hover_foreground": "#c4a7e7",
-    "scrollbar_thumb_background": "#e0def433",
-    "scrollbar_thumb_hover_background": "#e0def44d",
-    "scrollbar_thumb_border": "#00000000",
-    "scrollbar_track_background": "#00000000",
-    "scrollbar_track_border": "#403d52",
-    "drop_target_background": "#c4a7e71a",
-    "cursor": "#c4a7e7",
-    "selection": "#c4a7e740"
-  }
-}

crates/auto_update/src/lib.rs

@@ -3,7 +3,7 @@ use std::path::{Path, PathBuf};
 use std::sync::Arc;
 use std::time::Duration;
 
-use anyhow::{anyhow, Context as AnyhowContext, Error};
+use anyhow::{Context as AnyhowContext, Error, anyhow};
 use gpui::http_client::{AsyncBody, HttpClient};
 use gpui::{
     App, AppContext, AsyncApp, BackgroundExecutor, Context, Entity, Global, Subscription, Task,
@@ -11,7 +11,7 @@ use gpui::{
 };
 use semver::Version;
 use serde::Deserialize;
-use smallvec::{smallvec, SmallVec};
+use smallvec::{SmallVec, smallvec};
 use smol::fs::File;
 use smol::io::AsyncReadExt;
 use smol::process::Command;
@@ -20,11 +20,11 @@ const GITHUB_API_URL: &str = "https://api.github.com";
 const COOP_UPDATE_EXPLANATION: &str = "COOP_UPDATE_EXPLANATION";
 
 fn get_github_repo_owner() -> String {
-    std::env::var("COOP_GITHUB_REPO_OWNER").unwrap_or_else(|_| "your-username".to_string())
+    std::env::var("COOP_GITHUB_REPO_OWNER").unwrap_or_else(|_| "reyakov".to_string())
 }
 
 fn get_github_repo_name() -> String {
-    std::env::var("COOP_GITHUB_REPO_NAME").unwrap_or_else(|_| "your-repo".to_string())
+    std::env::var("COOP_GITHUB_REPO_NAME").unwrap_or_else(|_| "coop".to_string())
 }
 
 fn is_flatpak_installation() -> bool {

crates/chat/src/lib.rs

@@ -1,20 +1,21 @@
 use std::cmp::Reverse;
 use std::collections::{HashMap, HashSet};
 use std::hash::{DefaultHasher, Hash, Hasher};
-use std::sync::atomic::{AtomicBool, Ordering};
 use std::sync::Arc;
+use std::sync::atomic::{AtomicBool, Ordering};
 use std::time::Duration;
 
-use anyhow::{anyhow, Context as AnyhowContext, Error};
+use anyhow::{Context as AnyhowContext, Error, anyhow};
 use common::EventUtils;
-use fuzzy_matcher::skim::SkimMatcherV2;
 use fuzzy_matcher::FuzzyMatcher;
+use fuzzy_matcher::skim::SkimMatcherV2;
 use gpui::{
-    App, AppContext, Context, Entity, EventEmitter, Global, Subscription, Task, WeakEntity, Window,
+    App, AppContext, Context, Entity, EventEmitter, Global, SharedString, Subscription, Task,
+    WeakEntity, Window,
 };
 use nostr_sdk::prelude::*;
-use smallvec::{smallvec, SmallVec};
+use smallvec::{SmallVec, smallvec};
-use state::{NostrRegistry, RelayState, DEVICE_GIFTWRAP, TIMEOUT, USER_GIFTWRAP};
+use state::{DEVICE_GIFTWRAP, NostrRegistry, StateEvent, TIMEOUT, USER_GIFTWRAP};
 
 mod message;
 mod room;
@@ -39,6 +40,10 @@ pub enum ChatEvent {
     CloseRoom(u64),
     /// An event to notify UI about a new chat request
     Ping,
+    /// An event to notify UI that the chat registry has subscribed to messaging relays
+    Subscribed,
+    /// An error occurred
+    Error(SharedString),
 }
 
 /// Channel signal.
@@ -48,41 +53,25 @@ enum Signal {
     Message(NewMessage),
     /// Eose received from relay pool
     Eose,
-}
+    /// An error occurred
-
+    Error(SharedString),
-/// Inbox state.
-#[derive(Debug, Clone, Default, PartialEq, Eq, PartialOrd, Ord)]
-pub enum InboxState {
-    #[default]
-    Idle,
-    Checking,
-    RelayNotAvailable,
-    RelayConfigured(Box<Event>),
-    Subscribing,
-}
-
-impl InboxState {
-    pub fn not_configured(&self) -> bool {
-        matches!(self, InboxState::RelayNotAvailable)
-    }
-
-    pub fn subscribing(&self) -> bool {
-        matches!(self, InboxState::Subscribing)
-    }
 }
 
 /// Chat Registry
 #[derive(Debug)]
 pub struct ChatRegistry {
-    /// Relay state for messaging relay list
-    state: Entity<InboxState>,
-
     /// Collection of all chat rooms
     rooms: Vec<Entity<Room>>,
 
     /// Tracking the status of unwrapping gift wrap events.
     tracking_flag: Arc<AtomicBool>,
 
+    /// Channel for sending signals to the UI.
+    signal_tx: flume::Sender<Signal>,
+
+    /// Channel for receiving signals from the UI.
+    signal_rx: flume::Receiver<Signal>,
+
     /// Async tasks
     tasks: SmallVec<[Task<Result<(), Error>>; 2]>,
 
@@ -105,36 +94,18 @@ impl ChatRegistry {
 
     /// Create a new chat registry instance
     fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
-        let state = cx.new(|_| InboxState::default());
         let nostr = NostrRegistry::global(cx);
-
+        let (tx, rx) = flume::unbounded::<Signal>();
         let mut subscriptions = smallvec![];
 
         subscriptions.push(
-            // Observe the nip65 state and load chat rooms on every state change
+            // Subscribe to the signer event
-            cx.observe(&nostr, |this, state, cx| {
+            cx.subscribe(&nostr, |this, _state, event, cx| {
-                match state.read(cx).relay_list_state() {
+                if let StateEvent::SignerSet = event {
-                    RelayState::Idle => {
                     this.reset(cx);
-                    }
-                    RelayState::Configured => {
-                        this.get_contact_list(cx);
-                        this.ensure_messaging_relays(cx);
-                    }
-                    _ => {}
-                }
-
-                // Load rooms on every state change
                     this.get_rooms(cx);
-            }),
+                    this.get_contact_list(cx);
-        );
+                    this.get_messages(cx)
-
-        subscriptions.push(
-            // Observe the nip17 state and load chat rooms on every state change
-            cx.observe(&state, |this, state, cx| {
-                if let InboxState::RelayConfigured(event) = state.read(cx) {
-                    let relay_urls: Vec<_> = nip17::extract_relay_list(event).cloned().collect();
-                    this.get_messages(relay_urls, cx);
                 }
             }),
         );
@@ -147,9 +118,10 @@ impl ChatRegistry {
         });
 
         Self {
-            state,
             rooms: vec![],
             tracking_flag: Arc::new(AtomicBool::new(false)),
+            signal_rx: rx,
+            signal_tx: tx,
             tasks: smallvec![],
             _subscriptions: subscriptions,
         }
@@ -167,7 +139,8 @@ impl ChatRegistry {
         let sub_id2 = SubscriptionId::new(USER_GIFTWRAP);
 
         // Channel for communication between nostr and gpui
-        let (tx, rx) = flume::bounded::<Signal>(1024);
+        let tx = self.signal_tx.clone();
+        let rx = self.signal_rx.clone();
 
         self.tasks.push(cx.background_spawn(async move {
             let device_signer = signer.get_encryption_signer().await;
@@ -194,7 +167,14 @@ impl ChatRegistry {
 
                         // Extract the rumor from the gift wrap event
                         match extract_rumor(&client, &device_signer, event.as_ref()).await {
-                            Ok(rumor) => match rumor.created_at >= initialized_at {
+                            Ok(rumor) => {
+                                if rumor.tags.is_empty() {
+                                    let error: SharedString =
+                                        "Message doesn't belong to any rooms".into();
+                                    tx.send_async(Signal::Error(error)).await?;
+                                }
+
+                                match rumor.created_at >= initialized_at {
                                     true => {
                                         let new_message = NewMessage::new(event.id, rumor);
                                         let signal = Signal::Message(new_message);
@@ -204,9 +184,12 @@ impl ChatRegistry {
                                     false => {
                                         status.store(true, Ordering::Release);
                                     }
-                            },
+                                }
+                            }
                             Err(e) => {
-                                log::warn!("Failed to unwrap the gift wrap event: {e}");
+                                let error: SharedString =
+                                    format!("Failed to unwrap the gift wrap event: {e}").into();
+                                tx.send_async(Signal::Error(error)).await?;
                             }
                         }
                     }
@@ -235,6 +218,11 @@ impl ChatRegistry {
                             this.get_rooms(cx);
                         })?;
                     }
+                    Signal::Error(error) => {
+                        this.update(cx, |_this, cx| {
+                            cx.emit(ChatEvent::Error(error));
+                        })?;
+                    }
                 };
             }
 
@@ -245,6 +233,7 @@ impl ChatRegistry {
     /// Tracking the status of unwrapping gift wrap events.
     fn tracking(&mut self, cx: &mut Context<Self>) {
         let status = self.tracking_flag.clone();
+        let tx = self.signal_tx.clone();
 
         self.tasks.push(cx.background_spawn(async move {
             let loop_duration = Duration::from_secs(15);
@@ -252,6 +241,9 @@ impl ChatRegistry {
             loop {
                 if status.load(Ordering::Acquire) {
                     _ = status.compare_exchange(true, false, Ordering::Release, Ordering::Relaxed);
+                    _ = tx.send_async(Signal::Eose).await;
+                } else {
+                    _ = tx.send_async(Signal::Eose).await;
                 }
                 smol::Timer::after(loop_duration).await;
             }
@@ -262,10 +254,11 @@ impl ChatRegistry {
     pub fn get_contact_list(&mut self, cx: &mut Context<Self>) {
         let nostr = NostrRegistry::global(cx);
         let client = nostr.read(cx).client();
-
         let signer = nostr.read(cx).signer();
-        let public_key = signer.public_key().unwrap();
+
-        let write_relays = nostr.read(cx).write_relays(&public_key, cx);
+        let Some(public_key) = signer.public_key() else {
+            return;
+        };
 
         let task: Task<Result<(), Error>> = cx.background_spawn(async move {
             let id = SubscriptionId::new("contact-list");
@@ -273,21 +266,14 @@ impl ChatRegistry {
                 .exit_policy(ReqExitPolicy::ExitOnEOSE)
                 .timeout(Some(Duration::from_secs(TIMEOUT)));
 
-            // Get user's write relays
-            let urls = write_relays.await;
-
             // Construct filter for inbox relays
             let filter = Filter::new()
                 .kind(Kind::ContactList)
                 .author(public_key)
                 .limit(1);
 
-            // Construct target for subscription
-            let target: HashMap<&RelayUrl, Filter> =
-                urls.iter().map(|relay| (relay, filter.clone())).collect();
-
             // Subscribe
-            client.subscribe(target).close_on(opts).with_id(id).await?;
+            client.subscribe(filter).close_on(opts).with_id(id).await?;
 
             Ok(())
         });
@@ -295,36 +281,35 @@ impl ChatRegistry {
         self.tasks.push(task);
     }
 
-    /// Ensure messaging relays are set up for the current user.
+    /// Get all messages for current user
-    pub fn ensure_messaging_relays(&mut self, cx: &mut Context<Self>) {
+    pub fn get_messages(&mut self, cx: &mut Context<Self>) {
-        let task = self.verify_relays(cx);
+        let task = self.subscribe(cx);
-
-        // Set state to checking
-        self.set_state(InboxState::Checking, cx);
 
         self.tasks.push(cx.spawn(async move |this, cx| {
-            let result = task.await?;
+            match task.await {
-
+                Ok(_) => {
-            // Update state
+                    this.update(cx, |_this, cx| {
-            this.update(cx, |this, cx| {
+                        cx.emit(ChatEvent::Subscribed);
-                this.set_state(result, cx);
                     })?;
-
+                }
+                Err(e) => {
+                    this.update(cx, |_this, cx| {
+                        cx.emit(ChatEvent::Error(SharedString::from(e.to_string())));
+                    })?;
+                }
+            }
             Ok(())
         }));
     }
 
-    // Verify messaging relay list for current user
+    // Get messaging relay list for current user
-    fn verify_relays(&mut self, cx: &mut Context<Self>) -> Task<Result<InboxState, Error>> {
+    fn get_messaging_relays(&self, cx: &App) -> Task<Result<Vec<RelayUrl>, Error>> {
         let nostr = NostrRegistry::global(cx);
         let client = nostr.read(cx).client();
-
         let signer = nostr.read(cx).signer();
-        let public_key = signer.public_key().unwrap();
-        let write_relays = nostr.read(cx).write_relays(&public_key, cx);
 
         cx.background_spawn(async move {
-            let urls = write_relays.await;
+            let public_key = signer.get_public_key().await?;
 
             // Construct filter for inbox relays
             let filter = Filter::new()
@@ -332,61 +317,32 @@ impl ChatRegistry {
                 .author(public_key)
                 .limit(1);
 
-            // Construct target for subscription
-            let target: HashMap<&RelayUrl, Filter> =
-                urls.iter().map(|relay| (relay, filter.clone())).collect();
-
             // Stream events from user's write relays
             let mut stream = client
-                .stream_events(target)
+                .stream_events(filter)
                 .timeout(Duration::from_secs(TIMEOUT))
                 .await?;
 
             while let Some((_url, res)) = stream.next().await {
-                match res {
+                if let Ok(event) = res {
-                    Ok(event) => {
+                    let urls: Vec<RelayUrl> = nip17::extract_owned_relay_list(event).collect();
-                        return Ok(InboxState::RelayConfigured(Box::new(event)));
+                    return Ok(urls);
-                    }
-                    Err(e) => {
-                        log::error!("Failed to receive relay list event: {e}");
-                    }
                 }
             }
 
-            Ok(InboxState::RelayNotAvailable)
+            Err(anyhow!("Messaging Relays not found"))
         })
     }
 
-    /// Get all messages for current user
-    fn get_messages<I>(&mut self, relay_urls: I, cx: &mut Context<Self>)
-    where
-        I: IntoIterator<Item = RelayUrl>,
-    {
-        let task = self.subscribe(relay_urls, cx);
-
-        self.tasks.push(cx.spawn(async move |this, cx| {
-            task.await?;
-
-            // Update state
-            this.update(cx, |this, cx| {
-                this.set_state(InboxState::Subscribing, cx);
-            })?;
-
-            Ok(())
-        }));
-    }
-
     /// Continuously get gift wrap events for the current user in their messaging relays
-    fn subscribe<I>(&mut self, urls: I, cx: &mut Context<Self>) -> Task<Result<(), Error>>
+    fn subscribe(&self, cx: &App) -> Task<Result<(), Error>> {
-    where
-        I: IntoIterator<Item = RelayUrl>,
-    {
         let nostr = NostrRegistry::global(cx);
         let client = nostr.read(cx).client();
         let signer = nostr.read(cx).signer();
-        let urls = urls.into_iter().collect::<Vec<_>>();
+        let urls = self.get_messaging_relays(cx);
 
         cx.background_spawn(async move {
+            let urls = urls.await?;
             let public_key = signer.get_public_key().await?;
             let filter = Filter::new().kind(Kind::GiftWrap).pubkey(public_key);
             let id = SubscriptionId::new(USER_GIFTWRAP);
@@ -413,19 +369,6 @@ impl ChatRegistry {
         })
     }
 
-    /// Set the state of the inbox
-    fn set_state(&mut self, state: InboxState, cx: &mut Context<Self>) {
-        self.state.update(cx, |this, cx| {
-            *this = state;
-            cx.notify();
-        });
-    }
-
-    /// Get the relay state
-    pub fn state(&self, cx: &App) -> InboxState {
-        self.state.read(cx).clone()
-    }
-
     /// Get the loading status of the chat registry
     pub fn loading(&self) -> bool {
         self.tracking_flag.load(Ordering::Acquire)
@@ -685,8 +628,7 @@ impl ChatRegistry {
     }
 
     /// Trigger a refresh of the opened chat rooms by their IDs
-    pub fn refresh_rooms(&mut self, ids: Option<Vec<u64>>, cx: &mut Context<Self>) {
+    pub fn refresh_rooms(&mut self, ids: &[u64], cx: &mut Context<Self>) {
-        if let Some(ids) = ids {
         for room in self.rooms.iter() {
             if ids.contains(&room.read(cx).id) {
                 room.update(cx, |this, cx| {
@@ -695,7 +637,6 @@ impl ChatRegistry {
             }
         }
     }
-    }
 }
 
 /// Unwraps a gift-wrapped event and processes its contents.

crates/chat/src/message.rs

@@ -1,6 +1,7 @@
 use std::hash::Hash;
+use std::ops::Range;
 
-use common::EventUtils;
+use common::{EventUtils, NostrParser};
 use nostr_sdk::prelude::*;
 
 /// New message.
@@ -91,6 +92,18 @@ impl PartialOrd for Message {
     }
 }
 
+#[derive(Debug, Clone)]
+pub struct Mention {
+    pub public_key: PublicKey,
+    pub range: Range<usize>,
+}
+
+impl Mention {
+    pub fn new(public_key: PublicKey, range: Range<usize>) -> Self {
+        Self { public_key, range }
+    }
+}
+
 /// Rendered message.
 #[derive(Debug, Clone)]
 pub struct RenderedMessage {
@@ -102,7 +115,7 @@ pub struct RenderedMessage {
     /// Message created time as unix timestamp
     pub created_at: Timestamp,
     /// List of mentioned public keys in the message
-    pub mentions: Vec<PublicKey>,
+    pub mentions: Vec<Mention>,
     /// List of event of the message this message is a reply to
     pub replies_to: Vec<EventId>,
 }
@@ -184,20 +197,17 @@ impl Hash for RenderedMessage {
 }
 
 /// Extracts all mentions (public keys) from a content string.
-fn extract_mentions(content: &str) -> Vec<PublicKey> {
+fn extract_mentions(content: &str) -> Vec<Mention> {
     let parser = NostrParser::new();
     let tokens = parser.parse(content);
 
     tokens
-        .filter_map(|token| match token {
+        .filter_map(|token| match token.value {
-            Token::Nostr(nip21) => match nip21 {
+            Nip21::Pubkey(public_key) => Some(Mention::new(public_key, token.range)),
-                Nip21::Pubkey(pubkey) => Some(pubkey),
+            Nip21::Profile(profile) => Some(Mention::new(profile.public_key, token.range)),
-                Nip21::Profile(profile) => Some(profile.public_key),
-                _ => None,
-            },
             _ => None,
         })
-        .collect::<Vec<_>>()
+        .collect()
 }
 
 /// Extracts all reply (ids) from the event tags.

crates/chat/src/room.rs

@@ -1,5 +1,4 @@
 use std::cmp::Ordering;
-use std::collections::HashMap;
 use std::hash::{Hash, Hasher};
 use std::time::Duration;
 
@@ -10,7 +9,7 @@ use itertools::Itertools;
 use nostr_sdk::prelude::*;
 use person::{Person, PersonRegistry};
 use settings::{RoomConfig, SignerKind};
-use state::{NostrRegistry, BOOTSTRAP_RELAYS, TIMEOUT};
+use state::{NostrRegistry, TIMEOUT};
 
 use crate::NewMessage;
 
@@ -331,44 +330,38 @@ impl Room {
         let client = nostr.read(cx).client();
 
         let signer = nostr.read(cx).signer();
-        let sender = signer.public_key().unwrap();
+        let sender = signer.public_key();
-
-        // Get room's id
-        let id = self.id;
 
         // Get all members, excluding the sender
         let members: Vec<PublicKey> = self
             .members
             .iter()
-            .filter(|public_key| public_key != &&sender)
+            .filter(|public_key| Some(**public_key) != sender)
             .copied()
             .collect();
 
         cx.background_spawn(async move {
-            let id = SubscriptionId::new(format!("room-{id}"));
             let opts = SubscribeAutoCloseOptions::default()
                 .exit_policy(ReqExitPolicy::ExitOnEOSE)
                 .timeout(Some(Duration::from_secs(TIMEOUT)));
 
-            // Construct filters for each member
+            for public_key in members.into_iter() {
-            let filters: Vec<Filter> = members
+                let inbox = Filter::new()
-                .into_iter()
-                .map(|public_key| {
-                    Filter::new()
                     .author(public_key)
-                        .kind(Kind::RelayList)
+                    .kind(Kind::InboxRelays)
-                        .limit(1)
+                    .limit(1);
-                })
-                .collect();
 
-            // Construct target for subscription
+                let announcement = Filter::new()
-            let target: HashMap<&str, Vec<Filter>> = BOOTSTRAP_RELAYS
+                    .author(public_key)
-                .into_iter()
+                    .kind(Kind::Custom(10044))
-                .map(|relay| (relay, filters.clone()))
+                    .limit(1);
-                .collect();
 
                 // Subscribe to the target
-            client.subscribe(target).close_on(opts).with_id(id).await?;
+                client
+                    .subscribe(vec![inbox, announcement])
+                    .close_on(opts)
+                    .await?;
+            }
 
             Ok(())
         })
@@ -491,15 +484,9 @@ impl Room {
 
             // Process each member
             for member in members {
-                let relays = member.messaging_relays();
                 let announcement = member.announcement();
                 let public_key = member.public_key();
 
-                if relays.is_empty() {
-                    reports.push(SendReport::new(public_key).error("No messaging relays"));
-                    continue;
-                }
-
                 // Handle encryption signer requirements
                 if signer_kind.encryption() {
                     if announcement.is_none() {
@@ -535,8 +522,7 @@ impl Room {
                     SignerKind::User => (member.public_key(), user_signer.clone()),
                 };
 
-                match send_gift_wrap(&client, &signer, &receiver, &rumor, relays, public_key).await
+                match send_gift_wrap(&client, &signer, &receiver, &rumor, public_key).await {
-                {
                     Ok((report, _)) => {
                         reports.push(report);
                         sents += 1;
@@ -549,12 +535,10 @@ impl Room {
 
             // Send backup to current user if needed
             if backup && sents >= 1 {
-                let relays = sender.messaging_relays();
                 let public_key = sender.public_key();
                 let signer = encryption_signer.as_ref().unwrap_or(&user_signer);
 
-                match send_gift_wrap(&client, signer, &public_key, &rumor, relays, public_key).await
+                match send_gift_wrap(&client, signer, &public_key, &rumor, public_key).await {
-                {
                     Ok((report, _)) => reports.push(report),
                     Err(report) => reports.push(report),
                 }
@@ -571,22 +555,16 @@ async fn send_gift_wrap<T>(
     signer: &T,
     receiver: &PublicKey,
     rumor: &UnsignedEvent,
-    relays: &[RelayUrl],
     public_key: PublicKey,
 ) -> Result<(SendReport, bool), SendReport>
 where
     T: NostrSigner + 'static,
 {
-    // Ensure relay connections
-    for url in relays {
-        client.add_relay(url).and_connect().await.ok();
-    }
-
     match EventBuilder::gift_wrap(signer, receiver, rumor.clone(), []).await {
         Ok(event) => {
             match client
                 .send_event(&event)
-                .to(relays)
+                .to_nip17()
                 .ack_policy(AckPolicy::none())
                 .await
             {

crates/chat_ui/Cargo.toml

@@ -28,3 +28,5 @@ serde_json.workspace = true
 
 once_cell = "1.19.0"
 regex = "1"
+linkify = "0.10.0"
+pulldown-cmark = "0.13.1"

crates/chat_ui/src/actions.rs

@@ -7,21 +7,11 @@ use settings::SignerKind;
 #[action(namespace = chat, no_json)]
 pub enum Command {
     Insert(&'static str),
-    ChangeSubject(&'static str),
+    ChangeSubject(String),
     ChangeSigner(SignerKind),
     ToggleBackup,
+    Subject,
+    Copy(PublicKey),
+    Relays(PublicKey),
+    Njump(PublicKey),
 }
-
-#[derive(Action, Clone, PartialEq, Eq, Deserialize)]
-#[action(namespace = chat, no_json)]
-pub struct SeenOn(pub EventId);
-
-/// Define a open public key action
-#[derive(Action, Clone, PartialEq, Eq, Deserialize, Debug)]
-#[action(namespace = pubkey, no_json)]
-pub struct OpenPublicKey(pub PublicKey);
-
-/// Define a copy inline public key action
-#[derive(Action, Clone, PartialEq, Eq, Deserialize, Debug)]
-#[action(namespace = pubkey, no_json)]
-pub struct CopyPublicKey(pub PublicKey);

crates/chat_ui/src/lib.rs

@@ -1,6 +1,5 @@
 use std::collections::{BTreeMap, BTreeSet, HashSet};
 use std::sync::Arc;
-use std::time::Duration;
 
 pub use actions::*;
 use anyhow::{Context as AnyhowContext, Error};
@@ -8,31 +7,31 @@ use chat::{Message, RenderedMessage, Room, RoomEvent, SendReport};
 use common::RenderedTimestamp;
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    deferred, div, img, list, px, red, relative, svg, white, AnyElement, App, AppContext,
+    AnyElement, App, AppContext, ClipboardItem, Context, Entity, EventEmitter, FocusHandle,
-    ClipboardItem, Context, Entity, EventEmitter, FocusHandle, Focusable, InteractiveElement,
+    Focusable, InteractiveElement, IntoElement, ListAlignment, ListOffset, ListState, MouseButton,
-    IntoElement, ListAlignment, ListOffset, ListState, MouseButton, ObjectFit, ParentElement,
+    ObjectFit, ParentElement, PathPromptOptions, Render, SharedString, StatefulInteractiveElement,
-    PathPromptOptions, Render, SharedString, StatefulInteractiveElement, Styled, StyledImage,
+    Styled, StyledImage, Subscription, Task, WeakEntity, Window, deferred, div, img, list, px, red,
-    Subscription, Task, WeakEntity, Window,
+    relative, svg, white,
 };
 use itertools::Itertools;
 use nostr_sdk::prelude::*;
 use person::{Person, PersonRegistry};
 use settings::{AppSettings, SignerKind};
-use smallvec::{smallvec, SmallVec};
+use smallvec::{SmallVec, smallvec};
 use smol::lock::RwLock;
-use state::{upload, NostrRegistry};
+use state::{NostrRegistry, upload};
 use theme::ActiveTheme;
 use ui::avatar::Avatar;
 use ui::button::{Button, ButtonVariants};
-use ui::dock_area::panel::{Panel, PanelEvent};
+use ui::dock::{Panel, PanelEvent};
 use ui::indicator::Indicator;
 use ui::input::{InputEvent, InputState, TextInput};
-use ui::menu::{ContextMenuExt, DropdownMenu};
+use ui::menu::DropdownMenu;
 use ui::notification::Notification;
 use ui::scroll::Scrollbar;
 use ui::{
-    h_flex, v_flex, Disableable, Icon, IconName, InteractiveElementExt, Sizable, StyledExt,
+    Disableable, Icon, IconName, InteractiveElementExt, Sizable, StyledExt, WindowExtension,
-    WindowExtension,
+    h_flex, v_flex,
 };
 
 use crate::text::RenderedText;
@@ -42,11 +41,6 @@ mod text;
 
 const ANNOUNCEMENT: &str =
     "This conversation is private. Only members can see each other's messages.";
-const NO_INBOX: &str = "has not set up messaging relays. \
-    They will not receive messages you send.";
-const NO_ANNOUNCEMENT: &str = "has not set up an encryption key. \
-    You cannot send messages encrypted with an encryption key to them yet. \
-    Coop automatically uses your identity to encrypt messages.";
 
 pub fn init(room: WeakEntity<Room>, window: &mut Window, cx: &mut App) -> Entity<ChatPanel> {
     cx.new(|cx| ChatPanel::new(room, window, cx))
@@ -72,9 +66,15 @@ pub struct ChatPanel {
     /// Mapping message (rumor event) ids to their reports
     reports_by_id: Entity<BTreeMap<EventId, Vec<SendReport>>>,
 
-    /// Input state
+    /// Chat input state
     input: Entity<InputState>,
 
+    /// Subject input state
+    subject_input: Entity<InputState>,
+
+    /// Subject bar visibility
+    subject_bar: Entity<bool>,
+
     /// Sent message ids
     sent_ids: Arc<RwLock<Vec<EventId>>>,
 
@@ -91,7 +91,7 @@ pub struct ChatPanel {
     tasks: Vec<Task<Result<(), Error>>>,
 
     /// Event subscriptions
-    subscriptions: SmallVec<[Subscription; 2]>,
+    subscriptions: SmallVec<[Subscription; 3]>,
 }
 
 impl ChatPanel {
@@ -124,19 +124,37 @@ impl ChatPanel {
                 .clean_on_escape()
         });
 
+        // Define subject input state
+        let subject_input = cx.new(|cx| InputState::new(window, cx).placeholder("New subject..."));
+        let subject_bar = cx.new(|_cx| false);
+
         // Define subscriptions
-        let subscriptions =
+        let mut subscriptions = smallvec![];
-            smallvec![
+
+        subscriptions.push(
+            // Subscribe the chat input event
             cx.subscribe_in(&input, window, move |this, _input, event, window, cx| {
                 if let InputEvent::PressEnter { .. } = event {
                     this.send_text_message(window, cx);
                 };
-                })
+            }),
-            ];
+        );
+
+        subscriptions.push(
+            // Subscribe the subject input event
+            cx.subscribe_in(
+                &subject_input,
+                window,
+                move |this, _input, event, window, cx| {
+                    if let InputEvent::PressEnter { .. } = event {
+                        this.change_subject(window, cx);
+                    };
+                },
+            ),
+        );
 
         // Define all functions that will run after the current cycle
         cx.defer_in(window, |this, window, cx| {
-            this.connect(window, cx);
             this.handle_notifications(cx);
             this.subscribe_room_events(window, cx);
             this.get_messages(window, cx);
@@ -149,6 +167,8 @@ impl ChatPanel {
             room,
             list_state,
             input,
+            subject_input,
+            subject_bar,
             replies_to,
             attachments,
             rendered_texts_by_id: BTreeMap::new(),
@@ -160,49 +180,6 @@ impl ChatPanel {
         }
     }
 
-    /// Get all necessary data for each member
-    fn connect(&mut self, window: &mut Window, cx: &mut Context<Self>) {
-        let Ok((members, connect)) = self
-            .room
-            .read_with(cx, |this, cx| (this.members(), this.connect(cx)))
-        else {
-            return;
-        };
-
-        // Run the connect task in background
-        self.tasks.push(connect);
-
-        // Spawn another task to verify after 3 seconds
-        self.tasks.push(cx.spawn_in(window, async move |this, cx| {
-            cx.background_executor().timer(Duration::from_secs(3)).await;
-
-            // Verify the connection
-            this.update_in(cx, |this, _window, cx| {
-                let persons = PersonRegistry::global(cx);
-
-                for member in members.into_iter() {
-                    let profile = persons.read(cx).get(&member, cx);
-
-                    if profile.announcement().is_none() {
-                        let content = format!("{} {}", profile.name(), NO_ANNOUNCEMENT);
-                        let message = Message::warning(content);
-
-                        this.insert_message(message, true, cx);
-                    }
-
-                    if profile.messaging_relays().is_empty() {
-                        let content = format!("{} {}", profile.name(), NO_INBOX);
-                        let message = Message::warning(content);
-
-                        this.insert_message(message, true, cx);
-                    }
-                }
-            })?;
-
-            Ok(())
-        }));
-    }
-
     /// Handle nostr notifications
     fn handle_notifications(&mut self, cx: &mut Context<Self>) {
         let nostr = NostrRegistry::global(cx);
@@ -254,10 +231,7 @@ impl ChatPanel {
     }
 
     fn subscribe_room_events(&mut self, window: &mut Window, cx: &mut Context<Self>) {
-        let Some(room) = self.room.upgrade() else {
+        if let Some(room) = self.room.upgrade() {
-            return;
-        };
-
             self.subscriptions.push(
                 // Subscribe to room events
                 cx.subscribe_in(&room, window, move |this, _room, event, window, cx| {
@@ -272,6 +246,7 @@ impl ChatPanel {
                 }),
             );
         }
+    }
 
     /// Load all messages belonging to this room
     fn get_messages(&mut self, _window: &mut Window, cx: &mut Context<Self>) {
@@ -316,6 +291,16 @@ impl ChatPanel {
         content
     }
 
+    fn change_subject(&mut self, _window: &mut Window, cx: &mut Context<Self>) {
+        let subject = self.subject_input.read(cx).value();
+
+        self.room
+            .update(cx, |this, cx| {
+                this.set_subject(subject, cx);
+            })
+            .ok();
+    }
+
     fn send_text_message(&mut self, window: &mut Window, cx: &mut Context<Self>) {
         // Get the message which includes all attachments
         let content = self.get_input_value(cx);
@@ -505,10 +490,21 @@ impl ChatPanel {
         }
     }
 
-    fn copy_message(&self, id: &EventId, cx: &Context<Self>) {
+    fn copy_author(&self, public_key: &PublicKey, cx: &App) {
-        if let Some(message) = self.message(id) {
+        let content = public_key.to_bech32().unwrap();
-            cx.write_to_clipboard(ClipboardItem::new_string(message.content.to_string()));
+        let item = ClipboardItem::new_string(content);
+
+        cx.write_to_clipboard(item);
     }
+
+    fn copy_message(&self, id: &EventId, cx: &App) {
+        let Some(message) = self.message(id) else {
+            return;
+        };
+        let content = message.content.to_string();
+        let item = ClipboardItem::new_string(content);
+
+        cx.write_to_clipboard(item);
     }
 
     fn reply_to(&mut self, id: &EventId, cx: &mut Context<Self>) {
@@ -558,7 +554,10 @@ impl ChatPanel {
                 Err(e) => {
                     this.update_in(cx, |this, window, cx| {
                         this.set_uploading(false, cx);
-                        window.push_notification(Notification::error(e.to_string()), cx);
+                        window.push_notification(
+                            Notification::error(e.to_string()).autohide(false),
+                            cx,
+                        );
                     })?;
                 }
             }
@@ -588,7 +587,7 @@ impl ChatPanel {
         });
     }
 
-    fn profile(&self, public_key: &PublicKey, cx: &Context<Self>) -> Person {
+    fn profile(&self, public_key: &PublicKey, cx: &App) -> Person {
         let persons = PersonRegistry::global(cx);
         persons.read(cx).get(public_key, cx)
     }
@@ -602,11 +601,14 @@ impl ChatPanel {
                 if self
                     .room
                     .update(cx, |this, cx| {
-                        this.set_subject(*subject, cx);
+                        this.set_subject(subject, cx);
                     })
                     .is_err()
                 {
-                    window.push_notification(Notification::error("Failed to change subject"), cx);
+                    window.push_notification(
+                        Notification::error("Failed to change subject").autohide(false),
+                        cx,
+                    );
                 }
             }
             Command::ChangeSigner(kind) => {
@@ -617,7 +619,10 @@ impl ChatPanel {
                     })
                     .is_err()
                 {
-                    window.push_notification(Notification::error("Failed to change signer"), cx);
+                    window.push_notification(
+                        Notification::error("Failed to change signer").autohide(false),
+                        cx,
+                    );
                 }
             }
             Command::ToggleBackup => {
@@ -628,10 +633,101 @@ impl ChatPanel {
                     })
                     .is_err()
                 {
-                    window.push_notification(Notification::error("Failed to toggle backup"), cx);
+                    window.push_notification(
+                        Notification::error("Failed to toggle backup").autohide(false),
+                        cx,
+                    );
+                }
+            }
+            Command::Subject => {
+                self.open_subject(window, cx);
+            }
+            Command::Copy(public_key) => {
+                self.copy_author(public_key, cx);
+            }
+            Command::Relays(public_key) => {
+                self.open_relays(public_key, window, cx);
+            }
+            Command::Njump(public_key) => {
+                self.open_njump(public_key, cx);
             }
         }
     }
+
+    fn open_subject(&mut self, window: &mut Window, cx: &mut Context<Self>) {
+        let subject_input = self.subject_input.clone();
+
+        window.open_modal(cx, move |this, _window, cx| {
+            let subject = subject_input.read(cx).value();
+
+            this.title("Change subject")
+                .show_close(true)
+                .confirm()
+                .child(
+                    v_flex()
+                        .gap_2()
+                        .child(
+                            v_flex()
+                                .gap_1p5()
+                                .child(
+                                    div()
+                                        .text_sm()
+                                        .text_color(cx.theme().text_muted)
+                                        .child(SharedString::from("Subject:")),
+                                )
+                                .child(TextInput::new(&subject_input).small()),
+                        )
+                        .child(
+                            div()
+                                .italic()
+                                .text_xs()
+                                .text_color(cx.theme().text_placeholder)
+                                .child(SharedString::from(
+                                    "Subject will be updated when you send a new message.",
+                                )),
+                        ),
+                )
+                .on_ok(move |_ev, window, cx| {
+                    window
+                        .dispatch_action(Box::new(Command::ChangeSubject(subject.to_string())), cx);
+                    true
+                })
+        });
+    }
+
+    fn open_relays(&mut self, public_key: &PublicKey, window: &mut Window, cx: &mut Context<Self>) {
+        let profile = self.profile(public_key, cx);
+
+        window.open_modal(cx, move |this, _window, cx| {
+            let relays = profile.messaging_relays();
+
+            this.title("Messaging Relays")
+                .show_close(true)
+                .child(v_flex().gap_1().children({
+                    let mut items = vec![];
+
+                    for url in relays.iter() {
+                        items.push(
+                            h_flex()
+                                .h_7()
+                                .px_2()
+                                .gap_2()
+                                .bg(cx.theme().elevated_surface_background)
+                                .rounded(cx.theme().radius)
+                                .text_sm()
+                                .child(div().size_1p5().rounded_full().bg(gpui::green()))
+                                .child(SharedString::from(url.to_string())),
+                        );
+                    }
+
+                    items
+                }))
+        });
+    }
+
+    fn open_njump(&mut self, public_key: &PublicKey, cx: &mut Context<Self>) {
+        let content = format!("https://njump.me/{}", public_key.to_bech32().unwrap());
+        cx.open_url(&content);
     }
 
     fn render_announcement(&self, ix: usize, cx: &Context<Self>) -> AnyElement {
@@ -699,10 +795,13 @@ impl ChatPanel {
         if let Some(message) = self.messages.iter().nth(ix) {
             match message {
                 Message::User(rendered) => {
+                    let persons = PersonRegistry::global(cx);
                     let text = self
                         .rendered_texts_by_id
                         .entry(rendered.id)
-                        .or_insert_with(|| RenderedText::new(&rendered.content, cx))
+                        .or_insert_with(|| {
+                            RenderedText::new(&rendered.content, &rendered.mentions, &persons, cx)
+                        })
                         .element(ix.into(), window, cx);
 
                     self.render_text_message(ix, rendered, text, cx)
@@ -755,18 +854,14 @@ impl ChatPanel {
                     .flex()
                     .gap_3()
                     .when(!hide_avatar, |this| {
-                        this.child(
+                        this.child(Avatar::new(author.avatar()).dropdown_menu(
-                            div()
+                            move |this, _window, _cx| {
-                                .id(SharedString::from(format!("{ix}-avatar")))
+                                this.menu("Copy Public Key", Box::new(Command::Copy(public_key)))
-                                .child(Avatar::new(author.avatar()))
+                                    .menu("View Relays", Box::new(Command::Relays(public_key)))
-                                .context_menu(move |this, _window, _cx| {
+                                    .separator()
-                                    let view = Box::new(OpenPublicKey(public_key));
+                                    .menu("View on njump.me", Box::new(Command::Njump(public_key)))
-                                    let copy = Box::new(CopyPublicKey(public_key));
+                            },
-
+                        ))
-                                    this.menu("View Profile", view)
-                                        .menu("Copy Public Key", copy)
-                                }),
-                        )
                     })
                     .child(
                         v_flex()
@@ -804,8 +899,17 @@ impl ChatPanel {
                             }),
                     ),
             )
-            .child(self.render_border(cx))
+            .child(
-            .child(self.render_actions(&id, cx))
+                div()
+                    .group_hover("", |this| this.bg(cx.theme().element_active))
+                    .absolute()
+                    .left_0()
+                    .top_0()
+                    .w(px(2.))
+                    .h_full()
+                    .bg(cx.theme().border_transparent),
+            )
+            .child(self.render_actions(&id, &public_key, cx))
             .on_mouse_down(
                 MouseButton::Middle,
                 cx.listener(move |this, _, _window, cx| {
@@ -876,7 +980,7 @@ impl ChatPanel {
                     window.open_modal(cx, move |this, _window, cx| {
                         this.show_close(true)
                             .title(SharedString::from("Sent Reports"))
-                            .child(v_flex().pb_4().gap_4().children({
+                            .child(v_flex().pb_2().gap_4().children({
                                 let mut items = Vec::with_capacity(reports.len());
 
                                 for report in reports.iter() {
@@ -893,11 +997,11 @@ impl ChatPanel {
     fn render_message_reports(&self, id: &EventId, cx: &Context<Self>) -> impl IntoElement {
         h_flex()
             .id(SharedString::from(id.to_hex()))
-            .gap_0p5()
+            .gap_1()
-            .text_color(cx.theme().danger_active)
+            .text_color(cx.theme().text_danger)
             .text_xs()
             .italic()
-            .child(Icon::new(IconName::Info).xsmall())
+            .child(Icon::new(IconName::Info).small())
             .child(SharedString::from(
                 "Failed to send message. Click to see details.",
             ))
@@ -908,7 +1012,7 @@ impl ChatPanel {
                     window.open_modal(cx, move |this, _window, cx| {
                         this.show_close(true)
                             .title(SharedString::from("Sent Reports"))
-                            .child(v_flex().gap_4().pb_4().w_full().children({
+                            .child(v_flex().gap_4().w_full().children({
                                 let mut items = Vec::with_capacity(reports.len());
 
                                 for report in reports.iter() {
@@ -1027,18 +1131,12 @@ impl ChatPanel {
             })
     }
 
-    fn render_border(&self, cx: &Context<Self>) -> impl IntoElement {
+    fn render_actions(
-        div()
+        &self,
-            .group_hover("", |this| this.bg(cx.theme().element_active))
+        id: &EventId,
-            .absolute()
+        public_key: &PublicKey,
-            .left_0()
+        cx: &Context<Self>,
-            .top_0()
+    ) -> impl IntoElement {
-            .w(px(2.))
-            .h_full()
-            .bg(cx.theme().border_transparent)
-    }
-
-    fn render_actions(&self, id: &EventId, cx: &Context<Self>) -> impl IntoElement {
         h_flex()
             .p_0p5()
             .gap_1()
@@ -1079,13 +1177,22 @@ impl ChatPanel {
             )
             .child(div().flex_shrink_0().h_4().w_px().bg(cx.theme().border))
             .child(
-                Button::new("seen-on")
+                Button::new("advance")
                     .icon(IconName::Ellipsis)
                     .small()
                     .ghost()
                     .dropdown_menu({
-                        let id = id.to_owned();
+                        let public_key = *public_key;
-                        move |this, _window, _cx| this.menu("Seen on", Box::new(SeenOn(id)))
+                        let _id = *id;
+                        move |this, _window, _cx| {
+                            this.menu("Copy author", Box::new(Command::Copy(public_key)))
+                            /*
+                            .menu(
+                                "Trace",
+                                Box::new(Command::Trace(id)),
+                            )
+                            */
+                        }
                     }),
             )
             .group_hover("", |this| this.visible())
@@ -1283,12 +1390,30 @@ impl Panel for ChatPanel {
 
                 h_flex()
                     .gap_1p5()
-                    .child(Avatar::new(url).small())
+                    .child(Avatar::new(url).xsmall())
                     .child(label)
                     .into_any_element()
             })
             .unwrap_or(div().child("Unknown").into_any_element())
     }
+
+    fn toolbar_buttons(&self, _window: &Window, _cx: &App) -> Vec<Button> {
+        let subject_bar = self.subject_bar.clone();
+
+        vec![
+            Button::new("subject")
+                .icon(IconName::Input)
+                .tooltip("Change subject")
+                .small()
+                .ghost()
+                .on_click(move |_ev, _window, cx| {
+                    subject_bar.update(cx, |this, cx| {
+                        *this = !*this;
+                        cx.notify();
+                    });
+                }),
+        ]
+    }
 }
 
 impl EventEmitter<PanelEvent> for ChatPanel {}
@@ -1304,10 +1429,37 @@ impl Render for ChatPanel {
         v_flex()
             .on_action(cx.listener(Self::on_command))
             .size_full()
+            .when(*self.subject_bar.read(cx), |this| {
+                this.child(
+                    h_flex()
+                        .h_12()
+                        .w_full()
+                        .px_2()
+                        .gap_2()
+                        .border_b_1()
+                        .border_color(cx.theme().border)
                         .child(
-                div()
+                            TextInput::new(&self.subject_input)
+                                .text_sm()
+                                .small()
+                                .bordered(false),
+                        )
+                        .child(
+                            Button::new("change")
+                                .icon(IconName::CheckCircle)
+                                .label("Change")
+                                .secondary()
+                                .disabled(self.uploading)
+                                .on_click(cx.listener(move |this, _ev, window, cx| {
+                                    this.change_subject(window, cx);
+                                })),
+                        ),
+                )
+            })
+            .child(
+                v_flex()
                     .flex_1()
-                    .size_full()
+                    .relative()
                     .child(
                         list(
                             self.list_state.clone(),

crates/chat_ui/src/subject.rs

@@ -1,60 +0,0 @@
-use gpui::{
-    div, App, AppContext, Context, Entity, IntoElement, ParentElement, Render, SharedString,
-    Styled, Window,
-};
-use theme::ActiveTheme;
-use ui::input::{InputState, TextInput};
-use ui::{v_flex, Sizable};
-
-pub fn init(subject: Option<String>, window: &mut Window, cx: &mut App) -> Entity<Subject> {
-    cx.new(|cx| Subject::new(subject, window, cx))
-}
-
-pub struct Subject {
-    input: Entity<InputState>,
-}
-
-impl Subject {
-    pub fn new(subject: Option<String>, window: &mut Window, cx: &mut Context<Self>) -> Self {
-        let input = cx.new(|cx| InputState::new(window, cx).placeholder("Plan for holiday"));
-
-        if let Some(value) = subject {
-            input.update(cx, |this, cx| {
-                this.set_value(value, window, cx);
-            });
-        };
-
-        Self { input }
-    }
-
-    pub fn new_subject(&self, cx: &App) -> SharedString {
-        self.input.read(cx).value()
-    }
-}
-
-impl Render for Subject {
-    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
-        v_flex()
-            .gap_2()
-            .child(
-                v_flex()
-                    .gap_1()
-                    .child(
-                        div()
-                            .text_sm()
-                            .text_color(cx.theme().text_muted)
-                            .child(SharedString::from("Subject:")),
-                    )
-                    .child(TextInput::new(&self.input).small()),
-            )
-            .child(
-                div()
-                    .text_xs()
-                    .italic()
-                    .text_color(cx.theme().text_placeholder)
-                    .child(SharedString::from(
-                        "Subject will be updated when you send a new message.",
-                    )),
-            )
-    }
-}

crates/chat_ui/src/text.rs

@@ -1,29 +1,29 @@
 use std::ops::Range;
 use std::sync::Arc;
 
+use chat::Mention;
+use common::RangeExt;
 use gpui::{
-    AnyElement, App, ElementId, HighlightStyle, InteractiveText, IntoElement, SharedString,
+    AnyElement, App, ElementId, Entity, FontStyle, FontWeight, HighlightStyle, InteractiveText,
-    StyledText, UnderlineStyle, Window,
+    IntoElement, SharedString, StrikethroughStyle, StyledText, UnderlineStyle, Window,
 };
-use nostr_sdk::prelude::*;
-use once_cell::sync::Lazy;
 use person::PersonRegistry;
-use regex::Regex;
 use theme::ActiveTheme;
 
-use crate::actions::OpenPublicKey;
+#[allow(clippy::enum_variant_names)]
-
+#[allow(dead_code)]
-static URL_REGEX: Lazy<Regex> = Lazy::new(|| {
-    Regex::new(r"(?i)(?:^|\s)(?:https?://)?(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}(?::\d+)?(?:/[^\s]*)?(?:\s|$)").unwrap()
-});
-
-static NOSTR_URI_REGEX: Lazy<Regex> =
-    Lazy::new(|| Regex::new(r"nostr:(npub|note|nprofile|nevent|naddr)[a-zA-Z0-9]+").unwrap());
-
 #[derive(Debug, Clone, PartialEq, Eq)]
 pub enum Highlight {
-    Link,
+    Code,
-    Nostr,
+    InlineCode(bool),
+    Highlight(HighlightStyle),
+    Mention,
+}
+
+impl From<HighlightStyle> for Highlight {
+    fn from(style: HighlightStyle) -> Self {
+        Self::Highlight(style)
+    }
 }
 
 #[derive(Default)]
@@ -35,7 +35,12 @@ pub struct RenderedText {
 }
 
 impl RenderedText {
-    pub fn new(content: &str, cx: &App) -> Self {
+    pub fn new(
+        content: &str,
+        mentions: &[Mention],
+        persons: &Entity<PersonRegistry>,
+        cx: &App,
+    ) -> Self {
         let mut text = String::new();
         let mut highlights = Vec::new();
         let mut link_ranges = Vec::new();
@@ -43,10 +48,12 @@ impl RenderedText {
 
         render_plain_text_mut(
             content,
+            mentions,
             &mut text,
             &mut highlights,
             &mut link_ranges,
             &mut link_urls,
+            persons,
             cx,
         );
 
@@ -61,7 +68,7 @@ impl RenderedText {
     }
 
     pub fn element(&self, id: ElementId, window: &Window, cx: &App) -> AnyElement {
-        let link_color = cx.theme().text_accent;
+        let code_background = cx.theme().elevated_surface_background;
 
         InteractiveText::new(
             id,
@@ -71,15 +78,35 @@ impl RenderedText {
                     (
                         range.clone(),
                         match highlight {
-                            Highlight::Link => HighlightStyle {
+                            Highlight::Code => HighlightStyle {
-                                color: Some(link_color),
+                                background_color: Some(code_background),
-                                underline: Some(UnderlineStyle::default()),
                                 ..Default::default()
                             },
-                            Highlight::Nostr => HighlightStyle {
+                            Highlight::InlineCode(link) => {
-                                color: Some(link_color),
+                                if *link {
+                                    HighlightStyle {
+                                        background_color: Some(code_background),
+                                        underline: Some(UnderlineStyle {
+                                            thickness: 1.0.into(),
+                                            ..Default::default()
+                                        }),
+                                        ..Default::default()
+                                    }
+                                } else {
+                                    HighlightStyle {
+                                        background_color: Some(code_background),
+                                        ..Default::default()
+                                    }
+                                }
+                            }
+                            Highlight::Mention => HighlightStyle {
+                                underline: Some(UnderlineStyle {
+                                    thickness: 1.0.into(),
+                                    ..Default::default()
+                                }),
                                 ..Default::default()
                             },
+                            Highlight::Highlight(highlight) => *highlight,
                         },
                     )
                 }),
@@ -87,22 +114,10 @@ impl RenderedText {
         )
         .on_click(self.link_ranges.clone(), {
             let link_urls = self.link_urls.clone();
-            move |ix, window, cx| {
+            move |ix, _, cx| {
-                let token = link_urls[ix].as_str();
+                let url = &link_urls[ix];
-
+                if url.starts_with("http") {
-                if let Some(clean_url) = token.strip_prefix("nostr:") {
+                    cx.open_url(url);
-                    if let Ok(public_key) = PublicKey::parse(clean_url) {
-                        window.dispatch_action(Box::new(OpenPublicKey(public_key)), cx);
-                    }
-                } else if is_url(token) {
-                    let url = if token.starts_with("http") {
-                        token.to_string()
-                    } else {
-                        format!("https://{token}")
-                    };
-                    cx.open_url(&url);
-                } else {
-                    log::warn!("Unrecognized token {token}")
                 }
             }
         })
@@ -110,214 +125,273 @@ impl RenderedText {
     }
 }
 
+#[allow(clippy::too_many_arguments)]
 fn render_plain_text_mut(
-    content: &str,
+    block: &str,
+    mut mentions: &[Mention],
     text: &mut String,
     highlights: &mut Vec<(Range<usize>, Highlight)>,
     link_ranges: &mut Vec<Range<usize>>,
     link_urls: &mut Vec<String>,
+    persons: &Entity<PersonRegistry>,
     cx: &App,
 ) {
-    // Copy the content directly
+    use pulldown_cmark::{Event, Options, Parser, Tag, TagEnd};
-    text.push_str(content);
 
-    // Collect all URLs
+    let mut bold_depth = 0;
-    let mut url_matches: Vec<(Range<usize>, String)> = Vec::new();
+    let mut italic_depth = 0;
+    let mut strikethrough_depth = 0;
+    let mut link_url = None;
+    let mut list_stack = Vec::new();
 
-    for link in URL_REGEX.find_iter(content) {
+    let mut options = Options::all();
-        let range = link.start()..link.end();
+    options.remove(pulldown_cmark::Options::ENABLE_DEFINITION_LIST);
-        let url = link.as_str().to_string();
 
-        url_matches.push((range, url));
+    for (event, source_range) in Parser::new_ext(block, options).into_offset_iter() {
+        let prev_len = text.len();
+
+        match event {
+            Event::Text(t) => {
+                // Process text with mention replacements
+                let t_str = t.as_ref();
+                let mut last_processed = 0;
+
+                while let Some(mention) = mentions.first() {
+                    if !source_range.contains_inclusive(&mention.range) {
+                        break;
                     }
 
-    // Collect all nostr entities with nostr: prefix
+                    // Calculate positions within the current text
-    let mut nostr_matches: Vec<(Range<usize>, String)> = Vec::new();
+                    let mention_start_in_text = mention.range.start - source_range.start;
+                    let mention_end_in_text = mention.range.end - source_range.start;
 
-    for nostr_match in NOSTR_URI_REGEX.find_iter(content) {
+                    // Add text before this mention
-        let range = nostr_match.start()..nostr_match.end();
+                    if mention_start_in_text > last_processed {
-        let nostr_uri = nostr_match.as_str().to_string();
+                        let before_mention = &t_str[last_processed..mention_start_in_text];
-
+                        process_text_segment(
-        // Check if this nostr URI overlaps with any already processed URL
+                            before_mention,
-        if !url_matches
+                            prev_len + last_processed,
-            .iter()
+                            bold_depth,
-            .any(|(url_range, _)| url_range.start < range.end && range.start < url_range.end)
+                            italic_depth,
-        {
+                            strikethrough_depth,
-            nostr_matches.push((range, nostr_uri));
+                            link_url.clone(),
-        }
-    }
-
-    // Combine all matches for processing from end to start
-    let mut all_matches = Vec::new();
-    all_matches.extend(url_matches);
-    all_matches.extend(nostr_matches);
-
-    // Sort by position (end to start) to avoid changing positions when replacing text
-    all_matches.sort_by(|(range_a, _), (range_b, _)| range_b.start.cmp(&range_a.start));
-
-    // Process all matches
-    for (range, entity) in all_matches {
-        // Handle URL token
-        if is_url(&entity) {
-            highlights.push((range.clone(), Highlight::Link));
-            link_ranges.push(range);
-            link_urls.push(entity);
-            continue;
-        };
-
-        if let Ok(nip21) = Nip21::parse(&entity) {
-            match nip21 {
-                Nip21::Pubkey(public_key) => {
-                    render_pubkey(
-                        public_key,
                             text,
-                        &range,
-                        highlights,
-                        link_ranges,
-                        link_urls,
-                        cx,
-                    );
-                }
-                Nip21::Profile(nip19_profile) => {
-                    render_pubkey(
-                        nip19_profile.public_key,
-                        text,
-                        &range,
-                        highlights,
-                        link_ranges,
-                        link_urls,
-                        cx,
-                    );
-                }
-                Nip21::EventId(event_id) => {
-                    render_bech32(
-                        event_id.to_bech32().unwrap(),
-                        text,
-                        &range,
                             highlights,
                             link_ranges,
                             link_urls,
                         );
                     }
-                Nip21::Event(nip19_event) => {
+
-                    render_bech32(
+                    // Process the mention replacement
-                        nip19_event.to_bech32().unwrap(),
+                    let profile = persons.read(cx).get(&mention.public_key, cx);
-                        text,
+                    let replacement_text = format!("@{}", profile.name());
-                        &range,
+
-                        highlights,
+                    let replacement_start = text.len();
-                        link_ranges,
+                    text.push_str(&replacement_text);
-                        link_urls,
+                    let replacement_end = text.len();
-                    );
+
+                    highlights.push((replacement_start..replacement_end, Highlight::Mention));
+
+                    last_processed = mention_end_in_text;
+                    mentions = &mentions[1..];
                 }
-                Nip21::Coordinate(nip19_coordinate) => {
+
-                    render_bech32(
+                // Add any remaining text after the last mention
-                        nip19_coordinate.to_bech32().unwrap(),
+                if last_processed < t_str.len() {
+                    let remaining_text = &t_str[last_processed..];
+                    process_text_segment(
+                        remaining_text,
+                        prev_len + last_processed,
+                        bold_depth,
+                        italic_depth,
+                        strikethrough_depth,
+                        link_url.clone(),
                         text,
-                        &range,
                         highlights,
                         link_ranges,
                         link_urls,
                     );
                 }
             }
+            Event::Code(t) => {
+                text.push_str(t.as_ref());
+                let is_link = link_url.is_some();
+
+                if let Some(link_url) = link_url.clone() {
+                    link_ranges.push(prev_len..text.len());
+                    link_urls.push(link_url);
                 }
+
+                highlights.push((prev_len..text.len(), Highlight::InlineCode(is_link)))
             }
-}
+            Event::Start(tag) => match tag {
-
+                Tag::Paragraph => new_paragraph(text, &mut list_stack),
-/// Check if a string is a URL
+                Tag::Heading { .. } => {
-fn is_url(s: &str) -> bool {
+                    new_paragraph(text, &mut list_stack);
-    URL_REGEX.is_match(s)
+                    bold_depth += 1;
-}
+                }
-
+                Tag::CodeBlock(_kind) => {
-/// Format a bech32 entity with ellipsis and last 4 characters
+                    new_paragraph(text, &mut list_stack);
-fn format_shortened_entity(entity: &str) -> String {
+                }
-    let prefix_end = entity.find('1').unwrap_or(0);
+                Tag::Emphasis => italic_depth += 1,
-
+                Tag::Strong => bold_depth += 1,
-    if prefix_end > 0 && entity.len() > prefix_end + 5 {
+                Tag::Strikethrough => strikethrough_depth += 1,
-        let prefix = &entity[0..=prefix_end]; // Include the '1'
+                Tag::Link { dest_url, .. } => link_url = Some(dest_url.to_string()),
-        let suffix = &entity[entity.len() - 4..]; // Last 4 chars
+                Tag::List(number) => {
-
+                    list_stack.push((number, false));
-        format!("{prefix}...{suffix}")
+                }
+                Tag::Item => {
+                    let len = list_stack.len();
+                    if let Some((list_number, has_content)) = list_stack.last_mut() {
+                        *has_content = false;
+                        if !text.is_empty() && !text.ends_with('\n') {
+                            text.push('\n');
+                        }
+                        for _ in 0..len - 1 {
+                            text.push_str("  ");
+                        }
+                        if let Some(number) = list_number {
+                            text.push_str(&format!("{}. ", number));
+                            *number += 1;
+                            *has_content = false;
                         } else {
-        entity.to_string()
+                            text.push_str("- ");
+                        }
+                    }
+                }
+                _ => {}
+            },
+            Event::End(tag) => match tag {
+                TagEnd::Heading(_) => bold_depth -= 1,
+                TagEnd::Emphasis => italic_depth -= 1,
+                TagEnd::Strong => bold_depth -= 1,
+                TagEnd::Strikethrough => strikethrough_depth -= 1,
+                TagEnd::Link => link_url = None,
+                TagEnd::List(_) => drop(list_stack.pop()),
+                _ => {}
+            },
+            Event::HardBreak => text.push('\n'),
+            Event::SoftBreak => text.push('\n'),
+            _ => {}
+        }
     }
 }
 
-fn render_pubkey(
+#[allow(clippy::too_many_arguments)]
-    public_key: PublicKey,
+fn process_text_segment(
+    segment: &str,
+    segment_start: usize,
+    bold_depth: i32,
+    italic_depth: i32,
+    strikethrough_depth: i32,
+    link_url: Option<String>,
     text: &mut String,
-    range: &Range<usize>,
-    highlights: &mut Vec<(Range<usize>, Highlight)>,
-    link_ranges: &mut Vec<Range<usize>>,
-    link_urls: &mut Vec<String>,
-    cx: &App,
-) {
-    let persons = PersonRegistry::global(cx);
-    let profile = persons.read(cx).get(&public_key, cx);
-    let display_name = format!("@{}", profile.name());
-
-    text.replace_range(range.clone(), &display_name);
-
-    let new_length = display_name.len();
-    let length_diff = new_length as isize - (range.end - range.start) as isize;
-    let new_range = range.start..(range.start + new_length);
-
-    highlights.push((new_range.clone(), Highlight::Nostr));
-    link_ranges.push(new_range);
-    link_urls.push(format!("nostr:{}", profile.public_key().to_hex()));
-
-    if length_diff != 0 {
-        adjust_ranges(highlights, link_ranges, range.end, length_diff);
-    }
-}
-
-fn render_bech32(
-    bech32: String,
-    text: &mut String,
-    range: &Range<usize>,
     highlights: &mut Vec<(Range<usize>, Highlight)>,
     link_ranges: &mut Vec<Range<usize>>,
     link_urls: &mut Vec<String>,
 ) {
-    let njump_url = format!("https://njump.me/{bech32}");
+    // Build the style for this segment
-    let shortened_entity = format_shortened_entity(&bech32);
+    let mut style = HighlightStyle::default();
-    let display_text = format!("https://njump.me/{shortened_entity}");
+    if bold_depth > 0 {
+        style.font_weight = Some(FontWeight::BOLD);
+    }
+    if italic_depth > 0 {
+        style.font_style = Some(FontStyle::Italic);
+    }
+    if strikethrough_depth > 0 {
+        style.strikethrough = Some(StrikethroughStyle {
+            thickness: 1.0.into(),
+            ..Default::default()
+        });
+    }
 
-    text.replace_range(range.clone(), &display_text);
+    // Add the text
+    text.push_str(segment);
+    let text_end = text.len();
 
-    let new_length = display_text.len();
+    if let Some(link_url) = link_url {
-    let length_diff = new_length as isize - (range.end - range.start) as isize;
+        // Handle as a markdown link
-    let new_range = range.start..(range.start + new_length);
+        link_ranges.push(segment_start..text_end);
+        link_urls.push(link_url);
+        style.underline = Some(UnderlineStyle {
+            thickness: 1.0.into(),
+            ..Default::default()
+        });
 
-    highlights.push((new_range.clone(), Highlight::Link));
+        // Add highlight for the entire linked segment
-    link_ranges.push(new_range);
+        if style != HighlightStyle::default() {
-    link_urls.push(njump_url);
+            highlights.push((segment_start..text_end, Highlight::Highlight(style)));
+        }
+    } else {
+        // Handle link detection within the segment
+        let mut finder = linkify::LinkFinder::new();
+        finder.kinds(&[linkify::LinkKind::Url]);
+        let mut last_link_pos = 0;
 
-    if length_diff != 0 {
+        for link in finder.links(segment) {
-        adjust_ranges(highlights, link_ranges, range.end, length_diff);
+            let start = link.start();
+            let end = link.end();
+
+            // Add non-link text before this link
+            if start > last_link_pos {
+                let non_link_start = segment_start + last_link_pos;
+                let non_link_end = segment_start + start;
+
+                if style != HighlightStyle::default() {
+                    highlights.push((non_link_start..non_link_end, Highlight::Highlight(style)));
+                }
+            }
+
+            // Add the link
+            let range = (segment_start + start)..(segment_start + end);
+            link_ranges.push(range.clone());
+            link_urls.push(link.as_str().to_string());
+
+            // Apply link styling (underline + existing style)
+            let mut link_style = style;
+            link_style.underline = Some(UnderlineStyle {
+                thickness: 1.0.into(),
+                ..Default::default()
+            });
+
+            highlights.push((range, Highlight::Highlight(link_style)));
+
+            last_link_pos = end;
+        }
+
+        // Add any remaining text after the last link
+        if last_link_pos < segment.len() {
+            let remaining_start = segment_start + last_link_pos;
+            let remaining_end = segment_start + segment.len();
+
+            if style != HighlightStyle::default() {
+                highlights.push((remaining_start..remaining_end, Highlight::Highlight(style)));
+            }
+        }
     }
 }
 
-// Helper function to adjust ranges when text length changes
+fn new_paragraph(text: &mut String, list_stack: &mut [(Option<u64>, bool)]) {
-fn adjust_ranges(
+    let mut is_subsequent_paragraph_of_list = false;
-    highlights: &mut [(Range<usize>, Highlight)],
+    if let Some((_, has_content)) = list_stack.last_mut() {
-    link_ranges: &mut [Range<usize>],
+        if *has_content {
-    position: usize,
+            is_subsequent_paragraph_of_list = true;
-    length_diff: isize,
+        } else {
-) {
+            *has_content = true;
-    // Adjust highlight ranges
+            return;
-    for (range, _) in highlights.iter_mut() {
-        if range.start > position {
-            range.start = (range.start as isize + length_diff) as usize;
-            range.end = (range.end as isize + length_diff) as usize;
         }
     }
 
-    // Adjust link ranges
+    if !text.is_empty() {
-    for range in link_ranges.iter_mut() {
+        if !text.ends_with('\n') {
-        if range.start > position {
+            text.push('\n');
-            range.start = (range.start as isize + length_diff) as usize;
-            range.end = (range.end as isize + length_diff) as usize;
         }
+        text.push('\n');
+    }
+    for _ in 0..list_stack.len().saturating_sub(1) {
+        text.push_str("  ");
+    }
+    if is_subsequent_paragraph_of_list {
+        text.push_str("  ");
     }
 }

crates/common/Cargo.toml

@@ -19,3 +19,4 @@ log.workspace = true
 
 dirs = "5.0"
 qrcode = "0.14.1"
+bech32 = "0.11.1"

crates/common/src/display.rs

@@ -1,6 +1,6 @@
 use std::sync::Arc;
 
-use anyhow::{anyhow, Error};
+use anyhow::{Error, anyhow};
 use chrono::{Local, TimeZone};
 use gpui::{Image, ImageFormat, SharedString};
 use nostr_sdk::prelude::*;

crates/common/src/lib.rs

@@ -1,9 +1,13 @@
 pub use debounced_delay::*;
 pub use display::*;
 pub use event::*;
+pub use parser::*;
 pub use paths::*;
+pub use range::*;
 
 mod debounced_delay;
 mod display;
 mod event;
+mod parser;
 mod paths;
+mod range;

crates/common/src/parser.rs

@@ -0,0 +1,210 @@
+use std::ops::Range;
+
+use nostr::prelude::*;
+
+const BECH32_SEPARATOR: u8 = b'1';
+const SCHEME_WITH_COLON: &str = "nostr:";
+
+/// Nostr parsed token with its range in the original text
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct Token {
+    /// The parsed NIP-21 URI
+    ///
+    /// <https://github.com/nostr-protocol/nips/blob/master/21.md>
+    pub value: Nip21,
+    /// The range of this token in the original text
+    pub range: Range<usize>,
+}
+
+#[derive(Debug, Clone, Copy)]
+struct Match {
+    start: usize,
+    end: usize,
+}
+
+/// Nostr parser
+#[derive(Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord, Hash)]
+pub struct NostrParser;
+
+impl Default for NostrParser {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl NostrParser {
+    /// Create new parser
+    pub const fn new() -> Self {
+        Self
+    }
+
+    /// Parse text
+    pub fn parse<'a>(&self, text: &'a str) -> NostrParserIter<'a> {
+        NostrParserIter::new(text)
+    }
+}
+
+struct FindMatches<'a> {
+    bytes: &'a [u8],
+    pos: usize,
+}
+
+impl<'a> FindMatches<'a> {
+    fn new(text: &'a str) -> Self {
+        Self {
+            bytes: text.as_bytes(),
+            pos: 0,
+        }
+    }
+
+    fn try_parse_nostr_uri(&mut self) -> Option<Match> {
+        let start = self.pos;
+        let bytes = self.bytes;
+        let len = bytes.len();
+
+        // Check if we have "nostr:" prefix
+        if len - start < SCHEME_WITH_COLON.len() {
+            return None;
+        }
+
+        // Check for "nostr:" prefix (case-insensitive)
+        let scheme_prefix = &bytes[start..start + SCHEME_WITH_COLON.len()];
+        if !scheme_prefix.eq_ignore_ascii_case(SCHEME_WITH_COLON.as_bytes()) {
+            return None;
+        }
+
+        // Skip the scheme
+        let pos = start + SCHEME_WITH_COLON.len();
+
+        // Parse bech32 entity
+        let mut has_separator = false;
+        let mut end = pos;
+
+        while end < len {
+            let byte = bytes[end];
+
+            // Check for bech32 separator
+            if byte == BECH32_SEPARATOR && !has_separator {
+                has_separator = true;
+                end += 1;
+                continue;
+            }
+
+            // Check if character is valid for bech32
+            if !byte.is_ascii_alphanumeric() {
+                break;
+            }
+
+            end += 1;
+        }
+
+        // Must have at least one character after separator
+        if !has_separator || end <= pos + 1 {
+            return None;
+        }
+
+        // Update position
+        self.pos = end;
+
+        Some(Match { start, end })
+    }
+}
+
+impl Iterator for FindMatches<'_> {
+    type Item = Match;
+
+    fn next(&mut self) -> Option<Self::Item> {
+        while self.pos < self.bytes.len() {
+            // Try to parse nostr URI
+            if let Some(mat) = self.try_parse_nostr_uri() {
+                return Some(mat);
+            }
+
+            // Skip one character if no match found
+            self.pos += 1;
+        }
+
+        None
+    }
+}
+
+enum HandleMatch {
+    Token(Token),
+    Recursion,
+}
+
+pub struct NostrParserIter<'a> {
+    /// The original text
+    text: &'a str,
+    /// Matches found
+    matches: FindMatches<'a>,
+    /// A pending match
+    pending_match: Option<Match>,
+    /// Last match end index
+    last_match_end: usize,
+}
+
+impl<'a> NostrParserIter<'a> {
+    fn new(text: &'a str) -> Self {
+        Self {
+            text,
+            matches: FindMatches::new(text),
+            pending_match: None,
+            last_match_end: 0,
+        }
+    }
+
+    fn handle_match(&mut self, mat: Match) -> HandleMatch {
+        // Update last match end
+        self.last_match_end = mat.end;
+
+        // Extract the matched string
+        let data: &str = &self.text[mat.start..mat.end];
+
+        // Parse NIP-21 URI
+        match Nip21::parse(data) {
+            Ok(uri) => HandleMatch::Token(Token {
+                value: uri,
+                range: mat.start..mat.end,
+            }),
+            // If the nostr URI parsing is invalid, skip it
+            Err(_) => HandleMatch::Recursion,
+        }
+    }
+}
+
+impl<'a> Iterator for NostrParserIter<'a> {
+    type Item = Token;
+
+    fn next(&mut self) -> Option<Self::Item> {
+        // Handle a pending match
+        if let Some(pending_match) = self.pending_match.take() {
+            return match self.handle_match(pending_match) {
+                HandleMatch::Token(token) => Some(token),
+                HandleMatch::Recursion => self.next(),
+            };
+        }
+
+        match self.matches.next() {
+            Some(mat) => {
+                // Skip any text before this match
+                if mat.start > self.last_match_end {
+                    // Update pending match
+                    // This will be handled at next iteration, in `handle_match` method.
+                    self.pending_match = Some(mat);
+
+                    // Skip the text before the match
+                    self.last_match_end = mat.start;
+                    return self.next();
+                }
+
+                // Handle match
+                match self.handle_match(mat) {
+                    HandleMatch::Token(token) => Some(token),
+                    HandleMatch::Recursion => self.next(),
+                }
+            }
+            None => None,
+        }
+    }
+}

crates/common/src/range.rs

@@ -0,0 +1,45 @@
+use std::cmp::{self};
+use std::ops::{Range, RangeInclusive};
+
+pub trait RangeExt<T> {
+    fn sorted(&self) -> Self;
+    fn to_inclusive(&self) -> RangeInclusive<T>;
+    fn overlaps(&self, other: &Range<T>) -> bool;
+    fn contains_inclusive(&self, other: &Range<T>) -> bool;
+}
+
+impl<T: Ord + Clone> RangeExt<T> for Range<T> {
+    fn sorted(&self) -> Self {
+        cmp::min(&self.start, &self.end).clone()..cmp::max(&self.start, &self.end).clone()
+    }
+
+    fn to_inclusive(&self) -> RangeInclusive<T> {
+        self.start.clone()..=self.end.clone()
+    }
+
+    fn overlaps(&self, other: &Range<T>) -> bool {
+        self.start < other.end && other.start < self.end
+    }
+
+    fn contains_inclusive(&self, other: &Range<T>) -> bool {
+        self.start <= other.start && other.end <= self.end
+    }
+}
+
+impl<T: Ord + Clone> RangeExt<T> for RangeInclusive<T> {
+    fn sorted(&self) -> Self {
+        cmp::min(self.start(), self.end()).clone()..=cmp::max(self.start(), self.end()).clone()
+    }
+
+    fn to_inclusive(&self) -> RangeInclusive<T> {
+        self.clone()
+    }
+
+    fn overlaps(&self, other: &Range<T>) -> bool {
+        self.start() < &other.end && &other.start <= self.end()
+    }
+
+    fn contains_inclusive(&self, other: &Range<T>) -> bool {
+        self.start() <= &other.start && &other.end <= self.end()
+    }
+}

crates/coop/Cargo.toml

@@ -64,4 +64,8 @@ oneshot.workspace = true
 webbrowser.workspace = true
 
 indexset = "0.12.3"
-tracing-subscriber = { version = "0.3.18", features = ["fmt"] }
+tracing-subscriber = { version = "0.3.18", features = ["fmt", "env-filter"] }
+
+[target.'cfg(target_os = "macos")'.dependencies]
+# Temporary workaround https://github.com/zed-industries/zed/issues/47168
+core-text = "=21.0.0"

crates/coop/src/dialogs/accounts.rs

@@ -0,0 +1,257 @@
+use anyhow::Error;
+use gpui::prelude::FluentBuilder;
+use gpui::{
+    App, AppContext, Context, Entity, InteractiveElement, IntoElement, ParentElement, Render,
+    SharedString, StatefulInteractiveElement, Styled, Subscription, Task, Window, div, px,
+};
+use nostr_sdk::prelude::*;
+use person::PersonRegistry;
+use state::{NostrRegistry, StateEvent};
+use theme::ActiveTheme;
+use ui::avatar::Avatar;
+use ui::button::{Button, ButtonVariants};
+use ui::indicator::Indicator;
+use ui::{Disableable, Icon, IconName, Sizable, WindowExtension, h_flex, v_flex};
+
+use crate::dialogs::connect::ConnectSigner;
+use crate::dialogs::import::ImportKey;
+
+pub fn init(window: &mut Window, cx: &mut App) -> Entity<AccountSelector> {
+    cx.new(|cx| AccountSelector::new(window, cx))
+}
+
+/// Account selector
+pub struct AccountSelector {
+    /// Public key currently being chosen for login
+    logging_in: Entity<Option<PublicKey>>,
+
+    /// The error message displayed when an error occurs.
+    error: Entity<Option<SharedString>>,
+
+    /// Async tasks
+    tasks: Vec<Task<Result<(), Error>>>,
+
+    /// Subscription to the signer events
+    _subscription: Option<Subscription>,
+}
+
+impl AccountSelector {
+    pub fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
+        let logging_in = cx.new(|_| None);
+        let error = cx.new(|_| None);
+
+        // Subscribe to the signer events
+        let nostr = NostrRegistry::global(cx);
+        let subscription = cx.subscribe_in(&nostr, window, |this, _state, event, window, cx| {
+            match event {
+                StateEvent::SignerSet => {
+                    window.close_all_modals(cx);
+                    window.refresh();
+                }
+                StateEvent::Error(e) => {
+                    this.set_error(e.to_string(), cx);
+                }
+                _ => {}
+            };
+        });
+
+        Self {
+            logging_in,
+            error,
+            tasks: vec![],
+            _subscription: Some(subscription),
+        }
+    }
+
+    fn logging_in(&self, public_key: &PublicKey, cx: &App) -> bool {
+        self.logging_in.read(cx) == &Some(*public_key)
+    }
+
+    fn set_logging_in(&mut self, public_key: PublicKey, cx: &mut Context<Self>) {
+        self.logging_in.update(cx, |this, cx| {
+            *this = Some(public_key);
+            cx.notify();
+        });
+    }
+
+    fn set_error<T>(&mut self, error: T, cx: &mut Context<Self>)
+    where
+        T: Into<SharedString>,
+    {
+        self.error.update(cx, |this, cx| {
+            *this = Some(error.into());
+            cx.notify();
+        });
+
+        self.logging_in.update(cx, |this, cx| {
+            *this = None;
+            cx.notify();
+        })
+    }
+
+    fn login(&mut self, public_key: PublicKey, window: &mut Window, cx: &mut Context<Self>) {
+        let nostr = NostrRegistry::global(cx);
+        let task = nostr.read(cx).get_signer(&public_key, cx);
+
+        // Mark the public key as being logged in
+        self.set_logging_in(public_key, cx);
+
+        self.tasks.push(cx.spawn_in(window, async move |this, cx| {
+            match task.await {
+                Ok(signer) => {
+                    nostr.update(cx, |this, cx| {
+                        this.set_signer(signer, cx);
+                    });
+                }
+                Err(e) => {
+                    this.update(cx, |this, cx| {
+                        this.set_error(e.to_string(), cx);
+                    })?;
+                }
+            };
+            Ok(())
+        }));
+    }
+
+    fn remove(&mut self, public_key: PublicKey, cx: &mut Context<Self>) {
+        let nostr = NostrRegistry::global(cx);
+
+        nostr.update(cx, |this, cx| {
+            this.remove_signer(&public_key, cx);
+        });
+    }
+
+    fn open_import(&mut self, window: &mut Window, cx: &mut Context<Self>) {
+        let import = cx.new(|cx| ImportKey::new(window, cx));
+
+        window.open_modal(cx, move |this, _window, _cx| {
+            this.width(px(460.))
+                .title("Import a Secret Key or Bunker Connection")
+                .show_close(true)
+                .pb_2()
+                .child(import.clone())
+        });
+    }
+
+    fn open_connect(&mut self, window: &mut Window, cx: &mut Context<Self>) {
+        let connect = cx.new(|cx| ConnectSigner::new(window, cx));
+
+        window.open_modal(cx, move |this, _window, _cx| {
+            this.width(px(460.))
+                .title("Scan QR Code to Connect")
+                .show_close(true)
+                .pb_2()
+                .child(connect.clone())
+        });
+    }
+}
+
+impl Render for AccountSelector {
+    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let persons = PersonRegistry::global(cx);
+        let nostr = NostrRegistry::global(cx);
+        let npubs = nostr.read(cx).npubs();
+        let loading = self.logging_in.read(cx).is_some();
+
+        v_flex()
+            .size_full()
+            .gap_2()
+            .when_some(self.error.read(cx).as_ref(), |this, error| {
+                this.child(
+                    div()
+                        .italic()
+                        .text_xs()
+                        .text_center()
+                        .text_color(cx.theme().text_danger)
+                        .child(error.clone()),
+                )
+            })
+            .children({
+                let mut items = vec![];
+
+                for (ix, public_key) in npubs.read(cx).iter().enumerate() {
+                    let profile = persons.read(cx).get(public_key, cx);
+                    let logging_in = self.logging_in(public_key, cx);
+
+                    items.push(
+                        h_flex()
+                            .id(ix)
+                            .group("")
+                            .px_2()
+                            .h_10()
+                            .justify_between()
+                            .w_full()
+                            .rounded(cx.theme().radius)
+                            .bg(cx.theme().ghost_element_background)
+                            .hover(|this| this.bg(cx.theme().ghost_element_hover))
+                            .child(
+                                h_flex()
+                                    .gap_2()
+                                    .child(Avatar::new(profile.avatar()).small())
+                                    .child(div().text_sm().child(profile.name())),
+                            )
+                            .when(logging_in, |this| this.child(Indicator::new().small()))
+                            .when(!logging_in, |this| {
+                                this.child(
+                                    h_flex()
+                                        .gap_1()
+                                        .invisible()
+                                        .group_hover("", |this| this.visible())
+                                        .child(
+                                            Button::new(format!("del-{ix}"))
+                                                .icon(IconName::Close)
+                                                .ghost()
+                                                .small()
+                                                .disabled(logging_in)
+                                                .on_click(cx.listener({
+                                                    let public_key = *public_key;
+                                                    move |this, _ev, _window, cx| {
+                                                        cx.stop_propagation();
+                                                        this.remove(public_key, cx);
+                                                    }
+                                                })),
+                                        ),
+                                )
+                            })
+                            .when(!logging_in, |this| {
+                                let public_key = *public_key;
+                                this.on_click(cx.listener(move |this, _ev, window, cx| {
+                                    this.login(public_key, window, cx);
+                                }))
+                            }),
+                    );
+                }
+
+                items
+            })
+            .child(div().w_full().h_px().bg(cx.theme().border_variant))
+            .child(
+                h_flex()
+                    .gap_1()
+                    .justify_end()
+                    .w_full()
+                    .child(
+                        Button::new("input")
+                            .icon(Icon::new(IconName::Usb))
+                            .label("Import")
+                            .ghost()
+                            .small()
+                            .disabled(loading)
+                            .on_click(cx.listener(move |this, _ev, window, cx| {
+                                this.open_import(window, cx);
+                            })),
+                    )
+                    .child(
+                        Button::new("qr")
+                            .icon(Icon::new(IconName::Scan))
+                            .label("Scan QR to connect")
+                            .ghost()
+                            .small()
+                            .disabled(loading)
+                            .on_click(cx.listener(move |this, _ev, window, cx| {
+                                this.open_connect(window, cx);
+                            })),
+                    ),
+            )
+    }
+}

crates/coop/src/dialogs/connect.rs

@@ -0,0 +1,115 @@
+use std::sync::Arc;
+use std::time::Duration;
+
+use common::TextUtils;
+use gpui::prelude::FluentBuilder;
+use gpui::{
+    AppContext, Context, Entity, Image, IntoElement, ParentElement, Render, SharedString, Styled,
+    Subscription, Window, div, img, px,
+};
+use nostr_connect::prelude::*;
+use state::{
+    CLIENT_NAME, CoopAuthUrlHandler, NOSTR_CONNECT_RELAY, NOSTR_CONNECT_TIMEOUT, NostrRegistry,
+    StateEvent,
+};
+use theme::ActiveTheme;
+use ui::v_flex;
+
+pub struct ConnectSigner {
+    /// QR Code
+    qr_code: Option<Arc<Image>>,
+
+    /// Error message
+    error: Entity<Option<SharedString>>,
+
+    /// Subscription to the signer event
+    _subscription: Option<Subscription>,
+}
+
+impl ConnectSigner {
+    pub fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
+        let error = cx.new(|_| None);
+
+        let nostr = NostrRegistry::global(cx);
+        let app_keys = nostr.read(cx).keys();
+
+        let timeout = Duration::from_secs(NOSTR_CONNECT_TIMEOUT);
+        let relay = RelayUrl::parse(NOSTR_CONNECT_RELAY).unwrap();
+
+        // Generate the nostr connect uri
+        let uri = NostrConnectUri::client(app_keys.public_key(), vec![relay], CLIENT_NAME);
+
+        // Generate the nostr connect
+        let mut signer = NostrConnect::new(uri.clone(), app_keys.clone(), timeout, None).unwrap();
+
+        // Handle the auth request
+        signer.auth_url_handler(CoopAuthUrlHandler);
+
+        // Generate a QR code for quick connection
+        let qr_code = uri.to_string().to_qr();
+
+        // Set signer in the background
+        nostr.update(cx, |this, cx| {
+            this.add_nip46_signer(&signer, cx);
+        });
+
+        // Subscribe to the signer event
+        let subscription = cx.subscribe_in(&nostr, window, |this, _state, event, _window, cx| {
+            if let StateEvent::Error(e) = event {
+                this.set_error(e, cx);
+            }
+        });
+
+        Self {
+            qr_code,
+            error,
+            _subscription: Some(subscription),
+        }
+    }
+
+    fn set_error<S>(&mut self, message: S, cx: &mut Context<Self>)
+    where
+        S: Into<SharedString>,
+    {
+        self.error.update(cx, |this, cx| {
+            *this = Some(message.into());
+            cx.notify();
+        });
+    }
+}
+
+impl Render for ConnectSigner {
+    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        const MSG: &str = "Scan with any Nostr Connect-compatible app to connect";
+
+        v_flex()
+            .size_full()
+            .items_center()
+            .justify_center()
+            .p_4()
+            .when_some(self.qr_code.as_ref(), |this, qr| {
+                this.child(
+                    img(qr.clone())
+                        .size(px(256.))
+                        .rounded(cx.theme().radius_lg)
+                        .border_1()
+                        .border_color(cx.theme().border),
+                )
+            })
+            .when_some(self.error.read(cx).as_ref(), |this, error| {
+                this.child(
+                    div()
+                        .text_xs()
+                        .text_center()
+                        .text_color(cx.theme().text_danger)
+                        .child(error.clone()),
+                )
+            })
+            .child(
+                div()
+                    .text_xs()
+                    .text_color(cx.theme().text_muted)
+                    .child(SharedString::from(MSG)),
+            )
+    }
+}

crates/coop/src/dialogs/import.rs

@@ -0,0 +1,301 @@
+use std::time::Duration;
+
+use anyhow::{Error, anyhow};
+use gpui::prelude::FluentBuilder;
+use gpui::{
+    AppContext, Context, Entity, IntoElement, ParentElement, Render, SharedString, Styled,
+    Subscription, Task, Window, div,
+};
+use nostr_connect::prelude::*;
+use smallvec::{SmallVec, smallvec};
+use state::{CoopAuthUrlHandler, NostrRegistry, StateEvent};
+use theme::ActiveTheme;
+use ui::button::{Button, ButtonVariants};
+use ui::input::{InputEvent, InputState, TextInput};
+use ui::{Disableable, v_flex};
+
+#[derive(Debug)]
+pub struct ImportKey {
+    /// Secret key input
+    key_input: Entity<InputState>,
+
+    /// Password input (if required)
+    pass_input: Entity<InputState>,
+
+    /// Error message
+    error: Entity<Option<SharedString>>,
+
+    /// Countdown timer for nostr connect
+    countdown: Entity<Option<u64>>,
+
+    /// Whether the user is currently loading
+    loading: bool,
+
+    /// Async tasks
+    tasks: Vec<Task<Result<(), Error>>>,
+
+    /// Event subscriptions
+    _subscriptions: SmallVec<[Subscription; 2]>,
+}
+
+impl ImportKey {
+    pub fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
+        let nostr = NostrRegistry::global(cx);
+        let key_input = cx.new(|cx| InputState::new(window, cx).masked(true));
+        let pass_input = cx.new(|cx| InputState::new(window, cx).masked(true));
+        let error = cx.new(|_| None);
+        let countdown = cx.new(|_| None);
+
+        let mut subscriptions = smallvec![];
+
+        subscriptions.push(
+            // Subscribe to key input events and process login when the user presses enter
+            cx.subscribe_in(&key_input, window, |this, _input, event, window, cx| {
+                if let InputEvent::PressEnter { .. } = event {
+                    this.login(window, cx);
+                };
+            }),
+        );
+
+        subscriptions.push(
+            // Subscribe to the nostr signer event
+            cx.subscribe_in(&nostr, window, |this, _state, event, _window, cx| {
+                if let StateEvent::Error(e) = event {
+                    this.set_error(e, cx);
+                }
+            }),
+        );
+
+        Self {
+            key_input,
+            pass_input,
+            error,
+            countdown,
+            loading: false,
+            tasks: vec![],
+            _subscriptions: subscriptions,
+        }
+    }
+
+    fn login(&mut self, window: &mut Window, cx: &mut Context<Self>) {
+        if self.loading {
+            return;
+        };
+        // Prevent duplicate login requests
+        self.set_loading(true, cx);
+
+        let value = self.key_input.read(cx).value();
+        let password = self.pass_input.read(cx).value();
+
+        if value.starts_with("bunker://") {
+            self.bunker(&value, window, cx);
+            return;
+        }
+
+        if value.starts_with("ncryptsec1") {
+            self.ncryptsec(value, password, window, cx);
+            return;
+        }
+
+        if let Ok(secret) = SecretKey::parse(&value) {
+            let keys = Keys::new(secret);
+            let nostr = NostrRegistry::global(cx);
+
+            // Update the signer
+            nostr.update(cx, |this, cx| {
+                this.add_key_signer(&keys, cx);
+            });
+        } else {
+            self.set_error("Invalid key", cx);
+        }
+    }
+
+    fn bunker(&mut self, content: &str, window: &mut Window, cx: &mut Context<Self>) {
+        let Ok(uri) = NostrConnectUri::parse(content) else {
+            self.set_error("Bunker is not valid", cx);
+            return;
+        };
+
+        let nostr = NostrRegistry::global(cx);
+        let app_keys = nostr.read(cx).keys();
+        let timeout = Duration::from_secs(30);
+
+        // Construct the nostr connect signer
+        let mut signer = NostrConnect::new(uri, app_keys.clone(), timeout, None).unwrap();
+
+        // Handle auth url with the default browser
+        signer.auth_url_handler(CoopAuthUrlHandler);
+
+        // Set signer in the background
+        nostr.update(cx, |this, cx| {
+            this.add_nip46_signer(&signer, cx);
+        });
+
+        // Start countdown
+        self.tasks.push(cx.spawn_in(window, async move |this, cx| {
+            for i in (0..=30).rev() {
+                if i == 0 {
+                    this.update(cx, |this, cx| {
+                        this.set_countdown(None, cx);
+                    })?;
+                } else {
+                    this.update(cx, |this, cx| {
+                        this.set_countdown(Some(i), cx);
+                    })?;
+                }
+                cx.background_executor().timer(Duration::from_secs(1)).await;
+            }
+            Ok(())
+        }));
+    }
+
+    fn ncryptsec<S>(&mut self, content: S, pwd: S, window: &mut Window, cx: &mut Context<Self>)
+    where
+        S: Into<String>,
+    {
+        let nostr = NostrRegistry::global(cx);
+        let content: String = content.into();
+        let password: String = pwd.into();
+
+        if password.is_empty() {
+            self.set_error("Password is required", cx);
+            return;
+        }
+
+        let Ok(enc) = EncryptedSecretKey::from_bech32(&content) else {
+            self.set_error("Secret Key is invalid", cx);
+            return;
+        };
+
+        // Decrypt in the background to ensure it doesn't block the UI
+        let task = cx.background_spawn(async move {
+            if let Ok(content) = enc.decrypt(&password) {
+                Ok(Keys::new(content))
+            } else {
+                Err(anyhow!("Invalid password"))
+            }
+        });
+
+        self.tasks.push(cx.spawn_in(window, async move |this, cx| {
+            match task.await {
+                Ok(keys) => {
+                    nostr.update(cx, |this, cx| {
+                        this.add_key_signer(&keys, cx);
+                    });
+                }
+                Err(e) => {
+                    this.update(cx, |this, cx| {
+                        this.set_error(e.to_string(), cx);
+                    })?;
+                }
+            }
+
+            Ok(())
+        }));
+    }
+
+    fn set_error<S>(&mut self, message: S, cx: &mut Context<Self>)
+    where
+        S: Into<SharedString>,
+    {
+        // Reset the log in state
+        self.set_loading(false, cx);
+
+        // Reset the countdown
+        self.set_countdown(None, cx);
+
+        // Update error message
+        self.error.update(cx, |this, cx| {
+            *this = Some(message.into());
+            cx.notify();
+        });
+
+        // Clear the error message after 3 secs
+        self.tasks.push(cx.spawn(async move |this, cx| {
+            cx.background_executor().timer(Duration::from_secs(3)).await;
+
+            this.update(cx, |this, cx| {
+                this.error.update(cx, |this, cx| {
+                    *this = None;
+                    cx.notify();
+                });
+            })?;
+
+            Ok(())
+        }));
+    }
+
+    fn set_loading(&mut self, status: bool, cx: &mut Context<Self>) {
+        self.loading = status;
+        cx.notify();
+    }
+
+    fn set_countdown(&mut self, i: Option<u64>, cx: &mut Context<Self>) {
+        self.countdown.update(cx, |this, cx| {
+            *this = i;
+            cx.notify();
+        });
+    }
+}
+
+impl Render for ImportKey {
+    fn render(&mut self, _window: &mut gpui::Window, cx: &mut Context<Self>) -> impl IntoElement {
+        v_flex()
+            .size_full()
+            .p_4()
+            .gap_2()
+            .text_sm()
+            .child(
+                v_flex()
+                    .gap_1()
+                    .text_sm()
+                    .text_color(cx.theme().text_muted)
+                    .child("nsec or bunker://")
+                    .child(TextInput::new(&self.key_input)),
+            )
+            .when(
+                self.key_input.read(cx).value().starts_with("ncryptsec1"),
+                |this| {
+                    this.child(
+                        v_flex()
+                            .gap_1()
+                            .text_sm()
+                            .text_color(cx.theme().text_muted)
+                            .child("Password:")
+                            .child(TextInput::new(&self.pass_input)),
+                    )
+                },
+            )
+            .child(
+                Button::new("login")
+                    .label("Continue")
+                    .primary()
+                    .loading(self.loading)
+                    .disabled(self.loading)
+                    .on_click(cx.listener(move |this, _, window, cx| {
+                        this.login(window, cx);
+                    })),
+            )
+            .when_some(self.countdown.read(cx).as_ref(), |this, i| {
+                this.child(
+                    div()
+                        .text_xs()
+                        .text_center()
+                        .text_color(cx.theme().text_muted)
+                        .child(SharedString::from(format!(
+                            "Approve connection request from your signer in {} seconds",
+                            i
+                        ))),
+                )
+            })
+            .when_some(self.error.read(cx).as_ref(), |this, error| {
+                this.child(
+                    div()
+                        .text_xs()
+                        .text_center()
+                        .text_color(cx.theme().text_danger)
+                        .child(error.clone()),
+                )
+            })
+    }
+}

crates/coop/src/dialogs/mod.rs

@@ -1,2 +1,6 @@
+pub mod accounts;
 pub mod screening;
 pub mod settings;
+
+mod connect;
+mod import;

crates/coop/src/dialogs/screening.rs

@@ -254,7 +254,7 @@ impl Screening {
             let total = contacts.len();
 
             this.title(SharedString::from("Mutual contacts")).child(
-                v_flex().gap_1().pb_4().child(
+                v_flex().gap_1().pb_2().child(
                     uniform_list("contacts", total, move |range, _window, cx| {
                         let persons = PersonRegistry::global(cx);
                         let mut items = Vec::with_capacity(total);
@@ -356,9 +356,9 @@ impl Render for Screening {
                             .child(
                                 Button::new("report")
                                     .tooltip("Report as a scam or impostor")
-                                    .icon(IconName::Boom)
+                                    .icon(IconName::Warning)
                                     .small()
-                                    .danger()
+                                    .warning()
                                     .rounded()
                                     .on_click(cx.listener(move |this, _e, window, cx| {
                                         this.report(window, cx);

crates/coop/src/dialogs/settings.rs

@@ -1,7 +1,7 @@
 use gpui::http_client::Url;
 use gpui::{
-    div, px, App, AppContext, Context, Entity, IntoElement, ParentElement, Render, SharedString,
+    App, AppContext, Context, Entity, IntoElement, ParentElement, Render, SharedString, Styled,
-    Styled, Window,
+    Window, div, px,
 };
 use settings::{AppSettings, AuthMode};
 use theme::{ActiveTheme, ThemeMode};
@@ -11,7 +11,7 @@ use ui::input::{InputState, TextInput};
 use ui::menu::{DropdownMenu, PopupMenuItem};
 use ui::notification::Notification;
 use ui::switch::Switch;
-use ui::{h_flex, v_flex, IconName, Sizable, WindowExtension};
+use ui::{IconName, Sizable, WindowExtension, h_flex, v_flex};
 
 pub fn init(window: &mut Window, cx: &mut App) -> Entity<Preferences> {
     cx.new(|cx| Preferences::new(window, cx))
@@ -41,7 +41,7 @@ impl Preferences {
                 AppSettings::update_file_server(url, cx);
             }
             Err(e) => {
-                window.push_notification(Notification::error(e.to_string()), cx);
+                window.push_notification(Notification::error(e.to_string()).autohide(false), cx);
             }
         }
     }

crates/coop/src/main.rs

@@ -2,9 +2,9 @@ use std::sync::{Arc, Mutex};
 
 use assets::Assets;
 use gpui::{
-    actions, point, px, size, App, AppContext, Bounds, KeyBinding, Menu, MenuItem, SharedString,
+    App, AppContext, Bounds, KeyBinding, Menu, MenuItem, SharedString, TitlebarOptions,
-    TitlebarOptions, WindowBackgroundAppearance, WindowBounds, WindowDecorations, WindowKind,
+    WindowBackgroundAppearance, WindowBounds, WindowDecorations, WindowKind, WindowOptions,
-    WindowOptions,
+    actions, point, px, size,
 };
 use gpui_platform::application;
 use state::{APP_ID, CLIENT_NAME};
@@ -86,7 +86,7 @@ fn main() {
                     state::init(window, cx);
 
                     // Initialize person registry
-                    person::init(cx);
+                    person::init(window, cx);
 
                     // Initialize relay auth registry
                     relay_auth::init(window, cx);

crates/coop/src/panels/backup.rs

@@ -2,16 +2,16 @@ use std::time::Duration;
 
 use anyhow::Error;
 use gpui::{
-    div, AnyElement, App, AppContext, ClipboardItem, Context, Entity, EventEmitter, FocusHandle,
+    AnyElement, App, AppContext, ClipboardItem, Context, Entity, EventEmitter, FocusHandle,
-    Focusable, IntoElement, ParentElement, Render, SharedString, Styled, Task, Window,
+    Focusable, IntoElement, ParentElement, Render, SharedString, Styled, Task, Window, div,
 };
 use nostr_sdk::prelude::*;
 use state::KEYRING;
 use theme::ActiveTheme;
 use ui::button::{Button, ButtonVariants};
-use ui::dock_area::panel::{Panel, PanelEvent};
+use ui::dock::{Panel, PanelEvent};
 use ui::input::{InputState, TextInput};
-use ui::{divider, v_flex, IconName, Sizable, StyledExt};
+use ui::{IconName, Sizable, StyledExt, divider, v_flex};
 
 const MSG: &str = "Store your account keys in a safe location. \
                    You can restore your account or move to another client anytime you want.";

crates/coop/src/panels/connect.rs

@@ -1,127 +0,0 @@
-use std::sync::Arc;
-
-use common::TextUtils;
-use gpui::prelude::FluentBuilder;
-use gpui::{
-    div, img, px, relative, AnyElement, App, AppContext, Context, Entity, EventEmitter,
-    FocusHandle, Focusable, Image, IntoElement, ParentElement, Render, SharedString, Styled, Task,
-    Window,
-};
-use smallvec::{smallvec, SmallVec};
-use state::NostrRegistry;
-use theme::ActiveTheme;
-use ui::dock_area::panel::{Panel, PanelEvent};
-use ui::dock_area::ClosePanel;
-use ui::notification::Notification;
-use ui::{v_flex, StyledExt, WindowExtension};
-
-pub fn init(window: &mut Window, cx: &mut App) -> Entity<ConnectPanel> {
-    cx.new(|cx| ConnectPanel::new(window, cx))
-}
-
-pub struct ConnectPanel {
-    name: SharedString,
-    focus_handle: FocusHandle,
-
-    /// QR Code
-    qr_code: Option<Arc<Image>>,
-
-    /// Background tasks
-    _tasks: SmallVec<[Task<()>; 1]>,
-}
-
-impl ConnectPanel {
-    fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
-        let nostr = NostrRegistry::global(cx);
-        let weak_state = nostr.downgrade();
-        let (signer, uri) = nostr.read(cx).client_connect(None);
-
-        // Generate a QR code for quick connection
-        let qr_code = uri.to_string().to_qr();
-
-        let mut tasks = smallvec![];
-
-        tasks.push(
-            // Wait for nostr connect
-            cx.spawn_in(window, async move |_this, cx| {
-                let result = signer.bunker_uri().await;
-
-                weak_state
-                    .update_in(cx, |this, window, cx| {
-                        match result {
-                            Ok(uri) => {
-                                this.persist_bunker(uri, cx);
-                                this.set_signer(signer, true, cx);
-                                // Close the current panel after setting the signer
-                                window.dispatch_action(Box::new(ClosePanel), cx);
-                            }
-                            Err(e) => {
-                                window.push_notification(Notification::error(e.to_string()), cx);
-                            }
-                        };
-                    })
-                    .ok();
-            }),
-        );
-
-        Self {
-            name: "Nostr Connect".into(),
-            focus_handle: cx.focus_handle(),
-            qr_code,
-            _tasks: tasks,
-        }
-    }
-}
-
-impl Panel for ConnectPanel {
-    fn panel_id(&self) -> SharedString {
-        self.name.clone()
-    }
-
-    fn title(&self, _cx: &App) -> AnyElement {
-        self.name.clone().into_any_element()
-    }
-}
-
-impl EventEmitter<PanelEvent> for ConnectPanel {}
-
-impl Focusable for ConnectPanel {
-    fn focus_handle(&self, _: &App) -> gpui::FocusHandle {
-        self.focus_handle.clone()
-    }
-}
-
-impl Render for ConnectPanel {
-    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
-        v_flex()
-            .size_full()
-            .items_center()
-            .justify_center()
-            .p_2()
-            .gap_10()
-            .child(
-                v_flex()
-                    .justify_center()
-                    .items_center()
-                    .text_center()
-                    .child(
-                        div()
-                            .font_semibold()
-                            .line_height(relative(1.25))
-                            .child(SharedString::from("Continue with Nostr Connect")),
-                    )
-                    .child(div().text_sm().text_color(cx.theme().text_muted).child(
-                        SharedString::from("Use Nostr Connect apps to scan the code"),
-                    )),
-            )
-            .when_some(self.qr_code.as_ref(), |this, qr| {
-                this.child(
-                    img(qr.clone())
-                        .size(px(256.))
-                        .rounded(cx.theme().radius_lg)
-                        .border_1()
-                        .border_color(cx.theme().border),
-                )
-            })
-    }
-}

crates/coop/src/panels/contact_list.rs

@@ -4,20 +4,20 @@ use std::time::Duration;
 use anyhow::{Context as AnyhowContext, Error};
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    div, rems, AnyElement, App, AppContext, Context, Entity, EventEmitter, FocusHandle, Focusable,
+    AnyElement, App, AppContext, Context, Entity, EventEmitter, FocusHandle, Focusable,
     InteractiveElement, IntoElement, ParentElement, Render, SharedString, Styled, Subscription,
-    Task, TextAlign, Window,
+    Task, TextAlign, Window, div, rems,
 };
 use nostr_sdk::prelude::*;
 use person::PersonRegistry;
-use smallvec::{smallvec, SmallVec};
+use smallvec::{SmallVec, smallvec};
 use state::NostrRegistry;
 use theme::ActiveTheme;
 use ui::avatar::Avatar;
 use ui::button::{Button, ButtonVariants};
-use ui::dock_area::panel::{Panel, PanelEvent};
+use ui::dock::{Panel, PanelEvent};
 use ui::input::{InputEvent, InputState, TextInput};
-use ui::{h_flex, v_flex, Disableable, IconName, Sizable, StyledExt, WindowExtension};
+use ui::{Disableable, IconName, Sizable, StyledExt, WindowExtension, h_flex, v_flex};
 
 pub fn init(window: &mut Window, cx: &mut App) -> Entity<ContactListPanel> {
     cx.new(|cx| ContactListPanel::new(window, cx))
@@ -156,15 +156,6 @@ impl ContactListPanel {
 
         let nostr = NostrRegistry::global(cx);
         let client = nostr.read(cx).client();
-        let signer = nostr.read(cx).signer();
-
-        let Some(public_key) = signer.public_key() else {
-            window.push_notification("Public Key not found", cx);
-            return;
-        };
-
-        // Get user's write relays
-        let write_relays = nostr.read(cx).write_relays(&public_key, cx);
 
         // Get contacts
         let contacts: Vec<Contact> = self
@@ -177,14 +168,12 @@ impl ContactListPanel {
         self.set_updating(true, cx);
 
         let task: Task<Result<(), Error>> = cx.background_spawn(async move {
-            let urls = write_relays.await;
-
             // Construct contact list event builder
             let builder = EventBuilder::contact_list(contacts);
             let event = client.sign_event_builder(builder).await?;
 
             // Set contact list
-            client.send_event(&event).to(urls).await?;
+            client.send_event(&event).to_nip65().await?;
 
             Ok(())
         });
@@ -333,7 +322,7 @@ impl Render for ContactListPanel {
                                 div()
                                     .italic()
                                     .text_xs()
-                                    .text_color(cx.theme().danger_active)
+                                    .text_color(cx.theme().text_danger)
                                     .child(error.clone()),
                             )
                         }),

crates/coop/src/panels/encryption_key.rs

@@ -1,292 +0,0 @@
-use anyhow::Error;
-use device::DeviceRegistry;
-use gpui::prelude::FluentBuilder;
-use gpui::{
-    div, px, AnyElement, App, AppContext, Context, Entity, EventEmitter, FocusHandle, Focusable,
-    IntoElement, ParentElement, Render, SharedString, Styled, Task, Window,
-};
-use nostr_sdk::prelude::*;
-use person::{shorten_pubkey, PersonRegistry};
-use state::Announcement;
-use theme::ActiveTheme;
-use ui::button::{Button, ButtonVariants};
-use ui::dock_area::panel::{Panel, PanelEvent};
-use ui::notification::Notification;
-use ui::{divider, h_flex, v_flex, Disableable, IconName, Sizable, StyledExt, WindowExtension};
-
-const MSG: &str =
-    "Encryption Key is a special key that used to encrypt and decrypt your messages. \
-     Your identity is completely decoupled from all encryption processes to protect your privacy.";
-
-const NOTICE: &str = "By resetting your encryption key, you will lose access to \
-                      all your encrypted messages before. This action cannot be undone.";
-
-pub fn init(public_key: PublicKey, window: &mut Window, cx: &mut App) -> Entity<EncryptionPanel> {
-    cx.new(|cx| EncryptionPanel::new(public_key, window, cx))
-}
-
-#[derive(Debug)]
-pub struct EncryptionPanel {
-    name: SharedString,
-    focus_handle: FocusHandle,
-
-    /// User's public key
-    public_key: PublicKey,
-
-    /// Whether the panel is loading
-    loading: bool,
-
-    /// Tasks
-    tasks: Vec<Task<Result<(), Error>>>,
-}
-
-impl EncryptionPanel {
-    fn new(public_key: PublicKey, _window: &mut Window, cx: &mut Context<Self>) -> Self {
-        Self {
-            name: "Encryption".into(),
-            focus_handle: cx.focus_handle(),
-            public_key,
-            loading: false,
-            tasks: vec![],
-        }
-    }
-
-    fn set_loading(&mut self, status: bool, cx: &mut Context<Self>) {
-        self.loading = status;
-        cx.notify();
-    }
-
-    fn approve(&mut self, event: &Event, window: &mut Window, cx: &mut Context<Self>) {
-        let device = DeviceRegistry::global(cx);
-        let task = device.read(cx).approve(event, cx);
-        let id = event.id;
-
-        // Update loading status
-        self.set_loading(true, cx);
-
-        self.tasks.push(cx.spawn_in(window, async move |this, cx| {
-            match task.await {
-                Ok(_) => {
-                    this.update_in(cx, |this, window, cx| {
-                        // Reset loading status
-                        this.set_loading(false, cx);
-
-                        // Remove request
-                        device.update(cx, |this, cx| {
-                            this.remove_request(&id, cx);
-                        });
-
-                        window.push_notification("Approved", cx);
-                    })?;
-                }
-                Err(e) => {
-                    this.update_in(cx, |this, window, cx| {
-                        this.set_loading(false, cx);
-                        window.push_notification(Notification::error(e.to_string()), cx);
-                    })?;
-                }
-            }
-
-            Ok(())
-        }));
-    }
-
-    fn render_requests(&mut self, cx: &mut Context<Self>) -> Vec<impl IntoElement> {
-        const TITLE: &str = "You've requested for the Encryption Key from:";
-
-        let device = DeviceRegistry::global(cx);
-        let requests = device.read(cx).requests.clone();
-        let mut items = Vec::new();
-
-        for event in requests.into_iter() {
-            let request = Announcement::from(&event);
-            let client_name = request.client_name();
-            let target = request.public_key();
-
-            items.push(
-                v_flex()
-                    .gap_2()
-                    .text_sm()
-                    .child(SharedString::from(TITLE))
-                    .child(
-                        v_flex()
-                            .h_12()
-                            .items_center()
-                            .justify_center()
-                            .px_2()
-                            .rounded(cx.theme().radius)
-                            .bg(cx.theme().warning_background)
-                            .text_color(cx.theme().warning_foreground)
-                            .child(client_name.clone()),
-                    )
-                    .child(
-                        h_flex()
-                            .h_7()
-                            .w_full()
-                            .px_2()
-                            .rounded(cx.theme().radius)
-                            .bg(cx.theme().elevated_surface_background)
-                            .child(SharedString::from(target.to_hex())),
-                    )
-                    .child(
-                        h_flex().justify_end().gap_2().child(
-                            Button::new("approve")
-                                .label("Approve")
-                                .ghost()
-                                .small()
-                                .disabled(self.loading)
-                                .loading(self.loading)
-                                .on_click(cx.listener(move |this, _ev, window, cx| {
-                                    this.approve(&event, window, cx);
-                                })),
-                        ),
-                    ),
-            )
-        }
-
-        items
-    }
-}
-
-impl Panel for EncryptionPanel {
-    fn panel_id(&self) -> SharedString {
-        self.name.clone()
-    }
-
-    fn title(&self, _cx: &App) -> AnyElement {
-        self.name.clone().into_any_element()
-    }
-}
-
-impl EventEmitter<PanelEvent> for EncryptionPanel {}
-
-impl Focusable for EncryptionPanel {
-    fn focus_handle(&self, _: &App) -> gpui::FocusHandle {
-        self.focus_handle.clone()
-    }
-}
-
-impl Render for EncryptionPanel {
-    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
-        let device = DeviceRegistry::global(cx);
-        let state = device.read(cx).state();
-        let has_requests = device.read(cx).has_requests();
-
-        let persons = PersonRegistry::global(cx);
-        let profile = persons.read(cx).get(&self.public_key, cx);
-
-        let Some(announcement) = profile.announcement() else {
-            return div();
-        };
-
-        let pubkey = SharedString::from(shorten_pubkey(announcement.public_key(), 16));
-        let client_name = announcement.client_name();
-
-        v_flex()
-            .p_3()
-            .gap_3()
-            .w_full()
-            .child(
-                div()
-                    .text_xs()
-                    .text_color(cx.theme().text_muted)
-                    .child(SharedString::from(MSG)),
-            )
-            .child(divider(cx))
-            .child(
-                v_flex()
-                    .gap_3()
-                    .text_sm()
-                    .child(
-                        v_flex()
-                            .gap_1p5()
-                            .child(
-                                div()
-                                    .text_color(cx.theme().text_muted)
-                                    .child(SharedString::from("Device Name:")),
-                            )
-                            .child(
-                                h_flex()
-                                    .h_12()
-                                    .items_center()
-                                    .justify_center()
-                                    .rounded(cx.theme().radius)
-                                    .bg(cx.theme().elevated_surface_background)
-                                    .child(client_name.clone()),
-                            ),
-                    )
-                    .child(
-                        v_flex()
-                            .gap_1p5()
-                            .child(
-                                div()
-                                    .text_color(cx.theme().text_muted)
-                                    .child(SharedString::from("Encryption Public Key:")),
-                            )
-                            .child(
-                                h_flex()
-                                    .h_7()
-                                    .w_full()
-                                    .px_2()
-                                    .rounded(cx.theme().radius)
-                                    .bg(cx.theme().elevated_surface_background)
-                                    .child(pubkey),
-                            ),
-                    ),
-            )
-            .when(has_requests, |this| {
-                this.child(divider(cx)).child(
-                    v_flex()
-                        .gap_1p5()
-                        .w_full()
-                        .child(
-                            div()
-                                .text_color(cx.theme().text_muted)
-                                .child(SharedString::from("Requests:")),
-                        )
-                        .child(
-                            v_flex()
-                                .gap_2()
-                                .flex_1()
-                                .w_full()
-                                .children(self.render_requests(cx)),
-                        ),
-                )
-            })
-            .child(divider(cx))
-            .when(state.requesting(), |this| {
-                this.child(
-                    h_flex()
-                        .h_8()
-                        .justify_center()
-                        .text_xs()
-                        .text_center()
-                        .text_color(cx.theme().text_accent)
-                        .bg(cx.theme().elevated_surface_background)
-                        .rounded(cx.theme().radius)
-                        .child(SharedString::from(
-                            "Please open other device and approve the request",
-                        )),
-                )
-            })
-            .child(
-                v_flex()
-                    .gap_1()
-                    .child(
-                        Button::new("reset")
-                            .icon(IconName::Reset)
-                            .label("Reset")
-                            .warning()
-                            .small()
-                            .font_semibold(),
-                    )
-                    .child(
-                        div()
-                            .italic()
-                            .text_size(px(10.))
-                            .text_color(cx.theme().text_muted)
-                            .child(SharedString::from(NOTICE)),
-                    ),
-            )
-    }
-}

crates/coop/src/panels/greeter.rs

@@ -1,17 +1,14 @@
-use chat::{ChatRegistry, InboxState};
-use gpui::prelude::FluentBuilder;
 use gpui::{
-    div, svg, AnyElement, App, AppContext, Context, Entity, EventEmitter, FocusHandle, Focusable,
+    AnyElement, App, AppContext, Context, Entity, EventEmitter, FocusHandle, Focusable,
-    IntoElement, ParentElement, Render, SharedString, Styled, Window,
+    IntoElement, ParentElement, Render, SharedString, Styled, Window, div, svg,
 };
-use state::{NostrRegistry, RelayState};
+use state::NostrRegistry;
 use theme::ActiveTheme;
 use ui::button::{Button, ButtonVariants};
-use ui::dock_area::dock::DockPlacement;
+use ui::dock::{DockPlacement, Panel, PanelEvent};
-use ui::dock_area::panel::{Panel, PanelEvent};
+use ui::{Icon, IconName, Sizable, StyledExt, h_flex, v_flex};
-use ui::{h_flex, v_flex, Icon, IconName, Sizable, StyledExt};
 
-use crate::panels::{connect, import, messaging_relays, profile, relay_list};
+use crate::panels::profile;
 use crate::workspace::Workspace;
 
 pub fn init(window: &mut Window, cx: &mut App) -> Entity<GreeterPanel> {
@@ -82,18 +79,6 @@ impl Render for GreeterPanel {
         const TITLE: &str = "Welcome to Coop!";
         const DESCRIPTION: &str = "Chat Freely, Stay Private on Nostr.";
 
-        let chat = ChatRegistry::global(cx);
-        let nip17 = chat.read(cx).state(cx);
-
-        let nostr = NostrRegistry::global(cx);
-        let nip65 = nostr.read(cx).relay_list_state();
-
-        let signer = nostr.read(cx).signer();
-        let owned = signer.owned();
-
-        let required_actions =
-            nip65 == RelayState::NotConfigured || nip17 == InboxState::RelayNotAvailable;
-
         h_flex()
             .size_full()
             .items_center()
@@ -133,118 +118,6 @@ impl Render for GreeterPanel {
                                     ),
                             ),
                     )
-                    .when(required_actions, |this| {
-                        this.child(
-                            v_flex()
-                                .gap_2()
-                                .w_full()
-                                .child(
-                                    h_flex()
-                                        .gap_2()
-                                        .w_full()
-                                        .text_xs()
-                                        .font_semibold()
-                                        .text_color(cx.theme().text_muted)
-                                        .child(SharedString::from("Required Actions"))
-                                        .child(div().flex_1().h_px().bg(cx.theme().border)),
-                                )
-                                .child(
-                                    v_flex()
-                                        .gap_2()
-                                        .w_full()
-                                        .when(nip65.not_configured(), |this| {
-                                            this.child(
-                                                Button::new("relaylist")
-                                                    .icon(Icon::new(IconName::Relay))
-                                                    .label("Set up relay list")
-                                                    .ghost()
-                                                    .small()
-                                                    .justify_start()
-                                                    .on_click(move |_ev, window, cx| {
-                                                        Workspace::add_panel(
-                                                            relay_list::init(window, cx),
-                                                            DockPlacement::Center,
-                                                            window,
-                                                            cx,
-                                                        );
-                                                    }),
-                                            )
-                                        })
-                                        .when(nip17.not_configured(), |this| {
-                                            this.child(
-                                                Button::new("import")
-                                                    .icon(Icon::new(IconName::Relay))
-                                                    .label("Set up messaging relays")
-                                                    .ghost()
-                                                    .small()
-                                                    .justify_start()
-                                                    .on_click(move |_ev, window, cx| {
-                                                        Workspace::add_panel(
-                                                            messaging_relays::init(window, cx),
-                                                            DockPlacement::Center,
-                                                            window,
-                                                            cx,
-                                                        );
-                                                    }),
-                                            )
-                                        }),
-                                ),
-                        )
-                    })
-                    .when(!owned, |this| {
-                        this.child(
-                            v_flex()
-                                .gap_2()
-                                .w_full()
-                                .child(
-                                    h_flex()
-                                        .gap_2()
-                                        .w_full()
-                                        .text_xs()
-                                        .font_semibold()
-                                        .text_color(cx.theme().text_muted)
-                                        .child(SharedString::from("Use your own identity"))
-                                        .child(div().flex_1().h_px().bg(cx.theme().border)),
-                                )
-                                .child(
-                                    v_flex()
-                                        .gap_2()
-                                        .w_full()
-                                        .child(
-                                            Button::new("connect")
-                                                .icon(Icon::new(IconName::Door))
-                                                .label("Connect account via Nostr Connect")
-                                                .ghost()
-                                                .small()
-                                                .justify_start()
-                                                .on_click(move |_ev, window, cx| {
-                                                    Workspace::add_panel(
-                                                        connect::init(window, cx),
-                                                        DockPlacement::Center,
-                                                        window,
-                                                        cx,
-                                                    );
-                                                }),
-                                        )
-                                        .child(
-                                            Button::new("import")
-                                                .icon(Icon::new(IconName::Usb))
-                                                .label("Import a secret key or bunker")
-                                                .ghost()
-                                                .small()
-                                                .justify_start()
-                                                .on_click(move |_ev, window, cx| {
-                                                    Workspace::add_panel(
-                                                        import::init(window, cx),
-                                                        DockPlacement::Center,
-                                                        window,
-                                                        cx,
-                                                    );
-                                                }),
-                                        ),
-                                ),
-                        )
-                    })
                     .child(
                         v_flex()
                             .gap_2()

crates/coop/src/panels/import.rs

@@ -1,371 +0,0 @@
-use std::time::Duration;
-
-use anyhow::anyhow;
-use gpui::prelude::FluentBuilder;
-use gpui::{
-    div, relative, AnyElement, App, AppContext, Context, Entity, EventEmitter, FocusHandle,
-    Focusable, IntoElement, ParentElement, Render, SharedString, Styled, Subscription, Window,
-};
-use nostr_connect::prelude::*;
-use smallvec::{smallvec, SmallVec};
-use state::{CoopAuthUrlHandler, NostrRegistry};
-use theme::ActiveTheme;
-use ui::button::{Button, ButtonVariants};
-use ui::dock_area::panel::{Panel, PanelEvent};
-use ui::dock_area::ClosePanel;
-use ui::input::{InputEvent, InputState, TextInput};
-use ui::notification::Notification;
-use ui::{v_flex, Disableable, StyledExt, WindowExtension};
-
-pub fn init(window: &mut Window, cx: &mut App) -> Entity<ImportPanel> {
-    cx.new(|cx| ImportPanel::new(window, cx))
-}
-
-#[derive(Debug)]
-pub struct ImportPanel {
-    name: SharedString,
-    focus_handle: FocusHandle,
-
-    /// Secret key input
-    key_input: Entity<InputState>,
-
-    /// Password input (if required)
-    pass_input: Entity<InputState>,
-
-    /// Error message
-    error: Entity<Option<SharedString>>,
-
-    /// Countdown timer for nostr connect
-    countdown: Entity<Option<u64>>,
-
-    /// Whether the user is currently logging in
-    logging_in: bool,
-
-    /// Event subscriptions
-    _subscriptions: SmallVec<[Subscription; 1]>,
-}
-
-impl ImportPanel {
-    fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
-        let key_input = cx.new(|cx| InputState::new(window, cx).masked(true));
-        let pass_input = cx.new(|cx| InputState::new(window, cx).masked(true));
-
-        let error = cx.new(|_| None);
-        let countdown = cx.new(|_| None);
-
-        let mut subscriptions = smallvec![];
-
-        subscriptions.push(
-            // Subscribe to key input events and process login when the user presses enter
-            cx.subscribe_in(&key_input, window, |this, _input, event, window, cx| {
-                if let InputEvent::PressEnter { .. } = event {
-                    this.login(window, cx);
-                };
-            }),
-        );
-
-        Self {
-            key_input,
-            pass_input,
-            error,
-            countdown,
-            name: "Import".into(),
-            focus_handle: cx.focus_handle(),
-            logging_in: false,
-            _subscriptions: subscriptions,
-        }
-    }
-
-    fn login(&mut self, window: &mut Window, cx: &mut Context<Self>) {
-        if self.logging_in {
-            return;
-        };
-        // Prevent duplicate login requests
-        self.set_logging_in(true, cx);
-
-        let value = self.key_input.read(cx).value();
-        let password = self.pass_input.read(cx).value();
-
-        if value.starts_with("bunker://") {
-            self.login_with_bunker(&value, window, cx);
-            return;
-        }
-
-        if value.starts_with("ncryptsec1") {
-            self.login_with_password(&value, &password, window, cx);
-            return;
-        }
-
-        if let Ok(secret) = SecretKey::parse(&value) {
-            let keys = Keys::new(secret);
-            let nostr = NostrRegistry::global(cx);
-            // Update the signer
-            nostr.update(cx, |this, cx| {
-                this.set_signer(keys, true, cx);
-            });
-            // Close the current panel after setting the signer
-            window.dispatch_action(Box::new(ClosePanel), cx);
-        } else {
-            self.set_error("Invalid", cx);
-        }
-    }
-
-    fn login_with_bunker(&mut self, content: &str, window: &mut Window, cx: &mut Context<Self>) {
-        let Ok(uri) = NostrConnectUri::parse(content) else {
-            self.set_error("Bunker is not valid", cx);
-            return;
-        };
-
-        let nostr = NostrRegistry::global(cx);
-        let weak_state = nostr.downgrade();
-
-        let app_keys = nostr.read(cx).app_keys();
-        let timeout = Duration::from_secs(30);
-        let mut signer = NostrConnect::new(uri, app_keys.clone(), timeout, None).unwrap();
-
-        // Handle auth url with the default browser
-        signer.auth_url_handler(CoopAuthUrlHandler);
-
-        // Start countdown
-        cx.spawn_in(window, async move |this, cx| {
-            for i in (0..=30).rev() {
-                if i == 0 {
-                    this.update(cx, |this, cx| {
-                        this.set_countdown(None, cx);
-                    })
-                    .ok();
-                } else {
-                    this.update(cx, |this, cx| {
-                        this.set_countdown(Some(i), cx);
-                    })
-                    .ok();
-                }
-                cx.background_executor().timer(Duration::from_secs(1)).await;
-            }
-        })
-        .detach();
-
-        // Handle connection
-        cx.spawn_in(window, async move |_this, cx| {
-            let result = signer.bunker_uri().await;
-
-            weak_state
-                .update_in(cx, |this, window, cx| {
-                    match result {
-                        Ok(uri) => {
-                            this.persist_bunker(uri, cx);
-                            this.set_signer(signer, true, cx);
-                            // Close the current panel after setting the signer
-                            window.dispatch_action(Box::new(ClosePanel), cx);
-                        }
-                        Err(e) => {
-                            window.push_notification(Notification::error(e.to_string()), cx);
-                        }
-                    };
-                })
-                .ok();
-        })
-        .detach();
-    }
-
-    pub fn login_with_password(
-        &mut self,
-        content: &str,
-        pwd: &str,
-        window: &mut Window,
-        cx: &mut Context<Self>,
-    ) {
-        if pwd.is_empty() {
-            self.set_error("Password is required", cx);
-            return;
-        }
-
-        let Ok(enc) = EncryptedSecretKey::from_bech32(content) else {
-            self.set_error("Secret Key is invalid", cx);
-            return;
-        };
-
-        let password = pwd.to_owned();
-
-        // Decrypt in the background to ensure it doesn't block the UI
-        let task = cx.background_spawn(async move {
-            if let Ok(content) = enc.decrypt(&password) {
-                Ok(Keys::new(content))
-            } else {
-                Err(anyhow!("Invalid password"))
-            }
-        });
-
-        cx.spawn_in(window, async move |this, cx| {
-            let result = task.await;
-
-            this.update_in(cx, |this, window, cx| {
-                match result {
-                    Ok(keys) => {
-                        let nostr = NostrRegistry::global(cx);
-                        // Update the signer
-                        nostr.update(cx, |this, cx| {
-                            this.set_signer(keys, true, cx);
-                        });
-                        // Close the current panel after setting the signer
-                        window.dispatch_action(Box::new(ClosePanel), cx);
-                    }
-                    Err(e) => {
-                        this.set_error(e.to_string(), cx);
-                    }
-                };
-            })
-            .ok();
-        })
-        .detach();
-    }
-
-    fn set_error<S>(&mut self, message: S, cx: &mut Context<Self>)
-    where
-        S: Into<SharedString>,
-    {
-        // Reset the log in state
-        self.set_logging_in(false, cx);
-
-        // Reset the countdown
-        self.set_countdown(None, cx);
-
-        // Update error message
-        self.error.update(cx, |this, cx| {
-            *this = Some(message.into());
-            cx.notify();
-        });
-
-        // Clear the error message after 3 secs
-        cx.spawn(async move |this, cx| {
-            cx.background_executor().timer(Duration::from_secs(3)).await;
-
-            this.update(cx, |this, cx| {
-                this.error.update(cx, |this, cx| {
-                    *this = None;
-                    cx.notify();
-                });
-            })
-            .ok();
-        })
-        .detach();
-    }
-
-    fn set_logging_in(&mut self, status: bool, cx: &mut Context<Self>) {
-        self.logging_in = status;
-        cx.notify();
-    }
-
-    fn set_countdown(&mut self, i: Option<u64>, cx: &mut Context<Self>) {
-        self.countdown.update(cx, |this, cx| {
-            *this = i;
-            cx.notify();
-        });
-    }
-}
-
-impl Panel for ImportPanel {
-    fn panel_id(&self) -> SharedString {
-        self.name.clone()
-    }
-
-    fn title(&self, _cx: &App) -> AnyElement {
-        self.name.clone().into_any_element()
-    }
-}
-
-impl EventEmitter<PanelEvent> for ImportPanel {}
-
-impl Focusable for ImportPanel {
-    fn focus_handle(&self, _: &App) -> gpui::FocusHandle {
-        self.focus_handle.clone()
-    }
-}
-
-impl Render for ImportPanel {
-    fn render(&mut self, _window: &mut gpui::Window, cx: &mut Context<Self>) -> impl IntoElement {
-        const SECRET_WARN: &str = "* Coop doesn't store your secret key. \
-            It will be cleared when you close the app. \
-            To persist your identity, please connect via Nostr Connect.";
-
-        v_flex()
-            .size_full()
-            .items_center()
-            .justify_center()
-            .p_2()
-            .gap_10()
-            .child(
-                div()
-                    .text_center()
-                    .font_semibold()
-                    .line_height(relative(1.25))
-                    .child(SharedString::from("Import a Secret Key or Bunker")),
-            )
-            .child(
-                v_flex()
-                    .w_112()
-                    .gap_2()
-                    .text_sm()
-                    .child(
-                        v_flex()
-                            .gap_1()
-                            .text_sm()
-                            .text_color(cx.theme().text_muted)
-                            .child("nsec or bunker://")
-                            .child(TextInput::new(&self.key_input)),
-                    )
-                    .when(
-                        self.key_input.read(cx).value().starts_with("ncryptsec1"),
-                        |this| {
-                            this.child(
-                                v_flex()
-                                    .gap_1()
-                                    .text_sm()
-                                    .text_color(cx.theme().text_muted)
-                                    .child("Password:")
-                                    .child(TextInput::new(&self.pass_input)),
-                            )
-                        },
-                    )
-                    .child(
-                        Button::new("login")
-                            .label("Continue")
-                            .primary()
-                            .loading(self.logging_in)
-                            .disabled(self.logging_in)
-                            .on_click(cx.listener(move |this, _, window, cx| {
-                                this.login(window, cx);
-                            })),
-                    )
-                    .when_some(self.countdown.read(cx).as_ref(), |this, i| {
-                        this.child(
-                            div()
-                                .text_xs()
-                                .text_center()
-                                .text_color(cx.theme().text_muted)
-                                .child(SharedString::from(format!(
-                                    "Approve connection request from your signer in {} seconds",
-                                    i
-                                ))),
-                        )
-                    })
-                    .when_some(self.error.read(cx).as_ref(), |this, error| {
-                        this.child(
-                            div()
-                                .text_xs()
-                                .text_center()
-                                .text_color(cx.theme().danger_foreground)
-                                .child(error.clone()),
-                        )
-                    })
-                    .child(
-                        div()
-                            .mt_2()
-                            .italic()
-                            .text_xs()
-                            .text_color(cx.theme().text_muted)
-                            .child(SharedString::from(SECRET_WARN)),
-                    ),
-            )
-    }
-}

crates/coop/src/panels/messaging_relays.rs

@@ -1,21 +1,21 @@
 use std::collections::HashSet;
 use std::time::Duration;
 
-use anyhow::{anyhow, Context as AnyhowContext, Error};
+use anyhow::{Context as AnyhowContext, Error, anyhow};
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    div, rems, AnyElement, App, AppContext, Context, Entity, EventEmitter, FocusHandle, Focusable,
+    AnyElement, App, AppContext, Context, Entity, EventEmitter, FocusHandle, Focusable,
     InteractiveElement, IntoElement, ParentElement, Render, SharedString, Styled, Subscription,
-    Task, TextAlign, Window,
+    Task, TextAlign, Window, div, rems,
 };
 use nostr_sdk::prelude::*;
-use smallvec::{smallvec, SmallVec};
+use smallvec::{SmallVec, smallvec};
 use state::NostrRegistry;
 use theme::ActiveTheme;
 use ui::button::{Button, ButtonVariants};
-use ui::dock_area::panel::{Panel, PanelEvent};
+use ui::dock::{Panel, PanelEvent};
 use ui::input::{InputEvent, InputState, TextInput};
-use ui::{divider, h_flex, v_flex, Disableable, IconName, Sizable, StyledExt, WindowExtension};
+use ui::{Disableable, IconName, Sizable, StyledExt, WindowExtension, divider, h_flex, v_flex};
 
 const MSG: &str = "Messaging Relays are relays that hosted all your messages. \
                    Other users will find your relays and send messages to it.";
@@ -170,15 +170,6 @@ impl MessagingRelayPanel {
 
         let nostr = NostrRegistry::global(cx);
         let client = nostr.read(cx).client();
-        let signer = nostr.read(cx).signer();
-
-        let Some(public_key) = signer.public_key() else {
-            window.push_notification("Public Key not found", cx);
-            return;
-        };
-
-        // Get user's write relays
-        let write_relays = nostr.read(cx).write_relays(&public_key, cx);
 
         // Construct event tags
         let tags: Vec<Tag> = self
@@ -191,14 +182,12 @@ impl MessagingRelayPanel {
         self.set_updating(true, cx);
 
         let task: Task<Result<(), Error>> = cx.background_spawn(async move {
-            let urls = write_relays.await;
-
             // Construct nip17 event builder
             let builder = EventBuilder::new(Kind::InboxRelays, "").tags(tags);
             let event = client.sign_event_builder(builder).await?;
 
             // Set messaging relays
-            client.send_event(&event).to(urls).await?;
+            client.send_event(&event).to_nip65().await?;
 
             Ok(())
         });
@@ -349,7 +338,7 @@ impl Render for MessagingRelayPanel {
                                     div()
                                         .italic()
                                         .text_xs()
-                                        .text_color(cx.theme().danger_active)
+                                        .text_color(cx.theme().text_danger)
                                         .child(error.clone()),
                                 )
                             }),

crates/coop/src/panels/mod.rs

@@ -1,9 +1,6 @@
 pub mod backup;
-pub mod connect;
 pub mod contact_list;
-pub mod encryption_key;
 pub mod greeter;
-pub mod import;
 pub mod messaging_relays;
 pub mod profile;
 pub mod relay_list;

crates/coop/src/panels/profile.rs

@@ -3,21 +3,21 @@ use std::time::Duration;
 
 use anyhow::{Context as AnyhowContext, Error};
 use gpui::{
-    div, AnyElement, App, AppContext, ClipboardItem, Context, Entity, EventEmitter, FocusHandle,
+    AnyElement, App, AppContext, ClipboardItem, Context, Entity, EventEmitter, FocusHandle,
     Focusable, IntoElement, ParentElement, PathPromptOptions, Render, SharedString, Styled, Task,
-    Window,
+    Window, div,
 };
 use nostr_sdk::prelude::*;
-use person::{shorten_pubkey, Person, PersonRegistry};
+use person::{Person, PersonRegistry, shorten_pubkey};
 use settings::AppSettings;
-use state::{upload, NostrRegistry};
+use state::{NostrRegistry, upload};
 use theme::ActiveTheme;
 use ui::avatar::Avatar;
 use ui::button::{Button, ButtonVariants};
-use ui::dock_area::panel::{Panel, PanelEvent};
+use ui::dock::{Panel, PanelEvent};
 use ui::input::{InputState, TextInput};
 use ui::notification::Notification;
-use ui::{h_flex, v_flex, Disableable, IconName, Sizable, StyledExt, WindowExtension};
+use ui::{Disableable, IconName, Sizable, StyledExt, WindowExtension, h_flex, v_flex};
 
 pub fn init(public_key: PublicKey, window: &mut Window, cx: &mut App) -> Entity<ProfilePanel> {
     cx.new(|cx| ProfilePanel::new(public_key, window, cx))
@@ -186,7 +186,10 @@ impl ProfilePanel {
                 Err(e) => {
                     this.update_in(cx, |this, window, cx| {
                         this.set_uploading(false, cx);
-                        window.push_notification(Notification::error(e.to_string()), cx);
+                        window.push_notification(
+                            Notification::error(e.to_string()).autohide(false),
+                            cx,
+                        );
                     })?;
                 }
             }
@@ -269,7 +272,10 @@ impl ProfilePanel {
                 }
                 Err(e) => {
                     cx.update(|window, cx| {
-                        window.push_notification(Notification::error(e.to_string()), cx);
+                        window.push_notification(
+                            Notification::error(e.to_string()).autohide(false),
+                            cx,
+                        );
                     })?;
                 }
             };

crates/coop/src/panels/relay_list.rs

@@ -1,23 +1,23 @@
 use std::collections::HashSet;
 use std::time::Duration;
 
-use anyhow::{anyhow, Context as AnyhowContext, Error};
+use anyhow::{Context as AnyhowContext, Error, anyhow};
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    div, px, rems, Action, AnyElement, App, AppContext, Context, Entity, EventEmitter, FocusHandle,
+    Action, AnyElement, App, AppContext, Context, Entity, EventEmitter, FocusHandle, Focusable,
-    Focusable, InteractiveElement, IntoElement, ParentElement, Render, SharedString, Styled,
+    InteractiveElement, IntoElement, ParentElement, Render, SharedString, Styled, Subscription,
-    Subscription, Task, TextAlign, Window,
+    Task, TextAlign, Window, div, px, rems,
 };
 use nostr_sdk::prelude::*;
 use serde::Deserialize;
-use smallvec::{smallvec, SmallVec};
+use smallvec::{SmallVec, smallvec};
 use state::NostrRegistry;
 use theme::ActiveTheme;
 use ui::button::{Button, ButtonVariants};
-use ui::dock_area::panel::{Panel, PanelEvent};
+use ui::dock::{Panel, PanelEvent};
 use ui::input::{InputEvent, InputState, TextInput};
 use ui::menu::DropdownMenu;
-use ui::{divider, h_flex, v_flex, Disableable, IconName, Sizable, StyledExt, WindowExtension};
+use ui::{Disableable, IconName, Sizable, StyledExt, WindowExtension, divider, h_flex, v_flex};
 
 const MSG: &str = "Relay List (or Gossip Relays) are a set of relays \
                    where you will publish all your events. Others also publish events \
@@ -408,7 +408,7 @@ impl Render for RelayListPanel {
                                     div()
                                         .italic()
                                         .text_xs()
-                                        .text_color(cx.theme().danger_active)
+                                        .text_color(cx.theme().text_danger)
                                         .child(error.clone()),
                                 )
                             }),

crates/coop/src/sidebar/entry.rs

@@ -3,16 +3,16 @@ use std::rc::Rc;
 use chat::RoomKind;
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    div, App, ClickEvent, InteractiveElement, IntoElement, ParentElement as _, RenderOnce,
+    App, ClickEvent, InteractiveElement, IntoElement, ParentElement as _, RenderOnce, SharedString,
-    SharedString, StatefulInteractiveElement, Styled, Window,
+    StatefulInteractiveElement, Styled, Window, div,
 };
 use nostr_sdk::prelude::*;
 use settings::AppSettings;
 use theme::ActiveTheme;
 use ui::avatar::Avatar;
-use ui::dock_area::ClosePanel;
+use ui::dock::ClosePanel;
 use ui::modal::ModalButtonProps;
-use ui::{h_flex, Icon, IconName, Selectable, Sizable, StyledExt, WindowExtension};
+use ui::{Icon, IconName, Selectable, Sizable, StyledExt, WindowExtension, h_flex};
 
 use crate::dialogs::screening;
 

crates/coop/src/sidebar/mod.rs

@@ -8,22 +8,22 @@ use common::{DebouncedDelay, RenderedTimestamp};
 use entry::RoomEntry;
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    div, uniform_list, App, AppContext, Context, Entity, EventEmitter, FocusHandle, Focusable,
+    App, AppContext, Context, Entity, EventEmitter, FocusHandle, Focusable, IntoElement,
-    IntoElement, ParentElement, Render, RetainAllImageCache, SharedString, Styled, Subscription,
+    ParentElement, Render, RetainAllImageCache, SharedString, Styled, Subscription, Task,
-    Task, UniformListScrollHandle, Window,
+    UniformListScrollHandle, Window, div, uniform_list,
 };
 use nostr_sdk::prelude::*;
 use person::PersonRegistry;
-use smallvec::{smallvec, SmallVec};
+use smallvec::{SmallVec, smallvec};
-use state::{NostrRegistry, FIND_DELAY};
+use state::{FIND_DELAY, NostrRegistry};
-use theme::{ActiveTheme, TABBAR_HEIGHT};
+use theme::{ActiveTheme, SIDEBAR_WIDTH, TABBAR_HEIGHT};
 use ui::button::{Button, ButtonVariants};
-use ui::dock_area::panel::{Panel, PanelEvent};
+use ui::dock::{Panel, PanelEvent};
 use ui::indicator::Indicator;
 use ui::input::{InputEvent, InputState, TextInput};
 use ui::notification::Notification;
 use ui::scroll::Scrollbar;
-use ui::{h_flex, v_flex, Icon, IconName, Selectable, Sizable, StyledExt, WindowExtension};
+use ui::{Icon, IconName, Selectable, Sizable, StyledExt, WindowExtension, h_flex, v_flex};
 
 mod entry;
 
@@ -180,7 +180,10 @@ impl Sidebar {
                 }
                 Err(e) => {
                     cx.update(|window, cx| {
-                        window.push_notification(Notification::error(e.to_string()), cx);
+                        window.push_notification(
+                            Notification::error(e.to_string()).autohide(false),
+                            cx,
+                        );
                     })?;
                 }
             };
@@ -500,7 +503,7 @@ impl Render for Sidebar {
                     .h(TABBAR_HEIGHT)
                     .border_b_1()
                     .border_color(cx.theme().border)
-                    .bg(cx.theme().elevated_surface_background)
+                    .bg(cx.theme().tab_background)
                     .child(
                         TextInput::new(&self.find_input)
                             .appearance(false)
@@ -585,10 +588,11 @@ impl Render for Sidebar {
             )
             .when(!show_find_panel && !loading && total_rooms == 0, |this| {
                 this.child(
-                    div().px_2().child(
+                    div().w(SIDEBAR_WIDTH).px_2().child(
                         v_flex()
                             .p_3()
                             .h_24()
+                            .w_full()
                             .border_2()
                             .border_dashed()
                             .border_color(cx.theme().border_variant)
@@ -612,11 +616,9 @@ impl Render for Sidebar {
             })
             .child(
                 v_flex()
-                    .h_full()
+                    .size_full()
-                    .px_1p5()
-                    .gap_1()
                     .flex_1()
-                    .overflow_y_hidden()
+                    .gap_1()
                     .when(show_find_panel, |this| {
                         this.gap_3()
                             .when_some(self.find_results.read(cx).as_ref(), |this, results| {
@@ -687,7 +689,8 @@ impl Render for Sidebar {
                             )
                             .track_scroll(&self.scroll_handle)
                             .flex_1()
-                            .h_full(),
+                            .h_full()
+                            .px_2(),
                         )
                         .child(Scrollbar::vertical(&self.scroll_handle))
                     }),

crates/coop/src/workspace.rs

@@ -1,47 +1,57 @@
+use std::cell::Cell;
+use std::rc::Rc;
 use std::sync::Arc;
 
 use ::settings::AppSettings;
-use chat::{ChatEvent, ChatRegistry, InboxState};
+use chat::{ChatEvent, ChatRegistry};
+use device::{DeviceEvent, DeviceRegistry};
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    div, px, Action, App, AppContext, Axis, Context, Entity, InteractiveElement, IntoElement,
+    Action, App, AppContext, Axis, Context, Entity, InteractiveElement, IntoElement, ParentElement,
-    ParentElement, Render, SharedString, Styled, Subscription, Window,
+    Render, SharedString, Styled, Subscription, Window, div, px,
 };
 use person::PersonRegistry;
 use serde::Deserialize;
-use smallvec::{smallvec, SmallVec};
+use smallvec::{SmallVec, smallvec};
-use state::{NostrRegistry, RelayState};
+use state::{NostrRegistry, StateEvent};
-use theme::{ActiveTheme, Theme, ThemeRegistry, SIDEBAR_WIDTH};
+use theme::{ActiveTheme, SIDEBAR_WIDTH, Theme, ThemeRegistry};
 use title_bar::TitleBar;
 use ui::avatar::Avatar;
 use ui::button::{Button, ButtonVariants};
-use ui::dock_area::dock::DockPlacement;
+use ui::dock::{ClosePanel, DockArea, DockItem, DockPlacement, PanelView};
-use ui::dock_area::panel::PanelView;
-use ui::dock_area::{ClosePanel, DockArea, DockItem};
 use ui::menu::{DropdownMenu, PopupMenuItem};
-use ui::{h_flex, v_flex, IconName, Root, Sizable, WindowExtension};
+use ui::notification::{Notification, NotificationKind};
+use ui::{Disableable, IconName, Root, Sizable, WindowExtension, h_flex, v_flex};
 
-use crate::dialogs::settings;
+use crate::dialogs::{accounts, settings};
-use crate::panels::{
+use crate::panels::{backup, contact_list, greeter, messaging_relays, profile, relay_list};
-    backup, contact_list, encryption_key, greeter, messaging_relays, profile, relay_list,
-};
 use crate::sidebar;
 
+const ENC_MSG: &str = "Encryption Key is a special key that used to encrypt and decrypt your messages. \
+     Your identity is completely decoupled from all encryption processes to protect your privacy.";
+
+const ENC_WARN: &str = "By resetting your encryption key, you will lose access to \
+                        all your encrypted messages before. This action cannot be undone.";
+
 pub fn init(window: &mut Window, cx: &mut App) -> Entity<Workspace> {
     cx.new(|cx| Workspace::new(window, cx))
 }
 
+struct RelayNotifcation;
+
 #[derive(Action, Clone, PartialEq, Eq, Deserialize)]
 #[action(namespace = workspace, no_json)]
 enum Command {
     ToggleTheme,
+    ToggleAccount,
 
+    RefreshEncryption,
     RefreshRelayList,
     RefreshMessagingRelays,
+    ResetEncryption,
 
     ShowRelayList,
     ShowMessaging,
-    ShowEncryption,
     ShowProfile,
     ShowSettings,
     ShowBackup,
@@ -55,13 +65,23 @@ pub struct Workspace {
     /// App's Dock Area
     dock: Entity<DockArea>,
 
+    /// Whether a user's relay list is connected
+    relay_connected: bool,
+
+    /// Whether the inbox is connected
+    inbox_connected: bool,
+
     /// Event subscriptions
-    _subscriptions: SmallVec<[Subscription; 3]>,
+    _subscriptions: SmallVec<[Subscription; 6]>,
 }
 
 impl Workspace {
     fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
         let chat = ChatRegistry::global(cx);
+        let device = DeviceRegistry::global(cx);
+        let nostr = NostrRegistry::global(cx);
+        let npubs = nostr.read(cx).npubs();
+
         let titlebar = cx.new(|_| TitleBar::new());
         let dock = cx.new(|cx| DockArea::new(window, cx));
 
@@ -74,6 +94,71 @@ impl Workspace {
             }),
         );
 
+        subscriptions.push(
+            // Observe the npubs entity
+            cx.observe_in(&npubs, window, move |this, npubs, window, cx| {
+                if !npubs.read(cx).is_empty() {
+                    this.account_selector(window, cx);
+                }
+            }),
+        );
+
+        subscriptions.push(
+            // Subscribe to the signer events
+            cx.subscribe_in(&nostr, window, move |this, _state, event, window, cx| {
+                match event {
+                    StateEvent::Connecting => {
+                        let note = Notification::new()
+                            .id::<RelayNotifcation>()
+                            .message("Connecting to the bootstrap relay...")
+                            .with_kind(NotificationKind::Info)
+                            .icon(IconName::Relay);
+
+                        window.push_notification(note, cx);
+                    }
+                    StateEvent::Connected => {
+                        let note = Notification::new()
+                            .id::<RelayNotifcation>()
+                            .message("Connected to the bootstrap relay")
+                            .with_kind(NotificationKind::Success)
+                            .icon(IconName::Relay);
+
+                        window.push_notification(note, cx);
+                    }
+                    StateEvent::RelayNotConfigured => {
+                        this.relay_notification(window, cx);
+                    }
+                    StateEvent::RelayConnected => {
+                        window.clear_notification::<RelayNotifcation>(cx);
+                        this.set_relay_connected(true, cx);
+                    }
+                    StateEvent::SignerSet => {
+                        this.set_center_layout(window, cx);
+                        this.set_relay_connected(false, cx);
+                        this.set_inbox_connected(false, cx);
+                    }
+                    _ => {}
+                };
+            }),
+        );
+
+        subscriptions.push(
+            // Observe all events emitted by the device registry
+            cx.subscribe_in(&device, window, |_this, _device, ev, window, cx| {
+                match ev {
+                    DeviceEvent::Set => {
+                        window.push_notification(
+                            Notification::success("Encryption Key has been set"),
+                            cx,
+                        );
+                    }
+                    DeviceEvent::Error(error) => {
+                        window.push_notification(Notification::error(error).autohide(false), cx);
+                    }
+                };
+            }),
+        );
+
         subscriptions.push(
             // Observe all events emitted by the chat registry
             cx.subscribe_in(&chat, window, move |this, chat, ev, window, cx| {
@@ -102,6 +187,12 @@ impl Workspace {
                             });
                         });
                     }
+                    ChatEvent::Subscribed => {
+                        this.set_inbox_connected(true, cx);
+                    }
+                    ChatEvent::Error(error) => {
+                        window.push_notification(Notification::error(error).autohide(false), cx);
+                    }
                     _ => {}
                 };
             }),
@@ -113,12 +204,12 @@ impl Workspace {
                 let ids = this.panel_ids(cx);
 
                 chat.update(cx, |this, cx| {
-                    this.refresh_rooms(ids, cx);
+                    this.refresh_rooms(&ids, cx);
                 });
             }),
         );
 
-        // Set the default layout for app's dock
+        // Set the layout at the end of cycle
         cx.defer_in(window, |this, window, cx| {
             this.set_layout(window, cx);
         });
@@ -126,6 +217,8 @@ impl Workspace {
         Self {
             titlebar,
             dock,
+            relay_connected: false,
+            inbox_connected: false,
             _subscriptions: subscriptions,
         }
     }
@@ -147,49 +240,52 @@ impl Workspace {
     }
 
     /// Get all panel ids
-    fn panel_ids(&self, cx: &App) -> Option<Vec<u64>> {
+    fn panel_ids(&self, cx: &App) -> Vec<u64> {
-        let ids: Vec<u64> = self
+        self.dock
-            .dock
             .read(cx)
             .items
             .panel_ids(cx)
             .into_iter()
             .filter_map(|panel| panel.parse::<u64>().ok())
-            .collect();
+            .collect()
+    }
 
-        Some(ids)
+    /// Set whether the relay list is connected
+    fn set_relay_connected(&mut self, connected: bool, cx: &mut Context<Self>) {
+        self.relay_connected = connected;
+        cx.notify();
+    }
+
+    /// Set whether the inbox is connected
+    fn set_inbox_connected(&mut self, connected: bool, cx: &mut Context<Self>) {
+        self.inbox_connected = connected;
+        cx.notify();
     }
 
     /// Set the dock layout
     fn set_layout(&mut self, window: &mut Window, cx: &mut Context<Self>) {
-        let weak_dock = self.dock.downgrade();
-
-        // Sidebar
         let left = DockItem::panel(Arc::new(sidebar::init(window, cx)));
 
-        // Main workspace
+        // Update the dock layout with sidebar on the left
-        let center = DockItem::split_with_sizes(
-            Axis::Vertical,
-            vec![DockItem::tabs(
-                vec![Arc::new(greeter::init(window, cx))],
-                None,
-                &weak_dock,
-                window,
-                cx,
-            )],
-            vec![None],
-            &weak_dock,
-            window,
-            cx,
-        );
-
-        // Update the dock layout
         self.dock.update(cx, |this, cx| {
             this.set_left_dock(left, Some(SIDEBAR_WIDTH), true, window, cx);
+        });
+    }
+
+    /// Set the center dock layout
+    fn set_center_layout(&mut self, window: &mut Window, cx: &mut Context<Self>) {
+        let dock = self.dock.downgrade();
+        let greeter = Arc::new(greeter::init(window, cx));
+        let tabs = DockItem::tabs(vec![greeter], None, &dock, window, cx);
+        let center = DockItem::split(Axis::Vertical, vec![tabs], &dock, window, cx);
+
+        // Update the layout with center dock
+        self.dock.update(cx, |this, cx| {
             this.set_center(center, window, cx);
         });
     }
 
+    /// Handle command events
     fn on_command(&mut self, command: &Command, window: &mut Window, cx: &mut Context<Self>) {
         match command {
             Command::ShowSettings => {
@@ -198,7 +294,7 @@ impl Workspace {
                 window.open_modal(cx, move |this, _window, _cx| {
                     this.width(px(520.))
                         .show_close(true)
-                        .pb_4()
+                        .pb_2()
                         .title("Preferences")
                         .child(view.clone())
                 });
@@ -238,21 +334,6 @@ impl Workspace {
                     );
                 });
             }
-            Command::ShowEncryption => {
-                let nostr = NostrRegistry::global(cx);
-                let signer = nostr.read(cx).signer();
-
-                if let Some(public_key) = signer.public_key() {
-                    self.dock.update(cx, |this, cx| {
-                        this.add_panel(
-                            Arc::new(encryption_key::init(public_key, window, cx)),
-                            DockPlacement::Right,
-                            window,
-                            cx,
-                        );
-                    });
-                }
-            }
             Command::ShowMessaging => {
                 self.dock.update(cx, |this, cx| {
                     this.add_panel(
@@ -263,6 +344,12 @@ impl Workspace {
                     );
                 });
             }
+            Command::RefreshMessagingRelays => {
+                let chat = ChatRegistry::global(cx);
+                chat.update(cx, |this, cx| {
+                    this.get_messages(cx);
+                });
+            }
             Command::ShowRelayList => {
                 self.dock.update(cx, |this, cx| {
                     this.add_panel(
@@ -275,21 +362,95 @@ impl Workspace {
             }
             Command::RefreshRelayList => {
                 let nostr = NostrRegistry::global(cx);
+                let signer = nostr.read(cx).signer();
+
+                if let Some(public_key) = signer.public_key() {
                     nostr.update(cx, |this, cx| {
-                    this.ensure_relay_list(cx);
+                        this.ensure_relay_list(&public_key, cx);
                     });
                 }
-            Command::RefreshMessagingRelays => {
+            }
-                let chat = ChatRegistry::global(cx);
+            Command::RefreshEncryption => {
-                chat.update(cx, |this, cx| {
+                let device = DeviceRegistry::global(cx);
-                    this.ensure_messaging_relays(cx);
+                device.update(cx, |this, cx| {
+                    this.get_announcement(cx);
                 });
             }
+            Command::ResetEncryption => {
+                self.confirm_reset_encryption(window, cx);
+            }
             Command::ToggleTheme => {
                 self.theme_selector(window, cx);
             }
+            Command::ToggleAccount => {
+                self.account_selector(window, cx);
             }
         }
+    }
+
+    fn confirm_reset_encryption(&mut self, window: &mut Window, cx: &mut Context<Self>) {
+        window.open_modal(cx, |this, _window, cx| {
+            this.confirm()
+                .show_close(true)
+                .title("Reset Encryption Keys")
+                .child(
+                    v_flex()
+                        .gap_1()
+                        .text_sm()
+                        .child(SharedString::from(ENC_MSG))
+                        .child(
+                            div()
+                                .italic()
+                                .text_color(cx.theme().warning_active)
+                                .child(SharedString::from(ENC_WARN)),
+                        ),
+                )
+                .on_ok(move |_ev, window, cx| {
+                    let device = DeviceRegistry::global(cx);
+                    let task = device.read(cx).create_encryption(cx);
+
+                    window
+                        .spawn(cx, async move |cx| {
+                            let result = task.await;
+
+                            cx.update(|window, cx| match result {
+                                Ok(keys) => {
+                                    device.update(cx, |this, cx| {
+                                        this.set_signer(keys, cx);
+                                        this.listen_request(cx);
+                                    });
+                                    window.close_modal(cx);
+                                }
+                                Err(e) => {
+                                    window.push_notification(
+                                        Notification::error(e.to_string()).autohide(false),
+                                        cx,
+                                    );
+                                }
+                            })
+                            .ok();
+                        })
+                        .detach();
+
+                    // false to keep modal open
+                    false
+                })
+        });
+    }
+
+    fn account_selector(&mut self, window: &mut Window, cx: &mut Context<Self>) {
+        let accounts = accounts::init(window, cx);
+
+        window.open_modal(cx, move |this, _window, _cx| {
+            this.width(px(520.))
+                .title("Continue with")
+                .show_close(false)
+                .keyboard(false)
+                .overlay_closable(false)
+                .pb_2()
+                .child(accounts.clone())
+        });
+    }
 
     fn theme_selector(&mut self, window: &mut Window, cx: &mut Context<Self>) {
         window.open_modal(cx, move |this, _window, cx| {
@@ -299,20 +460,22 @@ impl Workspace {
             this.width(px(520.))
                 .show_close(true)
                 .title("Select theme")
-                .pb_4()
+                .pb_2()
                 .child(v_flex().gap_2().w_full().children({
                     let mut items = vec![];
 
                     for (ix, (path, theme)) in themes.iter().enumerate() {
                         items.push(
                             h_flex()
+                                .id(ix)
                                 .group("")
                                 .px_2()
                                 .h_8()
                                 .w_full()
                                 .justify_between()
                                 .rounded(cx.theme().radius)
-                                .hover(|this| this.bg(cx.theme().elevated_surface_background))
+                                .bg(cx.theme().ghost_element_background)
+                                .hover(|this| this.bg(cx.theme().ghost_element_hover))
                                 .child(
                                     h_flex()
                                         .gap_1p5()
@@ -370,15 +533,71 @@ impl Workspace {
         });
     }
 
-    fn titlebar_left(&mut self, _window: &mut Window, cx: &Context<Self>) -> impl IntoElement {
+    fn relay_notification(&mut self, window: &mut Window, cx: &mut Context<Self>) {
+        const BODY: &str = "Coop cannot found your gossip relay list. \
+                            Maybe you haven't set it yet or relay not responsed";
+
+        let nostr = NostrRegistry::global(cx);
+        let signer = nostr.read(cx).signer();
+
+        let Some(public_key) = signer.public_key() else {
+            return;
+        };
+
+        let entity = nostr.downgrade();
+        let loading = Rc::new(Cell::new(false));
+
+        let note = Notification::new()
+            .autohide(false)
+            .id::<RelayNotifcation>()
+            .icon(IconName::Relay)
+            .title("Gossip Relays are required")
+            .message(BODY)
+            .action(move |_this, _window, _cx| {
+                let entity = entity.clone();
+                let public_key = public_key.to_owned();
+
+                Button::new("retry")
+                    .label("Retry")
+                    .small()
+                    .primary()
+                    .loading(loading.get())
+                    .disabled(loading.get())
+                    .on_click({
+                        let loading = Rc::clone(&loading);
+
+                        move |_ev, _window, cx| {
+                            // Set loading state to true
+                            loading.set(true);
+                            // Retry
+                            entity
+                                .update(cx, |this, cx| {
+                                    this.ensure_relay_list(&public_key, cx);
+                                })
+                                .ok();
+                        }
+                    })
+            });
+
+        window.push_notification(note, cx);
+    }
+
+    fn titlebar_left(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
         let nostr = NostrRegistry::global(cx);
         let signer = nostr.read(cx).signer();
         let current_user = signer.public_key();
 
         h_flex()
             .flex_shrink_0()
-            .justify_between()
             .gap_2()
+            .when_none(&current_user, |this| {
+                this.child(
+                    div()
+                        .text_xs()
+                        .text_color(cx.theme().text_muted)
+                        .child(SharedString::from("Choose an account to continue...")),
+                )
+            })
             .when_some(current_user.as_ref(), |this, public_key| {
                 let persons = PersonRegistry::global(cx);
                 let profile = persons.read(cx).get(public_key, cx);
@@ -427,6 +646,11 @@ impl Workspace {
                                     Box::new(Command::ToggleTheme),
                                 )
                                 .separator()
+                                .menu_with_icon(
+                                    "Accounts",
+                                    IconName::Group,
+                                    Box::new(Command::ToggleAccount),
+                                )
                                 .menu_with_icon(
                                     "Settings",
                                     IconName::Settings,
@@ -435,30 +659,16 @@ impl Workspace {
                         }),
                 )
             })
-            .when(nostr.read(cx).creating(), |this| {
-                this.child(div().text_xs().text_color(cx.theme().text_muted).child(
-                    SharedString::from("Coop is creating a new identity for you..."),
-                ))
-            })
-            .when(!nostr.read(cx).connected(), |this| {
-                this.child(
-                    div()
-                        .text_xs()
-                        .text_color(cx.theme().text_muted)
-                        .child(SharedString::from("Connecting...")),
-                )
-            })
     }
 
-    fn titlebar_right(&mut self, _window: &mut Window, cx: &Context<Self>) -> impl IntoElement {
+    fn titlebar_right(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let relay_connected = self.relay_connected;
+        let inbox_connected = self.inbox_connected;
+
         let nostr = NostrRegistry::global(cx);
         let signer = nostr.read(cx).signer();
-        let relay_list = nostr.read(cx).relay_list_state();
 
-        let chat = ChatRegistry::global(cx);
+        let Some(public_key) = signer.public_key() else {
-        let inbox_state = chat.read(cx).state(cx);
-
-        let Some(pkey) = signer.public_key() else {
             return div();
         };
 
@@ -471,41 +681,56 @@ impl Workspace {
                     .tooltip("Decoupled encryption key")
                     .small()
                     .ghost()
-                    .on_click(|_ev, window, cx| {
+                    .dropdown_menu(move |this, _window, cx| {
-                        window.dispatch_action(Box::new(Command::ShowEncryption), cx);
+                        let device = DeviceRegistry::global(cx);
-                    }),
+                        let state = device.read(cx).state();
-            )
+
-            .child(
+                        this.min_w(px(260.))
+                            .item(PopupMenuItem::element(move |_window, cx| {
                                 h_flex()
+                                    .px_1()
+                                    .w_full()
                                     .gap_2()
+                                    .text_sm()
                                     .child(
                                         div()
-                            .text_xs()
+                                            .size_1p5()
-                            .text_color(cx.theme().text_muted)
+                                            .rounded_full()
-                            .map(|this| match inbox_state {
+                                            .when(state.set(), |this| this.bg(gpui::green()))
-                                InboxState::Checking => this.child(div().child(
+                                            .when(state.requesting(), |this| {
-                                    SharedString::from("Fetching user's messaging relay list..."),
+                                                this.bg(cx.theme().icon_accent)
-                                )),
+                                            }),
-                                InboxState::RelayNotAvailable => {
+                                    )
-                                    this.child(div().text_color(cx.theme().warning_active).child(
+                                    .child(SharedString::from(state.to_string()))
-                                        SharedString::from(
+                            }))
-                                            "User hasn't configured a messaging relay list",
+                            .separator()
-                                        ),
+                            .menu_with_icon(
-                                    ))
+                                "Reload",
-                                }
+                                IconName::Refresh,
-                                _ => this,
+                                Box::new(Command::RefreshEncryption),
+                            )
+                            .menu_with_icon(
+                                "Reset",
+                                IconName::Warning,
+                                Box::new(Command::ResetEncryption),
+                            )
                     }),
             )
             .child(
                 Button::new("inbox")
                     .icon(IconName::Inbox)
-                            .tooltip("Inbox")
                     .small()
                     .ghost()
-                            .when(inbox_state.subscribing(), |this| this.indicator())
+                    .loading(!inbox_connected)
+                    .disabled(!inbox_connected)
+                    .when(!inbox_connected, |this| {
+                        this.tooltip("Connecting to user's messaging relays...")
+                    })
+                    .when(inbox_connected, |this| this.indicator())
                     .dropdown_menu(move |this, _window, cx| {
                         let persons = PersonRegistry::global(cx);
-                                let profile = persons.read(cx).get(&pkey, cx);
+                        let profile = persons.read(cx).get(&public_key, cx);
+
                         let urls: Vec<SharedString> = profile
                             .messaging_relays()
                             .iter()
@@ -523,9 +748,7 @@ impl Workspace {
                                     .w_full()
                                     .gap_2()
                                     .text_sm()
-                                            .child(
+                                    .child(div().size_1p5().rounded_full().bg(gpui::green()))
-                                                div().size_1p5().rounded_full().bg(gpui::green()),
-                                            )
                                     .child(url.clone())
                             }))
                         });
@@ -543,71 +766,32 @@ impl Workspace {
                                 Box::new(Command::ShowMessaging),
                             )
                     }),
-                    ),
-            )
-            .child(
-                h_flex()
-                    .gap_2()
-                    .child(
-                        div()
-                            .text_xs()
-                            .text_color(cx.theme().text_muted)
-                            .map(|this| match relay_list {
-                                RelayState::Checking => this
-                                    .child(div().child(SharedString::from(
-                                        "Fetching user's relay list...",
-                                    ))),
-                                RelayState::NotConfigured => {
-                                    this.child(div().text_color(cx.theme().warning_active).child(
-                                        SharedString::from("User hasn't configured a relay list"),
-                                    ))
-                                }
-                                _ => this,
-                            }),
             )
             .child(
                 Button::new("relay-list")
                     .icon(IconName::Relay)
-                            .tooltip("User's relay list")
                     .small()
                     .ghost()
-                            .when(relay_list.configured(), |this| this.indicator())
+                    .loading(!relay_connected)
-                            .dropdown_menu(move |this, _window, cx| {
+                    .disabled(!relay_connected)
-                                let nostr = NostrRegistry::global(cx);
+                    .when(!relay_connected, |this| {
-                                let urls = nostr.read(cx).read_only_relays(&pkey, cx);
+                        this.tooltip("Connecting to user's relay list...")
-
+                    })
-                                // Header
+                    .when(relay_connected, |this| this.indicator())
-                                let menu = this.min_w(px(260.)).label("Relays");
+                    .dropdown_menu(move |this, _window, _cx| {
-
+                        this.label("User's Relay List")
-                                // Content
+                            .separator()
-                                let menu = urls.into_iter().fold(menu, |this, url| {
-                                    this.item(PopupMenuItem::element(move |_window, _cx| {
-                                        h_flex()
-                                            .px_1()
-                                            .w_full()
-                                            .gap_2()
-                                            .text_sm()
-                                            .child(
-                                                div().size_1p5().rounded_full().bg(gpui::green()),
-                                            )
-                                            .child(url.clone())
-                                    }))
-                                });
-
-                                // Footer
-                                menu.separator()
                             .menu_with_icon(
                                 "Reload",
                                 IconName::Refresh,
                                 Box::new(Command::RefreshRelayList),
                             )
                             .menu_with_icon(
-                                        "Update relay list",
+                                "Update",
                                 IconName::Settings,
                                 Box::new(Command::ShowRelayList),
                             )
                     }),
-                    ),
             )
     }
 }

crates/device/Cargo.toml

@@ -8,6 +8,8 @@ publish.workspace = true
 common = { path = "../common" }
 state = { path = "../state" }
 person = { path = "../person" }
+ui = { path = "../ui" }
+theme = { path = "../theme" }
 
 gpui.workspace = true
 nostr-sdk.workspace = true

crates/device/src/lib.rs

@@ -1,16 +1,25 @@
+use std::cell::Cell;
 use std::collections::{HashMap, HashSet};
+use std::rc::Rc;
 use std::time::Duration;
 
-use anyhow::{anyhow, Context as AnyhowContext, Error};
+use anyhow::{Context as AnyhowContext, Error, anyhow};
-use gpui::{App, AppContext, Context, Entity, Global, Subscription, Task, Window};
+use gpui::{
+    App, AppContext, Context, Entity, EventEmitter, Global, IntoElement, ParentElement,
+    SharedString, Styled, Task, Window, div, relative,
+};
 use nostr_sdk::prelude::*;
 use person::PersonRegistry;
-use smallvec::{smallvec, SmallVec};
+use state::{Announcement, DEVICE_GIFTWRAP, DeviceState, NostrRegistry, TIMEOUT, app_name};
-use state::{
+use theme::ActiveTheme;
-    app_name, Announcement, DeviceState, NostrRegistry, RelayState, DEVICE_GIFTWRAP, TIMEOUT,
+use ui::avatar::Avatar;
-};
+use ui::button::{Button, ButtonVariants};
+use ui::notification::Notification;
+use ui::{Disableable, IconName, Sizable, WindowExtension, h_flex, v_flex};
 
 const IDENTIFIER: &str = "coop:device";
+const MSG: &str = "You've requested an encryption key from another device. \
+                   Approve to allow Coop to share with it.";
 
 pub fn init(window: &mut Window, cx: &mut App) {
     DeviceRegistry::set_global(cx.new(|cx| DeviceRegistry::new(window, cx)), cx);
@@ -20,24 +29,29 @@ struct GlobalDeviceRegistry(Entity<DeviceRegistry>);
 
 impl Global for GlobalDeviceRegistry {}
 
+/// Device event.
+#[derive(Debug, Clone, PartialEq, Eq, PartialOrd, Ord)]
+pub enum DeviceEvent {
+    /// A new encryption signer has been set
+    Set,
+    /// An error occurred
+    Error(SharedString),
+}
+
 /// Device Registry
 ///
 /// NIP-4e: https://github.com/nostr-protocol/nips/blob/per-device-keys/4e.md
 #[derive(Debug)]
 pub struct DeviceRegistry {
-    /// Request for encryption key from other devices
-    pub requests: Vec<Event>,
-
     /// Device state
     state: DeviceState,
 
     /// Async tasks
     tasks: Vec<Task<Result<(), Error>>>,
-
-    /// Subscriptions
-    _subscriptions: SmallVec<[Subscription; 1]>,
 }
 
+impl EventEmitter<DeviceEvent> for DeviceRegistry {}
+
 impl DeviceRegistry {
     /// Retrieve the global device registry state
     pub fn global(cx: &App) -> Entity<Self> {
@@ -51,32 +65,20 @@ impl DeviceRegistry {
 
     /// Create a new device registry instance
     fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
-        let nostr = NostrRegistry::global(cx);
+        let state = DeviceState::default();
-        let mut subscriptions = smallvec![];
 
-        subscriptions.push(
+        cx.defer_in(window, |this, window, cx| {
-            // Observe the NIP-65 state
+            this.handle_notifications(window, cx);
-            cx.observe(&nostr, |this, state, cx| {
-                if state.read(cx).relay_list_state() == RelayState::Configured {
             this.get_announcement(cx);
-                };
-            }),
-        );
-
-        // Run at the end of current cycle
-        cx.defer_in(window, |this, _window, cx| {
-            this.handle_notifications(cx);
         });
 
         Self {
-            requests: vec![],
+            state,
-            state: DeviceState::default(),
             tasks: vec![],
-            _subscriptions: subscriptions,
         }
     }
 
-    fn handle_notifications(&mut self, cx: &mut Context<Self>) {
+    fn handle_notifications(&mut self, window: &mut Window, cx: &mut Context<Self>) {
         let nostr = NostrRegistry::global(cx);
         let client = nostr.read(cx).client();
         let (tx, rx) = flume::bounded::<Event>(100);
@@ -115,19 +117,19 @@ impl DeviceRegistry {
             Ok(())
         }));
 
-        self.tasks.push(
+        self.tasks.push(cx.spawn_in(window, async move |this, cx| {
-            // Update GPUI states
-            cx.spawn(async move |this, cx| {
             while let Ok(event) = rx.recv_async().await {
                 match event.kind {
+                    // New request event
                     Kind::Custom(4454) => {
-                            this.update(cx, |this, cx| {
+                        this.update_in(cx, |this, window, cx| {
-                                this.add_request(event, cx);
+                            this.ask_for_approval(event, window, cx);
                         })?;
                     }
+                    // New response event
                     Kind::Custom(4455) => {
                         this.update(cx, |this, cx| {
-                                this.parse_response(event, cx);
+                            this.extract_encryption(event, cx);
                         })?;
                     }
                     _ => {}
@@ -135,8 +137,7 @@ impl DeviceRegistry {
             }
 
             Ok(())
-            }),
+        }));
-        );
     }
 
     /// Get the device state
@@ -151,7 +152,7 @@ impl DeviceRegistry {
     }
 
     /// Set the decoupled encryption key for the current user
-    fn set_signer<S>(&mut self, new: S, cx: &mut Context<Self>)
+    pub fn set_signer<S>(&mut self, new: S, cx: &mut Context<Self>)
     where
         S: NostrSigner + 'static,
     {
@@ -174,89 +175,91 @@ impl DeviceRegistry {
     /// Reset the device state
     fn reset(&mut self, cx: &mut Context<Self>) {
         self.state = DeviceState::Idle;
-        self.requests.clear();
         cx.notify();
     }
 
-    /// Add a request for device keys
-    fn add_request(&mut self, request: Event, cx: &mut Context<Self>) {
-        self.requests.push(request);
-        cx.notify();
-    }
-
-    /// Remove a request for device keys
-    pub fn remove_request(&mut self, id: &EventId, cx: &mut Context<Self>) {
-        self.requests.retain(|r| r.id != *id);
-        cx.notify();
-    }
-
-    /// Check if there are any pending requests
-    pub fn has_requests(&self) -> bool {
-        !self.requests.is_empty()
-    }
-
     /// Get all messages for encryption keys
     fn get_messages(&mut self, cx: &mut Context<Self>) {
         let task = self.subscribe_to_giftwrap_events(cx);
 
-        self.tasks.push(cx.spawn(async move |_this, _cx| {
+        self.tasks.push(cx.spawn(async move |this, cx| {
-            task.await?;
+            if let Err(e) = task.await {
-
+                this.update(cx, |_this, cx| {
-            // Update state
+                    cx.emit(DeviceEvent::Error(SharedString::from(e.to_string())));
-
+                })?;
+            }
             Ok(())
         }));
     }
 
-    /// Continuously get gift wrap events for the current user in their messaging relays
+    /// Get the messaging relays for the current user
-    fn subscribe_to_giftwrap_events(&mut self, cx: &mut Context<Self>) -> Task<Result<(), Error>> {
+    fn get_user_messaging_relays(&self, cx: &App) -> Task<Result<Vec<RelayUrl>, Error>> {
         let nostr = NostrRegistry::global(cx);
         let client = nostr.read(cx).client();
-
         let signer = nostr.read(cx).signer();
-        let public_key = signer.public_key().unwrap();
-
-        let persons = PersonRegistry::global(cx);
-        let profile = persons.read(cx).get(&public_key, cx);
-        let relay_urls = profile.messaging_relays().clone();
 
         cx.background_spawn(async move {
+            let public_key = signer.get_public_key().await?;
+            let filter = Filter::new()
+                .kind(Kind::InboxRelays)
+                .author(public_key)
+                .limit(1);
+
+            if let Some(event) = client.database().query(filter).await?.first_owned() {
+                // Extract relay URLs from the event
+                let urls: Vec<RelayUrl> = nip17::extract_owned_relay_list(event).collect();
+
+                // Ensure all relays are connected
+                for url in urls.iter() {
+                    client.add_relay(url).and_connect().await?;
+                }
+
+                Ok(urls)
+            } else {
+                Err(anyhow!("Relays not found"))
+            }
+        })
+    }
+
+    /// Continuously get gift wrap events for the current user in their messaging relays
+    fn subscribe_to_giftwrap_events(&self, cx: &App) -> Task<Result<(), Error>> {
+        let nostr = NostrRegistry::global(cx);
+        let client = nostr.read(cx).client();
+        let signer = nostr.read(cx).signer();
+        let urls = self.get_user_messaging_relays(cx);
+
+        cx.background_spawn(async move {
+            let urls = urls.await?;
+            let encryption = signer.get_encryption_signer().await.context("not found")?;
+            let public_key = encryption.get_public_key().await?;
+
             let filter = Filter::new().kind(Kind::GiftWrap).pubkey(public_key);
             let id = SubscriptionId::new(DEVICE_GIFTWRAP);
 
             // Construct target for subscription
-            let target: HashMap<RelayUrl, Filter> = relay_urls
+            let target: HashMap<RelayUrl, Filter> = urls
                 .into_iter()
                 .map(|relay| (relay, filter.clone()))
                 .collect();
 
-            let output = client.subscribe(target).with_id(id).await?;
+            // Subscribe
-
+            client.subscribe(target).with_id(id).await?;
-            log::info!(
-                "Successfully subscribed to encryption gift-wrap messages on: {:?}",
-                output.success
-            );
 
             Ok(())
         })
     }
 
     /// Get device announcement for current user
-    fn get_announcement(&mut self, cx: &mut Context<Self>) {
+    pub fn get_announcement(&mut self, cx: &mut Context<Self>) {
         let nostr = NostrRegistry::global(cx);
         let client = nostr.read(cx).client();
 
-        let signer = nostr.read(cx).signer();
-        let public_key = signer.public_key().unwrap();
-
         // Reset state before fetching announcement
         self.reset(cx);
 
-        // Get user's write relays
-        let write_relays = nostr.read(cx).write_relays(&public_key, cx);
-
         let task: Task<Result<Event, Error>> = cx.background_spawn(async move {
-            let urls = write_relays.await;
+            let signer = client.signer().context("Signer not found")?;
+            let public_key = signer.get_public_key().await?;
 
             // Construct the filter for the device announcement event
             let filter = Filter::new()
@@ -264,29 +267,19 @@ impl DeviceRegistry {
                 .author(public_key)
                 .limit(1);
 
-            // Construct target for subscription
-            let target: HashMap<&RelayUrl, Filter> =
-                urls.iter().map(|relay| (relay, filter.clone())).collect();
-
             // Stream events from user's write relays
             let mut stream = client
-                .stream_events(target)
+                .stream_events(filter)
                 .timeout(Duration::from_secs(TIMEOUT))
                 .await?;
 
             while let Some((_url, res)) = stream.next().await {
-                match res {
+                if let Ok(event) = res {
-                    Ok(event) => {
-                        log::info!("Received device announcement event: {event:?}");
                     return Ok(event);
                 }
-                    Err(e) => {
-                        log::error!("Failed to receive device announcement event: {e}");
-                    }
-                }
             }
 
-            Err(anyhow!("Device announcement not found"))
+            Err(anyhow!("Announcement not found"))
         });
 
         self.tasks.push(cx.spawn(async move |this, cx| {
@@ -307,25 +300,16 @@ impl DeviceRegistry {
         }));
     }
 
-    /// Create a new device signer and announce it
+    /// Create new encryption keys
-    fn announce(&mut self, cx: &mut Context<Self>) {
+    pub fn create_encryption(&self, cx: &App) -> Task<Result<Keys, Error>> {
         let nostr = NostrRegistry::global(cx);
         let client = nostr.read(cx).client();
 
-        // Get current user
-        let signer = nostr.read(cx).signer();
-        let public_key = signer.public_key().unwrap();
-
-        // Get user's write relays
-        let write_relays = nostr.read(cx).write_relays(&public_key, cx);
-
         let keys = Keys::generate();
         let secret = keys.secret_key().to_secret_hex();
         let n = keys.public_key();
 
-        let task: Task<Result<(), Error>> = cx.background_spawn(async move {
+        cx.background_spawn(async move {
-            let urls = write_relays.await;
-
             // Construct an announcement event
             let event = client
                 .sign_event_builder(EventBuilder::new(Kind::Custom(10044), "").tags(vec![
@@ -335,28 +319,34 @@ impl DeviceRegistry {
                 .await?;
 
             // Publish announcement
-            client.send_event(&event).to(urls).await?;
+            client.send_event(&event).to_nip65().await?;
 
             // Save device keys to the database
             set_keys(&client, &secret).await?;
 
-            Ok(())
+            Ok(keys)
-        });
+        })
+    }
+
+    /// Create a new device signer and announce it
+    fn announce(&mut self, cx: &mut Context<Self>) {
+        let task = self.create_encryption(cx);
 
         self.tasks.push(cx.spawn(async move |this, cx| {
-            if task.await.is_ok() {
+            let keys = task.await?;
+
+            // Update signer
             this.update(cx, |this, cx| {
                 this.set_signer(keys, cx);
                 this.listen_request(cx);
             })?;
-            }
 
             Ok(())
         }));
     }
 
     /// Initialize device signer (decoupled encryption key) for the current user
-    fn new_signer(&mut self, event: &Event, cx: &mut Context<Self>) {
+    pub fn new_signer(&mut self, event: &Event, cx: &mut Context<Self>) {
         let nostr = NostrRegistry::global(cx);
         let client = nostr.read(cx).client();
 
@@ -375,54 +365,46 @@ impl DeviceRegistry {
             }
         });
 
-        cx.spawn(async move |this, cx| {
+        self.tasks.push(cx.spawn(async move |this, cx| {
             match task.await {
                 Ok(keys) => {
                     this.update(cx, |this, cx| {
                         this.set_signer(keys, cx);
                         this.listen_request(cx);
-                    })
+                    })?;
-                    .ok();
                 }
                 Err(e) => {
+                    log::warn!("Failed to initialize device signer: {e}");
                     this.update(cx, |this, cx| {
                         this.request(cx);
                         this.listen_approval(cx);
-                    })
+                    })?;
-                    .ok();
-
-                    log::warn!("Failed to initialize device signer: {e}");
                 }
             };
-        })
+
-        .detach();
+            Ok(())
+        }));
     }
 
     /// Listen for device key requests on user's write relays
-    fn listen_request(&mut self, cx: &mut Context<Self>) {
+    pub fn listen_request(&mut self, cx: &mut Context<Self>) {
         let nostr = NostrRegistry::global(cx);
         let client = nostr.read(cx).client();
-
         let signer = nostr.read(cx).signer();
-        let public_key = signer.public_key().unwrap();
 
-        let write_relays = nostr.read(cx).write_relays(&public_key, cx);
+        let Some(public_key) = signer.public_key() else {
+            return;
+        };
 
         let task: Task<Result<(), Error>> = cx.background_spawn(async move {
-            let urls = write_relays.await;
-
             // Construct a filter for device key requests
             let filter = Filter::new()
                 .kind(Kind::Custom(4454))
                 .author(public_key)
                 .since(Timestamp::now());
 
-            // Construct target for subscription
-            let target: HashMap<&RelayUrl, Filter> =
-                urls.iter().map(|relay| (relay, filter.clone())).collect();
-
             // Subscribe to the device key requests on user's write relays
-            client.subscribe(target).await?;
+            client.subscribe(filter).await?;
 
             Ok(())
         });
@@ -434,27 +416,21 @@ impl DeviceRegistry {
     fn listen_approval(&mut self, cx: &mut Context<Self>) {
         let nostr = NostrRegistry::global(cx);
         let client = nostr.read(cx).client();
-
         let signer = nostr.read(cx).signer();
-        let public_key = signer.public_key().unwrap();
 
-        let write_relays = nostr.read(cx).write_relays(&public_key, cx);
+        let Some(public_key) = signer.public_key() else {
+            return;
+        };
 
         self.tasks.push(cx.background_spawn(async move {
-            let urls = write_relays.await;
-
             // Construct a filter for device key requests
             let filter = Filter::new()
                 .kind(Kind::Custom(4455))
                 .author(public_key)
                 .since(Timestamp::now());
 
-            // Construct target for subscription
-            let target: HashMap<&RelayUrl, Filter> =
-                urls.iter().map(|relay| (relay, filter.clone())).collect();
-
             // Subscribe to the device key requests on user's write relays
-            client.subscribe(target).await?;
+            client.subscribe(filter).await?;
 
             Ok(())
         }));
@@ -464,13 +440,9 @@ impl DeviceRegistry {
     fn request(&mut self, cx: &mut Context<Self>) {
         let nostr = NostrRegistry::global(cx);
         let client = nostr.read(cx).client();
-
         let signer = nostr.read(cx).signer();
-        let public_key = signer.public_key().unwrap();
 
-        let write_relays = nostr.read(cx).write_relays(&public_key, cx);
+        let app_keys = nostr.read(cx).keys();
-
-        let app_keys = nostr.read(cx).app_keys().clone();
         let app_pubkey = app_keys.public_key();
 
         let task: Task<Result<Option<Keys>, Error>> = cx.background_spawn(async move {
@@ -500,8 +472,6 @@ impl DeviceRegistry {
                     Ok(Some(keys))
                 }
                 None => {
-                    let urls = write_relays.await;
-
                     // Construct an event for device key request
                     let event = client
                         .sign_event_builder(EventBuilder::new(Kind::Custom(4454), "").tags(vec![
@@ -511,39 +481,38 @@ impl DeviceRegistry {
                         .await?;
 
                     // Send the event to write relays
-                    client.send_event(&event).to(urls).await?;
+                    client.send_event(&event).to_nip65().await?;
 
                     Ok(None)
                 }
             }
         });
 
-        cx.spawn(async move |this, cx| {
+        self.tasks.push(cx.spawn(async move |this, cx| {
             match task.await {
                 Ok(Some(keys)) => {
                     this.update(cx, |this, cx| {
                         this.set_signer(keys, cx);
-                    })
+                    })?;
-                    .ok();
                 }
                 Ok(None) => {
                     this.update(cx, |this, cx| {
                         this.set_state(DeviceState::Requesting, cx);
-                    })
+                    })?;
-                    .ok();
                 }
                 Err(e) => {
                     log::error!("Failed to request the encryption key: {e}");
                 }
             };
-        })
+
-        .detach();
+            Ok(())
+        }));
     }
 
     /// Parse the response event for device keys from other devices
-    fn parse_response(&mut self, event: Event, cx: &mut Context<Self>) {
+    fn extract_encryption(&mut self, event: Event, cx: &mut Context<Self>) {
         let nostr = NostrRegistry::global(cx);
-        let app_keys = nostr.read(cx).app_keys().clone();
+        let app_keys = nostr.read(cx).keys();
 
         let task: Task<Result<Keys, Error>> = cx.background_spawn(async move {
             let root_device = event
@@ -575,21 +544,16 @@ impl DeviceRegistry {
     }
 
     /// Approve requests for device keys from other devices
-    pub fn approve(&self, event: &Event, cx: &App) -> Task<Result<(), Error>> {
+    fn approve(&mut self, event: &Event, window: &mut Window, cx: &mut Context<Self>) {
         let nostr = NostrRegistry::global(cx);
         let client = nostr.read(cx).client();
-
-        // Get current user
         let signer = nostr.read(cx).signer();
-        let public_key = signer.public_key().unwrap();
 
         // Get user's write relays
-        let write_relays = nostr.read(cx).write_relays(&public_key, cx);
         let event = event.clone();
+        let id: SharedString = event.id.to_hex().into();
 
-        cx.background_spawn(async move {
+        let task: Task<Result<(), Error>> = cx.background_spawn(async move {
-            let urls = write_relays.await;
-
             // Get device keys
             let keys = get_keys(&client).await?;
             let secret = keys.secret_key().to_secret_hex();
@@ -609,21 +573,159 @@ impl DeviceRegistry {
             //
             // P tag: the current device's public key
             // p tag: the requester's public key
-            let event = client
+            let builder = EventBuilder::new(Kind::Custom(4455), payload).tags(vec![
-                .sign_event_builder(EventBuilder::new(Kind::Custom(4455), payload).tags(vec![
                 Tag::custom(TagKind::custom("P"), vec![keys.public_key()]),
                 Tag::public_key(target),
-                ]))
+            ]);
-                .await?;
+
+            // Sign the builder
+            let event = client.sign_event_builder(builder).await?;
 
             // Send the response event to the user's relay list
-            client.send_event(&event).to(urls).await?;
+            client.send_event(&event).to_nip65().await?;
 
             Ok(())
+        });
+
+        cx.spawn_in(window, async move |_this, cx| {
+            match task.await {
+                Ok(_) => {
+                    cx.update(|window, cx| {
+                        window.clear_notification_by_id::<DeviceNotification>(id, cx);
+                    })
+                    .ok();
+                }
+                Err(e) => {
+                    cx.update(|window, cx| {
+                        window.push_notification(
+                            Notification::error(e.to_string()).autohide(false),
+                            cx,
+                        );
+                    })
+                    .ok();
+                }
+            };
+        })
+        .detach();
+    }
+
+    /// Handle encryption request
+    fn ask_for_approval(&mut self, event: Event, window: &mut Window, cx: &mut Context<Self>) {
+        let notification = self.notification(event, cx);
+
+        cx.spawn_in(window, async move |_this, cx| {
+            cx.update(|window, cx| {
+                window.push_notification(notification, cx);
+            })
+            .ok();
+        })
+        .detach();
+    }
+
+    /// Build a notification for the encryption request.
+    fn notification(&self, event: Event, cx: &Context<Self>) -> Notification {
+        let request = Announcement::from(&event);
+        let persons = PersonRegistry::global(cx);
+        let profile = persons.read(cx).get(&request.public_key(), cx);
+
+        let entity = cx.entity().downgrade();
+        let loading = Rc::new(Cell::new(false));
+        let key = SharedString::from(event.id.to_hex());
+
+        Notification::new()
+            .type_id::<DeviceNotification>(key)
+            .autohide(false)
+            .icon(IconName::UserKey)
+            .title(SharedString::from("New request"))
+            .content(move |_this, _window, cx| {
+                v_flex()
+                    .gap_2()
+                    .text_sm()
+                    .child(
+                        div()
+                            .text_sm()
+                            .line_height(relative(1.25))
+                            .child(SharedString::from(MSG)),
+                    )
+                    .child(
+                        v_flex()
+                            .gap_2()
+                            .child(
+                                v_flex()
+                                    .gap_1()
+                                    .text_sm()
+                                    .child(
+                                        div()
+                                            .text_xs()
+                                            .text_color(cx.theme().text_muted)
+                                            .child(SharedString::from("Requester:")),
+                                    )
+                                    .child(
+                                        div()
+                                            .h_7()
+                                            .w_full()
+                                            .px_2()
+                                            .rounded(cx.theme().radius)
+                                            .bg(cx.theme().elevated_surface_background)
+                                            .child(
+                                                h_flex()
+                                                    .gap_2()
+                                                    .child(Avatar::new(profile.avatar()).xsmall())
+                                                    .child(profile.name()),
+                                            ),
+                                    ),
+                            )
+                            .child(
+                                v_flex()
+                                    .gap_1()
+                                    .text_sm()
+                                    .child(
+                                        div()
+                                            .text_xs()
+                                            .text_color(cx.theme().text_muted)
+                                            .child(SharedString::from("Client:")),
+                                    )
+                                    .child(
+                                        div()
+                                            .h_7()
+                                            .w_full()
+                                            .px_2()
+                                            .rounded(cx.theme().radius)
+                                            .bg(cx.theme().elevated_surface_background)
+                                            .child(request.client_name()),
+                                    ),
+                            ),
+                    )
+                    .into_any_element()
+            })
+            .action(move |_this, _window, _cx| {
+                let view = entity.clone();
+                let event = event.clone();
+
+                Button::new("approve")
+                    .label("Approve")
+                    .small()
+                    .primary()
+                    .loading(loading.get())
+                    .disabled(loading.get())
+                    .on_click({
+                        let loading = Rc::clone(&loading);
+                        move |_ev, window, cx| {
+                            // Set loading state to true
+                            loading.set(true);
+                            // Process to approve the request
+                            view.update(cx, |this, cx| {
+                                this.approve(&event, window, cx);
+                            })
+                            .ok();
+                        }
+                    })
             })
     }
 }
 
+struct DeviceNotification;
+
 /// Verify the author of an event
 async fn verify_author(client: &Client, event: &Event) -> bool {
     if let Some(signer) = client.signer() {

crates/person/Cargo.toml

@@ -15,3 +15,4 @@ smallvec.workspace = true
 smol.workspace = true
 flume.workspace = true
 log.workspace = true
+urlencoding = "2.1.3"

crates/person/src/lib.rs

@@ -3,19 +3,19 @@ use std::collections::{HashMap, HashSet};
 use std::rc::Rc;
 use std::time::Duration;
 
-use anyhow::{anyhow, Error};
+use anyhow::{Error, anyhow};
 use common::EventUtils;
-use gpui::{App, AppContext, Context, Entity, Global, Task};
+use gpui::{App, AppContext, Context, Entity, Global, Task, Window};
 use nostr_sdk::prelude::*;
-use smallvec::{smallvec, SmallVec};
+use smallvec::{SmallVec, smallvec};
-use state::{Announcement, NostrRegistry, BOOTSTRAP_RELAYS, TIMEOUT};
+use state::{Announcement, BOOTSTRAP_RELAYS, NostrRegistry, TIMEOUT};
 
 mod person;
 
 pub use person::*;
 
-pub fn init(cx: &mut App) {
+pub fn init(window: &mut Window, cx: &mut App) {
-    PersonRegistry::set_global(cx.new(PersonRegistry::new), cx);
+    PersonRegistry::set_global(cx.new(|cx| PersonRegistry::new(window, cx)), cx);
 }
 
 struct GlobalPersonRegistry(Entity<PersonRegistry>);
@@ -36,13 +36,13 @@ pub struct PersonRegistry {
     persons: HashMap<PublicKey, Entity<Person>>,
 
     /// Set of public keys that have been seen
-    seen: Rc<RefCell<HashSet<PublicKey>>>,
+    seens: Rc<RefCell<HashSet<PublicKey>>>,
 
     /// Sender for requesting metadata
     sender: flume::Sender<PublicKey>,
 
     /// Tasks for asynchronous operations
-    _tasks: SmallVec<[Task<()>; 4]>,
+    tasks: SmallVec<[Task<()>; 4]>,
 }
 
 impl PersonRegistry {
@@ -57,13 +57,13 @@ impl PersonRegistry {
     }
 
     /// Create a new person registry instance
-    fn new(cx: &mut Context<Self>) -> Self {
+    fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
         let nostr = NostrRegistry::global(cx);
         let client = nostr.read(cx).client();
 
         // Channel for communication between nostr and gpui
         let (tx, rx) = flume::bounded::<Dispatch>(100);
-        let (mta_tx, mta_rx) = flume::bounded::<PublicKey>(100);
+        let (mta_tx, mta_rx) = flume::unbounded::<PublicKey>();
 
         let mut tasks = smallvec![];
 
@@ -111,33 +111,16 @@ impl PersonRegistry {
             }),
         );
 
-        tasks.push(
         // Load all user profiles from the database
-            cx.spawn(async move |this, cx| {
+        cx.defer_in(window, |this, _window, cx| {
-                let result = cx
+            this.load(cx);
-                    .background_executor()
+        });
-                    .await_on_background(async move { load_persons(&client).await })
-                    .await;
-
-                match result {
-                    Ok(persons) => {
-                        this.update(cx, |this, cx| {
-                            this.bulk_inserts(persons, cx);
-                        })
-                        .ok();
-                    }
-                    Err(e) => {
-                        log::error!("Failed to load all persons from the database: {e}");
-                    }
-                };
-            }),
-        );
 
         Self {
             persons: HashMap::new(),
-            seen: Rc::new(RefCell::new(HashSet::new())),
+            seens: Rc::new(RefCell::new(HashSet::new())),
             sender: mta_tx,
-            _tasks: tasks,
+            tasks,
         }
     }
 
@@ -163,25 +146,21 @@ impl PersonRegistry {
                         let metadata = Metadata::from_json(&event.content).unwrap_or_default();
                         let person = Person::new(event.pubkey, metadata);
                         let val = Box::new(person);
-
                         // Send
                         tx.send_async(Dispatch::Person(val)).await.ok();
                     }
                     Kind::ContactList => {
                         let public_keys = event.extract_public_keys();
-
                         // Get metadata for all public keys
                         get_metadata(client, public_keys).await.ok();
                     }
                     Kind::InboxRelays => {
                         let val = Box::new(event.into_owned());
-
                         // Send
                         tx.send_async(Dispatch::Relays(val)).await.ok();
                     }
                     Kind::Custom(10044) => {
                         let val = Box::new(event.into_owned());
-
                         // Send
                         tx.send_async(Dispatch::Announcement(val)).await.ok();
                     }
@@ -198,7 +177,7 @@ impl PersonRegistry {
         loop {
             match flume::Selector::new()
                 .recv(rx, |result| result.ok())
-                .wait_timeout(Duration::from_secs(2))
+                .wait_timeout(Duration::from_secs(TIMEOUT))
             {
                 Ok(Some(public_key)) => {
                     batch.insert(public_key);
@@ -208,40 +187,81 @@ impl PersonRegistry {
                     }
                 }
                 _ => {
+                    if !batch.is_empty() {
                         get_metadata(client, std::mem::take(&mut batch)).await.ok();
                     }
                 }
             }
         }
+    }
+
+    /// Load all user profiles from the database
+    fn load(&mut self, cx: &mut Context<Self>) {
+        let nostr = NostrRegistry::global(cx);
+        let client = nostr.read(cx).client();
+
+        let task: Task<Result<Vec<Person>, Error>> = cx.background_spawn(async move {
+            let filter = Filter::new().kind(Kind::Metadata).limit(200);
+            let events = client.database().query(filter).await?;
+            let persons = events
+                .into_iter()
+                .map(|event| {
+                    let metadata = Metadata::from_json(event.content).unwrap_or_default();
+                    Person::new(event.pubkey, metadata)
+                })
+                .collect();
+
+            Ok(persons)
+        });
+
+        self.tasks.push(cx.spawn(async move |this, cx| {
+            if let Ok(persons) = task.await {
+                this.update(cx, |this, cx| {
+                    this.bulk_inserts(persons, cx);
+                })
+                .ok();
+            }
+        }));
+    }
 
     /// Set profile encryption keys announcement
     fn set_announcement(&mut self, event: &Event, cx: &mut App) {
-        if let Some(person) = self.persons.get(&event.pubkey) {
         let announcement = Announcement::from(event);
 
+        if let Some(person) = self.persons.get(&event.pubkey) {
             person.update(cx, |person, cx| {
                 person.set_announcement(announcement);
                 cx.notify();
             });
+        } else {
+            let person =
+                Person::new(event.pubkey, Metadata::default()).with_announcement(announcement);
+            self.insert(person, cx);
         }
     }
 
     /// Set messaging relays for a person
     fn set_messaging_relays(&mut self, event: &Event, cx: &mut App) {
-        if let Some(person) = self.persons.get(&event.pubkey) {
         let urls: Vec<RelayUrl> = nip17::extract_relay_list(event).cloned().collect();
 
+        if let Some(person) = self.persons.get(&event.pubkey) {
             person.update(cx, |person, cx| {
                 person.set_messaging_relays(urls);
                 cx.notify();
             });
+        } else {
+            let person = Person::new(event.pubkey, Metadata::default()).with_messaging_relays(urls);
+            self.insert(person, cx);
         }
     }
 
     /// Insert batch of persons
     fn bulk_inserts(&mut self, persons: Vec<Person>, cx: &mut Context<Self>) {
         for person in persons.into_iter() {
-            self.persons.insert(person.public_key(), cx.new(|_| person));
+            let public_key = person.public_key();
+            self.persons
+                .entry(public_key)
+                .or_insert_with(|| cx.new(|_| person));
         }
         cx.notify();
     }
@@ -270,7 +290,7 @@ impl PersonRegistry {
         }
 
         let public_key = *public_key;
-        let mut seen = self.seen.borrow_mut();
+        let mut seen = self.seens.borrow_mut();
 
         if seen.insert(public_key) {
             let sender = self.sender.clone();
@@ -322,19 +342,3 @@ where
 
     Ok(())
 }
-
-/// Load all user profiles from the database
-async fn load_persons(client: &Client) -> Result<Vec<Person>, Error> {
-    let filter = Filter::new().kind(Kind::Metadata).limit(200);
-    let events = client.database().query(filter).await?;
-
-    let mut persons = vec![];
-
-    for event in events.into_iter() {
-        let metadata = Metadata::from_json(event.content).unwrap_or_default();
-        let person = Person::new(event.pubkey, metadata);
-        persons.push(person);
-    }
-
-    Ok(persons)
-}

crates/person/src/person.rs

@@ -65,6 +65,21 @@ impl Person {
         }
     }
 
+    /// Build profile encryption keys announcement
+    pub fn with_announcement(mut self, announcement: Announcement) -> Self {
+        self.announcement = Some(announcement);
+        self
+    }
+
+    /// Build profile messaging relays
+    pub fn with_messaging_relays<I>(mut self, relays: I) -> Self
+    where
+        I: IntoIterator<Item = RelayUrl>,
+    {
+        self.messaging_relays = relays.into_iter().collect();
+        self
+    }
+
     /// Get profile public key
     pub fn public_key(&self) -> PublicKey {
         self.public_key
@@ -75,21 +90,11 @@ impl Person {
         self.metadata.clone()
     }
 
-    /// Set profile metadata
-    pub fn set_metadata(&mut self, metadata: Metadata) {
-        self.metadata = metadata;
-    }
-
     /// Get profile encryption keys announcement
     pub fn announcement(&self) -> Option<Announcement> {
         self.announcement.clone()
     }
 
-    /// Set profile encryption keys announcement
-    pub fn set_announcement(&mut self, announcement: Announcement) {
-        self.announcement = Some(announcement);
-    }
-
     /// Get profile messaging relays
     pub fn messaging_relays(&self) -> &Vec<RelayUrl> {
         &self.messaging_relays
@@ -100,14 +105,6 @@ impl Person {
         self.messaging_relays.first().cloned()
     }
 
-    /// Set profile messaging relays
-    pub fn set_messaging_relays<I>(&mut self, relays: I)
-    where
-        I: IntoIterator<Item = RelayUrl>,
-    {
-        self.messaging_relays = relays.into_iter().collect();
-    }
-
     /// Get profile avatar
     pub fn avatar(&self) -> SharedString {
         self.metadata()
@@ -115,8 +112,9 @@ impl Person {
             .as_ref()
             .filter(|picture| !picture.is_empty())
             .map(|picture| {
+                let encoded_picture = urlencoding::encode(picture);
                 let url = format!(
-                    "{IMAGE_RESIZER}/?url={picture}&w=100&h=100&fit=cover&mask=circle&n=-1"
+                    "{IMAGE_RESIZER}/?url={encoded_picture}&w=100&h=100&fit=cover&mask=circle&n=-1"
                 );
                 url.into()
             })
@@ -139,6 +137,24 @@ impl Person {
 
         SharedString::from(shorten_pubkey(self.public_key(), 4))
     }
+
+    /// Set profile metadata
+    pub fn set_metadata(&mut self, metadata: Metadata) {
+        self.metadata = metadata;
+    }
+
+    /// Set profile encryption keys announcement
+    pub fn set_announcement(&mut self, announcement: Announcement) {
+        self.announcement = Some(announcement);
+    }
+
+    /// Set profile messaging relays
+    pub fn set_messaging_relays<I>(&mut self, relays: I)
+    where
+        I: IntoIterator<Item = RelayUrl>,
+    {
+        self.messaging_relays = relays.into_iter().collect();
+    }
 }
 
 /// Shorten a [`PublicKey`] to a string with the first and last `len` characters
@@ -148,7 +164,7 @@ pub fn shorten_pubkey(public_key: PublicKey, len: usize) -> String {
     let Ok(pubkey) = public_key.to_bech32();
 
     format!(
-        "{}:{}",
+        "{}...{}",
         &pubkey[0..(len + 1)],
         &pubkey[pubkey.len() - len..]
     )

crates/relay_auth/src/lib.rs

@@ -5,19 +5,19 @@ use std::hash::Hash;
 use std::rc::Rc;
 use std::sync::Arc;
 
-use anyhow::{anyhow, Context as AnyhowContext, Error};
+use anyhow::{Context as AnyhowContext, Error, anyhow};
 use gpui::{
     App, AppContext, Context, Entity, Global, IntoElement, ParentElement, SharedString, Styled,
-    Task, Window,
+    Task, Window, div, relative,
 };
 use nostr_sdk::prelude::*;
 use settings::{AppSettings, AuthMode};
-use smallvec::{smallvec, SmallVec};
+use smallvec::{SmallVec, smallvec};
 use state::NostrRegistry;
 use theme::ActiveTheme;
 use ui::button::{Button, ButtonVariants};
 use ui::notification::Notification;
-use ui::{v_flex, Disableable, IconName, Sizable, WindowExtension};
+use ui::{Disableable, IconName, Sizable, WindowExtension, v_flex};
 
 const AUTH_MESSAGE: &str =
     "Approve the authentication request to allow Coop to continue sending or receiving events.";
@@ -34,7 +34,10 @@ struct AuthRequest {
 }
 
 impl AuthRequest {
-    pub fn new(challenge: impl Into<String>, url: RelayUrl) -> Self {
+    pub fn new<S>(challenge: S, url: RelayUrl) -> Self
+    where
+        S: Into<String>,
+    {
         Self {
             challenge: challenge.into(),
             url,
@@ -106,22 +109,6 @@ impl RelayAuth {
                                 tx.send_async(signal).await.ok();
                             }
                         }
-                        RelayMessage::Closed {
-                            subscription_id,
-                            message,
-                        } => {
-                            let msg = MachineReadablePrefix::parse(&message);
-
-                            if let Some(MachineReadablePrefix::AuthRequired) = msg {
-                                if let Ok(Some(relay)) = client.relay(&relay_url).await {
-                                    // Send close message to relay
-                                    relay
-                                        .send_msg(ClientMessage::Close(subscription_id))
-                                        .await
-                                        .ok();
-                                }
-                            }
-                        }
                         RelayMessage::Ok {
                             event_id, message, ..
                         } => {
@@ -273,7 +260,7 @@ impl RelayAuth {
     fn response(&self, req: &Arc<AuthRequest>, window: &Window, cx: &Context<Self>) {
         let settings = AppSettings::global(cx);
         let req = req.clone();
-        let challenge = req.challenge().to_string();
+        let challenge = SharedString::from(req.challenge().to_string());
 
         // Create a task for authentication
         let task = self.auth(&req, cx);
@@ -283,7 +270,7 @@ impl RelayAuth {
             let url = req.url();
 
             this.update_in(cx, |this, window, cx| {
-                window.clear_notification(challenge, cx);
+                window.clear_notification_by_id::<AuthNotification>(challenge, cx);
 
                 match result {
                     Ok(_) => {
@@ -295,10 +282,19 @@ impl RelayAuth {
                             this.add_trusted_relay(url, cx);
                         });
 
-                        window.push_notification(format!("{} has been authenticated", url), cx);
+                        window.push_notification(
+                            Notification::success(format!(
+                                "Relay {} has been authenticated",
+                                url.domain().unwrap_or_default()
+                            )),
+                            cx,
+                        );
                     }
                     Err(e) => {
-                        window.push_notification(Notification::error(e.to_string()), cx);
+                        window.push_notification(
+                            Notification::error(e.to_string()).autohide(false),
+                            cx,
+                        );
                     }
                 }
             })
@@ -323,33 +319,38 @@ impl RelayAuth {
     /// Build a notification for the authentication request.
     fn notification(&self, req: &Arc<AuthRequest>, cx: &Context<Self>) -> Notification {
         let req = req.clone();
+        let challenge = SharedString::from(req.challenge.clone());
         let url = SharedString::from(req.url().to_string());
         let entity = cx.entity().downgrade();
         let loading = Rc::new(Cell::new(false));
 
         Notification::new()
-            .custom_id(SharedString::from(&req.challenge))
+            .type_id::<AuthNotification>(challenge)
             .autohide(false)
-            .icon(IconName::Info)
+            .icon(IconName::Warning)
             .title(SharedString::from("Authentication Required"))
-            .content(move |_window, cx| {
+            .content(move |_this, _window, cx| {
                 v_flex()
                     .gap_2()
+                    .child(
+                        div()
                             .text_sm()
-                    .child(SharedString::from(AUTH_MESSAGE))
+                            .line_height(relative(1.25))
+                            .child(SharedString::from(AUTH_MESSAGE)),
+                    )
                     .child(
                         v_flex()
                             .py_1()
                             .px_1p5()
                             .rounded_sm()
                             .text_xs()
-                            .bg(cx.theme().warning_background)
+                            .bg(cx.theme().elevated_surface_background)
-                            .text_color(cx.theme().warning_foreground)
+                            .text_color(cx.theme().text_accent)
                             .child(url.clone()),
                     )
                     .into_any_element()
             })
-            .action(move |_window, _cx| {
+            .action(move |_this, _window, _cx| {
                 let view = entity.clone();
                 let req = req.clone();
 
@@ -361,11 +362,9 @@ impl RelayAuth {
                     .disabled(loading.get())
                     .on_click({
                         let loading = Rc::clone(&loading);
-
                         move |_ev, window, cx| {
                             // Set loading state to true
                             loading.set(true);
-
                             // Process to approve the request
                             view.update(cx, |this, cx| {
                                 this.response(&req, window, cx);
@@ -376,3 +375,5 @@ impl RelayAuth {
             })
     }
 }
+
+struct AuthNotification;

crates/settings/src/lib.rs

@@ -2,12 +2,12 @@ use std::collections::{HashMap, HashSet};
 use std::fmt::Display;
 use std::rc::Rc;
 
-use anyhow::{anyhow, Error};
+use anyhow::{Error, anyhow};
 use common::config_dir;
 use gpui::{App, AppContext, Context, Entity, Global, Subscription, Task, Window};
 use nostr_sdk::prelude::*;
 use serde::{Deserialize, Serialize};
-use smallvec::{smallvec, SmallVec};
+use smallvec::{SmallVec, smallvec};
 use theme::{Theme, ThemeFamily, ThemeMode};
 
 pub fn init(window: &mut Window, cx: &mut App) {
@@ -291,6 +291,8 @@ impl AppSettings {
     /// Reset theme
     pub fn reset_theme(&mut self, window: &mut Window, cx: &mut Context<Self>) {
         self.values.theme = None;
+        cx.notify();
+
         self.apply_theme(window, cx);
     }
 

crates/state/Cargo.toml

@@ -10,6 +10,8 @@ common = { path = "../common" }
 nostr.workspace = true
 nostr-sdk.workspace = true
 nostr-lmdb.workspace = true
+nostr-memory.workspace = true
+nostr-gossip-sqlite.workspace = true
 nostr-connect.workspace = true
 nostr-blossom.workspace = true
 

crates/state/src/constants.rs

@@ -21,18 +21,18 @@ pub const FIND_DELAY: u64 = 600;
 /// Default limit for searching
 pub const FIND_LIMIT: usize = 20;
 
-/// Default timeout for Nostr Connect
-pub const NOSTR_CONNECT_TIMEOUT: u64 = 200;
-
-/// Default Nostr Connect relay
-pub const NOSTR_CONNECT_RELAY: &str = "wss://relay.nsec.app";
-
 /// Default subscription id for device gift wrap events
 pub const DEVICE_GIFTWRAP: &str = "device-gift-wraps";
 
 /// Default subscription id for user gift wrap events
 pub const USER_GIFTWRAP: &str = "user-gift-wraps";
 
+/// Default timeout for Nostr Connect
+pub const NOSTR_CONNECT_TIMEOUT: u64 = 60;
+
+/// Default Nostr Connect relay
+pub const NOSTR_CONNECT_RELAY: &str = "wss://relay.nip46.com";
+
 /// Default vertex relays
 pub const WOT_RELAYS: [&str; 1] = ["wss://relay.vertexlab.io"];
 
@@ -41,9 +41,9 @@ pub const SEARCH_RELAYS: [&str; 2] = ["wss://antiprimal.net", "wss://search.nos.
 
 /// Default bootstrap relays
 pub const BOOTSTRAP_RELAYS: [&str; 4] = [
-    "wss://nos.lol",
     "wss://relay.damus.io",
     "wss://relay.primal.net",
+    "wss://indexer.coracle.social",
     "wss://user.kindpag.es",
 ];
 

crates/state/src/device.rs

@@ -1,3 +1,5 @@
+use std::fmt::Display;
+
 use gpui::SharedString;
 use nostr_sdk::prelude::*;
 
@@ -9,6 +11,16 @@ pub enum DeviceState {
     Set,
 }
 
+impl Display for DeviceState {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            DeviceState::Idle => write!(f, "Idle"),
+            DeviceState::Requesting => write!(f, "Wait for approval"),
+            DeviceState::Set => write!(f, "Encryption Key is ready"),
+        }
+    }
+}
+
 impl DeviceState {
     pub fn idle(&self) -> bool {
         matches!(self, DeviceState::Idle)

crates/state/src/gossip.rs

@@ -1,83 +0,0 @@
-use std::collections::{HashMap, HashSet};
-
-use gpui::SharedString;
-use nostr_sdk::prelude::*;
-
-/// Gossip
-#[derive(Debug, Clone, Default)]
-pub struct Gossip {
-    relays: HashMap<PublicKey, HashSet<(RelayUrl, Option<RelayMetadata>)>>,
-}
-
-impl Gossip {
-    pub fn read_only_relays(&self, public_key: &PublicKey) -> Vec<SharedString> {
-        self.relays
-            .get(public_key)
-            .map(|relays| {
-                relays
-                    .iter()
-                    .map(|(url, _)| url.to_string().into())
-                    .collect()
-            })
-            .unwrap_or_default()
-    }
-
-    /// Get read relays for a given public key
-    pub fn read_relays(&self, public_key: &PublicKey) -> Vec<RelayUrl> {
-        self.relays
-            .get(public_key)
-            .map(|relays| {
-                relays
-                    .iter()
-                    .filter_map(|(url, metadata)| {
-                        if metadata.is_none() || metadata == &Some(RelayMetadata::Read) {
-                            Some(url.to_owned())
-                        } else {
-                            None
-                        }
-                    })
-                    .collect()
-            })
-            .unwrap_or_default()
-    }
-
-    /// Get write relays for a given public key
-    pub fn write_relays(&self, public_key: &PublicKey) -> Vec<RelayUrl> {
-        self.relays
-            .get(public_key)
-            .map(|relays| {
-                relays
-                    .iter()
-                    .filter_map(|(url, metadata)| {
-                        if metadata.is_none() || metadata == &Some(RelayMetadata::Write) {
-                            Some(url.to_owned())
-                        } else {
-                            None
-                        }
-                    })
-                    .collect()
-            })
-            .unwrap_or_default()
-    }
-
-    /// Insert gossip relays for a public key
-    pub fn insert_relays(&mut self, event: &Event) {
-        self.relays.entry(event.pubkey).or_default().extend(
-            event
-                .tags
-                .iter()
-                .filter_map(|tag| {
-                    if let Some(TagStandard::RelayMetadata {
-                        relay_url,
-                        metadata,
-                    }) = tag.clone().to_standardized()
-                    {
-                        Some((relay_url, metadata))
-                    } else {
-                        None
-                    }
-                })
-                .take(3),
-        );
-    }
-}

crates/state/src/signer.rs

@@ -1,6 +1,5 @@
 use std::borrow::Cow;
 use std::result::Result;
-use std::sync::atomic::{AtomicBool, Ordering};
 use std::sync::Arc;
 
 use nostr_sdk::prelude::*;
@@ -16,11 +15,6 @@ pub struct CoopSigner {
 
     /// Specific signer for encryption purposes
     encryption_signer: RwLock<Option<Arc<dyn NostrSigner>>>,
-
-    /// By default, Coop generates a new signer for new users.
-    ///
-    /// This flag indicates whether the signer is user-owned or Coop-generated.
-    owned: AtomicBool,
 }
 
 impl CoopSigner {
@@ -32,7 +26,6 @@ impl CoopSigner {
             signer: RwLock::new(signer.into_nostr_signer()),
             signer_pkey: RwLock::new(None),
             encryption_signer: RwLock::new(None),
-            owned: AtomicBool::new(false),
         }
     }
 
@@ -47,17 +40,15 @@ impl CoopSigner {
     }
 
     /// Get public key
+    ///
+    /// Ensure to call this method after the signer has been initialized.
+    /// Otherwise, this method will panic.
     pub fn public_key(&self) -> Option<PublicKey> {
-        self.signer_pkey.read_blocking().to_owned()
+        *self.signer_pkey.read_blocking()
-    }
-
-    /// Get the flag indicating whether the signer is user-owned.
-    pub fn owned(&self) -> bool {
-        self.owned.load(Ordering::SeqCst)
     }
 
     /// Switch the current signer to a new signer.
-    pub async fn switch<T>(&self, new: T, owned: bool)
+    pub async fn switch<T>(&self, new: T)
     where
         T: IntoNostrSigner,
     {
@@ -75,9 +66,6 @@ impl CoopSigner {
 
         // Reset the encryption signer
         *encryption_signer = None;
-
-        // Update the owned flag
-        self.owned.store(owned, Ordering::SeqCst);
     }
 
     /// Set the encryption signer.

crates/theme/src/colors.rs

@@ -1,4 +1,4 @@
-use gpui::{hsla, Hsla, Rgba};
+use gpui::{Hsla, Rgba, hsla};
 use schemars::JsonSchema;
 use serde::{Deserialize, Serialize};
 
@@ -30,6 +30,8 @@ pub struct ThemeColors {
     pub text_muted: Hsla,
     pub text_placeholder: Hsla,
     pub text_accent: Hsla,
+    pub text_danger: Hsla,
+    pub text_warning: Hsla,
 
     // Icon colors
     pub icon: Hsla,
@@ -77,11 +79,11 @@ pub struct ThemeColors {
     pub ghost_element_disabled: Hsla,
 
     // Tab colors
-    pub tab_inactive_background: Hsla,
+    pub tab_background: Hsla,
-    pub tab_inactive_foreground: Hsla,
+    pub tab_foreground: Hsla,
+    pub tab_hover_background: Hsla,
     pub tab_active_background: Hsla,
     pub tab_active_foreground: Hsla,
-    pub tab_hover_foreground: Hsla,
 
     // Scrollbar colors
     pub scrollbar_thumb_background: Hsla,
@@ -110,8 +112,8 @@ impl ThemeColors {
             elevated_surface_background: neutral().light().step_3(),
             panel_background: neutral().light().step_1(),
             overlay: neutral().light_alpha().step_3(),
-            title_bar: neutral().light().step_2(),
+            title_bar: neutral().light().step_3(),
-            title_bar_inactive: neutral().light().step_3(),
+            title_bar_inactive: neutral().light().step_1(),
             window_border: hsl(240.0, 5.9, 78.0),
 
             border: neutral().light().step_6(),
@@ -125,7 +127,9 @@ impl ThemeColors {
             text: neutral().light().step_12(),
             text_muted: neutral().light().step_11(),
             text_placeholder: neutral().light().step_10(),
-            text_accent: brand().light().step_11(),
+            text_accent: brand().light().step_9(),
+            text_danger: danger().light().step_9(),
+            text_warning: warning().light().step_9(),
 
             icon: neutral().light().step_11(),
             icon_muted: neutral().light().step_10(),
@@ -166,17 +170,17 @@ impl ThemeColors {
             ghost_element_selected: neutral().light().step_5(),
             ghost_element_disabled: neutral().light_alpha().step_2(),
 
-            tab_inactive_background: neutral().light().step_2(),
+            tab_background: neutral().light().step_3(),
-            tab_inactive_foreground: neutral().light().step_11(),
+            tab_foreground: neutral().light().step_11(),
+            tab_hover_background: neutral().light_alpha().step_4(),
             tab_active_background: neutral().light().step_1(),
             tab_active_foreground: neutral().light().step_12(),
-            tab_hover_foreground: brand().light().step_9(),
 
             scrollbar_thumb_background: neutral().light_alpha().step_3(),
             scrollbar_thumb_hover_background: neutral().light_alpha().step_4(),
             scrollbar_thumb_border: gpui::transparent_black(),
             scrollbar_track_background: gpui::transparent_black(),
-            scrollbar_track_border: neutral().light().step_5(),
+            scrollbar_track_border: gpui::transparent_black(),
 
             drop_target_background: brand().light_alpha().step_2(),
             cursor: hsl(200., 100., 50.),
@@ -192,9 +196,9 @@ impl ThemeColors {
             background: neutral().dark().step_1(),
             surface_background: neutral().dark().step_2(),
             elevated_surface_background: neutral().dark().step_3(),
-            panel_background: gpui::black(),
+            panel_background: neutral().dark().step_1(),
             overlay: neutral().dark_alpha().step_3(),
-            title_bar: gpui::transparent_black(),
+            title_bar: neutral().dark().step_3(),
             title_bar_inactive: neutral().dark().step_1(),
             window_border: hsl(240.0, 3.7, 28.0),
 
@@ -209,7 +213,9 @@ impl ThemeColors {
             text: neutral().dark().step_12(),
             text_muted: neutral().dark().step_11(),
             text_placeholder: neutral().dark().step_10(),
-            text_accent: brand().dark().step_11(),
+            text_accent: brand().dark().step_9(),
+            text_danger: danger().dark().step_9(),
+            text_warning: warning().dark().step_9(),
 
             icon: neutral().dark().step_11(),
             icon_muted: neutral().dark().step_10(),
@@ -250,17 +256,17 @@ impl ThemeColors {
             ghost_element_selected: neutral().dark().step_5(),
             ghost_element_disabled: neutral().dark_alpha().step_2(),
 
-            tab_inactive_background: neutral().dark().step_2(),
+            tab_background: neutral().dark().step_3(),
-            tab_inactive_foreground: neutral().dark().step_11(),
+            tab_foreground: neutral().dark().step_11(),
-            tab_active_background: neutral().dark().step_3(),
+            tab_hover_background: neutral().dark_alpha().step_4(),
+            tab_active_background: neutral().dark().step_1(),
             tab_active_foreground: neutral().dark().step_12(),
-            tab_hover_foreground: brand().dark().step_9(),
 
             scrollbar_thumb_background: neutral().dark_alpha().step_3(),
             scrollbar_thumb_hover_background: neutral().dark_alpha().step_4(),
             scrollbar_thumb_border: gpui::transparent_black(),
             scrollbar_track_background: gpui::transparent_black(),
-            scrollbar_track_border: neutral().dark().step_5(),
+            scrollbar_track_border: gpui::transparent_black(),
 
             drop_target_background: brand().dark_alpha().step_2(),
             cursor: hsl(200., 100., 50.),

crates/theme/src/geometry.rs

@@ -138,7 +138,7 @@ impl Anchor {
         }
     }
 
-    pub(crate) fn other_side_corner_along(&self, axis: Axis) -> Anchor {
+    pub fn other_side_corner_along(&self, axis: Axis) -> Anchor {
         match axis {
             Axis::Vertical => match self {
                 Self::TopLeft => Self::BottomLeft,

crates/theme/src/lib.rs

@@ -1,9 +1,11 @@
 use std::ops::{Deref, DerefMut};
 use std::rc::Rc;
 
-use gpui::{px, App, Global, Pixels, SharedString, Window};
+use gpui::{App, Global, Pixels, SharedString, Window, px};
 
 mod colors;
+mod geometry;
+mod notification;
 mod platform_kind;
 mod registry;
 mod scale;
@@ -11,6 +13,8 @@ mod scrollbar_mode;
 mod theme;
 
 pub use colors::*;
+pub use geometry::*;
+pub use notification::*;
 pub use platform_kind::PlatformKind;
 pub use registry::*;
 pub use scale::*;
@@ -82,6 +86,9 @@ pub struct Theme {
     /// Show the scrollbar mode, default: scrolling
     pub scrollbar_mode: ScrollbarMode,
 
+    /// Notification settings
+    pub notification: NotificationSettings,
+
     /// Platform kind
     pub platform: PlatformKind,
 }
@@ -200,10 +207,11 @@ impl From<ThemeFamily> for Theme {
         Theme {
             font_size: px(15.),
             font_family: font_family.into(),
-            radius: px(5.),
+            radius: px(6.),
             radius_lg: px(10.),
             shadow: true,
             scrollbar_mode: ScrollbarMode::default(),
+            notification: NotificationSettings::default(),
             mode,
             colors: *colors,
             theme: Rc::new(family),

crates/theme/src/notification.rs

@@ -0,0 +1,31 @@
+use gpui::{Pixels, px};
+use serde::{Deserialize, Serialize};
+
+use crate::{Anchor, Edges, TITLEBAR_HEIGHT};
+
+/// The settings for notifications.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct NotificationSettings {
+    /// The placement of the notification, default: [`Anchor::TopRight`]
+    pub placement: Anchor,
+    /// The margins of the notification with respect to the window edges.
+    pub margins: Edges<Pixels>,
+    /// The maximum number of notifications to show at once, default: 10
+    pub max_items: usize,
+}
+
+impl Default for NotificationSettings {
+    fn default() -> Self {
+        let offset = px(16.);
+        Self {
+            placement: Anchor::TopRight,
+            margins: Edges {
+                top: TITLEBAR_HEIGHT + offset, // avoid overlap with title bar
+                right: offset,
+                bottom: offset,
+                left: offset,
+            },
+            max_items: 10,
+        }
+    }
+}

crates/title_bar/src/lib.rs

@@ -1,14 +1,12 @@
-use gpui::prelude::FluentBuilder;
 #[cfg(target_os = "linux")]
 use gpui::MouseButton;
-#[cfg(not(target_os = "windows"))]
+use gpui::prelude::FluentBuilder;
-use gpui::Pixels;
 use gpui::{
-    px, AnyElement, Context, Decorations, Hsla, InteractiveElement as _, IntoElement,
+    AnyElement, Context, Decorations, Hsla, InteractiveElement as _, IntoElement, ParentElement,
-    ParentElement, Render, StatefulInteractiveElement as _, Styled, Window, WindowControlArea,
+    Pixels, Render, StatefulInteractiveElement as _, Styled, Window, WindowControlArea, px,
 };
-use smallvec::{smallvec, SmallVec};
+use smallvec::{SmallVec, smallvec};
-use theme::{ActiveTheme, PlatformKind, CLIENT_SIDE_DECORATION_ROUNDING};
+use theme::{ActiveTheme, CLIENT_SIDE_DECORATION_ROUNDING, PlatformKind};
 use ui::h_flex;
 
 #[cfg(target_os = "linux")]

crates/ui/src/anchored.rs

@@ -1,13 +1,12 @@
 //! This is a fork of gpui's anchored element that adds support for offsetting
 //! https://github.com/zed-industries/zed/blob/b06f4088a3565c5e30663106ff79c1ced645d87a/crates/gpui/src/elements/anchored.rs
 use gpui::{
-    point, px, AnyElement, App, Axis, Bounds, Display, Edges, Element, GlobalElementId, Half,
+    AnyElement, App, Axis, Bounds, Display, Edges, Element, GlobalElementId, Half,
     InspectorElementId, IntoElement, LayoutId, ParentElement, Pixels, Point, Position, Size, Style,
-    Window,
+    Window, point, px,
 };
 use smallvec::SmallVec;
-
+use theme::Anchor;
-use crate::Anchor;
 
 /// The state that the anchored element element uses to track its children.
 pub struct AnchoredState {

crates/ui/src/avatar.rs

@@ -1,12 +1,12 @@
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    div, img, px, AbsoluteLength, App, Div, Hsla, ImageSource, Img, InteractiveElement,
+    AbsoluteLength, App, Div, Hsla, ImageSource, Img, InteractiveElement, Interactivity,
-    Interactivity, IntoElement, ParentElement, RenderOnce, StyleRefinement, Styled, StyledImage,
+    IntoElement, ParentElement, RenderOnce, StyleRefinement, Styled, StyledImage, Window, div, img,
-    Window,
+    px,
 };
 use theme::ActiveTheme;
 
-use crate::{Sizable, Size};
+use crate::{Selectable, Sizable, Size};
 
 /// Returns the size of the avatar based on the given [`Size`].
 pub(super) fn avatar_size(size: Size) -> AbsoluteLength {
@@ -37,6 +37,7 @@ pub struct Avatar {
     style: StyleRefinement,
     size: Size,
     border_color: Option<Hsla>,
+    selected: bool,
 }
 
 impl Avatar {
@@ -48,6 +49,7 @@ impl Avatar {
             style: StyleRefinement::default(),
             size: Size::Medium,
             border_color: None,
+            selected: false,
         }
     }
 
@@ -89,6 +91,17 @@ impl Styled for Avatar {
     }
 }
 
+impl Selectable for Avatar {
+    fn is_selected(&self) -> bool {
+        self.selected
+    }
+
+    fn selected(mut self, selected: bool) -> Self {
+        self.selected = selected;
+        self
+    }
+}
+
 impl InteractiveElement for Avatar {
     fn interactivity(&mut self) -> &mut Interactivity {
         self.base.interactivity()

crates/ui/src/dock/dock.rs

@@ -3,20 +3,26 @@ use std::sync::Arc;
 
 use gpui::prelude::FluentBuilder as _;
 use gpui::{
-    div, px, App, AppContext, Axis, Context, Element, Entity, IntoElement, MouseMoveEvent,
+    App, AppContext, Axis, Context, Element, Empty, Entity, IntoElement, MouseMoveEvent,
-    MouseUpEvent, ParentElement as _, Pixels, Point, Render, Style, Styled as _, WeakEntity,
+    MouseUpEvent, ParentElement as _, Pixels, Point, Render, Style, StyleRefinement, Styled as _,
-    Window,
+    WeakEntity, Window, div, px,
 };
 
 use super::{DockArea, DockItem};
-use crate::dock_area::panel::PanelView;
-use crate::dock_area::tab_panel::TabPanel;
-use crate::resizable::{resize_handle, PANEL_MIN_SIZE};
 use crate::StyledExt;
+use crate::dock::panel::PanelView;
+use crate::dock::tab_panel::TabPanel;
+use crate::resizable::{PANEL_MIN_SIZE, resize_handle};
 
-#[derive(Clone, Render)]
+#[derive(Clone)]
 struct ResizePanel;
 
+impl Render for ResizePanel {
+    fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
+        Empty
+    }
+}
+
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum DockPlacement {
     Center,
@@ -321,6 +327,8 @@ impl Render for Dock {
             return div();
         }
 
+        let cache_style = StyleRefinement::default().absolute().size_full();
+
         div()
             .relative()
             .overflow_hidden()
@@ -336,7 +344,7 @@ impl Render for Dock {
             .map(|this| match &self.panel {
                 DockItem::Split { view, .. } => this.child(view.clone()),
                 DockItem::Tabs { view, .. } => this.child(view.clone()),
-                DockItem::Panel { view, .. } => this.child(view.clone().view()),
+                DockItem::Panel { view, .. } => this.child(view.clone().view().cached(cache_style)),
             })
             .child(self.render_resize_handle(window, cx))
             .child(DockElement {

crates/ui/src/dock/mod.rs

@@ -2,21 +2,24 @@ use std::sync::Arc;
 
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    actions, div, px, AnyElement, AnyView, App, AppContext, Axis, Bounds, Context, Edges, Entity,
+    AnyElement, AnyView, App, AppContext, Axis, Bounds, Context, Decorations, Edges, Entity,
     EntityId, EventEmitter, Focusable, InteractiveElement as _, IntoElement, ParentElement as _,
-    Pixels, Render, SharedString, Styled, Subscription, WeakEntity, Window,
+    Pixels, Render, SharedString, Styled, Subscription, WeakEntity, Window, actions, div, px,
 };
+use theme::CLIENT_SIDE_DECORATION_ROUNDING;
 
-use crate::dock_area::dock::{Dock, DockPlacement};
-use crate::dock_area::panel::{Panel, PanelEvent, PanelStyle, PanelView};
-use crate::dock_area::stack_panel::StackPanel;
-use crate::dock_area::tab_panel::TabPanel;
 use crate::ElementExt;
 
-pub mod dock;
+#[allow(clippy::module_inception)]
-pub mod panel;
+mod dock;
-pub mod stack_panel;
+mod panel;
-pub mod tab_panel;
+mod stack_panel;
+mod tab_panel;
+
+pub use dock::*;
+pub use panel::*;
+pub use stack_panel::*;
+pub use tab_panel::*;
 
 actions!(dock, [ToggleZoom, ClosePanel]);
 
@@ -202,19 +205,16 @@ impl DockItem {
     /// Returns all panel ids
     pub fn panel_ids(&self, cx: &App) -> Vec<SharedString> {
         match self {
-            Self::Tabs { view, .. } => view.read(cx).panel_ids(cx),
-            Self::Split { items, .. } => {
-                let mut total = vec![];
-
-                for item in items.iter() {
-                    if let DockItem::Tabs { view, .. } = item {
-                        total.extend(view.read(cx).panel_ids(cx));
-                    }
-                }
-
-                total
-            }
             Self::Panel { .. } => vec![],
+            Self::Tabs { view, .. } => view.read(cx).panel_ids(cx),
+            Self::Split { items, .. } => items
+                .iter()
+                .filter_map(|item| match item {
+                    DockItem::Tabs { view, .. } => Some(view.read(cx).panel_ids(cx)),
+                    _ => None,
+                })
+                .flatten()
+                .collect(),
         }
     }
 
@@ -745,6 +745,7 @@ impl EventEmitter<DockEvent> for DockArea {}
 impl Render for DockArea {
     fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
         let view = cx.entity().clone();
+        let decorations = window.window_decorations();
 
         div()
             .id("dock-area")
@@ -754,7 +755,17 @@ impl Render for DockArea {
             .on_prepaint(move |bounds, _, cx| view.update(cx, |r, _| r.bounds = bounds))
             .map(|this| {
                 if let Some(zoom_view) = self.zoom_view.clone() {
-                    this.child(zoom_view)
+                    this.map(|this| match decorations {
+                        Decorations::Server => this,
+                        Decorations::Client { tiling } => this
+                            .when(!(tiling.top || tiling.right), |div| {
+                                div.rounded_br(CLIENT_SIDE_DECORATION_ROUNDING)
+                            })
+                            .when(!(tiling.top || tiling.left), |div| {
+                                div.rounded_bl(CLIENT_SIDE_DECORATION_ROUNDING)
+                            }),
+                    })
+                    .child(zoom_view)
                 } else {
                     // render dock
                     this.child(

crates/ui/src/dock/panel.rs

@@ -1,5 +1,5 @@
 use gpui::{
-    AnyElement, AnyView, App, Element, Entity, EventEmitter, FocusHandle, Focusable, Hsla, Render,
+    AnyElement, AnyView, App, Element, Entity, EventEmitter, FocusHandle, Focusable, Render,
     SharedString, Window,
 };
 
@@ -21,12 +21,6 @@ pub enum PanelStyle {
     TabBar,
 }
 
-#[derive(Debug, Clone, Copy, PartialEq, Eq)]
-pub struct TitleStyle {
-    pub background: Hsla,
-    pub foreground: Hsla,
-}
-
 pub trait Panel: EventEmitter<PanelEvent> + Render + Focusable {
     /// The name of the panel used to serialize, deserialize and identify the panel.
     ///

crates/ui/src/dock/stack_panel.rs

@@ -7,16 +7,16 @@ use gpui::{
     Window,
 };
 use smallvec::SmallVec;
-use theme::{ActiveTheme, CLIENT_SIDE_DECORATION_ROUNDING};
+use theme::{ActiveTheme, AxisExt as _, CLIENT_SIDE_DECORATION_ROUNDING, Placement};
 
 use super::{DockArea, PanelEvent};
-use crate::dock_area::panel::{Panel, PanelView};
+use crate::dock::panel::{Panel, PanelView};
-use crate::dock_area::tab_panel::TabPanel;
+use crate::dock::tab_panel::TabPanel;
+use crate::h_flex;
 use crate::resizable::{
-    resizable_panel, ResizablePanelEvent, ResizablePanelGroup, ResizablePanelState, ResizableState,
+    PANEL_MIN_SIZE, ResizablePanelEvent, ResizablePanelGroup, ResizablePanelState, ResizableState,
-    PANEL_MIN_SIZE,
+    resizable_panel,
 };
-use crate::{h_flex, AxisExt as _, Placement};
 
 pub struct StackPanel {
     pub(super) parent: Option<WeakEntity<StackPanel>>,

crates/ui/src/dock/tab_panel.rs

@@ -2,22 +2,22 @@ use std::sync::Arc;
 
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    div, px, rems, App, AppContext, Context, Corner, DefiniteLength, DismissEvent, DragMoveEvent,
+    App, AppContext, Context, Corner, DefiniteLength, DismissEvent, DragMoveEvent, Empty, Entity,
-    Empty, Entity, EventEmitter, FocusHandle, Focusable, InteractiveElement as _, IntoElement,
+    EventEmitter, FocusHandle, Focusable, InteractiveElement as _, IntoElement, MouseButton,
-    MouseButton, ParentElement, Pixels, Render, ScrollHandle, SharedString,
+    ParentElement, Pixels, Render, ScrollHandle, SharedString, StatefulInteractiveElement, Styled,
-    StatefulInteractiveElement, Styled, WeakEntity, Window,
+    WeakEntity, Window, div, px, rems,
 };
-use theme::{ActiveTheme, CLIENT_SIDE_DECORATION_ROUNDING, TABBAR_HEIGHT};
+use theme::{ActiveTheme, AxisExt, CLIENT_SIDE_DECORATION_ROUNDING, Placement, TABBAR_HEIGHT};
 
 use crate::button::{Button, ButtonVariants as _};
-use crate::dock_area::dock::DockPlacement;
+use crate::dock::dock::DockPlacement;
-use crate::dock_area::panel::{Panel, PanelView};
+use crate::dock::panel::{Panel, PanelView};
-use crate::dock_area::stack_panel::StackPanel;
+use crate::dock::stack_panel::StackPanel;
-use crate::dock_area::{ClosePanel, DockArea, PanelEvent, PanelStyle, ToggleZoom};
+use crate::dock::{ClosePanel, DockArea, PanelEvent, PanelStyle, ToggleZoom};
 use crate::menu::{DropdownMenu, PopupMenu};
-use crate::tab::tab_bar::TabBar;
 use crate::tab::Tab;
-use crate::{h_flex, v_flex, AxisExt, IconName, Placement, Selectable, Sizable, StyledExt};
+use crate::tab::tab_bar::TabBar;
+use crate::{IconName, Selectable, Sizable, StyledExt, h_flex, v_flex};
 
 #[derive(Clone)]
 struct TabState {
@@ -42,22 +42,20 @@ impl DragPanel {
 
 impl Render for DragPanel {
     fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
-        div()
+        h_flex()
             .id("drag-panel")
             .cursor_grab()
-            .py_1()
+            .p_2()
-            .px_2()
+            .min_w_24()
-            .w_24()
-            .flex()
-            .items_center()
             .justify_center()
             .overflow_hidden()
             .whitespace_nowrap()
-            .rounded(cx.theme().radius_lg)
+            .rounded(cx.theme().radius)
             .text_xs()
-            .when(cx.theme().shadow, |this| this.shadow_lg())
+            .text_color(cx.theme().text)
+            .text_ellipsis()
+            .when(cx.theme().shadow, |this| this.shadow_xs())
             .bg(cx.theme().background)
-            .text_color(cx.theme().text_accent)
             .child(self.panel.title(cx))
     }
 }
@@ -425,14 +423,13 @@ impl TabPanel {
         let view = cx.entity().clone();
         let build_popup_menu = move |this, cx: &App| view.read(cx).popup_menu(this, cx);
         let toolbar = self.toolbar_buttons(window, cx);
-        let has_toolbar = !toolbar.is_empty();
 
         h_flex()
             .p_0p5()
-            .gap_1()
+            .gap_1p5()
             .occlude()
             .rounded_full()
-            .children(toolbar.into_iter().map(|btn| btn.small().ghost().rounded()))
+            .children(toolbar.into_iter().map(|btn| btn.small().ghost()))
             .when(self.zoomed, |this| {
                 this.child(
                     Button::new("zoom")
@@ -445,15 +442,11 @@ impl TabPanel {
                         })),
                 )
             })
-            .when(has_toolbar, |this| {
-                this.child(div().flex_shrink_0().h_4().w_px().bg(cx.theme().border))
-            })
             .child(
                 Button::new("menu")
                     .icon(IconName::Ellipsis)
                     .small()
                     .ghost()
-                    .rounded()
                     .dropdown_menu({
                         let zoomable = state.zoomable;
                         let closable = state.closable;
@@ -578,6 +571,7 @@ impl TabPanel {
         let right_dock_button = self.render_dock_toggle_button(DockPlacement::Right, window, cx);
         let has_extend_dock_button = left_dock_button.is_some() || bottom_dock_button.is_some();
         let tabs_count = self.panels.len();
+        let is_bottom_dock = bottom_dock_button.is_some();
 
         if tabs_count == 1 && dock_area.read(cx).panel_style == PanelStyle::Default {
             let panel = self.panels.first().unwrap();
@@ -646,7 +640,7 @@ impl TabPanel {
                 .into_any_element();
         }
 
-        TabBar::new()
+        TabBar::new("tab-bar")
             .track_scroll(&self.tab_bar_scroll_handle)
             .h(TABBAR_HEIGHT)
             .when(has_extend_dock_button, |this| {
@@ -659,8 +653,9 @@ impl TabPanel {
                         .border_b_1()
                         .h_full()
                         .border_color(cx.theme().border)
-                        .bg(cx.theme().surface_background)
+                        .bg(cx.theme().tab_background)
-                        .px_2()
+                        .pl_0p5()
+                        .pr_1()
                         .children(left_dock_button)
                         .children(bottom_dock_button),
                 )
@@ -682,16 +677,43 @@ impl TabPanel {
                 Some(
                     Tab::new()
                         .ix(ix)
-                        .label(panel.title(cx))
+                        .tab_bar_prefix(has_extend_dock_button)
-                        .py_2()
+                        .child(panel.title(cx))
                         .selected(active)
                         .disabled(disabled)
+                        .suffix(
+                            Button::new("close-{ix}")
+                                .icon(IconName::Close)
+                                .tooltip("Close panel")
+                                .ghost()
+                                .xsmall()
+                                .on_click(cx.listener({
+                                    let panel = panel.clone();
+                                    move |view, _ev, window, cx| {
+                                        view.remove_panel(&panel, window, cx);
+                                    }
+                                })),
+                        )
+                        .on_click(cx.listener({
+                            let is_collapsed = self.collapsed;
+                            let dock_area = self.dock_area.clone();
+                            move |view, _, window, cx| {
+                                view.set_active_ix(ix, window, cx);
+
+                                // Open dock if clicked on the collapsed bottom dock
+                                if is_bottom_dock && is_collapsed {
+                                    _ = dock_area.update(cx, |dock_area, cx| {
+                                        dock_area.toggle_dock(DockPlacement::Bottom, window, cx);
+                                    });
+                                }
+                            }
+                        }))
                         .when(!disabled, |this| {
                             this.on_mouse_down(
                                 MouseButton::Middle,
                                 cx.listener({
                                     let panel = panel.clone();
-                                    move |view, _, window, cx| {
+                                    move |view, _ev, window, cx| {
                                         view.remove_panel(&panel, window, cx);
                                     }
                                 }),
@@ -757,14 +779,15 @@ impl TabPanel {
                 this.suffix(
                     h_flex()
                         .items_center()
-                        .px_2()
-                        .gap_1()
                         .top_0()
                         .right_0()
                         .h_full()
-                        .border_color(cx.theme().border)
                         .border_l_1()
                         .border_b_1()
+                        .px_0p5()
+                        .gap_1()
+                        .border_color(cx.theme().border)
+                        .bg(cx.theme().tab_background)
                         .child(self.render_toolbar(state, window, cx))
                         .when_some(right_dock_button, |this, btn| this.child(btn)),
                 )
@@ -1080,10 +1103,12 @@ impl TabPanel {
         window: &mut Window,
         cx: &mut Context<Self>,
     ) {
+        if self.panels.len() > 1 {
             if let Some(panel) = self.active_panel(cx) {
                 self.remove_panel(&panel, window, cx);
             }
         }
+    }
 }
 
 impl Focusable for TabPanel {
@@ -1097,6 +1122,7 @@ impl Focusable for TabPanel {
 }
 
 impl EventEmitter<DismissEvent> for TabPanel {}
+
 impl EventEmitter<PanelEvent> for TabPanel {}
 
 impl Render for TabPanel {

crates/ui/src/icon.rs

@@ -1,7 +1,7 @@
 use gpui::prelude::FluentBuilder as _;
 use gpui::{
-    svg, AnyElement, App, AppContext, Context, Entity, Hsla, IntoElement, Radians, Render,
+    AnyElement, App, AppContext, Context, Entity, Hsla, IntoElement, Radians, Render, RenderOnce,
-    RenderOnce, SharedString, StyleRefinement, Styled, Svg, Transformation, Window,
+    SharedString, StyleRefinement, Styled, Svg, Transformation, Window, svg,
 };
 use theme::ActiveTheme;
 
@@ -34,10 +34,12 @@ pub enum IconName {
     CloseCircle,
     CloseCircleFill,
     Copy,
+    Device,
     Door,
     Ellipsis,
     Emoji,
     Eye,
+    Input,
     Info,
     Invite,
     Inbox,
@@ -52,12 +54,14 @@ pub enum IconName {
     Relay,
     Reply,
     Refresh,
+    Scan,
     Search,
     Settings,
     Settings2,
     Sun,
     Ship,
     Shield,
+    Group,
     UserKey,
     Upload,
     Usb,
@@ -102,10 +106,12 @@ impl IconNamed for IconName {
             Self::CloseCircle => "icons/close-circle.svg",
             Self::CloseCircleFill => "icons/close-circle-fill.svg",
             Self::Copy => "icons/copy.svg",
+            Self::Device => "icons/device.svg",
             Self::Door => "icons/door.svg",
             Self::Ellipsis => "icons/ellipsis.svg",
             Self::Emoji => "icons/emoji.svg",
             Self::Eye => "icons/eye.svg",
+            Self::Input => "icons/input.svg",
             Self::Info => "icons/info.svg",
             Self::Invite => "icons/invite.svg",
             Self::Inbox => "icons/inbox.svg",
@@ -120,6 +126,7 @@ impl IconNamed for IconName {
             Self::Relay => "icons/relay.svg",
             Self::Reply => "icons/reply.svg",
             Self::Refresh => "icons/refresh.svg",
+            Self::Scan => "icons/scan.svg",
             Self::Search => "icons/search.svg",
             Self::Settings => "icons/settings.svg",
             Self::Settings2 => "icons/settings2.svg",
@@ -129,6 +136,7 @@ impl IconNamed for IconName {
             Self::UserKey => "icons/user-key.svg",
             Self::Upload => "icons/upload.svg",
             Self::Usb => "icons/usb.svg",
+            Self::Group => "icons/group.svg",
             Self::PanelLeft => "icons/panel-left.svg",
             Self::PanelLeftOpen => "icons/panel-left-open.svg",
             Self::PanelRight => "icons/panel-right.svg",

crates/ui/src/lib.rs

@@ -2,11 +2,10 @@ pub use anchored::*;
 pub use element_ext::ElementExt;
 pub use event::InteractiveElementExt;
 pub use focusable::FocusableCycle;
-pub use geometry::*;
 pub use icon::*;
 pub use index_path::IndexPath;
 pub use kbd::*;
-pub use root::{window_paddings, Root};
+pub use root::{Root, window_paddings};
 pub use styled::*;
 pub use window_ext::*;
 
@@ -18,7 +17,7 @@ pub mod avatar;
 pub mod button;
 pub mod checkbox;
 pub mod divider;
-pub mod dock_area;
+pub mod dock;
 pub mod group_box;
 pub mod history;
 pub mod indicator;
@@ -39,7 +38,6 @@ mod anchored;
 mod element_ext;
 mod event;
 mod focusable;
-mod geometry;
 mod icon;
 mod index_path;
 mod kbd;

crates/ui/src/menu/dropdown_menu.rs

@@ -5,10 +5,11 @@ use gpui::{
     RenderOnce, SharedString, StyleRefinement, Styled, Window,
 };
 
+use crate::Selectable;
+use crate::avatar::Avatar;
 use crate::button::Button;
 use crate::menu::PopupMenu;
 use crate::popover::Popover;
-use crate::Selectable;
 
 /// A dropdown menu trait for buttons and other interactive elements
 pub trait DropdownMenu: Styled + Selectable + InteractiveElement + IntoElement + 'static {
@@ -35,6 +36,8 @@ pub trait DropdownMenu: Styled + Selectable + InteractiveElement + IntoElement +
 
 impl DropdownMenu for Button {}
 
+impl DropdownMenu for Avatar {}
+
 #[derive(IntoElement)]
 pub struct DropdownMenuPopover<T: Selectable + IntoElement + 'static> {
     id: ElementId,

crates/ui/src/menu/popup_menu.rs

@@ -2,19 +2,19 @@ use std::rc::Rc;
 
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    anchored, div, px, rems, Action, AnyElement, App, AppContext, Axis, Bounds, ClickEvent,
+    Action, AnyElement, App, AppContext, Axis, Bounds, ClickEvent, Context, Corner, DismissEvent,
-    Context, Corner, DismissEvent, Edges, Entity, EventEmitter, FocusHandle, Focusable, Half,
+    Edges, Entity, EventEmitter, FocusHandle, Focusable, Half, InteractiveElement, IntoElement,
-    InteractiveElement, IntoElement, KeyBinding, MouseDownEvent, OwnedMenuItem, ParentElement,
+    KeyBinding, MouseDownEvent, OwnedMenuItem, ParentElement, Pixels, Point, Render, ScrollHandle,
-    Pixels, Point, Render, ScrollHandle, SharedString, StatefulInteractiveElement, Styled,
+    SharedString, StatefulInteractiveElement, Styled, Subscription, WeakEntity, Window, anchored,
-    Subscription, WeakEntity, Window,
+    div, px, rems,
 };
-use theme::ActiveTheme;
+use theme::{ActiveTheme, Side};
 
 use crate::actions::{Cancel, Confirm, SelectDown, SelectLeft, SelectRight, SelectUp};
 use crate::kbd::Kbd;
 use crate::menu::menu_item::MenuItemElement;
 use crate::scroll::ScrollableElement;
-use crate::{h_flex, v_flex, ElementExt, Icon, IconName, Side, Sizable as _, Size, StyledExt};
+use crate::{ElementExt, Icon, IconName, Sizable as _, Size, StyledExt, h_flex, v_flex};
 
 const CONTEXT: &str = "PopupMenu";
 

crates/ui/src/modal.rs

@@ -3,10 +3,9 @@ use std::time::Duration;
 
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    anchored, div, hsla, point, px, Animation, AnimationExt as _, AnyElement, App, Bounds,
+    Animation, AnimationExt as _, AnyElement, App, Bounds, BoxShadow, ClickEvent, Div, FocusHandle,
-    BoxShadow, ClickEvent, Div, FocusHandle, InteractiveElement, IntoElement, KeyBinding,
+    InteractiveElement, IntoElement, KeyBinding, MouseButton, ParentElement, Pixels, Point,
-    MouseButton, ParentElement, Pixels, Point, RenderOnce, SharedString, StyleRefinement, Styled,
+    RenderOnce, SharedString, StyleRefinement, Styled, Window, anchored, div, hsla, point, px,
-    Window,
 };
 use theme::ActiveTheme;
 
@@ -14,7 +13,7 @@ use crate::actions::{Cancel, Confirm};
 use crate::animation::cubic_bezier;
 use crate::button::{Button, ButtonCustomVariant, ButtonVariant, ButtonVariants as _};
 use crate::scroll::ScrollableElement;
-use crate::{h_flex, v_flex, IconName, Root, Sizable, StyledExt, WindowExtension};
+use crate::{IconName, Root, Sizable, StyledExt, WindowExtension, h_flex, v_flex};
 
 const CONTEXT: &str = "Modal";
 
@@ -343,7 +342,7 @@ impl RenderOnce for Modal {
         });
 
         let window_paddings = crate::root::window_paddings(window, cx);
-        let radius = (cx.theme().radius_lg * 2.).min(px(20.));
+        let radius = cx.theme().radius_lg;
 
         let view_size = window.viewport_size()
             - gpui::size(
@@ -360,8 +359,8 @@ impl RenderOnce for Modal {
         let y = self.margin_top.unwrap_or(view_size.height / 10.) + offset_top;
         let x = bounds.center().x - self.width / 2.;
 
-        let mut padding_right = px(16.);
+        let mut padding_right = px(8.);
-        let mut padding_left = px(16.);
+        let mut padding_left = px(8.);
 
         if let Some(pl) = self.style.padding.left {
             padding_left = pl.to_pixels(self.width.into(), window.rem_size());
@@ -500,6 +499,7 @@ impl RenderOnce for Modal {
                                             .child(self.content),
                                     ),
                             )
+                            .when_none(&self.footer, |this| this.child(div().pt(padding_left)))
                             .when_some(self.footer, |this, footer| {
                                 this.child(
                                     h_flex()

crates/ui/src/notification.rs

@@ -1,25 +1,23 @@
 use std::any::TypeId;
-use std::borrow::Cow;
 use std::collections::{HashMap, VecDeque};
 use std::rc::Rc;
 use std::time::Duration;
 
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    div, px, Animation, AnimationExt, AnyElement, App, AppContext, ClickEvent, Context,
+    Animation, AnimationExt, AnyElement, App, AppContext, ClickEvent, Context, DismissEvent,
-    DismissEvent, ElementId, Entity, EventEmitter, InteractiveElement as _, IntoElement,
+    ElementId, Entity, EventEmitter, InteractiveElement as _, IntoElement, ParentElement as _,
-    ParentElement as _, Render, SharedString, StatefulInteractiveElement, StyleRefinement, Styled,
+    Render, SharedString, StatefulInteractiveElement, StyleRefinement, Styled, Subscription,
-    Subscription, Window,
+    Window, div, px, relative,
 };
-use smol::Timer;
+use theme::{ActiveTheme, Anchor};
-use theme::ActiveTheme;
 
 use crate::animation::cubic_bezier;
 use crate::button::{Button, ButtonVariants as _};
-use crate::{h_flex, v_flex, Icon, IconName, Sizable as _, StyledExt};
+use crate::{Icon, IconName, Sizable as _, StyledExt, h_flex, v_flex};
 
 #[derive(Debug, Clone, Copy, Default)]
-pub enum NotificationType {
+pub enum NotificationKind {
     #[default]
     Info,
     Success,
@@ -27,13 +25,15 @@ pub enum NotificationType {
     Error,
 }
 
-impl NotificationType {
+impl NotificationKind {
     fn icon(&self, cx: &App) -> Icon {
         match self {
-            Self::Info => Icon::new(IconName::Info).text_color(cx.theme().element_foreground),
+            Self::Info => Icon::new(IconName::Info).text_color(cx.theme().icon),
-            Self::Success => Icon::new(IconName::Info).text_color(cx.theme().secondary_foreground),
+            Self::Success => Icon::new(IconName::CheckCircle).text_color(cx.theme().icon_accent),
-            Self::Warning => Icon::new(IconName::Warning).text_color(cx.theme().warning_foreground),
+            Self::Warning => Icon::new(IconName::Warning).text_color(cx.theme().text_warning),
-            Self::Error => Icon::new(IconName::Warning).text_color(cx.theme().danger_foreground),
+            Self::Error => {
+                Icon::new(IconName::CloseCircle).text_color(cx.theme().danger_foreground)
+            }
         }
     }
 }
@@ -56,6 +56,7 @@ impl From<(TypeId, ElementId)> for NotificationId {
     }
 }
 
+#[allow(clippy::type_complexity)]
 /// A notification element.
 pub struct Notification {
     /// The id is used make the notification unique.
@@ -64,16 +65,13 @@ pub struct Notification {
     /// None means the notification will be added to the end of the list.
     id: NotificationId,
     style: StyleRefinement,
-    type_: Option<NotificationType>,
+    kind: Option<NotificationKind>,
     title: Option<SharedString>,
     message: Option<SharedString>,
     icon: Option<Icon>,
     autohide: bool,
-    #[allow(clippy::type_complexity)]
+    action_builder: Option<Rc<dyn Fn(&mut Self, &mut Window, &mut Context<Self>) -> Button>>,
-    action_builder: Option<Rc<dyn Fn(&mut Window, &mut Context<Self>) -> Button>>,
+    content_builder: Option<Rc<dyn Fn(&mut Self, &mut Window, &mut Context<Self>) -> AnyElement>>,
-    #[allow(clippy::type_complexity)]
-    content_builder: Option<Rc<dyn Fn(&mut Window, &mut Context<Self>) -> AnyElement>>,
-    #[allow(clippy::type_complexity)]
     on_click: Option<Rc<dyn Fn(&ClickEvent, &mut Window, &mut App)>>,
     closing: bool,
 }
@@ -84,12 +82,6 @@ impl From<String> for Notification {
     }
 }
 
-impl From<Cow<'static, str>> for Notification {
-    fn from(s: Cow<'static, str>) -> Self {
-        Self::new().message(s)
-    }
-}
-
 impl From<SharedString> for Notification {
     fn from(s: SharedString) -> Self {
         Self::new().message(s)
@@ -102,24 +94,24 @@ impl From<&'static str> for Notification {
     }
 }
 
-impl From<(NotificationType, &'static str)> for Notification {
+impl From<(NotificationKind, &'static str)> for Notification {
-    fn from((type_, content): (NotificationType, &'static str)) -> Self {
+    fn from((kind, content): (NotificationKind, &'static str)) -> Self {
-        Self::new().message(content).with_type(type_)
+        Self::new().message(content).with_kind(kind)
     }
 }
 
-impl From<(NotificationType, SharedString)> for Notification {
+impl From<(NotificationKind, SharedString)> for Notification {
-    fn from((type_, content): (NotificationType, SharedString)) -> Self {
+    fn from((kind, content): (NotificationKind, SharedString)) -> Self {
-        Self::new().message(content).with_type(type_)
+        Self::new().message(content).with_kind(kind)
     }
 }
 
 struct DefaultIdType;
 
 impl Notification {
-    /// Create a new notification with the given content.
+    /// Create a new notification.
     ///
-    /// default width is 320px.
+    /// The default id is a random UUID.
     pub fn new() -> Self {
         let id: SharedString = uuid::Uuid::new_v4().to_string().into();
         let id = (TypeId::of::<DefaultIdType>(), id.into());
@@ -129,7 +121,7 @@ impl Notification {
             style: StyleRefinement::default(),
             title: None,
             message: None,
-            type_: None,
+            kind: None,
             icon: None,
             autohide: true,
             action_builder: None,
@@ -139,33 +131,38 @@ impl Notification {
         }
     }
 
+    /// Set the message of the notification, default is None.
     pub fn message(mut self, message: impl Into<SharedString>) -> Self {
         self.message = Some(message.into());
         self
     }
 
+    /// Create an info notification with the given message.
     pub fn info(message: impl Into<SharedString>) -> Self {
         Self::new()
             .message(message)
-            .with_type(NotificationType::Info)
+            .with_kind(NotificationKind::Info)
     }
 
+    /// Create a success notification with the given message.
     pub fn success(message: impl Into<SharedString>) -> Self {
         Self::new()
             .message(message)
-            .with_type(NotificationType::Success)
+            .with_kind(NotificationKind::Success)
     }
 
+    /// Create a warning notification with the given message.
     pub fn warning(message: impl Into<SharedString>) -> Self {
         Self::new()
             .message(message)
-            .with_type(NotificationType::Warning)
+            .with_kind(NotificationKind::Warning)
     }
 
+    /// Create an error notification with the given message.
     pub fn error(message: impl Into<SharedString>) -> Self {
         Self::new()
             .message(message)
-            .with_type(NotificationType::Error)
+            .with_kind(NotificationKind::Error)
     }
 
     /// Set the type for unique identification of the notification.
@@ -180,8 +177,8 @@ impl Notification {
     }
 
     /// Set the type and id of the notification, used to uniquely identify the notification.
-    pub fn custom_id(mut self, key: impl Into<ElementId>) -> Self {
+    pub fn type_id<T: Sized + 'static>(mut self, key: impl Into<ElementId>) -> Self {
-        self.id = (TypeId::of::<DefaultIdType>(), key.into()).into();
+        self.id = (TypeId::of::<T>(), key.into()).into();
         self
     }
 
@@ -202,8 +199,8 @@ impl Notification {
     }
 
     /// Set the type of the notification, default is NotificationType::Info.
-    pub fn with_type(mut self, type_: NotificationType) -> Self {
+    pub fn with_kind(mut self, kind: NotificationKind) -> Self {
-        self.type_ = Some(type_);
+        self.kind = Some(kind);
         self
     }
 
@@ -223,22 +220,31 @@ impl Notification {
     }
 
     /// Set the action button of the notification.
+    ///
+    /// When an action is set, the notification will not autohide.
     pub fn action<F>(mut self, action: F) -> Self
     where
-        F: Fn(&mut Window, &mut Context<Self>) -> Button + 'static,
+        F: Fn(&mut Self, &mut Window, &mut Context<Self>) -> Button + 'static,
     {
         self.action_builder = Some(Rc::new(action));
+        self.autohide = false;
         self
     }
 
     /// Dismiss the notification.
     pub fn dismiss(&mut self, _: &mut Window, cx: &mut Context<Self>) {
+        if self.closing {
+            return;
+        }
         self.closing = true;
         cx.notify();
 
         // Dismiss the notification after 0.15s to show the animation.
         cx.spawn(async move |view, cx| {
-            Timer::after(Duration::from_secs_f32(0.15)).await;
+            cx.background_executor()
+                .timer(Duration::from_secs_f32(0.15))
+                .await;
+
             cx.update(|cx| {
                 if let Some(view) = view.upgrade() {
                     view.update(cx, |view, cx| {
@@ -248,13 +254,13 @@ impl Notification {
                 }
             })
         })
-        .detach()
+        .detach();
     }
 
     /// Set the content of the notification.
     pub fn content(
         mut self,
-        content: impl Fn(&mut Window, &mut Context<Self>) -> AnyElement + 'static,
+        content: impl Fn(&mut Self, &mut Window, &mut Context<Self>) -> AnyElement + 'static,
     ) -> Self {
         self.content_builder = Some(Rc::new(content));
         self
@@ -276,57 +282,76 @@ impl Styled for Notification {
         &mut self.style
     }
 }
-
 impl Render for Notification {
     fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
         let closing = self.closing;
-        let icon = match self.type_ {
+        let placement = cx.theme().notification.placement;
+
+        let content = self
+            .content_builder
+            .clone()
+            .map(|builder| builder(self, window, cx));
+
+        let action = self
+            .action_builder
+            .clone()
+            .map(|builder| builder(self, window, cx).small().mr_3p5());
+
+        let icon = match self.kind {
             None => self.icon.clone(),
-            Some(type_) => Some(type_.icon(cx)),
+            Some(kind) => Some(kind.icon(cx)),
+        };
+
+        let background = match self.kind {
+            Some(NotificationKind::Error) => cx.theme().danger_background,
+            _ => cx.theme().surface_background,
+        };
+
+        let text_color = match self.kind {
+            Some(NotificationKind::Error) => cx.theme().danger_foreground,
+            _ => cx.theme().text,
         };
 
         h_flex()
             .id("notification")
-            .refine_style(&self.style)
             .group("")
             .occlude()
             .relative()
-            .w_96()
+            .w_112()
             .border_1()
             .border_color(cx.theme().border)
-            .bg(cx.theme().surface_background)
+            .bg(background)
+            .text_color(text_color)
             .rounded(cx.theme().radius_lg)
             .when(cx.theme().shadow, |this| this.shadow_md())
             .p_2()
-            .gap_3()
+            .gap_2()
             .justify_start()
             .items_start()
+            .refine_style(&self.style)
             .when_some(icon, |this, icon| {
-                this.child(div().flex_shrink_0().pt_1().child(icon))
+                this.child(div().flex_shrink_0().child(icon))
             })
             .child(
                 v_flex()
                     .flex_1()
-                    .gap_1()
                     .overflow_hidden()
                     .when_some(self.title.clone(), |this, title| {
                         this.child(div().text_sm().font_semibold().child(title))
                     })
                     .when_some(self.message.clone(), |this, message| {
-                        this.child(div().text_sm().child(message))
+                        this.child(div().text_sm().line_height(relative(1.25)).child(message))
                     })
-                    .when_some(self.content_builder.clone(), |this, child_builder| {
+                    .when_some(content, |this, content| this.child(content))
-                        this.child(child_builder(window, cx))
+                    .when_some(action, |this, action| {
-                    })
+                        this.child(h_flex().flex_1().gap_1().justify_end().child(action))
-                    .when_some(self.action_builder.clone(), |this, action_builder| {
-                        this.child(action_builder(window, cx).small().w_full().my_2())
                     }),
             )
             .child(
                 div()
                     .absolute()
-                    .top_2p5()
+                    .top(px(6.5))
-                    .right_2p5()
+                    .right(px(6.5))
                     .invisible()
                     .group_hover("", |this| this.visible())
                     .child(
@@ -334,7 +359,7 @@ impl Render for Notification {
                             .icon(IconName::Close)
                             .ghost()
                             .xsmall()
-                            .on_click(cx.listener(|this, _, window, cx| {
+                            .on_click(cx.listener(move |this, _ev, window, cx| {
                                 this.dismiss(window, cx);
                             })),
                     ),
@@ -345,21 +370,47 @@ impl Render for Notification {
                     on_click(event, window, cx);
                 }))
             })
+            .on_aux_click(cx.listener(move |view, event: &ClickEvent, window, cx| {
+                if event.is_middle_click() {
+                    view.dismiss(window, cx);
+                }
+            }))
             .with_animation(
                 ElementId::NamedInteger("slide-down".into(), closing as u64),
                 Animation::new(Duration::from_secs_f64(0.25))
                     .with_easing(cubic_bezier(0.4, 0., 0.2, 1.)),
                 move |this, delta| {
                     if closing {
-                        let x_offset = px(0.) + delta * px(45.);
                         let opacity = 1. - delta;
-                        this.left(px(0.) + x_offset)
+                        let that = this
                             .shadow_none()
                             .opacity(opacity)
-                            .when(opacity < 0.85, |this| this.shadow_none())
+                            .when(opacity < 0.85, |this| this.shadow_none());
+                        match placement {
+                            Anchor::TopRight | Anchor::BottomRight => {
+                                let x_offset = px(0.) + delta * px(45.);
+                                that.left(px(0.) + x_offset)
+                            }
+                            Anchor::TopLeft | Anchor::BottomLeft => {
+                                let x_offset = px(0.) - delta * px(45.);
+                                that.left(px(0.) + x_offset)
+                            }
+                            Anchor::TopCenter => {
+                                let y_offset = px(0.) - delta * px(45.);
+                                that.top(px(0.) + y_offset)
+                            }
+                            Anchor::BottomCenter => {
+                                let y_offset = px(0.) + delta * px(45.);
+                                that.top(px(0.) + y_offset)
+                            }
+                        }
                     } else {
-                        let y_offset = px(-45.) + delta * px(45.);
                         let opacity = delta;
+                        let y_offset = match placement {
+                            placement if placement.is_top() => px(-45.) + delta * px(45.),
+                            placement if placement.is_bottom() => px(45.) - delta * px(45.),
+                            _ => px(0.),
+                        };
                         this.top(px(0.) + y_offset)
                             .opacity(opacity)
                             .when(opacity < 0.85, |this| this.shadow_none())
@@ -373,7 +424,11 @@ impl Render for Notification {
 pub struct NotificationList {
     /// Notifications that will be auto hidden.
     pub(crate) notifications: VecDeque<Entity<Notification>>,
+
+    /// Whether the notification list is expanded.
     expanded: bool,
+
+    /// Subscriptions
     _subscriptions: HashMap<NotificationId, Subscription>,
 }
 
@@ -386,10 +441,12 @@ impl NotificationList {
         }
     }
 
-    pub fn push<T>(&mut self, notification: T, window: &mut Window, cx: &mut Context<Self>)
+    pub fn push(
-    where
+        &mut self,
-        T: Into<Notification>,
+        notification: impl Into<Notification>,
-    {
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
         let notification = notification.into();
         let id = notification.id.clone();
         let autohide = notification.autohide;
@@ -411,36 +468,35 @@ impl NotificationList {
 
         if autohide {
             // Sleep for 5 seconds to autohide the notification
-            cx.spawn_in(window, async move |_, cx| {
+            cx.spawn_in(window, async move |_this, cx| {
-                Timer::after(Duration::from_secs(5)).await;
+                cx.background_executor().timer(Duration::from_secs(5)).await;
 
-                if let Err(error) =
+                if let Err(err) =
                     notification.update_in(cx, |note, window, cx| note.dismiss(window, cx))
                 {
-                    log::error!("Failed to auto hide notification: {error}");
+                    log::error!("failed to auto hide notification: {:?}", err);
                 }
             })
             .detach();
         }
+
         cx.notify();
     }
 
-    pub fn close<T>(&mut self, key: T, window: &mut Window, cx: &mut Context<Self>)
+    pub(crate) fn close(
-    where
+        &mut self,
-        T: Into<ElementId>,
+        id: impl Into<NotificationId>,
-    {
+        window: &mut Window,
-        let id = (TypeId::of::<DefaultIdType>(), key.into()).into();
+        cx: &mut Context<Self>,
-
+    ) {
+        let id: NotificationId = id.into();
         if let Some(n) = self.notifications.iter().find(|n| n.read(cx).id == id) {
-            n.update(cx, |note, cx| {
+            n.update(cx, |note, cx| note.dismiss(window, cx))
-                note.dismiss(window, cx);
-            });
         }
-
         cx.notify();
     }
 
-    pub fn clear(&mut self, _window: &mut Window, cx: &mut Context<Self>) {
+    pub fn clear(&mut self, _: &mut Window, cx: &mut Context<Self>) {
         self.notifications.clear();
         cx.notify();
     }
@@ -451,25 +507,46 @@ impl NotificationList {
 }
 
 impl Render for NotificationList {
-    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+    fn render(
+        &mut self,
+        window: &mut gpui::Window,
+        cx: &mut gpui::Context<Self>,
+    ) -> impl IntoElement {
         let size = window.viewport_size();
         let items = self.notifications.iter().rev().take(10).rev().cloned();
 
-        div()
+        let placement = cx.theme().notification.placement;
-            .id("notification-wrapper")
+        let margins = &cx.theme().notification.margins;
-            .absolute()
+
-            .top_4()
-            .right_4()
-            .child(
         v_flex()
             .id("notification-list")
-                    .h(size.height - px(8.))
+            .max_h(size.height)
+            .pt(margins.top)
+            .pb(margins.bottom)
             .gap_3()
-                    .children(items)
+            .when(
+                matches!(placement, Anchor::TopRight),
+                |this| this.pr(margins.right), // ignore left
+            )
+            .when(
+                matches!(placement, Anchor::TopLeft),
+                |this| this.pl(margins.left), // ignore right
+            )
+            .when(
+                matches!(placement, Anchor::BottomLeft),
+                |this| this.flex_col_reverse().pl(margins.left), // ignore right
+            )
+            .when(
+                matches!(placement, Anchor::BottomRight),
+                |this| this.flex_col_reverse().pr(margins.right), // ignore left
+            )
+            .when(matches!(placement, Anchor::BottomCenter), |this| {
+                this.flex_col_reverse()
+            })
             .on_hover(cx.listener(|view, hovered, _, cx| {
                 view.expanded = *hovered;
                 cx.notify()
-                    })),
+            }))
-            )
+            .children(items)
     }
 }

crates/ui/src/popover.rs

@@ -2,14 +2,15 @@ use std::rc::Rc;
 
 use gpui::prelude::FluentBuilder as _;
 use gpui::{
-    deferred, div, px, AnyElement, App, Bounds, Context, Deferred, DismissEvent, Div, ElementId,
+    AnyElement, App, Bounds, Context, Deferred, DismissEvent, Div, ElementId, EventEmitter,
-    EventEmitter, FocusHandle, Focusable, Half, InteractiveElement as _, IntoElement, KeyBinding,
+    FocusHandle, Focusable, Half, InteractiveElement as _, IntoElement, KeyBinding, MouseButton,
-    MouseButton, ParentElement, Pixels, Point, Render, RenderOnce, Stateful, StyleRefinement,
+    ParentElement, Pixels, Point, Render, RenderOnce, Stateful, StyleRefinement, Styled,
-    Styled, Subscription, Window,
+    Subscription, Window, deferred, div, px,
 };
+use theme::Anchor;
 
 use crate::actions::Cancel;
-use crate::{anchored, v_flex, Anchor, ElementExt, Selectable, StyledExt as _};
+use crate::{ElementExt, Selectable, StyledExt as _, anchored, v_flex};
 
 const CONTEXT: &str = "Popover";
 

crates/ui/src/resizable/panel.rs

@@ -3,14 +3,15 @@ use std::rc::Rc;
 
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    div, Along, AnyElement, App, AppContext, Axis, Bounds, Context, Element, ElementId, Empty,
+    Along, AnyElement, App, AppContext, Axis, Bounds, Context, Element, ElementId, Empty, Entity,
-    Entity, EventEmitter, InteractiveElement as _, IntoElement, IsZero as _, MouseMoveEvent,
+    EventEmitter, InteractiveElement as _, IntoElement, IsZero as _, MouseMoveEvent, MouseUpEvent,
-    MouseUpEvent, ParentElement, Pixels, Render, RenderOnce, Style, Styled, Window,
+    ParentElement, Pixels, Render, RenderOnce, Style, Styled, Window, div,
 };
+use theme::AxisExt;
 
-use super::{resizable_panel, resize_handle, ResizableState};
+use super::{ResizableState, resizable_panel, resize_handle};
 use crate::resizable::PANEL_MIN_SIZE;
-use crate::{h_flex, v_flex, AxisExt, ElementExt};
+use crate::{ElementExt, h_flex, v_flex};
 
 pub enum ResizablePanelEvent {
     Resized,

crates/ui/src/resizable/resize_handle.rs

@@ -3,14 +3,13 @@ use std::rc::Rc;
 
 use gpui::prelude::FluentBuilder as _;
 use gpui::{
-    div, px, AnyElement, App, Axis, Element, ElementId, Entity, GlobalElementId,
+    AnyElement, App, Axis, Element, ElementId, Entity, GlobalElementId, InteractiveElement,
-    InteractiveElement, IntoElement, MouseDownEvent, MouseUpEvent, ParentElement as _, Pixels,
+    IntoElement, MouseDownEvent, MouseUpEvent, ParentElement as _, Pixels, Point, Render,
-    Point, Render, StatefulInteractiveElement, Styled as _, Window,
+    StatefulInteractiveElement, Styled as _, Window, div, px,
 };
-use theme::ActiveTheme;
+use theme::{ActiveTheme, AxisExt};
 
-use crate::dock_area::dock::DockPlacement;
+use crate::dock::DockPlacement;
-use crate::AxisExt;
 
 pub(crate) const HANDLE_PADDING: Pixels = px(4.);
 pub(crate) const HANDLE_SIZE: Pixels = px(1.);

crates/ui/src/root.rs

@@ -1,11 +1,12 @@
+use std::any::TypeId;
 use std::rc::Rc;
 
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    canvas, div, point, px, size, AnyView, App, AppContext, Bounds, Context, CursorStyle,
+    AnyView, App, AppContext, Bounds, Context, CursorStyle, Decorations, Edges, ElementId, Entity,
-    Decorations, Edges, Entity, FocusHandle, HitboxBehavior, Hsla, InteractiveElement, IntoElement,
+    FocusHandle, HitboxBehavior, Hsla, InteractiveElement, IntoElement, MouseButton,
-    MouseButton, ParentElement as _, Pixels, Point, Render, ResizeEdge, SharedString, Size, Styled,
+    ParentElement as _, Pixels, Point, Render, ResizeEdge, Size, Styled, Tiling, WeakFocusHandle,
-    Tiling, WeakFocusHandle, Window,
+    Window, canvas, div, point, px, size,
 };
 use theme::{
     ActiveTheme, CLIENT_SIDE_DECORATION_BORDER, CLIENT_SIDE_DECORATION_ROUNDING,
@@ -213,13 +214,30 @@ impl Root {
         cx.notify();
     }
 
-    /// Clear a notification by its ID.
+    /// Clear a notification by its type.
-    pub fn clear_notification<T>(&mut self, id: T, window: &mut Window, cx: &mut Context<Self>)
+    pub fn clear_notification<T: Sized + 'static>(
-    where
+        &mut self,
-        T: Into<SharedString>,
+        window: &mut Window,
-    {
+        cx: &mut Context<'_, Root>,
-        self.notification
+    ) {
-            .update(cx, |view, cx| view.close(id.into(), window, cx));
+        self.notification.update(cx, |view, cx| {
+            let id = TypeId::of::<T>();
+            view.close(id, window, cx);
+        });
+        cx.notify();
+    }
+
+    /// Clear a notification by its type.
+    pub fn clear_notification_by_id<T: Sized + 'static>(
+        &mut self,
+        key: impl Into<ElementId>,
+        window: &mut Window,
+        cx: &mut Context<'_, Root>,
+    ) {
+        self.notification.update(cx, |view, cx| {
+            let id = (TypeId::of::<T>(), key.into());
+            view.close(id, window, cx);
+        });
         cx.notify();
     }
 
@@ -249,7 +267,6 @@ impl Render for Root {
         div()
             .id("window")
             .size_full()
-            .bg(gpui::transparent_black())
             .map(|div| match decorations {
                 Decorations::Server => div,
                 Decorations::Client { tiling } => div

crates/ui/src/scroll/scrollable.rs

@@ -3,13 +3,13 @@ use std::rc::Rc;
 
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    div, App, Div, Element, ElementId, InteractiveElement, IntoElement, ParentElement, RenderOnce,
+    App, Div, Element, ElementId, InteractiveElement, IntoElement, ParentElement, RenderOnce,
-    ScrollHandle, Stateful, StatefulInteractiveElement, StyleRefinement, Styled, Window,
+    ScrollHandle, Stateful, StatefulInteractiveElement, StyleRefinement, Styled, Window, div,
 };
 
 use super::{Scrollbar, ScrollbarAxis};
-use crate::scroll::ScrollbarHandle;
 use crate::StyledExt;
+use crate::scroll::ScrollbarHandle;
 
 /// A trait for elements that can be made scrollable with scrollbars.
 pub trait ScrollableElement: InteractiveElement + Styled + ParentElement + Element {
@@ -160,6 +160,7 @@ where
 }
 
 impl ScrollableElement for Div {}
+
 impl<E> ScrollableElement for Stateful<E>
 where
     E: ParentElement + Styled + Element,
@@ -195,6 +196,7 @@ fn render_scrollbar<H: ScrollbarHandle + Clone>(
     // Do not render scrollbar when inspector is picking elements,
     // to allow us to pick the background elements.
     let is_inspector_picking = window.is_inspector_picking(cx);
+
     if is_inspector_picking {
         return div();
     }

crates/ui/src/scroll/scrollable_mask.rs

@@ -1,10 +1,9 @@
 use gpui::{
-    px, relative, App, Axis, BorderStyle, Bounds, ContentMask, Corners, Edges, Element, ElementId,
+    App, Axis, BorderStyle, Bounds, ContentMask, Corners, Edges, Element, ElementId, EntityId,
-    EntityId, GlobalElementId, Hitbox, Hsla, IntoElement, IsZero as _, LayoutId, PaintQuad, Pixels,
+    GlobalElementId, Hitbox, Hsla, IntoElement, IsZero as _, LayoutId, PaintQuad, Pixels, Point,
-    Point, Position, ScrollHandle, ScrollWheelEvent, Size, Style, Window,
+    Position, ScrollHandle, ScrollWheelEvent, Size, Style, Window, px, relative,
 };
-
+use theme::AxisExt;
-use crate::AxisExt;
 
 /// Make a scrollable mask element to cover the parent view with the mouse wheel event listening.
 ///

crates/ui/src/scroll/scrollbar.rs

@@ -5,15 +5,13 @@ use std::rc::Rc;
 use std::time::{Duration, Instant};
 
 use gpui::{
-    fill, point, px, relative, size, App, Axis, BorderStyle, Bounds, ContentMask, Corner,
+    App, Axis, BorderStyle, Bounds, ContentMask, Corner, CursorStyle, Edges, Element, ElementId,
-    CursorStyle, Edges, Element, ElementId, GlobalElementId, Hitbox, HitboxBehavior, Hsla,
+    GlobalElementId, Hitbox, HitboxBehavior, Hsla, InspectorElementId, IntoElement, IsZero,
-    InspectorElementId, IntoElement, IsZero, LayoutId, ListState, MouseDownEvent, MouseMoveEvent,
+    LayoutId, ListState, MouseDownEvent, MouseMoveEvent, MouseUpEvent, PaintQuad, Pixels, Point,
-    MouseUpEvent, PaintQuad, Pixels, Point, Position, ScrollHandle, ScrollWheelEvent, Size, Style,
+    Position, ScrollHandle, ScrollWheelEvent, Size, Style, UniformListScrollHandle, Window, fill,
-    UniformListScrollHandle, Window,
+    point, px, relative, size,
 };
-use theme::{ActiveTheme, ScrollbarMode};
+use theme::{ActiveTheme, AxisExt, ScrollbarMode};
-
-use crate::AxisExt;
 
 /// The width of the scrollbar (THUMB_ACTIVE_INSET * 2 + THUMB_ACTIVE_WIDTH)
 const WIDTH: Pixels = px(1. * 2. + 8.);
@@ -54,7 +52,7 @@ impl ScrollbarHandle for ScrollHandle {
     }
 
     fn content_size(&self) -> Size<Pixels> {
-        self.max_offset() + self.bounds().size
+        Size::from(self.max_offset()) + self.bounds().size
     }
 }
 
@@ -69,7 +67,7 @@ impl ScrollbarHandle for UniformListScrollHandle {
 
     fn content_size(&self) -> Size<Pixels> {
         let base_handle = &self.0.borrow().base_handle;
-        base_handle.max_offset() + base_handle.bounds().size
+        Size::from(base_handle.max_offset()) + base_handle.bounds().size
     }
 }
 
@@ -83,7 +81,7 @@ impl ScrollbarHandle for ListState {
     }
 
     fn content_size(&self) -> Size<Pixels> {
-        self.viewport_bounds().size + self.max_offset_for_scrollbar()
+        Size::from(self.max_offset_for_scrollbar()) + self.viewport_bounds().size
     }
 
     fn start_drag(&self) {
@@ -407,7 +405,6 @@ impl Scrollbar {
             ScrollbarMode::Scrolling => (THUMB_WIDTH, THUMB_INSET, THUMB_RADIUS),
             _ => (THUMB_ACTIVE_WIDTH, THUMB_ACTIVE_INSET, THUMB_ACTIVE_RADIUS),
         };
-
         (
             cx.theme().scrollbar_thumb_background,
             cx.theme().scrollbar_track_background,
@@ -522,6 +519,7 @@ impl Element for Scrollbar {
 
         let mut states = vec![];
         let mut has_both = self.axis.is_both();
+
         let scroll_size = self
             .scroll_size
             .unwrap_or(self.scroll_handle.content_size());

crates/ui/src/styled.rs

@@ -1,4 +1,4 @@
-use gpui::{div, px, App, Div, Pixels, Refineable, StyleRefinement, Styled};
+use gpui::{App, DefiniteLength, Div, Edges, Pixels, Refineable, StyleRefinement, Styled, div, px};
 use serde::{Deserialize, Serialize};
 use theme::ActiveTheme;
 
@@ -46,6 +46,30 @@ pub trait StyledExt: Styled + Sized {
         self.flex().flex_col()
     }
 
+    /// Apply paddings to the element.
+    fn paddings<L>(self, paddings: impl Into<Edges<L>>) -> Self
+    where
+        L: Into<DefiniteLength> + Clone + Default + std::fmt::Debug + PartialEq,
+    {
+        let paddings = paddings.into();
+        self.pt(paddings.top.into())
+            .pb(paddings.bottom.into())
+            .pl(paddings.left.into())
+            .pr(paddings.right.into())
+    }
+
+    /// Apply margins to the element.
+    fn margins<L>(self, margins: impl Into<Edges<L>>) -> Self
+    where
+        L: Into<DefiniteLength> + Clone + Default + std::fmt::Debug + PartialEq,
+    {
+        let margins = margins.into();
+        self.mt(margins.top.into())
+            .mb(margins.bottom.into())
+            .ml(margins.left.into())
+            .mr(margins.right.into())
+    }
+
     font_weight!(font_thin, THIN);
     font_weight!(font_extralight, EXTRA_LIGHT);
     font_weight!(font_light, LIGHT);

crates/ui/src/switch.rs

@@ -4,13 +4,13 @@ use std::time::Duration;
 
 use gpui::prelude::FluentBuilder as _;
 use gpui::{
-    div, px, white, Animation, AnimationExt as _, AnyElement, App, Element, ElementId,
+    Animation, AnimationExt as _, AnyElement, App, Element, ElementId, GlobalElementId,
-    GlobalElementId, InteractiveElement, IntoElement, LayoutId, ParentElement as _, SharedString,
+    InteractiveElement, IntoElement, LayoutId, ParentElement as _, SharedString, Styled as _,
-    Styled as _, Window,
+    Window, div, px, white,
 };
-use theme::ActiveTheme;
+use theme::{ActiveTheme, Side};
 
-use crate::{Disableable, Side, Sizable, Size};
+use crate::{Disableable, Sizable, Size};
 
 type OnClick = Option<Rc<dyn Fn(&bool, &mut Window, &mut App)>>;
 

crates/ui/src/tab/mod.rs

@@ -1,74 +1,557 @@
-use gpui::prelude::FluentBuilder;
+use std::rc::Rc;
-use gpui::{
-    div, px, AnyElement, App, Div, InteractiveElement, IntoElement, MouseButton, ParentElement,
-    RenderOnce, StatefulInteractiveElement, Styled, Window,
-};
-use theme::{ActiveTheme, TABBAR_HEIGHT};
 
-use crate::{Selectable, Sizable, Size};
+use gpui::prelude::FluentBuilder as _;
+use gpui::{
+    AnyElement, App, ClickEvent, Div, Edges, Hsla, InteractiveElement, IntoElement, MouseButton,
+    ParentElement, Pixels, RenderOnce, SharedString, StatefulInteractiveElement, Styled, Window,
+    div, px, relative,
+};
+use theme::ActiveTheme;
+
+use crate::{Icon, IconName, Selectable, Sizable, Size, StyledExt, h_flex};
 
 pub mod tab_bar;
 
+/// Tab variants.
+#[derive(Debug, Clone, Default, Copy, PartialEq, Eq, Hash)]
+pub enum TabVariant {
+    #[default]
+    Tab,
+    Outline,
+    Pill,
+    Segmented,
+    Underline,
+}
+
+impl TabVariant {
+    fn height(&self, size: Size) -> Pixels {
+        match size {
+            Size::XSmall => match self {
+                TabVariant::Underline => px(26.),
+                _ => px(20.),
+            },
+            Size::Small => match self {
+                TabVariant::Underline => px(30.),
+                _ => px(24.),
+            },
+            Size::Large => match self {
+                TabVariant::Underline => px(44.),
+                _ => px(36.),
+            },
+            _ => match self {
+                TabVariant::Underline => px(36.),
+                _ => px(32.),
+            },
+        }
+    }
+
+    fn inner_height(&self, size: Size) -> Pixels {
+        match size {
+            Size::XSmall => match self {
+                TabVariant::Tab | TabVariant::Outline | TabVariant::Pill => px(18.),
+                TabVariant::Segmented => px(16.),
+                TabVariant::Underline => px(20.),
+            },
+            Size::Small => match self {
+                TabVariant::Tab | TabVariant::Outline | TabVariant::Pill => px(22.),
+                TabVariant::Segmented => px(18.),
+                TabVariant::Underline => px(22.),
+            },
+            Size::Large => match self {
+                TabVariant::Tab | TabVariant::Outline | TabVariant::Pill => px(36.),
+                TabVariant::Segmented => px(28.),
+                TabVariant::Underline => px(32.),
+            },
+            _ => match self {
+                TabVariant::Tab => px(30.),
+                TabVariant::Outline | TabVariant::Pill => px(26.),
+                TabVariant::Segmented => px(24.),
+                TabVariant::Underline => px(26.),
+            },
+        }
+    }
+
+    /// Default px(12) to match panel px_3, See [`crate::dock::TabPanel`]
+    fn inner_paddings(&self, size: Size) -> Edges<Pixels> {
+        let mut padding_x = match size {
+            Size::XSmall => px(8.),
+            Size::Small => px(10.),
+            Size::Large => px(16.),
+            _ => px(12.),
+        };
+
+        if matches!(self, TabVariant::Underline) {
+            padding_x = px(0.);
+        }
+
+        Edges {
+            left: padding_x,
+            right: padding_x,
+            ..Default::default()
+        }
+    }
+
+    fn inner_margins(&self, size: Size) -> Edges<Pixels> {
+        match size {
+            Size::XSmall => match self {
+                TabVariant::Underline => Edges {
+                    top: px(1.),
+                    bottom: px(2.),
+                    ..Default::default()
+                },
+                _ => Edges::all(px(0.)),
+            },
+            Size::Small => match self {
+                TabVariant::Underline => Edges {
+                    top: px(2.),
+                    bottom: px(3.),
+                    ..Default::default()
+                },
+                _ => Edges::all(px(0.)),
+            },
+            Size::Large => match self {
+                TabVariant::Underline => Edges {
+                    top: px(5.),
+                    bottom: px(6.),
+                    ..Default::default()
+                },
+                _ => Edges::all(px(0.)),
+            },
+            _ => match self {
+                TabVariant::Underline => Edges {
+                    top: px(3.),
+                    bottom: px(4.),
+                    ..Default::default()
+                },
+                _ => Edges::all(px(0.)),
+            },
+        }
+    }
+
+    fn normal(&self, cx: &App) -> TabStyle {
+        match self {
+            TabVariant::Tab => TabStyle {
+                fg: cx.theme().tab_foreground,
+                bg: gpui::transparent_black(),
+                borders: Edges {
+                    left: px(1.),
+                    right: px(1.),
+                    ..Default::default()
+                },
+                border_color: gpui::transparent_black(),
+                ..Default::default()
+            },
+            TabVariant::Outline => TabStyle {
+                fg: cx.theme().tab_foreground,
+                bg: gpui::transparent_black(),
+                borders: Edges::all(px(1.)),
+                border_color: cx.theme().border,
+                ..Default::default()
+            },
+            TabVariant::Pill => TabStyle {
+                fg: cx.theme().text,
+                bg: gpui::transparent_black(),
+                ..Default::default()
+            },
+            TabVariant::Segmented => TabStyle {
+                fg: cx.theme().tab_foreground,
+                bg: gpui::transparent_black(),
+                ..Default::default()
+            },
+            TabVariant::Underline => TabStyle {
+                fg: cx.theme().tab_foreground,
+                bg: gpui::transparent_black(),
+                inner_bg: gpui::transparent_black(),
+                borders: Edges {
+                    bottom: px(2.),
+                    ..Default::default()
+                },
+                border_color: gpui::transparent_black(),
+                ..Default::default()
+            },
+        }
+    }
+
+    fn hovered(&self, selected: bool, cx: &App) -> TabStyle {
+        match self {
+            TabVariant::Tab => TabStyle {
+                fg: cx.theme().tab_foreground,
+                bg: gpui::transparent_black(),
+                borders: Edges {
+                    left: px(1.),
+                    right: px(1.),
+                    ..Default::default()
+                },
+                border_color: gpui::transparent_black(),
+                ..Default::default()
+            },
+            TabVariant::Outline => TabStyle {
+                fg: cx.theme().secondary_foreground,
+                bg: cx.theme().secondary_hover,
+                borders: Edges::all(px(1.)),
+                border_color: cx.theme().border,
+                ..Default::default()
+            },
+            TabVariant::Pill => TabStyle {
+                fg: cx.theme().secondary_foreground,
+                bg: cx.theme().secondary_background,
+                ..Default::default()
+            },
+            TabVariant::Segmented => TabStyle {
+                fg: cx.theme().tab_foreground,
+                bg: gpui::transparent_black(),
+                inner_bg: if selected {
+                    cx.theme().background
+                } else {
+                    gpui::transparent_black()
+                },
+                ..Default::default()
+            },
+            TabVariant::Underline => TabStyle {
+                fg: cx.theme().tab_foreground,
+                bg: gpui::transparent_black(),
+                inner_bg: gpui::transparent_black(),
+                borders: Edges {
+                    bottom: px(2.),
+                    ..Default::default()
+                },
+                border_color: gpui::transparent_black(),
+                ..Default::default()
+            },
+        }
+    }
+
+    fn selected(&self, cx: &App) -> TabStyle {
+        match self {
+            TabVariant::Tab => TabStyle {
+                fg: cx.theme().tab_active_foreground,
+                bg: cx.theme().tab_active_background,
+                borders: Edges {
+                    left: px(1.),
+                    right: px(1.),
+                    ..Default::default()
+                },
+                border_color: cx.theme().border,
+                ..Default::default()
+            },
+            TabVariant::Outline => TabStyle {
+                fg: cx.theme().text_accent,
+                bg: gpui::transparent_black(),
+                borders: Edges::all(px(1.)),
+                border_color: cx.theme().element_active,
+                ..Default::default()
+            },
+            TabVariant::Pill => TabStyle {
+                fg: cx.theme().element_foreground,
+                bg: cx.theme().element_background,
+                ..Default::default()
+            },
+            TabVariant::Segmented => TabStyle {
+                fg: cx.theme().tab_active_foreground,
+                bg: gpui::transparent_black(),
+                inner_bg: cx.theme().background,
+                shadow: true,
+                ..Default::default()
+            },
+            TabVariant::Underline => TabStyle {
+                fg: cx.theme().tab_active_foreground,
+                bg: gpui::transparent_black(),
+                borders: Edges {
+                    bottom: px(2.),
+                    ..Default::default()
+                },
+                border_color: cx.theme().element_active,
+                ..Default::default()
+            },
+        }
+    }
+
+    fn disabled(&self, selected: bool, cx: &App) -> TabStyle {
+        match self {
+            TabVariant::Tab => TabStyle {
+                fg: cx.theme().text_muted,
+                bg: gpui::transparent_black(),
+                border_color: if selected {
+                    cx.theme().border
+                } else {
+                    gpui::transparent_black()
+                },
+                borders: Edges {
+                    left: px(1.),
+                    right: px(1.),
+                    ..Default::default()
+                },
+                ..Default::default()
+            },
+            TabVariant::Outline => TabStyle {
+                fg: cx.theme().text_muted,
+                bg: gpui::transparent_black(),
+                borders: Edges::all(px(1.)),
+                border_color: if selected {
+                    cx.theme().element_active
+                } else {
+                    cx.theme().border
+                },
+                ..Default::default()
+            },
+            TabVariant::Pill => TabStyle {
+                fg: if selected {
+                    cx.theme().element_foreground.opacity(0.5)
+                } else {
+                    cx.theme().text_muted
+                },
+                bg: if selected {
+                    cx.theme().element_background.opacity(0.5)
+                } else {
+                    gpui::transparent_black()
+                },
+                ..Default::default()
+            },
+            TabVariant::Segmented => TabStyle {
+                fg: cx.theme().text_muted,
+                bg: cx.theme().tab_background,
+                inner_bg: if selected {
+                    cx.theme().background
+                } else {
+                    gpui::transparent_black()
+                },
+                ..Default::default()
+            },
+            TabVariant::Underline => TabStyle {
+                fg: cx.theme().text_muted,
+                bg: gpui::transparent_black(),
+                border_color: if selected {
+                    cx.theme().border
+                } else {
+                    gpui::transparent_black()
+                },
+                borders: Edges {
+                    bottom: px(2.),
+                    ..Default::default()
+                },
+                ..Default::default()
+            },
+        }
+    }
+
+    pub(super) fn tab_bar_radius(&self, size: Size, cx: &App) -> Pixels {
+        if *self != TabVariant::Segmented {
+            return px(0.);
+        }
+
+        match size {
+            Size::XSmall | Size::Small => cx.theme().radius,
+            Size::Large => cx.theme().radius_lg,
+            _ => cx.theme().radius_lg,
+        }
+    }
+
+    fn radius(&self, size: Size, cx: &App) -> Pixels {
+        match self {
+            TabVariant::Outline | TabVariant::Pill => px(99.),
+            TabVariant::Segmented => match size {
+                Size::XSmall | Size::Small => cx.theme().radius,
+                Size::Large => cx.theme().radius_lg,
+                _ => cx.theme().radius_lg,
+            },
+            _ => px(0.),
+        }
+    }
+
+    fn inner_radius(&self, size: Size, cx: &App) -> Pixels {
+        match self {
+            TabVariant::Segmented => match size {
+                Size::Large => self.tab_bar_radius(size, cx) - px(3.),
+                _ => self.tab_bar_radius(size, cx) - px(2.),
+            },
+            _ => px(0.),
+        }
+    }
+}
+
+#[allow(dead_code)]
+struct TabStyle {
+    borders: Edges<Pixels>,
+    border_color: Hsla,
+    bg: Hsla,
+    fg: Hsla,
+    shadow: bool,
+    inner_bg: Hsla,
+}
+
+impl Default for TabStyle {
+    fn default() -> Self {
+        TabStyle {
+            borders: Edges::all(px(0.)),
+            border_color: gpui::transparent_white(),
+            bg: gpui::transparent_white(),
+            fg: gpui::transparent_white(),
+            shadow: false,
+            inner_bg: gpui::transparent_white(),
+        }
+    }
+}
+
+#[allow(clippy::type_complexity)]
+/// A Tab element for the [`super::TabBar`].
 #[derive(IntoElement)]
 pub struct Tab {
     ix: usize,
     base: Div,
-    label: Option<AnyElement>,
+    pub(super) label: Option<SharedString>,
+    icon: Option<Icon>,
     prefix: Option<AnyElement>,
+    pub(super) tab_bar_prefix: Option<bool>,
     suffix: Option<AnyElement>,
-    disabled: bool,
+    children: Vec<AnyElement>,
-    selected: bool,
+    variant: TabVariant,
     size: Size,
+    pub(super) disabled: bool,
+    pub(super) selected: bool,
+    on_click: Option<Rc<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>>,
 }
 
-impl Tab {
+impl From<&'static str> for Tab {
-    pub fn new() -> Self {
+    fn from(label: &'static str) -> Self {
-        Self {
+        Self::new().label(label)
-            ix: 0,
-            base: div(),
-            label: None,
-            disabled: false,
-            selected: false,
-            prefix: None,
-            suffix: None,
-            size: Size::default(),
-        }
     }
+}
 
-    /// Set label for the tab.
+impl From<String> for Tab {
-    pub fn label(mut self, label: impl Into<AnyElement>) -> Self {
+    fn from(label: String) -> Self {
-        self.label = Some(label.into());
+        Self::new().label(label)
-        self
     }
+}
 
-    /// Set the left side of the tab
+impl From<SharedString> for Tab {
-    pub fn prefix(mut self, prefix: impl Into<AnyElement>) -> Self {
+    fn from(label: SharedString) -> Self {
-        self.prefix = Some(prefix.into());
+        Self::new().label(label)
-        self
     }
+}
 
-    /// Set the right side of the tab
+impl From<Icon> for Tab {
-    pub fn suffix(mut self, suffix: impl Into<AnyElement>) -> Self {
+    fn from(icon: Icon) -> Self {
-        self.suffix = Some(suffix.into());
+        Self::default().icon(icon)
-        self
     }
+}
 
-    /// Set disabled state to the tab
+impl From<IconName> for Tab {
-    pub fn disabled(mut self, disabled: bool) -> Self {
+    fn from(icon_name: IconName) -> Self {
-        self.disabled = disabled;
+        Self::default().icon(Icon::new(icon_name))
-        self
-    }
-
-    /// Set index to the tab.
-    pub fn ix(mut self, ix: usize) -> Self {
-        self.ix = ix;
-        self
     }
 }
 
 impl Default for Tab {
     fn default() -> Self {
-        Self::new()
+        Self {
+            ix: 0,
+            base: div(),
+            label: None,
+            icon: None,
+            tab_bar_prefix: None,
+            children: Vec::new(),
+            disabled: false,
+            selected: false,
+            prefix: None,
+            suffix: None,
+            variant: TabVariant::default(),
+            size: Size::default(),
+            on_click: None,
+        }
+    }
+}
+
+impl Tab {
+    /// Create a new tab with a label.
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    /// Set label for the tab.
+    pub fn label(mut self, label: impl Into<SharedString>) -> Self {
+        self.label = Some(label.into());
+        self
+    }
+
+    /// Set icon for the tab.
+    pub fn icon(mut self, icon: impl Into<Icon>) -> Self {
+        self.icon = Some(icon.into());
+        self
+    }
+
+    /// Set Tab Variant.
+    pub fn with_variant(mut self, variant: TabVariant) -> Self {
+        self.variant = variant;
+        self
+    }
+
+    /// Use Pill variant.
+    pub fn pill(mut self) -> Self {
+        self.variant = TabVariant::Pill;
+        self
+    }
+
+    /// Use outline variant.
+    pub fn outline(mut self) -> Self {
+        self.variant = TabVariant::Outline;
+        self
+    }
+
+    /// Use Segmented variant.
+    pub fn segmented(mut self) -> Self {
+        self.variant = TabVariant::Segmented;
+        self
+    }
+
+    /// Use Underline variant.
+    pub fn underline(mut self) -> Self {
+        self.variant = TabVariant::Underline;
+        self
+    }
+
+    /// Set the left side of the tab
+    pub fn prefix(mut self, prefix: impl IntoElement) -> Self {
+        self.prefix = Some(prefix.into_any_element());
+        self
+    }
+
+    /// Set the right side of the tab
+    pub fn suffix(mut self, suffix: impl IntoElement) -> Self {
+        self.suffix = Some(suffix.into_any_element());
+        self
+    }
+
+    /// Set disabled state to the tab, default false.
+    pub fn disabled(mut self, disabled: bool) -> Self {
+        self.disabled = disabled;
+        self
+    }
+
+    /// Set the click handler for the tab.
+    pub fn on_click(
+        mut self,
+        on_click: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.on_click = Some(Rc::new(on_click));
+        self
+    }
+
+    /// Set index to the tab.
+    pub(crate) fn ix(mut self, ix: usize) -> Self {
+        self.ix = ix;
+        self
+    }
+
+    /// Set if the tab bar has a prefix.
+    pub(crate) fn tab_bar_prefix(mut self, tab_bar_prefix: bool) -> Self {
+        self.tab_bar_prefix = Some(tab_bar_prefix);
+        self
+    }
+}
+
+impl ParentElement for Tab {
+    fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
+        self.children.extend(elements);
     }
 }
 
@@ -105,62 +588,115 @@ impl Sizable for Tab {
 }
 
 impl RenderOnce for Tab {
-    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
+    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
-        let (text_color, hover_text_color, bg_color, border_color) =
+        let mut tab_style = if self.selected {
-            match (self.selected, self.disabled) {
+            self.variant.selected(cx)
-                (true, false) => (
+        } else {
-                    cx.theme().tab_active_foreground,
+            self.variant.normal(cx)
-                    cx.theme().tab_hover_foreground,
-                    cx.theme().tab_active_background,
-                    cx.theme().border,
-                ),
-                (false, false) => (
-                    cx.theme().tab_inactive_foreground,
-                    cx.theme().tab_hover_foreground,
-                    cx.theme().ghost_element_background,
-                    cx.theme().border_transparent,
-                ),
-                (true, true) => (
-                    cx.theme().tab_inactive_foreground,
-                    cx.theme().tab_hover_foreground,
-                    cx.theme().ghost_element_background,
-                    cx.theme().border_disabled,
-                ),
-                (false, true) => (
-                    cx.theme().tab_inactive_foreground,
-                    cx.theme().tab_hover_foreground,
-                    cx.theme().ghost_element_background,
-                    cx.theme().border_disabled,
-                ),
         };
 
+        let mut hover_style = self.variant.hovered(self.selected, cx);
+
+        if self.disabled {
+            tab_style = self.variant.disabled(self.selected, cx);
+            hover_style = self.variant.disabled(self.selected, cx);
+        }
+
+        let tab_bar_prefix = self.tab_bar_prefix.unwrap_or_default();
+
+        if !tab_bar_prefix && self.ix == 0 && self.variant == TabVariant::Tab {
+            tab_style.borders.left = px(0.);
+            hover_style.borders.left = px(0.);
+        }
+
+        let radius = self.variant.radius(self.size, cx);
+        let inner_radius = self.variant.inner_radius(self.size, cx);
+        let inner_paddings = self.variant.inner_paddings(self.size);
+        let inner_margins = self.variant.inner_margins(self.size);
+        let inner_height = self.variant.inner_height(self.size);
+        let height = self.variant.height(self.size);
+
         self.base
             .id(self.ix)
-            .h(TABBAR_HEIGHT)
-            .px_4()
-            .relative()
             .flex()
+            .flex_wrap()
+            .gap_1()
             .items_center()
             .flex_shrink_0()
-            .cursor_pointer()
+            .h(height)
             .overflow_hidden()
-            .text_xs()
+            .text_color(tab_style.fg)
-            .text_ellipsis()
+            .map(|this| match self.size {
-            .text_color(text_color)
+                Size::XSmall => this.text_xs(),
-            .bg(bg_color)
+                Size::Large => this.text_base(),
-            .border_l(px(1.))
+                _ => this.text_sm(),
-            .border_r(px(1.))
+            })
-            .border_color(border_color)
+            .bg(tab_style.bg)
+            .border_l(tab_style.borders.left)
+            .border_r(tab_style.borders.right)
+            .border_t(tab_style.borders.top)
+            .border_b(tab_style.borders.bottom)
+            .border_color(tab_style.border_color)
+            .rounded(radius)
             .when(!self.selected && !self.disabled, |this| {
-                this.hover(|this| this.text_color(hover_text_color))
+                this.hover(|this| {
+                    this.text_color(hover_style.fg)
+                        .bg(hover_style.bg)
+                        .border_l(hover_style.borders.left)
+                        .border_r(hover_style.borders.right)
+                        .border_t(hover_style.borders.top)
+                        .border_b(hover_style.borders.bottom)
+                        .border_color(hover_style.border_color)
+                        .rounded(radius)
                 })
-            .when_some(self.prefix, |this, prefix| {
-                this.child(prefix).text_color(text_color)
             })
-            .when_some(self.label, |this, label| this.child(label))
+            .when_some(self.prefix, |this, prefix| this.child(prefix))
-            .when_some(self.suffix, |this, suffix| this.child(suffix))
+            .child(
-            .on_mouse_down(MouseButton::Left, |_ev, _window, cx| {
+                h_flex()
+                    .flex_1()
+                    .h(inner_height)
+                    .line_height(relative(1.))
+                    .whitespace_nowrap()
+                    .items_center()
+                    .justify_center()
+                    .overflow_hidden()
+                    .margins(inner_margins)
+                    .flex_shrink_0()
+                    .map(|this| match self.icon {
+                        Some(icon) => {
+                            this.w(inner_height * 1.25)
+                                .child(icon.map(|this| match self.size {
+                                    Size::XSmall => this.size_2p5(),
+                                    Size::Small => this.size_3p5(),
+                                    Size::Large => this.size_4(),
+                                    _ => this.size_4(),
+                                }))
+                        }
+                        None => this
+                            .paddings(inner_paddings)
+                            .map(|this| match self.label {
+                                Some(label) => this.child(label),
+                                None => this,
+                            })
+                            .children(self.children),
+                    })
+                    .bg(tab_style.inner_bg)
+                    .rounded(inner_radius)
+                    .when(tab_style.shadow, |this| this.shadow_xs())
+                    .hover(|this| this.bg(hover_style.inner_bg).rounded(inner_radius)),
+            )
+            .when_some(self.suffix, |this, suffix| {
+                this.child(div().pr_2().child(suffix))
+            })
+            .on_mouse_down(MouseButton::Left, |_, _, cx| {
+                // Stop propagation behavior, for works on TitleBar.
+                // https://github.com/longbridge/gpui-component/issues/1836
                 cx.stop_propagation();
             })
+            .when(!self.disabled, |this| {
+                this.when_some(self.on_click.clone(), |this, on_click| {
+                    this.on_click(move |event, window, cx| on_click(event, window, cx))
+                })
+            })
     }
 }

crates/ui/src/tab/tab_bar.rs

@@ -1,41 +1,92 @@
+use std::rc::Rc;
+
 use gpui::prelude::FluentBuilder as _;
-#[cfg(not(target_os = "windows"))]
-use gpui::Pixels;
 use gpui::{
-    div, px, AnyElement, App, Div, InteractiveElement, IntoElement, ParentElement, RenderOnce,
+    AnyElement, App, Corner, Div, Edges, ElementId, InteractiveElement, IntoElement, ParentElement,
-    ScrollHandle, StatefulInteractiveElement as _, StyleRefinement, Styled, Window,
+    RenderOnce, ScrollHandle, Stateful, StatefulInteractiveElement as _, StyleRefinement, Styled,
+    Window, div, px,
 };
 use smallvec::SmallVec;
 use theme::ActiveTheme;
 
-use crate::{h_flex, Sizable, Size, StyledExt};
+use super::{Tab, TabVariant};
+use crate::button::{Button, ButtonVariants as _};
+use crate::menu::{DropdownMenu as _, PopupMenuItem};
+use crate::{IconName, Selectable, Sizable, Size, StyledExt, h_flex};
 
+#[allow(clippy::type_complexity)]
+/// A TabBar element that contains multiple [`Tab`] items.
 #[derive(IntoElement)]
 pub struct TabBar {
-    base: Div,
+    base: Stateful<Div>,
     style: StyleRefinement,
     scroll_handle: Option<ScrollHandle>,
     prefix: Option<AnyElement>,
     suffix: Option<AnyElement>,
+    children: SmallVec<[Tab; 2]>,
     last_empty_space: AnyElement,
-    children: SmallVec<[AnyElement; 2]>,
+    selected_index: Option<usize>,
+    variant: TabVariant,
     size: Size,
+    menu: bool,
+    on_click: Option<Rc<dyn Fn(&usize, &mut Window, &mut App) + 'static>>,
 }
 
 impl TabBar {
-    pub fn new() -> Self {
+    /// Create a new TabBar.
+    pub fn new(id: impl Into<ElementId>) -> Self {
         Self {
-            base: h_flex().px(px(-1.)),
+            base: div().id(id).px(px(-1.)),
             style: StyleRefinement::default(),
-            scroll_handle: None,
             children: SmallVec::new(),
+            scroll_handle: None,
             prefix: None,
             suffix: None,
+            variant: TabVariant::default(),
             size: Size::default(),
             last_empty_space: div().w_3().into_any_element(),
+            selected_index: None,
+            on_click: None,
+            menu: false,
         }
     }
 
+    /// Set the Tab variant, all children will inherit the variant.
+    pub fn with_variant(mut self, variant: TabVariant) -> Self {
+        self.variant = variant;
+        self
+    }
+
+    /// Set the Tab variant to Pill, all children will inherit the variant.
+    pub fn pill(mut self) -> Self {
+        self.variant = TabVariant::Pill;
+        self
+    }
+
+    /// Set the Tab variant to Outline, all children will inherit the variant.
+    pub fn outline(mut self) -> Self {
+        self.variant = TabVariant::Outline;
+        self
+    }
+
+    /// Set the Tab variant to Segmented, all children will inherit the variant.
+    pub fn segmented(mut self) -> Self {
+        self.variant = TabVariant::Segmented;
+        self
+    }
+
+    /// Set the Tab variant to Underline, all children will inherit the variant.
+    pub fn underline(mut self) -> Self {
+        self.variant = TabVariant::Underline;
+        self
+    }
+
+    /// Set whether to show the menu button when tabs overflow, default is false.
+    pub fn menu(mut self, menu: bool) -> Self {
+        self.menu = menu;
+        self
+    }
+
     /// Track the scroll of the TabBar.
     pub fn track_scroll(mut self, scroll_handle: &ScrollHandle) -> Self {
         self.scroll_handle = Some(scroll_handle.clone());
@@ -54,27 +105,39 @@ impl TabBar {
         self
     }
 
+    /// Add children of the TabBar, all children will inherit the variant.
+    pub fn children(mut self, children: impl IntoIterator<Item = impl Into<Tab>>) -> Self {
+        self.children.extend(children.into_iter().map(Into::into));
+        self
+    }
+
+    /// Add child of the TabBar, tab will inherit the variant.
+    pub fn child(mut self, child: impl Into<Tab>) -> Self {
+        self.children.push(child.into());
+        self
+    }
+
+    /// Set the selected index of the TabBar.
+    pub fn selected_index(mut self, index: usize) -> Self {
+        self.selected_index = Some(index);
+        self
+    }
+
     /// Set the last empty space element of the TabBar.
     pub fn last_empty_space(mut self, last_empty_space: impl IntoElement) -> Self {
         self.last_empty_space = last_empty_space.into_any_element();
         self
     }
 
-    #[cfg(not(target_os = "windows"))]
+    /// Set the on_click callback of the TabBar, the first parameter is the index of the clicked tab.
-    pub fn height(window: &mut Window) -> Pixels {
+    ///
-        (1.75 * window.rem_size()).max(px(36.))
+    /// When this is set, the children's on_click will be ignored.
-    }
+    pub fn on_click<F>(mut self, on_click: F) -> Self
-}
+    where
-
+        F: Fn(&usize, &mut Window, &mut App) + 'static,
-impl Default for TabBar {
+    {
-    fn default() -> Self {
+        self.on_click = Some(Rc::new(on_click));
-        Self::new()
+        self
-    }
-}
-
-impl ParentElement for TabBar {
-    fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
-        self.children.extend(elements)
     }
 }
 
@@ -92,15 +155,69 @@ impl Sizable for TabBar {
 }
 
 impl RenderOnce for TabBar {
-    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
+    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
+        let default_gap = match self.size {
+            Size::Small | Size::XSmall => px(8.),
+            Size::Large => px(16.),
+            _ => px(12.),
+        };
+        let (bg, paddings, gap) = match self.variant {
+            TabVariant::Tab => {
+                let padding = Edges::all(px(0.));
+                (cx.theme().tab_background, padding, px(0.))
+            }
+            TabVariant::Outline => {
+                let padding = Edges::all(px(0.));
+                (gpui::transparent_black(), padding, default_gap)
+            }
+            TabVariant::Pill => {
+                let padding = Edges::all(px(0.));
+                (gpui::transparent_black(), padding, px(4.))
+            }
+            TabVariant::Segmented => {
+                let padding_x = match self.size {
+                    Size::XSmall => px(2.),
+                    Size::Small => px(3.),
+                    _ => px(4.),
+                };
+                let padding = Edges {
+                    left: padding_x,
+                    right: padding_x,
+                    ..Default::default()
+                };
+
+                (cx.theme().tab_background, padding, px(2.))
+            }
+            TabVariant::Underline => {
+                // This gap is same as the tab inner_paddings
+                let gap = match self.size {
+                    Size::XSmall => px(10.),
+                    Size::Small => px(12.),
+                    Size::Large => px(20.),
+                    _ => px(16.),
+                };
+
+                (gpui::transparent_black(), Edges::all(px(0.)), gap)
+            }
+        };
+
+        let mut item_labels = Vec::new();
+        let selected_index = self.selected_index;
+        let on_click = self.on_click.clone();
+
         self.base
             .group("tab-bar")
             .relative()
-            .refine_style(&self.style)
+            .flex()
-            .bg(cx.theme().surface_background)
+            .items_center()
-            .child(
+            .bg(bg)
+            .text_color(cx.theme().tab_foreground)
+            .when(
+                self.variant == TabVariant::Underline || self.variant == TabVariant::Tab,
+                |this| {
+                    this.child(
                         div()
-                    .id("border-bottom")
+                            .id("border-b")
                             .absolute()
                             .left_0()
                             .bottom_0()
@@ -108,21 +225,66 @@ impl RenderOnce for TabBar {
                             .border_b_1()
                             .border_color(cx.theme().border),
                     )
-            .text_color(cx.theme().text)
+                },
+            )
+            .rounded(self.variant.tab_bar_radius(self.size, cx))
+            .paddings(paddings)
+            .refine_style(&self.style)
             .when_some(self.prefix, |this, prefix| this.child(prefix))
             .child(
                 h_flex()
                     .id("tabs")
-                    .flex_grow()
+                    .flex_1()
                     .overflow_x_scroll()
                     .when_some(self.scroll_handle, |this, scroll_handle| {
                         this.track_scroll(&scroll_handle)
                     })
-                    .children(self.children)
+                    .gap(gap)
-                    .when(self.suffix.is_some(), |this| {
+                    .children(self.children.into_iter().enumerate().map(|(ix, child)| {
+                        item_labels.push((child.label.clone(), child.disabled));
+                        let tab_bar_prefix = child.tab_bar_prefix.unwrap_or(true);
+                        child
+                            .ix(ix)
+                            .tab_bar_prefix(tab_bar_prefix)
+                            .with_variant(self.variant)
+                            .with_size(self.size)
+                            .when_some(self.selected_index, |this, selected_ix| {
+                                this.selected(selected_ix == ix)
+                            })
+                            .when_some(self.on_click.clone(), move |this, on_click| {
+                                this.on_click(move |_, window, cx| on_click(&ix, window, cx))
+                            })
+                    }))
+                    .when(self.suffix.is_some() || self.menu, |this| {
                         this.child(self.last_empty_space)
                     }),
             )
+            .when(self.menu, |this| {
+                this.child(
+                    Button::new("more")
+                        .xsmall()
+                        .ghost()
+                        .icon(IconName::ChevronDown)
+                        .dropdown_menu(move |mut this, _, _| {
+                            this = this.scrollable(true);
+                            for (ix, (label, disabled)) in item_labels.iter().enumerate() {
+                                this = this.item(
+                                    PopupMenuItem::new(label.clone().unwrap_or_default())
+                                        .checked(selected_index == Some(ix))
+                                        .disabled(*disabled)
+                                        .when_some(on_click.clone(), |this, on_click| {
+                                            this.on_click(move |_, window, cx| {
+                                                on_click(&ix, window, cx)
+                                            })
+                                        }),
+                                )
+                            }
+
+                            this
+                        })
+                        .anchor(Corner::TopRight),
+                )
+            })
             .when_some(self.suffix, |this, suffix| this.child(suffix))
     }
 }

crates/ui/src/window_ext.rs

@@ -1,11 +1,11 @@
 use std::rc::Rc;
 
-use gpui::{App, Entity, SharedString, Window};
+use gpui::{App, ElementId, Entity, Window};
 
+use crate::Root;
 use crate::input::InputState;
 use crate::modal::Modal;
 use crate::notification::Notification;
-use crate::Root;
 
 /// Extension trait for [`Window`] to add modal, notification .. functionality.
 pub trait WindowExtension: Sized {
@@ -31,10 +31,15 @@ pub trait WindowExtension: Sized {
     where
         T: Into<Notification>;
 
-    /// Clears a notification by its ID.
+    /// Clear the unique notification.
-    fn clear_notification<T>(&mut self, id: T, cx: &mut App)
+    fn clear_notification<T: Sized + 'static>(&mut self, cx: &mut App);
-    where
+
-        T: Into<SharedString>;
+    /// Clear the unique notification with the given id.
+    fn clear_notification_by_id<T: Sized + 'static>(
+        &mut self,
+        key: impl Into<ElementId>,
+        cx: &mut App,
+    );
 
     /// Clear all notifications
     fn clear_notifications(&mut self, cx: &mut App);
@@ -88,13 +93,21 @@ impl WindowExtension for Window {
     }
 
     #[inline]
-    fn clear_notification<T>(&mut self, id: T, cx: &mut App)
+    fn clear_notification<T: Sized + 'static>(&mut self, cx: &mut App) {
-    where
+        Root::update(self, cx, |root, window, cx| {
-        T: Into<SharedString>,
+            root.clear_notification::<T>(window, cx);
-    {
+        })
-        let id = id.into();
+    }
-        Root::update(self, cx, move |root, window, cx| {
+
-            root.clear_notification(id, window, cx);
+    #[inline]
+    fn clear_notification_by_id<T: Sized + 'static>(
+        &mut self,
+        key: impl Into<ElementId>,
+        cx: &mut App,
+    ) {
+        let key: ElementId = key.into();
+        Root::update(self, cx, |root, window, cx| {
+            root.clear_notification_by_id::<T>(key, window, cx);
         })
     }
 

rustfmt.toml

@@ -1,3 +1,5 @@
+edition = "2024"
+style_edition = "2024"
 tab_spaces = 4
 newline_style = "Auto"
 reorder_imports = true