Various Fixes and QoL enhancements.

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

@@ -1,14 +1,15 @@
 'use client';
 
-import { useState, useRef } from 'react';
-import { useRouter } from 'next/navigation';
+import { useState, useRef, useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useAuth } from '../../contexts/AuthContext';
 import AppLayout from '../../components/layout/AppLayout';
 import { Input, Textarea } from '../../components/ui/Input';
 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 { storyApi } from '../../lib/api';
+import { storyApi, authorApi } from '../../lib/api';
 
 export default function AddStoryPage() {
   const [formData, setFormData] = useState({
@@ -25,8 +26,84 @@ export default function AddStoryPage() {
   const [coverImage, setCoverImage] = useState<File | null>(null);
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState<Record<string, string>>({});
+  const [duplicateWarning, setDuplicateWarning] = useState<{
+    show: boolean;
+    count: number;
+    duplicates: Array<{
+      id: string;
+      title: string;
+      authorName: string;
+      createdAt: string;
+    }>;
+  }>({ show: false, count: 0, duplicates: [] });
+  const [checkingDuplicates, setCheckingDuplicates] = useState(false);
   
   const router = useRouter();
+  const searchParams = useSearchParams();
+  const { isAuthenticated } = useAuth();
+
+  // Pre-fill author if authorId is provided in URL
+  useEffect(() => {
+    const authorId = searchParams.get('authorId');
+    if (authorId) {
+      const loadAuthor = async () => {
+        try {
+          const author = await authorApi.getAuthor(authorId);
+          setFormData(prev => ({
+            ...prev,
+            authorName: author.name
+          }));
+        } catch (error) {
+          console.error('Failed to load author:', error);
+        }
+      };
+      loadAuthor();
+    }
+  }, [searchParams]);
+
+  // Check for duplicates when title and author are both present
+  useEffect(() => {
+    const checkDuplicates = async () => {
+      const title = formData.title.trim();
+      const authorName = formData.authorName.trim();
+      
+      // Don't check if user isn't authenticated or if title/author are empty
+      if (!isAuthenticated || !title || !authorName) {
+        setDuplicateWarning({ show: false, count: 0, duplicates: [] });
+        return;
+      }
+
+      // Debounce the check to avoid too many API calls
+      const timeoutId = setTimeout(async () => {
+        try {
+          setCheckingDuplicates(true);
+          const result = await storyApi.checkDuplicate(title, authorName);
+          
+          if (result.hasDuplicates) {
+            setDuplicateWarning({
+              show: true,
+              count: result.count,
+              duplicates: result.duplicates
+            });
+          } else {
+            setDuplicateWarning({ show: false, count: 0, duplicates: [] });
+          }
+        } catch (error) {
+          console.error('Failed to check for duplicates:', error);
+          // Clear any existing duplicate warnings on error
+          setDuplicateWarning({ show: false, count: 0, duplicates: [] });
+          // Don't show error to user as this is just a helpful warning
+          // Authentication errors will be handled by the API interceptor
+        } finally {
+          setCheckingDuplicates(false);
+        }
+      }, 500); // 500ms debounce
+
+      return () => clearTimeout(timeoutId);
+    };
+
+    checkDuplicates();
+  }, [formData.title, formData.authorName, isAuthenticated]);
 
   const handleInputChange = (field: string) => (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
@@ -150,6 +227,46 @@ export default function AddStoryPage() {
             required
           />
 
+          {/* Duplicate Warning */}
+          {duplicateWarning.show && (
+            <div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
+              <div className="flex items-start gap-3">
+                <div className="text-yellow-600 dark:text-yellow-400 mt-0.5">
+                  ⚠️
+                </div>
+                <div>
+                  <h4 className="font-medium text-yellow-800 dark:text-yellow-200">
+                    Potential Duplicate Detected
+                  </h4>
+                  <p className="text-sm text-yellow-700 dark:text-yellow-300 mt-1">
+                    Found {duplicateWarning.count} existing {duplicateWarning.count === 1 ? 'story' : 'stories'} with the same title and author:
+                  </p>
+                  <ul className="mt-2 space-y-1">
+                    {duplicateWarning.duplicates.map((duplicate, index) => (
+                      <li key={duplicate.id} className="text-sm text-yellow-700 dark:text-yellow-300">
+                        • <span className="font-medium">{duplicate.title}</span> by {duplicate.authorName} 
+                        <span className="text-xs ml-2">
+                          (added {new Date(duplicate.createdAt).toLocaleDateString()})
+                        </span>
+                      </li>
+                    ))}
+                  </ul>
+                  <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-2">
+                    You can still create this story if it's different from the existing ones.
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Checking indicator */}
+          {checkingDuplicates && (
+            <div className="flex items-center gap-2 text-sm theme-text">
+              <div className="animate-spin w-4 h-4 border-2 border-theme-accent border-t-transparent rounded-full"></div>
+              Checking for duplicates...
+            </div>
+          )}
+
           {/* Summary */}
           <div>
             <label className="block text-sm font-medium theme-header mb-2">