fix(appearance): Theme-Einstellungen serverseitig speichern und beim Login wiederherstellen

Nach PWA-Cache-Löschung gingen Theme und Farbschema verloren, weil sie nur in localStorage lagen. Die Präferenzen werden jetzt synchronisiert und nach dem Login erneut angewendet.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-05-31 14:03:17 +02:00
parent 9e42f828a0
commit d90f292a21
6 changed files with 218 additions and 0 deletions
+62
View File
@@ -0,0 +1,62 @@
import { apiJson } from './api.js'
import { notifyAppearanceChanged } from './appearance.js'
import {
getActiveUserId,
getColorSchemePreference,
getThemePreference,
setColorSchemePreference,
setThemePreference
} from './userPreferences.js'
const API_BASE = '/api/auth/appearance-prefs'
export interface AppearancePrefs {
theme: string
colorScheme: string
persisted: boolean
}
function hasLocalAppearancePrefs(userId: string): boolean {
return (
localStorage.getItem(`user_pref_theme_${userId}`) != null ||
localStorage.getItem(`user_pref_color_scheme_${userId}`) != null
)
}
export async function fetchAppearancePrefs(): Promise<AppearancePrefs> {
if (!getActiveUserId()) {
return { theme: 'auto', colorScheme: 'auto', persisted: false }
}
return apiJson<AppearancePrefs>(API_BASE)
}
export async function saveAppearancePrefsToServer(theme: string, colorScheme: string): Promise<void> {
if (!getActiveUserId()) return
await apiJson<AppearancePrefs>(API_BASE, {
method: 'PUT',
body: JSON.stringify({ theme, colorScheme })
})
}
/** Merge server-stored appearance with local cache (server wins after cache wipe). */
export async function syncAppearancePrefs(userId?: string | null): Promise<void> {
const id = userId?.trim() || getActiveUserId()
if (!id) return
try {
const server = await fetchAppearancePrefs()
if (server.persisted) {
setThemePreference(id, server.theme)
setColorSchemePreference(id, server.colorScheme)
} else if (hasLocalAppearancePrefs(id)) {
await saveAppearancePrefsToServer(getThemePreference(id), getColorSchemePreference(id))
}
} catch (err) {
console.warn('Failed to sync appearance preferences:', err)
}
notifyAppearanceChanged()
}