Style the clipboard kind-filter dropdown from the palette

crates/compass-ui/src/app/clipboard.rs

@@ -402,8 +402,11 @@ impl LauncherApp {
         Some(focus_search())
     }
 
-    /// The kind filter, right-aligned above the list.
+    /// The kind filter, right-aligned above the list: the card's own dropdown
+    /// look (#239), in the launcher's font, rather than Iced's default
+    /// pick-list chrome.
     pub(super) fn clipboard_filter<'a>(&self, page: &ClipboardPage) -> Element<'a, Message> {
+        let palette = self.palette();
         container(
             iced::widget::pick_list(
                 clipboard_page::KIND_FILTERS
@@ -413,7 +416,10 @@ impl LauncherApp {
                 Some(clipboard_page::filter_for_kind(page.kind).0.to_owned()),
                 Message::ClipboardKindChanged,
             )
-            .text_size(12),
+            .text_size(12)
+            .font(self.font())
+            .style(move |_, status| crate::design::dropdown(palette, status))
+            .menu_style(move |_| crate::design::dropdown_menu(palette)),
         )
         .width(Length::Fill)
         .align_x(Alignment::End)

crates/compass-ui/src/design.rs

@@ -296,6 +296,58 @@ pub fn theme(appearance: Appearance) -> iced::Theme {
     )
 }
 
+/// A dropdown that reads as part of the card (#239).
+///
+/// Iced's default pick-list chrome — near-square corners, a full-contrast
+/// border, and colors off the generic ramp — sits visibly apart from the
+/// launcher's rows. A filter instead takes the search field's fill and the
+/// rows' corner radius, with no border, in every status: the launcher's rows
+/// do not glow on hover either. The font is set at the call site, because a
+/// pick list carries its own.
+#[must_use]
+pub fn dropdown(
+    palette: Palette,
+    _status: iced::widget::pick_list::Status,
+) -> iced::widget::pick_list::Style {
+    iced::widget::pick_list::Style {
+        text_color: palette.text.to_iced(),
+        placeholder_color: palette.muted.to_iced(),
+        handle_color: palette.muted.to_iced(),
+        background: iced::Background::Color(palette.field.to_iced()),
+        border: iced::Border {
+            radius: f32::from(GEOMETRY.row_radius).into(),
+            ..iced::Border::default()
+        },
+    }
+}
+
+/// An open dropdown's menu: the card's fill, row-radius corners, and the
+/// selection colors the results list uses, so an open filter looks like the
+/// list it filters. The hairline and soft shadow are the popover's own, the
+/// way GNOME draws one over a window.
+#[must_use]
+pub fn dropdown_menu(palette: Palette) -> iced::widget::overlay::menu::Style {
+    iced::widget::overlay::menu::Style {
+        background: iced::Background::Color(palette.surface.to_iced()),
+        border: iced::Border {
+            color: palette.border.to_iced(),
+            width: 1.0,
+            radius: f32::from(GEOMETRY.row_radius).into(),
+        },
+        text_color: palette.text.to_iced(),
+        selected_text_color: palette.selection_text.to_iced(),
+        selected_background: iced::Background::Color(palette.selection.to_iced()),
+        shadow: iced::Shadow {
+            color: iced::Color {
+                a: 0.25,
+                ..iced::Color::BLACK
+            },
+            offset: iced::Vector::new(0.0, 4.0),
+            blur_radius: 16.0,
+        },
+    }
+}
+
 /// The shadow around the card, in logical pixels.
 ///
 /// Enough to lift the card off the wallpaper without dominating the palette.

crates/compass-ui/tests/design.rs

@@ -136,3 +136,44 @@ fn both_appearances_have_a_theme() {
 fn the_font_stack_starts_with_gnomes_interface_font() {
     assert_eq!(design::FONT_STACK.first().copied(), Some("Cantarell"));
 }
+
+#[test]
+fn a_dropdown_reads_as_part_of_the_card() {
+    // #239: the kind filter wore Iced's default pick-list chrome — square
+    // corners, a full border, generic colors — and its menu read as a foreign
+    // box. Both now come from the palette, in both appearances.
+    use iced::widget::{overlay::menu, pick_list};
+
+    for appearance in Appearance::ALL {
+        let palette = design::palette(appearance);
+        for status in [
+            pick_list::Status::Active,
+            pick_list::Status::Hovered,
+            pick_list::Status::Opened { is_hovered: false },
+            pick_list::Status::Opened { is_hovered: true },
+        ] {
+            let closed = design::dropdown(palette, status);
+            assert_eq!(
+                closed.background,
+                iced::Background::Color(palette.field.to_iced())
+            );
+            assert_eq!(closed.text_color, palette.text.to_iced());
+            assert_eq!(
+                closed.border.radius,
+                f32::from(design::GEOMETRY.row_radius).into()
+            );
+            assert_eq!(closed.border.width, 0.0);
+        }
+        let open: menu::Style = design::dropdown_menu(palette);
+        assert_eq!(
+            open.background,
+            iced::Background::Color(palette.surface.to_iced())
+        );
+        assert_eq!(
+            open.selected_background,
+            iced::Background::Color(palette.selection.to_iced())
+        );
+        assert_eq!(open.selected_text_color, palette.selection_text.to_iced());
+        assert_eq!(open.text_color, palette.text.to_iced());
+    }
+}