feat: better integrate with macos titlebar

src/app/layout.tsx

@@ -4,6 +4,7 @@ import "@/styles/globals.css";
 import { CustomThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import { WindowDragArea } from "@/components/window-drag-area";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -26,6 +27,7 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <CustomThemeProvider>
+          <WindowDragArea />
           <TooltipProvider>{children}</TooltipProvider>
           <Toaster />
         </CustomThemeProvider>

src/app/page.tsx

@@ -394,13 +394,13 @@ export default function Home() {
   );
 
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 gap-8 sm:p-12 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center w-full max-w-3xl">
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 gap-8 sm:p-12 font-[family-name:var(--font-geist-sans)]  bg-white dark:bg-black">
+      <main className="flex flex-col row-start-2 gap-8 items-center w-full max-w-3xl">
         <Card className="w-full">
           <CardHeader>
-            <div className="flex items-center justify-between">
+            <div className="flex justify-between items-center">
               <CardTitle>Profiles</CardTitle>
-              <div className="flex items-center gap-2">
+              <div className="flex gap-2 items-center">
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button
@@ -409,9 +409,9 @@ export default function Home() {
                       onClick={() => {
                         setSettingsDialogOpen(true);
                       }}
-                      className="flex items-center gap-2"
+                      className="flex gap-2 items-center"
                     >
-                      <GoGear className="h-4 w-4" />
+                      <GoGear className="w-4 h-4" />
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>Settings</TooltipContent>
@@ -423,9 +423,9 @@ export default function Home() {
                       onClick={() => {
                         setCreateProfileDialogOpen(true);
                       }}
-                      className="flex items-center gap-2"
+                      className="flex gap-2 items-center"
                     >
-                      <GoPlus className="h-4 w-4" />
+                      <GoPlus className="w-4 h-4" />
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>Create a new profile</TooltipContent>

src/components/window-drag-area.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { useEffect, useState } from "react";
+
+export function WindowDragArea() {
+  const [isMacOS, setIsMacOS] = useState(false);
+
+  useEffect(() => {
+    // Check if we're on macOS using user agent detection
+    const checkPlatform = () => {
+      const userAgent = navigator.userAgent.toLowerCase();
+      setIsMacOS(userAgent.includes("mac"));
+    };
+
+    checkPlatform();
+  }, []);
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    // Only handle left mouse button
+    if (e.button !== 0) return;
+
+    // Start dragging asynchronously
+    const startDrag = async () => {
+      try {
+        const window = getCurrentWindow();
+        await window.startDragging();
+      } catch (error) {
+        console.error("Failed to start window dragging:", error);
+      }
+    };
+
+    void startDrag();
+  };
+
+  // Only render on macOS
+  if (!isMacOS) {
+    return null;
+  }
+
+  return (
+    <div
+      className="fixed top-0 right-0 left-0 z-50 h-8 cursor-move"
+      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",
+      }}
+      onMouseDown={handleMouseDown}
+      // Prevent context menu
+      onContextMenu={(e) => {
+        e.preventDefault();
+      }}
+    />
+  );
+}