Tag Enhancement + bugfixes

frontend/src/app/library/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { searchApi, storyApi, tagApi } from '../../lib/api';
 import { Story, Tag, FacetCount } from '../../types/api';
 import AppLayout from '../../components/layout/AppLayout';
@@ -20,6 +20,7 @@ type SortOption = 'createdAt' | 'title' | 'authorName' | 'rating' | 'wordCount'
 
 export default function LibraryPage() {
   const router = useRouter();
+  const searchParams = useSearchParams();
   const { layout } = useLibraryLayout();
   const [stories, setStories] = useState<Story[]>([]);
   const [tags, setTags] = useState<Tag[]>([]);
@@ -35,27 +36,95 @@ export default function LibraryPage() {
   const [totalPages, setTotalPages] = useState(1);
   const [totalElements, setTotalElements] = useState(0);
   const [refreshTrigger, setRefreshTrigger] = useState(0);
+  const [urlParamsProcessed, setUrlParamsProcessed] = useState(false);
 
-  // Convert facet counts to Tag objects for the UI
+  // Initialize filters from URL parameters
+  useEffect(() => {
+    const tagsParam = searchParams.get('tags');
+    if (tagsParam) {
+      console.log('URL tag filter detected:', tagsParam);
+      // Use functional updates to ensure all state changes happen together
+      setSelectedTags([tagsParam]);
+      setPage(0); // Reset to first page when applying URL filter
+    }
+    setUrlParamsProcessed(true);
+  }, [searchParams]);
+
+  // Convert facet counts to Tag objects for the UI, enriched with full tag data
+  const [fullTags, setFullTags] = useState<Tag[]>([]);
+  
+  // Fetch full tag data for enrichment
+  useEffect(() => {
+    const fetchFullTags = async () => {
+      try {
+        const result = await tagApi.getTags({ size: 1000 }); // Get all tags
+        setFullTags(result.content || []);
+      } catch (error) {
+        console.error('Failed to fetch full tag data:', error);
+        setFullTags([]);
+      }
+    };
+    
+    fetchFullTags();
+  }, []);
+  
   const convertFacetsToTags = (facets?: Record<string, FacetCount[]>): Tag[] => {
     if (!facets || !facets.tagNames) {
       return [];
     }
     
-    return facets.tagNames.map(facet => ({
-      id: facet.value, // Use tag name as ID since we don't have actual IDs from search results
-      name: facet.value,
-      storyCount: facet.count
-    }));
+    return facets.tagNames.map(facet => {
+      // Find the full tag data by name
+      const fullTag = fullTags.find(tag => tag.name.toLowerCase() === facet.value.toLowerCase());
+      
+      return {
+        id: fullTag?.id || facet.value, // Use actual ID if available, fallback to name
+        name: facet.value,
+        storyCount: facet.count,
+        // Include color and other metadata from the full tag data
+        color: fullTag?.color,
+        description: fullTag?.description,
+        aliasCount: fullTag?.aliasCount,
+        createdAt: fullTag?.createdAt,
+        aliases: fullTag?.aliases
+      };
+    });
   };
 
+  // Enrich existing tags when fullTags are loaded
+  useEffect(() => {
+    if (fullTags.length > 0 && tags.length > 0) {
+      // Check if tags already have color data to avoid infinite loops
+      const hasColors = tags.some(tag => tag.color);
+      if (!hasColors) {
+        // Re-enrich existing tags with color data
+        const enrichedTags = tags.map(tag => {
+          const fullTag = fullTags.find(ft => ft.name.toLowerCase() === tag.name.toLowerCase());
+          return {
+            ...tag,
+            color: fullTag?.color,
+            description: fullTag?.description,
+            aliasCount: fullTag?.aliasCount,
+            createdAt: fullTag?.createdAt,
+            aliases: fullTag?.aliases,
+            id: fullTag?.id || tag.id
+          };
+        });
+        setTags(enrichedTags);
+      }
+    }
+  }, [fullTags, tags]); // Run when fullTags or tags change
+  
   // Debounce search to avoid too many API calls
   useEffect(() => {
+    // Don't run search until URL parameters have been processed
+    if (!urlParamsProcessed) return;
+    
     const debounceTimer = setTimeout(() => {
       const performSearch = async () => {
         try {
           // Use searchLoading for background search, loading only for initial load
-          const isInitialLoad = stories.length === 0 && !searchQuery && selectedTags.length === 0;
+          const isInitialLoad = stories.length === 0 && !searchQuery;
           if (isInitialLoad) {
             setLoading(true);
           } else {
@@ -63,7 +132,7 @@ export default function LibraryPage() {
           }
           
           // Always use search API for consistency - use '*' for match-all when no query
-          const result = await searchApi.search({
+          const apiParams = {
             query: searchQuery.trim() || '*', 
             page: page, // Use 0-based pagination consistently
             size: 20,
@@ -71,7 +140,10 @@ export default function LibraryPage() {
             sortBy: sortOption,
             sortDir: sortDirection,
             facetBy: ['tagNames'], // Request tag facets for the filter UI
-          });
+          };
+          
+          console.log('Performing search with params:', apiParams);
+          const result = await searchApi.search(apiParams);
           
           const currentStories = result?.results || [];
           setStories(currentStories);
@@ -96,7 +168,7 @@ export default function LibraryPage() {
     }, searchQuery ? 500 : 0); // Debounce search queries, but load immediately for filters/pagination
 
     return () => clearTimeout(debounceTimer);
-  }, [searchQuery, selectedTags, sortOption, sortDirection, page, refreshTrigger]);
+  }, [searchQuery, selectedTags, sortOption, sortDirection, page, refreshTrigger, urlParamsProcessed]);
 
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(e.target.value);
@@ -167,6 +239,7 @@ export default function LibraryPage() {
   const layoutProps = {
     stories,
     tags,
+    totalElements,
     searchQuery,
     selectedTags,
     viewMode,