Auto-save appearance settings; document EXPOSED_KEYS contract

app/routers/settings.py

@@ -24,6 +24,9 @@
 logger = logging.getLogger(__name__)
 router = APIRouter(prefix="/api/settings", tags=["settings"])
 
+# Every key in this list must also appear in the `sf` object in static/js/app.js,
+# and every key in `sf` that needs server persistence must appear here.
+# Mismatch = silent data loss: server drops unknown keys on PATCH and never returns them on GET.
 EXPOSED_KEYS = [
     "pushover_user_key",
     "pushover_app_token",

static/index.html

@@ -1856,7 +1856,7 @@ <h3>No ratings yet</h3>
           <div class="flex gap-2 mt-3">
             <button class="btn btn-primary btn-sm" @click="saveSettings()">💾 Save</button>
           </div>
-          <div class="text-xs text-muted mt-2">Changes apply immediately. Save to persist across sessions.</div>
+          <div class="text-xs text-muted mt-2">Changes apply and save immediately.</div>
         </div>
 
 

static/js/app.js

@@ -188,6 +188,13 @@ function app() {
       this.$watch('ratingsStatusFilter', val => { localStorage.setItem('ratings_status_filter', val); });
       this.$watch('viewMode',    val => { this.sf.default_view_mode    = val;                  this.saveSettingsSilent(); });
       this.$watch('feedGrouped', val => { this.sf.default_feed_grouped = val ? 'true' : 'false'; this.saveSettingsSilent(); });
+      this.$watch('sf.accent_color', () => this.saveSettingsSilent());
+      this.$watch('sf.font_scale',   () => this.saveSettingsSilent());
+      this.$watch('sf.card_radius',  () => this.saveSettingsSilent());
+      this.$watch('sf.sidebar_width', () => {
+        clearTimeout(this._sidebarSaveTimer);
+        this._sidebarSaveTimer = setTimeout(() => this.saveSettingsSilent(), 500);
+      });
       window.addEventListener('hashchange', () => {
         const p = location.hash.slice(1);
         if (validPages.includes(p) && p !== this.page) this.page = p;