feat: server-side user preferences — settings sync across browsers

User preferences (theme, icon theme, bookmarks, sidebar state, DC layout,
container view mode) are now saved per-user on the server at
/etc/wolfstack/user-prefs/<username>.json.

On first login, existing localStorage values are uploaded to the server
so existing users keep their bookmarks and settings. On subsequent logins
(including from other browsers/devices), server preferences are applied.

API: GET/POST/PATCH /api/user/preferences with 64KB size limit.
Frontend: savePref()/removePref() wrappers sync to both localStorage
and server. loadUserPreferences() called on page load.

Author: Paul C

src/api/mod.rs

@@ -9696,6 +9696,99 @@ pub async fn wolfflow_all_containers_exec(req: HttpRequest, state: web::Data<App
     }
 }
 
+// ─── User Preferences API ───
+
+fn user_prefs_path(username: &str) -> String {
+    // Sanitize username for safe filesystem path
+    let safe: String = username.chars()
+        .map(|c| if c.is_alphanumeric() || c == '-' || c == '_' || c == '.' { c } else { '_' })
+        .collect();
+    format!("{}/user-prefs/{}.json", crate::paths::get().config_dir, safe)
+}
+
+/// GET /api/user/preferences — load the current user's preferences
+pub async fn user_prefs_get(req: HttpRequest, state: web::Data<AppState>) -> HttpResponse {
+    let username = match require_auth(&req, &state) {
+        Ok(u) => u,
+        Err(resp) => return resp,
+    };
+
+    let path = user_prefs_path(&username);
+    match std::fs::read_to_string(&path) {
+        Ok(data) => {
+            match serde_json::from_str::<serde_json::Value>(&data) {
+                Ok(prefs) => HttpResponse::Ok().json(prefs),
+                Err(_) => HttpResponse::Ok().json(serde_json::json!({})),
+            }
+        }
+        Err(_) => HttpResponse::Ok().json(serde_json::json!({})),
+    }
+}
+
+/// POST /api/user/preferences — save the current user's preferences (full replace)
+pub async fn user_prefs_save(req: HttpRequest, state: web::Data<AppState>, body: web::Json<serde_json::Value>) -> HttpResponse {
+    let username = match require_auth(&req, &state) {
+        Ok(u) => u,
+        Err(resp) => return resp,
+    };
+
+    let path = user_prefs_path(&username);
+    let dir = std::path::Path::new(&path).parent().unwrap();
+    if let Err(e) = std::fs::create_dir_all(dir) {
+        return HttpResponse::InternalServerError().json(serde_json::json!({ "error": format!("Failed to create dir: {}", e) }));
+    }
+
+    // Limit size to prevent abuse (64 KB should be plenty for preferences)
+    let json = serde_json::to_string_pretty(&body.into_inner()).unwrap_or_default();
+    if json.len() > 65536 {
+        return HttpResponse::BadRequest().json(serde_json::json!({ "error": "Preferences too large (max 64 KB)" }));
+    }
+
+    match std::fs::write(&path, &json) {
+        Ok(_) => HttpResponse::Ok().json(serde_json::json!({ "ok": true })),
+        Err(e) => HttpResponse::InternalServerError().json(serde_json::json!({ "error": format!("Failed to save: {}", e) })),
+    }
+}
+
+/// PATCH /api/user/preferences — merge specific keys into existing preferences
+pub async fn user_prefs_patch(req: HttpRequest, state: web::Data<AppState>, body: web::Json<serde_json::Value>) -> HttpResponse {
+    let username = match require_auth(&req, &state) {
+        Ok(u) => u,
+        Err(resp) => return resp,
+    };
+
+    let path = user_prefs_path(&username);
+    let dir = std::path::Path::new(&path).parent().unwrap();
+    let _ = std::fs::create_dir_all(dir);
+
+    // Load existing
+    let mut prefs: serde_json::Map<String, serde_json::Value> = std::fs::read_to_string(&path)
+        .ok()
+        .and_then(|d| serde_json::from_str(&d).ok())
+        .unwrap_or_default();
+
+    // Merge incoming keys
+    if let Some(obj) = body.as_object() {
+        for (k, v) in obj {
+            if v.is_null() {
+                prefs.remove(k);
+            } else {
+                prefs.insert(k.clone(), v.clone());
+            }
+        }
+    }
+
+    let json = serde_json::to_string_pretty(&prefs).unwrap_or_default();
+    if json.len() > 65536 {
+        return HttpResponse::BadRequest().json(serde_json::json!({ "error": "Preferences too large" }));
+    }
+
+    match std::fs::write(&path, &json) {
+        Ok(_) => HttpResponse::Ok().json(serde_json::json!({ "ok": true })),
+        Err(e) => HttpResponse::InternalServerError().json(serde_json::json!({ "error": format!("Failed to save: {}", e) })),
+    }
+}
+
 // ─── WolfUSB API ───
 
 /// GET /api/wolfusb/status — installation status, service status, config
@@ -16202,6 +16295,10 @@ pub fn configure(cfg: &mut web::ServiceConfig) {
         .route("/api/wolfflow/container-exec", web::post().to(wolfflow_container_exec))
         .route("/api/wolfflow/all-containers-exec", web::post().to(wolfflow_all_containers_exec))
         .route("/api/wolfflow/infrastructure", web::get().to(wolfflow_infrastructure))
+        // User Preferences
+        .route("/api/user/preferences", web::get().to(user_prefs_get))
+        .route("/api/user/preferences", web::post().to(user_prefs_save))
+        .route("/api/user/preferences", web::patch().to(user_prefs_patch))
         // WolfUSB — USB over IP
         .route("/api/wolfusb/status", web::get().to(wolfusb_status))
         .route("/api/wolfusb/install", web::post().to(wolfusb_install))

web/js/app.js

@@ -4,6 +4,88 @@
 
 // WolfStack Dashboard — app.js
 
+// ─── User Preferences (synced to server) ───
+
+// Keys that should be persisted server-side per user
+const _syncedPrefKeys = [
+    'wolfstack-theme', 'wolfstack-icon-theme', 'wolfstack-mono-icons', 'wolfstack-mono-preset',
+    'wolfstack_sidebar_collapsed', 'wolfstack_map_collapsed',
+    'wolfstack_dc_layout', 'wolfstack_dc_compact', 'wolfstack_dc_bg_image',
+    'wolfstack_dc_bg_brightness', 'wolfstack_dc_bg_blur',
+    'wolfstack_bookmarks', 'wolfstack_view_docker', 'wolfstack_view_lxc', 'wolfstack_view_vm',
+];
+let _prefsLoaded = false;
+
+// Load user preferences from server and apply to localStorage.
+// If the server has no saved prefs yet, upload current localStorage values
+// so existing users don't lose their bookmarks or theme on first sync.
+async function loadUserPreferences() {
+    try {
+        var resp = await fetch('/api/user/preferences');
+        if (!resp.ok) return;
+        var prefs = await resp.json();
+        if (!prefs || typeof prefs !== 'object') return;
+
+        var serverHasData = Object.keys(prefs).length > 0;
+
+        if (serverHasData) {
+            // Server has prefs — apply to localStorage
+            for (var key of _syncedPrefKeys) {
+                if (prefs[key] !== undefined && prefs[key] !== null) {
+                    localStorage.setItem(key, typeof prefs[key] === 'string' ? prefs[key] : JSON.stringify(prefs[key]));
+                }
+            }
+        } else {
+            // Server has nothing — upload current localStorage so existing users keep their settings
+            var upload = {};
+            var hasAnything = false;
+            for (var key of _syncedPrefKeys) {
+                var val = localStorage.getItem(key);
+                if (val !== null) {
+                    upload[key] = val;
+                    hasAnything = true;
+                }
+            }
+            if (hasAnything) {
+                fetch('/api/user/preferences', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(upload),
+                }).catch(function() {});
+            }
+        }
+        _prefsLoaded = true;
+    } catch (e) { /* silent — localStorage fallback works */ }
+}
+
+// Save a single preference to both localStorage and server
+function savePref(key, value) {
+    localStorage.setItem(key, value);
+    if (_syncedPrefKeys.includes(key)) {
+        var patch = {};
+        patch[key] = value;
+        fetch('/api/user/preferences', {
+            method: 'PATCH',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(patch),
+        }).catch(function() {});
+    }
+}
+
+// Remove a preference from both localStorage and server
+function removePref(key) {
+    localStorage.removeItem(key);
+    if (_syncedPrefKeys.includes(key)) {
+        var patch = {};
+        patch[key] = null;
+        fetch('/api/user/preferences', {
+            method: 'PATCH',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(patch),
+        }).catch(function() {});
+    }
+}
+
 // ─── State ───
 let currentPage = 'datacenter';
 let currentComponent = null;
@@ -33,7 +115,7 @@ function toggleSidebar() {
         // Desktop: toggle collapsed sidebar
         document.body.classList.toggle('sidebar-collapsed');
         const collapsed = document.body.classList.contains('sidebar-collapsed');
-        localStorage.setItem('wolfstack_sidebar_collapsed', collapsed ? '1' : '0');
+        savePref('wolfstack_sidebar_collapsed', collapsed ? '1' : '0');
     }
     // Invalidate map size + 3D topology after sidebar transition
     setTimeout(() => {
@@ -67,7 +149,7 @@ let mapCollapsed = localStorage.getItem('wolfstack_map_collapsed') === '1'; // d
 
 function toggleMapCollapse() {
     mapCollapsed = !mapCollapsed;
-    localStorage.setItem('wolfstack_map_collapsed', mapCollapsed ? '1' : '0');
+    savePref('wolfstack_map_collapsed', mapCollapsed ? '1' : '0');
     applyMapCollapse();
 }
 
@@ -530,7 +612,7 @@ function loadBookmarks() {
     catch { return []; }
 }
 function saveBookmarks(bookmarks) {
-    localStorage.setItem('wolfstack_bookmarks', JSON.stringify(bookmarks));
+    savePref('wolfstack_bookmarks', JSON.stringify(bookmarks));
 }
 function renderBookmarks() {
     const el = document.getElementById('bookmarks-list');
@@ -705,7 +787,7 @@ function toggleBgSettingsPanel() {
 
 function setDcLayout(layout) {
     dcLayout = layout;
-    localStorage.setItem('wolfstack_dc_layout', layout);
+    savePref('wolfstack_dc_layout', layout);
     const icon = document.getElementById('dc-layout-icon');
     const label = document.getElementById('dc-layout-label');
     if (icon) icon.textContent = layout === 'grid' ? '⊞' : '▥';
@@ -718,7 +800,7 @@ function setDcLayout(layout) {
 
 function toggleDcCompact(checked) {
     dcCompact = checked;
-    localStorage.setItem('wolfstack_dc_compact', checked ? '1' : '0');
+    savePref('wolfstack_dc_compact', checked ? '1' : '0');
     renderDatacenterOverview();
 }
 
@@ -732,29 +814,29 @@ function handleBgUpload(input) {
     const reader = new FileReader();
     reader.onload = (e) => {
         dcBgImage = e.target.result;
-        localStorage.setItem('wolfstack_dc_bg_image', dcBgImage);
+        savePref('wolfstack_dc_bg_image', dcBgImage);
         applyDcBackground();
     };
     reader.readAsDataURL(file);
 }
 
 function clearBgImage() {
     dcBgImage = '';
-    localStorage.removeItem('wolfstack_dc_bg_image');
+    removePref('wolfstack_dc_bg_image');
     applyDcBackground();
 }
 
 function updateBgBrightness(val) {
     dcBgBrightness = parseInt(val, 10);
-    localStorage.setItem('wolfstack_dc_bg_brightness', val);
+    savePref('wolfstack_dc_bg_brightness', val);
     const el = document.getElementById('dc-bg-bright-val');
     if (el) el.textContent = val + '%';
     applyDcBackground();
 }
 
 function updateBgBlur(val) {
     dcBgBlur = parseInt(val, 10);
-    localStorage.setItem('wolfstack_dc_bg_blur', val);
+    savePref('wolfstack_dc_bg_blur', val);
     const el = document.getElementById('dc-bg-blur-val');
     if (el) el.textContent = val + 'px';
     applyDcBackground();
@@ -9836,6 +9918,7 @@ function tomlToggleRaw(component, displayName) {
 const POLL_FAST = isMobileView() ? 30000 : 15000;
 const POLL_SLOW = isMobileView() ? 120000 : 60000;
 let _currentPollSpeed = 'fast';
+loadUserPreferences(); // Load user preferences from server (async, non-blocking)
 fetchNodes();
 fetchMetricsHistory(); // Initial history load
 loadTaskLog(); // Restore task log from localStorage
@@ -11481,7 +11564,7 @@ function getContainerView(type) {
 }
 
 function setContainerView(type, view) {
-    localStorage.setItem(`wolfstack_view_${type}`, view);
+    savePref(`wolfstack_view_${type}`, view);
     applyContainerView(type);
     // Re-render the current data
     if (type === 'docker') loadDockerContainers();
@@ -22270,7 +22353,7 @@ function applyTheme(themeId) {
     }
 
     // Save preference
-    localStorage.setItem('wolfstack-theme', themeId);
+    savePref('wolfstack-theme', themeId);
 
     // Swap logo for light/dark backgrounds
     const lightThemes = ['light', 'arctic'];
@@ -22321,7 +22404,7 @@ function applyIconTheme(themeName) {
     document.body.appendChild(modal);
     modal.addEventListener('click', e => { if (e.target === modal) modal.remove(); });
     document.getElementById('icon-theme-confirm-btn').onclick = function() {
-        localStorage.setItem('wolfstack-icon-theme', themeName);
+        savePref('wolfstack-icon-theme', themeName);
         location.reload();
     };
 }
@@ -22331,7 +22414,7 @@ async function initIconTheme() {
     // Migrate old "candy" key to "candy_emoji"
     if (currentIconTheme === 'candy') {
         currentIconTheme = 'candy_emoji';
-        localStorage.setItem('wolfstack-icon-theme', 'candy_emoji');
+        savePref('wolfstack-icon-theme', 'candy_emoji');
     }
     // Update icon theme selector UI
     document.querySelectorAll('.icon-theme-card').forEach(card => {
@@ -22532,12 +22615,12 @@ const MONO_PRESETS = [
 function toggleMonoIcons(enabled) {
     if (enabled) {
         document.documentElement.setAttribute('data-mono-icons', '');
-        localStorage.setItem('wolfstack-mono-icons', '1');
+        savePref('wolfstack-mono-icons', '1');
         const saved = localStorage.getItem('wolfstack-mono-preset') || 'Gray';
         applyMonoPreset(saved);
     } else {
         document.documentElement.removeAttribute('data-mono-icons');
-        localStorage.removeItem('wolfstack-mono-icons');
+        removePref('wolfstack-mono-icons');
     }
     const opts = document.getElementById('mono-icons-options');
     if (opts) opts.style.display = enabled ? '' : 'none';
@@ -22550,7 +22633,7 @@ function applyMonoPreset(name) {
     root.style.setProperty('--mono-hue', preset.hue + 'deg');
     root.style.setProperty('--mono-sat', preset.sat);
     root.style.setProperty('--mono-brightness', preset.brightness);
-    localStorage.setItem('wolfstack-mono-preset', preset.name);
+    savePref('wolfstack-mono-preset', preset.name);
     // Update active state on preset buttons
     document.querySelectorAll('.mono-preset-btn').forEach(btn => {
         btn.style.outline = btn.dataset.preset === preset.name ? '2px solid var(--accent)' : 'none';