108 lines
4.2 KiB
TypeScript
108 lines
4.2 KiB
TypeScript
'use client'
|
|
|
|
import { useRouter } from 'next/navigation'
|
|
import { useState } from 'react'
|
|
import { SettingsSection, SettingSelect } from '@/components/settings'
|
|
import { updateAISettings as updateAI } from '@/app/actions/ai-settings'
|
|
import { updateUserSettings as updateUser } from '@/app/actions/user-settings'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
|
|
interface AppearanceSettingsFormProps {
|
|
initialTheme: string
|
|
initialFontSize: string
|
|
}
|
|
|
|
export function AppearanceSettingsForm({ initialTheme, initialFontSize }: AppearanceSettingsFormProps) {
|
|
const router = useRouter()
|
|
const [theme, setTheme] = useState(initialTheme)
|
|
const [fontSize, setFontSize] = useState(initialFontSize)
|
|
const { t } = useLanguage()
|
|
|
|
const handleThemeChange = async (value: string) => {
|
|
setTheme(value)
|
|
localStorage.setItem('theme-preference', value)
|
|
|
|
// Instant visual update
|
|
const root = document.documentElement
|
|
root.removeAttribute('data-theme')
|
|
root.classList.remove('dark')
|
|
|
|
if (value === 'auto') {
|
|
if (window.matchMedia('(prefers-color-scheme: dark)').matches) root.classList.add('dark')
|
|
} else if (value === 'dark') {
|
|
root.classList.add('dark')
|
|
} else if (value === 'light') {
|
|
root.setAttribute('data-theme', 'light')
|
|
} else {
|
|
root.setAttribute('data-theme', value)
|
|
if (['midnight', 'blue', 'sepia'].includes(value)) root.classList.add('dark')
|
|
}
|
|
|
|
// Save to DB (no need for router.refresh - localStorage handles immediate visuals)
|
|
await updateUser({ theme: value as 'light' | 'dark' | 'auto' | 'sepia' | 'midnight' | 'blue' })
|
|
}
|
|
|
|
const handleFontSizeChange = async (value: string) => {
|
|
setFontSize(value)
|
|
|
|
// Instant visual update
|
|
const fontSizeMap: Record<string, string> = {
|
|
'small': '14px', 'medium': '16px', 'large': '18px', 'extra-large': '20px'
|
|
}
|
|
const root = document.documentElement
|
|
root.style.setProperty('--user-font-size', fontSizeMap[value] || '16px')
|
|
|
|
await updateAI({ fontSize: value as any })
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold mb-2">{t('appearance.title')}</h1>
|
|
<p className="text-gray-600 dark:text-gray-400">
|
|
{t('appearance.description')}
|
|
</p>
|
|
</div>
|
|
|
|
<SettingsSection
|
|
title={t('settings.theme')}
|
|
icon={<span className="text-2xl">🎨</span>}
|
|
description={t('settings.themeLight') + ' / ' + t('settings.themeDark')}
|
|
>
|
|
<SettingSelect
|
|
label={t('settings.theme')}
|
|
description={t('settings.selectLanguage')}
|
|
value={theme}
|
|
options={[
|
|
{ value: 'slate', label: t('settings.themeLight') },
|
|
{ value: 'dark', label: t('settings.themeDark') },
|
|
{ value: 'sepia', label: 'Sepia' },
|
|
{ value: 'midnight', label: 'Midnight' },
|
|
{ value: 'blue', label: 'Blue' },
|
|
{ value: 'auto', label: t('settings.themeSystem') },
|
|
]}
|
|
onChange={handleThemeChange}
|
|
/>
|
|
</SettingsSection>
|
|
|
|
<SettingsSection
|
|
title={t('profile.fontSize')}
|
|
icon={<span className="text-2xl">📝</span>}
|
|
description={t('profile.fontSizeDescription')}
|
|
>
|
|
<SettingSelect
|
|
label={t('profile.fontSize')}
|
|
description={t('profile.selectFontSize')}
|
|
value={fontSize}
|
|
options={[
|
|
{ value: 'small', label: t('profile.fontSizeSmall') },
|
|
{ value: 'medium', label: t('profile.fontSizeMedium') },
|
|
{ value: 'large', label: t('profile.fontSizeLarge') },
|
|
]}
|
|
onChange={handleFontSizeChange}
|
|
/>
|
|
</SettingsSection>
|
|
</div>
|
|
)
|
|
}
|