feat(desktop): hide native title bar with macOS hiddenInset style

Add titleBarStyle hiddenInset and trafficLightPosition to BrowserWindow.
Add drag region to main layout header with no-drag on interactive elements.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/desktop/src/main/index.ts

@@ -69,6 +69,8 @@ function createWindow() {
   win = new BrowserWindow({
     width: 1200,
     height: 800,
+    titleBarStyle: 'hiddenInset',
+    trafficLightPosition: { x: 16, y: 12 },
     webPreferences: {
       preload: path.join(__dirname, '../preload/index.cjs'),
       // Enable node integration for IPC

apps/desktop/src/renderer/src/pages/layout.tsx

@@ -29,12 +29,18 @@ export default function Layout() {
 
   return (
     <div className="h-dvh flex flex-col bg-background">
-      {/* Header */}
-      <header className="flex items-center justify-between px-4 py-3 border-b">
+      {/* Header with drag region for macOS */}
+      <header
+        className="flex items-center justify-between px-4 py-3 border-b pl-20"
+        style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
+      >
         <div className="flex items-center gap-2">
           <span className="text-lg font-semibold">Multica</span>
         </div>
-        <div className="flex items-center gap-1">
+        <div
+          className="flex items-center gap-1"
+          style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
+        >
           <Button variant="ghost" size="icon">
             <HugeiconsIcon icon={Settings02Icon} className="size-5" />
           </Button>