fix: refactor duplicate filename validation to parent component

## Summary
- Move duplicate filename validation from FileEditor to MultiFileEditor
- Update validation to show errors without blocking input (better UX)
- Add onValidationChange callback for parent components
- Update tests to reflect new validation behavior

## Changes
- FileEditor now accepts an `error` prop for external validation errors
- MultiFileEditor tracks duplicate filenames and passes errors down
- Users can type freely while seeing validation errors in real-time
- Form submission can be blocked at parent level based on validation state

This provides a cleaner separation of concerns where MultiFileEditor owns
the list of files and validates uniqueness, while FileEditor only handles
local validation (empty names, invalid characters).

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: nullcoder

components/ui/file-editor.test.tsx

@@ -25,7 +25,6 @@ describe("FileEditor", () => {
     onChange: vi.fn(),
     onDelete: vi.fn(),
     showDelete: true,
-    existingFilenames: ["test.js", "other.txt"],
   };
 
   beforeEach(() => {
@@ -59,26 +58,42 @@ describe("FileEditor", () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
 
-    render(<FileEditor {...defaultProps} onChange={onChange} />);
+    const testFile = {
+      ...mockFile,
+      name: "script.txt", // Start with a txt file
+      language: "text", // Make sure language is set
+    };
 
-    const filenameInput = screen.getByDisplayValue("test.js");
+    render(
+      <FileEditor {...defaultProps} file={testFile} onChange={onChange} />
+    );
+
+    const filenameInput = screen.getByDisplayValue("script.txt");
+
+    // Clear and type new filename
     await user.clear(filenameInput);
     await user.type(filenameInput, "newfile.py");
 
     // Wait for all onChange calls to complete
     await waitFor(() => {
-      // Check that the filename was updated
-      const filenameCalls = onChange.mock.calls.filter(
-        (call) => call[1].name === "newfile.py"
-      );
-      expect(filenameCalls.length).toBeGreaterThan(0);
-
-      // Check that language was updated to python
-      const languageCalls = onChange.mock.calls.filter(
-        (call) => call[1].language === "python"
-      );
-      expect(languageCalls.length).toBeGreaterThan(0);
+      // Check that onChange was called
+      expect(onChange).toHaveBeenCalled();
     });
+
+    // Check the calls after typing is complete
+    const calls = onChange.mock.calls;
+
+    // Find any call with newfile.py in the name
+    const hasNewFilename = calls.some(
+      (call) => call[1].name && call[1].name.includes("newfile.py")
+    );
+    expect(hasNewFilename).toBe(true);
+
+    // Check that language was updated to python
+    const hasPythonLanguage = calls.some(
+      (call) => call[1].language === "python"
+    );
+    expect(hasPythonLanguage).toBe(true);
   });
 
   it("validates filename and shows errors", async () => {
@@ -94,15 +109,10 @@ describe("FileEditor", () => {
       expect(screen.getByText("Filename is required")).toBeInTheDocument();
     });
 
-    // Test duplicate filename
-    await user.type(filenameInput, "other.txt");
-    await waitFor(() => {
-      expect(screen.getByText("Filename already exists")).toBeInTheDocument();
-    });
-
     // Test invalid characters
-    await user.clear(filenameInput);
-    await user.type(filenameInput, "file/with/slash.txt");
+    await user.click(filenameInput);
+    await user.keyboard("{Control>}a{/Control}");
+    await user.keyboard("file/with/slash.txt");
     await waitFor(() => {
       expect(
         screen.getByText("Filename contains invalid characters")
@@ -281,10 +291,10 @@ describe("FileEditor", () => {
     await user.type(filenameInput, "script.py");
 
     await waitFor(() => {
-      const pythonCalls = onChange.mock.calls.filter(
+      const pythonCall = onChange.mock.calls.find(
         (call) => call[1].language === "python"
       );
-      expect(pythonCalls.length).toBeGreaterThan(0);
+      expect(pythonCall).toBeTruthy();
     });
 
     // Reset mock
@@ -295,10 +305,10 @@ describe("FileEditor", () => {
     await user.type(filenameInput, "index.html");
 
     await waitFor(() => {
-      const htmlCalls = onChange.mock.calls.filter(
+      const htmlCall = onChange.mock.calls.find(
         (call) => call[1].language === "html"
       );
-      expect(htmlCalls.length).toBeGreaterThan(0);
+      expect(htmlCall).toBeTruthy();
     });
   });
 });

components/ui/file-editor.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useCallback, useMemo } from "react";
+import { useState, useCallback, useMemo } from "react";
 import { X } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -15,7 +15,6 @@ import { Button } from "@/components/ui/button";
 import { CodeEditor } from "@/components/ui/code-editor";
 import {
   detectLanguage,
-  validateFilename,
   formatFileSize,
   checkFileSize,
   SUPPORTED_LANGUAGES,
@@ -34,22 +33,24 @@ export interface FileEditorProps {
   onChange: (id: string, updates: Partial<FileData>) => void;
   onDelete: (id: string) => void;
   showDelete: boolean;
-  existingFilenames: string[];
   readOnly?: boolean;
   className?: string;
+  error?: string;
 }
 
 export function FileEditor({
   file,
   onChange,
   onDelete,
   showDelete,
-  existingFilenames,
   readOnly = false,
   className,
+  error,
 }: FileEditorProps) {
-  const [filenameError, setFilenameError] = useState<string>("");
-  const [isDirty, setIsDirty] = useState(false);
+  const [localFilenameError, setLocalFilenameError] = useState<string>("");
+
+  // Combine local validation error with external error (e.g., duplicate filename)
+  const filenameError = localFilenameError || error || "";
 
   // Calculate file size and check status
   const fileSize = useMemo(() => {
@@ -60,24 +61,21 @@ export function FileEditor({
     return checkFileSize(fileSize);
   }, [fileSize]);
 
-  // Validate filename on mount and changes
-  useEffect(() => {
-    if (!isDirty) return;
-
-    const validation = validateFilename(file.name, existingFilenames);
-
-    if (!validation.valid) {
-      setFilenameError(validation.error || "");
-    } else {
-      setFilenameError("");
-    }
-  }, [file.name, existingFilenames, isDirty]);
-
   // Handle filename change
   const handleFilenameChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       const newName = e.target.value;
-      setIsDirty(true);
+
+      // Basic validation (empty name, invalid characters)
+      if (!newName.trim()) {
+        setLocalFilenameError("Filename is required");
+      } else if (/[/\\:*?"<>|]/.test(newName)) {
+        setLocalFilenameError("Filename contains invalid characters");
+      } else if (newName.length > 255) {
+        setLocalFilenameError("Filename must be 255 characters or less");
+      } else {
+        setLocalFilenameError("");
+      }
 
       // Auto-detect language from new filename
       const detectedLanguage = detectLanguage(newName);

components/ui/multi-file-editor.tsx

@@ -25,6 +25,8 @@ export interface MultiFileEditorProps {
   maxFileSize?: number;
   /** Custom class name */
   className?: string;
+  /** Callback when validation state changes */
+  onValidationChange?: (isValid: boolean) => void;
 }
 
 const DEFAULT_MAX_FILES = 20;
@@ -39,6 +41,7 @@ export function MultiFileEditor({
   maxTotalSize = DEFAULT_MAX_TOTAL_SIZE,
   maxFileSize: _maxFileSize = DEFAULT_MAX_FILE_SIZE, // Currently unused but available for future file size validation
   className,
+  onValidationChange,
 }: MultiFileEditorProps) {
   // Initialize with at least one file
   const [files, setFiles] = useState<FileData[]>(() => {
@@ -65,18 +68,34 @@ export function MultiFileEditor({
     }, 0);
   }, [files]);
 
-  // Get all files for validation (we need both name and id)
-  const allFiles = useMemo(
-    () => files.map((f) => ({ id: f.id, name: f.name })),
-    [files]
-  );
-
   // Check if we can add more files
   const canAddFile = files.length < maxFiles && !readOnly;
 
   // Check if we can remove files
   const canRemoveFile = files.length > 1 && !readOnly;
 
+  // Track files with duplicate names
+  const duplicateFilenames = useMemo(() => {
+    const nameCount = new Map<string, number>();
+    const duplicates = new Set<string>();
+
+    // Count occurrences of each filename (case-insensitive)
+    files.forEach((file) => {
+      const lowerName = file.name.toLowerCase();
+      nameCount.set(lowerName, (nameCount.get(lowerName) || 0) + 1);
+    });
+
+    // Find which files have duplicates
+    files.forEach((file) => {
+      const lowerName = file.name.toLowerCase();
+      if ((nameCount.get(lowerName) || 0) > 1) {
+        duplicates.add(file.id);
+      }
+    });
+
+    return duplicates;
+  }, [files]);
+
   // Handle file changes
   const handleFileChange = useCallback(
     (id: string, updates: Partial<FileData>) => {
@@ -136,20 +155,6 @@ export function MultiFileEditor({
     }, 100);
   }, [files, canAddFile, onChange]);
 
-  // Keyboard shortcuts
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Ctrl/Cmd + Enter to add new file
-      if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
-        e.preventDefault();
-        addNewFile();
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [addNewFile]);
-
   // Total size status
   const sizeStatus = useMemo(() => {
     if (totalSize > maxTotalSize) {
@@ -167,6 +172,30 @@ export function MultiFileEditor({
     return { type: "ok" as const };
   }, [totalSize, maxTotalSize]);
 
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Ctrl/Cmd + Enter to add new file
+      if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+        e.preventDefault();
+        addNewFile();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [addNewFile]);
+
+  // Notify parent of validation state changes
+  useEffect(() => {
+    if (onValidationChange) {
+      const hasDuplicates = duplicateFilenames.size > 0;
+      const sizeExceeded = sizeStatus.type === "error";
+      const isValid = !hasDuplicates && !sizeExceeded;
+      onValidationChange(isValid);
+    }
+  }, [duplicateFilenames.size, sizeStatus.type, onValidationChange]);
+
   return (
     <div ref={containerRef} className={cn("space-y-6", className)}>
       {/* Header with file count and total size */}
@@ -197,10 +226,12 @@ export function MultiFileEditor({
               onChange={handleFileChange}
               onDelete={handleFileDelete}
               showDelete={canRemoveFile}
-              existingFilenames={allFiles
-                .filter((f) => f.id !== file.id)
-                .map((f) => f.name)}
               readOnly={readOnly}
+              error={
+                duplicateFilenames.has(file.id)
+                  ? "Filename already exists"
+                  : undefined
+              }
             />
           </div>
         ))}
@@ -219,6 +250,13 @@ export function MultiFileEditor({
         </p>
       )}
 
+      {/* Duplicate filename error */}
+      {duplicateFilenames.size > 0 && (
+        <p className="text-destructive text-sm">
+          Please fix duplicate filenames before proceeding
+        </p>
+      )}
+
       {/* Add file button */}
       {canAddFile && (
         <AddFileButton

docs/TODO.md

@@ -108,7 +108,7 @@ This document tracks the implementation progress of GhostPaste. Check off tasks
 ### Form Components
 
 - [x] Create FileEditor component (single file with name, language, editor) - [#55](https://github.com/nullcoder/ghostpaste/issues/55)
-- [ ] Create MultiFileEditor component (vertical layout, GitHub Gist style) - [#56](https://github.com/nullcoder/ghostpaste/issues/56)
+- [x] Create MultiFileEditor component (vertical layout, GitHub Gist style) - [#56](https://github.com/nullcoder/ghostpaste/issues/56)
 - [x] Create CodeEditor component (CodeMirror wrapper) - [#54](https://github.com/nullcoder/ghostpaste/issues/54)
 - [ ] Create AddFileButton component - [#63](https://github.com/nullcoder/ghostpaste/issues/63)
 - [ ] Create ExpirySelector component - [#64](https://github.com/nullcoder/ghostpaste/issues/64)
@@ -130,10 +130,10 @@ This document tracks the implementation progress of GhostPaste. Check off tasks
 - [ ] Create keyboard shortcuts - [#72](https://github.com/nullcoder/ghostpaste/issues/72)
 - [ ] Add copy-to-clipboard functionality - [#59](https://github.com/nullcoder/ghostpaste/issues/59)
 - [ ] Implement responsive design
-- [ ] Add file editor auto-scroll on add
-- [ ] Implement filename auto-generation
-- [ ] Add language auto-detection from filename
-- [ ] Prevent duplicate filenames
+- [x] Add file editor auto-scroll on add
+- [x] Implement filename auto-generation
+- [x] Add language auto-detection from filename
+- [x] Prevent duplicate filenames
 - [ ] Add file reordering (drag and drop - stretch goal)
 
 ## 🔌 Phase 5: API Development
@@ -337,7 +337,7 @@ This document tracks the implementation progress of GhostPaste. Check off tasks
 - [ ] Phase 8: Deployment
 - [ ] Phase 9: Documentation & Polish
 
-**Last Updated:** 2025-06-05
+**Last Updated:** 2025-06-06
 
 ---