Fix category filtering on list pages

layouts/_default/list.html

@@ -6,43 +6,20 @@
   {{ end }}
 </div>
 
-<div class="cards-container">
-  {{ range $cat := slice "Books" "Movies" "TV Series" "Recipes" "YouTube" "Music" "Concerts" }}
-    <div class="category-cards" id="category-{{ $cat | urlize }}">
-      {{ range where $.Site.RegularPages "Params.category" $cat }}
-        {{ if not (eq .Params.draft true) }}
-          {{ partial "card.html" . }}
-        {{ end }}
-      {{ end }}
-    </div>
-  {{ end }}
-  
-  <!-- All cards section (shown by default) -->
-  <div class="category-cards active" id="category-all">
+<div class="cards" id="cards">
   {{ range .Site.RegularPages }}
     {{ if not (eq .Params.draft true) }}
       {{ partial "card.html" . }}
     {{ end }}
   {{ end }}
 </div>
-</div>
-<style>
-.cards-container {
-  width: 100%;
-}
-.category-cards {
-  display: none; /* Hide all category sections by default */
-}
-.category-cards.active {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  justify-content: center;
-}
-</style>
-
 <script>
+// Tab switching with "All" default view
 document.addEventListener('DOMContentLoaded', function() {
+  const tabs = document.querySelectorAll('.tab');
+  const cards = document.getElementById('cards');
+  const allCards = Array.from(cards.children);
+  
   // Add an "All" tab at the beginning
   const tabsContainer = document.getElementById('tabs');
   const allTab = document.createElement('div');
@@ -52,40 +29,23 @@ document.addEventListener('DOMContentLoaded', function() {
   tabsContainer.prepend(allTab);
   
   // Make other tabs inactive initially
-  document.querySelectorAll('.tab').forEach(tab => {
-    tab.classList.remove('active');
-  });
-  allTab.classList.add('active');
+  tabs.forEach(tab => tab.classList.remove('active'));
   
-  // Add click handler for all tabs
+  // Add click handler for all tabs (including the new All tab)
   document.querySelectorAll('.tab').forEach(tab => {
     tab.addEventListener('click', function() {
-      const selectedCategory = this.getAttribute('data-tab');
-      
-      // Update active tab
       document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
       this.classList.add('active');
+      const cat = this.getAttribute('data-tab');
       
-      // Hide all category sections
-      document.querySelectorAll('.category-cards').forEach(section => {
-        section.classList.remove('active');
+      allCards.forEach(card => {
+        if (cat === 'all') {
+          card.style.display = '';
+        } else {
+          const category = card.getAttribute('data-category');
+          card.style.display = (category === cat) ? '' : 'none';
+        }
       });
-      
-      // Show the selected category section
-      if (selectedCategory === 'all') {
-        document.getElementById('category-all').classList.add('active');
-      } else {
-        // Convert to URL-friendly format for element ID matching
-        const sectionId = 'category-' + selectedCategory.toLowerCase().replace(/\s+/g, '-');
-        const section = document.getElementById(sectionId);
-        if (section) {
-          section.classList.add('active');
-        } else {
-          // Fallback to showing all if category not found
-          document.getElementById('category-all').classList.add('active');
-          console.log('Category section not found:', sectionId);
-        }
-      }
     });
   });