feat(viewPref): keep record of user view preferences per section (groupBy, order, list or grid)

2026-05-28 11:12:36 +02:00
parent 7f4b329718
commit bd474aa67e
7 changed files with 204 additions and 7 deletions
@@ -0,0 +1,55 @@
+// @ts-check
+
+/**
+ * groupBySync — apply groupBy + sort-direction state to the group-by menu UI.
+ *
+ * Pure DOM helper with no module imports so it can be safely imported by any
+ * view without creating circular dependencies.
+ *
+ * Call after `syncGroupByMenu()` has built the option list, e.g. when
+ * restoring saved preferences on section entry.
+ *
+ * Usage:
+ *   import { applyGroupByMenuState } from '../core/groupBySync.js';
+ *   applyGroupByMenuState('type', true);
+ */
+
+/**
+ * Reflect `groupBy` and `reversed` in the group-by menu DOM:
+ *   - marks the matching `.group-by-option` as active
+ *   - updates the group-by button label and active class
+ *   - toggles the sort-direction button active class
+ *
+ * No-op when the menu elements are not in the DOM (e.g. before initApp).
+ *
+ * @param {string}  groupBy   Active group-by key, or `''` for "None".
+ * @param {boolean} reversed  Whether sort direction is reversed.
+ */
+function applyGroupByMenuState(groupBy, reversed) {
+    // Mark the matching option as active; clear all others.
+    for (const b of document.querySelectorAll('.group-by-option')) {
+        const btn = /** @type {HTMLElement} */ (b);
+        btn.classList.toggle('active', (btn.dataset.groupBy ?? '') === groupBy);
+    }
+
+    // Group-by button: active class + label text.
+    const groupByBtn = document.getElementById('group-by-btn');
+    groupByBtn?.classList.toggle('active', groupBy !== '');
+
+    const lbl = groupByBtn?.querySelector('.group-by-label');
+    if (lbl) {
+        if (groupBy === '') {
+            lbl.textContent = '';
+        } else {
+            const activeOpt = /** @type {HTMLElement|null} */ (
+                document.querySelector(`.group-by-option[data-group-by="${CSS.escape(groupBy)}"]`)
+            );
+            lbl.textContent = activeOpt?.textContent ?? '';
+        }
+    }
+
+    // Sort-direction button: active = reversed.
+    document.getElementById('sort-dir-btn')?.classList.toggle('active', reversed);
+}
+
+export { applyGroupByMenuState };