Add progresive enhancment for tag picker when client js is available

src/frontend/clientJS/tag-picker.ts

@@ -1,100 +1,119 @@
-// // Client-side tag picker toggle functionality
+// Add function to 'Clear all filters'
-// class TagPickerManager {
+document.querySelector('.clear-tags-btn')
-//     constructor() {
+  ?.addEventListener('click', (e) => {
-//         this.init();
+    const activeTags = document.querySelectorAll('a.tag-pill.active')
-//     }
+    activeTags.forEach((activeTag) => {
+      activeTag.classList.remove('active')
+    })
+    updateTagUrls();
+  })
 
-//     init() {
+// Add function to toggle tag filters
-//         this.attachTagClickListeners();
+document.querySelectorAll('a.tag-pill')
-//     }
+.forEach((tagPill) => {
+  tagPill.addEventListener('click', (e) => toggleTagPill(e))
+})
 
-//     // Parse current URL to get active tags
+function toggleTagPill(e: Event) {
-//     getActiveTags(): string[] {
+  const target = e.currentTarget as HTMLElement;
-//         const urlParams = new URLSearchParams(window.location.search);
+  const searchParams = new URLSearchParams(window.location.search)
-//         return urlParams.getAll('tag').map(tag => decodeURIComponent(tag).replace(/-/g, ' '));
-//     }
 
-//     // Generate query string from tags array
+  if (target.classList.contains('active')) {
-//     generateTagQueryString(tags: string[]): string {
+    target.classList.remove('active')
-//         if (tags.length === 0) return '';
+    searchParams.delete('tag', getURLSafeTagName(target.innerText))
-//         const params = new URLSearchParams();
+  } else {
-//         tags.forEach(tag => {
+    target.classList.add('active')
-//             params.append('tag', tag.toLowerCase().replace(/\s+/g, '-'));
+    searchParams.append('tag', getURLSafeTagName(target.innerText))
-//         });
+  }
-//         return params.toString();
-//     }
 
-//     // Toggle a tag and update the page
+  // Update tag urls after the loader in onLoad completes
-//     toggleTag(tagName: string) {
+  setTimeout(() => updateTagUrls(), 0)
-//         const currentTags = this.getActiveTags();
+}
 
-//         // Toggle logic: if tag is active, remove it; otherwise add it
+function updateTagUrls() {
-//         const newTags = currentTags.includes(tagName)
+  const activeTags = document.querySelectorAll('a.tag-pill.active')
-//             ? currentTags.filter(t => t !== tagName)
+  const inactiveTags = document.querySelectorAll('a.tag-pill:not(.active)')
-//             : [...currentTags, tagName];
 
-//         // Navigate to new URL
+  let baseTagParams = '';
-//         const queryString = this.generateTagQueryString(newTags);
+  activeTags.forEach((val) => {
-//         const newUrl = queryString ? `/?${queryString}` : '/';
+    baseTagParams += `&tag=${getURLSafeTagName(val.innerHTML)}`
-//         window.location.href = newUrl;
+  })
-//     }
 
-//     // Attach click listeners to tag links
+  inactiveTags.forEach((val) => {
-//     attachTagClickListeners() {
+    val.setAttribute('href', `/?tag=${getURLSafeTagName(val.innerHTML)}${baseTagParams}`)
-//         const tagLinks = document.querySelectorAll('[data-taglink], .post-tag');
+  })
 
-//         tagLinks.forEach(link => {
+  activeTags.forEach((val) => {
-//             link.addEventListener('click', (e) => {
+    const tagName = getURLSafeTagName(val.innerHTML)
-//                 e.preventDefault();
-//                 const tagName = link.textContent?.trim();
-//                 if (tagName) {
-//                     this.toggleTag(tagName);
-//                 }
-//             });
-//         });
-//     }
 
-//     // Update visual state of tags based on current URL
+    const activeTagLink = baseTagParams.split(`&tag=${getURLSafeTagName(val.innerHTML)}`).join('')
-//     updateTagVisualState() {
-//         const activeTags = this.getActiveTags();
 
-//         // Update tag pills in sidebar
+    if (activeTagLink.length > 1) {
-//         document.querySelectorAll('.tag-pill').forEach(link => {
+      val.setAttribute('href', `/?${activeTagLink.substring(1)}`)
-//             const tagName = link.textContent?.trim();
+    } else {
-//             if (tagName && activeTags.includes(tagName)) {
+      val.setAttribute('href', '/')
-//                 link.classList.add('active');
+    }
-//             } else {
+  })
-//                 link.classList.remove('active');
+}
-//             }
-//         });
 
-//         // Update post tags
+// Helper function normalizing the user facing tag name into
-//         document.querySelectorAll('.post-tag').forEach(link => {
+// the url format for the tag name.
-//             const tagName = link.textContent?.trim();
+function getURLSafeTagName(tag: string) {
-//             if (tagName && activeTags.includes(tagName)) {
+  return tag.toLowerCase().split(" ").join("-")
-//                 link.classList.add('active');
+}
-//             } else {
-//                 link.classList.remove('active');
-//             }
-//         });
 
-//         // Update clear filters button visibility
+// Function to sync the UI state with the current URL
-//         const tagActions = document.querySelector('.tag-actions');
+function syncStateFromUrl() {
-//         if (tagActions) {
+  const searchParams = new URLSearchParams(window.location.search);
-//             tagActions.style.display = activeTags.length > 0 ? 'block' : 'none';
+  const currentTags = searchParams.getAll('tag');
-//         }
-//     }
-// }
 
-// // Initialize on page load
+  // Reset all tags to inactive
-// const tagPickerManager = new TagPickerManager();
+  document.querySelectorAll('a.tag-pill').forEach(tagPill => {
+    tagPill.classList.remove('active');
+  });
 
-// // Update visual state after page loads
+  // Set active tags based on current URL
-// document.addEventListener('DOMContentLoaded', () => {
+  let activeTagCount = 0
-//     tagPickerManager.updateTagVisualState();
+  currentTags.forEach(tagUrl => {
-// });
+    document.querySelectorAll('a.tag-pill').forEach(tagPill => {
+      const pill = tagPill as HTMLElement;
+      if (getURLSafeTagName(pill.innerText) === tagUrl) {
+        pill.classList.add('active');
+        activeTagCount++
+      }
+    });
+  });
 
-// // Also call immediately if DOM is already loaded
+  // If there is an active tag, show the clear filters button
-// if (document.readyState === 'interactive' || document.readyState === 'complete') {
+  const tagActions = document.querySelector('.tag-actions') as HTMLElement
-//     tagPickerManager.updateTagVisualState();
+  if (activeTagCount > 0) {
-// }
+    // Show the clear tags button
+    tagActions.style.display = 'block';
+  } else {
+    // Hide the clear tags button
+    tagActions.style.display = 'none';
+  }
+
+  updateTagUrls();
+}
+
+// Hook into the popstate event to sync state when navigating back/forward
+window.addEventListener('popstate', () => {
+  syncStateFromUrl();
+});
+
+// Hook into the navigation system to sync state after content loads
+// We'll observe the main element for changes
+const observer = new MutationObserver((mutations) => {
+  mutations.forEach((mutation) => {
+    if (mutation.type === 'childList' && document.querySelector('main')) {
+        syncStateFromUrl();
+    }
+  });
+});
+
+// Start observing the document body for changes
+observer.observe(document.body, {
+  childList: true,
+  subtree: true
+});

src/frontend/components/tag-picker.tsx

@@ -52,13 +52,11 @@ export function TagPicker({ searchParams }: { searchParams?: URLSearchParams })
             </ul>
 
             {/* Show clear tags button if there are selected tags */}
-            {selectedTags.length > 0 && (
+            <div className="tag-actions" style={{ display: selectedTags.length > 0 ? 'block' : 'none' }}>
-                <div className="tag-actions">
                 <a href="/" className="clear-tags-btn">
                     Clear all filters
                 </a>
             </div>
-            )}
             <script dangerouslySetInnerHTML={{ __html: minifyJS(tagPickerScript) }} />
         </div>
     )