Feat v0.2.7 user settings audit (#11)

Co-authored-by: Jeffrey Smith <jasafpro@gmail.com>
Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>

src/js/sw/surfaces/settings/appearance.js

@@ -1,9 +1,15 @@
 /**
- * AppearanceSection — theme, UI scale, message font size
+ * AppearanceSection — theme, UI scale
  */
 const { html } = window;
 const { useState, useCallback } = hooks;
 
+// Migrate cs- prefix to sb- (one-time, preserves existing prefs)
+if (!localStorage.getItem('sb-appearance') && localStorage.getItem('cs-appearance')) {
+    localStorage.setItem('sb-appearance', localStorage.getItem('cs-appearance'));
+    localStorage.removeItem('cs-appearance');
+}
+
 const THEMES = [
     { key: 'light',  icon: '\u2600', label: 'Light' },
     { key: 'dark',   icon: '\u263E', label: 'Dark' },
@@ -11,7 +17,7 @@ const THEMES = [
 ];
 
 function getPrefs() {
-    try { return JSON.parse(localStorage.getItem('cs-appearance') || '{}'); }
+    try { return JSON.parse(localStorage.getItem('sb-appearance') || '{}'); }
     catch { return {}; }
 }
 
@@ -19,7 +25,6 @@ export function AppearanceSection() {
     const prefs = getPrefs();
     const [theme, setTheme] = useState(sw.theme?.current || 'system');
     const [scale, setScale] = useState(prefs.scale || 100);
-    const [msgFont, setMsgFont] = useState(prefs.msgFont || 14);
 
     const applyTheme = useCallback((mode) => {
         setTheme(mode);
@@ -30,8 +35,7 @@ export function AppearanceSection() {
     const save = useCallback(() => {
         const p = getPrefs();
         p.scale = scale;
-        p.msgFont = msgFont;
-        localStorage.setItem('cs-appearance', JSON.stringify(p));
+        localStorage.setItem('sb-appearance', JSON.stringify(p));
 
         // Apply scale to content area only (not shell/nav)
         const inner = document.getElementById('surfaceInner');
@@ -48,10 +52,9 @@ export function AppearanceSection() {
                 inner.style.height = '';
             }
         }
-        document.documentElement.style.setProperty('--msg-font', msgFont + 'px');
 
         sw.emit('toast', { message: 'Appearance saved', variant: 'success' });
-    }, [scale, msgFont]);
+    }, [scale]);
 
     return html`
         <div class="settings-section">
@@ -78,18 +81,6 @@ export function AppearanceSection() {
                     </span>
                 </div>
             </div>
-            <h3 style="margin-top:16px;">Message Font Size</h3>
-            <div class="form-group">
-                <div style="display:flex;align-items:center;gap:8px;">
-                    <input type="range" min="12" max="20" step="1"
-                           value=${msgFont}
-                           onInput=${e => setMsgFont(parseInt(e.target.value))}
-                           style="flex:1;" />
-                    <span style="font-size:12px;color:var(--text-2);font-family:var(--mono);min-width:32px;">
-                        ${msgFont}px
-                    </span>
-                </div>
-            </div>
         </div>
         <button class="btn-md btn-primary" onClick=${save}>Save</button>
     `;