Series auto complete

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

@@ -10,6 +10,7 @@ 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 SeriesSelector from '../../components/stories/SeriesSelector';
 import { storyApi, authorApi } from '../../lib/api';
 
 export default function AddStoryPage() {
@@ -22,6 +23,7 @@ export default function AddStoryPage() {
     sourceUrl: '',
     tags: [] as string[],
     seriesName: '',
+    seriesId: undefined as string | undefined,
     volume: '',
   });
   
@@ -208,6 +210,19 @@ export default function AddStoryPage() {
     }
   };
 
+  const handleSeriesChange = (seriesName: string, seriesId?: string) => {
+    setFormData(prev => ({ 
+      ...prev, 
+      seriesName,
+      seriesId: seriesId // This will be undefined if creating new series, which clears the existing ID
+    }));
+    
+    // Clear error when user changes series
+    if (errors.seriesName) {
+      setErrors(prev => ({ ...prev, seriesName: '' }));
+    }
+  };
+
   const validateForm = () => {
     const newErrors: Record<string, string> = {};
 
@@ -252,7 +267,8 @@ export default function AddStoryPage() {
         contentHtml: formData.contentHtml,
         sourceUrl: formData.sourceUrl || undefined,
         volume: formData.seriesName ? parseInt(formData.volume) : undefined,
-        seriesName: formData.seriesName || undefined,
+        // Send seriesId if we have it (existing series), otherwise send seriesName (new series)
+        ...(formData.seriesId ? { seriesId: formData.seriesId } : { 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,
@@ -405,12 +421,13 @@ export default function AddStoryPage() {
 
         {/* Series and Volume */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <Input
+          <SeriesSelector
             label="Series (optional)"
             value={formData.seriesName}
-            onChange={handleInputChange('seriesName')}
-            placeholder="Enter series name if part of a series"
+            onChange={handleSeriesChange}
+            placeholder="Select or enter series name if part of a series"
             error={errors.seriesName}
+            authorId={formData.authorId}
           />
           
           <Input