v0.2.25

src/web/js/20-preferences-auth.js

@@ -231,9 +231,7 @@ function resolvedSkinDepth(prefs = state.prefs) {
   return skinDepths.includes(prefs.skinDepth) ? prefs.skinDepth : "standard";
 }
 
-// "colors" keeps only a predefined style's palette; "standard" and "immersive"
-// also apply its fixed layout profile ("immersive" adds the structural tokens
-// from 57-skin-tokens.css on top, purely in CSS).
+// Style depth: "colors" = palette only; "standard" adds the layout profile; "immersive" adds the structural tokens.
 function layoutInterfaceStyle(prefs = state.prefs) {
   return resolvedSkinDepth(prefs) === "colors" ? null : activeInterfaceStyle(prefs);
 }
@@ -310,9 +308,7 @@ function applyPreferences() {
   const fixedStyle = layoutInterfaceStyle(p);
   const skinDepth = resolvedSkinDepth(p);
   const previousLook = `${root.dataset.theme}|${root.dataset.interfaceSkin}|${root.dataset.skinDepth}|${root.dataset.skinGradients}`;
-  // A predefined style fixes the layout unless editing is allowed; then the
-  // user's own values (seeded from the style when editing was enabled) win,
-  // while the style's palette, tokens and gradients stay in place.
+  // The style fixes the layout unless editing is allowed.
   const visual = fixedStyle && !p.presetScaleUnlocked
     ? { ...p, ...fixedStyle.preferences }
     : p;
@@ -487,9 +483,7 @@ function contrastRatio(first, second) {
   return (a + 0.05) / (b + 0.05);
 }
 
-// Warns while the user's own colours make text hard to read (WCAG AA, 4.5:1
-// for text, 3:1 for the accent against panels). Predefined palettes are
-// checked at release time, so the hint is only shown for custom colours.
+// Live WCAG contrast hint for custom colours.
 function updateContrastWarning(usingPredefinedPalette) {
   const warning = $("#pref-contrast-warning");
   if (!warning) return;
@@ -535,6 +529,7 @@ async function loadPreferences() {
   catch (error) { console.warn("Could not load display preferences", error); }
   applyPreferences();
   await loadTranslations(state.prefs.language);
+  applyPreferences();
 }
 
 async function loadMailPreferences() {
@@ -724,9 +719,7 @@ function schedulePromotedAppearanceSave() {
 
 const presetLayoutPreferenceKeys = [...presetEditablePreferenceKeys].filter((key) => !presetColorPreferenceKeys.has(key));
 
-// "Allow editing predefined style": seed the user's own layout values from the
-// style, so editing starts from exactly what is on screen and never mixes in
-// values saved earlier for another style.
+// Seeds the user's layout from the style so editing starts from what is on screen.
 async function setPresetEditing(enabled) {
   const layoutStyle = layoutInterfaceStyle(state.prefs);
   const payload = { preset_scale_unlocked: enabled };
@@ -746,10 +739,7 @@ async function setPresetEditing(enabled) {
   }
 }
 
-// Colours of a predefined style come from its light and dark palettes and
-// cannot be overridden one by one without mixing two palettes. Changing one
-// therefore turns the style into a RustBox custom copy of the palette that is
-// on screen now, pinned to the current light/dark mode so it stays coherent.
+// A colour change on a predefined style creates a RustBox custom copy of the current palette.
 async function promotePresetToCustom(key, value) {
   const paletteStyle = activeInterfaceStyle(state.prefs);
   if (!paletteStyle || !presetColorPreferenceKeys.has(key) || !state.prefs.presetScaleUnlocked) return false;
@@ -815,7 +805,7 @@ function savePreference(key, value) {
   }
   if (["accentColor", "backgroundColor", "panelColor", "textColor"].includes(key)) state.prefs.colorPreset = "custom";
   applyPreferences();
-  if (key === "language") loadTranslations(value);
+  if (key === "language") loadTranslations(value).then(applyPreferences);
   const previousTimer = preferenceTimers.get(key);
   if (previousTimer) clearTimeout(previousTimer);
   const timer = setTimeout(async () => {