fix(dashboard): move settings back button into titlebar; defensive no-drag CSS

In dashboard mode (1200×800 transparent window) the OS hit-tester was
claiming clicks inside the settings-header for window dragging, swallowing
the back button entirely. Widget mode worked because the small always-on-
top window uses different hit-testing rules.

- Move the "← Back" affordance into the titlebar actions row (next to ×),
  which is verified-clickable because it sits inside the explicit no-drag
  region used by the close button.
- Auto-focus the import-paste textarea + add `key` to recover from
  window minimize/restore focus-stuck cases.
- Bump modal z-index to 500, mark all screen containers explicitly as
  -webkit-app-region: no-drag so the drag region can never silently
  expand to cover content. Lock titlebar to a fixed 36px height with
  flex-shrink: 0 so its bounding rect is deterministic.
- Replace the unreliable document.body.matches(":hover") in the hotzone
  auto-hide check with mousemove/mousedown/keydown activity tracking. The
  previous :hover poll could falsely report "not hovered" after a
  minimize/restore cycle, hiding the window mid-interaction.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: Tiwas

apps/dashboard/src/App.tsx

@@ -84,14 +84,15 @@ function AppInner({
   }, [settings.mode]);
 
   // Listen for hotzone triggers from Rust. If the widget was already visible
-  // we just focus it. If it was hidden, we show it and start a recurring
-  // auto-hide check: after `hotzoneAutoHideSec` seconds, if the cursor is
-  // currently over the widget we restart the check (5s re-checks); if not,
-  // we hide. So the widget stays as long as you keep your cursor on it.
+  // we just focus it. If it was hidden, we show it and start an auto-hide
+  // check that polls for user activity (mousemove/mousedown/keydown anywhere
+  // in the window) rather than relying on the :hover pseudo-class, which is
+  // unreliable in WebView2 across focus / minimize cycles.
   useEffect(() => {
     const initialSec = settings.hotzoneAutoHideSec;
     const recheckSec = 5;
     let activeTimer: number | null = null;
+    let lastActivity = Date.now();
 
     function clearTimer() {
       if (activeTimer !== null) {
@@ -100,18 +101,26 @@ function AppInner({
       }
     }
 
+    function markActivity() {
+      lastActivity = Date.now();
+    }
+
     function scheduleCheck(delayMs: number, win: ReturnType<typeof getCurrentWindow>) {
       activeTimer = window.setTimeout(() => {
         activeTimer = null;
-        const hovered = document.body.matches(":hover");
-        if (hovered) {
+        const idleMs = Date.now() - lastActivity;
+        if (idleMs < delayMs) {
           scheduleCheck(recheckSec * 1000, win);
         } else {
           win.hide().catch(() => {});
         }
       }, delayMs);
     }
 
+    document.addEventListener("mousemove", markActivity);
+    document.addEventListener("mousedown", markActivity);
+    document.addEventListener("keydown", markActivity);
+
     const promise = listen<number>("hotzone-trigger", async () => {
       try {
         const win = getCurrentWindow();
@@ -120,6 +129,7 @@ function AppInner({
         await win.setFocus();
         if (wasVisible) return;
         clearTimer();
+        markActivity();
         scheduleCheck(initialSec * 1000, win);
       } catch (e) {
         console.warn("[dashboard] show on hotzone failed:", e);
@@ -128,6 +138,9 @@ function AppInner({
     return () => {
       promise.then((unlisten) => unlisten()).catch(() => {});
       clearTimer();
+      document.removeEventListener("mousemove", markActivity);
+      document.removeEventListener("mousedown", markActivity);
+      document.removeEventListener("keydown", markActivity);
     };
   }, [settings.hotzoneAutoHideSec]);
 
@@ -263,6 +276,15 @@ function AppInner({
       <div className="titlebar">
         <span>Smart (Components) Toolkit Widget</span>
         <div className="actions">
+          {screen.kind === "settings" && (
+            <button
+              className="icon-btn"
+              onClick={backToDashboard}
+              title={t.settings_back}
+            >
+              ← {t.settings_back}
+            </button>
+          )}
           <button
             className="icon-btn close-btn"
             onClick={() => getCurrentWindow().close()}

apps/dashboard/src/components/Floorplan.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type ChangeEvent } from "react";
 import { openUrl } from "@tauri-apps/plugin-opener";
 import {
   EMPTY_FLOORPLAN,
@@ -110,8 +110,19 @@ function ImportFloorplanModal({
   const [tab, setTab] = useState<"file" | "paste">("file");
   const [pasted, setPasted] = useState("");
   const [error, setError] = useState<string | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-  async function handleFile(e: React.ChangeEvent<HTMLInputElement>) {
+  // Auto-focus the textarea every time the paste tab becomes active. This
+  // also recovers focus after the window is minimized and restored, which
+  // sometimes leaves the previous element in a focus-stuck state in WebView2.
+  useEffect(() => {
+    if (tab === "paste") {
+      const id = window.setTimeout(() => textareaRef.current?.focus(), 30);
+      return () => window.clearTimeout(id);
+    }
+  }, [tab]);
+
+  async function handleFile(e: ChangeEvent<HTMLInputElement>) {
     setError(null);
     const file = e.target.files?.[0];
     if (!file) return;
@@ -160,14 +171,22 @@ function ImportFloorplanModal({
         </div>
 
         {tab === "file" ? (
-          <input type="file" accept=".svg,image/svg+xml" onChange={handleFile} />
+          <input
+            key="file-input"
+            type="file"
+            accept=".svg,image/svg+xml"
+            onChange={handleFile}
+          />
         ) : (
           <>
             <textarea
+              key="paste-textarea"
+              ref={textareaRef}
               rows={8}
               placeholder="<svg …>…</svg>"
               value={pasted}
               onChange={(e) => setPasted(e.target.value)}
+              onClick={(e) => e.stopPropagation()}
               style={{
                 width: "100%",
                 fontFamily: "monospace",
@@ -178,6 +197,7 @@ function ImportFloorplanModal({
                 borderRadius: 6,
                 padding: 8,
                 resize: "vertical",
+                pointerEvents: "auto",
               }}
             />
             <div className="modal-actions">

apps/dashboard/src/components/Settings.tsx

@@ -28,7 +28,6 @@ export function Settings({
   settings,
   homeys,
   onChange,
-  onBack,
   onResetCredentials,
   onSignOut,
 }: {
@@ -90,9 +89,6 @@ export function Settings({
   return (
     <div className="screen settings-screen">
       <div className="settings-header">
-        <button className="icon-btn" onClick={onBack} title={t.settings_back}>
-          ←
-        </button>
         <h3>{t.settings_title}</h3>
       </div>
 

apps/dashboard/src/styles.css

@@ -46,6 +46,9 @@ body,
   font-weight: 600;
   font-size: 12px;
   color: var(--fg-muted);
+  flex-shrink: 0;
+  height: 36px;
+  box-sizing: border-box;
 }
 
 .titlebar .actions {
@@ -54,6 +57,19 @@ body,
   gap: 6px;
 }
 
+/* Defensive: explicitly mark all non-titlebar content as no-drag so the OS
+   hit-tester never claims clicks for window dragging in larger windows. */
+.screen,
+.screen-centered,
+.tabs,
+.settings-screen,
+.settings-header,
+.modal-backdrop,
+.modal,
+.floorplan-stage {
+  -webkit-app-region: no-drag;
+}
+
 .icon-btn {
   background: transparent;
   border: none;
@@ -249,7 +265,8 @@ button.primary:hover {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 300;
+  z-index: 500;
+  pointer-events: auto;
 }
 .modal {
   background: rgba(30, 32, 38, 0.98);
@@ -260,6 +277,9 @@ button.primary:hover {
   display: flex;
   flex-direction: column;
   gap: 10px;
+  position: relative;
+  z-index: 501;
+  pointer-events: auto;
 }
 .modal-title {
   font-weight: 600;
@@ -365,10 +385,15 @@ button.primary:hover {
   gap: 6px;
   padding: 8px 10px;
   border-bottom: 1px solid var(--border);
-  position: sticky;
-  top: 0;
   background: var(--bg);
-  z-index: 10;
+  position: relative;
+  z-index: 100;
+  isolation: isolate;
+}
+.settings-header .icon-btn {
+  position: relative;
+  z-index: 1;
+  -webkit-app-region: no-drag;
 }
 .settings-header h3 {
   margin: 0;
@@ -427,6 +452,11 @@ button.primary:hover {
   justify-content: center;
   padding: 16px;
   overflow: hidden;
+  position: relative;
+  z-index: 0;
+}
+.floorplan-svg svg {
+  pointer-events: none;
 }
 .floorplan-svg {
   width: 100%;