From d2acecc25d743b900b8d818d3675cd40836a1929 Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Sun, 5 Jul 2026 07:23:01 -0700
Subject: [PATCH] feat: use new UI in shell

---
 Cargo.lock                               |  1 +
 crates/hearthspace-shell/Cargo.toml      |  1 +
 crates/hearthspace-shell/src/ui.rs       |  6 +-
 crates/hearthspace-shell/src/ui/theme.rs | 71 ------------------------
 crates/hearthspace-shell/src/ui/views.rs | 49 +++++++++-------
 crates/ui-components/src/lib.rs          | 46 +++++++++++++++
 6 files changed, 78 insertions(+), 96 deletions(-)
 delete mode 100644 crates/hearthspace-shell/src/ui/theme.rs

diff --git a/Cargo.lock b/Cargo.lock
index fe99c51..a5e55ee 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -2340,6 +2340,7 @@ name = "hearthspace-shell"
 version = "0.1.0"
 dependencies = [
  "hearthspace-common",
+ "hearthspace-ui-components",
  "rstest",
  "tempfile",
  "tracing",
diff --git a/crates/hearthspace-shell/Cargo.toml b/crates/hearthspace-shell/Cargo.toml
index 57272ef..6c2617b 100644
--- a/crates/hearthspace-shell/Cargo.toml
+++ b/crates/hearthspace-shell/Cargo.toml
@@ -7,6 +7,7 @@ license = "Apache-2.0"
 
 [dependencies]
 hearthspace-common = { path = "../hearthspace-common" }
+hearthspace-ui-components = { path = "../ui-components" }
 tracing = "0.1.41"
 tracing-subscriber = { version = "0.3.19", features = ["env-filter"] }
 wayland-client = "0.31.14"
diff --git a/crates/hearthspace-shell/src/ui.rs b/crates/hearthspace-shell/src/ui.rs
index 38e6c97..589d700 100644
--- a/crates/hearthspace-shell/src/ui.rs
+++ b/crates/hearthspace-shell/src/ui.rs
@@ -15,12 +15,10 @@ mod command_client;
 mod constants;
 mod output_watcher;
 mod state;
-mod theme;
 mod views;
 
 use output_watcher::initial_wayland_output_names;
 use state::ShellState;
-use theme::{SHELL_BG, shell_properties};
 use views::app_logic;
 
 pub fn run() -> Result<(), Box<dyn std::error::Error>> {
@@ -36,8 +34,8 @@ pub fn run() -> Result<(), Box<dyn std::error::Error>> {
     let state = ShellState::new(command_socket, output_names);
 
     let app = Xilem::new(state, app_logic)
-        .with_default_properties(shell_properties())
-        .with_default_base_color(SHELL_BG);
+        .with_default_properties(hearthspace_ui_components::hearthspace_light_properties())
+        .with_default_base_color(hearthspace_ui_components::APP_BACKGROUND);
     app.run_in(EventLoop::with_user_event())?;
     Ok(())
 }
diff --git a/crates/hearthspace-shell/src/ui/theme.rs b/crates/hearthspace-shell/src/ui/theme.rs
deleted file mode 100644
index 130ae2b..0000000
--- a/crates/hearthspace-shell/src/ui/theme.rs
+++ /dev/null
@@ -1,71 +0,0 @@
-use xilem::{
-    Color,
-    masonry::{
-        core::{DefaultProperties, PropertyStack, Selector},
-        layout::AsUnit,
-        properties::{
-            Background, BorderColor, BorderWidth, CaretColor, ContentColor, CornerRadius, Padding,
-            PlaceholderColor,
-        },
-        theme::default_property_set,
-        widgets::{Button, Label, TextArea, TextInput},
-    },
-};
-
-use super::constants::LAUNCHER_ITEM_H_PAD;
-
-/// Window background for the bar and launcher palette.
-pub(super) const SHELL_BG: Color = Color::from_rgb8(0xf4, 0xf4, 0xf5);
-const SHELL_TEXT: Color = Color::from_rgb8(0x1f, 0x1f, 0x23);
-const SHELL_PLACEHOLDER: Color = Color::from_rgb8(0x8a, 0x8a, 0x93);
-const BUTTON_HOVER_BG: Color = Color::from_rgb8(0xe4, 0xe4, 0xe7);
-const BUTTON_ACTIVE_BG: Color = Color::from_rgb8(0xd4, 0xd4, 0xd8);
-const INPUT_BG: Color = Color::from_rgb8(0xff, 0xff, 0xff);
-const INPUT_BORDER: Color = Color::from_rgb8(0xd4, 0xd4, 0xd8);
-const INPUT_FOCUS_BORDER: Color = Color::from_rgb8(0x3b, 0x7e, 0xe4);
-
-/// Light theme overrides applied to every shell widget.
-pub(super) fn shell_properties() -> DefaultProperties {
-    let mut properties = default_property_set();
-
-    properties.insert::<Button, _>(Background::Color(Color::TRANSPARENT));
-    properties.insert::<Button, _>(BorderWidth { width: 0.0.px() });
-    properties.insert::<Button, _>(CornerRadius { radius: 6.0.px() });
-    properties.insert::<Button, _>(ContentColor::new(SHELL_TEXT));
-    properties.insert::<Button, _>(Padding::from_vh(8.0.px(), LAUNCHER_ITEM_H_PAD.px()));
-    {
-        let mut stack = PropertyStack::new();
-        stack.push(
-            Selector::new().with_hovered(true),
-            Background::Color(BUTTON_HOVER_BG),
-        );
-        stack.push(
-            Selector::new().with_active(true),
-            Background::Color(BUTTON_ACTIVE_BG),
-        );
-        properties.insert_stack::<Button>(stack);
-    }
-
-    properties.insert::<Label, _>(ContentColor::new(SHELL_TEXT));
-    properties.insert::<TextArea<true>, _>(ContentColor::new(SHELL_TEXT));
-    properties.insert::<TextArea<false>, _>(ContentColor::new(SHELL_TEXT));
-
-    properties.insert::<TextInput, _>(Background::Color(INPUT_BG));
-    properties.insert::<TextInput, _>(BorderColor {
-        color: INPUT_BORDER,
-    });
-    properties.insert::<TextInput, _>(CaretColor { color: SHELL_TEXT });
-    properties.insert::<TextInput, _>(PlaceholderColor::new(SHELL_PLACEHOLDER));
-    {
-        let mut stack = PropertyStack::new();
-        stack.push(
-            Selector::new().with_focused(true),
-            BorderColor {
-                color: INPUT_FOCUS_BORDER,
-            },
-        );
-        properties.insert_stack::<TextInput>(stack);
-    }
-
-    properties
-}
diff --git a/crates/hearthspace-shell/src/ui/views.rs b/crates/hearthspace-shell/src/ui/views.rs
index a350280..6cbdb47 100644
--- a/crates/hearthspace-shell/src/ui/views.rs
+++ b/crates/hearthspace-shell/src/ui/views.rs
@@ -1,14 +1,12 @@
 use hearthspace_common::{CONTROL_BAR_HEIGHT, SHELL_OUTPUT_WATCHER_APP_ID};
+use hearthspace_ui_components as components;
 use xilem::{
-    AnyWidgetView, TextAlign, WidgetView, WindowOptionsExtLinux, WindowView,
+    AnyWidgetView, WidgetView, WindowOptionsExtLinux, WindowView,
     core::fork,
     dpi::LogicalSize,
-    masonry::{layout::AsUnit, parley::fontique::GenericFamily, properties::Gap},
+    masonry::{layout::AsUnit, parley::fontique::GenericFamily},
     style::Style,
-    view::{
-        CrossAxisAlignment, FlexSpacer, button, flex_col, flex_row, label, sized_box, text_button,
-        text_input,
-    },
+    view::{CrossAxisAlignment, FlexSpacer, flex_col, flex_row, label, sized_box, text_input},
     window,
 };
 
@@ -151,21 +149,26 @@ fn bar_view(output: &ShellOutputInstance) -> impl WidgetView<ShellState> + use<>
     ]
     .into_iter()
     .map(|command| {
-        text_button(command.label(), move |state: &mut ShellState| {
+        components::compact_action_button(command.label(), move |state: &mut ShellState| {
             send_command(&state.command_socket, &command.wire_name());
         })
         .boxed()
     })
     .collect();
 
-    flex_row((
-        FlexSpacer::Fixed(SHELL_BAR_H_PAD.px()),
-        sized_box(search)
-            .fixed_width(SEARCH_BOX_WIDTH.px())
-            .fixed_height(SEARCH_BOX_HEIGHT.px()),
-        command_buttons,
-        FlexSpacer::Fixed(SHELL_BAR_H_PAD.px()),
-    ))
+    sized_box(
+        flex_row((
+            FlexSpacer::Fixed(SHELL_BAR_H_PAD.px()),
+            sized_box(search)
+                .fixed_width(SEARCH_BOX_WIDTH.px())
+                .fixed_height(SEARCH_BOX_HEIGHT.px()),
+            command_buttons,
+            FlexSpacer::Fixed(SHELL_BAR_H_PAD.px()),
+        ))
+        .gap(8.0.px()),
+    )
+    .background_color(components::SURFACE)
+    .padding(7.0.px())
 }
 
 fn output_watcher_view() -> impl WidgetView<ShellState> + use<> {
@@ -185,9 +188,9 @@ fn launcher_view(
             let app_id = app.id;
             let output_key = output_key.clone();
             let output_name = output_name.clone();
-            button(
-                sized_box(label(app.name).text_alignment(TextAlign::Start))
-                    .fixed_width(LAUNCHER_ITEM_WIDTH.px()),
+            components::launcher_item(
+                app.name,
+                LAUNCHER_ITEM_WIDTH,
                 move |state: &mut ShellState| {
                     launch_app(&state.command_socket, &app_id, output_name.as_deref());
                     if let Some(query) = state.output_query_mut(&output_key) {
@@ -199,7 +202,11 @@ fn launcher_view(
         })
         .collect();
 
-    flex_col(buttons)
-        .cross_axis_alignment(CrossAxisAlignment::Stretch)
-        .gap(Gap::ZERO)
+    sized_box(
+        flex_col(buttons)
+            .cross_axis_alignment(CrossAxisAlignment::Stretch)
+            .gap(4.0.px()),
+    )
+    .background_color(components::SURFACE)
+    .padding(6.0.px())
 }
diff --git a/crates/ui-components/src/lib.rs b/crates/ui-components/src/lib.rs
index 91bc8f6..d5b76f6 100644
--- a/crates/ui-components/src/lib.rs
+++ b/crates/ui-components/src/lib.rs
@@ -233,6 +233,52 @@ where
     .corner_radius(6.0.px())
 }
 
+pub fn compact_action_button<State: 'static, Action: 'static, T, F>(
+    text: T,
+    callback: F,
+) -> impl WidgetView<State, Action> + use<State, Action, T, F>
+where
+    T: Into<ArcStr>,
+    F: Fn(&mut State) -> Action + Send + Sync + 'static,
+{
+    button(
+        label(text)
+            .font(GenericFamily::SystemUi)
+            .text_alignment(TextAlign::Center)
+            .text_size(13.0)
+            .color(TEXT),
+        callback,
+    )
+    .background_color(SURFACE_SUBTLE)
+    .border(BORDER, 1.0.px())
+    .corner_radius(6.0.px())
+    .padding(Padding::from_vh(5.0.px(), 9.0.px()))
+}
+
+pub fn launcher_item<State: 'static, Action: 'static, T, F>(
+    text: T,
+    width: f64,
+    callback: F,
+) -> impl WidgetView<State, Action> + use<State, Action, T, F>
+where
+    T: Into<ArcStr>,
+    F: Fn(&mut State) -> Action + Send + Sync + 'static,
+{
+    button(
+        sized_box(
+            label(text)
+                .font(GenericFamily::SystemUi)
+                .text_alignment(TextAlign::Start)
+                .color(TEXT),
+        )
+        .fixed_width(width.px()),
+        callback,
+    )
+    .background_color(SURFACE)
+    .border(Color::TRANSPARENT, 1.0.px())
+    .corner_radius(6.0.px())
+}
+
 pub fn segmented_option<State: 'static, Action: 'static, T, F>(
     text: T,
     selected: bool,
-- 
2.51.2