From 16fe40bfc207bf930f691c9705dc14f0b2cae8c9 Mon Sep 17 00:00:00 2001
From: Jiayuan Zhang <forrestchang7@gmail.com>
Date: Tue, 10 Feb 2026 22:17:07 +0800
Subject: [PATCH] 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                 |  2 ++
 apps/desktop/src/renderer/src/pages/layout.tsx | 12 +++++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/desktop/src/main/index.ts b/apps/desktop/src/main/index.ts
index dbd0bb49..6f3ffc67 100644
--- a/apps/desktop/src/main/index.ts
+++ b/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
diff --git a/apps/desktop/src/renderer/src/pages/layout.tsx b/apps/desktop/src/renderer/src/pages/layout.tsx
index 4f3e3867..e1d9cb1d 100644
--- a/apps/desktop/src/renderer/src/pages/layout.tsx
+++ b/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>