Build Advanced File Editor with Live Preview

[TheFakeCreator]

Title: Enhance File Editor with Live Markdown Preview and Collaborative Features

Description:
Improve the existing file editor component to include:

• Side-by-side markdown preview
• Syntax highlighting for code blocks
• Auto-save functionality
• Real-time collaboration indicators
• File upload via drag & drop

Acceptance Criteria:

• Implement split-pane editor with live preview
• Add syntax highlighting with Prism.js or similar
• Implement auto-save with debouncing
• Add file upload via drag & drop
• Create keyboard shortcuts for common actions
• Ensure mobile responsiveness

Technical Details:

• Build on existing FileSystemTab.tsx component
• Use React Query for optimistic updates
• Integrate with existing file content API

Files to Modify:

• frontend/src/components/ui/FileSystemTab.tsx
• frontend/src/hooks/useFiles.ts
• Add new component: frontend/src/components/ui/MarkdownEditor.tsx

Tags: enhancement frontend user-experience good-first-issue
Priority: Medium
Estimated Effort: 4-6 days