fix: adress pr comments

This commit is contained in:
Shirone
2026-01-14 15:43:42 +01:00
parent 8419b12f3f
commit 7b73ff34f1

View File

@@ -14,9 +14,9 @@ const Z_INDEX = {
THEME_SUBMENU: 101, THEME_SUBMENU: 101,
} as const; } as const;
// Theme option type from sidebar constants // Theme option type - using ThemeMode for type safety
interface ThemeOption { interface ThemeOption {
value: string; value: ThemeMode;
label: string; label: string;
icon: LucideIcon; icon: LucideIcon;
color: string; color: string;
@@ -64,10 +64,10 @@ interface ThemeColumnProps {
title: string; title: string;
icon: LucideIcon; icon: LucideIcon;
themes: ThemeOption[]; themes: ThemeOption[];
selectedTheme: string | null; selectedTheme: ThemeMode | null;
onPreviewEnter: (value: string) => void; onPreviewEnter: (value: ThemeMode) => void;
onPreviewLeave: (e: React.PointerEvent) => void; onPreviewLeave: (e: React.PointerEvent) => void;
onSelect: (value: string) => void; onSelect: (value: ThemeMode) => void;
} }
const ThemeColumn = memo(function ThemeColumn({ const ThemeColumn = memo(function ThemeColumn({
@@ -160,14 +160,14 @@ export function ProjectContextMenu({
setShowRemoveDialog(true); setShowRemoveDialog(true);
}; };
const handleThemeSelect = (value: string) => { const handleThemeSelect = (value: ThemeMode | '') => {
setPreviewTheme(null); setPreviewTheme(null);
if (value !== '') { if (value !== '') {
setTheme(value as ThemeMode); setTheme(value);
} else { } else {
setTheme(globalTheme); setTheme(globalTheme);
} }
setProjectTheme(project.id, value === '' ? null : (value as ThemeMode)); setProjectTheme(project.id, value === '' ? null : value);
setShowThemeSubmenu(false); setShowThemeSubmenu(false);
}; };
@@ -209,9 +209,15 @@ export function ProjectContextMenu({
</button> </button>
{/* Theme Submenu Trigger */} {/* Theme Submenu Trigger */}
<div className="relative"> <div
className="relative"
onMouseEnter={() => setShowThemeSubmenu(true)}
onMouseLeave={() => {
setShowThemeSubmenu(false);
setPreviewTheme(null);
}}
>
<button <button
onMouseEnter={() => setShowThemeSubmenu(true)}
onClick={() => setShowThemeSubmenu(!showThemeSubmenu)} onClick={() => setShowThemeSubmenu(!showThemeSubmenu)}
className={cn( className={cn(
'w-full flex items-center gap-2 px-3 py-2 rounded-md', 'w-full flex items-center gap-2 px-3 py-2 rounded-md',
@@ -242,17 +248,13 @@ export function ProjectContextMenu({
'animate-in fade-in zoom-in-95 duration-100' 'animate-in fade-in zoom-in-95 duration-100'
)} )}
style={{ zIndex: Z_INDEX.THEME_SUBMENU }} style={{ zIndex: Z_INDEX.THEME_SUBMENU }}
onMouseLeave={() => {
setShowThemeSubmenu(false);
setPreviewTheme(null);
}}
data-testid="project-theme-submenu" data-testid="project-theme-submenu"
> >
<div className="p-2"> <div className="p-2">
{/* Use Global Option */} {/* Use Global Option */}
<button <button
onPointerEnter={() => handlePreviewEnter(globalTheme)} onPointerEnter={() => handlePreviewEnter(globalTheme)}
onPointerLeave={() => setPreviewTheme(null)} onPointerLeave={handlePreviewLeave}
onClick={() => handleThemeSelect('')} onClick={() => handleThemeSelect('')}
className={cn( className={cn(
'w-full flex items-center gap-2 px-3 py-2 rounded-md', 'w-full flex items-center gap-2 px-3 py-2 rounded-md',
@@ -277,8 +279,8 @@ export function ProjectContextMenu({
<ThemeColumn <ThemeColumn
title="Dark" title="Dark"
icon={Moon} icon={Moon}
themes={PROJECT_DARK_THEMES} themes={PROJECT_DARK_THEMES as ThemeOption[]}
selectedTheme={project.theme ?? null} selectedTheme={project.theme as ThemeMode | null}
onPreviewEnter={handlePreviewEnter} onPreviewEnter={handlePreviewEnter}
onPreviewLeave={handlePreviewLeave} onPreviewLeave={handlePreviewLeave}
onSelect={handleThemeSelect} onSelect={handleThemeSelect}
@@ -286,8 +288,8 @@ export function ProjectContextMenu({
<ThemeColumn <ThemeColumn
title="Light" title="Light"
icon={Sun} icon={Sun}
themes={PROJECT_LIGHT_THEMES} themes={PROJECT_LIGHT_THEMES as ThemeOption[]}
selectedTheme={project.theme ?? null} selectedTheme={project.theme as ThemeMode | null}
onPreviewEnter={handlePreviewEnter} onPreviewEnter={handlePreviewEnter}
onPreviewLeave={handlePreviewLeave} onPreviewLeave={handlePreviewLeave}
onSelect={handleThemeSelect} onSelect={handleThemeSelect}