Changing Authors

frontend/src/app/import/page.tsx

@@ -9,6 +9,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 { storyApi, authorApi } from '../../lib/api';
 
 export default function AddStoryPage() {
@@ -19,6 +20,7 @@ export default function AddStoryPage() {
     title: '',
     summary: '',
     authorName: '',
+    authorId: undefined as string | undefined,
     contentHtml: '',
     sourceUrl: '',
     tags: [] as string[],
@@ -62,7 +64,8 @@ export default function AddStoryPage() {
           const author = await authorApi.getAuthor(authorId);
           setFormData(prev => ({
             ...prev,
-            authorName: author.name
+            authorName: author.name,
+            authorId: author.id
           }));
         } catch (error) {
           console.error('Failed to load author:', error);
@@ -84,6 +87,7 @@ export default function AddStoryPage() {
             ...prev,
             title: storyData.title || '',
             authorName: storyData.author || '',
+            authorId: undefined, // Reset author ID for bulk combined stories
             contentHtml: storyData.content || '',
             sourceUrl: storyData.sourceUrl || '',
             summary: storyData.summary || '',
@@ -167,6 +171,19 @@ export default function AddStoryPage() {
     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 handleImportFromUrl = async () => {
     if (!importUrl.trim()) {
       setErrors({ importUrl: 'URL is required' });
@@ -197,6 +214,7 @@ export default function AddStoryPage() {
         title: scrapedStory.title || '',
         summary: scrapedStory.summary || '',
         authorName: scrapedStory.author || '',
+        authorId: undefined, // Reset author ID when importing from URL (likely new author)
         contentHtml: scrapedStory.content || '',
         sourceUrl: scrapedStory.sourceUrl || importUrl,
         tags: scrapedStory.tags || [],
@@ -263,7 +281,8 @@ export default function AddStoryPage() {
         sourceUrl: formData.sourceUrl || undefined,
         volume: formData.seriesName ? parseInt(formData.volume) : undefined,
         seriesName: formData.seriesName || undefined,
-        authorName: formData.authorName || 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,
       };
 
@@ -358,12 +377,12 @@ export default function AddStoryPage() {
             required
           />
 
-          {/* Author */}
-          <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}
             required
           />

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>