Add basic tag support for showing and filtering tagged posts

src/frontend/components/tag-picker.tsx

@@ -1,21 +1,24 @@
 import React from 'react';
+import tagPickerScript from '../clientJS/tag-picker.js' with { type: "text" };
 import { minifyJS } from '../utils';
 
-export function TagPicker({ availableTags = [], activeTags = [] }: { 
-    availableTags?: { name: string; post_count: number }[], 
-    activeTags?: string[] 
-}) {
+import { getAllTags } from '../../db/tags';
+
+const tags = getAllTags();
+
+export function TagPicker() {
     return (
         <div className="tags sheet-background">
             <h3>Tags</h3>
-            {availableTags.length > 0 ? (
+            {tags.length > 0 ? (
                 <ul className="tag-pills">
-                    {availableTags.map(tag => (
+                    {tags.map(tag => (
                         <li key={tag.name}>
-                            <a 
+                            <a
+                                data-tag
                                 href={`?tag=${tag.name.toLowerCase().replace(/\s+/g, '-')}`}
                                 className="tag-pill"
-                                title={`${tag.post_count} post${tag.post_count !== 1 ? 's' : ''} (click to toggle)`}
+                                title={`${tag.post_count} post${tag.post_count !== 1 ? 's' : ''} (click to view)`}
                             >
                                 {tag.name}
                             </a>
@@ -30,122 +33,7 @@ export function TagPicker({ availableTags = [], activeTags = [] }: {
                     Clear all filters
                 </a>
             </div>
-            <script dangerouslySetInnerHTML={{ __html: minifyJS(tagToggleScript) }} />
+            <script dangerouslySetInnerHTML={{ __html: minifyJS(tagPickerScript) }} />
         </div>
     )
 }
-
-// Client-side script for tag toggle functionality
-const tagToggleScript = `
-(function() {
-    'use strict';
-    
-    class TagPickerManager {
-        constructor() {
-            this.init();
-        }
-
-        init() {
-            this.attachTagClickListeners();
-            this.updateTagVisualState();
-        }
-
-        // Parse current URL to get active tags
-        getActiveTags() {
-            const urlParams = new URLSearchParams(window.location.search);
-            return urlParams.getAll('tag').map(tag => decodeURIComponent(tag).replace(/-/g, ' '));
-        }
-
-        // Generate query string from tags array
-        generateTagQueryString(tags) {
-            if (tags.length === 0) return '';
-            const params = new URLSearchParams();
-            tags.forEach(tag => {
-                params.append('tag', tag.toLowerCase().replace(/\\s+/g, '-'));
-            });
-            return params.toString();
-        }
-
-        // Toggle a tag and update the page
-        toggleTag(tagName) {
-            const currentTags = this.getActiveTags();
-            
-            // Toggle logic: if tag is active, remove it; otherwise add it
-            const newTags = currentTags.includes(tagName) 
-                ? currentTags.filter(t => t !== tagName)
-                : [...currentTags, tagName];
-            
-            // Navigate to new URL
-            const queryString = this.generateTagQueryString(newTags);
-            const newUrl = queryString ? \`/?\${queryString}\` : '/';
-            
-            window.location.href = newUrl;
-        }
-
-        // Attach click listeners to tag links
-        attachTagClickListeners() {
-            const tagLinks = document.querySelectorAll('.tag-pill, .post-tag');
-            
-            tagLinks.forEach(link => {
-                link.addEventListener('click', (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    const tagName = link.textContent?.trim();
-                    if (tagName) {
-                        this.toggleTag(tagName);
-                    }
-                });
-            });
-        }
-
-        // Update visual state of tags based on current URL
-        updateTagVisualState() {
-            const activeTags = this.getActiveTags();
-            
-            // Update tag pills in sidebar
-            document.querySelectorAll('.tag-pill').forEach(link => {
-                const tagName = link.textContent?.trim();
-                if (tagName && activeTags.includes(tagName)) {
-                    link.classList.add('active');
-                } else {
-                    link.classList.remove('active');
-                }
-            });
-
-            // Update post tags
-            document.querySelectorAll('.post-tag').forEach(link => {
-                const tagName = link.textContent?.trim();
-                if (tagName && activeTags.includes(tagName)) {
-                    link.classList.add('active');
-                } else {
-                    link.classList.remove('active');
-                }
-            });
-
-            // Update clear filters button visibility
-            const tagActions = document.querySelector('.tag-actions');
-            if (tagActions) {
-                tagActions.style.display = activeTags.length > 0 ? 'block' : 'none';
-            }
-        }
-    }
-
-    // Initialize on DOM ready
-    function initializeTagPicker() {
-        // Remove any existing instance
-        if (window.tagPickerManager) {
-            delete window.tagPickerManager;
-        }
-        
-        // Create new instance
-        window.tagPickerManager = new TagPickerManager();
-    }
-
-    // Wait for DOM to be ready
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initializeTagPicker);
-    } else {
-        initializeTagPicker();
-    }
-})();
-`;