import { useEffect, useRef, useState } from 'react'; import { dp } from './dialogStyles'; import { useI18n } from '../../i18n'; import { useListboxKeyboard } from '../../hooks/useListboxKeyboard'; import { WEB_SHELL_THEMES, type WebShellTheme } from '../../themeContext'; interface ThemeDialogProps { currentTheme: WebShellTheme; onSelect: (theme: WebShellTheme) => void; onClose: () => void; } export function ThemeDialog({ currentTheme, onSelect, onClose, }: ThemeDialogProps) { const { t } = useI18n(); const themes = WEB_SHELL_THEMES.map((id) => ({ id, label: t(`theme.${id}`), description: t(`theme.${id}.desc`), })); const [selectedIdx, setSelectedIdx] = useState(() => { const idx = themes.findIndex((theme) => theme.id === currentTheme); return idx >= 0 ? idx : 0; }); const listRef = useRef(null); const confirm = (index: number) => { const theme = themes[index]; if (!theme) return; onSelect(theme.id); onClose(); }; const { keyboardMode } = useListboxKeyboard({ itemCount: themes.length, activeIndex: selectedIdx, onActiveIndexChange: setSelectedIdx, onConfirm: confirm, }); useEffect(() => { const el = listRef.current?.children[selectedIdx] as | HTMLElement | undefined; el?.scrollIntoView({ block: 'nearest' }); }, [selectedIdx]); return (
0 ? `theme-opt-${selectedIdx}` : undefined } data-web-shell-theme-dialog > {themes.map((theme, index) => { const selected = theme.id === currentTheme; return (
confirm(index)} onMouseMove={() => setSelectedIdx(index)} >
{theme.label}
{theme.description}
); })}
); }