# File Editor - Tasks

## Phase 1: Dependencies and Setup

- [ ] **Task 1.1**: Install dependencies
  - `react-simple-code-editor`
  - `prismjs`
  - `@types/prismjs`
  - Add Prism CSS theme

- [ ] **Task 1.2**: Create language detection utility
  - Map file extensions to Prism.js language names
  - Handle common extensions (.js, .ts, .py, .md, etc.)
  - Default to plaintext for unknown extensions

## Phase 2: Syntax Highlighting

- [ ] **Task 2.1**: Create SyntaxHighlighter component
  - Use Prism.js to tokenize code
  - Render highlighted HTML
  - Add line numbers
  - Copy-to-clipboard button

- [ ] **Task 2.2**: Add Prism.js themes
  - Light theme (matches app)
  - Dark theme support
  - CSS custom properties integration

- [ ] **Task 2.3**: Lazy load language support
  - Only load language grammar when needed
  - Dynamic imports for language files

## Phase 3: Edit Mode

- [ ] **Task 3.1**: Create CodeEditor component
  - Use react-simple-code-editor
  - Prism.js highlighting overlay
  - Line numbers
  - Tab key support

- [ ] **Task 3.2**: Add keyboard shortcuts
  - Ctrl/Cmd + E: Toggle edit
  - Ctrl/Cmd + S: Save
  - Escape: Cancel
  - Tab: Insert spaces

## Phase 4: Commit Dialog

- [ ] **Task 4.1**: Create CommitDialog component
  - Diff preview (simple comparison)
  - Commit message input (required)
  - Author info display
  - Cancel and Commit buttons

- [ ] **Task 4.2**: Add diff generation
  - Simple line-by-line diff
  - Show added/removed lines
  - Highlight changes

## Phase 5: FileEditor Integration

- [ ] **Task 5.1**: Create FileEditor component
  - Manage view/edit state
  - Load file content
  - Toggle modes
  - Handle save flow

- [ ] **Task 5.2**: Replace FileViewer in RepoWorkspace
  - Update imports
  - Pass required props
  - Handle file selection

## Phase 6: Styling

- [ ] **Task 6.1**: Add editor CSS
  - Toolbar styling
  - Editor container
  - Line numbers
  - Syntax colors
  - Commit dialog styles

- [ ] **Task 6.2**: Add responsive styles
  - Mobile layout
  - Touch-friendly buttons
  - Collapsible toolbar

## Phase 7: Quality Gates

- [ ] **Task 7.1**: Run backend checks
  - ruff
  - mypy

- [ ] **Task 7.2**: Run frontend checks
  - TypeScript typecheck
  - ESLint
  - Build

- [ ] **Task 7.3**: Manual testing
  - Test various file types
  - Test commit flow
  - Test error handling
  - Test responsive design