From fcb2677e426e3898775adbc52d5b9dbed3894ea6 Mon Sep 17 00:00:00 2001
From: muxammadreza <137672463+muxammadreza@users.noreply.github.com>
Date: Thu, 25 Jun 2026 11:32:59 -0700
Subject: [PATCH] fix: restore titlebar drag region without breaking controls

---
 apps/desktop/src/App.tsx                       | 12 ++++++------
 packages/ui/src/components/layout/AppShell.tsx | 13 +++++++++----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx
index 94ca61b2..2fc82019 100644
--- a/apps/desktop/src/App.tsx
+++ b/apps/desktop/src/App.tsx
@@ -303,16 +303,16 @@ function AppContent() {
   );
 
   const titleBar = (
-    <div className="flex items-center gap-1.5 pl-3">
+    <div className="flex h-full items-center gap-1.5 pl-3" data-tauri-drag-region>
       <McpMuxGlyph className="h-4 w-4 shrink-0" />
-      <span className="select-none text-sm font-bold tracking-tight">
+      <span className="select-none text-sm font-bold tracking-tight" data-tauri-drag-region>
         <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="mx-2 h-4 w-px bg-[rgb(var(--border))]" data-tauri-drag-region />
       <button
         onClick={toggleDarkMode}
-        className="rounded-md p-1 transition-colors hover:bg-[rgb(var(--surface-hover))]"
+        className="no-drag rounded-md p-1 transition-colors hover:bg-[rgb(var(--surface-hover))]"
         title={theme === 'dark' ? 'Light mode' : 'Dark mode'}
       >
         {theme === 'dark' ? (
@@ -330,7 +330,7 @@ function AppContent() {
       statusBar={statusBar}
       titleBar={titleBar}
       windowControls={
-        <div className="flex items-center">
+        <div className="no-drag flex h-full items-center">
           <WindowButton action="minimize" />
           <WindowButton action="maximize" />
           <WindowButton action="close" />
@@ -416,7 +416,7 @@ function WindowButton({ action }: { action: 'minimize' | 'maximize' | 'close' })
   return (
     <button
       onClick={handleClick}
-      className={`flex h-9 w-11 items-center justify-center transition-colors ${
+      className={`no-drag flex h-9 w-11 items-center justify-center transition-colors ${
         action === 'close'
           ? 'hover:bg-red-500 hover:text-white'
           : 'hover:bg-[rgb(var(--surface-hover))]'
diff --git a/packages/ui/src/components/layout/AppShell.tsx b/packages/ui/src/components/layout/AppShell.tsx
index 2175e28b..2564c044 100644
--- a/packages/ui/src/components/layout/AppShell.tsx
+++ b/packages/ui/src/components/layout/AppShell.tsx
@@ -15,13 +15,18 @@ export function AppShell({ sidebar, children, statusBar, titleBar, windowControl
     <div className={cn('flex h-screen flex-col overflow-hidden bg-[rgb(var(--background))]', className)}>
       {/* 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">
+        <div
+          className="drag-region h-9 flex-shrink-0 bg-[rgb(var(--surface))] border-b border-[rgb(var(--border-subtle))] flex items-center"
+          data-tauri-drag-region
+        >
           {/* Draggable area — fills space between logo and window controls */}
-          <div className="drag-region flex-1 h-full flex items-center">
+          <div className="drag-region flex-1 h-full flex items-center" data-tauri-drag-region>
             {titleBar}
           </div>
-          {/* Window controls — outside drag region so clicks work */}
-          {windowControls}
+          {/* Window controls — force no-drag so clicks work inside the draggable titlebar */}
+          <div className="no-drag flex h-full items-center">
+            {windowControls}
+          </div>
         </div>
       )}