Updated

hubzilla/addon/scn01/view/js/scn01.js

@@ -1,8 +1,8 @@
-/* scn01 — Scenarios — v0.3.0 */
+/* scn01 — Scenarios — v0.4.0 */
 (function () {
     'use strict';
 
-    var MAX_PINNED = 5;
+    var MAX_PINNED = 3;
 
     function init() {
         var dataEl = document.getElementById('scn01-data');
@@ -23,9 +23,11 @@
         var prevBtn    = document.getElementById('scn01-prev');
         var nextBtn    = document.getElementById('scn01-next');
         var fieldsEl   = document.getElementById('scn01-pinned-fields');
+        var categoryEl = document.getElementById('scn01-category');
 
         var index = 0;
         var pinned = []; // array of scenario ids, in pin order
+        var visible = scenarios; // current filtered list
 
         function findScenario(id) {
             for (var i = 0; i < scenarios.length; i++) {
@@ -34,9 +36,45 @@
             return null;
         }
 
+        function populateCategories() {
+            if (!categoryEl) return;
+            var seen = {};
+            var categories = [];
+            scenarios.forEach(function (s) {
+                if (!seen[s.category]) {
+                    seen[s.category] = true;
+                    categories.push(s.category);
+                }
+            });
+            categories.sort();
+            categories.forEach(function (cat) {
+                var opt = document.createElement('option');
+                opt.value = cat;
+                opt.textContent = cat;
+                categoryEl.appendChild(opt);
+            });
+            categoryEl.addEventListener('change', function () {
+                applyFilter(categoryEl.value);
+            });
+        }
+
+        function applyFilter(category) {
+            visible = category
+                ? scenarios.filter(function (s) { return s.category === category; })
+                : scenarios;
+            index = 0;
+            renderCard();
+        }
+
         function renderCard() {
             if (!cardEl) return;
-            var s = scenarios[index];
+
+            if (!visible.length) {
+                cardEl.innerHTML = '<p class="text-muted mb-0">No scenarios in this category.</p>';
+                return;
+            }
+
+            var s = visible[index];
             var isPinned = pinned.indexOf(s.id) !== -1;
             var atMax = pinned.length >= MAX_PINNED && !isPinned;
 
@@ -64,7 +102,7 @@
 
             var counter = document.createElement('div');
             counter.className = 'scn01-counter small text-muted';
-            counter.textContent = (index + 1) + ' / ' + scenarios.length;
+            counter.textContent = (index + 1) + ' / ' + visible.length;
             cardEl.appendChild(counter);
         }
 
@@ -74,8 +112,11 @@
 
             if (!pinned.length) {
                 pinnedEl.style.display = 'none';
-            } else {
-                pinnedEl.style.display = '';
+                return;
+            }
+
+            pinnedEl.style.display = 'block';
+
             var label = document.createElement('div');
             label.className = 'scn01-pinned-label small text-muted';
             label.textContent = 'Selected (' + pinned.length + '/' + MAX_PINNED + '):';
@@ -94,7 +135,6 @@
                 pinnedEl.appendChild(chip);
             });
         }
-        }
 
         function renderFields() {
             if (!fieldsEl) return;
@@ -122,17 +162,18 @@
 
         if (prevBtn) {
             prevBtn.addEventListener('click', function () {
-                index = (index - 1 + scenarios.length) % scenarios.length;
+                index = (index - 1 + visible.length) % visible.length;
                 renderCard();
             });
         }
         if (nextBtn) {
             nextBtn.addEventListener('click', function () {
-                index = (index + 1) % scenarios.length;
+                index = (index + 1) % visible.length;
                 renderCard();
             });
         }
 
+        populateCategories();
         renderCard();
         renderPinned();
         renderFields();