Advanced Filters - Build optimizations

frontend/src/app/library/page.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { searchApi, storyApi, tagApi } from '../../lib/api';
-import { Story, Tag, FacetCount } from '../../types/api';
+import { Story, Tag, FacetCount, AdvancedFilters } from '../../types/api';
 import AppLayout from '../../components/layout/AppLayout';
 import { Input } from '../../components/ui/Input';
 import Button from '../../components/ui/Button';
@@ -37,6 +37,7 @@ export default function LibraryPage() {
   const [totalElements, setTotalElements] = useState(0);
   const [refreshTrigger, setRefreshTrigger] = useState(0);
   const [urlParamsProcessed, setUrlParamsProcessed] = useState(false);
+  const [advancedFilters, setAdvancedFilters] = useState<AdvancedFilters>({});
 
   // Initialize filters from URL parameters
   useEffect(() => {
@@ -145,6 +146,8 @@ export default function LibraryPage() {
             sortBy: sortOption,
             sortDir: sortDirection,
             facetBy: ['tagNames'], // Request tag facets for the filter UI
+            // Advanced filters
+            ...advancedFilters
           };
           
           console.log('Performing search with params:', apiParams);
@@ -173,7 +176,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, urlParamsProcessed]);
+  }, [searchQuery, selectedTags, sortOption, sortDirection, page, refreshTrigger, urlParamsProcessed, advancedFilters]);
 
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(e.target.value);
@@ -191,7 +194,8 @@ export default function LibraryPage() {
       setRandomLoading(true);
       const randomStory = await storyApi.getRandomStory({
         searchQuery: searchQuery || undefined,
-        tags: selectedTags.length > 0 ? selectedTags : undefined
+        tags: selectedTags.length > 0 ? selectedTags : undefined,
+        ...advancedFilters
       });
       if (randomStory) {
         router.push(`/stories/${randomStory.id}`);
@@ -209,6 +213,7 @@ export default function LibraryPage() {
   const clearFilters = () => {
     setSearchQuery('');
     setSelectedTags([]);
+    setAdvancedFilters({});
     setPage(0);
     setRefreshTrigger(prev => prev + 1);
   };
@@ -227,6 +232,12 @@ export default function LibraryPage() {
     setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
   };
 
+  const handleAdvancedFiltersChange = (filters: AdvancedFilters) => {
+    setAdvancedFilters(filters);
+    setPage(0);
+    setRefreshTrigger(prev => prev + 1);
+  };
+
   if (loading) {
     return (
       <AppLayout>
@@ -250,11 +261,13 @@ export default function LibraryPage() {
     viewMode,
     sortOption,
     sortDirection,
+    advancedFilters,
     onSearchChange: handleSearchChange,
     onTagToggle: handleTagToggle,
     onViewModeChange: setViewMode,
     onSortChange: handleSortChange,
     onSortDirectionToggle: handleSortDirectionToggle,
+    onAdvancedFiltersChange: handleAdvancedFiltersChange,
     onRandomStory: handleRandomStory,
     onClearFilters: clearFilters,
   };
@@ -264,12 +277,12 @@ export default function LibraryPage() {
       return (
         <div className="text-center py-12 theme-card theme-shadow rounded-lg">
           <p className="theme-text text-lg mb-4">
-            {searchQuery || selectedTags.length > 0 
+            {searchQuery || selectedTags.length > 0 || Object.values(advancedFilters).some(v => v !== undefined && v !== '' && v !== 'all' && v !== false)
               ? 'No stories match your search criteria.' 
               : 'Your library is empty.'
             }
           </p>
-          {searchQuery || selectedTags.length > 0 ? (
+          {searchQuery || selectedTags.length > 0 || Object.values(advancedFilters).some(v => v !== undefined && v !== '' && v !== 'all' && v !== false) ? (
             <Button variant="ghost" onClick={clearFilters}>
               Clear Filters
             </Button>