refactor(settings): one card per section

The name field takes its value from the page's own load, not from the user context: the context can still be empty when the form mounts.
2026-09-30 08:46:51 +02:00
1 parent 6da612bebd
commit 28ff6eae52
@@ -0,0 +1,89 @@
+import {useTranslation} from 'react-i18next';
+import {SlidersHorizontal} from 'lucide-react';
+import {toast} from 'sonner';
+
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
+import {Label} from '@/components/ui/label';
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select';
+import {Switch} from '@/components/ui/switch';
+import {useCurrentUserContext} from '../context/CurrentUserContext.jsx';
+import {usePreferences} from '../context/PreferencesContext.jsx';
+import usePersistSettings from '../hooks/usePersistSettings.js';
+import useSaveResponse from '../hooks/useSaveResponse.js';
+import {FAVORITE_PLATFORMS, saveFavoritePlatform} from '../utils/platforms.js';
+import {LANGUAGES, saveSettings} from '../utils/settings.js';
+
+// Radix Select has no empty value.
+const NO_FAVORITE = 'NONE';
+
+export default function PreferencesCard() {
+    const {t, i18n} = useTranslation();
+    const {user: profile, updateUser: updateProfile} = useCurrentUserContext();
+    const {isDarkMode, setDarkMode, setLanguage} = usePreferences();
+    const persistSettings = usePersistSettings();
+    const runSave = useSaveResponse();
+
+    const handleDarkThemeToggle = async () => {
+        const next = !isDarkMode;
+        setDarkMode(next); // apply on the fly
+        await persistSettings(() => saveSettings({useDarkTheme: next}));
+    };
+
+    const handleLanguageChange = async (next) => {
+        await persistSettings(() => setLanguage(next));
+    };
+
+    const handleFavoritePlatformChange = async (value) => {
+        const platform = value === NO_FAVORITE ? null : value;
+        if (await runSave(() => saveFavoritePlatform(platform))) {
+            updateProfile((p) => ({...p, settings: {...p.settings, favoritePlatform: platform}}));
+            toast.success(t('SETTINGS.SAVED'));
+        }
+    };
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="flex items-center gap-2"><SlidersHorizontal className="size-4 text-primary"/>{t('SETTINGS.PREFERENCES')}</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-6">
+                <div className="flex items-center justify-between gap-4">
+                    <Label htmlFor="useDarkTheme">{t('SETTINGS.DARK_THEME')}</Label>
+                    <Switch id="useDarkTheme" checked={isDarkMode} onCheckedChange={handleDarkThemeToggle}/>
+                </div>
+                <div className="flex items-center justify-between gap-4">
+                    <Label htmlFor="language">{t('SETTINGS.LANGUAGE')}</Label>
+                    <Select value={i18n.language} onValueChange={handleLanguageChange}>
+                        <SelectTrigger id="language" className="w-40">
+                            <SelectValue/>
+                        </SelectTrigger>
+                        <SelectContent>
+                            {LANGUAGES.map((lang) => (
+                                <SelectItem key={lang} value={lang}>
+                                    {t(`SETTINGS.LANGUAGE_OPTIONS.${lang.toUpperCase()}`)}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
+                <div className="flex items-center justify-between gap-4">
+                    <div className="space-y-1">
+                        <Label htmlFor="favoritePlatform">{t('SETTINGS.FAVORITE_PLATFORM')}</Label>
+                        <p className="text-xs text-muted-foreground">{t('SETTINGS.FAVORITE_PLATFORM_HINT')}</p>
+                    </div>
+                    <Select value={profile?.settings?.favoritePlatform ?? NO_FAVORITE} onValueChange={handleFavoritePlatformChange}>
+                        <SelectTrigger id="favoritePlatform" className="w-48">
+                            <SelectValue/>
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value={NO_FAVORITE}>{t('SETTINGS.FAVORITE_PLATFORM_NONE')}</SelectItem>
+                            {FAVORITE_PLATFORMS.map((platform) => (
+                                <SelectItem key={platform.value} value={platform.value}>{platform.label}</SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}