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/app/mod.rs

@@ -294,6 +294,8 @@ pub(super) struct OpenCADStudio {
     color_pick_target: Option<ColorPickTarget>,
     shortcuts_window: Option<window::Id>,
     about_window: Option<window::Id>,
+    /// In-canvas About modal (Plan B: shared overlay instead of an OS window).
+    about_open: bool,
     plugin_manager_window: Option<window::Id>,
     /// New-release notification window — opened on startup when the
     /// GitHub releases API reports a newer version than this build.
@@ -992,6 +994,7 @@ pub enum Message {
     ShortcutsPanelClose,
     // ── About window ────────────────────────────────────────────────────
     AboutOpen,
+    AboutClose,
     AboutCopyInfo,
     // ── Plugin Manager window ───────────────────────────────────────────
     PluginManagerOpen,
@@ -1413,6 +1416,7 @@ impl OpenCADStudio {
             color_pick_target: None,
             shortcuts_window: None,
             about_window: None,
+            about_open: false,
             plugin_manager_window: None,
             update_notice_window: None,
             assoc_prompt_window: None,

src/app/update.rs

@@ -5471,17 +5471,13 @@ impl OpenCADStudio {
 
             // ── About window ──────────────────────────────────────────────
             Message::AboutOpen => {
-                if let Some(id) = self.about_window {
-                    return window::gain_focus(id);
-                }
-                let (id, task) = window::open(window::Settings {
-                    size: iced::Size::new(340.0, 240.0),
-                    resizable: false,
-                    level: window::Level::AlwaysOnTop,
-                    ..Default::default()
-                });
-                self.about_window = Some(id);
-                task.map(|_| Message::Noop)
+                self.about_open = true;
+                Task::none()
+            }
+
+            Message::AboutClose => {
+                self.about_open = false;
+                Task::none()
             }
 
             Message::AboutCopyInfo => {

src/app/view.rs

@@ -1499,7 +1499,7 @@ impl OpenCADStudio {
             iced::widget::Space::new().width(0).height(0).into()
         };
 
-        stack![
+        let composed = stack![
             main_ui,
             self.app_menu.view(),
             snap_layer,
@@ -1512,8 +1512,20 @@ impl OpenCADStudio {
             layout_ctx_layer,
             qselect_layer,
             open_progress_layer,
-        ]
-        .into()
+        ];
+
+        // ── In-canvas modal dialogs (Plan B) ───────────────────────────────
+        // Former pop-up windows render as overlays here, so they work on both
+        // the native (single main window) and web builds.
+        if self.about_open {
+            crate::ui::modal::modal(
+                composed,
+                crate::ui::about::view_window(),
+                Message::AboutClose,
+            )
+        } else {
+            composed.into()
+        }
     }
 
     pub fn subscription(&self) -> Subscription<Message> {

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()
+    }
+}