From e37d69bd632c5a68d6d7745b31e9b7f0f970048f Mon Sep 17 00:00:00 2001
From: David Kaya <david@kaya.sk>
Date: Mon, 30 Mar 2026 16:04:45 +0100
Subject: [PATCH] fix: add macOS traffic light inset to sidebar header

Position macOS traffic light buttons (trafficLightPosition) in the
BrowserWindow and add conditional left padding to the sidebar header
so the app logo and title clear the window management controls.

- Create shared platform detection utility (src/renderer/lib/platform.ts)
- Set trafficLightPosition { x: 16, y: 22 } on macOS in createMainWindow
- Apply pl-20 (80px) left padding to the sidebar header on macOS
- Consolidate navigator.platform check from keyboardShortcuts.ts

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/main/windows/createMainWindow.ts  | 3 +++
 src/renderer/components/Sidebar.tsx   | 3 ++-
 src/renderer/lib/keyboardShortcuts.ts | 2 +-
 src/renderer/lib/platform.ts          | 1 +
 4 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 src/renderer/lib/platform.ts

diff --git a/src/main/windows/createMainWindow.ts b/src/main/windows/createMainWindow.ts
index 5d69ad8..73fbaea 100644
--- a/src/main/windows/createMainWindow.ts
+++ b/src/main/windows/createMainWindow.ts
@@ -21,6 +21,9 @@ export function createMainWindow(): BrowserWindowType {
     }),
     backgroundColor: '#09090b',
     titleBarStyle: 'hidden',
+    ...(process.platform === 'darwin' && {
+      trafficLightPosition: { x: 16, y: 22 },
+    }),
     titleBarOverlay: {
       color: '#09090b',
       symbolColor: '#a1a1aa',
diff --git a/src/renderer/components/Sidebar.tsx b/src/renderer/components/Sidebar.tsx
index ad22a65..7506d26 100644
--- a/src/renderer/components/Sidebar.tsx
+++ b/src/renderer/components/Sidebar.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import appIconUrl from '../../../assets/icons/icon.png';
+import { isMac } from '@renderer/lib/platform';
 import {
   AlertTriangle,
   Archive,
@@ -581,7 +582,7 @@ export function Sidebar({
   return (
     <div className="flex h-full flex-col">
       {/* Header — extra top padding clears the title bar overlay zone */}
-      <div className="drag-region flex items-center justify-between border-b border-[var(--color-border-subtle)] px-4 pb-3 pt-3">
+      <div className={`drag-region flex items-center justify-between border-b border-[var(--color-border-subtle)] pb-3 pt-3 pr-4 ${isMac ? 'pl-20' : 'pl-4'}`}>
         <div className="flex items-center gap-2.5">
           <img alt="aryx" className="size-8 rounded-xl" src={appIconUrl} />
           <div>
diff --git a/src/renderer/lib/keyboardShortcuts.ts b/src/renderer/lib/keyboardShortcuts.ts
index c26e1ec..249b60b 100644
--- a/src/renderer/lib/keyboardShortcuts.ts
+++ b/src/renderer/lib/keyboardShortcuts.ts
@@ -1,4 +1,4 @@
-const isMac = navigator.platform.startsWith('Mac');
+import { isMac } from '@renderer/lib/platform';
 
 /** Platform-aware modifier key label. */
 export const MOD = isMac ? '⌘' : 'Ctrl';
diff --git a/src/renderer/lib/platform.ts b/src/renderer/lib/platform.ts
new file mode 100644
index 0000000..954617b
--- /dev/null
+++ b/src/renderer/lib/platform.ts
@@ -0,0 +1 @@
+export const isMac = navigator.platform.startsWith('Mac');