Changing Authors

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

@@ -8,6 +8,7 @@ import Button from '../../../../components/ui/Button';
 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 LoadingSpinner from '../../../../components/ui/LoadingSpinner';
 import { storyApi } from '../../../../lib/api';
 import { Story } from '../../../../types/api';
@@ -26,6 +27,7 @@ export default function EditStoryPage() {
     title: '',
     summary: '',
     authorName: '',
+    authorId: undefined as string | undefined,
     contentHtml: '',
     sourceUrl: '',
     tags: [] as string[],
@@ -47,6 +49,7 @@ export default function EditStoryPage() {
           title: storyData.title,
           summary: storyData.summary || '',
           authorName: storyData.authorName,
+          authorId: storyData.authorId,
           contentHtml: storyData.contentHtml,
           sourceUrl: storyData.sourceUrl || '',
           tags: storyData.tags?.map(tag => tag.name) || [],
@@ -91,6 +94,19 @@ export default function EditStoryPage() {
     setFormData(prev => ({ ...prev, tags }));
   };
 
+  const handleAuthorChange = (authorName: string, authorId?: string) => {
+    setFormData(prev => ({ 
+      ...prev, 
+      authorName,
+      authorId: authorId // This will be undefined if creating new author, which clears the existing ID
+    }));
+    
+    // Clear error when user changes author
+    if (errors.authorName) {
+      setErrors(prev => ({ ...prev, authorName: '' }));
+    }
+  };
+
   const validateForm = () => {
     const newErrors: Record<string, string> = {};
 
@@ -136,7 +152,8 @@ export default function EditStoryPage() {
         sourceUrl: formData.sourceUrl || undefined,
         volume: formData.seriesName ? parseInt(formData.volume) : undefined,
         seriesName: formData.seriesName || undefined,
-        authorId: story.authorId, // Keep existing author ID
+        // Send authorId if we have it (existing author), otherwise send authorName (new/changed author)
+        ...(formData.authorId ? { authorId: formData.authorId } : { authorName: formData.authorName }),
         tagNames: formData.tags,
       };
 
@@ -216,18 +233,15 @@ export default function EditStoryPage() {
             required
           />
 
-          {/* Author - Display only, not editable in edit mode for simplicity */}
-          <Input
+          {/* Author Selector */}
+          <AuthorSelector
             label="Author *"
             value={formData.authorName}
-            onChange={handleInputChange('authorName')}
-            placeholder="Enter the author's name"
+            onChange={handleAuthorChange}
+            placeholder="Select or enter author name"
             error={errors.authorName}
-            disabled
+            required
           />
-          <p className="text-sm theme-text mt-1">
-            Author changes should be done through Author management
-          </p>
 
           {/* Summary */}
           <div>