refactor: improve titlebar interactions on macos

src/components/ui/dialog.tsx

@@ -5,6 +5,7 @@ import type * as React from "react";
 import { RxCross2 } from "react-icons/rx";
 
 import { cn } from "@/lib/utils";
+import { WindowDragArea } from "../window-drag-area";
 
 function Dialog({
   ...props
@@ -38,11 +39,13 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[9999] bg-black/50",
         className,
       )}
       {...props}
-    />
+    >
+      <WindowDragArea />
+    </DialogPrimitive.Overlay>
   );
 }
 
@@ -57,7 +60,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[10000] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
           className,
         )}
         {...props}
@@ -102,7 +105,7 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
+      className={cn("text-lg font-semibold leading-none", className)}
       {...props}
     />
   );
@@ -115,7 +118,7 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   );

src/components/window-drag-area.tsx

@@ -33,7 +33,7 @@ export function WindowDragArea() {
     void startDrag();
   };
 
-  // Only render on macOS
+  // Only render on macOS and when no dialogs are open
   if (!isMacOS) {
     return null;
   }
@@ -41,20 +41,11 @@ export function WindowDragArea() {
   return (
     <button
       type="button"
-      className="fixed top-0 right-0 left-0 h-10 bg-transparent border-0 z-9999"
-      style={{
-        // Ensure it's above all other content
-        zIndex: 9999,
-        // Make it transparent but still capture mouse events
-        backgroundColor: "transparent",
-        // Prevent text selection during drag
-        userSelect: "none",
-        WebkitUserSelect: "none",
-      }}
+      className="fixed top-0 right-0 left-0 h-10 bg-transparent border-0 z-[9999] select-none"
       onMouseDown={handleMouseDown}
-      // Prevent context menu
       onContextMenu={(e) => {
         e.preventDefault();
+        e.stopPropagation();
       }}
     />
   );