feat: Advanced file editor and file tree improvements (#444)

# Features
- File drag and drop upload: Support uploading files and folders via drag and drop
- Binary file handling: Detect binary files and display a friendly message instead of trying to edit them
- Folder download: Download folders as ZIP files (using JSZip library)
- Context menu integration: Full right-click context menu for file operations (rename, delete, copy path, download, new file/folder)

src/components/file-tree/view/FileTreeHeader.tsx

@@ -1,7 +1,8 @@
-import { Eye, List, Search, TableProperties, X } from 'lucide-react';
+import { ChevronDown, Eye, FileText, FolderPlus, List, RefreshCw, Search, TableProperties, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '../../ui/button';
 import { Input } from '../../ui/input';
+import { cn } from '../../../lib/utils';
 import type { FileTreeViewMode } from '../types/types';
 
 type FileTreeHeaderProps = {
@@ -9,6 +10,14 @@ type FileTreeHeaderProps = {
   onViewModeChange: (mode: FileTreeViewMode) => void;
   searchQuery: string;
   onSearchQueryChange: (query: string) => void;
+  // Toolbar actions
+  onNewFile?: () => void;
+  onNewFolder?: () => void;
+  onRefresh?: () => void;
+  onCollapseAll?: () => void;
+  // Loading state
+  loading?: boolean;
+  operationLoading?: boolean;
 };
 
 export default function FileTreeHeader({
@@ -16,20 +25,83 @@ export default function FileTreeHeader({
   onViewModeChange,
   searchQuery,
   onSearchQueryChange,
+  onNewFile,
+  onNewFolder,
+  onRefresh,
+  onCollapseAll,
+  loading,
+  operationLoading,
 }: FileTreeHeaderProps) {
   const { t } = useTranslation();
 
   return (
     <div className="px-3 pt-3 pb-2 border-b border-border space-y-2">
+      {/* Title and Toolbar */}
       <div className="flex items-center justify-between">
         <h3 className="text-sm font-medium text-foreground">{t('fileTree.files')}</h3>
-        <div className="flex gap-0.5">
+        <div className="flex items-center gap-0.5">
+          {/* Action buttons */}
+          {onNewFile && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0"
+              onClick={onNewFile}
+              title={t('fileTree.newFile', 'New File (Cmd+N)')}
+              aria-label={t('fileTree.newFile', 'New File (Cmd+N)')}
+              disabled={operationLoading}
+            >
+              <FileText className="w-3.5 h-3.5" />
+            </Button>
+          )}
+          {onNewFolder && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0"
+              onClick={onNewFolder}
+              title={t('fileTree.newFolder', 'New Folder (Cmd+Shift+N)')}
+              aria-label={t('fileTree.newFolder', 'New Folder (Cmd+Shift+N)')}
+              disabled={operationLoading}
+            >
+              <FolderPlus className="w-3.5 h-3.5" />
+            </Button>
+          )}
+          {onRefresh && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0"
+              onClick={onRefresh}
+              title={t('fileTree.refresh', 'Refresh')}
+              aria-label={t('fileTree.refresh', 'Refresh')}
+              disabled={operationLoading}
+            >
+              <RefreshCw className={cn('w-3.5 h-3.5', loading && 'animate-spin')} />
+            </Button>
+          )}
+          {onCollapseAll && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0"
+              onClick={onCollapseAll}
+              title={t('fileTree.collapseAll', 'Collapse All')}
+              aria-label={t('fileTree.collapseAll', 'Collapse All')}
+            >
+              <ChevronDown className="w-3.5 h-3.5" />
+            </Button>
+          )}
+          {/* Divider */}
+          <div className="w-px h-4 bg-border mx-0.5" />
+          {/* View mode buttons */}
           <Button
             variant={viewMode === 'simple' ? 'default' : 'ghost'}
             size="sm"
             className="h-7 w-7 p-0"
             onClick={() => onViewModeChange('simple')}
             title={t('fileTree.simpleView')}
+            aria-label={t('fileTree.simpleView')}
           >
             <List className="w-3.5 h-3.5" />
           </Button>
@@ -39,6 +111,7 @@ export default function FileTreeHeader({
             className="h-7 w-7 p-0"
             onClick={() => onViewModeChange('compact')}
             title={t('fileTree.compactView')}
+            aria-label={t('fileTree.compactView')}
           >
             <Eye className="w-3.5 h-3.5" />
           </Button>
@@ -48,12 +121,14 @@ export default function FileTreeHeader({
             className="h-7 w-7 p-0"
             onClick={() => onViewModeChange('detailed')}
             title={t('fileTree.detailedView')}
+            aria-label={t('fileTree.detailedView')}
           >
             <TableProperties className="w-3.5 h-3.5" />
           </Button>
         </div>
       </div>
 
+      {/* Search Bar */}
       <div className="relative">
         <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
         <Input
@@ -70,6 +145,7 @@ export default function FileTreeHeader({
             className="absolute right-0.5 top-1/2 -translate-y-1/2 h-5 w-5 p-0 hover:bg-accent"
             onClick={() => onSearchQueryChange('')}
             title={t('fileTree.clearSearch')}
+            aria-label={t('fileTree.clearSearch')}
           >
             <X className="w-3 h-3" />
           </Button>
@@ -78,4 +154,3 @@ export default function FileTreeHeader({
     </div>
   );
 }
-