Advanced Filters - Build optimizations

frontend/src/components/library/ToolbarLayout.tsx

@@ -4,7 +4,8 @@ import { useState } from 'react';
 import { Input } from '../ui/Input';
 import Button from '../ui/Button';
 import TagDisplay from '../tags/TagDisplay';
-import { Story, Tag } from '../../types/api';
+import AdvancedFilters from './AdvancedFilters';
+import { Story, Tag, AdvancedFilters as AdvancedFiltersType } from '../../types/api';
 
 interface ToolbarLayoutProps {
   stories: Story[];
@@ -15,11 +16,13 @@ interface ToolbarLayoutProps {
   viewMode: 'grid' | 'list';
   sortOption: string;
   sortDirection: 'asc' | 'desc';
+  advancedFilters?: AdvancedFiltersType;
   onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onTagToggle: (tagName: string) => void;
   onViewModeChange: (mode: 'grid' | 'list') => void;
   onSortChange: (option: string) => void;
   onSortDirectionToggle: () => void;
+  onAdvancedFiltersChange?: (filters: AdvancedFiltersType) => void;
   onRandomStory: () => void;
   onClearFilters: () => void;
   children: React.ReactNode;
@@ -34,16 +37,19 @@ export default function ToolbarLayout({
   viewMode,
   sortOption,
   sortDirection,
+  advancedFilters = {},
   onSearchChange,
   onTagToggle,
   onViewModeChange,
   onSortChange,
   onSortDirectionToggle,
+  onAdvancedFiltersChange,
   onRandomStory,
   onClearFilters,
   children
 }: ToolbarLayoutProps) {
-  const [tagSearchExpanded, setTagSearchExpanded] = useState(false);
+  const [filterExpanded, setFilterExpanded] = useState(false);
+  const [activeTab, setActiveTab] = useState<'tags' | 'advanced'>('tags');
   const [tagSearch, setTagSearch] = useState('');
 
   const popularTags = tags.slice(0, 6);
@@ -56,6 +62,11 @@ export default function ToolbarLayout({
   
   const remainingTagsCount = Math.max(0, remainingTags.length);
 
+  // Count active advanced filters
+  const activeAdvancedFiltersCount = Object.values(advancedFilters).filter(value => 
+    value !== undefined && value !== '' && value !== 'all' && value !== false
+  ).length;
+
   return (
     <div className="max-w-7xl mx-auto p-6 max-md:p-4">
       {/* Integrated Header */}
@@ -138,14 +149,15 @@ export default function ToolbarLayout({
           </div>
         </div>
 
-        {/* Tag Filter Bar */}
+        {/* Filter Section */}
         <div className="border-t theme-border pt-5">
+          {/* Top row - Popular tags and expand button */}
           <div className="flex flex-wrap items-center gap-2 mb-3">
             <span className="font-medium theme-text text-sm">Popular Tags:</span>
             <button
               onClick={() => onClearFilters()}
               className={`px-3 py-1 rounded-full text-xs font-medium transition-colors ${
-                selectedTags.length === 0
+                selectedTags.length === 0 && activeAdvancedFiltersCount === 0
                   ? 'bg-blue-500 text-white'
                   : 'bg-gray-100 dark:bg-gray-700 theme-text hover:bg-blue-100 dark:hover:bg-blue-900'
               }`}
@@ -168,64 +180,128 @@ export default function ToolbarLayout({
                 />
               </div>
             ))}
-            {remainingTagsCount > 0 && (
-              <button
-                onClick={() => setTagSearchExpanded(!tagSearchExpanded)}
-                className="px-3 py-1 rounded-full text-xs font-medium bg-gray-50 dark:bg-gray-800 theme-text border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-blue-500"
-              >
-                +{remainingTagsCount} more tags
-              </button>
-            )}
+            
+            {/* Filter expand button with counts */}
+            <button
+              onClick={() => setFilterExpanded(!filterExpanded)}
+              className={`px-3 py-1 rounded-full text-xs font-medium border-2 border-dashed transition-colors ${
+                filterExpanded || activeAdvancedFiltersCount > 0 || remainingTagsCount > 0
+                  ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-500 text-blue-700 dark:text-blue-300'
+                  : 'bg-gray-50 dark:bg-gray-800 theme-text border-gray-300 dark:border-gray-600 hover:border-blue-500'
+              }`}
+            >
+              {remainingTagsCount > 0 && `+${remainingTagsCount} tags`}
+              {remainingTagsCount > 0 && activeAdvancedFiltersCount > 0 && ' • '}
+              {activeAdvancedFiltersCount > 0 && `${activeAdvancedFiltersCount} filters`}
+              {remainingTagsCount === 0 && activeAdvancedFiltersCount === 0 && 'More Filters'}
+            </button>
+            
             <div className="ml-auto text-sm theme-text">
               Showing {stories.length} of {totalElements} stories
             </div>
           </div>
 
-          {/* Expandable Tag Search */}
-          {tagSearchExpanded && (
+          {/* Expandable Filter Panel */}
+          {filterExpanded && (
             <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 border theme-border">
-              <div className="flex gap-3 mb-3">
-                <Input
-                  type="text"
-                  placeholder="Search from all available tags..."
-                  value={tagSearch}
-                  onChange={(e) => setTagSearch(e.target.value)}
-                  className="flex-1"
+              {/* Tab Navigation */}
+              <div className="flex gap-1 mb-4">
+                <button
+                  onClick={() => setActiveTab('tags')}
+                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                    activeTab === 'tags'
+                      ? 'bg-white dark:bg-gray-700 theme-text shadow-sm'
+                      : 'theme-text hover:bg-white/50 dark:hover:bg-gray-700/50'
+                  }`}
+                >
+                  📋 Tags
+                  {remainingTagsCount > 0 && (
+                    <span className="ml-1 text-xs bg-gray-200 dark:bg-gray-600 px-1 rounded">
+                      {remainingTagsCount}
+                    </span>
+                  )}
+                </button>
+                <button
+                  onClick={() => setActiveTab('advanced')}
+                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                    activeTab === 'advanced'
+                      ? 'bg-white dark:bg-gray-700 theme-text shadow-sm'
+                      : 'theme-text hover:bg-white/50 dark:hover:bg-gray-700/50'
+                  }`}
+                >
+                  ⚙️ Advanced
+                  {activeAdvancedFiltersCount > 0 && (
+                    <span className="ml-1 text-xs bg-blue-500 text-white px-1 rounded">
+                      {activeAdvancedFiltersCount}
+                    </span>
+                  )}
+                </button>
+              </div>
+
+              {/* Tab Content */}
+              {activeTab === 'tags' && (
+                <div className="space-y-3">
+                  <div className="flex gap-3">
+                    <Input
+                      type="text"
+                      placeholder="Search from all available tags..."
+                      value={tagSearch}
+                      onChange={(e) => setTagSearch(e.target.value)}
+                      className="flex-1"
+                    />
+                    {tagSearch && (
+                      <Button variant="ghost" onClick={() => setTagSearch('')}>
+                        Clear
+                      </Button>
+                    )}
+                  </div>
+                  <div className="grid grid-cols-4 gap-2 max-h-40 overflow-y-auto max-md:grid-cols-2">
+                    {filteredRemainingTags.length === 0 && tagSearch ? (
+                      <div className="col-span-4 text-center text-sm text-gray-500 py-4">
+                        No tags match "{tagSearch}"
+                      </div>
+                    ) : (
+                      filteredRemainingTags.map((tag) => (
+                      <div
+                        key={tag.id}
+                        onClick={() => onTagToggle(tag.name)}
+                        className={`cursor-pointer transition-all hover:scale-105 ${
+                          selectedTags.includes(tag.name) ? 'ring-2 ring-blue-500 ring-offset-1' : ''
+                        }`}
+                      >
+                        <TagDisplay 
+                          tag={{...tag, name: `${tag.name} (${tag.storyCount})`}} 
+                          size="sm" 
+                          clickable={true}
+                          className={`w-full ${selectedTags.includes(tag.name) ? 'bg-blue-500 text-white border-blue-500' : ''}`}
+                        />
+                      </div>
+                      ))
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {activeTab === 'advanced' && onAdvancedFiltersChange && (
+                <AdvancedFilters
+                  filters={advancedFilters}
+                  onChange={onAdvancedFiltersChange}
+                  onReset={() => onAdvancedFiltersChange({})}
                 />
-                {tagSearch && (
-                  <Button variant="ghost" onClick={() => setTagSearch('')}>
-                    Clear
-                  </Button>
-                )}
-                <Button
-                  variant="ghost"
-                  onClick={() => setTagSearchExpanded(false)}
+              )}
+
+              {/* Action buttons */}
+              <div className="flex justify-end gap-3 mt-4 pt-3 border-t theme-border">
+                <Button 
+                  variant="ghost" 
+                  onClick={() => setFilterExpanded(false)}
                 >
                   Close
                 </Button>
-              </div>
-              <div className="grid grid-cols-4 gap-2 max-h-40 overflow-y-auto max-md:grid-cols-2">
-                {filteredRemainingTags.length === 0 && tagSearch ? (
-                  <div className="col-span-4 text-center text-sm text-gray-500 py-4">
-                    No tags match "{tagSearch}"
-                  </div>
-                ) : (
-                  filteredRemainingTags.map((tag) => (
-                  <div
-                    key={tag.id}
-                    onClick={() => onTagToggle(tag.name)}
-                    className={`cursor-pointer transition-all hover:scale-105 ${
-                      selectedTags.includes(tag.name) ? 'ring-2 ring-blue-500 ring-offset-1' : ''
-                    }`}
-                  >
-                    <TagDisplay 
-                      tag={{...tag, name: `${tag.name} (${tag.storyCount})`}} 
-                      size="sm" 
-                      clickable={true}
-                      className={`w-full ${selectedTags.includes(tag.name) ? 'bg-blue-500 text-white border-blue-500' : ''}`}
-                    />
-                  </div>
-                  ))
+                {(selectedTags.length > 0 || activeAdvancedFiltersCount > 0) && (
+                  <Button variant="ghost" onClick={onClearFilters}>
+                    Clear All Filters
+                  </Button>
                 )}
               </div>
             </div>