Story Collections Feature

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">