feat(titlebar): macOS-style traffic light controls and action dropdown

- Window minimize/maximize/close via Tauri API\n- Hover-revealed control icons, improved spacing\n- Agents/Usage buttons with tooltips and motion\n- More options dropdown for Claude, MCP, About

Author: 123vivekr

src/components/CustomTitlebar.tsx

@@ -75,11 +75,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
   return (
     <TooltipProvider>
     <div 
-      className="relative z-[200] h-11 bg-background/95 backdrop-blur-sm flex items-center justify-between select-none border-b border-border/50"
-      style={{ 
-        WebkitAppRegion: 'drag',
-        userSelect: 'none'
-      }}
+      className="relative z-[200] h-11 bg-background/95 backdrop-blur-sm flex items-center justify-between select-none border-b border-border/50 tauri-drag"
       data-tauri-drag-region
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
@@ -93,8 +89,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
               e.stopPropagation();
               handleClose();
             }}
-            className="group relative w-3 h-3 rounded-full bg-red-500 hover:bg-red-600 transition-all duration-200 flex items-center justify-center"
-            style={{ WebkitAppRegion: 'no-drag' }}
+            className="group relative w-3 h-3 rounded-full bg-red-500 hover:bg-red-600 transition-all duration-200 flex items-center justify-center tauri-no-drag"
             title="Close"
           >
             {isHovered && (
@@ -108,8 +103,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
               e.stopPropagation();
               handleMinimize();
             }}
-            className="group relative w-3 h-3 rounded-full bg-yellow-500 hover:bg-yellow-600 transition-all duration-200 flex items-center justify-center"
-            style={{ WebkitAppRegion: 'no-drag' }}
+            className="group relative w-3 h-3 rounded-full bg-yellow-500 hover:bg-yellow-600 transition-all duration-200 flex items-center justify-center tauri-no-drag"
             title="Minimize"
           >
             {isHovered && (
@@ -123,8 +117,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
               e.stopPropagation();
               handleMaximize();
             }}
-            className="group relative w-3 h-3 rounded-full bg-green-500 hover:bg-green-600 transition-all duration-200 flex items-center justify-center"
-            style={{ WebkitAppRegion: 'no-drag' }}
+            className="group relative w-3 h-3 rounded-full bg-green-500 hover:bg-green-600 transition-all duration-200 flex items-center justify-center tauri-no-drag"
             title="Maximize"
           >
             {isHovered && (
@@ -143,7 +136,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
       </div> */}
 
       {/* Right side - Navigation icons with improved spacing */}
-      <div className="flex items-center pr-5 gap-3" style={{ WebkitAppRegion: 'no-drag' }}>
+      <div className="flex items-center pr-5 gap-3 tauri-no-drag">
         {/* Primary actions group */}
         <div className="flex items-center gap-1">
           {onAgentsClick && (
@@ -152,8 +145,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
                 onClick={onAgentsClick}
                 whileTap={{ scale: 0.97 }}
                 transition={{ duration: 0.15 }}
-                className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors"
-                style={{ WebkitAppRegion: 'no-drag' }}
+                className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors tauri-no-drag"
               >
                 <Bot size={16} />
               </motion.button>
@@ -166,8 +158,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
                 onClick={onUsageClick}
                 whileTap={{ scale: 0.97 }}
                 transition={{ duration: 0.15 }}
-                className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors"
-                style={{ WebkitAppRegion: 'no-drag' }}
+                className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors tauri-no-drag"
               >
                 <BarChart3 size={16} />
               </motion.button>
@@ -186,8 +177,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
                 onClick={onSettingsClick}
                 whileTap={{ scale: 0.97 }}
                 transition={{ duration: 0.15 }}
-                className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors"
-                style={{ WebkitAppRegion: 'no-drag' }}
+                className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors tauri-no-drag"
               >
                 <Settings size={16} />
               </motion.button>
@@ -257,4 +247,4 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
     </div>
     </TooltipProvider>
   );
-};
+};