Linus Rath
838de8e5da
Rename "List Density" to "Density" and apply spacing changes globally instead of only to email list item heights. - Replace hardcoded padding/gap values with CSS custom properties (--density-item-py, --density-item-gap, --density-header-py, --density-card-p, --density-sidebar-py) set via JS on :root - Apply density-responsive spacing to email list items, thread views, email viewer, sidebar, navigation rail, contacts, and calendar - Use inline styles instead of Tailwind arbitrary value classes to avoid Turbopack compilation hangs - Rename listDensity → density in store, types, and components - Add persist migration (v1 → v2) and onRehydrateStorage callback - Update all 8 locale files with broadened labels/descriptions
84 lines
3.1 KiB
TypeScript
84 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
import { useThemeStore } from '@/stores/theme-store';
|
|
import { useSettingsStore, type ToolbarPosition } from '@/stores/settings-store';
|
|
import { LanguageSwitcher } from '@/components/ui/language-switcher';
|
|
import { SettingsSection, SettingItem, RadioGroup, ToggleSwitch } from './settings-section';
|
|
|
|
export function AppearanceSettings() {
|
|
const t = useTranslations('settings.appearance');
|
|
const { theme, setTheme } = useThemeStore();
|
|
const { fontSize, density, animationsEnabled, toolbarPosition, updateSetting } = useSettingsStore();
|
|
|
|
return (
|
|
<SettingsSection title={t('title')} description={t('description')}>
|
|
{/* Theme */}
|
|
<SettingItem label={t('theme.label')} description={t('theme.description')}>
|
|
<RadioGroup
|
|
value={theme}
|
|
onChange={(value) => setTheme(value as 'light' | 'dark' | 'system')}
|
|
options={[
|
|
{ value: 'light', label: t('theme.light') },
|
|
{ value: 'dark', label: t('theme.dark') },
|
|
{ value: 'system', label: t('theme.system') },
|
|
]}
|
|
/>
|
|
</SettingItem>
|
|
|
|
{/* Language */}
|
|
<SettingItem label={t('language.label')} description={t('language.description')}>
|
|
<LanguageSwitcher />
|
|
</SettingItem>
|
|
|
|
{/* Font Size */}
|
|
<SettingItem label={t('font_size.label')} description={t('font_size.description')}>
|
|
<RadioGroup
|
|
value={fontSize}
|
|
onChange={(value) => updateSetting('fontSize', value as 'small' | 'medium' | 'large')}
|
|
options={[
|
|
{ value: 'small', label: t('font_size.small') },
|
|
{ value: 'medium', label: t('font_size.medium') },
|
|
{ value: 'large', label: t('font_size.large') },
|
|
]}
|
|
/>
|
|
</SettingItem>
|
|
|
|
{/* Density */}
|
|
<SettingItem label={t('list_density.label')} description={t('list_density.description')}>
|
|
<RadioGroup
|
|
value={density}
|
|
onChange={(value) =>
|
|
updateSetting('density', value as 'compact' | 'regular' | 'comfortable')
|
|
}
|
|
options={[
|
|
{ value: 'compact', label: t('list_density.compact') },
|
|
{ value: 'regular', label: t('list_density.regular') },
|
|
{ value: 'comfortable', label: t('list_density.comfortable') },
|
|
]}
|
|
/>
|
|
</SettingItem>
|
|
|
|
{/* Toolbar Position */}
|
|
<SettingItem label={t('toolbar_position.label')} description={t('toolbar_position.description')}>
|
|
<RadioGroup
|
|
value={toolbarPosition}
|
|
onChange={(value) => updateSetting('toolbarPosition', value as ToolbarPosition)}
|
|
options={[
|
|
{ value: 'top', label: t('toolbar_position.top') },
|
|
{ value: 'below-subject', label: t('toolbar_position.below_subject') },
|
|
]}
|
|
/>
|
|
</SettingItem>
|
|
|
|
{/* Animations */}
|
|
<SettingItem label={t('animations.label')} description={t('animations.description')}>
|
|
<ToggleSwitch
|
|
checked={animationsEnabled}
|
|
onChange={(checked) => updateSetting('animationsEnabled', checked)}
|
|
/>
|
|
</SettingItem>
|
|
</SettingsSection>
|
|
);
|
|
}
|