audit command palette

crates/core/src/command_palette.rs

@@ -10,6 +10,7 @@ use gpui::{
     ScrollHandle, SharedString, StatefulInteractiveElement as _, Styled as _, Subscription, Window,
     actions, canvas, div, px, relative,
 };
+use gpui_native_icons::{IconRole, icon};
 use gpui_native_theme::{ActiveTheme as _, Size};
 
 use crate::common::{h_flex, v_flex};
@@ -48,18 +49,27 @@ pub struct Command {
     pub label: SharedString,
     /// Gray text on the row's right edge, e.g. the keybinding.
     pub hint: Option<SharedString>,
+    /// Leading glyph shown before the label.
+    pub icon: Option<IconRole>,
 }
 
 impl Command {
-    /// Creates a command without a hint.
+    /// Creates a command without a hint or icon.
     pub fn new(id: impl Into<SharedString>, label: impl Into<SharedString>) -> Self {
         Self {
             id: id.into(),
             label: label.into(),
             hint: None,
+            icon: None,
         }
     }
 
+    /// Shows an icon before the label.
+    pub fn icon(mut self, role: IconRole) -> Self {
+        self.icon = Some(role);
+        self
+    }
+
     /// Sets the row's right-edge hint.
     pub fn hint(mut self, hint: impl Into<SharedString>) -> Self {
         self.hint = Some(hint.into());
@@ -295,15 +305,21 @@ impl Render for CommandPaletteState {
             return div().into_any_element();
         }
 
-        let (colors, radius, metrics, shadows) = {
+        let (colors, radius, metrics, panel_border, shadows) = {
             let theme = cx.theme();
             (
                 theme.colors,
                 theme.radius,
                 theme.sizes.resolve(Size::default()),
+                if theme.borders.overlays {
+                    theme.colors.border
+                } else {
+                    theme.colors.surface
+                },
                 theme.elevations.dialog.shadows(),
             )
         };
+
         let id = self.id.clone();
         let state = cx.entity();
 
@@ -345,6 +361,9 @@ impl Render for CommandPaletteState {
                             state.update(cx, |state, cx| state.choose_row(row_ix, window, cx));
                         }
                     })
+                    .when_some(command.icon, |row, role| {
+                        row.child(icon(role).size(metrics.icon_size).color(colors.foreground))
+                    })
                     .child(
                         div()
                             .flex_1()
@@ -407,7 +426,7 @@ impl Render for CommandPaletteState {
             .text_color(colors.foreground)
             .rounded(radius.overlay)
             .border_1()
-            .border_color(colors.border)
+            .border_color(panel_border)
             .shadow(shadows)
             .overflow_hidden()
             .on_mouse_down(MouseButton::Left, |_, _, cx| cx.stop_propagation())

crates/theme/src/lib.rs

@@ -419,8 +419,6 @@ impl SizeTable {
         };
 
         let metrics = |f: &ClassFactors| {
-            // Standard controls carry 16px glyphs on every platform, fixed
-            // against the root font the way the platforms fix them.
             let icon_size = if f.floor_icon {
                 (rem_size * f.icon).max(px(16.))
             } else {