backup before mayor changes

nonpacks/templates/library/browse.html

@@ -26,12 +26,13 @@
         </div>
 
         {% for group in tag_groups %}
-            <div class="card filter-card">
-                <h3>
+            <div class="card filter-card filter-group">
+                <button type="button" class="filter-group-toggle" aria-expanded="{% if group.has_active %}true{% else %}false{% endif %}">
                     <span class="tag-dot" style="background: {{ group.category.color }};"></span>
                     {{ group.category.name }}
-                </h3>
-                <div class="filter-tags">
+                    <i class="fas fa-chevron-down filter-chevron"></i>
+                </button>
+                <div class="filter-tags{% if not group.has_active %} collapsed{% endif %}">
                     {% for item in group.items %}
                         <a href="{{ item.url }}" class="tag-chip filter-tag {% if item.active %}active{% endif %}"
                            style="border-color: {{ item.color }}; color: {{ item.color }};">
@@ -89,3 +90,17 @@
     </div>
 </div>
 {% endblock %}
+
+{% block extra_js %}
+<script>
+document.querySelectorAll('.filter-group-toggle').forEach(btn => {
+    btn.addEventListener('click', () => {
+        const group = btn.closest('.filter-group');
+        const tags = group.querySelector('.filter-tags');
+        const expanded = btn.getAttribute('aria-expanded') === 'true';
+        btn.setAttribute('aria-expanded', expanded ? 'false' : 'true');
+        if (tags) tags.classList.toggle('collapsed', expanded);
+    });
+});
+</script>
+{% endblock %}