settings

public/js/modules/theme.js

@@ -87,15 +87,57 @@ $('settings-pw-save')?.addEventListener('click', async () => {
 });
 
 function initBehaviorSettings() {
-    const sel = $('setting-current-days');
-    if (sel) {
-        sel.value = localStorage.getItem('hyprcrd-current-days') || '2';
-        sel.onchange = () => {
-            localStorage.setItem('hyprcrd-current-days', sel.value);
-            window._renderBoard?.();
-        };
+    const selects = {
+        'setting-current-days': { key: 'hyprcrd-current-days', def: '2' },
+        'setting-card-height':  { key: 'hyprcrd-card-height',  def: '180' },
+        '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' },
+    };
+    const toggles = {
+        'setting-current-include-synced': { key: 'hyprcrd-current-include-synced', def: '0' },
+        'setting-show-tags':              { key: 'hyprcrd-show-tags',              def: '1' },
+        'setting-show-thumbnails':        { key: 'hyprcrd-show-thumbnails',        def: '1' },
+        'setting-show-done-badge':        { key: 'hyprcrd-show-done-badge',        def: '1' },
+        'setting-confirm-delete':         { key: 'hyprcrd-confirm-delete',         def: '1' },
+        'setting-auto-save':              { key: 'hyprcrd-auto-save',              def: '0' },
+    };
+    for (const [id, cfg] of Object.entries(selects)) {
+        const el = $(id);
+        if (!el) continue;
+        el.value = localStorage.getItem(cfg.key) || cfg.def;
+        el.onchange = () => { localStorage.setItem(cfg.key, el.value); applyBehavior(); };
+    }
+    for (const [id, cfg] of Object.entries(toggles)) {
+        const el = $(id);
+        if (!el) continue;
+        const isOn = (localStorage.getItem(cfg.key) ?? cfg.def) === '1';
+        el.classList.toggle('on', isOn);
+        const row = el.closest('.toggle-row');
+        if (row) {
+            row.onclick = () => {
+                const nowOn = !el.classList.contains('on');
+                el.classList.toggle('on', nowOn);
+                localStorage.setItem(cfg.key, nowOn ? '1' : '0');
+                applyBehavior();
+            };
+        }
     }
 }
 
+function applyBehavior() {
+    const board = $('board');
+    if (board) {
+        const w = localStorage.getItem('hyprcrd-card-width') || '280';
+        board.style.gridTemplateColumns = `repeat(auto-fill, minmax(${w}px, 1fr))`;
+    }
+    document.documentElement.style.setProperty('--card-min-h', (localStorage.getItem('hyprcrd-card-height') || '180') + 'px');
+    document.documentElement.style.setProperty('--card-body-lines', localStorage.getItem('hyprcrd-body-lines') || '5');
+    window._renderBoard?.();
+}
+
+// Apply on load
+applyBehavior();
+
 // Apply saved theme on load
 window.applyTheme(localStorage.getItem('hyprcrd-theme') || 'slate');