- Replace ReactPlayer with native HTML5 video for better MP4 support
- Add proper MIME type mapping for all video formats (mp4, webm, mkv, avi, mov, wmv, flv)
- Implement smart window sizing based on media dimensions
- Auto-adjust window size to match image/video aspect ratio with constraints
- Add media dimension detection for images (naturalWidth/Height) and videos (videoWidth/Height)
- Center windows automatically when resizing for media content
- Apply intelligent scaling with max viewport limits (90% width, 80% height)
- Preserve minimum window sizes and add padding for UI elements
- Enhanced error handling and debug logging for video playback
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix keyboard shortcut conflicts in FileViewer.tsx (Ctrl+F, H, ?, Space, A)
- Add comprehensive i18n translations for keyboard shortcuts help panel
- Integrate react-photo-view for enhanced fullscreen image viewing
- Simplify image preview by removing complex toolbar and hover hints
- Add proper error handling and loading states for image display
- Update English and Chinese translation files with new keyboard shortcut terms
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace custom search/replace implementation with native CodeMirror extensions
- Add proper keyboard shortcut support: Ctrl+F, Ctrl+H, Ctrl+/, Ctrl+Space, etc.
- Fix browser shortcut conflicts by preventing defaults only when editor is focused
- Integrate autocompletion and comment toggle functionality
- Fix file name truncation in file manager grid to use text wrapping
- Add comprehensive keyboard shortcuts help panel for users
- Update i18n translations for editor buttons (Download, Replace, Replace All)
- Unify text and code file editing under single CodeMirror instance
- Add proper SSH HMAC algorithms for better compatibility
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Root Cause Analysis:
- Generic error handling in main-axios.ts was stripping fileNotFound data from 404 responses
- Windows were being created before error detection, showing empty editors with "File is empty"
- Error message translation was not properly detecting various file-not-found scenarios
Core Fixes:
1. **Preserve 404 Error Data:** Modified readSSHFile to preserve fileNotFound information
- Create custom error object for 404 responses
- Set isFileNotFound flag to bypass generic error handling
- Maintain original response data for proper error detection
2. **Enhanced Error Detection:** Improved FileWindow error detection logic
- Check for custom isFileNotFound flag
- Detect multiple error message patterns: "File not found", "Resource not found"
- Handle both backend-specific and generic error formats
3. **Prevent Empty Windows:** Auto-close window when file cleanup occurs
- Call closeWindow(windowId) immediately after cleanup
- Return early to prevent showing empty editor
- Show only the cleanup notification toast
Behavior Changes:
- **Before:** Opens empty editor + shows "Server error occurred" + displays "File is empty"
- **After:** Shows "File removed from recent/pinned lists" + closes window immediately
- **Result:** Clean, user-friendly experience with automatic cleanup
Technical Details:
- Enhanced readSSHFile error handling for 404 status codes
- Improved error pattern matching for various "not found" scenarios
- Window lifecycle management during error states
- Preserved backward compatibility for other error types
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
File Cleanup Implementation:
- Detect file-not-found errors when opening files from recent/pinned lists
- Automatically remove missing files from both recent and pinned file lists
- Refresh sidebar to reflect updated lists immediately after cleanup
- Prevent error dialogs from appearing when files are successfully cleaned up
Backend Improvements:
- Enhanced SSH file manager to return proper 404 status for missing files
- Added fileNotFound flag in error responses for better error detection
- Improved error categorization for file access failures
Frontend Error Handling:
- Added onFileNotFound callback prop to FileWindow component
- Implemented handleFileNotFound function in FileManagerModern
- Enhanced error detection logic to catch various "file not found" scenarios
- Better error messages with internationalization support
Translation Additions:
- fileNotFoundAndRemoved: Notify user when file is cleaned up
- failedToLoadFile: Generic file loading error message
- serverErrorOccurred: Server error fallback message
- Chinese translations for all new error messages
Technical Details:
- Uses existing removeRecentFile and removePinnedFile API calls
- Triggers sidebar refresh via setSidebarRefreshTrigger
- Maintains backward compatibility with existing error handling
- Preserves error logging for debugging purposes
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit enhances the user experience by standardizing all text editing
components to use CodeMirror, providing consistent functionality across the
entire application.
**Text Editor Unification**:
- Replaced all textarea elements with CodeMirror editors
- Unified syntax highlighting and line numbering across all text inputs
- Consistent oneDark theme implementation throughout the application
**Fixed Components**:
- FileViewer: Enhanced file editing with syntax highlighting for all file types
- CredentialEditor: Improved SSH key editing experience with code editor features
- HostManagerEditor: Better SSH private key input with proper formatting
- FileManagerGrid: Fixed new file/folder creation in empty directories
**Key Technical Improvements**:
- Fixed oneDark theme import path from @uiw/codemirror-themes to @codemirror/theme-one-dark
- Enhanced createIntent rendering logic to work properly in empty directories
- Added automatic createIntent cleanup when navigating between directories
- Configured consistent basicSetup options across all editors
**User Experience Enhancements**:
- Professional code editing interface for all text inputs
- Line numbers and syntax highlighting for better readability
- Consistent keyboard shortcuts and editing behavior
- Improved accessibility and user interaction patterns
Users now enjoy a unified, professional editing experience whether working with
code files, configuration files, or SSH credentials. The interface is consistent,
feature-rich, and optimized for developer workflows.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix missing i18n for terminal.terminalWithPath translation key
- Update keyboard shortcuts: remove Ctrl+T conflicts, change refresh to Ctrl+Y, rename shortcut to F6
- Remove click-to-rename functionality to prevent accidental renaming
- Fix drag preview z-index and positioning issues during file operations
- Remove false download trigger when dragging files to original position
- Fix 'Must be handling a user gesture' error in drag-to-desktop functionality
- Remove useless minimize button from file editor and diff viewer windows
- Improve context menu z-index hierarchy for better layering
- Add comprehensive drag state management and visual feedback
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- FileManagerModern.tsx: Translate all Chinese comments to English, replace hardcoded text with i18n
- TerminalWindow.tsx: Complete translation and add i18n support
- DiffWindow.tsx: Complete translation and add i18n support
- FileManagerOperations.tsx: Complete translation
- Fix missed comment in FileManagerGrid.tsx
All File Manager components now have clean English comments and proper internationalization.
Follow Linus principles: simple, direct, no unnecessary complexity.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Complete translation of FileWindow.tsx comments and hardcoded text
- Complete translation of DraggableWindow.tsx hardcoded text
- Complete translation of FileManagerSidebar.tsx comments
- Complete translation of FileManagerGrid.tsx comments and UI text
- Complete translation of DiffViewer.tsx hardcoded text with proper i18n
- Partial translation of FileManagerModern.tsx comments (major sections done)
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Major improvements:
- Remove separate view/edit modes - editing state can view content too
- Expand text editing support to ALL file types except media/binary files
- Add realistic undo functionality for copy/cut operations
- Implement moveSSHItem API for proper cross-directory file moves
- Add file existence checks to prevent copy failures
- Enhanced error logging with full command and path information
Key changes:
- FileWindow: Expand editable file types to exclude only media extensions
- FileViewer: Remove view mode toggle, direct editing interface
- Backend: Add moveItem API endpoint for cut operations
- Backend: Add file existence verification before copy operations
- Frontend: Complete undo system for copy (delete copied files) and cut (move back to original location)
File type handling:
- Media files (jpg, mp3, mp4, etc.) → Display only
- All other files → Direct text editing (js, py, txt, config files, unknown extensions)
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace non-existent SiJava with SiOracle for Java files
- Oracle is the owner of Java, making it an appropriate icon choice
- All imported icons now exist and should work correctly
- Maintain red color scheme for Java files
- Replace SiCsharp with SiDotnet for C# files (correct icon name)
- Move yaml and yml extensions to codeExts array
- Remove separate yaml file type, treat as code files
- Simplify file type logic by removing yaml-specific conditions
- YAML files now get full CodeMirror editing experience with syntax highlighting
- Install react-icons library for official technology icons
- Create getLanguageIcon function with 25+ language-specific icons
- Add official brand colors for each programming language:
- JavaScript/JSX (yellow), TypeScript/TSX (blue)
- Python (blue), Java (red), Go (cyan), Rust (orange)
- HTML5 (orange), CSS3 (blue), SCSS/Sass (pink)
- JSON (yellow), YAML (red), SQL (blue), etc.
- Add dedicated YAML file type support with official YAML icon
- Support special files: Dockerfile, Makefile, Gemfile
- Ensure YAML files get CodeMirror syntax highlighting and editing
- Update shouldShowAsText logic to include YAML files
- Maintain consistent professional appearance across all file types
- Integrate CodeMirror for advanced code editing with syntax highlighting
- Support 20+ programming languages including JavaScript, TypeScript, Python, Java, Go, Rust, etc.
- Add JSON files to code file category for proper syntax highlighting
- Implement line numbers for both CodeMirror and search mode
- Add comprehensive editor features: code folding, auto-completion, bracket matching
- Maintain search functionality with line numbers in read-only mode
- Use dark theme to match project design system
- Ensure all code files are fully editable with professional IDE-like features
- Remove overlay-based highlighting that stayed in place during scroll
- Switch between read-only highlighted view and editable textarea based on search state
- Enhance color contrast: current match (red text + yellow bg), other matches (blue text + light blue bg)
- Use font-bold for better visibility of search results
- Ensure highlights follow text content during scrolling
- Replace background highlighting with text color changes for better visibility
- Current match highlighted in orange, other matches in blue
- Add font-semibold for better distinction of search results
- Improve readability by avoiding color overlay on text
- Replace hardcoded colors with shadcn CSS variables in DraggableWindow
- Update FileViewer to use proper shadcn theme colors
- Switch from gray-* to muted/foreground/background tokens
- Improve dark mode compatibility and visual consistency
- Maintain all existing functionality with better theming support
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Enhanced FileViewer to handle unknown file types intelligently:
⚠️ **Large File Warning System**:
- Files > 1MB show warning dialog before opening as text
- Files > 10MB are blocked for security (cannot open as text)
- User can choose: "Open as Text", "Download Instead", or "Cancel"
- Prevents browser crashes from massive files
📝 **Universal Text Fallback**:
- Unknown file types now default to text viewer for files ≤ 1MB
- Users can force-open larger files as text after warning
- Smart detection prevents opening binary files accidentally
🛡️ **Safety Features**:
- Hard 10MB limit prevents system crashes
- Clear file size display in warnings
- Performance impact warnings for 1MB+ files
- Graceful fallback to download option
🎯 **User Experience**:
- Unknown files automatically try text mode first
- Clear messaging about potential issues
- Multiple resolution options (text/download/cancel)
- Maintains safety while maximizing accessibility
This allows users to examine any file type as text when safe,
while protecting against performance issues and crashes.
Added comprehensive draggable window system with the following features:
🪟 **DraggableWindow Component**:
- Full drag and drop functionality with title bar dragging
- Window resizing from all edges and corners
- Maximize/minimize/close window controls
- Double-click title bar to maximize/restore
- Auto position adjustment to prevent off-screen windows
- Windows-style blue gradient title bar
📁 **FileViewer Component**:
- Multi-format file support (text, code, images, videos, audio)
- Syntax highlighting distinction for code files
- Editable text files with real-time content tracking
- File metadata display (size, modified date, permissions)
- Save and download functionality
- Unsaved changes indicator
🎯 **WindowManager System**:
- Multi-window support with proper z-index management
- Window factory pattern for dynamic component creation
- Focus management - clicking brings window to front
- Smart window positioning with auto-offset
- Memory leak prevention with proper cleanup
🔗 **FileWindow Integration**:
- SSH file loading with error handling
- Auto-detect editable file types
- Real-time file saving to remote server
- Download files as binary blobs
- Loading states and progress feedback
✨ **User Experience**:
- Double-click any file to open in draggable window
- Multiple files can be open simultaneously
- Windows behave like native Windows Explorer
- Smooth animations and transitions
- Responsive design that works on all screen sizes
This transforms the file manager from a basic browser into a full
desktop-class application with native OS window management behavior.
