Story Collections Feature

frontend/src/app/collections/[id]/edit/page.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { collectionApi } from '../../../../lib/api';
+import { Collection } from '../../../../types/api';
+import AppLayout from '../../../../components/layout/AppLayout';
+import CollectionForm from '../../../../components/collections/CollectionForm';
+import LoadingSpinner from '../../../../components/ui/LoadingSpinner';
+
+export default function EditCollectionPage() {
+  const params = useParams();
+  const router = useRouter();
+  const collectionId = params.id as string;
+
+  const [collection, setCollection] = useState<Collection | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const loadCollection = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        const data = await collectionApi.getCollection(collectionId);
+        setCollection(data);
+      } catch (err: any) {
+        console.error('Failed to load collection:', err);
+        setError(err.response?.data?.message || 'Failed to load collection');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (collectionId) {
+      loadCollection();
+    }
+  }, [collectionId]);
+
+  const handleSubmit = async (formData: {
+    name: string;
+    description?: string;
+    tags?: string[];
+    storyIds?: string[];
+    coverImage?: File;
+  }) => {
+    if (!collection) return;
+
+    try {
+      setSaving(true);
+      setError(null);
+
+      // Update basic info
+      await collectionApi.updateCollection(collection.id, {
+        name: formData.name,
+        description: formData.description,
+        tagNames: formData.tags,
+      });
+
+      // Upload cover image if provided
+      if (formData.coverImage) {
+        await collectionApi.uploadCover(collection.id, formData.coverImage);
+      }
+
+      // Redirect back to collection detail
+      router.push(`/collections/${collection.id}`);
+    } catch (err: any) {
+      console.error('Failed to update collection:', err);
+      setError(err.response?.data?.message || 'Failed to update collection');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleCancel = () => {
+    router.push(`/collections/${collectionId}`);
+  };
+
+  if (loading) {
+    return (
+      <AppLayout>
+        <div className="flex items-center justify-center py-20">
+          <LoadingSpinner size="lg" />
+        </div>
+      </AppLayout>
+    );
+  }
+
+  if (error || !collection) {
+    return (
+      <AppLayout>
+        <div className="text-center py-20">
+          <div className="text-red-600 text-lg mb-4">
+            {error || 'Collection not found'}
+          </div>
+          <button
+            onClick={() => router.push('/collections')}
+            className="theme-accent hover:underline"
+          >
+            Back to Collections
+          </button>
+        </div>
+      </AppLayout>
+    );
+  }
+
+  const initialData = {
+    name: collection.name,
+    description: collection.description,
+    tags: collection.tags?.map(tag => tag.name) || [],
+    storyIds: collection.collectionStories?.map(cs => cs.story.id) || [],
+    coverImagePath: collection.coverImagePath,
+  };
+
+  return (
+    <AppLayout>
+      <div className="max-w-2xl mx-auto">
+        <div className="mb-6">
+          <h1 className="text-3xl font-bold theme-header">Edit Collection</h1>
+          <p className="theme-text mt-2">
+            Update your collection details and organization.
+          </p>
+        </div>
+
+        {error && (
+          <div className="mb-6 p-4 bg-red-100 border border-red-300 text-red-700 rounded-lg">
+            {error}
+          </div>
+        )}
+
+        <CollectionForm
+          initialData={initialData}
+          onSubmit={handleSubmit}
+          onCancel={handleCancel}
+          loading={saving}
+          submitLabel="Update Collection"
+        />
+      </div>
+    </AppLayout>
+  );
+}

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

@@ -0,0 +1,85 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { collectionApi } from '../../../lib/api';
+import { Collection } from '../../../types/api';
+import AppLayout from '../../../components/layout/AppLayout';
+import CollectionDetailView from '../../../components/collections/CollectionDetailView';
+import LoadingSpinner from '../../../components/ui/LoadingSpinner';
+
+export default function CollectionDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const collectionId = params.id as string;
+
+  const [collection, setCollection] = useState<Collection | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadCollection = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await collectionApi.getCollection(collectionId);
+      setCollection(data);
+    } catch (err: any) {
+      console.error('Failed to load collection:', err);
+      setError(err.response?.data?.message || 'Failed to load collection');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (collectionId) {
+      loadCollection();
+    }
+  }, [collectionId]);
+
+  const handleCollectionUpdate = () => {
+    loadCollection();
+  };
+
+  const handleCollectionDelete = () => {
+    router.push('/collections');
+  };
+
+  if (loading) {
+    return (
+      <AppLayout>
+        <div className="flex items-center justify-center py-20">
+          <LoadingSpinner size="lg" />
+        </div>
+      </AppLayout>
+    );
+  }
+
+  if (error || !collection) {
+    return (
+      <AppLayout>
+        <div className="text-center py-20">
+          <div className="text-red-600 text-lg mb-4">
+            {error || 'Collection not found'}
+          </div>
+          <button
+            onClick={() => router.push('/collections')}
+            className="theme-accent hover:underline"
+          >
+            Back to Collections
+          </button>
+        </div>
+      </AppLayout>
+    );
+  }
+
+  return (
+    <AppLayout>
+      <CollectionDetailView
+        collection={collection}
+        onUpdate={handleCollectionUpdate}
+        onDelete={handleCollectionDelete}
+      />
+    </AppLayout>
+  );
+}

frontend/src/app/collections/[id]/read/[storyId]/page.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { collectionApi } from '../../../../../lib/api';
+import { StoryWithCollectionContext } from '../../../../../types/api';
+import AppLayout from '../../../../../components/layout/AppLayout';
+import CollectionReadingView from '../../../../../components/collections/CollectionReadingView';
+import LoadingSpinner from '../../../../../components/ui/LoadingSpinner';
+
+export default function CollectionReadingPage() {
+  const params = useParams();
+  const router = useRouter();
+  const collectionId = params.id as string;
+  const storyId = params.storyId as string;
+
+  const [data, setData] = useState<StoryWithCollectionContext | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const loadStoryWithContext = async () => {
+      if (!collectionId || !storyId) return;
+
+      try {
+        setLoading(true);
+        setError(null);
+        const result = await collectionApi.getStoryWithCollectionContext(collectionId, storyId);
+        setData(result);
+      } catch (err: any) {
+        console.error('Failed to load story with collection context:', err);
+        setError(err.response?.data?.message || 'Failed to load story');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadStoryWithContext();
+  }, [collectionId, storyId]);
+
+  const handleNavigate = (newStoryId: string) => {
+    router.push(`/collections/${collectionId}/read/${newStoryId}`);
+  };
+
+  if (loading) {
+    return (
+      <AppLayout>
+        <div className="flex items-center justify-center py-20">
+          <LoadingSpinner size="lg" />
+        </div>
+      </AppLayout>
+    );
+  }
+
+  if (error || !data) {
+    return (
+      <AppLayout>
+        <div className="text-center py-20">
+          <div className="text-red-600 text-lg mb-4">
+            {error || 'Story not found'}
+          </div>
+          <button
+            onClick={() => router.push(`/collections/${collectionId}`)}
+            className="theme-accent hover:underline"
+          >
+            Back to Collection
+          </button>
+        </div>
+      </AppLayout>
+    );
+  }
+
+  return (
+    <AppLayout>
+      <CollectionReadingView
+        data={data}
+        onNavigate={handleNavigate}
+        onBackToCollection={() => router.push(`/collections/${collectionId}`)}
+      />
+    </AppLayout>
+  );
+}

frontend/src/app/collections/new/page.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { collectionApi } from '../../../lib/api';
+import AppLayout from '../../../components/layout/AppLayout';
+import CollectionForm from '../../../components/collections/CollectionForm';
+import { Collection } from '../../../types/api';
+
+export default function NewCollectionPage() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  const handleSubmit = async (formData: {
+    name: string;
+    description?: string;
+    tags?: string[];
+    storyIds?: string[];
+    coverImage?: File;
+  }) => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      let collection: Collection;
+      
+      if (formData.coverImage) {
+        collection = await collectionApi.createCollectionWithImage({
+          name: formData.name,
+          description: formData.description,
+          tags: formData.tags,
+          storyIds: formData.storyIds,
+          coverImage: formData.coverImage,
+        });
+      } else {
+        collection = await collectionApi.createCollection({
+          name: formData.name,
+          description: formData.description,
+          tagNames: formData.tags,
+          storyIds: formData.storyIds,
+        });
+      }
+
+      // Redirect to the new collection's detail page
+      router.push(`/collections/${collection.id}`);
+    } catch (err: any) {
+      console.error('Failed to create collection:', err);
+      setError(err.response?.data?.message || 'Failed to create collection');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    router.push('/collections');
+  };
+
+  return (
+    <AppLayout>
+      <div className="max-w-2xl mx-auto">
+        <div className="mb-6">
+          <h1 className="text-3xl font-bold theme-header">Create New Collection</h1>
+          <p className="theme-text mt-2">
+            Organize your stories into a curated collection for better reading experience.
+          </p>
+        </div>
+
+        {error && (
+          <div className="mb-6 p-4 bg-red-100 border border-red-300 text-red-700 rounded-lg">
+            {error}
+          </div>
+        )}
+
+        <CollectionForm
+          onSubmit={handleSubmit}
+          onCancel={handleCancel}
+          loading={loading}
+          submitLabel="Create Collection"
+        />
+      </div>
+    </AppLayout>
+  );
+}

frontend/src/app/collections/page.tsx

@@ -0,0 +1,286 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { collectionApi, tagApi } from '../../lib/api';
+import { Collection, Tag } from '../../types/api';
+import AppLayout from '../../components/layout/AppLayout';
+import { Input } from '../../components/ui/Input';
+import Button from '../../components/ui/Button';
+import CollectionGrid from '../../components/collections/CollectionGrid';
+import TagFilter from '../../components/stories/TagFilter';
+import LoadingSpinner from '../../components/ui/LoadingSpinner';
+
+type ViewMode = 'grid' | 'list';
+
+export default function CollectionsPage() {
+  const [collections, setCollections] = useState<Collection[]>([]);
+  const [tags, setTags] = useState<Tag[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [viewMode, setViewMode] = useState<ViewMode>('grid');
+  const [showArchived, setShowArchived] = useState(false);
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(20);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalCollections, setTotalCollections] = useState(0);
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+
+  // Load tags for filtering
+  useEffect(() => {
+    const loadTags = async () => {
+      try {
+        const tagsResult = await tagApi.getTags({ page: 0, size: 1000 });
+        setTags(tagsResult?.content || []);
+      } catch (error) {
+        console.error('Failed to load tags:', error);
+      }
+    };
+    
+    loadTags();
+  }, []);
+
+  // Load collections with search and filters
+  useEffect(() => {
+    const debounceTimer = setTimeout(() => {
+      const loadCollections = async () => {
+        try {
+          setLoading(true);
+          
+          const result = await collectionApi.getCollections({
+            page: page,
+            limit: pageSize,
+            search: searchQuery.trim() || undefined,
+            tags: selectedTags.length > 0 ? selectedTags : undefined,
+            archived: showArchived,
+          });
+          
+          setCollections(result?.results || []);
+          setTotalPages(Math.ceil((result?.totalHits || 0) / pageSize));
+          setTotalCollections(result?.totalHits || 0);
+        } catch (error) {
+          console.error('Failed to load collections:', error);
+          setCollections([]);
+        } finally {
+          setLoading(false);
+        }
+      };
+      
+      loadCollections();
+    }, searchQuery ? 300 : 0); // Debounce search, but not other changes
+
+    return () => clearTimeout(debounceTimer);
+  }, [searchQuery, selectedTags, page, pageSize, showArchived, 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;
+    });
+  };
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+    resetPage();
+  };
+
+  const handlePageSizeChange = (newSize: number) => {
+    setPageSize(newSize);
+    resetPage();
+  };
+
+  const clearFilters = () => {
+    setSearchQuery('');
+    setSelectedTags([]);
+    setShowArchived(false);
+    resetPage();
+  };
+
+  const handleCollectionUpdate = () => {
+    // Trigger reload by incrementing refresh trigger
+    setRefreshTrigger(prev => prev + 1);
+  };
+
+  if (loading && collections.length === 0) {
+    return (
+      <AppLayout>
+        <div className="flex items-center justify-center py-20">
+          <LoadingSpinner size="lg" />
+        </div>
+      </AppLayout>
+    );
+  }
+
+  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">Collections</h1>
+            <p className="theme-text mt-1">
+              {totalCollections} {totalCollections === 1 ? 'collection' : 'collections'}
+              {searchQuery || selectedTags.length > 0 || showArchived ? ` found` : ` total`}
+            </p>
+          </div>
+          
+          <Button href="/collections/new">
+            Create New Collection
+          </Button>
+        </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">
+              <Input
+                type="search"
+                placeholder="Search collections by name or description..."
+                value={searchQuery}
+                onChange={handleSearchChange}
+                className="w-full"
+              />
+            </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>
+
+          {/* Filters and Controls */}
+          <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center">
+            {/* Page Size Selector */}
+            <div className="flex items-center gap-2">
+              <label className="theme-text font-medium text-sm">Show:</label>
+              <select
+                value={pageSize}
+                onChange={(e) => handlePageSizeChange(Number(e.target.value))}
+                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={10}>10</option>
+                <option value={20}>20</option>
+                <option value={50}>50</option>
+              </select>
+            </div>
+
+            {/* Archive Toggle */}
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={showArchived}
+                onChange={(e) => {
+                  setShowArchived(e.target.checked);
+                  resetPage();
+                }}
+                className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+              />
+              <span className="theme-text text-sm">Show archived</span>
+            </label>
+
+            {/* Clear Filters */}
+            {(searchQuery || selectedTags.length > 0 || showArchived) && (
+              <Button variant="ghost" size="sm" onClick={clearFilters}>
+                Clear Filters
+              </Button>
+            )}
+          </div>
+
+          {/* Tag Filter */}
+          <TagFilter
+            tags={tags}
+            selectedTags={selectedTags}
+            onTagToggle={handleTagToggle}
+          />
+        </div>
+
+        {/* Collections Display */}
+        <CollectionGrid
+          collections={collections}
+          viewMode={viewMode}
+          onUpdate={handleCollectionUpdate}
+        />
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="flex justify-center items-center gap-4 mt-8">
+            <Button
+              variant="ghost"
+              onClick={() => setPage(page - 1)}
+              disabled={page === 0}
+            >
+              Previous
+            </Button>
+            
+            <div className="flex items-center gap-2">
+              <span className="theme-text text-sm">Page</span>
+              <input
+                type="number"
+                min={1}
+                max={totalPages}
+                value={page + 1}
+                onChange={(e) => {
+                  const newPage = Math.max(0, Math.min(totalPages - 1, parseInt(e.target.value) - 1));
+                  if (!isNaN(newPage)) {
+                    setPage(newPage);
+                  }
+                }}
+                className="w-16 px-2 py-1 text-center rounded theme-card theme-text theme-border border focus:outline-none focus:ring-2 focus:ring-theme-accent"
+              />
+              <span className="theme-text text-sm">of {totalPages}</span>
+            </div>
+            
+            <Button
+              variant="ghost"
+              onClick={() => setPage(page + 1)}
+              disabled={page >= totalPages - 1}
+            >
+              Next
+            </Button>
+          </div>
+        )}
+
+        {/* Loading Overlay */}
+        {loading && collections.length > 0 && (
+          <div className="fixed inset-0 bg-black bg-opacity-20 flex items-center justify-center z-50">
+            <div className="theme-card p-4 rounded-lg">
+              <LoadingSpinner size="md" />
+            </div>
+          </div>
+        )}
+      </div>
+    </AppLayout>
+  );
+}

frontend/src/app/library/page.tsx

@@ -6,7 +6,7 @@ import { Story, Tag } from '../../types/api';
 import AppLayout from '../../components/layout/AppLayout';
 import { Input } from '../../components/ui/Input';
 import Button from '../../components/ui/Button';
-import StoryCard from '../../components/stories/StoryCard';
+import StoryMultiSelect from '../../components/stories/StoryMultiSelect';
 import TagFilter from '../../components/stories/TagFilter';
 import LoadingSpinner from '../../components/ui/LoadingSpinner';
 
@@ -242,20 +242,12 @@ export default function LibraryPage() {
             )}
           </div>
         ) : (
-          <div className={
-            viewMode === 'grid'
-              ? 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6'
-              : 'space-y-4'
-          }>
-            {stories.map((story) => (
-              <StoryCard
-                key={story.id}
-                story={story}
-                viewMode={viewMode}
-                onUpdate={handleStoryUpdate}
-              />
-            ))}
-          </div>
+          <StoryMultiSelect
+            stories={stories}
+            viewMode={viewMode}
+            onUpdate={handleStoryUpdate}
+            allowMultiSelect={true}
+          />
         )}
 
         {/* Pagination */}

frontend/src/app/stories/[id]/detail/page.tsx

@@ -5,7 +5,7 @@ import { useParams, useRouter } from 'next/navigation';
 import Link from 'next/link';
 import Image from 'next/image';
 import { storyApi, seriesApi, getImageUrl } from '../../../../lib/api';
-import { Story } from '../../../../types/api';
+import { Story, Collection } from '../../../../types/api';
 import AppLayout from '../../../../components/layout/AppLayout';
 import Button from '../../../../components/ui/Button';
 import LoadingSpinner from '../../../../components/ui/LoadingSpinner';
@@ -17,6 +17,7 @@ export default function StoryDetailPage() {
   
   const [story, setStory] = useState<Story | null>(null);
   const [seriesStories, setSeriesStories] = useState<Story[]>([]);
+  const [collections, setCollections] = useState<Collection[]>([]);
   const [loading, setLoading] = useState(true);
   const [updating, setUpdating] = useState(false);
 
@@ -32,6 +33,10 @@ export default function StoryDetailPage() {
           const seriesData = await seriesApi.getSeriesStories(storyData.seriesId);
           setSeriesStories(seriesData);
         }
+        
+        // Load collections that contain this story
+        const collectionsData = await storyApi.getStoryCollections(storyId);
+        setCollections(collectionsData);
       } catch (error) {
         console.error('Failed to load story data:', error);
         router.push('/library');
@@ -250,6 +255,57 @@ export default function StoryDetailPage() {
               </div>
             )}
 
+            {/* Collections */}
+            {collections.length > 0 && (
+              <div className="theme-card theme-shadow rounded-lg p-4">
+                <h3 className="font-semibold theme-header mb-3">
+                  Part of Collections ({collections.length})
+                </h3>
+                <div className="space-y-2">
+                  {collections.map((collection) => (
+                    <Link
+                      key={collection.id}
+                      href={`/collections/${collection.id}`}
+                      className="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                    >
+                      <div className="flex items-center gap-3">
+                        {collection.coverImagePath ? (
+                          <img
+                            src={getImageUrl(collection.coverImagePath)}
+                            alt={`${collection.name} cover`}
+                            className="w-8 h-10 object-cover rounded"
+                          />
+                        ) : (
+                          <div className="w-8 h-10 bg-gradient-to-br from-blue-100 to-purple-100 rounded flex items-center justify-center">
+                            <span className="text-xs font-bold text-gray-600">
+                              {collection.storyCount}
+                            </span>
+                          </div>
+                        )}
+                        <div className="flex-1 min-w-0">
+                          <h4 className="font-medium theme-header truncate">
+                            {collection.name}
+                          </h4>
+                          <p className="text-sm theme-text opacity-70">
+                            {collection.storyCount} {collection.storyCount === 1 ? 'story' : 'stories'}
+                            {collection.estimatedReadingTime && (
+                              <span> • ~{Math.ceil(collection.estimatedReadingTime / 60)}h reading</span>
+                            )}
+                          </p>
+                        </div>
+                        {collection.rating && (
+                          <div className="flex-shrink-0">
+                            <span className="text-yellow-400">★</span>
+                            <span className="text-sm theme-text ml-1">{collection.rating}</span>
+                          </div>
+                        )}
+                      </div>
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            )}
+
             {/* Summary */}
             {story.summary && (
               <div className="theme-card theme-shadow rounded-lg p-6">