fix(desktop): restore custom titlebar window dragging

Replace Electron-style -webkit-app-region with Tauri 2 data-tauri-drag-region
and enable acceptFirstMouse for drag on unfocused macOS windows.

Signed-off-by: crimsonsunset <jsangio1@gmail.com>

Author: crimsonsunset

apps/desktop/src-tauri/tauri.conf.json

@@ -36,7 +36,8 @@
         "minHeight": 600,
         "center": true,
         "preventOverflow": true,
-        "decorations": false
+        "decorations": false,
+        "acceptFirstMouse": true
       }
     ],
     "security": {

apps/desktop/src/App.tsx

@@ -296,16 +296,22 @@ function AppContent() {
   );
 
   const titleBar = (
-    <div className="flex items-center gap-1.5 pl-3">
-      <McpMuxGlyph className="h-4 w-4 shrink-0" />
-      <span className="text-sm font-bold tracking-tight select-none">
-        <span style={{ color: 'var(--brand-light)' }}>Mcp</span>
-        <span style={{ color: 'var(--brand-dark)' }}>Mux</span>
-      </span>
-      <div className="mx-2 h-4 w-px bg-[rgb(var(--border))]" />
+    <div className="flex h-full w-full items-center pl-3">
+      <div
+        data-tauri-drag-region
+        className="flex h-full min-w-0 flex-1 items-center gap-1.5"
+      >
+        <McpMuxGlyph className="pointer-events-none h-4 w-4 shrink-0" />
+        <span className="pointer-events-none select-none text-sm font-bold tracking-tight">
+          <span style={{ color: 'var(--brand-light)' }}>Mcp</span>
+          <span style={{ color: 'var(--brand-dark)' }}>Mux</span>
+        </span>
+        <div className="pointer-events-none mx-2 h-4 w-px bg-[rgb(var(--border))]" />
+      </div>
       <button
+        type="button"
         onClick={toggleDarkMode}
-        className="p-1 rounded-md hover:bg-[rgb(var(--surface-hover))] transition-colors"
+        className="no-drag rounded-md p-1 transition-colors hover:bg-[rgb(var(--surface-hover))]"
         title={theme === 'dark' ? 'Light mode' : 'Dark mode'}
       >
         {theme === 'dark' ? <Sun className="h-3.5 w-3.5 text-[rgb(var(--muted))]" /> : <Moon className="h-3.5 w-3.5 text-[rgb(var(--muted))]" />}

apps/desktop/src/index.css

@@ -194,10 +194,13 @@
 }
 
 @layer utilities {
-  .drag-region {
+  /* Tauri 2 custom titlebar — see https://v2.tauri.app/learn/window-customization/ */
+  [data-tauri-drag-region] {
+    app-region: drag;
     -webkit-app-region: drag;
   }
   .no-drag {
+    app-region: no-drag;
     -webkit-app-region: no-drag;
   }
 

packages/ui/src/components/layout/AppShell.tsx

@@ -16,8 +16,8 @@ export function AppShell({ sidebar, children, statusBar, titleBar, windowControl
       {/* Custom title bar */}
       {titleBar && (
         <div className="h-9 flex-shrink-0 bg-[rgb(var(--surface))] border-b border-[rgb(var(--border-subtle))] flex items-center">
-          {/* Draggable area — fills space between logo and window controls */}
-          <div className="drag-region flex-1 h-full flex items-center">
+          {/* Draggable area — titleBar marks regions with data-tauri-drag-region (Tauri 2) */}
+          <div className="flex-1 h-full flex items-center min-w-0">
             {titleBar}
           </div>
           {/* Window controls — outside drag region so clicks work */}