feat: app settings (#11)

Reviewed-on: https://git.reya.su/reya/signed/pulls/11

crates/signed_ui/src/lib.rs

@@ -19,6 +19,10 @@
 //! - [`placeholder`] — centered muted placeholder message
 //! - [`copy_row`] / [`menu_copy_row`] — rows with a copy-to-clipboard button
 //! - [`tree_row`] — one row of a file tree
+//! - [`setting_row`] / [`setting_block`] — label + description rows for a
+//!   settings dialog, with the control on the right (row) or below (block)
+//! - [`SelectOption`] — dropdown option with a display label and a stored
+//!   value
 //! - [`title_bar_drag_handlers`] — make an element behave like a window
 //!   title bar (drag moves the window, double-click zooms)
 //! - [`image_cache`] — per-view LRU image cache provider
@@ -29,6 +33,7 @@ mod nav_item;
 mod pixel_avatar;
 mod placeholder;
 mod segment_button;
+mod setting;
 mod status_badge;
 mod title_bar;
 mod tree_row;
@@ -45,6 +50,7 @@ pub use nav_item::NavItem;
 pub use pixel_avatar::PixelAvatar;
 pub use placeholder::placeholder;
 pub use segment_button::{CountBadge, SegmentButton};
+pub use setting::{SelectOption, setting_block, setting_row};
 pub use status_badge::status_badge;
 pub use title_bar::title_bar_drag_handlers;
 pub use tree_row::tree_row;

crates/signed_ui/src/setting.rs

@@ -0,0 +1,113 @@
+//! Reusable settings UI: rows and blocks for building a settings dialog, plus
+//! a labeled dropdown option.
+
+use gpui::prelude::*;
+use gpui::{App, SharedString, div};
+use gpui_component::searchable_list::SearchableListItem;
+use gpui_component::{ActiveTheme, StyledExt, h_flex, v_flex};
+
+/// A dropdown option with a display label and a stored value.
+///
+/// Renders the `label` in the trigger and the menu, while `value` is what a
+/// [`gpui_component::select::SelectState`] reports as the selection.
+#[derive(Clone)]
+pub struct SelectOption {
+    value: SharedString,
+    label: SharedString,
+}
+
+impl SelectOption {
+    /// Create an option with the given stored `value` and display `label`.
+    pub fn new(value: impl Into<SharedString>, label: impl Into<SharedString>) -> Self {
+        Self {
+            value: value.into(),
+            label: label.into(),
+        }
+    }
+
+    /// The stored value of this option.
+    pub fn value(&self) -> &SharedString {
+        &self.value
+    }
+
+    /// The display label of this option.
+    pub fn label(&self) -> &SharedString {
+        &self.label
+    }
+}
+
+impl SearchableListItem for SelectOption {
+    type Value = SharedString;
+
+    fn title(&self) -> SharedString {
+        self.label.clone()
+    }
+
+    fn value(&self) -> &Self::Value {
+        &self.value
+    }
+}
+
+/// A settings row: label + description on the left, control on the right.
+pub fn setting_row(
+    cx: &App,
+    title: impl Into<SharedString>,
+    description: impl Into<SharedString>,
+    control: impl IntoElement,
+) -> impl IntoElement {
+    let title = title.into();
+    let description = description.into();
+
+    h_flex()
+        .w_full()
+        .justify_between()
+        .items_center()
+        .gap_4()
+        .child(
+            v_flex()
+                .flex_1()
+                .min_w_0()
+                .child(div().text_sm().font_semibold().child(title))
+                .child(
+                    div()
+                        .text_xs()
+                        .text_color(cx.theme().muted_foreground)
+                        .child(description),
+                ),
+        )
+        .child(
+            h_flex()
+                .w_40()
+                .flex_shrink_0()
+                .justify_end()
+                .items_center()
+                .child(control),
+        )
+}
+
+/// A full-width settings block: title + subtitle in one header, `gap_3`
+/// between the header and the control below.
+pub fn setting_block(
+    cx: &App,
+    title: impl Into<SharedString>,
+    description: impl Into<SharedString>,
+    control: impl IntoElement,
+) -> impl IntoElement {
+    let title = title.into();
+    let description = description.into();
+    v_flex()
+        .w_full()
+        .gap_3()
+        .child(
+            v_flex()
+                .w_full()
+                .child(div().text_sm().font_semibold().child(title))
+                .child(
+                    div()
+                        .text_xs()
+                        .text_color(cx.theme().muted_foreground)
+                        .child(description),
+                ),
+        )
+        .child(control)
+}