From f15725f28a482a12881944ba08e105c5f663acc2 Mon Sep 17 00:00:00 2001
From: Kacper <kacperlachowiczwp.pl@wp.pl>
Date: Fri, 30 Jan 2026 20:43:28 +0100
Subject: [PATCH] refactor(ui): Extract macOS Electron padding into shared
 constant
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extract the hardcoded 'pt-[38px]' magic number into a shared constant
MACOS_ELECTRON_TOP_PADDING_CLASS for better maintainability. This
addresses the PR #732 review feedback from Gemini Code Assist.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../layout/sidebar/components/sidebar-header.tsx           | 5 +++--
 .../layout/sidebar/components/sidebar-navigation.tsx       | 7 ++++++-
 apps/ui/src/components/layout/sidebar/constants.ts         | 6 ++++++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx b/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx
index 10b656cf..e926b3da 100644
--- a/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx
+++ b/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx
@@ -6,6 +6,7 @@ import type { LucideIcon } from 'lucide-react';
 import { cn, isMac } from '@/lib/utils';
 import { formatShortcut } from '@/store/app-store';
 import { isElectron, type Project } from '@/lib/electron';
+import { MACOS_ELECTRON_TOP_PADDING_CLASS } from '../constants';
 import { getAuthenticatedImageUrl } from '@/lib/api-fetch';
 import { useAppStore } from '@/store/app-store';
 import {
@@ -89,7 +90,7 @@ export function SidebarHeader({
       <div
         className={cn(
           'shrink-0 flex flex-col items-center relative px-2 pt-3 pb-2',
-          isMac && isElectron() && 'pt-[38px]'
+          isMac && isElectron() && MACOS_ELECTRON_TOP_PADDING_CLASS
         )}
       >
         <Tooltip>
@@ -240,7 +241,7 @@ export function SidebarHeader({
     <div
       className={cn(
         'shrink-0 flex flex-col relative px-3 pt-3 pb-2',
-        isMac && isElectron() && 'pt-[38px]'
+        isMac && isElectron() && MACOS_ELECTRON_TOP_PADDING_CLASS
       )}
     >
       {/* Header with logo and project dropdown */}
diff --git a/apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx b/apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx
index d3e7d5cc..2380cc59 100644
--- a/apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx
+++ b/apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx
@@ -5,6 +5,7 @@ import * as LucideIcons from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import { cn, isMac } from '@/lib/utils';
 import { isElectron } from '@/lib/electron';
+import { MACOS_ELECTRON_TOP_PADDING_CLASS } from '../constants';
 import { formatShortcut, useAppStore } from '@/store/app-store';
 import { getAuthenticatedImageUrl } from '@/lib/api-fetch';
 import type { NavSection } from '../types';
@@ -119,7 +120,11 @@ export function SidebarNavigation({
         'flex-1 overflow-y-auto scrollbar-hide px-3 pb-2',
         // Add top padding in discord mode since there's no header
         // Extra padding for macOS Electron to avoid traffic light overlap
-        sidebarStyle === 'discord' ? (isMac && isElectron() ? 'pt-[38px]' : 'pt-3') : 'mt-1'
+        sidebarStyle === 'discord'
+          ? isMac && isElectron()
+            ? MACOS_ELECTRON_TOP_PADDING_CLASS
+            : 'pt-3'
+          : 'mt-1'
       )}
     >
       {/* Project name display for classic/discord mode */}
diff --git a/apps/ui/src/components/layout/sidebar/constants.ts b/apps/ui/src/components/layout/sidebar/constants.ts
index 58417fe3..9ab38cff 100644
--- a/apps/ui/src/components/layout/sidebar/constants.ts
+++ b/apps/ui/src/components/layout/sidebar/constants.ts
@@ -1,5 +1,11 @@
 import { darkThemes, lightThemes } from '@/config/theme-options';
 
+/**
+ * Tailwind class for top padding on macOS Electron to avoid overlapping with traffic light window controls.
+ * This padding is applied conditionally when running on macOS in Electron.
+ */
+export const MACOS_ELECTRON_TOP_PADDING_CLASS = 'pt-[38px]';
+
 /**
  * Shared constants for theme submenu positioning and layout.
  * Used across project-context-menu and project-selector-with-options components