Story Collections Feature

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