fixes + theme

public/js/modules/theme.js

@@ -10,7 +10,7 @@ const themeList = $('settings-theme-list');
 // Render theme list in settings
 function renderThemes() {
     if (!themeList) return;
-    const current = localStorage.getItem('hyprcrd-theme') || 'slate';
+    const current = (designPending?.theme) || localStorage.getItem('hyprcrd-theme') || 'slate';
     themeList.innerHTML = '';
     for (const [key, t] of Object.entries(window.themes)) {
         const btn = document.createElement('button');
@@ -19,7 +19,16 @@ function renderThemes() {
         btn.innerHTML = `<span class="w-4 h-4 rounded-full shrink-0" style="background:${t.vars['--t-accent']}"></span>
             <span class="font-pixel text-[10px] flex-1">${t.label}</span>
             ${active ? '<i class="ph ph-check text-t-accent text-sm"></i>' : ''}`;
-        btn.onclick = () => { window.applyTheme(key); renderThemes(); window._renderBoard?.(); };
+        btn.onclick = () => {
+            window.applyTheme(key);
+            if (designPending) {
+                designPending.theme = key;
+                window.saveDesign(designPending);
+                flashSaved();
+            }
+            renderThemes();
+            window._renderBoard?.();
+        };
         themeList.appendChild(btn);
     }
 }
@@ -36,10 +45,311 @@ overlay?.querySelectorAll('.settings-tab').forEach(tab => {
         if (panel === 'relay') { window._loadRelaySettings?.(); }
         if (panel === 'notifications') renderNotifSettings();
         if (panel === 'behavior') initBehaviorSettings();
+        if (panel === 'theme') initDesignSettings();
         if (panel === 'plugins') window._openPluginSettings?.();
+        if (panel !== 'theme') setPeekUI(false);
     });
 });
 
+// ── Design (fonts, geometry, borders, spacing, effects, presets) ──
+let designPending = null;
+
+const SLIDER_FIELDS = [
+    ['setting-radius-card',   'radiusCard',   'val-radius-card'],
+    ['setting-radius-button', 'radiusButton', 'val-radius-button'],
+    ['setting-radius-input',  'radiusInput',  'val-radius-input'],
+    ['setting-radius-modal',  'radiusModal',  'val-radius-modal'],
+    ['setting-radius-tag',    'radiusTag',    'val-radius-tag'],
+    ['setting-radius-image',  'radiusImage',  'val-radius-image'],
+    ['setting-border-card',   'borderCard',   'val-border-card'],
+    ['setting-bar-height',    'barHeight',    'val-bar-height'],
+    ['setting-pad-card',      'padCard',      'val-pad-card'],
+    ['setting-gap-board',     'gapBoard',     'val-gap-board'],
+    ['setting-lift-card',     'liftCard',     'val-lift-card'],
+    ['setting-blur-overlay',  'blurOverlay',  'val-blur-overlay'],
+];
+const SELECT_FIELDS = [
+    ['setting-font-headline', 'fontHeadline'],
+    ['setting-font-content',  'fontContent'],
+    ['setting-font-ui',       'fontUi'],
+    ['setting-border-style',  'borderStyle'],
+    ['setting-shadow-card',   'shadowCard'],
+    ['setting-shadow-modal',  'shadowModal'],
+    ['setting-shadow-ui',     'shadowUi'],
+    ['setting-anim-speed',    'animSpeed'],
+];
+
+function updatePreview() {
+    const preview = $('theme-preview');
+    if (!preview || !designPending) return;
+    const d = designPending, fonts = window.themeFonts, shadows = window.designShadows;
+    const set = (k, v) => preview.style.setProperty(k, v);
+    set('--tp-font-headline', fonts[d.fontHeadline] || fonts.pixel);
+    set('--tp-font-content',  fonts[d.fontContent]  || fonts.mono);
+    set('--tp-font-ui',       fonts[d.fontUi]       || fonts.pixel);
+    set('--tp-radius-card',   d.radiusCard + 'px');
+    set('--tp-radius-button', d.radiusButton + 'px');
+    set('--tp-radius-input',  d.radiusInput + 'px');
+    set('--tp-radius-tag',    d.radiusTag + 'px');
+    set('--tp-border-card',   d.borderCard + 'px');
+    set('--tp-border-style',  d.borderStyle);
+    set('--tp-bar-height',    d.barHeight + 'px');
+    set('--tp-pad-card',      d.padCard + 'px');
+    set('--tp-shadow-card',   shadows[d.shadowCard] || 'none');
+    const scan = $('theme-preview-scan');
+    if (scan) scan.style.display = String(d.scanlines) === '1' ? '' : 'none';
+}
+
+function fillFontSelect(id, value) {
+    const el = $(id);
+    if (!el) return;
+    el.innerHTML = '';
+    for (const [key, label] of Object.entries(window.themeFontLabels)) {
+        const opt = document.createElement('option');
+        opt.value = key; opt.textContent = label;
+        if (key === value) opt.selected = true;
+        el.appendChild(opt);
+    }
+}
+
+function syncControlsFromPending() {
+    if (!designPending) return;
+    fillFontSelect('setting-font-headline', designPending.fontHeadline);
+    fillFontSelect('setting-font-content',  designPending.fontContent);
+    fillFontSelect('setting-font-ui',       designPending.fontUi);
+    for (const [id, key] of SELECT_FIELDS) {
+        if (id.startsWith('setting-font-')) continue;
+        const el = $(id);
+        if (el) el.value = String(designPending[key] ?? '');
+    }
+    for (const [id, key, valId] of SLIDER_FIELDS) {
+        const v = String(designPending[key] ?? 0);
+        const el = $(id);
+        if (el) el.value = v;
+        const valEl = $(valId);
+        if (valEl) valEl.textContent = v;
+    }
+    const scanEl = $('setting-scanlines');
+    if (scanEl) scanEl.classList.toggle('on', String(designPending.scanlines) === '1');
+}
+
+function commitDesign() {
+    updatePreview();
+    window.applyDesign(designPending);
+    window.saveDesign(designPending);
+    flashSaved();
+}
+
+let saveFlashTimer = null;
+function flashSaved() {
+    const status = $('design-status');
+    if (!status) return;
+    status.textContent = 'saved';
+    status.style.color = 'var(--t-accent)';
+    clearTimeout(saveFlashTimer);
+    saveFlashTimer = setTimeout(() => {
+        status.textContent = 'auto-saving';
+        status.style.color = 'var(--t-dim)';
+    }, 700);
+}
+
+let designWired = false;
+
+function initDesignSettings() {
+    designPending = window.loadDesign();
+    syncControlsFromPending();
+    updatePreview();
+    refreshPresetSelect();
+
+    const status = $('design-status');
+    if (status) { status.textContent = 'auto-saving'; status.style.color = 'var(--t-dim)'; }
+
+    if (designWired) return;
+    designWired = true;
+
+    // Scanlines toggle
+    const scanEl = $('setting-scanlines');
+    const scanRow = scanEl?.closest('.toggle-row');
+    if (scanRow) scanRow.onclick = () => {
+        const nowOn = !scanEl.classList.contains('on');
+        scanEl.classList.toggle('on', nowOn);
+        designPending.scanlines = nowOn ? '1' : '0';
+        commitDesign();
+    };
+
+    // Selects
+    for (const [id, key] of SELECT_FIELDS) {
+        const el = $(id);
+        if (!el) continue;
+        el.addEventListener('change', () => {
+            designPending[key] = el.value;
+            commitDesign();
+        });
+    }
+
+    // Sliders
+    for (const [id, key, valId] of SLIDER_FIELDS) {
+        const el = $(id);
+        if (!el) continue;
+        el.addEventListener('input', () => {
+            const num = Number(el.value);
+            designPending[key] = num;
+            const v = $(valId);
+            if (v) v.textContent = num;
+            commitDesign();
+        });
+    }
+}
+
+$('design-reset')?.addEventListener('click', () => {
+    designPending = { ...window.designDefaults };
+    syncControlsFromPending();
+    commitDesign();
+    renderThemes();
+});
+
+// ── Peek toggle (hide background dim so the real board is visible behind the popup) ──
+function setPeekUI(peeking) {
+    document.body.classList.toggle('settings-peeking', peeking);
+    const sw = $('design-peek-toggle');
+    if (sw) sw.classList.toggle('on', peeking);
+}
+const peekRow = $('design-peek-row');
+if (peekRow) peekRow.onclick = () => {
+    setPeekUI(!document.body.classList.contains('settings-peeking'));
+};
+
+// ── Presets ──
+
+function loadUserPresets() {
+    try { return JSON.parse(localStorage.getItem('hyprcrd-design-presets') || '{}'); }
+    catch { return {}; }
+}
+function saveUserPresets(p) {
+    localStorage.setItem('hyprcrd-design-presets', JSON.stringify(p));
+}
+
+function refreshPresetSelect() {
+    const sel = $('design-preset-select');
+    if (!sel) return;
+    const cur = sel.value;
+    sel.innerHTML = '';
+    const builtinGroup = document.createElement('optgroup');
+    builtinGroup.label = 'built-in';
+    for (const name of Object.keys(window.builtinPresets || {})) {
+        const opt = document.createElement('option');
+        opt.value = 'builtin:' + name; opt.textContent = name;
+        builtinGroup.appendChild(opt);
+    }
+    sel.appendChild(builtinGroup);
+    const user = loadUserPresets();
+    const names = Object.keys(user);
+    if (names.length) {
+        const userGroup = document.createElement('optgroup');
+        userGroup.label = 'custom';
+        for (const name of names) {
+            const opt = document.createElement('option');
+            opt.value = 'user:' + name; opt.textContent = name;
+            userGroup.appendChild(opt);
+        }
+        sel.appendChild(userGroup);
+    }
+    if (cur) sel.value = cur;
+}
+
+function getSelectedPreset() {
+    const sel = $('design-preset-select');
+    if (!sel?.value) return null;
+    const [kind, ...rest] = sel.value.split(':');
+    const name = rest.join(':');
+    if (kind === 'builtin') return window.builtinPresets?.[name] ? { ...window.builtinPresets[name] } : null;
+    if (kind === 'user')    return loadUserPresets()[name] ? { ...loadUserPresets()[name] } : null;
+    return null;
+}
+
+function loadSelectedPreset() {
+    const cfg = getSelectedPreset();
+    if (!cfg) return;
+    designPending = { ...window.designDefaults, ...cfg };
+    syncControlsFromPending();
+    commitDesign();
+    renderThemes();
+}
+$('design-preset-select')?.addEventListener('change', loadSelectedPreset);
+
+$('design-preset-save')?.addEventListener('click', () => {
+    const nameEl = $('design-preset-name');
+    const name = (nameEl?.value || '').trim();
+    if (!name) { nameEl?.focus(); return; }
+    const presets = loadUserPresets();
+    presets[name] = { ...designPending };
+    saveUserPresets(presets);
+    if (nameEl) nameEl.value = '';
+    refreshPresetSelect();
+    const sel = $('design-preset-select');
+    if (sel) sel.value = 'user:' + name;
+    const status = $('design-status');
+    if (status) { status.textContent = `preset "${name}" saved`; status.style.color = 'var(--t-accent)'; }
+});
+
+$('design-preset-delete')?.addEventListener('click', () => {
+    const sel = $('design-preset-select');
+    if (!sel?.value?.startsWith('user:')) return;
+    const name = sel.value.slice('user:'.length);
+    const presets = loadUserPresets();
+    delete presets[name];
+    saveUserPresets(presets);
+    refreshPresetSelect();
+});
+
+$('design-preset-export')?.addEventListener('click', async () => {
+    const cfg = designPending || window.loadDesign();
+    const json = JSON.stringify(cfg, null, 2);
+    // Best-effort clipboard (silently fails on non-secure contexts)
+    let copied = false;
+    try {
+        if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(json);
+            copied = true;
+        }
+    } catch {}
+    // Always also trigger a file download — works regardless of clipboard support
+    try {
+        const blob = new Blob([json], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'hyprcrd-design.json';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+    } catch (e) {
+        console.error('design export failed', e);
+    }
+    const status = $('design-status');
+    if (status) {
+        status.textContent = copied ? 'downloaded + copied to clipboard' : 'downloaded hyprcrd-design.json';
+        status.style.color = 'var(--t-accent)';
+    }
+});
+
+$('design-preset-import')?.addEventListener('click', async () => {
+    const { showDialog } = await import('./dialog.js');
+    const json = await showDialog({ title: 'Import design JSON', input: true, placeholder: '{"radiusCard":8,...}', okLabel: 'Import' });
+    if (!json) return;
+    try {
+        const cfg = JSON.parse(json);
+        designPending = { ...window.designDefaults, ...cfg };
+        syncControlsFromPending();
+        commitDesign();
+        renderThemes();
+    } catch {
+        const status = $('design-status');
+        if (status) { status.textContent = 'invalid JSON'; status.style.color = 'var(--t-danger)'; }
+    }
+});
+
 // Open/Close
 function updateStats() {
     const sc = $('stats-cards'); if (sc) sc.textContent = state.cards?.length || 0;
@@ -77,12 +387,17 @@ async function loadVaultStatus() {
 
 $('settings-btn')?.addEventListener('click', () => {
     renderThemes();
+    initDesignSettings();
     updateStats();
     loadVaultStatus();
     overlay?.classList.add('open');
 });
-$('settings-close')?.addEventListener('click', () => overlay?.classList.remove('open'));
-overlay?.addEventListener('click', e => { if (e.target === overlay) overlay?.classList.remove('open'); });
+function closeSettings() {
+    overlay?.classList.remove('open');
+    setPeekUI(false);
+}
+$('settings-close')?.addEventListener('click', closeSettings);
+overlay?.addEventListener('click', e => { if (e.target === overlay) closeSettings(); });
 
 // Password change
 $('settings-pw-save')?.addEventListener('click', async () => {
@@ -123,6 +438,7 @@ function initBehaviorSettings() {
         'setting-card-width':   { key: 'hyprcrd-card-width',   def: '280' },
         'setting-body-lines':   { key: 'hyprcrd-body-lines',   def: '5' },
         'setting-click-action': { key: 'hyprcrd-click-action',  def: 'preview' },
+        'setting-esc-action':   { key: 'hyprcrd-esc-action',    def: 'close' },
     };
     const toggles = {
         'setting-current-include-synced': { key: 'hyprcrd-current-include-synced', def: '0' },