feat(ui): shared in-canvas modal overlay; migrate About (Plan B)

Start Plan B — replace the daemon's pop-up OS windows with in-canvas
modal overlays so dialogs work identically on native (one main window)
and web (canvas only).

- New `ui::modal::modal(base, content, on_close)`: dims the view behind
  a backdrop that blocks clicks but does NOT dismiss, frames the content,
  and adds a top-right ✕ as the sole close affordance. Sizes to the
  content (no `Fill`), so dialogs shrink to fit.
- view_main stacks the active modal on top, so both run paths show it.
- Migrate About as the pilot: `about_open` bool + AboutOpen/AboutClose
  instead of an OS window; About's view shrinks to content.

Remaining dialogs migrate to the same pattern next. Native + 75 tests OK.

Co-Authored-By: Claude Opus 4.8 <[email protected]>

src/ui/about.rs

@@ -1,6 +1,6 @@
 use crate::app::Message;
-use iced::widget::{button, column, container, row, text, Space};
-use iced::{Background, Border, Color, Element, Fill, Theme};
+use iced::widget::{button, column, container, row, text};
+use iced::{Background, Border, Color, Element, Theme};
 
 const BG: Color = Color {
     r: 0.15,
@@ -65,7 +65,6 @@ pub fn view_window<'a>() -> Element<'a, Message> {
         .spacing(4)
         .align_x(iced::Center),
     )
-    .width(Fill)
     .padding(iced::Padding {
         top: 20.0,
         right: 0.0,
@@ -83,7 +82,6 @@ pub fn view_window<'a>() -> Element<'a, Message> {
         .spacing(2)
         .padding([12, 16]),
     )
-    .width(Fill)
     .style(|_: &Theme| container::Style {
         background: Some(Background::Color(PANEL)),
         border: Border {
@@ -115,7 +113,7 @@ pub fn view_window<'a>() -> Element<'a, Message> {
         })
         .padding([6, 16]);
 
-    let footer = row![Space::new().width(Fill), copy_btn,]
+    let footer = row![copy_btn]
         .align_y(iced::Center)
         .padding(iced::Padding {
             top: 12.0,
@@ -138,7 +136,5 @@ pub fn view_window<'a>() -> Element<'a, Message> {
         background: Some(Background::Color(BG)),
         ..Default::default()
     })
-    .width(Fill)
-    .height(Fill)
     .into()
 }

src/ui/mod.rs

@@ -13,6 +13,7 @@ pub mod layers;
 pub mod layout_manager;
 pub mod mleaderstyle;
 pub mod mlstyle;
+pub mod modal;
 pub mod open_progress;
 pub mod overlay;
 pub mod page_setup;

src/ui/modal.rs

@@ -0,0 +1,97 @@
+//! Shared in-canvas modal overlay.
+//!
+//! Former pop-up *windows* (layer manager, style editors, About, …) render as
+//! centered overlays on top of the main view instead of separate OS windows.
+//! The native build has one main window and the web build has only the canvas,
+//! so both stack dialogs here — one code path for every platform.
+
+use crate::app::Message;
+use iced::widget::{button, center, column, container, opaque, stack, text};
+use iced::{Background, Border, Color, Element, Theme};
+
+const PANEL: Color = Color {
+    r: 0.13,
+    g: 0.13,
+    b: 0.13,
+    a: 1.0,
+};
+const BORDER_C: Color = Color {
+    r: 0.35,
+    g: 0.35,
+    b: 0.35,
+    a: 1.0,
+};
+
+/// Stack `content` centered over `base` behind a dimmed backdrop, framed with a
+/// close (✕) button in the top-right corner. The backdrop only dims and blocks
+/// clicks from reaching the view beneath — it does **not** dismiss the dialog;
+/// closing is the ✕ button alone (`on_close`).
+pub fn modal<'a>(
+    base: impl Into<Element<'a, Message>>,
+    content: impl Into<Element<'a, Message>>,
+    on_close: Message,
+) -> Element<'a, Message> {
+    let close = button(text("✕").size(15))
+        .on_press(on_close)
+        .padding([1, 7])
+        .style(close_style);
+
+    // Close button right-aligned above the content. The column shrinks to the
+    // content's width (no `Fill`), so the dialog sizes to its content; the ✕ is
+    // pushed to that width's right edge.
+    let framed = container(
+        column![close, content.into()]
+            .spacing(6)
+            .align_x(iced::alignment::Horizontal::Right),
+    )
+    .padding(10)
+    .style(|_: &Theme| container::Style {
+        background: Some(Background::Color(PANEL)),
+        border: Border {
+            color: BORDER_C,
+            width: 1.0,
+            radius: 6.0.into(),
+        },
+        ..Default::default()
+    });
+
+    stack![
+        base.into(),
+        // `opaque` blocks pointer events from passing through, so the dimmed
+        // backdrop swallows clicks instead of closing or hitting the view.
+        opaque(center(framed).style(|_: &Theme| container::Style {
+            background: Some(Background::Color(Color {
+                a: 0.55,
+                ..Color::BLACK
+            })),
+            ..Default::default()
+        })),
+    ]
+    .into()
+}
+
+fn close_style(_: &Theme, status: button::Status) -> button::Style {
+    let bg = match status {
+        button::Status::Hovered | button::Status::Pressed => Color {
+            r: 0.7,
+            g: 0.2,
+            b: 0.2,
+            a: 1.0,
+        },
+        _ => Color {
+            r: 0.25,
+            g: 0.25,
+            b: 0.25,
+            a: 1.0,
+        },
+    };
+    button::Style {
+        background: Some(Background::Color(bg)),
+        text_color: Color::WHITE,
+        border: Border {
+            radius: 4.0.into(),
+            ..Default::default()
+        },
+        ..Default::default()
+    }
+}