From ea323e508bc54814cfdbbe7c80f064cbf9537b2f Mon Sep 17 00:00:00 2001
From: Yuri Karamian <yuri@arkhost.com>
Date: Fri, 13 Feb 2026 01:16:08 +0100
Subject: [PATCH] Add macOS native titlebar support

---
 src-tauri/tauri.macos.conf.json     | 16 ++++++++++++++++
 src/lib/components/AppLayout.svelte |  9 ++++++++-
 src/lib/components/TitleBar.svelte  | 10 +++++++++-
 3 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 src-tauri/tauri.macos.conf.json

diff --git a/src-tauri/tauri.macos.conf.json b/src-tauri/tauri.macos.conf.json
new file mode 100644
index 0000000..0d496ba
--- /dev/null
+++ b/src-tauri/tauri.macos.conf.json
@@ -0,0 +1,16 @@
+{
+  "app": {
+    "windows": [
+      {
+        "label": "main",
+        "decorations": true,
+        "titleBarStyle": "Overlay",
+        "hiddenTitle": true,
+        "trafficLightPosition": {
+          "x": 12,
+          "y": 10
+        }
+      }
+    ]
+  }
+}
diff --git a/src/lib/components/AppLayout.svelte b/src/lib/components/AppLayout.svelte
index 0e2c430..ad0d6f7 100644
--- a/src/lib/components/AppLayout.svelte
+++ b/src/lib/components/AppLayout.svelte
@@ -28,6 +28,7 @@
 	} from '$lib/stores/app';
 
 	const appWindow = getCurrentWindow();
+	const isMac = navigator.platform.startsWith('Mac');
 	import { loadVaultState, saveVaultState, readNote } from '$lib/api';
 	import { debounce } from '$lib/utils/debounce';
 	import type { VaultState, FileEvent } from '$lib/types';
@@ -211,7 +212,7 @@
 <div class="app-shell">
 	{#if $focusMode}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="focus-topbar" onmousedown={(e) => { if (!(e.target as HTMLElement).closest('button')) appWindow.startDragging(); }}>
+		<div class="focus-topbar" class:macos={isMac} onmousedown={(e) => { if (!(e.target as HTMLElement).closest('button')) appWindow.startDragging(); }}>
 			<span class="focus-title">{$activeNote?.meta.title || 'Untitled'}</span>
 			<div class="focus-controls">
 				<button class="focus-btn focus-active" onclick={() => ($focusMode = false)} title="Exit focus mode (Escape)">
@@ -219,6 +220,7 @@
 						<path d="M8 3v3a2 2 0 01-2 2H3m18 0h-3a2 2 0 01-2-2V3m0 18v-3a2 2 0 012-2h3M3 16h3a2 2 0 012 2v3"/>
 					</svg>
 				</button>
+				{#if !isMac}
 				<button class="focus-btn" onmousedown={(e) => e.stopPropagation()} onclick={() => appWindow.minimize()} title="Minimize">
 					<svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="9" y2="5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
 				</button>
@@ -228,6 +230,7 @@
 				<button class="focus-btn focus-close" onmousedown={(e) => e.stopPropagation()} onclick={() => appWindow.close()} title="Close">
 					<svg width="10" height="10" viewBox="0 0 10 10"><line x1="1.5" y1="1.5" x2="8.5" y2="8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><line x1="8.5" y1="1.5" x2="1.5" y2="8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
 				</button>
+				{/if}
 			</div>
 		</div>
 	{:else}
@@ -349,4 +352,8 @@
 		background: #e81123;
 		color: white;
 	}
+
+	.focus-topbar.macos {
+		padding-left: 78px;
+	}
 </style>
diff --git a/src/lib/components/TitleBar.svelte b/src/lib/components/TitleBar.svelte
index bc81e24..b558a1d 100644
--- a/src/lib/components/TitleBar.svelte
+++ b/src/lib/components/TitleBar.svelte
@@ -7,6 +7,7 @@
 	} = $props();
 
 	const appWindow = getCurrentWindow();
+	const isMac = navigator.platform.startsWith('Mac');
 	let maximized = $state(false);
 
 	async function checkMaximized() {
@@ -59,7 +60,7 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="titlebar" onmousedown={handleMouseDown}>
+<div class="titlebar" class:macos={isMac} onmousedown={handleMouseDown}>
 	<div class="titlebar-brand">
 		<svg width="18" height="18" viewBox="0 0 48 48" fill="none">
 			<rect width="48" height="48" rx="12" fill="var(--accent)" />
@@ -96,6 +97,7 @@
 			New Note
 		</button>
 	</div>
+	{#if !isMac}
 	<div class="titlebar-controls">
 		<button class="titlebar-btn" onclick={minimize} title="Minimize">
 			<svg width="10" height="10" viewBox="0 0 10 10">
@@ -121,6 +123,7 @@
 			</svg>
 		</button>
 	</div>
+	{/if}
 </div>
 
 <style>
@@ -252,4 +255,9 @@
 		background: #e81123;
 		color: white;
 	}
+
+	/* macOS: add left padding for native traffic light buttons */
+	.titlebar.macos .titlebar-brand {
+		padding-left: 78px;
+	}
 </style>