feat(import): add the import page, multi-select add and the favorite platform

src/pages/SettingsPage.jsx

@@ -26,9 +26,11 @@ import {AccentPicker, CornersPicker} from '../components/StylePickers.jsx';
 import ProfileStyleSettings from '../components/ProfileStyleSettings.jsx';
 import {normalizeProfileStyle} from '../utils/profileStyle.js';
 import useSaveProfileStyle from '../hooks/useSaveProfileStyle.js';
+import useSaveResponse from '../hooks/useSaveResponse.js';
 import {coverUrl} from '../utils/games.js';
 import {apiFetch, refreshSession} from '../utils/api.js';
 import {hasSession, markSession} from '../utils/auth.js';
+import {FAVORITE_PLATFORMS, saveFavoritePlatform} from '../utils/platforms.js';
 
 const BACKEND_ERROR_KEY = {
     DISPLAY_NAME_ALREADY_IN_USE: 'SETTINGS.ERROR_DISPLAY_NAME_IN_USE',
@@ -43,6 +45,8 @@ const STEAM_LINK_TOASTS = {
 };
 
 const SUPPORTED_LANGUAGES = ['en', 'de'];
+// Radix Select has no empty value.
+const NO_FAVORITE = 'NONE';
 
 const formatDate = (value, locale) => {
     if (!value) return '—';
@@ -60,6 +64,7 @@ export default function SettingsPage() {
     const {isDarkMode, setDarkMode, setLanguage, appearance} = usePreferences();
     const saveAppearance = useSaveAppearance();
     const saveStyle = useSaveProfileStyle();
+    const runSave = useSaveResponse();
 
     const [profile, setProfile] = useState(null);
     const [isLoading, setIsLoading] = useState(true);
@@ -195,6 +200,14 @@ export default function SettingsPage() {
         await persistSettings({...savedSettings(), language: next});
     };
 
+    const handleFavoritePlatformChange = async (value) => {
+        const platform = value === NO_FAVORITE ? null : value;
+        if (await runSave(() => saveFavoritePlatform(platform))) {
+            setProfile((p) => ({...p, settings: {...p.settings, favoritePlatform: platform}}));
+            toast.success(t('SETTINGS.SAVED'));
+        }
+    };
+
     const handlePublicProfileToggle = async () => {
         const next = !profile?.settings?.publicProfile;
         const result = await persistSettings({...savedSettings(), publicProfile: next});
@@ -308,6 +321,23 @@ export default function SettingsPage() {
                             </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>