refactor(ui): Extract macOS Electron padding into shared constant

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>
This commit is contained in:
Kacper
2026-01-30 20:43:28 +01:00
parent 7d7d152d4e
commit f15725f28a
3 changed files with 15 additions and 3 deletions

View File

@@ -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 */}

View File

@@ -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 */}

View File

@@ -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