Description

Implement the FileEditor component that combines filename input with CodeEditor for single file editing, following the vertical layout design.

Requirements

• Filename input field with real-time validation
• Language detection based on file extension
• Language selector dropdown to override auto-detection
• Integration with CodeEditor component
• Support for renaming files with duplicate checking
• Delete file button (conditionally shown)
• Proper file size validation and warnings
• TypeScript types for all props and events
• Follow design from MULTI_FILE_EDITOR_DESIGN.md

Acceptance Criteria

• FileEditor renders with filename input and code editor
• Language is auto-detected from file extension
• Language dropdown allows manual override
• File can be renamed with validation
• Delete button shown only when multiple files exist
• Filename validation prevents duplicates
• Size warning at 400KB, error at 500KB per file
• Component emits proper change events
• Fully typed with TypeScript
• Accessible keyboard navigation
• Responsive layout (stacked on mobile)

UI Layout

Desktop (>768px):
┌─────────────────────────────────────────────────────────┐
│ [filename.js    ] [JavaScript ▼] [✕]                   │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  // Your code here...                                  │
│                                                         │
│                                                         │
└─────────────────────────────────────────────────────────┘

Mobile (<768px):
┌─────────────────────────────────────────────────────────┐
│ [filename.js                        ] [✕]               │
│ [JavaScript                         ▼]                  │
├─────────────────────────────────────────────────────────┤
│  // Your code here...                                  │
└─────────────────────────────────────────────────────────┘

Props Interface

interface FileEditorProps {
  file: {
    id: string;
    name: string;
    content: string;
    language?: string;
  };
  onChange: (id: string, updates: Partial<FileData>) => void;
  onDelete: (id: string) => void;
  showDelete: boolean; // Hide when only one file
  existingFilenames: string[]; // For duplicate validation
  readOnly?: boolean;
}

Validation Rules

• Filename required (cannot be empty)
• No duplicate filenames in the same gist
• Valid filename characters only (no /, , :, *, ?, ", <, >, |)
• Maximum 255 characters
• Warn at 400KB content size
• Error at 500KB content size

Technical Notes

• Use controlled components for all inputs
• Implement proper debouncing for filename changes
• Language detection should use the constants from lib/constants.ts
• Consider performance for large files
• Show file size indicator in UI
• Use shadcn/ui Input and Select components

Related

• Depends on Implement CodeEditor component with CodeMirror v6 #54 (CodeEditor component)
• Required by Implement MultiFileEditor component for managing multiple files #56 (MultiFileEditor component)
• Part of Phase 4 UI Components
• Follows MULTI_FILE_EDITOR_DESIGN.md