New Switchable Library Layout

frontend/src/app/add-story/page.tsx

@@ -1,39 +1,465 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
+import { useAuth } from '../../contexts/AuthContext';
+import ImportLayout from '../../components/layout/ImportLayout';
+import { Input, Textarea } from '../../components/ui/Input';
+import Button from '../../components/ui/Button';
+import TagInput from '../../components/stories/TagInput';
+import RichTextEditor from '../../components/stories/RichTextEditor';
+import ImageUpload from '../../components/ui/ImageUpload';
+import AuthorSelector from '../../components/stories/AuthorSelector';
+import { storyApi, authorApi } from '../../lib/api';
 
-export default function AddStoryRedirectPage() {
+export default function AddStoryPage() {
+  const [formData, setFormData] = useState({
+    title: '',
+    summary: '',
+    authorName: '',
+    authorId: undefined as string | undefined,
+    contentHtml: '',
+    sourceUrl: '',
+    tags: [] as string[],
+    seriesName: '',
+    volume: '',
+  });
+  
+  const [coverImage, setCoverImage] = useState<File | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [duplicateWarning, setDuplicateWarning] = useState<{
+    show: boolean;
+    count: number;
+    duplicates: Array<{
+      id: string;
+      title: string;
+      authorName: string;
+      createdAt: string;
+    }>;
+  }>({ show: false, count: 0, duplicates: [] });
+  const [checkingDuplicates, setCheckingDuplicates] = useState(false);
+  
   const router = useRouter();
   const searchParams = useSearchParams();
+  const { isAuthenticated } = useAuth();
 
+  // Handle URL parameters
   useEffect(() => {
-    // Redirect to the new /import route while preserving query parameters
-    const mode = searchParams.get('mode');
     const authorId = searchParams.get('authorId');
     const from = searchParams.get('from');
     
-    let redirectUrl = '/import';
-    const queryParams = new URLSearchParams();
-    
-    if (mode) queryParams.set('mode', mode);
-    if (authorId) queryParams.set('authorId', authorId);
-    if (from) queryParams.set('from', from);
-    
-    const queryString = queryParams.toString();
-    if (queryString) {
-      redirectUrl += '?' + queryString;
+    // Pre-fill author if authorId is provided in URL
+    if (authorId) {
+      const loadAuthor = async () => {
+        try {
+          const author = await authorApi.getAuthor(authorId);
+          setFormData(prev => ({
+            ...prev,
+            authorName: author.name,
+            authorId: author.id
+          }));
+        } catch (error) {
+          console.error('Failed to load author:', error);
+        }
+      };
+      loadAuthor();
     }
     
-    router.replace(redirectUrl);
-  }, [router, searchParams]);
+    // Handle URL import data
+    if (from === 'url-import') {
+      const title = searchParams.get('title') || '';
+      const summary = searchParams.get('summary') || '';
+      const author = searchParams.get('author') || '';
+      const sourceUrl = searchParams.get('sourceUrl') || '';
+      const tagsParam = searchParams.get('tags');
+      const content = searchParams.get('content') || '';
+      
+      let tags: string[] = [];
+      try {
+        tags = tagsParam ? JSON.parse(tagsParam) : [];
+      } catch (error) {
+        console.error('Failed to parse tags:', error);
+        tags = [];
+      }
+      
+      setFormData(prev => ({
+        ...prev,
+        title,
+        summary,
+        authorName: author,
+        authorId: undefined, // Reset author ID when importing from URL
+        contentHtml: content,
+        sourceUrl,
+        tags
+      }));
+      
+      // Show success message
+      setErrors({ success: 'Story data imported successfully! Review and edit as needed before saving.' });
+    }
+  }, [searchParams]);
+
+  // Load pending story data from bulk combine operation
+  useEffect(() => {
+    const fromBulkCombine = searchParams.get('from') === 'bulk-combine';
+    if (fromBulkCombine) {
+      const pendingStoryData = localStorage.getItem('pendingStory');
+      if (pendingStoryData) {
+        try {
+          const storyData = JSON.parse(pendingStoryData);
+          setFormData(prev => ({
+            ...prev,
+            title: storyData.title || '',
+            authorName: storyData.author || '',
+            authorId: undefined, // Reset author ID for bulk combined stories
+            contentHtml: storyData.content || '',
+            sourceUrl: storyData.sourceUrl || '',
+            summary: storyData.summary || '',
+            tags: storyData.tags || []
+          }));
+          // Clear the pending data
+          localStorage.removeItem('pendingStory');
+        } catch (error) {
+          console.error('Failed to load pending story data:', error);
+        }
+      }
+    }
+  }, [searchParams]);
+
+  // Check for duplicates when title and author are both present
+  useEffect(() => {
+    const checkDuplicates = async () => {
+      const title = formData.title.trim();
+      const authorName = formData.authorName.trim();
+      
+      // Don't check if user isn't authenticated or if title/author are empty
+      if (!isAuthenticated || !title || !authorName) {
+        setDuplicateWarning({ show: false, count: 0, duplicates: [] });
+        return;
+      }
+
+      // Debounce the check to avoid too many API calls
+      const timeoutId = setTimeout(async () => {
+        try {
+          setCheckingDuplicates(true);
+          const result = await storyApi.checkDuplicate(title, authorName);
+          
+          if (result.hasDuplicates) {
+            setDuplicateWarning({
+              show: true,
+              count: result.count,
+              duplicates: result.duplicates
+            });
+          } else {
+            setDuplicateWarning({ show: false, count: 0, duplicates: [] });
+          }
+        } catch (error) {
+          console.error('Failed to check for duplicates:', error);
+          // Clear any existing duplicate warnings on error
+          setDuplicateWarning({ show: false, count: 0, duplicates: [] });
+          // Don't show error to user as this is just a helpful warning
+          // Authentication errors will be handled by the API interceptor
+        } finally {
+          setCheckingDuplicates(false);
+        }
+      }, 500); // 500ms debounce
+
+      return () => clearTimeout(timeoutId);
+    };
+
+    checkDuplicates();
+  }, [formData.title, formData.authorName, isAuthenticated]);
+
+  const handleInputChange = (field: string) => (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: e.target.value
+    }));
+    
+    // Clear error when user starts typing
+    if (errors[field]) {
+      setErrors(prev => ({ ...prev, [field]: '' }));
+    }
+  };
+
+  const handleContentChange = (html: string) => {
+    setFormData(prev => ({ ...prev, contentHtml: html }));
+    if (errors.contentHtml) {
+      setErrors(prev => ({ ...prev, contentHtml: '' }));
+    }
+  };
+
+  const handleTagsChange = (tags: string[]) => {
+    setFormData(prev => ({ ...prev, tags }));
+  };
+
+  const handleAuthorChange = (authorName: string, authorId?: string) => {
+    setFormData(prev => ({ 
+      ...prev, 
+      authorName,
+      authorId: authorId // This will be undefined if creating new author, which clears the existing ID
+    }));
+    
+    // Clear error when user changes author
+    if (errors.authorName) {
+      setErrors(prev => ({ ...prev, authorName: '' }));
+    }
+  };
+
+  const validateForm = () => {
+    const newErrors: Record<string, string> = {};
+
+    if (!formData.title.trim()) {
+      newErrors.title = 'Title is required';
+    }
+    
+    if (!formData.authorName.trim()) {
+      newErrors.authorName = 'Author name is required';
+    }
+    
+    if (!formData.contentHtml.trim()) {
+      newErrors.contentHtml = 'Story content is required';
+    }
+
+    if (formData.seriesName && !formData.volume) {
+      newErrors.volume = 'Volume number is required when series is specified';
+    }
+    
+    if (formData.volume && !formData.seriesName.trim()) {
+      newErrors.seriesName = 'Series name is required when volume is specified';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!validateForm()) {
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      // First, create the story with JSON data
+      const storyData = {
+        title: formData.title,
+        summary: formData.summary || undefined,
+        contentHtml: formData.contentHtml,
+        sourceUrl: formData.sourceUrl || undefined,
+        volume: formData.seriesName ? parseInt(formData.volume) : undefined,
+        seriesName: formData.seriesName || undefined,
+        // Send authorId if we have it (existing author), otherwise send authorName (new author)
+        ...(formData.authorId ? { authorId: formData.authorId } : { authorName: formData.authorName }),
+        tagNames: formData.tags.length > 0 ? formData.tags : undefined,
+      };
+
+      const story = await storyApi.createStory(storyData);
+      
+      // If there's a cover image, upload it separately
+      if (coverImage) {
+        await storyApi.uploadCover(story.id, coverImage);
+      }
+
+      router.push(`/stories/${story.id}`);
+    } catch (error: any) {
+      console.error('Failed to create story:', error);
+      const errorMessage = error.response?.data?.message || 'Failed to create story';
+      setErrors({ submit: errorMessage });
+    } finally {
+      setLoading(false);
+    }
+  };
 
   return (
-    <div className="min-h-screen flex items-center justify-center">
-      <div className="text-center">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
-        <p className="text-gray-600">Redirecting...</p>
-      </div>
-    </div>
+    <ImportLayout
+      title="Add New Story"
+      description="Add a story to your personal collection"
+    >
+      {/* Success Message */}
+      {errors.success && (
+        <div className="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg mb-6">
+          <p className="text-green-800 dark:text-green-200">{errors.success}</p>
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {/* Title */}
+        <Input
+          label="Title *"
+          value={formData.title}
+          onChange={handleInputChange('title')}
+          placeholder="Enter the story title"
+          error={errors.title}
+          required
+        />
+
+        {/* Author Selector */}
+        <AuthorSelector
+          label="Author *"
+          value={formData.authorName}
+          onChange={handleAuthorChange}
+          placeholder="Select or enter author name"
+          error={errors.authorName}
+          required
+        />
+
+        {/* Duplicate Warning */}
+        {duplicateWarning.show && (
+          <div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
+            <div className="flex items-start gap-3">
+              <div className="text-yellow-600 dark:text-yellow-400 mt-0.5">
+                ⚠️
+              </div>
+              <div>
+                <h4 className="font-medium text-yellow-800 dark:text-yellow-200">
+                  Potential Duplicate Detected
+                </h4>
+                <p className="text-sm text-yellow-700 dark:text-yellow-300 mt-1">
+                  Found {duplicateWarning.count} existing {duplicateWarning.count === 1 ? 'story' : 'stories'} with the same title and author:
+                </p>
+                <ul className="mt-2 space-y-1">
+                  {duplicateWarning.duplicates.map((duplicate, index) => (
+                    <li key={duplicate.id} className="text-sm text-yellow-700 dark:text-yellow-300">
+                      • <span className="font-medium">{duplicate.title}</span> by {duplicate.authorName} 
+                      <span className="text-xs ml-2">
+                        (added {new Date(duplicate.createdAt).toLocaleDateString()})
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+                <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-2">
+                  You can still create this story if it's different from the existing ones.
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Checking indicator */}
+        {checkingDuplicates && (
+          <div className="flex items-center gap-2 text-sm theme-text">
+            <div className="animate-spin w-4 h-4 border-2 border-theme-accent border-t-transparent rounded-full"></div>
+            Checking for duplicates...
+          </div>
+        )}
+
+        {/* Summary */}
+        <div>
+          <label className="block text-sm font-medium theme-header mb-2">
+            Summary
+          </label>
+          <Textarea
+            value={formData.summary}
+            onChange={handleInputChange('summary')}
+            placeholder="Brief summary or description of the story..."
+            rows={3}
+          />
+          <p className="text-sm theme-text mt-1">
+            Optional summary that will be displayed on the story detail page
+          </p>
+        </div>
+
+        {/* Cover Image Upload */}
+        <div>
+          <label className="block text-sm font-medium theme-header mb-2">
+            Cover Image
+          </label>
+          <ImageUpload
+            onImageSelect={setCoverImage}
+            accept="image/jpeg,image/png"
+            maxSizeMB={5}
+            aspectRatio="3:4"
+            placeholder="Drop a cover image here or click to select"
+          />
+        </div>
+
+        {/* Content */}
+        <div>
+          <label className="block text-sm font-medium theme-header mb-2">
+            Story Content *
+          </label>
+          <RichTextEditor
+            value={formData.contentHtml}
+            onChange={handleContentChange}
+            placeholder="Write or paste your story content here..."
+            error={errors.contentHtml}
+          />
+        </div>
+
+        {/* Tags */}
+        <div>
+          <label className="block text-sm font-medium theme-header mb-2">
+            Tags
+          </label>
+          <TagInput
+            tags={formData.tags}
+            onChange={handleTagsChange}
+            placeholder="Add tags to categorize your story..."
+          />
+        </div>
+
+        {/* Series and Volume */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <Input
+            label="Series (optional)"
+            value={formData.seriesName}
+            onChange={handleInputChange('seriesName')}
+            placeholder="Enter series name if part of a series"
+            error={errors.seriesName}
+          />
+          
+          <Input
+            label="Volume/Part (optional)"
+            type="number"
+            min="1"
+            value={formData.volume}
+            onChange={handleInputChange('volume')}
+            placeholder="Enter volume/part number"
+            error={errors.volume}
+          />
+        </div>
+
+        {/* Source URL */}
+        <Input
+          label="Source URL (optional)"
+          type="url"
+          value={formData.sourceUrl}
+          onChange={handleInputChange('sourceUrl')}
+          placeholder="https://example.com/original-story-url"
+        />
+
+        {/* Submit Error */}
+        {errors.submit && (
+          <div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+            <p className="text-red-800 dark:text-red-200">{errors.submit}</p>
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex justify-end gap-4 pt-6">
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={() => router.back()}
+            disabled={loading}
+          >
+            Cancel
+          </Button>
+          
+          <Button
+            type="submit"
+            loading={loading}
+            disabled={!formData.title || !formData.authorName || !formData.contentHtml}
+          >
+            Add Story
+          </Button>
+        </div>
+      </form>
+    </ImportLayout>
   );
 }

frontend/src/app/authors/[id]/page.tsx

@@ -211,7 +211,7 @@ export default function AuthorDetailPage() {
                 <p className="theme-text">
                   {stories.length} {stories.length === 1 ? 'story' : 'stories'}
                 </p>
-                <Button href={`/import?authorId=${authorId}`}>
+                <Button href={`/add-story?authorId=${authorId}`}>
                   Add Story
                 </Button>
               </div>
@@ -220,7 +220,7 @@ export default function AuthorDetailPage() {
             {stories.length === 0 ? (
               <div className="text-center py-12 theme-card theme-shadow rounded-lg">
                 <p className="theme-text text-lg mb-4">No stories by this author yet.</p>
-                <Button href="/import">Add a Story</Button>
+                <Button href="/add-story">Add a Story</Button>
               </div>
             ) : (
               <div className="space-y-4">

frontend/src/app/authors/page.tsx

@@ -14,6 +14,7 @@ export default function AuthorsPage() {
   const [authors, setAuthors] = useState<Author[]>([]);
   const [filteredAuthors, setFilteredAuthors] = useState<Author[]>([]);
   const [loading, setLoading] = useState(true);
+  const [searchLoading, setSearchLoading] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
   const [sortBy, setSortBy] = useState('name');
@@ -24,50 +25,61 @@ export default function AuthorsPage() {
   const ITEMS_PER_PAGE = 50; // Safe limit under Typesense's 250 limit
 
   useEffect(() => {
-    const loadAuthors = async () => {
-      try {
-        setLoading(true);
-        const searchResults = await authorApi.searchAuthorsTypesense({ 
-          q: searchQuery || '*',
-          page: currentPage, 
-          size: ITEMS_PER_PAGE,
-          sortBy: sortBy,
-          sortOrder: sortOrder
-        });
-        
-        if (currentPage === 0) {
-          // First page - replace all results
-          setAuthors(searchResults.results || []);
-          setFilteredAuthors(searchResults.results || []);
-        } else {
-          // Subsequent pages - append results
-          setAuthors(prev => [...prev, ...(searchResults.results || [])]);
-          setFilteredAuthors(prev => [...prev, ...(searchResults.results || [])]);
-        }
-        
-        setTotalHits(searchResults.totalHits);
-        setHasMore(searchResults.results.length === ITEMS_PER_PAGE && (currentPage + 1) * ITEMS_PER_PAGE < searchResults.totalHits);
-        
-      } catch (error) {
-        console.error('Failed to load authors:', error);
-        // Fallback to regular API if Typesense fails (only for first page)
-        if (currentPage === 0) {
-          try {
-            const authorsResult = await authorApi.getAuthors({ page: 0, size: ITEMS_PER_PAGE });
-            setAuthors(authorsResult.content || []);
-            setFilteredAuthors(authorsResult.content || []);
-            setTotalHits(authorsResult.totalElements || 0);
-            setHasMore(authorsResult.content.length === ITEMS_PER_PAGE);
-          } catch (fallbackError) {
-            console.error('Fallback also failed:', fallbackError);
+    const debounceTimer = setTimeout(() => {
+      const loadAuthors = async () => {
+        try {
+          // Use searchLoading for background search, loading only for initial load
+          const isInitialLoad = authors.length === 0 && !searchQuery && currentPage === 0;
+          if (isInitialLoad) {
+            setLoading(true);
+          } else {
+            setSearchLoading(true);
           }
+          const searchResults = await authorApi.searchAuthorsTypesense({ 
+            q: searchQuery || '*',
+            page: currentPage, 
+            size: ITEMS_PER_PAGE,
+            sortBy: sortBy,
+            sortOrder: sortOrder
+          });
+          
+          if (currentPage === 0) {
+            // First page - replace all results
+            setAuthors(searchResults.results || []);
+            setFilteredAuthors(searchResults.results || []);
+          } else {
+            // Subsequent pages - append results
+            setAuthors(prev => [...prev, ...(searchResults.results || [])]);
+            setFilteredAuthors(prev => [...prev, ...(searchResults.results || [])]);
+          }
+          
+          setTotalHits(searchResults.totalHits);
+          setHasMore(searchResults.results.length === ITEMS_PER_PAGE && (currentPage + 1) * ITEMS_PER_PAGE < searchResults.totalHits);
+          
+        } catch (error) {
+          console.error('Failed to load authors:', error);
+          // Fallback to regular API if Typesense fails (only for first page)
+          if (currentPage === 0) {
+            try {
+              const authorsResult = await authorApi.getAuthors({ page: 0, size: ITEMS_PER_PAGE });
+              setAuthors(authorsResult.content || []);
+              setFilteredAuthors(authorsResult.content || []);
+              setTotalHits(authorsResult.totalElements || 0);
+              setHasMore(authorsResult.content.length === ITEMS_PER_PAGE);
+            } catch (fallbackError) {
+              console.error('Fallback also failed:', fallbackError);
+            }
+          }
+        } finally {
+          setLoading(false);
+          setSearchLoading(false);
         }
-      } finally {
-        setLoading(false);
-      }
-    };
+      };
 
-    loadAuthors();
+      loadAuthors();
+    }, searchQuery ? 500 : 0); // 500ms debounce for search, immediate for other changes
+
+    return () => clearTimeout(debounceTimer);
   }, [searchQuery, sortBy, sortOrder, currentPage]);
 
   // Reset pagination when search or sort changes
@@ -133,13 +145,18 @@ export default function AuthorsPage() {
 
         {/* Search and Sort Controls */}
         <div className="flex flex-col md:flex-row gap-4">
-          <div className="flex-1 max-w-md">
+          <div className="flex-1 max-w-md relative">
             <Input
               type="search"
               placeholder="Search authors..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
             />
+            {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>
           
           <div className="flex gap-2">

frontend/src/app/import/bulk/page.tsx

@@ -131,7 +131,7 @@ export default function BulkImportPage() {
       if (data.combinedStory && combineIntoOne) {
         // For combine mode, redirect to import page with the combined content
         localStorage.setItem('pendingStory', JSON.stringify(data.combinedStory));
-        router.push('/import?from=bulk-combine');
+        router.push('/add-story?from=bulk-combine');
         return;
       } else if (data.results && data.summary) {
         // For individual mode, show the results

frontend/src/app/import/page.tsx

@@ -1,188 +1,17 @@
 'use client';
 
-import { useState, useRef, useEffect } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useAuth } from '../../contexts/AuthContext';
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
 import ImportLayout from '../../components/layout/ImportLayout';
-import { Input, Textarea } from '../../components/ui/Input';
+import { Input } from '../../components/ui/Input';
 import Button from '../../components/ui/Button';
-import TagInput from '../../components/stories/TagInput';
-import RichTextEditor from '../../components/stories/RichTextEditor';
-import ImageUpload from '../../components/ui/ImageUpload';
-import AuthorSelector from '../../components/stories/AuthorSelector';
-import { storyApi, authorApi } from '../../lib/api';
 
-export default function AddStoryPage() {
-  const [importMode, setImportMode] = useState<'manual' | 'url'>('manual');
+export default function ImportFromUrlPage() {
   const [importUrl, setImportUrl] = useState('');
   const [scraping, setScraping] = useState(false);
-  const [formData, setFormData] = useState({
-    title: '',
-    summary: '',
-    authorName: '',
-    authorId: undefined as string | undefined,
-    contentHtml: '',
-    sourceUrl: '',
-    tags: [] as string[],
-    seriesName: '',
-    volume: '',
-  });
-  
-  const [coverImage, setCoverImage] = useState<File | null>(null);
-  const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState<Record<string, string>>({});
-  const [duplicateWarning, setDuplicateWarning] = useState<{
-    show: boolean;
-    count: number;
-    duplicates: Array<{
-      id: string;
-      title: string;
-      authorName: string;
-      createdAt: string;
-    }>;
-  }>({ show: false, count: 0, duplicates: [] });
-  const [checkingDuplicates, setCheckingDuplicates] = useState(false);
   
   const router = useRouter();
-  const searchParams = useSearchParams();
-  const { isAuthenticated } = useAuth();
-
-  // Handle URL parameters
-  useEffect(() => {
-    const authorId = searchParams.get('authorId');
-    const mode = searchParams.get('mode');
-    
-    // Set import mode if specified in URL
-    if (mode === 'url') {
-      setImportMode('url');
-    }
-    
-    // Pre-fill author if authorId is provided in URL
-    if (authorId) {
-      const loadAuthor = async () => {
-        try {
-          const author = await authorApi.getAuthor(authorId);
-          setFormData(prev => ({
-            ...prev,
-            authorName: author.name,
-            authorId: author.id
-          }));
-        } catch (error) {
-          console.error('Failed to load author:', error);
-        }
-      };
-      loadAuthor();
-    }
-  }, [searchParams]);
-
-  // Load pending story data from bulk combine operation
-  useEffect(() => {
-    const fromBulkCombine = searchParams.get('from') === 'bulk-combine';
-    if (fromBulkCombine) {
-      const pendingStoryData = localStorage.getItem('pendingStory');
-      if (pendingStoryData) {
-        try {
-          const storyData = JSON.parse(pendingStoryData);
-          setFormData(prev => ({
-            ...prev,
-            title: storyData.title || '',
-            authorName: storyData.author || '',
-            authorId: undefined, // Reset author ID for bulk combined stories
-            contentHtml: storyData.content || '',
-            sourceUrl: storyData.sourceUrl || '',
-            summary: storyData.summary || '',
-            tags: storyData.tags || []
-          }));
-          // Clear the pending data
-          localStorage.removeItem('pendingStory');
-        } catch (error) {
-          console.error('Failed to load pending story data:', error);
-        }
-      }
-    }
-  }, [searchParams]);
-
-  // Check for duplicates when title and author are both present
-  useEffect(() => {
-    const checkDuplicates = async () => {
-      const title = formData.title.trim();
-      const authorName = formData.authorName.trim();
-      
-      // Don't check if user isn't authenticated or if title/author are empty
-      if (!isAuthenticated || !title || !authorName) {
-        setDuplicateWarning({ show: false, count: 0, duplicates: [] });
-        return;
-      }
-
-      // Debounce the check to avoid too many API calls
-      const timeoutId = setTimeout(async () => {
-        try {
-          setCheckingDuplicates(true);
-          const result = await storyApi.checkDuplicate(title, authorName);
-          
-          if (result.hasDuplicates) {
-            setDuplicateWarning({
-              show: true,
-              count: result.count,
-              duplicates: result.duplicates
-            });
-          } else {
-            setDuplicateWarning({ show: false, count: 0, duplicates: [] });
-          }
-        } catch (error) {
-          console.error('Failed to check for duplicates:', error);
-          // Clear any existing duplicate warnings on error
-          setDuplicateWarning({ show: false, count: 0, duplicates: [] });
-          // Don't show error to user as this is just a helpful warning
-          // Authentication errors will be handled by the API interceptor
-        } finally {
-          setCheckingDuplicates(false);
-        }
-      }, 500); // 500ms debounce
-
-      return () => clearTimeout(timeoutId);
-    };
-
-    checkDuplicates();
-  }, [formData.title, formData.authorName, isAuthenticated]);
-
-  const handleInputChange = (field: string) => (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    setFormData(prev => ({
-      ...prev,
-      [field]: e.target.value
-    }));
-    
-    // Clear error when user starts typing
-    if (errors[field]) {
-      setErrors(prev => ({ ...prev, [field]: '' }));
-    }
-  };
-
-  const handleContentChange = (html: string) => {
-    setFormData(prev => ({ ...prev, contentHtml: html }));
-    if (errors.contentHtml) {
-      setErrors(prev => ({ ...prev, contentHtml: '' }));
-    }
-  };
-
-  const handleTagsChange = (tags: string[]) => {
-    setFormData(prev => ({ ...prev, tags }));
-  };
-
-  const handleAuthorChange = (authorName: string, authorId?: string) => {
-    setFormData(prev => ({ 
-      ...prev, 
-      authorName,
-      authorId: authorId // This will be undefined if creating new author, which clears the existing ID
-    }));
-    
-    // Clear error when user changes author
-    if (errors.authorName) {
-      setErrors(prev => ({ ...prev, authorName: '' }));
-    }
-  };
 
   const handleImportFromUrl = async () => {
     if (!importUrl.trim()) {
@@ -209,25 +38,18 @@ export default function AddStoryPage() {
 
       const scrapedStory = await response.json();
 
-      // Pre-fill the form with scraped data
-      setFormData({
+      // Redirect to add-story page with pre-filled data
+      const queryParams = new URLSearchParams({
+        from: 'url-import',
         title: scrapedStory.title || '',
         summary: scrapedStory.summary || '',
-        authorName: scrapedStory.author || '',
-        authorId: undefined, // Reset author ID when importing from URL (likely new author)
-        contentHtml: scrapedStory.content || '',
+        author: scrapedStory.author || '',
         sourceUrl: scrapedStory.sourceUrl || importUrl,
-        tags: scrapedStory.tags || [],
-        seriesName: '',
-        volume: '',
+        tags: JSON.stringify(scrapedStory.tags || []),
+        content: scrapedStory.content || ''
       });
 
-      // Switch to manual mode so user can edit the pre-filled data
-      setImportMode('manual');
-      setImportUrl('');
-
-      // Show success message
-      setErrors({ success: 'Story data imported successfully! Review and edit as needed before saving.' });
+      router.push(`/add-story?${queryParams.toString()}`);
     } catch (error: any) {
       console.error('Failed to import story:', error);
       setErrors({ importUrl: error.message });
@@ -236,310 +58,56 @@ export default function AddStoryPage() {
     }
   };
 
-  const validateForm = () => {
-    const newErrors: Record<string, string> = {};
-
-    if (!formData.title.trim()) {
-      newErrors.title = 'Title is required';
-    }
-    
-    if (!formData.authorName.trim()) {
-      newErrors.authorName = 'Author name is required';
-    }
-    
-    if (!formData.contentHtml.trim()) {
-      newErrors.contentHtml = 'Story content is required';
-    }
-
-    if (formData.seriesName && !formData.volume) {
-      newErrors.volume = 'Volume number is required when series is specified';
-    }
-    
-    if (formData.volume && !formData.seriesName.trim()) {
-      newErrors.seriesName = 'Series name is required when volume is specified';
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (!validateForm()) {
-      return;
-    }
-
-    setLoading(true);
-
-    try {
-      // First, create the story with JSON data
-      const storyData = {
-        title: formData.title,
-        summary: formData.summary || undefined,
-        contentHtml: formData.contentHtml,
-        sourceUrl: formData.sourceUrl || undefined,
-        volume: formData.seriesName ? parseInt(formData.volume) : undefined,
-        seriesName: formData.seriesName || undefined,
-        // Send authorId if we have it (existing author), otherwise send authorName (new author)
-        ...(formData.authorId ? { authorId: formData.authorId } : { authorName: formData.authorName }),
-        tagNames: formData.tags.length > 0 ? formData.tags : undefined,
-      };
-
-      const story = await storyApi.createStory(storyData);
-      
-      // If there's a cover image, upload it separately
-      if (coverImage) {
-        await storyApi.uploadCover(story.id, coverImage);
-      }
-
-      router.push(`/stories/${story.id}`);
-    } catch (error: any) {
-      console.error('Failed to create story:', error);
-      const errorMessage = error.response?.data?.message || 'Failed to create story';
-      setErrors({ submit: errorMessage });
-    } finally {
-      setLoading(false);
-    }
-  };
-
   return (
     <ImportLayout
-      title="Add New Story"
-      description="Add a story to your personal collection"
+      title="Import Story from URL"
+      description="Import a single story from a website"
     >
-      {/* URL Import Section */}
-      {importMode === 'url' && (
-        <div className="space-y-6">
-          <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-6">
-            <h3 className="text-lg font-medium theme-header mb-4">Import Story from URL</h3>
-            <p className="theme-text text-sm mb-4">
-              Enter a URL from a supported story site to automatically extract the story content, title, author, and other metadata.
-            </p>
+      <div className="space-y-6">
+        <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-6">
+          <h3 className="text-lg font-medium theme-header mb-4">Import Story from URL</h3>
+          <p className="theme-text text-sm mb-4">
+            Enter a URL from a supported story site to automatically extract the story content, title, author, and other metadata. After importing, you'll be able to review and edit the data before saving.
+          </p>
+          
+          <div className="space-y-4">
+            <Input
+              label="Story URL"
+              type="url"
+              value={importUrl}
+              onChange={(e) => setImportUrl(e.target.value)}
+              placeholder="https://example.com/story-url"
+              error={errors.importUrl}
+              disabled={scraping}
+            />
             
-            <div className="space-y-4">
-              <Input
-                label="Story URL"
-                type="url"
-                value={importUrl}
-                onChange={(e) => setImportUrl(e.target.value)}
-                placeholder="https://example.com/story-url"
-                error={errors.importUrl}
+            <div className="flex gap-3">
+              <Button
+                type="button"
+                onClick={handleImportFromUrl}
+                loading={scraping}
+                disabled={!importUrl.trim() || scraping}
+              >
+                {scraping ? 'Importing...' : 'Import Story'}
+              </Button>
+              
+              <Button
+                type="button"
+                variant="ghost"
+                href="/add-story"
                 disabled={scraping}
-              />
-              
-              <div className="flex gap-3">
-                <Button
-                  type="button"
-                  onClick={handleImportFromUrl}
-                  loading={scraping}
-                  disabled={!importUrl.trim() || scraping}
-                >
-                  {scraping ? 'Importing...' : 'Import Story'}
-                </Button>
-                
-                <Button
-                  type="button"
-                  variant="ghost"
-                  onClick={() => setImportMode('manual')}
-                  disabled={scraping}
-                >
-                  Enter Manually Instead
-                </Button>
-              </div>
-              
-              <div className="text-xs theme-text">
-                <p className="font-medium mb-1">Supported Sites:</p>
-                <p>Archive of Our Own, DeviantArt, FanFiction.Net, Literotica, Royal Road, Wattpad, and more</p>
-              </div>
+              >
+                Enter Manually Instead
+              </Button>
+            </div>
+            
+            <div className="text-xs theme-text">
+              <p className="font-medium mb-1">Supported Sites:</p>
+              <p>Archive of Our Own, DeviantArt, FanFiction.Net, Literotica, Royal Road, Wattpad, and more</p>
             </div>
           </div>
         </div>
-      )}
-
-      {/* Success Message */}
-      {errors.success && (
-        <div className="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg mb-6">
-          <p className="text-green-800 dark:text-green-200">{errors.success}</p>
-        </div>
-      )}
-
-      {/* Manual Entry Form */}
-      {importMode === 'manual' && (
-        <form onSubmit={handleSubmit} className="space-y-6">
-          {/* Title */}
-          <Input
-            label="Title *"
-            value={formData.title}
-            onChange={handleInputChange('title')}
-            placeholder="Enter the story title"
-            error={errors.title}
-            required
-          />
-
-          {/* Author Selector */}
-          <AuthorSelector
-            label="Author *"
-            value={formData.authorName}
-            onChange={handleAuthorChange}
-            placeholder="Select or enter author name"
-            error={errors.authorName}
-            required
-          />
-
-          {/* Duplicate Warning */}
-          {duplicateWarning.show && (
-            <div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
-              <div className="flex items-start gap-3">
-                <div className="text-yellow-600 dark:text-yellow-400 mt-0.5">
-                  ⚠️
-                </div>
-                <div>
-                  <h4 className="font-medium text-yellow-800 dark:text-yellow-200">
-                    Potential Duplicate Detected
-                  </h4>
-                  <p className="text-sm text-yellow-700 dark:text-yellow-300 mt-1">
-                    Found {duplicateWarning.count} existing {duplicateWarning.count === 1 ? 'story' : 'stories'} with the same title and author:
-                  </p>
-                  <ul className="mt-2 space-y-1">
-                    {duplicateWarning.duplicates.map((duplicate, index) => (
-                      <li key={duplicate.id} className="text-sm text-yellow-700 dark:text-yellow-300">
-                        • <span className="font-medium">{duplicate.title}</span> by {duplicate.authorName} 
-                        <span className="text-xs ml-2">
-                          (added {new Date(duplicate.createdAt).toLocaleDateString()})
-                        </span>
-                      </li>
-                    ))}
-                  </ul>
-                  <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-2">
-                    You can still create this story if it's different from the existing ones.
-                  </p>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Checking indicator */}
-          {checkingDuplicates && (
-            <div className="flex items-center gap-2 text-sm theme-text">
-              <div className="animate-spin w-4 h-4 border-2 border-theme-accent border-t-transparent rounded-full"></div>
-              Checking for duplicates...
-            </div>
-          )}
-
-          {/* Summary */}
-          <div>
-            <label className="block text-sm font-medium theme-header mb-2">
-              Summary
-            </label>
-            <Textarea
-              value={formData.summary}
-              onChange={handleInputChange('summary')}
-              placeholder="Brief summary or description of the story..."
-              rows={3}
-            />
-            <p className="text-sm theme-text mt-1">
-              Optional summary that will be displayed on the story detail page
-            </p>
-          </div>
-
-          {/* Cover Image Upload */}
-          <div>
-            <label className="block text-sm font-medium theme-header mb-2">
-              Cover Image
-            </label>
-            <ImageUpload
-              onImageSelect={setCoverImage}
-              accept="image/jpeg,image/png"
-              maxSizeMB={5}
-              aspectRatio="3:4"
-              placeholder="Drop a cover image here or click to select"
-            />
-          </div>
-
-          {/* Content */}
-          <div>
-            <label className="block text-sm font-medium theme-header mb-2">
-              Story Content *
-            </label>
-            <RichTextEditor
-              value={formData.contentHtml}
-              onChange={handleContentChange}
-              placeholder="Write or paste your story content here..."
-              error={errors.contentHtml}
-            />
-          </div>
-
-          {/* Tags */}
-          <div>
-            <label className="block text-sm font-medium theme-header mb-2">
-              Tags
-            </label>
-            <TagInput
-              tags={formData.tags}
-              onChange={handleTagsChange}
-              placeholder="Add tags to categorize your story..."
-            />
-          </div>
-
-          {/* Series and Volume */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <Input
-              label="Series (optional)"
-              value={formData.seriesName}
-              onChange={handleInputChange('seriesName')}
-              placeholder="Enter series name if part of a series"
-              error={errors.seriesName}
-            />
-            
-            <Input
-              label="Volume/Part (optional)"
-              type="number"
-              min="1"
-              value={formData.volume}
-              onChange={handleInputChange('volume')}
-              placeholder="Enter volume/part number"
-              error={errors.volume}
-            />
-          </div>
-
-          {/* Source URL */}
-          <Input
-            label="Source URL (optional)"
-            type="url"
-            value={formData.sourceUrl}
-            onChange={handleInputChange('sourceUrl')}
-            placeholder="https://example.com/original-story-url"
-          />
-
-          {/* Submit Error */}
-          {errors.submit && (
-            <div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
-              <p className="text-red-800 dark:text-red-200">{errors.submit}</p>
-            </div>
-          )}
-
-          {/* Actions */}
-          <div className="flex justify-end gap-4 pt-6">
-            <Button
-              type="button"
-              variant="ghost"
-              onClick={() => router.back()}
-              disabled={loading}
-            >
-              Cancel
-            </Button>
-            
-            <Button
-              type="submit"
-              loading={loading}
-              disabled={!formData.title || !formData.authorName || !formData.contentHtml}
-            >
-              Add Story
-            </Button>
-          </div>
-        </form>
-      )}
+      </div>
     </ImportLayout>
   );
 }

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>
   );
 }

frontend/src/app/settings/page.tsx

@@ -5,6 +5,7 @@ import AppLayout from '../../components/layout/AppLayout';
 import { useTheme } from '../../lib/theme';
 import Button from '../../components/ui/Button';
 import { storyApi, authorApi, databaseApi } from '../../lib/api';
+import { useLibraryLayout, LibraryLayoutType } from '../../hooks/useLibraryLayout';
 
 type FontFamily = 'serif' | 'sans' | 'mono';
 type FontSize = 'small' | 'medium' | 'large' | 'extra-large';
@@ -28,6 +29,7 @@ const defaultSettings: Settings = {
 
 export default function SettingsPage() {
   const { theme, setTheme } = useTheme();
+  const { layout, setLayout } = useLibraryLayout();
   const [settings, setSettings] = useState<Settings>(defaultSettings);
   const [saved, setSaved] = useState(false);
   const [typesenseStatus, setTypesenseStatus] = useState<{
@@ -350,6 +352,60 @@ export default function SettingsPage() {
                   </button>
                 </div>
               </div>
+
+              {/* Library Layout */}
+              <div>
+                <label className="block text-sm font-medium theme-header mb-2">
+                  Library Layout
+                </label>
+                <div className="space-y-3">
+                  <div className="flex gap-4 flex-wrap">
+                    <button
+                      onClick={() => setLayout('sidebar')}
+                      className={`px-4 py-2 rounded-lg border transition-colors ${
+                        layout === 'sidebar'
+                          ? 'theme-accent-bg text-white border-transparent'
+                          : 'theme-card theme-text theme-border hover:border-gray-400'
+                      }`}
+                    >
+                      📋 Sidebar Layout
+                    </button>
+                    <button
+                      onClick={() => setLayout('toolbar')}
+                      className={`px-4 py-2 rounded-lg border transition-colors ${
+                        layout === 'toolbar'
+                          ? 'theme-accent-bg text-white border-transparent'
+                          : 'theme-card theme-text theme-border hover:border-gray-400'
+                      }`}
+                    >
+                      🛠️ Toolbar Layout
+                    </button>
+                    <button
+                      onClick={() => setLayout('minimal')}
+                      className={`px-4 py-2 rounded-lg border transition-colors ${
+                        layout === 'minimal'
+                          ? 'theme-accent-bg text-white border-transparent'
+                          : 'theme-card theme-text theme-border hover:border-gray-400'
+                      }`}
+                    >
+                      ✨ Minimal Layout
+                    </button>
+                  </div>
+                  <div className="text-sm theme-text">
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mt-3">
+                      <div className="text-xs">
+                        <strong>Sidebar:</strong> Filters and controls in a side panel, maximum space for stories
+                      </div>
+                      <div className="text-xs">
+                        <strong>Toolbar:</strong> Everything visible at once with integrated search and tag filters
+                      </div>
+                      <div className="text-xs">
+                        <strong>Minimal:</strong> Clean, content-focused design with floating controls
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
 

frontend/src/components/layout/Header.tsx

@@ -17,12 +17,12 @@ export default function Header() {
 
   const addStoryItems = [
     {
-      href: '/import',
+      href: '/add-story',
       label: 'Manual Entry',
       description: 'Add a story by manually entering details'
     },
     {
-      href: '/import?mode=url',
+      href: '/import',
       label: 'Import from URL',
       description: 'Import a single story from a website'
     },
@@ -156,34 +156,16 @@ export default function Header() {
               <div className="px-2 py-1">
                 <div className="font-medium theme-text mb-1">Add Story</div>
                 <div className="pl-4 space-y-1">
-                  <Link 
-                    href="/import" 
-                    className="block theme-text hover:theme-accent transition-colors text-sm py-1"
-                    onClick={() => setIsMenuOpen(false)}
-                  >
-                    Manual Entry
-                  </Link>
-                  <Link 
-                    href="/import?mode=url" 
-                    className="block theme-text hover:theme-accent transition-colors text-sm py-1"
-                    onClick={() => setIsMenuOpen(false)}
-                  >
-                    Import from URL
-                  </Link>
-                  <Link 
-                    href="/import/epub" 
-                    className="block theme-text hover:theme-accent transition-colors text-sm py-1"
-                    onClick={() => setIsMenuOpen(false)}
-                  >
-                    Import EPUB
-                  </Link>
-                  <Link 
-                    href="/import/bulk" 
-                    className="block theme-text hover:theme-accent transition-colors text-sm py-1"
-                    onClick={() => setIsMenuOpen(false)}
-                  >
-                    Bulk Import
-                  </Link>
+                  {addStoryItems.map((item) => (
+                    <Link 
+                      key={item.href}
+                      href={item.href} 
+                      className="block theme-text hover:theme-accent transition-colors text-sm py-1"
+                      onClick={() => setIsMenuOpen(false)}
+                    >
+                      {item.label}
+                    </Link>
+                  ))}
                 </div>
               </div>
               <Link 

frontend/src/components/layout/ImportLayout.tsx

@@ -22,13 +22,13 @@ const importTabs: ImportTab[] = [
   {
     id: 'manual',
     label: 'Manual Entry',
-    href: '/import',
+    href: '/add-story',
     description: 'Add a story by manually entering details'
   },
   {
     id: 'url',
     label: 'Import from URL',
-    href: '/import?mode=url',
+    href: '/import',
     description: 'Import a single story from a website'
   },
   {
@@ -52,8 +52,10 @@ export default function ImportLayout({ children, title, description }: ImportLay
 
   // Determine which tab is active
   const getActiveTab = () => {
-    if (pathname === '/import') {
-      return mode === 'url' ? 'url' : 'manual';
+    if (pathname === '/add-story') {
+      return 'manual';
+    } else if (pathname === '/import') {
+      return 'url';
     } else if (pathname === '/import/epub') {
       return 'epub';
     } else if (pathname === '/import/bulk') {

frontend/src/components/library/MinimalLayout.tsx

@@ -0,0 +1,220 @@
+'use client';
+
+import { useState } from 'react';
+import { Input } from '../ui/Input';
+import Button from '../ui/Button';
+import { Story, Tag } from '../../types/api';
+
+interface MinimalLayoutProps {
+  stories: Story[];
+  tags: Tag[];
+  searchQuery: string;
+  selectedTags: string[];
+  viewMode: 'grid' | 'list';
+  sortOption: string;
+  sortDirection: 'asc' | 'desc';
+  onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onTagToggle: (tagName: string) => void;
+  onViewModeChange: (mode: 'grid' | 'list') => void;
+  onSortChange: (option: string) => void;
+  onSortDirectionToggle: () => void;
+  onRandomStory: () => void;
+  onClearFilters: () => void;
+  children: React.ReactNode;
+}
+
+export default function MinimalLayout({
+  stories,
+  tags,
+  searchQuery,
+  selectedTags,
+  viewMode,
+  sortOption,
+  sortDirection,
+  onSearchChange,
+  onTagToggle,
+  onViewModeChange,
+  onSortChange,
+  onSortDirectionToggle,
+  onRandomStory,
+  onClearFilters,
+  children
+}: MinimalLayoutProps) {
+  const [tagBrowserOpen, setTagBrowserOpen] = useState(false);
+
+  const popularTags = tags.slice(0, 5);
+
+  const getSortDisplayText = () => {
+    const sortLabels: Record<string, string> = {
+      lastRead: 'Last Read',
+      createdAt: 'Date Added',
+      title: 'Title',
+      authorName: 'Author',
+      rating: 'Rating',
+    };
+    const direction = sortDirection === 'asc' ? '↑' : '↓';
+    return `Sort: ${sortLabels[sortOption] || sortOption} ${direction}`;
+  };
+
+  return (
+    <div className="max-w-6xl mx-auto p-10 max-md:p-5">
+      {/* Minimal Header */}
+      <div className="text-center mb-10">
+        <h1 className="text-4xl font-light theme-header mb-2">Story Library</h1>
+        <p className="theme-text text-lg mb-8">
+          Your personal collection of {stories.length} stories
+        </p>
+        <div>
+          <Button variant="primary" onClick={onRandomStory}>
+            🎲 Random Story
+          </Button>
+        </div>
+      </div>
+
+      {/* Floating Control Bar */}
+      <div className="sticky top-5 z-10 mb-8">
+        <div className="bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm border theme-border rounded-xl p-4 shadow-lg">
+          <div className="grid grid-cols-3 gap-6 items-center max-md:grid-cols-1 max-md:gap-4">
+            {/* Search */}
+            <div>
+              <Input
+                type="search"
+                placeholder="Search stories, authors, tags..."
+                value={searchQuery}
+                onChange={onSearchChange}
+                className="w-full"
+              />
+            </div>
+
+            {/* Sort & Clear */}
+            <div className="flex items-center gap-4">
+              <button
+                onClick={onSortDirectionToggle}
+                className="text-sm theme-text hover:theme-accent transition-colors border-none bg-transparent"
+              >
+                {getSortDisplayText()}
+              </button>
+              <span className="text-gray-300 dark:text-gray-600">|</span>
+              {(searchQuery || selectedTags.length > 0) && (
+                <Button variant="ghost" size="sm" onClick={onClearFilters}>
+                  Clear Filters
+                </Button>
+              )}
+            </div>
+
+            {/* View Toggle */}
+            <div className="justify-self-end max-md:justify-self-auto">
+              <div className="flex border theme-border rounded-lg overflow-hidden">
+                <Button
+                  variant={viewMode === 'list' ? 'primary' : 'ghost'}
+                  onClick={() => onViewModeChange('list')}
+                  className="rounded-none border-0 px-3 py-2"
+                >
+                  ☰ List
+                </Button>
+                <Button
+                  variant={viewMode === 'grid' ? 'primary' : 'ghost'}
+                  onClick={() => onViewModeChange('grid')}
+                  className="rounded-none border-0 px-3 py-2"
+                >
+                  ⊞ Grid
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Tag Filter */}
+      <div className="text-center mb-6">
+        <div className="inline-flex flex-wrap gap-2 justify-center mb-3">
+          <button
+            onClick={() => onClearFilters()}
+            className={`px-4 py-2 rounded-full text-sm font-medium transition-colors border ${
+              selectedTags.length === 0
+                ? 'bg-blue-500 text-white border-blue-500'
+                : 'bg-white dark:bg-gray-800 theme-text border-gray-300 dark:border-gray-600 hover:border-blue-500 hover:text-blue-500'
+            }`}
+          >
+            All
+          </button>
+          {popularTags.map((tag) => (
+            <button
+              key={tag.id}
+              onClick={() => onTagToggle(tag.name)}
+              className={`px-4 py-2 rounded-full text-sm font-medium transition-colors border ${
+                selectedTags.includes(tag.name)
+                  ? 'bg-blue-500 text-white border-blue-500'
+                  : 'bg-white dark:bg-gray-800 theme-text border-gray-300 dark:border-gray-600 hover:border-blue-500 hover:text-blue-500'
+              }`}
+            >
+              {tag.name}
+            </button>
+          ))}
+        </div>
+        <div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setTagBrowserOpen(true)}
+          >
+            Browse All Tags ({tags.length})
+          </Button>
+        </div>
+      </div>
+
+      {/* Content */}
+      {children}
+
+      {/* Tag Browser Modal */}
+      {tagBrowserOpen && (
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+          <div className="bg-white dark:bg-gray-800 rounded-xl p-6 max-w-2xl w-full max-h-[80vh] overflow-y-auto">
+            <div className="flex justify-between items-center mb-5">
+              <h3 className="text-xl font-semibold theme-header">Browse All Tags</h3>
+              <button
+                onClick={() => setTagBrowserOpen(false)}
+                className="text-2xl theme-text hover:theme-accent transition-colors"
+              >
+                ✕
+              </button>
+            </div>
+
+            <div className="mb-4">
+              <Input
+                type="text"
+                placeholder="Search tags..."
+                className="w-full"
+              />
+            </div>
+
+            <div className="grid grid-cols-4 gap-2 max-md:grid-cols-2">
+              {tags.map((tag) => (
+                <button
+                  key={tag.id}
+                  onClick={() => onTagToggle(tag.name)}
+                  className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors border text-left ${
+                    selectedTags.includes(tag.name)
+                      ? 'bg-blue-500 text-white border-blue-500'
+                      : 'bg-white dark:bg-gray-700 theme-text border-gray-300 dark:border-gray-600 hover:border-blue-500 hover:text-blue-500'
+                  }`}
+                >
+                  {tag.name} ({tag.storyCount})
+                </button>
+              ))}
+            </div>
+
+            <div className="flex justify-end gap-3 mt-6">
+              <Button variant="ghost" onClick={onClearFilters}>
+                Clear All
+              </Button>
+              <Button variant="primary" onClick={() => setTagBrowserOpen(false)}>
+                Apply Filters
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/library/SidebarLayout.tsx

@@ -0,0 +1,181 @@
+'use client';
+
+import { useState } from 'react';
+import { Input } from '../ui/Input';
+import Button from '../ui/Button';
+import { Story, Tag } from '../../types/api';
+
+interface SidebarLayoutProps {
+  stories: Story[];
+  tags: Tag[];
+  searchQuery: string;
+  selectedTags: string[];
+  viewMode: 'grid' | 'list';
+  sortOption: string;
+  sortDirection: 'asc' | 'desc';
+  onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onTagToggle: (tagName: string) => void;
+  onViewModeChange: (mode: 'grid' | 'list') => void;
+  onSortChange: (option: string) => void;
+  onSortDirectionToggle: () => void;
+  onRandomStory: () => void;
+  onClearFilters: () => void;
+  children: React.ReactNode;
+}
+
+export default function SidebarLayout({
+  stories,
+  tags,
+  searchQuery,
+  selectedTags,
+  viewMode,
+  sortOption,
+  sortDirection,
+  onSearchChange,
+  onTagToggle,
+  onViewModeChange,
+  onSortChange,
+  onSortDirectionToggle,
+  onRandomStory,
+  onClearFilters,
+  children
+}: SidebarLayoutProps) {
+  return (
+    <div className="flex min-h-screen">
+      {/* Left Sidebar */}
+      <div className="w-80 bg-white dark:bg-gray-800 p-4 border-r theme-border sticky top-0 h-screen overflow-y-auto max-md:w-full max-md:h-auto max-md:static max-md:border-r-0 max-md:border-b max-md:max-h-96">
+        {/* Random Story Button */}
+        <div className="mb-6">
+          <Button
+            onClick={onRandomStory}
+            variant="primary"
+            className="w-full"
+          >
+            🎲 Random Story
+          </Button>
+        </div>
+
+        {/* Header */}
+        <div className="mb-6">
+          <h1 className="text-2xl font-bold theme-header">Your Library</h1>
+          <p className="theme-text mt-1">{stories.length} stories total</p>
+        </div>
+
+        {/* Search */}
+        <div className="mb-6">
+          <Input
+            type="search"
+            placeholder="Search stories..."
+            value={searchQuery}
+            onChange={onSearchChange}
+            className="w-full"
+          />
+        </div>
+
+        {/* View Toggle */}
+        <div className="mb-6">
+          <div className="flex gap-2">
+            <Button
+              variant={viewMode === 'grid' ? 'primary' : 'ghost'}
+              onClick={() => onViewModeChange('grid')}
+              className="flex-1"
+            >
+              ⊞ Grid
+            </Button>
+            <Button
+              variant={viewMode === 'list' ? 'primary' : 'ghost'}
+              onClick={() => onViewModeChange('list')}
+              className="flex-1"
+            >
+              ☰ List
+            </Button>
+          </div>
+        </div>
+
+        {/* Sort Controls */}
+        <div className="mb-6 theme-card p-4 rounded-lg">
+          <h3 className="text-sm font-medium theme-header mb-3">Sort By</h3>
+          <div className="flex gap-2 items-center">
+            <select
+              value={sortOption}
+              onChange={(e) => onSortChange(e.target.value)}
+              className="flex-1 px-3 py-2 border rounded-lg theme-card border-gray-300 dark:border-gray-600"
+            >
+              <option value="lastRead">Last Read</option>
+              <option value="createdAt">Date Added</option>
+              <option value="title">Title</option>
+              <option value="authorName">Author</option>
+              <option value="rating">Rating</option>
+            </select>
+            <Button
+              variant="ghost"
+              onClick={onSortDirectionToggle}
+              className="px-3 py-2"
+              title={`Toggle sort direction (currently ${sortDirection === 'asc' ? 'ascending' : 'descending'})`}
+            >
+              {sortDirection === 'asc' ? '↑' : '↓'}
+            </Button>
+          </div>
+        </div>
+
+        {/* Tag Filters */}
+        <div className="theme-card p-4 rounded-lg">
+          <h3 className="text-sm font-medium theme-header mb-3">Filter by Tags</h3>
+          <div className="mb-3">
+            <input
+              type="text"
+              placeholder="Search tags..."
+              className="w-full px-2 py-1 text-xs border rounded theme-card border-gray-300 dark:border-gray-600"
+            />
+          </div>
+          <div className="max-h-48 overflow-y-auto border theme-border rounded p-2">
+            <div className="space-y-1">
+              <label className="flex items-center gap-2 py-1 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={selectedTags.length === 0}
+                  onChange={() => onClearFilters()}
+                />
+                <span className="text-xs">All Stories ({stories.length})</span>
+              </label>
+              {tags.map((tag) => (
+                <label
+                  key={tag.id}
+                  className="flex items-center gap-2 py-1 cursor-pointer"
+                >
+                  <input
+                    type="checkbox"
+                    checked={selectedTags.includes(tag.name)}
+                    onChange={() => onTagToggle(tag.name)}
+                  />
+                  <span className="text-xs">
+                    {tag.name} ({tag.storyCount})
+                  </span>
+                </label>
+              ))}
+              {tags.length > 10 && (
+                <div className="text-center text-xs text-gray-500 py-2">
+                  ... and {tags.length - 10} more tags
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="mt-2">
+            <Button
+              variant="ghost"
+              onClick={onClearFilters}
+              className="w-full text-xs py-1"
+            >
+              Clear All
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 p-4 max-md:p-4">
+        {children}
+      </div>
+    </div>
+  );
+}

frontend/src/components/library/ToolbarLayout.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import { useState } from 'react';
+import { Input } from '../ui/Input';
+import Button from '../ui/Button';
+import { Story, Tag } from '../../types/api';
+
+interface ToolbarLayoutProps {
+  stories: Story[];
+  tags: Tag[];
+  searchQuery: string;
+  selectedTags: string[];
+  viewMode: 'grid' | 'list';
+  sortOption: string;
+  sortDirection: 'asc' | 'desc';
+  onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onTagToggle: (tagName: string) => void;
+  onViewModeChange: (mode: 'grid' | 'list') => void;
+  onSortChange: (option: string) => void;
+  onSortDirectionToggle: () => void;
+  onRandomStory: () => void;
+  onClearFilters: () => void;
+  children: React.ReactNode;
+}
+
+export default function ToolbarLayout({
+  stories,
+  tags,
+  searchQuery,
+  selectedTags,
+  viewMode,
+  sortOption,
+  sortDirection,
+  onSearchChange,
+  onTagToggle,
+  onViewModeChange,
+  onSortChange,
+  onSortDirectionToggle,
+  onRandomStory,
+  onClearFilters,
+  children
+}: ToolbarLayoutProps) {
+  const [tagSearchExpanded, setTagSearchExpanded] = useState(false);
+
+  const popularTags = tags.slice(0, 6);
+  const remainingTagsCount = Math.max(0, tags.length - 6);
+
+  return (
+    <div className="max-w-7xl mx-auto p-6 max-md:p-4">
+      {/* Integrated Header */}
+      <div className="theme-card theme-shadow rounded-xl p-6 mb-6 relative max-md:p-4">
+        {/* Title and Random Story Button */}
+        <div className="flex justify-between items-start mb-6 max-md:flex-col max-md:gap-4">
+          <div>
+            <h1 className="text-3xl font-bold theme-header">Your Story Library</h1>
+            <p className="theme-text mt-1">{stories.length} stories in your collection</p>
+          </div>
+          <div className="max-md:self-end">
+            <Button variant="secondary" onClick={onRandomStory}>
+              🎲 Random Story
+            </Button>
+          </div>
+        </div>
+
+        {/* Integrated Toolbar */}
+        <div className="grid grid-cols-4 gap-5 items-center mb-5 max-md:grid-cols-1 max-md:gap-3">
+          {/* Search */}
+          <div className="col-span-2 max-md:col-span-1">
+            <Input
+              type="search"
+              placeholder="Search by title, author, or tags..."
+              value={searchQuery}
+              onChange={onSearchChange}
+              className="w-full"
+            />
+          </div>
+
+          {/* Sort */}
+          <div>
+            <select
+              value={`${sortOption}_${sortDirection}`}
+              onChange={(e) => {
+                const [option, direction] = e.target.value.split('_');
+                onSortChange(option);
+                if (sortDirection !== direction) {
+                  onSortDirectionToggle();
+                }
+              }}
+              className="w-full px-3 py-2 border rounded-lg theme-card border-gray-300 dark:border-gray-600"
+            >
+              <option value="lastRead_desc">Sort: Last Read ↓</option>
+              <option value="lastRead_asc">Sort: Last Read ↑</option>
+              <option value="createdAt_desc">Sort: Date Added ↓</option>
+              <option value="createdAt_asc">Sort: Date Added ↑</option>
+              <option value="title_asc">Sort: Title ↑</option>
+              <option value="title_desc">Sort: Title ↓</option>
+              <option value="authorName_asc">Sort: Author ↑</option>
+              <option value="authorName_desc">Sort: Author ↓</option>
+              <option value="rating_desc">Sort: Rating ↓</option>
+              <option value="rating_asc">Sort: Rating ↑</option>
+            </select>
+          </div>
+
+          {/* View Toggle & Clear */}
+          <div className="flex gap-2">
+            <div className="flex border theme-border rounded-lg overflow-hidden">
+              <Button
+                variant={viewMode === 'grid' ? 'primary' : 'ghost'}
+                onClick={() => onViewModeChange('grid')}
+                className="rounded-none border-0"
+              >
+                ⊞ Grid
+              </Button>
+              <Button
+                variant={viewMode === 'list' ? 'primary' : 'ghost'}
+                onClick={() => onViewModeChange('list')}
+                className="rounded-none border-0"
+              >
+                ☰ List
+              </Button>
+            </div>
+            {(searchQuery || selectedTags.length > 0) && (
+              <Button variant="ghost" onClick={onClearFilters}>
+                Clear
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {/* Tag Filter Bar */}
+        <div className="border-t theme-border pt-5">
+          <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
+                  ? 'bg-blue-500 text-white'
+                  : 'bg-gray-100 dark:bg-gray-700 theme-text hover:bg-blue-100 dark:hover:bg-blue-900'
+              }`}
+            >
+              All Stories
+            </button>
+            {popularTags.map((tag) => (
+              <button
+                key={tag.id}
+                onClick={() => onTagToggle(tag.name)}
+                className={`px-3 py-1 rounded-full text-xs font-medium transition-colors ${
+                  selectedTags.includes(tag.name)
+                    ? 'bg-blue-500 text-white'
+                    : 'bg-gray-100 dark:bg-gray-700 theme-text hover:bg-blue-100 dark:hover:bg-blue-900'
+                }`}
+              >
+                {tag.name} ({tag.storyCount})
+              </button>
+            ))}
+            {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>
+            )}
+            <div className="ml-auto text-sm theme-text">
+              Showing {stories.length} stories
+            </div>
+          </div>
+
+          {/* Expandable Tag Search */}
+          {tagSearchExpanded && (
+            <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..."
+                  className="flex-1"
+                />
+                <Button variant="secondary">Search</Button>
+                <Button
+                  variant="ghost"
+                  onClick={() => setTagSearchExpanded(false)}
+                >
+                  Close
+                </Button>
+              </div>
+              <div className="grid grid-cols-4 gap-2 max-h-40 overflow-y-auto max-md:grid-cols-2">
+                {tags.slice(6).map((tag) => (
+                  <button
+                    key={tag.id}
+                    onClick={() => onTagToggle(tag.name)}
+                    className={`px-2 py-1 rounded text-xs font-medium transition-colors ${
+                      selectedTags.includes(tag.name)
+                        ? 'bg-blue-500 text-white'
+                        : 'bg-white dark:bg-gray-700 theme-text hover:bg-blue-100 dark:hover:bg-blue-900'
+                    }`}
+                  >
+                    {tag.name} ({tag.storyCount})
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Content */}
+      {children}
+    </div>
+  );
+}

frontend/src/hooks/useLibraryLayout.ts

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+
+export type LibraryLayoutType = 'sidebar' | 'toolbar' | 'minimal';
+
+const LAYOUT_STORAGE_KEY = 'storycove-library-layout';
+
+export function useLibraryLayout() {
+  const [layout, setLayoutState] = useState<LibraryLayoutType>('sidebar');
+
+  // Load layout from localStorage on mount
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const savedLayout = localStorage.getItem(LAYOUT_STORAGE_KEY) as LibraryLayoutType;
+      if (savedLayout && ['sidebar', 'toolbar', 'minimal'].includes(savedLayout)) {
+        setLayoutState(savedLayout);
+      }
+    }
+  }, []);
+
+  // Save layout to localStorage when it changes
+  const setLayout = (newLayout: LibraryLayoutType) => {
+    setLayoutState(newLayout);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(LAYOUT_STORAGE_KEY, newLayout);
+    }
+  };
+
+  return { layout, setLayout };
+}