wip: revamp title bar elements

Cargo.lock

@@ -2735,6 +2735,7 @@ dependencies = [
  "strum",
  "util",
  "uuid",
+ "zed-font-kit",
 ]
 
 [[package]]
@@ -2812,6 +2813,7 @@ dependencies = [
  "windows-core 0.61.2",
  "windows-numerics 0.2.0",
  "windows-registry 0.5.3",
+ "zed-scap",
 ]
 
 [[package]]

Cargo.toml

@@ -12,7 +12,7 @@ publish = false
 
 # GPUI
 gpui = { git = "https://github.com/zed-industries/zed" }
-gpui_platform = { git = "https://github.com/zed-industries/zed" }
+gpui_platform = { git = "https://github.com/zed-industries/zed", features = ["font-kit", "screen-capture", "x11", "wayland", "runtime_shaders"] }
 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" }

assets/icons/panel-left-open.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.25 4C20.7688 4 22 5.23122 22 6.75V17.25C22 18.7688 20.7688 20 19.25 20H4.75C3.23122 20 2 18.7688 2 17.25V6.75C2 5.23122 3.23122 4 4.75 4H19.25ZM6.25 7.5C5.83579 7.5 5.5 7.83579 5.5 8.25V15.75C5.5 16.1642 5.83579 16.5 6.25 16.5C6.66421 16.5 7 16.1642 7 15.75V8.25C7 7.83579 6.66421 7.5 6.25 7.5Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 5.5V18.5H19.25C19.9404 18.5 20.5 17.9404 20.5 17.25V6.75C20.5 6.05964 19.9404 5.5 19.25 5.5H9ZM2 6.75C2 5.23122 3.23122 4 4.75 4H19.25C20.7688 4 22 5.23122 22 6.75V17.25C22 18.7688 20.7688 20 19.25 20H4.75C3.23122 20 2 18.7688 2 17.25V6.75Z" fill="currentColor"/>
 </svg>

assets/icons/panel-left.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
-<path d="M2.75 6.75C2.75 5.64543 3.64543 4.75 4.75 4.75H19.25C20.3546 4.75 21.25 5.64543 21.25 6.75V17.25C21.25 18.3546 20.3546 19.25 19.25 19.25H4.75C3.64543 19.25 2.75 18.3546 2.75 17.25V6.75Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M6.25 8.25V15.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M2.75 6.75C2.75 5.64543 3.64543 4.75 4.75 4.75H19.25C20.3546 4.75 21.25 5.64543 21.25 6.75V17.25C21.25 18.3546 20.3546 19.25 19.25 19.25H4.75C3.64543 19.25 2.75 18.3546 2.75 17.25V6.75Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M8.25 5V12V19" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
 </svg>

assets/icons/panel-right-open.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.75 4C3.23122 4 2 5.23122 2 6.75V17.25C2 18.7688 3.23122 20 4.75 20H19.25C20.7688 20 22 18.7688 22 17.25V6.75C22 5.23122 20.7688 4 19.25 4H4.75ZM17.75 7.5C18.1642 7.5 18.5 7.83579 18.5 8.25V15.75C18.5 16.1642 18.1642 16.5 17.75 16.5C17.3358 16.5 17 16.1642 17 15.75V8.25C17 7.83579 17.3358 7.5 17.75 7.5Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 5.5V18.5H4.75C4.05964 18.5 3.5 17.9404 3.5 17.25V6.75C3.5 6.05964 4.05964 5.5 4.75 5.5H15ZM22 6.75C22 5.23122 20.7688 4 19.25 4H4.75C3.23122 4 2 5.23122 2 6.75V17.25C2 18.7688 3.23122 20 4.75 20H19.25C20.7688 20 22 18.7688 22 17.25V6.75Z" fill="currentColor"/>
 </svg>

assets/icons/panel-right.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
-<path d="M2.75 6.75C2.75 5.64543 3.64543 4.75 4.75 4.75H19.25C20.3546 4.75 21.25 5.64543 21.25 6.75V17.25C21.25 18.3546 20.3546 19.25 19.25 19.25H4.75C3.64543 19.25 2.75 18.3546 2.75 17.25V6.75Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M17.75 8.25V15.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M15.75 5V19" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M2.75 6.75C2.75 5.64543 3.64543 4.75 4.75 4.75H19.25C20.3546 4.75 21.25 5.64543 21.25 6.75V17.25C21.25 18.3546 20.3546 19.25 19.25 19.25H4.75C3.64543 19.25 2.75 18.3546 2.75 17.25V6.75Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
 </svg>

assets/icons/refresh.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+<path d="M13 21C13.5523 21 14 20.5523 14 20C14 19.4477 13.5523 19 13 19C12.4477 19 12 19.4477 12 20C12 20.5523 12.4477 21 13 21Z" fill="currentColor"/><path d="M21 11C21 10.4477 20.5523 9.99999 20 9.99999C19.4477 9.99999 19 10.4477 19 11C19 11.5523 19.4477 12 20 12C20.5523 12 21 11.5523 21 11Z" fill="currentColor"/><path d="M19.9295 14.2679C20.4078 14.5441 20.5716 15.1557 20.2955 15.634C20.0193 16.1123 19.4078 16.2761 18.9295 16C18.4512 15.7238 18.2873 15.1123 18.5634 14.634C18.8396 14.1557 19.4512 13.9918 19.9295 14.2679Z" fill="currentColor"/><path d="M17.3676 19.2942C17.8459 19.0181 18.0098 18.4065 17.7336 17.9282C17.4575 17.4499 16.8459 17.286 16.3676 17.5621C15.8893 17.8383 15.7254 18.4499 16.0016 18.9282C16.2777 19.4065 16.8893 19.5703 17.3676 19.2942Z" fill="currentColor"/><path d="M18.9269 7.99998C18.4487 8.27612 17.8371 8.11225 17.5609 7.63396C17.2848 7.15566 17.4487 6.54407 17.9269 6.26793C18.4052 5.99179 19.0168 6.15566 19.293 6.63396C19.5691 7.11225 19.4052 7.72384 18.9269 7.99998Z" fill="currentColor"/><path d="M9.25 14.75V20.25H3.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.2493 4.41452C14.2521 3.98683 13.1537 3.75 12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 15.498 5.92698 18.4875 9 19.6876" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

crates/chat/src/lib.rs

@@ -65,6 +65,10 @@ impl InboxState {
     pub fn not_configured(&self) -> bool {
         matches!(self, InboxState::RelayNotAvailable)
     }
+
+    pub fn subscribing(&self) -> bool {
+        matches!(self, InboxState::Subscribing)
+    }
 }
 
 /// Chat Registry
@@ -133,14 +137,14 @@ impl ChatRegistry {
 
         // Run at the end of the current cycle
         cx.defer_in(window, |this, _window, cx| {
+            // Load chat rooms
+            this.get_rooms(cx);
+
             // Handle nostr notifications
             this.handle_notifications(cx);
 
             // Track unwrap gift wrap progress
             this.tracking(cx);
-
-            // Load chat rooms
-            this.get_rooms(cx);
         });
 
         Self {
@@ -190,7 +194,7 @@ impl ChatRegistry {
                         }
 
                         // Extract the rumor from the gift wrap event
-                        match Self::extract_rumor(&client, &device_signer, event.as_ref()).await {
+                        match extract_rumor(&client, &device_signer, event.as_ref()).await {
                             Ok(rumor) => match rumor.created_at >= initialized_at {
                                 true => {
                                     let new_message = NewMessage::new(event.id, rumor);
@@ -256,7 +260,7 @@ impl ChatRegistry {
     }
 
     /// Ensure messaging relays are set up for the current user.
-    fn ensure_messaging_relays(&mut self, cx: &mut Context<Self>) {
+    pub fn ensure_messaging_relays(&mut self, cx: &mut Context<Self>) {
         let task = self.verify_relays(cx);
 
         // Set state to checking
@@ -556,7 +560,11 @@ impl ChatRegistry {
             let public_key = signer.get_public_key().await?;
 
             // Get contacts
-            let contacts = client.database().contacts_public_keys(public_key).await?;
+            let contacts = client
+                .database()
+                .contacts_public_keys(public_key)
+                .await
+                .unwrap_or_default();
 
             // Construct authored filter
             let authored_filter = Filter::new()
@@ -652,147 +660,149 @@ impl ChatRegistry {
             }
         }
     }
+}
 
-    /// Unwraps a gift-wrapped event and processes its contents.
-    async fn extract_rumor(
-        client: &Client,
-        device_signer: &Option<Arc<dyn NostrSigner>>,
-        gift_wrap: &Event,
-    ) -> Result<UnsignedEvent, Error> {
-        // Try to get cached rumor first
-        if let Ok(event) = Self::get_rumor(client, gift_wrap.id).await {
-            return Ok(event);
-        }
-
-        // Try to unwrap with the available signer
-        let unwrapped = Self::try_unwrap(client, device_signer, gift_wrap).await?;
-        let mut rumor_unsigned = unwrapped.rumor;
-
-        // Generate event id for the rumor if it doesn't have one
-        rumor_unsigned.ensure_id();
-
-        // Cache the rumor
-        Self::set_rumor(client, gift_wrap.id, &rumor_unsigned).await?;
-
-        Ok(rumor_unsigned)
+/// Unwraps a gift-wrapped event and processes its contents.
+async fn extract_rumor(
+    client: &Client,
+    device_signer: &Option<Arc<dyn NostrSigner>>,
+    gift_wrap: &Event,
+) -> Result<UnsignedEvent, Error> {
+    // Try to get cached rumor first
+    if let Ok(event) = get_rumor(client, gift_wrap.id).await {
+        return Ok(event);
     }
 
-    /// Helper method to try unwrapping with different signers
-    async fn try_unwrap(
-        client: &Client,
-        device_signer: &Option<Arc<dyn NostrSigner>>,
-        gift_wrap: &Event,
-    ) -> Result<UnwrappedGift, Error> {
-        // Try with the device signer first
-        if let Some(signer) = device_signer {
-            if let Ok(unwrapped) = Self::try_unwrap_with(gift_wrap, signer).await {
-                return Ok(unwrapped);
-            };
+    // Try to unwrap with the available signer
+    let unwrapped = try_unwrap(client, device_signer, gift_wrap).await?;
+    let mut rumor = unwrapped.rumor;
+
+    // Generate event id for the rumor if it doesn't have one
+    rumor.ensure_id();
+
+    // Cache the rumor
+    if let Err(e) = set_rumor(client, gift_wrap.id, &rumor).await {
+        log::error!("Failed to cache rumor: {e:?}");
+    }
+
+    Ok(rumor)
+}
+
+/// Helper method to try unwrapping with different signers
+async fn try_unwrap(
+    client: &Client,
+    device_signer: &Option<Arc<dyn NostrSigner>>,
+    gift_wrap: &Event,
+) -> Result<UnwrappedGift, Error> {
+    // Try with the device signer first
+    if let Some(signer) = device_signer {
+        if let Ok(unwrapped) = try_unwrap_with(gift_wrap, signer).await {
+            return Ok(unwrapped);
         };
+    };
 
-        // Try with the user's signer
-        let user_signer = client.signer().context("Signer not found")?;
-        let unwrapped = UnwrappedGift::from_gift_wrap(user_signer, gift_wrap).await?;
+    // Try with the user's signer
+    let user_signer = client.signer().context("Signer not found")?;
+    let unwrapped = UnwrappedGift::from_gift_wrap(user_signer, gift_wrap).await?;
 
-        Ok(unwrapped)
-    }
+    Ok(unwrapped)
+}
 
-    /// Attempts to unwrap a gift wrap event with a given signer.
-    async fn try_unwrap_with(
-        gift_wrap: &Event,
-        signer: &Arc<dyn NostrSigner>,
-    ) -> Result<UnwrappedGift, Error> {
-        // Get the sealed event
-        let seal = signer
-            .nip44_decrypt(&gift_wrap.pubkey, &gift_wrap.content)
-            .await?;
+/// Attempts to unwrap a gift wrap event with a given signer.
+async fn try_unwrap_with(
+    gift_wrap: &Event,
+    signer: &Arc<dyn NostrSigner>,
+) -> Result<UnwrappedGift, Error> {
+    // Get the sealed event
+    let seal = signer
+        .nip44_decrypt(&gift_wrap.pubkey, &gift_wrap.content)
+        .await?;
 
-        // Verify the sealed event
-        let seal: Event = Event::from_json(seal)?;
-        seal.verify_with_ctx(&SECP256K1)?;
+    // Verify the sealed event
+    let seal: Event = Event::from_json(seal)?;
+    seal.verify_with_ctx(&SECP256K1)?;
 
-        // Get the rumor event
-        let rumor = signer.nip44_decrypt(&seal.pubkey, &seal.content).await?;
-        let rumor = UnsignedEvent::from_json(rumor)?;
+    // Get the rumor event
+    let rumor = signer.nip44_decrypt(&seal.pubkey, &seal.content).await?;
+    let rumor = UnsignedEvent::from_json(rumor)?;
 
-        Ok(UnwrappedGift {
-            sender: seal.pubkey,
-            rumor,
-        })
-    }
+    Ok(UnwrappedGift {
+        sender: seal.pubkey,
+        rumor,
+    })
+}
 
-    /// Stores an unwrapped event in local database with reference to original
-    async fn set_rumor(client: &Client, id: EventId, rumor: &UnsignedEvent) -> Result<(), Error> {
-        let rumor_id = rumor.id.context("Rumor is missing an event id")?;
-        let author = rumor.pubkey;
-        let conversation = Self::conversation_id(rumor);
+/// Stores an unwrapped event in local database with reference to original
+async fn set_rumor(client: &Client, id: EventId, rumor: &UnsignedEvent) -> Result<(), Error> {
+    let rumor_id = rumor.id.context("Rumor is missing an event id")?;
+    let author = rumor.pubkey;
+    let conversation = conversation_id(rumor);
 
-        let mut tags = rumor.tags.clone().to_vec();
+    let mut tags = rumor.tags.clone().to_vec();
 
-        // Add a unique identifier
-        tags.push(Tag::identifier(id));
+    // Add a unique identifier
+    tags.push(Tag::identifier(id));
 
-        // Add a reference to the rumor's author
+    // Add a reference to the rumor's author
+    tags.push(Tag::custom(
+        TagKind::SingleLetter(SingleLetterTag::lowercase(Alphabet::A)),
+        [author],
+    ));
+
+    // Add a conversation id
+    tags.push(Tag::custom(
+        TagKind::SingleLetter(SingleLetterTag::lowercase(Alphabet::C)),
+        [conversation.to_string()],
+    ));
+
+    // Add a reference to the rumor's id
+    tags.push(Tag::event(rumor_id));
+
+    // Add references to the rumor's participants
+    for receiver in rumor.tags.public_keys().copied() {
         tags.push(Tag::custom(
-            TagKind::SingleLetter(SingleLetterTag::lowercase(Alphabet::A)),
-            [author],
+            TagKind::SingleLetter(SingleLetterTag::lowercase(Alphabet::P)),
+            [receiver],
         ));
-
-        // Add a conversation id
-        tags.push(Tag::custom(
-            TagKind::SingleLetter(SingleLetterTag::lowercase(Alphabet::C)),
-            [conversation.to_string()],
-        ));
-
-        // Add a reference to the rumor's id
-        tags.push(Tag::event(rumor_id));
-
-        // Add references to the rumor's participants
-        for receiver in rumor.tags.public_keys().copied() {
-            tags.push(Tag::custom(
-                TagKind::SingleLetter(SingleLetterTag::lowercase(Alphabet::P)),
-                [receiver],
-            ));
-        }
-
-        // Convert rumor to json
-        let content = rumor.as_json();
-
-        // Construct the event
-        let event = EventBuilder::new(Kind::ApplicationSpecificData, content)
-            .tags(tags)
-            .sign(&Keys::generate())
-            .await?;
-
-        // Save the event to the database
-        client.database().save_event(&event).await?;
-
-        Ok(())
     }
 
-    /// Retrieves a previously unwrapped event from local database
-    async fn get_rumor(client: &Client, gift_wrap: EventId) -> Result<UnsignedEvent, Error> {
-        let filter = Filter::new()
-            .kind(Kind::ApplicationSpecificData)
-            .identifier(gift_wrap)
-            .limit(1);
+    // Convert rumor to json
+    let content = rumor.as_json();
 
-        if let Some(event) = client.database().query(filter).await?.first_owned() {
-            UnsignedEvent::from_json(event.content).map_err(|e| anyhow!(e))
-        } else {
-            Err(anyhow!("Event is not cached yet."))
-        }
-    }
+    // Construct the event
+    let event = EventBuilder::new(Kind::ApplicationSpecificData, content)
+        .tags(tags)
+        .sign(&Keys::generate())
+        .await?;
 
-    /// Get the conversation ID for a given rumor (message).
-    fn conversation_id(rumor: &UnsignedEvent) -> u64 {
-        let mut hasher = DefaultHasher::new();
-        let mut pubkeys: Vec<PublicKey> = rumor.tags.public_keys().copied().collect();
-        pubkeys.push(rumor.pubkey);
-        pubkeys.sort();
-        pubkeys.dedup();
-        pubkeys.hash(&mut hasher);
+    // Save the event to the database
+    client.database().save_event(&event).await?;
 
-        hasher.finish()
+    Ok(())
+}
+
+/// Retrieves a previously unwrapped event from local database
+async fn get_rumor(client: &Client, gift_wrap: EventId) -> Result<UnsignedEvent, Error> {
+    let filter = Filter::new()
+        .kind(Kind::ApplicationSpecificData)
+        .identifier(gift_wrap)
+        .limit(1);
+
+    if let Some(event) = client.database().query(filter).await?.first_owned() {
+        UnsignedEvent::from_json(event.content).map_err(|e| anyhow!(e))
+    } else {
+        Err(anyhow!("Event is not cached yet."))
     }
 }
+
+/// Get the conversation ID for a given rumor (message).
+fn conversation_id(rumor: &UnsignedEvent) -> u64 {
+    let mut hasher = DefaultHasher::new();
+    let mut pubkeys: Vec<PublicKey> = rumor.tags.public_keys().copied().collect();
+    pubkeys.push(rumor.pubkey);
+    pubkeys.sort();
+    pubkeys.dedup();
+    pubkeys.hash(&mut hasher);
+
+    hasher.finish()
+}

crates/chat_ui/src/lib.rs

@@ -657,7 +657,7 @@ impl ChatPanel {
             .id(ix)
             .relative()
             .w_full()
-            .py_1()
+            .py_2()
             .px_3()
             .bg(cx.theme().warning_background)
             .child(

crates/coop/src/actions.rs

@@ -1,94 +0,0 @@
-use std::sync::Mutex;
-
-use gpui::{actions, App};
-use key_store::{KeyItem, KeyStore};
-use nostr_connect::prelude::*;
-use state::NostrRegistry;
-
-// Sidebar actions
-actions!(sidebar, [Reload, RelayStatus]);
-
-// User actions
-actions!(
-    coop,
-    [
-        KeyringPopup,
-        DarkMode,
-        ViewProfile,
-        ViewRelays,
-        Themes,
-        Settings,
-        Logout,
-        Quit
-    ]
-);
-
-#[derive(Debug, Clone)]
-pub struct CoopAuthUrlHandler;
-
-impl AuthUrlHandler for CoopAuthUrlHandler {
-    #[allow(mismatched_lifetime_syntaxes)]
-    fn on_auth_url(&self, auth_url: Url) -> BoxedFuture<Result<()>> {
-        Box::pin(async move {
-            log::info!("Received Auth URL: {auth_url}");
-            webbrowser::open(auth_url.as_str())?;
-            Ok(())
-        })
-    }
-}
-
-pub fn load_embedded_fonts(cx: &App) {
-    let asset_source = cx.asset_source();
-    let font_paths = asset_source.list("fonts").unwrap();
-    let embedded_fonts = Mutex::new(Vec::new());
-    let executor = cx.background_executor();
-
-    cx.foreground_executor().block_on(executor.scoped(|scope| {
-        for font_path in &font_paths {
-            if !font_path.ends_with(".ttf") {
-                continue;
-            }
-
-            scope.spawn(async {
-                let font_bytes = asset_source.load(font_path).unwrap().unwrap();
-                embedded_fonts.lock().unwrap().push(font_bytes);
-            });
-        }
-    }));
-
-    cx.text_system()
-        .add_fonts(embedded_fonts.into_inner().unwrap())
-        .unwrap();
-}
-
-pub fn reset(cx: &mut App) {
-    let backend = KeyStore::global(cx).read(cx).backend();
-    let client = NostrRegistry::global(cx).read(cx).client();
-
-    cx.spawn(async move |cx| {
-        // Remove the signer
-        client.unset_signer().await;
-
-        // Delete user's credentials
-        backend
-            .delete_credentials(&KeyItem::User.to_string(), cx)
-            .await
-            .ok();
-
-        // Remove bunker's credentials if available
-        backend
-            .delete_credentials(&KeyItem::Bunker.to_string(), cx)
-            .await
-            .ok();
-
-        cx.update(|cx| {
-            cx.restart();
-        });
-    })
-    .detach();
-}
-
-pub fn quit(_: &Quit, cx: &mut App) {
-    log::info!("Gracefully quitting the application . . .");
-    cx.quit();
-}

crates/coop/src/panels/encryption_key.rs

@@ -0,0 +1,54 @@
+use gpui::{
+    AnyElement, App, AppContext, Context, Entity, EventEmitter, FocusHandle, Focusable,
+    IntoElement, Render, SharedString, Styled, Window,
+};
+use ui::dock_area::panel::{Panel, PanelEvent};
+use ui::v_flex;
+
+pub fn init(window: &mut Window, cx: &mut App) -> Entity<EncryptionPanel> {
+    cx.new(|cx| EncryptionPanel::new(window, cx))
+}
+
+#[derive(Debug)]
+pub struct EncryptionPanel {
+    name: SharedString,
+    focus_handle: FocusHandle,
+}
+
+impl EncryptionPanel {
+    fn new(_window: &mut Window, cx: &mut Context<Self>) -> Self {
+        Self {
+            name: "Encryption".into(),
+            focus_handle: cx.focus_handle(),
+        }
+    }
+}
+
+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 {
+        v_flex()
+            .size_full()
+            .items_center()
+            .justify_center()
+            .p_2()
+            .gap_10()
+    }
+}

crates/coop/src/panels/greeter.rs

@@ -1,8 +1,8 @@
 use chat::{ChatRegistry, InboxState};
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    div, relative, svg, AnyElement, App, AppContext, Context, Entity, EventEmitter, FocusHandle,
-    Focusable, IntoElement, ParentElement, Render, SharedString, Styled, Window,
+    div, svg, AnyElement, App, AppContext, Context, Entity, EventEmitter, FocusHandle, Focusable,
+    IntoElement, ParentElement, Render, SharedString, Styled, Window,
 };
 use state::{NostrRegistry, RelayState};
 use theme::ActiveTheme;
@@ -122,14 +122,13 @@ impl Render for GreeterPanel {
                                     .child(
                                         div()
                                             .font_semibold()
-                                            .line_height(relative(1.25))
+                                            .text_color(cx.theme().text)
                                             .child(SharedString::from(TITLE)),
                                     )
                                     .child(
                                         div()
-                                            .text_sm()
+                                            .text_xs()
                                             .text_color(cx.theme().text_muted)
-                                            .line_height(relative(1.25))
                                             .child(SharedString::from(DESCRIPTION)),
                                     ),
                             ),
@@ -141,9 +140,9 @@ impl Render for GreeterPanel {
                                 .w_full()
                                 .child(
                                     h_flex()
-                                        .gap_1()
+                                        .gap_2()
                                         .w_full()
-                                        .text_sm()
+                                        .text_xs()
                                         .font_semibold()
                                         .text_color(cx.theme().text_muted)
                                         .child(SharedString::from("Required Actions"))
@@ -199,9 +198,9 @@ impl Render for GreeterPanel {
                                 .w_full()
                                 .child(
                                     h_flex()
-                                        .gap_1()
+                                        .gap_2()
                                         .w_full()
-                                        .text_sm()
+                                        .text_xs()
                                         .font_semibold()
                                         .text_color(cx.theme().text_muted)
                                         .child(SharedString::from("Use your own identity"))
@@ -252,9 +251,9 @@ impl Render for GreeterPanel {
                             .w_full()
                             .child(
                                 h_flex()
-                                    .gap_1()
+                                    .gap_2()
                                     .w_full()
-                                    .text_sm()
+                                    .text_xs()
                                     .font_semibold()
                                     .text_color(cx.theme().text_muted)
                                     .child(SharedString::from("Get Started"))
@@ -264,14 +263,6 @@ impl Render for GreeterPanel {
                                 v_flex()
                                     .gap_2()
                                     .w_full()
-                                    .child(
-                                        Button::new("backup")
-                                            .icon(Icon::new(IconName::Shield))
-                                            .label("Backup account")
-                                            .ghost()
-                                            .small()
-                                            .justify_start(),
-                                    )
                                     .child(
                                         Button::new("profile")
                                             .icon(Icon::new(IconName::Profile))

crates/coop/src/panels/mod.rs

@@ -1,4 +1,5 @@
 pub mod connect;
+pub mod encryption_key;
 pub mod greeter;
 pub mod import;
 pub mod messaging_relays;

crates/coop/src/sidebar/mod.rs

@@ -659,7 +659,7 @@ impl Render for Sidebar {
                                                 .text_xs()
                                                 .font_semibold()
                                                 .text_color(cx.theme().text_muted)
-                                                .child(Icon::new(IconName::ChevronDown))
+                                                .child(Icon::new(IconName::ChevronDown).small())
                                                 .child(SharedString::from("Suggestions")),
                                         )
                                         .child(

crates/coop/src/workspace.rs

@@ -3,29 +3,40 @@ use std::sync::Arc;
 use chat::{ChatEvent, ChatRegistry, InboxState};
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    div, rems, App, AppContext, Axis, Context, Entity, InteractiveElement, IntoElement,
+    div, px, rems, Action, App, AppContext, Axis, Context, Entity, InteractiveElement, IntoElement,
     ParentElement, Render, SharedString, Styled, Subscription, Window,
 };
 use person::PersonRegistry;
+use serde::Deserialize;
 use smallvec::{smallvec, SmallVec};
 use state::{NostrRegistry, RelayState};
-use theme::{ActiveTheme, Theme, SIDEBAR_WIDTH, TITLEBAR_HEIGHT};
+use theme::{ActiveTheme, Theme, SIDEBAR_WIDTH};
 use title_bar::TitleBar;
 use ui::avatar::Avatar;
 use ui::button::{Button, ButtonVariants};
 use ui::dock_area::dock::DockPlacement;
-use ui::dock_area::panel::{PanelStyle, PanelView};
+use ui::dock_area::panel::PanelView;
 use ui::dock_area::{ClosePanel, DockArea, DockItem};
 use ui::menu::DropdownMenu;
-use ui::{h_flex, v_flex, Root, Sizable, WindowExtension};
+use ui::{h_flex, v_flex, IconName, Root, Sizable, WindowExtension};
 
-use crate::panels::greeter;
+use crate::panels::{encryption_key, greeter, messaging_relays, relay_list};
 use crate::sidebar;
 
 pub fn init(window: &mut Window, cx: &mut App) -> Entity<Workspace> {
     cx.new(|cx| Workspace::new(window, cx))
 }
 
+#[derive(Action, Clone, PartialEq, Eq, Deserialize)]
+#[action(namespace = workspace, no_json)]
+enum Command {
+    ReloadRelayList,
+    OpenRelayPanel,
+    ReloadInbox,
+    OpenInboxPanel,
+    OpenEncryptionPanel,
+}
+
 pub struct Workspace {
     /// App's Title Bar
     titlebar: Entity<TitleBar>,
@@ -41,7 +52,7 @@ impl Workspace {
     fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
         let chat = ChatRegistry::global(cx);
         let titlebar = cx.new(|_| TitleBar::new());
-        let dock = cx.new(|cx| DockArea::new(window, cx).style(PanelStyle::TabBar));
+        let dock = cx.new(|cx| DockArea::new(window, cx));
 
         let mut subscriptions = smallvec![];
 
@@ -168,14 +179,59 @@ impl Workspace {
         });
     }
 
+    fn on_command(&mut self, command: &Command, window: &mut Window, cx: &mut Context<Self>) {
+        match command {
+            Command::OpenEncryptionPanel => {
+                self.dock.update(cx, |this, cx| {
+                    this.add_panel(
+                        Arc::new(encryption_key::init(window, cx)),
+                        DockPlacement::Right,
+                        window,
+                        cx,
+                    );
+                });
+            }
+            Command::OpenInboxPanel => {
+                self.dock.update(cx, |this, cx| {
+                    this.add_panel(
+                        Arc::new(messaging_relays::init(window, cx)),
+                        DockPlacement::Right,
+                        window,
+                        cx,
+                    );
+                });
+            }
+            Command::OpenRelayPanel => {
+                self.dock.update(cx, |this, cx| {
+                    this.add_panel(
+                        Arc::new(relay_list::init(window, cx)),
+                        DockPlacement::Right,
+                        window,
+                        cx,
+                    );
+                });
+            }
+            Command::ReloadInbox => {
+                let nostr = NostrRegistry::global(cx);
+                nostr.update(cx, |this, cx| {
+                    this.ensure_relay_list(cx);
+                });
+            }
+            Command::ReloadRelayList => {
+                let chat = ChatRegistry::global(cx);
+                chat.update(cx, |this, cx| {
+                    this.ensure_messaging_relays(cx);
+                });
+            }
+        }
+    }
+
     fn titlebar_left(&mut self, _window: &mut Window, cx: &Context<Self>) -> impl IntoElement {
-        let chat = ChatRegistry::global(cx);
         let nostr = NostrRegistry::global(cx);
         let signer = nostr.read(cx).signer();
         let current_user = signer.public_key();
 
         h_flex()
-            .h(TITLEBAR_HEIGHT)
             .flex_shrink_0()
             .justify_between()
             .gap_2()
@@ -213,51 +269,207 @@ impl Workspace {
                         .child(SharedString::from("Connecting...")),
                 )
             })
-            .map(|this| match nostr.read(cx).relay_list_state() {
-                RelayState::Checking => this.child(
-                    div()
-                        .text_xs()
-                        .text_color(cx.theme().text_muted)
-                        .child(SharedString::from("Fetching user's relay list...")),
-                ),
-                RelayState::NotConfigured => this.child(
-                    h_flex()
-                        .h_6()
-                        .w_full()
-                        .px_1()
-                        .text_xs()
-                        .text_color(cx.theme().warning_foreground)
-                        .bg(cx.theme().warning_background)
-                        .rounded_sm()
-                        .child(SharedString::from("User hasn't configured a relay list")),
-                ),
-                _ => this,
-            })
-            .map(|this| match chat.read(cx).state(cx) {
-                InboxState::Checking => {
-                    this.child(div().text_xs().text_color(cx.theme().text_muted).child(
-                        SharedString::from("Fetching user's messaging relay list..."),
-                    ))
-                }
-                InboxState::RelayNotAvailable => this.child(
-                    h_flex()
-                        .h_6()
-                        .w_full()
-                        .px_2()
-                        .text_xs()
-                        .text_color(cx.theme().warning_foreground)
-                        .bg(cx.theme().warning_background)
-                        .rounded_full()
-                        .child(SharedString::from(
-                            "User hasn't configured a messaging relay list",
-                        )),
-                ),
-                _ => this,
-            })
     }
 
-    fn titlebar_right(&mut self, _window: &mut Window, _cx: &Context<Self>) -> impl IntoElement {
-        h_flex().h(TITLEBAR_HEIGHT).flex_shrink_0()
+    fn titlebar_right(&mut self, _window: &mut Window, cx: &Context<Self>) -> impl IntoElement {
+        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 inbox_state = chat.read(cx).state(cx);
+
+        let Some(pkey) = signer.public_key() else {
+            return div();
+        };
+
+        h_flex()
+            .when(!cx.theme().platform.is_mac(), |this| this.pr_2())
+            .gap_3()
+            .child(
+                Button::new("key")
+                    .icon(IconName::UserKey)
+                    .tooltip("Decoupled encryption key")
+                    .small()
+                    .ghost()
+                    .on_click(|_ev, window, cx| {
+                        window.dispatch_action(Box::new(Command::OpenEncryptionPanel), cx);
+                    }),
+            )
+            .child(
+                h_flex()
+                    .gap_2()
+                    .child(
+                        div()
+                            .text_xs()
+                            .text_color(cx.theme().text_muted)
+                            .map(|this| match inbox_state {
+                                InboxState::Checking => this.child(div().child(
+                                    SharedString::from("Fetching user's messaging relay list..."),
+                                )),
+                                InboxState::RelayNotAvailable => {
+                                    this.child(div().text_color(cx.theme().warning_active).child(
+                                        SharedString::from(
+                                            "User hasn't configured a messaging relay list",
+                                        ),
+                                    ))
+                                }
+                                _ => this,
+                            }),
+                    )
+                    .child(
+                        Button::new("inbox")
+                            .icon(IconName::Inbox)
+                            .tooltip("Inbox")
+                            .small()
+                            .ghost()
+                            .when(inbox_state.subscribing(), |this| this.indicator())
+                            .dropdown_menu(move |this, _window, _cx| {
+                                this.min_w(px(260.))
+                                    .label("Messaging Relays")
+                                    .menu_element_with_disabled(
+                                        Box::new(Command::OpenRelayPanel),
+                                        true,
+                                        move |_window, cx| {
+                                            let persons = PersonRegistry::global(cx);
+                                            let profile = persons.read(cx).get(&pkey, cx);
+                                            let urls = profile.messaging_relays();
+
+                                            v_flex()
+                                                .gap_1()
+                                                .w_full()
+                                                .items_start()
+                                                .justify_start()
+                                                .children({
+                                                    let mut items = vec![];
+
+                                                    for url in urls.iter() {
+                                                        items.push(
+                                                            h_flex()
+                                                                .h_6()
+                                                                .w_full()
+                                                                .gap_2()
+                                                                .px_2()
+                                                                .text_xs()
+                                                                .bg(cx
+                                                                    .theme()
+                                                                    .elevated_surface_background)
+                                                                .rounded(cx.theme().radius)
+                                                                .child(
+                                                                    div()
+                                                                        .size_1()
+                                                                        .rounded_full()
+                                                                        .bg(gpui::green()),
+                                                                )
+                                                                .child(SharedString::from(
+                                                                    url.to_string(),
+                                                                )),
+                                                        );
+                                                    }
+
+                                                    items
+                                                })
+                                        },
+                                    )
+                                    .separator()
+                                    .menu_with_icon(
+                                        "Reload",
+                                        IconName::Refresh,
+                                        Box::new(Command::ReloadInbox),
+                                    )
+                                    .menu_with_icon(
+                                        "Update relays",
+                                        IconName::Settings,
+                                        Box::new(Command::OpenInboxPanel),
+                                    )
+                            }),
+                    ),
+            )
+            .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())
+                            .dropdown_menu(move |this, _window, _cx| {
+                                this.min_w(px(260.))
+                                    .label("Relays")
+                                    .menu_element_with_disabled(
+                                        Box::new(Command::OpenRelayPanel),
+                                        true,
+                                        move |_window, cx| {
+                                            let nostr = NostrRegistry::global(cx);
+                                            let urls = nostr.read(cx).read_only_relays(&pkey, cx);
+
+                                            v_flex()
+                                                .gap_1()
+                                                .w_full()
+                                                .items_start()
+                                                .justify_start()
+                                                .children({
+                                                    let mut items = vec![];
+
+                                                    for url in urls.into_iter() {
+                                                        items.push(
+                                                            h_flex()
+                                                                .h_6()
+                                                                .w_full()
+                                                                .gap_2()
+                                                                .px_2()
+                                                                .text_xs()
+                                                                .bg(cx
+                                                                    .theme()
+                                                                    .elevated_surface_background)
+                                                                .rounded(cx.theme().radius)
+                                                                .child(
+                                                                    div()
+                                                                        .size_1()
+                                                                        .rounded_full()
+                                                                        .bg(gpui::green()),
+                                                                )
+                                                                .child(url),
+                                                        );
+                                                    }
+
+                                                    items
+                                                })
+                                        },
+                                    )
+                                    .separator()
+                                    .menu_with_icon(
+                                        "Reload",
+                                        IconName::Refresh,
+                                        Box::new(Command::ReloadRelayList),
+                                    )
+                                    .menu_with_icon(
+                                        "Update relay list",
+                                        IconName::Settings,
+                                        Box::new(Command::OpenRelayPanel),
+                                    )
+                            }),
+                    ),
+            )
     }
 }
 
@@ -277,6 +489,7 @@ impl Render for Workspace {
 
         div()
             .id(SharedString::from("workspace"))
+            .on_action(cx.listener(Self::on_command))
             .relative()
             .size_full()
             .child(

crates/device/src/lib.rs

@@ -180,7 +180,7 @@ impl DeviceRegistry {
 
     /// Reset the device state
     fn reset(&mut self, cx: &mut Context<Self>) {
-        self.state = DeviceState::Initial;
+        self.state = DeviceState::Idle;
         self.requests.update(cx, |this, cx| {
             this.clear();
             cx.notify();

crates/settings/src/lib.rs

@@ -52,8 +52,8 @@ pub enum AuthMode {
 /// Signer kind
 #[derive(Debug, Clone, Default, Serialize, Deserialize, PartialEq, Eq, PartialOrd, Ord)]
 pub enum SignerKind {
-    Auto,
     #[default]
+    Auto,
     User,
     Encryption,
 }

crates/state/src/device.rs

@@ -4,7 +4,7 @@ use nostr_sdk::prelude::*;
 #[derive(Debug, Clone, PartialEq, Eq, PartialOrd, Ord, Hash, Default)]
 pub enum DeviceState {
     #[default]
-    Initial,
+    Idle,
     Requesting,
     Set,
 }

crates/state/src/gossip.rs

@@ -1,5 +1,6 @@
 use std::collections::{HashMap, HashSet};
 
+use gpui::SharedString;
 use nostr_sdk::prelude::*;
 
 /// Gossip
@@ -9,6 +10,18 @@ pub struct Gossip {
 }
 
 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

crates/state/src/lib.rs

@@ -5,7 +5,7 @@ use std::time::Duration;
 
 use anyhow::{anyhow, Context as AnyhowContext, Error};
 use common::config_dir;
-use gpui::{App, AppContext, Context, Entity, Global, Task, Window};
+use gpui::{App, AppContext, Context, Entity, Global, SharedString, Task, Window};
 use nostr_connect::prelude::*;
 use nostr_lmdb::prelude::*;
 use nostr_sdk::prelude::*;
@@ -247,6 +247,11 @@ impl NostrRegistry {
         self.relay_list_state.clone()
     }
 
+    /// Get all relays for a given public key without ensuring connections
+    pub fn read_only_relays(&self, public_key: &PublicKey, cx: &App) -> Vec<SharedString> {
+        self.gossip.read(cx).read_only_relays(public_key)
+    }
+
     /// Get a list of write relays for a given public key
     pub fn write_relays(&self, public_key: &PublicKey, cx: &App) -> Task<Vec<RelayUrl>> {
         let client = self.client();
@@ -483,7 +488,7 @@ impl NostrRegistry {
         cx.notify();
     }
 
-    fn ensure_relay_list(&mut self, cx: &mut Context<Self>) {
+    pub fn ensure_relay_list(&mut self, cx: &mut Context<Self>) {
         let task = self.verify_relay_list(cx);
 
         self.tasks.push(cx.spawn(async move |this, cx| {

crates/title_bar/src/lib.rs

@@ -4,7 +4,7 @@ use gpui::MouseButton;
 #[cfg(not(target_os = "windows"))]
 use gpui::Pixels;
 use gpui::{
-    div, px, AnyElement, Context, Decorations, Hsla, InteractiveElement as _, IntoElement,
+    px, AnyElement, Context, Decorations, Hsla, InteractiveElement as _, IntoElement,
     ParentElement, Render, StatefulInteractiveElement as _, Styled, Window, WindowControlArea,
 };
 use smallvec::{smallvec, SmallVec};
@@ -127,62 +127,48 @@ impl Render for TitleBar {
                             }
                         })
                     })
+                    .when(!cx.theme().platform.is_mac(), |this| this.pr_2())
                     .children(children),
             )
-            .child(
-                h_flex()
-                    .absolute()
-                    .top_0()
-                    .right_0()
-                    .pr_2()
-                    .h(height)
-                    .child(
-                        div().when(!window.is_fullscreen(), |this| match cx.theme().platform {
-                            PlatformKind::Linux => {
-                                #[cfg(target_os = "linux")]
-                                if matches!(decorations, Decorations::Client { .. }) {
-                                    this.child(LinuxWindowControls::new(None))
-                                        .when(supported_controls.window_menu, |this| {
-                                            this.on_mouse_down(
-                                                MouseButton::Right,
-                                                move |ev, window, _| {
-                                                    window.show_window_menu(ev.position)
-                                                },
-                                            )
-                                        })
-                                        .on_mouse_move(cx.listener(move |this, _ev, window, _| {
-                                            if this.should_move {
-                                                this.should_move = false;
-                                                window.start_window_move();
-                                            }
-                                        }))
-                                        .on_mouse_down_out(cx.listener(
-                                            move |this, _ev, _window, _cx| {
-                                                this.should_move = false;
-                                            },
-                                        ))
-                                        .on_mouse_up(
-                                            MouseButton::Left,
-                                            cx.listener(move |this, _ev, _window, _cx| {
-                                                this.should_move = false;
-                                            }),
-                                        )
-                                        .on_mouse_down(
-                                            MouseButton::Left,
-                                            cx.listener(move |this, _ev, _window, _cx| {
-                                                this.should_move = true;
-                                            }),
-                                        )
-                                } else {
-                                    this
+            .when(!window.is_fullscreen(), |this| match cx.theme().platform {
+                PlatformKind::Linux => {
+                    #[cfg(target_os = "linux")]
+                    if matches!(decorations, Decorations::Client { .. }) {
+                        this.child(LinuxWindowControls::new(None))
+                            .when(supported_controls.window_menu, |this| {
+                                this.on_mouse_down(MouseButton::Right, move |ev, window, _| {
+                                    window.show_window_menu(ev.position)
+                                })
+                            })
+                            .on_mouse_move(cx.listener(move |this, _ev, window, _| {
+                                if this.should_move {
+                                    this.should_move = false;
+                                    window.start_window_move();
                                 }
-                                #[cfg(not(target_os = "linux"))]
-                                this
-                            }
-                            PlatformKind::Windows => this.child(WindowsWindowControls::new(height)),
-                            PlatformKind::Mac => this,
-                        }),
-                    ),
-            )
+                            }))
+                            .on_mouse_down_out(cx.listener(move |this, _ev, _window, _cx| {
+                                this.should_move = false;
+                            }))
+                            .on_mouse_up(
+                                MouseButton::Left,
+                                cx.listener(move |this, _ev, _window, _cx| {
+                                    this.should_move = false;
+                                }),
+                            )
+                            .on_mouse_down(
+                                MouseButton::Left,
+                                cx.listener(move |this, _ev, _window, _cx| {
+                                    this.should_move = true;
+                                }),
+                            )
+                    } else {
+                        this
+                    }
+                    #[cfg(not(target_os = "linux"))]
+                    this
+                }
+                PlatformKind::Windows => this.child(WindowsWindowControls::new(height)),
+                PlatformKind::Mac => this,
+            })
     }
 }

crates/ui/src/button.rs

@@ -131,8 +131,8 @@ pub struct Button {
 
     rounded: bool,
     compact: bool,
-    underline: bool,
     caret: bool,
+    indicator: bool,
 
     on_click: Option<Rc<dyn Fn(&ClickEvent, &mut Window, &mut App)>>,
     on_hover: Option<Rc<dyn Fn(&bool, &mut Window, &mut App)>>,
@@ -162,7 +162,7 @@ impl Button {
             variant: ButtonVariant::default(),
             disabled: false,
             selected: false,
-            underline: false,
+            indicator: false,
             compact: false,
             caret: false,
             rounded: false,
@@ -219,9 +219,9 @@ impl Button {
         self
     }
 
-    /// Set true to show the underline indicator.
-    pub fn underline(mut self) -> Self {
-        self.underline = true;
+    /// Set true to show the indicator.
+    pub fn indicator(mut self) -> Self {
+        self.indicator = true;
         self
     }
 
@@ -455,6 +455,17 @@ impl RenderOnce for Button {
                     })
             })
             .text_color(normal_style.fg)
+            .when(self.indicator && !self.disabled, |this| {
+                this.child(
+                    div()
+                        .absolute()
+                        .bottom_px()
+                        .right_px()
+                        .size_1()
+                        .rounded_full()
+                        .bg(gpui::green()),
+                )
+            })
             .when(!self.disabled && !self.selected, |this| {
                 this.bg(normal_style.bg)
                     .hover(|this| {
@@ -470,17 +481,6 @@ impl RenderOnce for Button {
                 let selected_style = style.selected(cx);
                 this.bg(selected_style.bg).text_color(selected_style.fg)
             })
-            .when(self.selected && self.underline, |this| {
-                this.child(
-                    div()
-                        .absolute()
-                        .bottom_0()
-                        .left_0()
-                        .h_px()
-                        .w_full()
-                        .bg(cx.theme().element_background),
-                )
-            })
             .when(self.disabled, |this| {
                 let disabled_style = style.disabled(cx);
                 this.cursor_not_allowed()

crates/ui/src/dock_area/mod.rs

@@ -590,17 +590,13 @@ impl DockArea {
                 }
             }
             DockPlacement::Right => {
-                if let Some(dock) = self.right_dock.as_ref() {
-                    dock.update(cx, |dock, cx| dock.add_panel(panel, window, cx))
-                } else {
-                    self.set_right_dock(
-                        DockItem::tabs(vec![panel], None, &weak_self, window, cx),
-                        Some(px(320.)),
-                        true,
-                        window,
-                        cx,
-                    );
-                }
+                self.set_right_dock(
+                    DockItem::tabs(vec![panel], None, &weak_self, window, cx),
+                    Some(px(320.)),
+                    true,
+                    window,
+                    cx,
+                );
             }
             DockPlacement::Center => {
                 self.items

crates/ui/src/dock_area/stack_panel.rs

@@ -371,7 +371,6 @@ impl Focusable for StackPanel {
 }
 
 impl EventEmitter<PanelEvent> for StackPanel {}
-
 impl EventEmitter<DismissEvent> for StackPanel {}
 
 impl Render for StackPanel {

crates/ui/src/dock_area/tab_panel.rs

@@ -479,12 +479,12 @@ impl TabPanel {
         _window: &mut Window,
         cx: &mut Context<Self>,
     ) -> Option<Button> {
+        let dock_area = self.dock_area.upgrade()?.read(cx);
+
         if self.zoomed {
             return None;
         }
 
-        let dock_area = self.dock_area.upgrade()?.read(cx);
-
         if !dock_area.toggle_button_visible {
             return None;
         }
@@ -590,10 +590,11 @@ impl TabPanel {
                 .justify_between()
                 .items_center()
                 .line_height(rems(1.0))
-                .h(px(30.))
+                .h(TABBAR_HEIGHT)
                 .py_2()
                 .pl_3()
                 .pr_2()
+                .bg(cx.theme().panel_background)
                 .when(left_dock_button.is_some(), |this| this.pl_2())
                 .when(right_dock_button.is_some(), |this| this.pr_2())
                 .when(has_extend_dock_button, |this| {
@@ -610,6 +611,7 @@ impl TabPanel {
                     div()
                         .id("tab")
                         .flex_1()
+                        .px_2()
                         .min_w_16()
                         .overflow_hidden()
                         .whitespace_nowrap()
@@ -638,7 +640,8 @@ impl TabPanel {
                         .flex_shrink_0()
                         .ml_1()
                         .gap_1()
-                        .child(self.render_toolbar(state, window, cx)),
+                        .child(self.render_toolbar(state, window, cx))
+                        .children(right_dock_button),
                 )
                 .into_any_element();
         }

crates/ui/src/icon.rs

@@ -49,6 +49,7 @@ pub enum IconName {
     Profile,
     Relay,
     Reply,
+    Refresh,
     Search,
     Settings,
     Sun,
@@ -113,6 +114,7 @@ impl IconNamed for IconName {
             Self::Profile => "icons/profile.svg",
             Self::Relay => "icons/relay.svg",
             Self::Reply => "icons/reply.svg",
+            Self::Refresh => "icons/refresh.svg",
             Self::Search => "icons/search.svg",
             Self::Settings => "icons/settings.svg",
             Self::Sun => "icons/sun.svg",

crates/ui/src/menu/menu_item.rs

@@ -95,7 +95,7 @@ impl RenderOnce for MenuItemElement {
             .gap_x_1()
             .py_1()
             .px_2()
-            .text_base()
+            .text_sm()
             .text_color(cx.theme().text)
             .relative()
             .items_center()

crates/ui/src/menu/popup_menu.rs

@@ -70,6 +70,7 @@ pub enum PopupMenuItem {
 }
 
 impl FluentBuilder for PopupMenuItem {}
+
 impl PopupMenuItem {
     /// Create a new menu item with the given label.
     #[inline]
@@ -1025,7 +1026,7 @@ impl PopupMenu {
         } else if checked {
             Icon::new(IconName::Check)
         } else {
-            Icon::empty()
+            return None;
         };
 
         Some(icon.small())
@@ -1116,7 +1117,14 @@ impl PopupMenu {
                     .items_center()
                     .gap_x_1()
                     .children(Self::render_icon(has_left_icon, false, None, window, cx))
-                    .child(div().flex_1().child(label.clone())),
+                    .child(
+                        div()
+                            .flex_1()
+                            .text_xs()
+                            .font_semibold()
+                            .text_color(cx.theme().text_muted)
+                            .child(label.clone()),
+                    ),
             ),
             PopupMenuItem::ElementItem {
                 render,
@@ -1281,6 +1289,7 @@ impl Render for PopupMenu {
         let view = cx.entity().clone();
         let items_count = self.menu_items.len();
 
+        let max_width = self.max_width();
         let max_height = self.max_height.unwrap_or_else(|| {
             let window_half_height = window.window_bounds().get_bounds().size.height * 0.5;
             window_half_height.min(px(450.))
@@ -1291,7 +1300,6 @@ impl Render for PopupMenu {
             .iter()
             .any(|item| item.has_left_icon(self.check_side));
 
-        let max_width = self.max_width();
         let options = RenderOptions {
             has_left_icon,
             check_side: self.check_side,

crates/ui/src/popup_menu.rs

@@ -1,776 +0,0 @@
-use std::ops::Deref;
-use std::rc::Rc;
-
-use gpui::prelude::FluentBuilder;
-use gpui::{
-    actions, anchored, canvas, div, px, rems, Action, AnyElement, App, AppContext, AsKeystroke,
-    Bounds, Context, Corner, DismissEvent, Edges, Entity, EventEmitter, FocusHandle, Focusable,
-    InteractiveElement, IntoElement, KeyBinding, Keystroke, ParentElement, Pixels, Render,
-    ScrollHandle, SharedString, StatefulInteractiveElement, Styled, Subscription, WeakEntity,
-    Window,
-};
-use theme::ActiveTheme;
-
-use crate::button::Button;
-use crate::list::ListItem;
-use crate::popover::Popover;
-use crate::scroll::{Scrollbar, ScrollbarState};
-use crate::{h_flex, v_flex, Icon, IconName, Selectable, Sizable as _, StyledExt};
-
-actions!(
-    menu,
-    [
-        /// Trigger confirm action when user presses enter button
-        Confirm,
-        /// Trigger dismiss action when user presses escape button
-        Dismiss,
-        /// Select the next item when user presses up button
-        SelectNext,
-        /// Select the previous item when user preses down button
-        SelectPrev
-    ]
-);
-
-const ITEM_HEIGHT: Pixels = px(26.);
-
-pub fn init(cx: &mut App) {
-    let context = Some("PopupMenu");
-
-    cx.bind_keys([
-        KeyBinding::new("enter", Confirm, context),
-        KeyBinding::new("escape", Dismiss, context),
-        KeyBinding::new("up", SelectPrev, context),
-        KeyBinding::new("down", SelectNext, context),
-    ]);
-}
-
-pub trait PopupMenuExt: Styled + Selectable + InteractiveElement + IntoElement + 'static {
-    /// Create a popup menu with the given items, anchored to the TopLeft corner
-    fn popup_menu(
-        self,
-        f: impl Fn(PopupMenu, &mut Window, &mut Context<PopupMenu>) -> PopupMenu + 'static,
-    ) -> Popover<PopupMenu> {
-        self.popup_menu_with_anchor(Corner::TopLeft, f)
-    }
-
-    /// Create a popup menu with the given items, anchored to the given corner
-    fn popup_menu_with_anchor(
-        mut self,
-        anchor: impl Into<Corner>,
-        f: impl Fn(PopupMenu, &mut Window, &mut Context<PopupMenu>) -> PopupMenu + 'static,
-    ) -> Popover<PopupMenu> {
-        let style = self.style().clone();
-        let id = self.interactivity().element_id.clone();
-
-        Popover::new(SharedString::from(format!("popup-menu:{id:?}")))
-            .no_style()
-            .trigger(self)
-            .trigger_style(style)
-            .anchor(anchor.into())
-            .content(move |window, cx| {
-                PopupMenu::build(window, cx, |menu, window, cx| f(menu, window, cx))
-            })
-    }
-}
-
-impl PopupMenuExt for Button {}
-
-enum PopupMenuItem {
-    Title(SharedString),
-    Separator,
-    Item {
-        icon: Option<Icon>,
-        label: SharedString,
-        action: Option<Box<dyn Action>>,
-        #[allow(clippy::type_complexity)]
-        handler: Rc<dyn Fn(&mut Window, &mut App)>,
-    },
-    ElementItem {
-        #[allow(clippy::type_complexity)]
-        render: Box<dyn Fn(&mut Window, &mut App) -> AnyElement + 'static>,
-        #[allow(clippy::type_complexity)]
-        handler: Rc<dyn Fn(&mut Window, &mut App)>,
-    },
-    Submenu {
-        icon: Option<Icon>,
-        label: SharedString,
-        menu: Entity<PopupMenu>,
-    },
-}
-
-impl PopupMenuItem {
-    fn is_clickable(&self) -> bool {
-        !matches!(self, PopupMenuItem::Separator)
-    }
-
-    fn is_separator(&self) -> bool {
-        matches!(self, PopupMenuItem::Separator)
-    }
-
-    fn has_icon(&self) -> bool {
-        matches!(self, PopupMenuItem::Item { icon: Some(_), .. })
-    }
-}
-
-pub struct PopupMenu {
-    /// The parent menu of this menu, if this is a submenu
-    parent_menu: Option<WeakEntity<Self>>,
-    focus_handle: FocusHandle,
-    menu_items: Vec<PopupMenuItem>,
-    has_icon: bool,
-    selected_index: Option<usize>,
-    min_width: Pixels,
-    max_width: Pixels,
-    hovered_menu_ix: Option<usize>,
-    bounds: Bounds<Pixels>,
-
-    scrollable: bool,
-    scroll_handle: ScrollHandle,
-    scroll_state: ScrollbarState,
-
-    action_focus_handle: Option<FocusHandle>,
-    #[allow(dead_code)]
-    subscriptions: Vec<Subscription>,
-}
-
-impl PopupMenu {
-    pub fn build(
-        window: &mut Window,
-        cx: &mut App,
-        f: impl FnOnce(Self, &mut Window, &mut Context<PopupMenu>) -> Self,
-    ) -> Entity<Self> {
-        cx.new(|cx| {
-            let focus_handle = cx.focus_handle();
-            let subscriptions =
-                vec![
-                    cx.on_blur(&focus_handle, window, |this: &mut PopupMenu, window, cx| {
-                        this.dismiss(&Dismiss, window, cx)
-                    }),
-                ];
-            let menu = Self {
-                focus_handle,
-                action_focus_handle: None,
-                parent_menu: None,
-                menu_items: Vec::new(),
-                selected_index: None,
-                min_width: px(120.),
-                max_width: px(500.),
-                has_icon: false,
-                hovered_menu_ix: None,
-                bounds: Bounds::default(),
-                scrollable: false,
-                scroll_handle: ScrollHandle::default(),
-                scroll_state: ScrollbarState::default(),
-                subscriptions,
-            };
-
-            f(menu, window, cx)
-        })
-    }
-
-    /// Bind the focus handle of the menu, when clicked, it will focus back to this handle and then dispatch the action
-    pub fn track_focus(mut self, focus_handle: &FocusHandle) -> Self {
-        self.action_focus_handle = Some(focus_handle.clone());
-        self
-    }
-
-    /// Set min width of the popup menu, default is 120px
-    pub fn min_w(mut self, width: impl Into<Pixels>) -> Self {
-        self.min_width = width.into();
-        self
-    }
-
-    /// Set max width of the popup menu, default is 500px
-    pub fn max_w(mut self, width: impl Into<Pixels>) -> Self {
-        self.max_width = width.into();
-        self
-    }
-
-    /// Set the menu to be scrollable to show vertical scrollbar.
-    ///
-    /// NOTE: If this is true, the sub-menus will cannot be support.
-    pub fn scrollable(mut self) -> Self {
-        self.scrollable = true;
-        self
-    }
-
-    /// Add Menu Item
-    pub fn menu(mut self, label: impl Into<SharedString>, action: Box<dyn Action>) -> Self {
-        self.add_menu_item(label, None, action);
-        self
-    }
-
-    /// Add Menu to open link
-    pub fn link(mut self, label: impl Into<SharedString>, href: impl Into<String>) -> Self {
-        let href = href.into();
-        self.menu_items.push(PopupMenuItem::Item {
-            icon: None,
-            label: label.into(),
-            action: None,
-            handler: Rc::new(move |_window, cx| cx.open_url(&href)),
-        });
-        self
-    }
-
-    /// Add Menu to open link
-    pub fn link_with_icon(
-        mut self,
-        label: impl Into<SharedString>,
-        icon: impl Into<Icon>,
-        href: impl Into<String>,
-    ) -> Self {
-        let href = href.into();
-        self.menu_items.push(PopupMenuItem::Item {
-            icon: Some(icon.into()),
-            label: label.into(),
-            action: None,
-            handler: Rc::new(move |_window, cx| cx.open_url(&href)),
-        });
-        self
-    }
-
-    /// Add Menu Item with Icon
-    pub fn menu_with_icon(
-        mut self,
-        label: impl Into<SharedString>,
-        icon: impl Into<Icon>,
-        action: Box<dyn Action>,
-    ) -> Self {
-        self.add_menu_item(label, Some(icon.into()), action);
-        self
-    }
-
-    /// Add Menu Item with check icon
-    pub fn menu_with_check(
-        mut self,
-        label: impl Into<SharedString>,
-        checked: bool,
-        action: Box<dyn Action>,
-    ) -> Self {
-        if checked {
-            self.add_menu_item(label, Some(IconName::Check.into()), action);
-        } else {
-            self.add_menu_item(label, None, action);
-        }
-
-        self
-    }
-
-    /// Add Menu Item with custom element render.
-    pub fn menu_with_element<F, E>(mut self, builder: F, action: Box<dyn Action>) -> Self
-    where
-        F: Fn(&mut Window, &mut App) -> E + 'static,
-        E: IntoElement,
-    {
-        self.menu_items.push(PopupMenuItem::ElementItem {
-            render: Box::new(move |window, cx| builder(window, cx).into_any_element()),
-            handler: self.wrap_handler(action),
-        });
-        self
-    }
-
-    #[allow(clippy::type_complexity)]
-    fn wrap_handler(&self, action: Box<dyn Action>) -> Rc<dyn Fn(&mut Window, &mut App)> {
-        let action_focus_handle = self.action_focus_handle.clone();
-
-        Rc::new(move |window, cx| {
-            window.activate_window();
-
-            // Focus back to the user expected focus handle
-            // Then the actions listened on that focus handle can be received
-            //
-            // For example:
-            //
-            // TabPanel
-            //   |- PopupMenu
-            //   |- PanelContent (actions are listened here)
-            //
-            // The `PopupMenu` and `PanelContent` are at the same level in the TabPanel
-            // If the actions are listened on the `PanelContent`,
-            // it can't receive the actions from the `PopupMenu`, unless we focus on `PanelContent`.
-            if let Some(handle) = action_focus_handle.as_ref() {
-                window.focus(handle);
-            }
-
-            window.dispatch_action(action.boxed_clone(), cx);
-        })
-    }
-
-    fn add_menu_item(
-        &mut self,
-        label: impl Into<SharedString>,
-        icon: Option<Icon>,
-        action: Box<dyn Action>,
-    ) -> &mut Self {
-        if icon.is_some() {
-            self.has_icon = true;
-        }
-
-        self.menu_items.push(PopupMenuItem::Item {
-            icon,
-            label: label.into(),
-            action: Some(action.boxed_clone()),
-            handler: self.wrap_handler(action),
-        });
-        self
-    }
-
-    /// Add a title menu item
-    pub fn title(mut self, label: impl Into<SharedString>) -> Self {
-        if self.menu_items.is_empty() {
-            return self;
-        }
-
-        if let Some(PopupMenuItem::Title(_)) = self.menu_items.last() {
-            return self;
-        }
-
-        self.menu_items.push(PopupMenuItem::Title(label.into()));
-        self
-    }
-
-    /// Add a separator Menu Item
-    pub fn separator(mut self) -> Self {
-        if self.menu_items.is_empty() {
-            return self;
-        }
-
-        if let Some(PopupMenuItem::Separator) = self.menu_items.last() {
-            return self;
-        }
-
-        self.menu_items.push(PopupMenuItem::Separator);
-        self
-    }
-
-    pub fn submenu(
-        self,
-        label: impl Into<SharedString>,
-        window: &mut Window,
-        cx: &mut Context<Self>,
-        f: impl Fn(PopupMenu, &mut Window, &mut Context<PopupMenu>) -> PopupMenu + 'static,
-    ) -> Self {
-        self.submenu_with_icon(None, label, window, cx, f)
-    }
-
-    /// Add a Submenu item with icon
-    pub fn submenu_with_icon(
-        mut self,
-        icon: Option<Icon>,
-        label: impl Into<SharedString>,
-        window: &mut Window,
-        cx: &mut Context<Self>,
-        f: impl Fn(PopupMenu, &mut Window, &mut Context<PopupMenu>) -> PopupMenu + 'static,
-    ) -> Self {
-        let submenu = PopupMenu::build(window, cx, f);
-        let parent_menu = cx.entity().downgrade();
-
-        submenu.update(cx, |view, _| {
-            view.parent_menu = Some(parent_menu);
-        });
-
-        self.menu_items.push(PopupMenuItem::Submenu {
-            icon,
-            label: label.into(),
-            menu: submenu,
-        });
-        self
-    }
-
-    pub(crate) fn active_submenu(&self) -> Option<Entity<PopupMenu>> {
-        if let Some(ix) = self.hovered_menu_ix {
-            if let Some(item) = self.menu_items.get(ix) {
-                return match item {
-                    PopupMenuItem::Submenu { menu, .. } => Some(menu.clone()),
-                    _ => None,
-                };
-            }
-        }
-
-        None
-    }
-
-    pub fn is_empty(&self) -> bool {
-        self.menu_items.is_empty()
-    }
-
-    fn clickable_menu_items(&self) -> impl Iterator<Item = (usize, &PopupMenuItem)> {
-        self.menu_items
-            .iter()
-            .enumerate()
-            .filter(|(_, item)| item.is_clickable())
-    }
-
-    fn on_click(&mut self, ix: usize, window: &mut Window, cx: &mut Context<Self>) {
-        cx.stop_propagation();
-        window.prevent_default();
-        self.selected_index = Some(ix);
-        self.confirm(&Confirm, window, cx);
-    }
-
-    fn confirm(&mut self, _: &Confirm, window: &mut Window, cx: &mut Context<Self>) {
-        if let Some(index) = self.selected_index {
-            let item = self.menu_items.get(index);
-            match item {
-                Some(PopupMenuItem::Item { handler, .. }) => {
-                    handler(window, cx);
-                    self.dismiss(&Dismiss, window, cx)
-                }
-                Some(PopupMenuItem::ElementItem { handler, .. }) => {
-                    handler(window, cx);
-                    self.dismiss(&Dismiss, window, cx)
-                }
-                _ => {}
-            }
-        }
-    }
-
-    fn select_next(&mut self, _: &SelectNext, _window: &mut Window, cx: &mut Context<Self>) {
-        let count = self.clickable_menu_items().count();
-        if count > 0 {
-            let last_ix = count.saturating_sub(1);
-            let ix = self
-                .selected_index
-                .map(|index| if index == last_ix { 0 } else { index + 1 })
-                .unwrap_or(0);
-
-            self.selected_index = Some(ix);
-            cx.notify();
-        }
-    }
-
-    fn select_prev(&mut self, _: &SelectPrev, _window: &mut Window, cx: &mut Context<Self>) {
-        let count = self.clickable_menu_items().count();
-        if count > 0 {
-            let last_ix = count.saturating_sub(1);
-
-            let ix = self
-                .selected_index
-                .map(|index| {
-                    if index == last_ix {
-                        0
-                    } else {
-                        index.saturating_sub(1)
-                    }
-                })
-                .unwrap_or(last_ix);
-            self.selected_index = Some(ix);
-            cx.notify();
-        }
-    }
-
-    // TODO: fix this
-    #[allow(clippy::only_used_in_recursion)]
-    fn dismiss(&mut self, _: &Dismiss, window: &mut Window, cx: &mut Context<Self>) {
-        if self.active_submenu().is_some() {
-            return;
-        }
-
-        cx.emit(DismissEvent);
-
-        // Dismiss parent menu, when this menu is dismissed
-        if let Some(parent_menu) = self.parent_menu.clone().and_then(|menu| menu.upgrade()) {
-            parent_menu.update(cx, |view, cx| {
-                view.hovered_menu_ix = None;
-                view.dismiss(&Dismiss, window, cx);
-            })
-        }
-    }
-
-    fn render_keybinding(
-        action: Option<Box<dyn Action>>,
-        window: &mut Window,
-        cx: &mut Context<Self>,
-    ) -> Option<impl IntoElement> {
-        if let Some(action) = action {
-            if let Some(keybinding) = window.bindings_for_action(action.deref()).first() {
-                let el = div().text_color(cx.theme().text_muted).children(
-                    keybinding
-                        .keystrokes()
-                        .iter()
-                        .map(|key| key_shortcut(key.as_keystroke().clone())),
-                );
-
-                return Some(el);
-            }
-        }
-
-        None
-    }
-
-    fn render_icon(
-        has_icon: bool,
-        icon: Option<Icon>,
-        _window: &Window,
-        _cx: &Context<Self>,
-    ) -> Option<impl IntoElement> {
-        let icon_placeholder = if has_icon { Some(Icon::empty()) } else { None };
-
-        if !has_icon {
-            return None;
-        }
-
-        let icon = h_flex()
-            .w_3p5()
-            .h_3p5()
-            .items_center()
-            .justify_center()
-            .text_sm()
-            .map(|this| {
-                if let Some(icon) = icon {
-                    this.child(icon.clone().small())
-                } else {
-                    this.children(icon_placeholder.clone())
-                }
-            });
-
-        Some(icon)
-    }
-}
-
-impl FluentBuilder for PopupMenu {}
-
-impl EventEmitter<DismissEvent> for PopupMenu {}
-
-impl Focusable for PopupMenu {
-    fn focus_handle(&self, _: &App) -> FocusHandle {
-        self.focus_handle.clone()
-    }
-}
-
-impl Render for PopupMenu {
-    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
-        let view = cx.entity().clone();
-        let has_icon = self.menu_items.iter().any(|item| item.has_icon());
-        let items_count = self.menu_items.len();
-        let max_width = self.max_width;
-        let bounds = self.bounds;
-
-        let window_haft_height = window.window_bounds().get_bounds().size.height * 0.5;
-        let max_height = window_haft_height.min(px(450.));
-
-        v_flex()
-            .id("popup-menu")
-            .key_context("PopupMenu")
-            .track_focus(&self.focus_handle)
-            .on_action(cx.listener(Self::select_next))
-            .on_action(cx.listener(Self::select_prev))
-            .on_action(cx.listener(Self::confirm))
-            .on_action(cx.listener(Self::dismiss))
-            .on_mouse_down_out(cx.listener(|this, _, window, cx| this.dismiss(&Dismiss, window, cx)))
-            .popover_style(cx)
-            .relative()
-            .p_1()
-            .child(
-                div()
-                    .id("popup-menu-items")
-                    .when(self.scrollable, |this| {
-                        this.max_h(max_height)
-                            .overflow_y_scroll()
-                            .track_scroll(&self.scroll_handle)
-                    })
-                    .child(
-                        v_flex()
-                            .gap_y_0p5()
-                            .min_w(self.min_width)
-                            .max_w(self.max_width)
-                            .min_w(rems(8.))
-                            .child({
-                                canvas(
-                                    move |bounds, _, cx| view.update(cx, |r, _| r.bounds = bounds),
-                                    |_, _, _, _| {},
-                                )
-                                .absolute()
-                                .size_full()
-                            })
-                            .children(
-                                self.menu_items
-                                    .iter_mut()
-                                    .enumerate()
-                                    // Skip last separator
-                                    .filter(|(ix, item)| !(*ix == items_count - 1 && item.is_separator()))
-                                    .map(|(ix, item)| {
-                                        let this = ListItem::new(("menu-item", ix))
-                                            .relative()
-                                            .items_center()
-                                            .py_0()
-                                            .px_2()
-                                            .rounded_md()
-                                            .text_sm()
-                                            .on_mouse_enter(cx.listener(move |this, _, _window, cx| {
-                                                this.hovered_menu_ix = Some(ix);
-                                                cx.notify();
-                                            }));
-
-                                        match item {
-                                            PopupMenuItem::Title(label) => {
-                                                this.child(
-                                                    div()
-                                                        .text_xs()
-                                                        .font_semibold()
-                                                        .text_color(cx.theme().text_muted)
-                                                        .child(label.clone())
-                                                )
-                                            },
-                                            PopupMenuItem::Separator => this.h_auto().p_0().disabled(true).child(
-                                                div()
-                                                    .rounded_none()
-                                                    .h(px(1.))
-                                                    .mx_neg_1()
-                                                    .my_0p5()
-                                                    .bg(cx.theme().border_disabled),
-                                            ),
-                                            PopupMenuItem::ElementItem { render, .. } => this
-                                                .on_click(
-                                                    cx.listener(move |this, _, window, cx| {
-                                                        this.on_click(ix, window, cx)
-                                                    }),
-                                                )
-                                                .child(
-                                                    h_flex()
-                                                        .min_h(ITEM_HEIGHT)
-                                                        .items_center()
-                                                        .gap_x_1()
-                                                        .children(Self::render_icon(has_icon, None, window, cx))
-                                                        .child((render)(window, cx)),
-                                                ),
-                                            PopupMenuItem::Item {
-                                                icon, label, action, ..
-                                            } => {
-                                                let action = action.as_ref().map(|action| action.boxed_clone());
-                                                let key = Self::render_keybinding(action, window, cx);
-
-                                                this.on_click(
-                                                    cx.listener(move |this, _, window, cx| {
-                                                        this.on_click(ix, window, cx)
-                                                    }),
-                                                )
-                                                .child(
-                                                    h_flex()
-                                                        .h(ITEM_HEIGHT)
-                                                        .items_center()
-                                                        .gap_x_1p5()
-                                                        .children(Self::render_icon(has_icon, icon.clone(), window, cx))
-                                                        .child(
-                                                            h_flex()
-                                                                .flex_1()
-                                                                .gap_2()
-                                                                .items_center()
-                                                                .justify_between()
-                                                                .child(label.clone())
-                                                                .children(key),
-                                                        ),
-                                                )
-                                            }
-                                            PopupMenuItem::Submenu { icon, label, menu } => this
-                                                .when(self.hovered_menu_ix == Some(ix), |this| this.selected(true))
-                                                .child(
-                                                    h_flex()
-                                                        .items_start()
-                                                        .child(
-                                                            h_flex()
-                                                                .size_full()
-                                                                .items_center()
-                                                                .gap_x_1p5()
-                                                                .children(Self::render_icon(
-                                                                    has_icon,
-                                                                    icon.clone(),
-                                                                    window,
-                                                                    cx,
-                                                                ))
-                                                                .child(
-                                                                    h_flex()
-                                                                        .flex_1()
-                                                                        .gap_2()
-                                                                        .items_center()
-                                                                        .justify_between()
-                                                                        .child(label.clone())
-                                                                        .child(IconName::CaretRight),
-                                                                ),
-                                                        )
-                                                        .when_some(self.hovered_menu_ix, |this, hovered_ix| {
-                                                            let (anchor, left) = if window.bounds().size.width
-                                                                - bounds.origin.x
-                                                                < max_width
-                                                            {
-                                                                (Corner::TopRight, -px(15.))
-                                                            } else {
-                                                                (Corner::TopLeft, bounds.size.width - px(10.))
-                                                            };
-
-                                                            let top = if bounds.origin.y + bounds.size.height
-                                                                > window.bounds().size.height
-                                                            {
-                                                                px(32.)
-                                                            } else {
-                                                                -px(10.)
-                                                            };
-
-                                                            if hovered_ix == ix {
-                                                                this.child(
-                                                                    anchored()
-                                                                        .anchor(anchor)
-                                                                        .child(
-                                                                            div()
-                                                                                .occlude()
-                                                                                .top(top)
-                                                                                .left(left)
-                                                                                .child(menu.clone()),
-                                                                        )
-                                                                        .snap_to_window_with_margin(Edges::all(px(8.))),
-                                                                )
-                                                            } else {
-                                                                this
-                                                            }
-                                                        }),
-                                                ),
-                                        }
-                                    }),
-                            ),
-                    ),
-            )
-            .when(self.scrollable, |this| {
-                // TODO: When the menu is limited by `overflow_y_scroll`, the sub-menu will cannot be displayed.
-                this.child(
-                    div()
-                        .absolute()
-                        .top_0()
-                        .left_0()
-                        .right_0p5()
-                        .bottom_0()
-                        .child(Scrollbar::vertical(&self.scroll_state, &self.scroll_handle)),
-                )
-            })
-    }
-}
-
-/// Return the Platform specific keybinding string by KeyStroke
-pub fn key_shortcut(key: Keystroke) -> String {
-    if cfg!(target_os = "macos") {
-        return format!("{key}");
-    }
-
-    let mut parts = vec![];
-    if key.modifiers.control {
-        parts.push("Ctrl");
-    }
-    if key.modifiers.alt {
-        parts.push("Alt");
-    }
-    if key.modifiers.platform {
-        parts.push("Win");
-    }
-    if key.modifiers.shift {
-        parts.push("Shift");
-    }
-
-    // Capitalize the first letter
-    let key = if let Some(first_c) = key.key.chars().next() {
-        format!("{}{}", first_c.to_uppercase(), &key.key[1..])
-    } else {
-        key.key.to_string()
-    };
-
-    parts.push(&key);
-    parts.join("+")
-}

crates/ui/src/resizable/panel.rs

@@ -240,11 +240,13 @@ impl RenderOnce for ResizablePanel {
         let state = self
             .state
             .expect("BUG: The `state` in ResizablePanel should be present.");
+
         let panel_state = state
             .read(cx)
             .panels
             .get(self.panel_ix)
             .expect("BUG: The `index` of ResizablePanel should be one of in `state`.");
+
         let size_range = self.size_range.clone();
 
         div()

crates/ui/src/styled.rs

@@ -62,8 +62,8 @@ pub trait StyledExt: Styled + Sized {
         self.bg(cx.theme().background)
             .border_1()
             .border_color(cx.theme().border)
-            .shadow_lg()
-            .rounded(cx.theme().radius_lg)
+            .shadow_md()
+            .rounded(cx.theme().radius)
     }
 }
 

crates/ui/src/tooltip.rs

@@ -21,14 +21,14 @@ impl Render for Tooltip {
             div()
                 .font_family(".SystemUIFont")
                 .m_3()
-                .p_2()
+                .p_1p5()
                 .border_1()
                 .border_color(cx.theme().border)
                 .bg(cx.theme().surface_background)
-                .when(cx.theme().shadow, |this| this.shadow_md())
-                .rounded(cx.theme().radius_lg)
-                .text_sm()
-                .text_color(cx.theme().text_muted)
+                .when(cx.theme().shadow, |this| this.shadow_sm())
+                .rounded(cx.theme().radius)
+                .text_xs()
+                .text_color(cx.theme().text)
                 .line_height(relative(1.25))
                 .child(self.text.clone()),
         )