Release Nouri 1.3.2 with mobile selection improvements

nouri/static/js/ui.js

@@ -112,6 +112,7 @@
             const filterGroups = Array.from(container.querySelectorAll("[data-filter-group]"));
             const resultLimit = Number.parseInt(input.getAttribute("data-filter-limit") || "", 10);
             const hasLimit = Number.isFinite(resultLimit) && resultLimit > 0;
+            const hideWhenEmpty = input.hasAttribute("data-filter-hide-empty");
 
             const scoreItem = (label, term) => {
                 if (label === term) return 0;
@@ -137,11 +138,13 @@
                 const term = input.value.trim().toLowerCase();
                 if (!term) {
                     items.forEach((item, index) => {
-                        item.hidden = hasLimit ? index >= resultLimit : false;
+                        item.hidden = hideWhenEmpty || (hasLimit ? index >= resultLimit : false);
                     });
+                    container.hidden = hideWhenEmpty;
                     syncGroups();
                     return;
                 }
+                container.hidden = false;
 
                 const rankedMatches = items
                     .map((item, index) => {
@@ -167,6 +170,55 @@
         });
     };
 
+    const initSelectedPreviews = () => {
+        document.querySelectorAll("[data-selected-preview]").forEach((preview) => {
+            const form = preview.closest("form");
+            const sourceSelector = preview.getAttribute("data-selected-preview");
+            if (!form || !sourceSelector) return;
+
+            const source = document.querySelector(sourceSelector);
+            if (!source) return;
+
+            const emptyText = preview.querySelector("[data-selected-preview-empty]");
+            const cards = Array.from(preview.querySelectorAll("[data-selected-preview-card]"));
+
+            const sync = () => {
+                let visibleCount = 0;
+                cards.forEach((card) => {
+                    const value = card.getAttribute("data-selected-preview-card");
+                    const input = value
+                        ? Array.from(form.querySelectorAll('input[name="component_ids"]')).find((candidate) => candidate.value === value)
+                        : null;
+                    const checked = input instanceof HTMLInputElement && input.checked;
+                    card.hidden = !checked;
+                    if (checked) visibleCount += 1;
+                });
+                if (emptyText) {
+                    emptyText.hidden = visibleCount > 0;
+                }
+            };
+
+            source.addEventListener("change", (event) => {
+                const target = event.target;
+                if (target instanceof HTMLInputElement && target.name === "component_ids") {
+                    sync();
+                }
+            });
+            preview.addEventListener("click", (event) => {
+                const button = event.target.closest("[data-uncheck-component]");
+                if (!(button instanceof HTMLElement)) return;
+                const value = button.getAttribute("data-uncheck-component");
+                if (!value) return;
+                const input = Array.from(form.querySelectorAll('input[name="component_ids"]')).find((candidate) => candidate.value === value);
+                if (input instanceof HTMLInputElement) {
+                    input.checked = false;
+                    input.dispatchEvent(new Event("change", { bubbles: true }));
+                }
+            });
+            sync();
+        });
+    };
+
     const initIosPullToRefresh = () => {
         const isAppleTouchDevice = /iP(ad|hone|od)/.test(navigator.userAgent)
             || (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
@@ -270,6 +322,7 @@
         initPostFormScrollMemory();
         initMobileSheet();
         initFilterInputs();
+        initSelectedPreviews();
         initIosPullToRefresh();
         initDialogs();
     });