Series to Collection Function

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

@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import Link from 'next/link';
 import Image from 'next/image';
-import { storyApi, seriesApi, audioCoveApi, getImageUrl } from '../../../../lib/api';
+import { storyApi, seriesApi, audioCoveApi, collectionApi, getImageUrl } from '../../../../lib/api';
 import { Story, Collection } from '../../../../types/api';
 import AppLayout from '../../../../components/layout/AppLayout';
 import Button from '../../../../components/ui/Button';
@@ -26,6 +26,7 @@ export default function StoryDetailPage() {
   const [isExporting, setIsExporting] = useState(false);
   const [isSendingToAudioCove, setIsSendingToAudioCove] = useState(false);
   const [audioCovedSuccess, setAudioCovedSuccess] = useState(false);
+  const [isCreatingCollection, setIsCreatingCollection] = useState(false);
 
   useEffect(() => {
     const loadStoryData = async () => {
@@ -133,6 +134,20 @@ export default function StoryDetailPage() {
     }
   };
 
+  const handleCreateCollectionFromSeries = async () => {
+    if (!story?.seriesId || isCreatingCollection) return;
+    setIsCreatingCollection(true);
+    try {
+      const result = await seriesApi.createCollectionFromSeries(story.seriesId);
+      router.push(`/collections/${result.collectionId}`);
+    } catch (error: any) {
+      const message = error?.response?.data || 'Failed to create collection from series.';
+      alert(message);
+    } finally {
+      setIsCreatingCollection(false);
+    }
+  };
+
   const formatDate = (dateString: string) => {
     return new Date(dateString).toLocaleDateString('en-US', {
       year: 'numeric',
@@ -319,6 +334,16 @@ export default function StoryDetailPage() {
                     </div>
                   </div>
                 )}
+                <div className="mt-4">
+                  <Button
+                    onClick={handleCreateCollectionFromSeries}
+                    variant="ghost"
+                    size="sm"
+                    disabled={isCreatingCollection}
+                  >
+                    {isCreatingCollection ? 'Creating...' : '📚 Create Collection from Series'}
+                  </Button>
+                </div>
               </div>
             )}