feat(ui): replace global configuration drawer with a regular xdg toplevel

Signed-off-by: Maika Namuo <httpworldview@gmail.com>

Author: httpsworldview

README.md

@@ -187,7 +187,7 @@ Fedora, and tarball artifacts.
 
 | Binding | Action |
 | --- | --- |
-| `ctrl+shift+h` | Show or hide the global configuration drawer. |
+| `ctrl+shift+h` | Show/hide the configuration window; while open, drag visuals to rearrange them. |
 | right click on a visual | Open that visual's settings window. |
 | `p` | Pause or resume meter updates. |
 | `q` twice | Quit the application. |

src/ui.rs

@@ -1,6 +1,35 @@
 // SPDX-License-Identifier: GPL-3.0-or-later
 // Copyright (C) 2026 Maika Namuo
 
+macro_rules! controls {
+    ($spacing:literal; $($control:expr;)*) => {{
+        controls!(@push iced::widget::Column::new().spacing($spacing); $($control;)*)
+    }};
+    ($base:expr; $($control:expr;)*) => {{
+        controls!(@push $base; $($control;)*)
+    }};
+    (@push $base:expr; $($control:expr;)*) => {{
+        let mut column = $base;
+        $(column = column.push($control);)*
+        column
+    }};
+}
+
+macro_rules! slider {
+    ($label:expr, $value:expr, $range:expr, $on_change:expr, $fmt:literal) => {
+        $crate::ui::settings::widgets::slide(
+            $label,
+            $value,
+            format!($fmt, $value),
+            $range,
+            $on_change,
+        )
+    };
+    ($label:expr, $value:expr, $range:expr, $on_change:expr, $display:expr) => {
+        $crate::ui::settings::widgets::slide($label, $value, $display, $range, $on_change)
+    };
+}
+
 pub mod app;
 pub mod config;
 pub mod settings;

src/ui/app.rs

@@ -36,15 +36,12 @@ use std::rc::Rc;
 use std::sync::{Arc, mpsc};
 use std::time::{Duration, Instant};
 use windowing::{
-    APP_ID, BarResizeState, PopoutWindow, layershell_available, main_window_size, open_main_window,
+    APP_ID, BarResizeState, PopoutWindow, layershell_available, main_window_size,
+    open_config_base_window, open_main_window,
 };
 
 const TOAST_DISPLAY_DURATION: Duration = Duration::from_secs(2);
-const DEFAULT_DRAWER_RATIO: f32 = 0.20;
-const MIN_DRAWER_RATIO: f32 = 0.10;
-const MAX_DRAWER_RATIO: f32 = 0.50;
 const BAR_RESIZE_HANDLE_THICKNESS: f32 = 6.0;
-const DRAWER_RESIZE_HANDLE_WIDTH: f32 = 6.0;
 
 #[derive(Clone)]
 pub(crate) struct UiConfig {
@@ -96,10 +93,7 @@ struct UiApp {
     visual_manager: VisualManagerHandle,
     settings_handle: SettingsHandle,
     audio_frames: Arc<AsyncReceiver<AudioBatch>>,
-    drawer_open: bool,
-    drawer_width_ratio: f32,
-    drawer_resizing: bool,
-    drawer_resize_offset: Option<f32>,
+    config_window: Option<window::Id>,
     bar_resize_state: Option<BarResizeState>,
     rendering_paused: bool,
     toast_until: Option<Instant>,
@@ -156,10 +150,7 @@ impl UiApp {
             visual_manager,
             settings_handle,
             audio_frames,
-            drawer_open: false,
-            drawer_width_ratio: DEFAULT_DRAWER_RATIO,
-            drawer_resizing: false,
-            drawer_resize_offset: None,
+            config_window: None,
             bar_resize_state: None,
             rendering_paused: false,
             toast_until: None,
@@ -194,38 +185,20 @@ impl UiApp {
             }),
         ];
         subs.push(channel_subscription(Arc::clone(&self.audio_frames)).map(Message::AudioFrame));
-        if self.drawer_resizing && self.drawer_open {
-            subs.push(event::listen_with(message::drawer_drag_events));
-        }
         if self.bar_resize_state.is_some() {
             subs.push(event::listen_with(message::bar_drag_events));
         }
         Subscription::batch(subs)
     }
 
-    fn toggle_drawer(&mut self) {
-        self.drawer_open = !self.drawer_open;
-        self.end_drawer_resize();
-        self.toast_until = self
-            .drawer_open
-            .then(|| Instant::now() + TOAST_DISPLAY_DURATION);
-    }
-
-    fn end_drawer_resize(&mut self) {
-        self.drawer_resizing = false;
-        self.drawer_resize_offset = None;
-    }
-
-    fn handle_drawer_resize(&mut self, position: iced::Point) {
-        if self.drawer_resizing && self.drawer_width_ratio > 0.0 {
-            let estimated_width = self.drawer_resize_offset.get_or_insert_with(|| {
-                (position.x - DRAWER_RESIZE_HANDLE_WIDTH) / self.drawer_width_ratio
-            });
-            if *estimated_width > 0.0 {
-                self.drawer_width_ratio =
-                    (position.x / *estimated_width).clamp(MIN_DRAWER_RATIO, MAX_DRAWER_RATIO);
-            }
+    fn toggle_config_window(&mut self) -> Task<Message> {
+        if let Some(id) = self.config_window.take() {
+            return window::close(id);
         }
+        let (id, task) = open_config_base_window(self.use_layershell);
+        self.config_window = Some(id);
+        self.toast_until = Some(Instant::now() + TOAST_DISPLAY_DURATION);
+        task
     }
 
     fn begin_bar_resize(&mut self) {
@@ -288,22 +261,19 @@ impl UiApp {
         };
 
         let content = self.visuals_with_toasts();
-        let content = self.wrap_drawer(content);
         let content = self.wrap_bar_resize(content, &bar);
         Self::wrap_window_resize(content, use_decorations, &bar)
     }
 
     fn visuals_with_toasts(&self) -> Element<'_, Message> {
-        let visuals_view = self
-            .visuals_page
-            .view(self.drawer_open)
-            .map(Message::Visuals);
+        let config_open = self.config_window.is_some();
+        let visuals_view = self.visuals_page.view(config_open).map(Message::Visuals);
 
         let now = Instant::now();
         let is_active = |deadline: Option<Instant>| deadline.is_some_and(|expires| now < expires);
         let toast_msgs: Vec<&str> = [
-            (self.drawer_open && is_active(self.toast_until))
-                .then_some("ctrl+shift+h to close drawer"),
+            (config_open && is_active(self.toast_until))
+                .then_some("drag visuals to rearrange | ctrl+shift+h to close config"),
             self.rendering_paused.then_some("paused (p to resume)"),
             is_active(self.exit_warning_until).then_some("q again to exit"),
         ]
@@ -329,36 +299,6 @@ impl UiApp {
         layer.into()
     }
 
-    fn wrap_drawer<'a>(&'a self, visuals: Element<'a, Message>) -> Element<'a, Message> {
-        if !self.drawer_open {
-            return visuals;
-        }
-        let drawer_portion = (self.drawer_width_ratio * 1000.0).round() as u16;
-        let visuals_portion = 1000 - drawer_portion;
-        let drawer: Element<'_, Message> = fill!(self.config_page.view().map(Message::Config))
-            .width(Length::FillPortion(drawer_portion))
-            .style(theme::opaque_container)
-            .into();
-        let handle: Element<'_, Message> = mouse_area(
-            container(text(":").size(12).align_x(Horizontal::Center))
-                .width(12)
-                .height(Length::Fill)
-                .align_x(Horizontal::Center)
-                .align_y(Vertical::Center)
-                .style(theme::resize_handle_container),
-        )
-        .on_press(Message::DrawerResizeStart)
-        .interaction(iced::mouse::Interaction::ResizingHorizontally)
-        .into();
-        let visuals: Element<'_, Message> = fill!(visuals)
-            .width(Length::FillPortion(visuals_portion))
-            .into();
-        row![drawer, handle, visuals]
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .into()
-    }
-
     fn wrap_bar_resize<'a>(
         &'a self,
         content: Element<'a, Message>,

src/ui/app/message.rs

@@ -24,12 +24,9 @@ pub(super) enum Message {
     Visuals(VisualsMessage),
     AudioFrame(AudioBatch),
     BarOutputResolved(window::Id, Option<OutputSnapshot>),
-    ToggleDrawer,
+    ToggleConfig,
     TogglePause,
     PopOutOrDock(window::Id),
-    DrawerResizeStart,
-    DrawerResizeMove(iced::Point),
-    DrawerResizeEnd,
     BarResizeStart,
     BarResizeMove(iced::Point),
     BarResizeEnd,
@@ -63,10 +60,6 @@ fn drag_events(
     }
 }
 
-pub(super) fn drawer_drag_events(evt: Event, _: event::Status, _: window::Id) -> Option<Message> {
-    drag_events(evt, Message::DrawerResizeMove, Message::DrawerResizeEnd)
-}
-
 pub(super) fn bar_drag_events(evt: Event, _: event::Status, _: window::Id) -> Option<Message> {
     drag_events(evt, Message::BarResizeMove, Message::BarResizeEnd)
 }
@@ -83,7 +76,7 @@ pub(super) fn keyboard_shortcut(
         (modifiers.control(), modifiers.shift(), modifiers.is_empty());
     match key {
         Key::Character(ch) if ctrl && shift && ch.eq_ignore_ascii_case("h") => {
-            Some(Message::ToggleDrawer)
+            Some(Message::ToggleConfig)
         }
         Key::Named(keyboard::key::Named::Space) if ctrl => Some(Message::PopOutOrDock(window_id)),
         Key::Character(ch) if no_modifiers && status != event::Status::Captured => {
@@ -130,30 +123,12 @@ pub(super) fn update(app: &mut UiApp, msg: Message) -> Task<Message> {
             window::drag(app.main_window_id)
         }
         Message::Visuals(visuals_msg) => app.visuals_page.update(visuals_msg).map(Message::Visuals),
-        Message::ToggleDrawer => {
-            app.toggle_drawer();
-            Task::none()
-        }
+        Message::ToggleConfig => app.toggle_config_window(),
         Message::TogglePause => {
             app.rendering_paused = !app.rendering_paused;
             Task::none()
         }
         Message::PopOutOrDock(window_id) => app.handle_popout_or_dock(window_id),
-        Message::DrawerResizeStart => {
-            if app.drawer_open {
-                app.drawer_resizing = true;
-                app.drawer_resize_offset = None;
-            }
-            Task::none()
-        }
-        Message::DrawerResizeMove(pos) => {
-            app.handle_drawer_resize(pos);
-            Task::none()
-        }
-        Message::DrawerResizeEnd => {
-            app.end_drawer_resize();
-            Task::none()
-        }
         Message::BarResizeStart => {
             app.begin_bar_resize();
             Task::none()
@@ -211,6 +186,13 @@ pub(super) fn view(app: &UiApp, window_id: window::Id) -> Element<'_, Message> {
     if window_id == app.main_window_id {
         return app.main_window_view();
     }
+    if app.config_window == Some(window_id) {
+        let content: Element<'_, Message> = fill!(app.config_page.view().map(Message::Config))
+            .padding(16)
+            .style(theme::weak_container)
+            .into();
+        return content;
+    }
     if let Some((_, panel)) = app
         .settings_window
         .as_ref()

src/ui/app/windowing.rs

@@ -25,7 +25,7 @@ use wayland_client::{Connection, Dispatch, QueueHandle};
 
 pub(super) const APP_ID: &str = "openmeters-ui";
 const WINDOW_MIN_SIZE: Size = Size::new(200.0, 150.0);
-pub(super) const SETTINGS_WINDOW_SIZE: Size = Size::new(480.0, 600.0);
+const TOOL_WINDOW_SIZE: Size = Size::new(480.0, 600.0);
 
 #[derive(Debug, Default)]
 struct LayerShellProbe;
@@ -121,8 +121,12 @@ fn open_base_window(
     }
 }
 
+pub(super) fn open_config_base_window(use_layershell: bool) -> (window::Id, Task<Message>) {
+    open_base_window(use_layershell, TOOL_WINDOW_SIZE, true)
+}
+
 fn open_settings_base_window(use_layershell: bool) -> (window::Id, Task<Message>) {
-    open_base_window(use_layershell, SETTINGS_WINDOW_SIZE, true)
+    open_base_window(use_layershell, TOOL_WINDOW_SIZE, true)
 }
 
 pub(super) fn open_main_window(
@@ -332,6 +336,9 @@ impl UiApp {
         if id == self.main_window_id {
             return exit();
         }
+        if self.config_window == Some(id) {
+            self.config_window = None;
+        }
         if self.settings_window.as_ref().is_some_and(|(w, _)| *w == id) {
             self.settings_window = None;
         }
@@ -391,6 +398,10 @@ impl UiApp {
             return "OpenMeters".into();
         }
 
+        if self.config_window == Some(window_id) {
+            return "Configuration - OpenMeters".into();
+        }
+
         let (kind, suffix) = if let Some((_, panel)) = self
             .settings_window
             .as_ref()
@@ -407,10 +418,12 @@ impl UiApp {
     }
 
     pub(super) fn theme(&self, window_id: window::Id) -> iced::Theme {
+        let is_config = self.config_window == Some(window_id);
         let is_settings = matches!(&self.settings_window, Some((w, _)) if *w == window_id);
-        // Settings window forces opaque alpha: it has no wgpu visual backdrop, so a
+        let is_tool = is_config || is_settings;
+        // Tool windows force opaque alpha: they have no wgpu visual backdrop, so a
         // translucent user background would let the desktop bleed through the chrome.
-        let custom_bg = if is_settings
+        let custom_bg = if is_tool
             || window_id == self.main_window_id
             || self.popout_windows.contains_key(&window_id)
         {
@@ -420,7 +433,7 @@ impl UiApp {
         }
         .map(|c| {
             let c: iced::Color = c.into();
-            if is_settings { with_alpha(c, 1.0) } else { c }
+            if is_tool { with_alpha(c, 1.0) } else { c }
         });
         theme::theme(custom_bg)
     }