Move macOS traffic lights into a separate dark native title bar

Hop-State: A_06FPGAM56HWTNHR51V8C8ER
Hop-Proposal: R_06FPGAK21NPYNM5F8G9D1YG
Hop-Task: T_06FPG9KFDZWAYM9PGCZTAHG
Hop-Attempt: AT_06FPG9KFDYGG2TPC5PABM1G

src-tauri/capabilities/default.json

@@ -5,7 +5,6 @@
   "windows": ["main"],
   "permissions": [
     "core:default",
-    "core:window:allow-start-dragging",
     "notification:default"
   ]
 }

src-tauri/tauri.conf.json

@@ -19,7 +19,9 @@
         "minHeight": 820,
         "center": true,
         "hiddenTitle": true,
-        "titleBarStyle": "Overlay"
+        "titleBarStyle": "Visible",
+        "theme": "Dark",
+        "backgroundColor": "#080909"
       }
     ],
     "security": {

src/App.css

@@ -21,7 +21,6 @@ button:focus-visible, input:focus-visible { outline: 2px solid #fff; outline-off
 .panel-status { position: absolute; z-index: 2; bottom: 34px; left: 48px; right: 38px; display: flex; justify-content: space-between; color: rgba(255,255,255,.3); font: 500 9px "Roboto Mono", monospace; letter-spacing: 1.4px; }
 
 .form-panel { position: relative; overflow-y: auto; background: radial-gradient(circle at 85% 10%, rgba(255,255,255,.035), transparent 31%), #0c0d0d; }
-.drag-strip { position: fixed; z-index: 1; top: 0; right: 0; width: 55%; height: 36px; }
 .back-button { position: absolute; z-index: 2; top: 46px; left: 46px; display: flex; align-items: center; gap: 7px; padding: 7px 0; border: 0; background: transparent; color: rgba(255,255,255,.55); font-size: 13px; cursor: pointer; }
 .back-button:hover { color: #fff; }
 .form-wrap { width: min(440px, calc(100% - 80px)); min-height: calc(100% - 66px); margin: 0 auto; display: flex; align-items: center; padding: 78px 0 68px; }

src/App.tsx

@@ -384,7 +384,7 @@ function App() {
     const name = user.displayName?.trim() || user.handle.replace(/^@/, "").split("@")[0];
     return (
       <main className="app-shell">
-        <aside className="sidebar" data-tauri-drag-region="deep">
+        <aside className="sidebar">
           <div className="sidebar-brand"><Wordmark className="sidebar-wordmark"/></div>
           <nav aria-label="Main navigation">
             <button className="nav-item active"><Icon name="home"/><span>Home</span></button>
@@ -401,7 +401,7 @@ function App() {
           </div>
         </aside>
         <section className="home-content">
-          <header className="home-header" data-tauri-drag-region="deep"><h1>Home</h1><span className="connected-pill"><i/>Connected</span></header>
+          <header className="home-header"><h1>Home</h1><span className="connected-pill"><i/>Connected</span></header>
           <div className="home-empty">
             <div className="orbit-mark"><span/><span/><i/></div>
             <p className="eyebrow">SESSION ESTABLISHED</p>
@@ -415,7 +415,7 @@ function App() {
 
   return (
     <main className="onboarding-shell">
-      <section className="signal-panel" data-tauri-drag-region="deep">
+      <section className="signal-panel">
         <SignalField/>
         <div className="signal-shade"/>
         <div className="panel-brand"><Wordmark className="panel-wordmark"/></div>
@@ -427,7 +427,6 @@ function App() {
       </section>
 
       <section className="form-panel">
-        <div className="drag-strip" data-tauri-drag-region/>
         {screen !== "node" && <button className="back-button" onClick={() => { setError(""); setScreen(screen === "register" ? "login" : "node"); }}><Icon name="back" size={18}/>Back</button>}
         <div className="form-wrap">
           {screen === "node" && (