New Switchable Library Layout

frontend/src/app/library/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { searchApi, storyApi } from '../../lib/api';
+import { searchApi, storyApi, tagApi } from '../../lib/api';
 import { Story, Tag, FacetCount } from '../../types/api';
 import AppLayout from '../../components/layout/AppLayout';
 import { Input } from '../../components/ui/Input';
@@ -10,12 +10,17 @@ import Button from '../../components/ui/Button';
 import StoryMultiSelect from '../../components/stories/StoryMultiSelect';
 import TagFilter from '../../components/stories/TagFilter';
 import LoadingSpinner from '../../components/ui/LoadingSpinner';
+import SidebarLayout from '../../components/library/SidebarLayout';
+import ToolbarLayout from '../../components/library/ToolbarLayout';
+import MinimalLayout from '../../components/library/MinimalLayout';
+import { useLibraryLayout } from '../../hooks/useLibraryLayout';
 
 type ViewMode = 'grid' | 'list';
 type SortOption = 'createdAt' | 'title' | 'authorName' | 'rating' | 'wordCount' | 'lastRead';
 
 export default function LibraryPage() {
   const router = useRouter();
+  const { layout } = useLibraryLayout();
   const [stories, setStories] = useState<Story[]>([]);
   const [tags, setTags] = useState<Tag[]>([]);
   const [loading, setLoading] = useState(false);
@@ -31,8 +36,6 @@ export default function LibraryPage() {
   const [totalElements, setTotalElements] = useState(0);
   const [refreshTrigger, setRefreshTrigger] = useState(0);
 
-
-
   // Convert facet counts to Tag objects for the UI
   const convertFacetsToTags = (facets?: Record<string, FacetCount[]>): Tag[] => {
     if (!facets || !facets.tagNames) {
@@ -78,100 +81,46 @@ export default function LibraryPage() {
           // Update tags from facets - these represent all matching stories, not just current page
           const resultTags = convertFacetsToTags(result?.facets);
           setTags(resultTags);
+          
         } catch (error) {
           console.error('Failed to load stories:', error);
           setStories([]);
+          setTags([]);
         } finally {
           setLoading(false);
           setSearchLoading(false);
         }
       };
-      
+
       performSearch();
-    }, searchQuery ? 500 : 0); // 500ms debounce for search, immediate for other changes
+    }, searchQuery ? 500 : 0); // Debounce search queries, but load immediately for filters/pagination
 
     return () => clearTimeout(debounceTimer);
-  }, [searchQuery, selectedTags, page, sortOption, sortDirection, refreshTrigger]);
-
-  // Reset page when search or filters change
-  const resetPage = () => {
-    if (page !== 0) {
-      setPage(0);
-    }
-  };
-
-  const handleTagToggle = (tagName: string) => {
-    setSelectedTags(prev => {
-      const newTags = prev.includes(tagName)
-        ? prev.filter(t => t !== tagName)
-        : [...prev, tagName];
-      resetPage();
-      return newTags;
-    });
-  };
+  }, [searchQuery, selectedTags, sortOption, sortDirection, page, refreshTrigger]);
 
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(e.target.value);
-    resetPage();
-  };
-
-  const handleSortChange = (newSortOption: SortOption) => {
-    setSortOption(newSortOption);
-    // Set appropriate default direction for the sort option
-    if (newSortOption === 'title' || newSortOption === 'authorName') {
-      setSortDirection('asc'); // Alphabetical fields default to ascending
-    } else {
-      setSortDirection('desc'); // Numeric/date fields default to descending
-    }
-    resetPage();
-  };
-
-  const toggleSortDirection = () => {
-    setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
-    resetPage();
-  };
-
-  const clearFilters = () => {
-    setSearchQuery('');
-    setSelectedTags([]);
-    resetPage();
+    setPage(0);
   };
 
   const handleStoryUpdate = () => {
-    // Trigger reload by incrementing refresh trigger
     setRefreshTrigger(prev => prev + 1);
   };
 
   const handleRandomStory = async () => {
+    if (totalElements === 0) return;
+    
     try {
       setRandomLoading(true);
-      
-      // Build filter parameters based on current UI state
-      const filters: Record<string, any> = {};
-      
-      // Include search query if present
-      if (searchQuery && searchQuery.trim() !== '' && searchQuery !== '*') {
-        filters.searchQuery = searchQuery.trim();
+      const randomStory = await storyApi.getRandomStory({
+        searchQuery: searchQuery || undefined,
+        tags: selectedTags.length > 0 ? selectedTags : undefined
+      });
+      if (randomStory) {
+        router.push(`/stories/${randomStory.id}`);
+      } else {
+        alert('No stories available. Please add some stories first.');
       }
-      
-      // Include all selected tags
-      if (selectedTags.length > 0) {
-        filters.tags = selectedTags;
-      }
-      
-      console.log('Getting random story with filters:', filters);
-      
-      const randomStory = await storyApi.getRandomStory(filters);
-      
-      if (!randomStory) {
-        // No stories match the current filters
-        alert('No stories match your current filters. Try clearing some filters or adding more stories to your library.');
-        return;
-      }
-      
-      // Navigate to the random story's detail page
-      router.push(`/stories/${randomStory.id}`);
-      
     } catch (error) {
       console.error('Failed to get random story:', error);
       alert('Failed to get a random story. Please try again.');
@@ -180,6 +129,27 @@ export default function LibraryPage() {
     }
   };
 
+  const clearFilters = () => {
+    setSearchQuery('');
+    setSelectedTags([]);
+    setPage(0);
+    setRefreshTrigger(prev => prev + 1);
+  };
+
+  const handleTagToggle = (tagName: string) => {
+    setSelectedTags(prev => 
+      prev.includes(tagName)
+        ? prev.filter(t => t !== tagName)
+        : [...prev, tagName]
+    );
+    setPage(0);
+    setRefreshTrigger(prev => prev + 1);
+  };
+
+  const handleSortDirectionToggle = () => {
+    setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
+  };
+
   if (loading) {
     return (
       <AppLayout>
@@ -190,155 +160,59 @@ export default function LibraryPage() {
     );
   }
 
-  return (
-    <AppLayout>
-      <div className="space-y-6">
-        {/* Header */}
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-          <div>
-            <h1 className="text-3xl font-bold theme-header">Your Story Library</h1>
-            <p className="theme-text mt-1">
-              {totalElements} {totalElements === 1 ? 'story' : 'stories'}
-              {searchQuery || selectedTags.length > 0 ? ` found` : ` total`}
-            </p>
-          </div>
-          
-          <div className="flex gap-2">
-            <Button 
-              onClick={handleRandomStory}
-              disabled={randomLoading || totalElements === 0}
-              variant="secondary"
-            >
-              {randomLoading ? '🎲 ...' : '🎲 Random Story'}
+  const handleSortChange = (option: string) => {
+    setSortOption(option as SortOption);
+  };
+
+  const layoutProps = {
+    stories,
+    tags,
+    searchQuery,
+    selectedTags,
+    viewMode,
+    sortOption,
+    sortDirection,
+    onSearchChange: handleSearchChange,
+    onTagToggle: handleTagToggle,
+    onViewModeChange: setViewMode,
+    onSortChange: handleSortChange,
+    onSortDirectionToggle: handleSortDirectionToggle,
+    onRandomStory: handleRandomStory,
+    onClearFilters: clearFilters,
+  };
+
+  const renderContent = () => {
+    if (stories.length === 0 && !loading) {
+      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 
+              ? 'No stories match your search criteria.' 
+              : 'Your library is empty.'
+            }
+          </p>
+          {searchQuery || selectedTags.length > 0 ? (
+            <Button variant="ghost" onClick={clearFilters}>
+              Clear Filters
             </Button>
-            <Button href="/import">
-              Add New Story
+          ) : (
+            <Button href="/add-story">
+              Add Your First Story
             </Button>
-            <Button href="/import/epub" variant="secondary">
-              📖 Import EPUB
-            </Button>
-          </div>
+          )}
         </div>
+      );
+    }
 
-        {/* Search and Filters */}
-        <div className="space-y-4">
-          {/* Search Bar */}
-          <div className="flex flex-col sm:flex-row gap-4">
-            <div className="flex-1 relative">
-              <Input
-                type="search"
-                placeholder="Search by title, author, or tags..."
-                value={searchQuery}
-                onChange={handleSearchChange}
-                className="w-full"
-              />
-              {searchLoading && (
-                <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
-                  <div className="animate-spin h-4 w-4 border-2 border-theme-accent border-t-transparent rounded-full"></div>
-                </div>
-              )}
-            </div>
-            
-            {/* View Mode Toggle */}
-            <div className="flex items-center gap-2">
-              <button
-                onClick={() => setViewMode('grid')}
-                className={`p-2 rounded-lg transition-colors ${
-                  viewMode === 'grid'
-                    ? 'theme-accent-bg text-white'
-                    : 'theme-card theme-text hover:bg-opacity-80'
-                }`}
-                aria-label="Grid view"
-              >
-                ⊞
-              </button>
-              <button
-                onClick={() => setViewMode('list')}
-                className={`p-2 rounded-lg transition-colors ${
-                  viewMode === 'list'
-                    ? 'theme-accent-bg text-white'
-                    : 'theme-card theme-text hover:bg-opacity-80'
-                }`}
-                aria-label="List view"
-              >
-                ☰
-              </button>
-            </div>
-          </div>
-
-          {/* Sort and Tag Filters */}
-          <div className="flex flex-col sm:flex-row gap-4">
-            {/* Sort Options */}
-            <div className="flex items-center gap-2">
-              <label className="theme-text font-medium text-sm">Sort by:</label>
-              <select
-                value={sortOption}
-                onChange={(e) => handleSortChange(e.target.value as SortOption)}
-                className="px-3 py-1 rounded-lg theme-card theme-text theme-border border focus:outline-none focus:ring-2 focus:ring-theme-accent"
-              >
-                <option value="createdAt">Date Added</option>
-                <option value="title">Title</option>
-                <option value="authorName">Author</option>
-                <option value="rating">Rating</option>
-                <option value="wordCount">Word Count</option>
-                <option value="lastRead">Last Read</option>
-              </select>
-              
-              {/* Sort Direction Toggle */}
-              <button
-                onClick={toggleSortDirection}
-                className="p-2 rounded-lg theme-card theme-text hover:bg-opacity-80 transition-colors border theme-border"
-                title={`Sort ${sortDirection === 'asc' ? 'Ascending' : 'Descending'}`}
-                aria-label={`Toggle sort direction - currently ${sortDirection === 'asc' ? 'ascending' : 'descending'}`}
-              >
-                {sortDirection === 'asc' ? '↑' : '↓'}
-              </button>
-            </div>
-
-            {/* Clear Filters */}
-            {(searchQuery || selectedTags.length > 0) && (
-              <Button variant="ghost" size="sm" onClick={clearFilters}>
-                Clear Filters
-              </Button>
-            )}
-          </div>
-
-          {/* Tag Filter */}
-          <TagFilter
-            tags={tags}
-            selectedTags={selectedTags}
-            onTagToggle={handleTagToggle}
-          />
-        </div>
-
-        {/* Stories Display */}
-        {stories.length === 0 && !loading ? (
-          <div className="text-center py-20">
-            <div className="theme-text text-lg mb-4">
-              {searchQuery || selectedTags.length > 0 
-                ? 'No stories match your filters' 
-                : 'No stories in your library yet'
-              }
-            </div>
-            {searchQuery || selectedTags.length > 0 ? (
-              <Button variant="ghost" onClick={clearFilters}>
-                Clear Filters
-              </Button>
-            ) : (
-              <Button href="/import">
-                Add Your First Story
-              </Button>
-            )}
-          </div>
-        ) : (
-          <StoryMultiSelect
-            stories={stories}
-            viewMode={viewMode}
-            onUpdate={handleStoryUpdate}
-            allowMultiSelect={true}
-          />
-        )}
-
+    return (
+      <>
+        <StoryMultiSelect
+          stories={stories}
+          viewMode={viewMode}
+          onUpdate={handleStoryUpdate}
+          allowMultiSelect={true}
+        />
+        
         {/* Pagination */}
         {totalPages > 1 && (
           <div className="flex justify-center gap-2 mt-8">
@@ -363,7 +237,19 @@ export default function LibraryPage() {
             </Button>
           </div>
         )}
-      </div>
+      </>
+    );
+  };
+
+  const LayoutComponent = layout === 'sidebar' ? SidebarLayout :
+                        layout === 'toolbar' ? ToolbarLayout :
+                        MinimalLayout;
+
+  return (
+    <AppLayout>
+      <LayoutComponent {...layoutProps}>
+        {renderContent()}
+      </LayoutComponent>
     </AppLayout>
   );
 }