Changeset 0.37.5 (#217)

Co-authored-by: gobha <jasafpro@gmail.com> Co-committed-by: gobha <jasafpro@gmail.com>
2026-03-21 13:41:25 +00:00
parent 05b5affdac
commit 74f3cb84e9
27 changed files with 2211 additions and 667 deletions
--- a/src/js/sw/surfaces/settings/appearance.js
+++ b/src/js/sw/surfaces/settings/appearance.js
@@ -0,0 +1,83 @@
+/**
+ * AppearanceSection — theme, UI scale, message font size
+ */
+const { html } = window;
+const { useState, useCallback } = hooks;
+
+const THEMES = [
+    { key: 'light',  icon: '\u2600', label: 'Light' },
+    { key: 'dark',   icon: '\u263E', label: 'Dark' },
+    { key: 'system', icon: '\u2395', label: 'System' },
+];
+
+function getPrefs() {
+    try { return JSON.parse(localStorage.getItem('cs-appearance') || '{}'); }
+    catch { return {}; }
+}
+
+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);
+        sw.theme.set(mode);
+        sw.emit('theme.changed', { mode, resolved: sw.theme.current });
+    }, []);
+
+    const save = useCallback(() => {
+        const p = getPrefs();
+        p.scale = scale;
+        p.msgFont = msgFont;
+        localStorage.setItem('cs-appearance', JSON.stringify(p));
+
+        // Apply zoom + font size
+        document.documentElement.style.zoom = scale !== 100 ? (scale / 100) : '';
+        document.documentElement.style.setProperty('--msg-font-size', msgFont + 'px');
+
+        sw.emit('toast', { message: 'Appearance saved', variant: 'success' });
+    }, [scale, msgFont]);
+
+    return html`
+        <div class="settings-section">
+            <h3>Theme</h3>
+            <div class="toggle-group" style="display:flex;gap:0;">
+                ${THEMES.map(t => html`
+                    <button class="toggle-btn ${theme === t.key ? 'active' : ''}"
+                            onClick=${() => applyTheme(t.key)}>
+                        ${t.icon} ${t.label}
+                    </button>
+                `)}
+            </div>
+        </div>
+        <div class="settings-section">
+            <h3>UI Scale</h3>
+            <div class="form-group">
+                <div style="display:flex;align-items:center;gap:8px;">
+                    <input type="range" min="80" max="175" step="5"
+                           value=${scale}
+                           onInput=${e => setScale(parseInt(e.target.value))}
+                           style="flex:1;" />
+                    <span style="font-size:12px;color:var(--text-2);font-family:var(--mono);min-width:32px;">
+                        ${scale}%
+                    </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>
+    `;
+}