799 lines
31 KiB
TypeScript
799 lines
31 KiB
TypeScript
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||
|
|
import { AppWindow, Archive, ArrowDown, ArrowRight, ArrowUp, ChevronDown, ClipboardCopy, Copy, Download, Edit2, ExternalLink, FilePlus, Folder, FolderPlus, Loader2, Pencil, RefreshCw, Shield, Trash2, Unplug, Upload } from "lucide-react";
|
||
|
|
import { Button } from "../ui/button";
|
||
|
|
import {
|
||
|
|
ContextMenu,
|
||
|
|
ContextMenuContent,
|
||
|
|
ContextMenuItem,
|
||
|
|
ContextMenuSeparator,
|
||
|
|
ContextMenuTrigger,
|
||
|
|
} from "../ui/context-menu";
|
||
|
|
import { cn } from "../../lib/utils";
|
||
|
|
import { getParentPath, joinPath } from "../../application/state/sftp/utils";
|
||
|
|
import type { SftpFileEntry } from "../../types";
|
||
|
|
import type { SftpPane } from "../../application/state/sftp/types";
|
||
|
|
import type { SftpTransferSource } from "./SftpContext";
|
||
|
|
import { sftpListOrderStore } from "./hooks/useSftpListOrderStore";
|
||
|
|
import type { UseSftpPaneSortingResult } from "../../application/state/sftp/useSftpPaneSorting";
|
||
|
|
import { buildSftpColumnTemplate, isNavigableDirectory, isSftpColumnMenuKey } from "./utils";
|
||
|
|
import { isKnownBinaryFile } from "../../lib/sftpFileUtils";
|
||
|
|
import { isExtractableArchive } from "../../domain/sftpArchive";
|
||
|
|
import { SftpFileRow } from "./SftpFileRow";
|
||
|
|
import type { SftpListDensity } from "../../domain/sftpListDensity";
|
||
|
|
import { SftpColumnMenuItems } from "./SftpColumnMenuItems";
|
||
|
|
import { getSftpVirtualListScrollTop } from "../../domain/sftpVirtualList";
|
||
|
|
import {
|
||
|
|
getSftpListUploadFilesTargetPath,
|
||
|
|
getSftpUploadFilesLabelKey,
|
||
|
|
getSftpUploadFolderLabelKey,
|
||
|
|
shouldShowSftpUploadFolderMenu,
|
||
|
|
shouldShowSftpUploadFilesMenu,
|
||
|
|
} from "./sftpUploadMenu";
|
||
|
|
|
||
|
|
interface SftpPaneFileListProps {
|
||
|
|
t: (key: string, params?: Record<string, unknown>) => string;
|
||
|
|
pane: SftpPane;
|
||
|
|
side: "left" | "right";
|
||
|
|
isPaneFocused: boolean;
|
||
|
|
sorting: UseSftpPaneSortingResult;
|
||
|
|
fileListRef: React.RefObject<HTMLDivElement>;
|
||
|
|
handleFileListScroll: (e: React.UIEvent<HTMLDivElement>) => void;
|
||
|
|
shouldVirtualize: boolean;
|
||
|
|
totalHeight: number;
|
||
|
|
sortedDisplayFiles: SftpFileEntry[];
|
||
|
|
isDragOverPane: boolean;
|
||
|
|
draggedFiles: (SftpTransferSource & { side: "left" | "right" })[] | null;
|
||
|
|
onRefresh: () => void;
|
||
|
|
onNavigateTo: (path: string) => void;
|
||
|
|
onClearSelection: () => void;
|
||
|
|
setShowNewFolderDialog: (open: boolean) => void;
|
||
|
|
setShowNewFileDialog: (open: boolean) => void;
|
||
|
|
getNextUntitledName: (existingNames: string[]) => string;
|
||
|
|
setNewFileName: (value: string) => void;
|
||
|
|
setFileNameError: (value: string | null) => void;
|
||
|
|
// Row rendering
|
||
|
|
dragOverEntry: string | null;
|
||
|
|
handleRowSelect: (entry: SftpFileEntry, index: number, e: React.MouseEvent) => void;
|
||
|
|
handleRowOpen: (entry: SftpFileEntry) => void;
|
||
|
|
handleFileDragStart: (entry: SftpFileEntry, e: React.DragEvent) => void;
|
||
|
|
onDragEnd: () => void;
|
||
|
|
handleEntryDragOver: (entry: SftpFileEntry, e: React.DragEvent) => void;
|
||
|
|
handleRowDragLeave: () => void;
|
||
|
|
handleEntryDrop: (entry: SftpFileEntry, e: React.DragEvent) => void;
|
||
|
|
onCopyToOtherPane: (files: SftpTransferSource[]) => void;
|
||
|
|
onMoveEntriesToPath: (sourcePaths: string[], targetPath: string) => Promise<void>;
|
||
|
|
onOpenFileWithSystemDefault?: (entry: SftpFileEntry) => void;
|
||
|
|
onOpenFileWith?: (entry: SftpFileEntry) => void;
|
||
|
|
onEditFile?: (entry: SftpFileEntry) => void;
|
||
|
|
onDownloadFile?: (entry: SftpFileEntry) => void;
|
||
|
|
onDownloadFiles?: (entries: SftpFileEntry[]) => void;
|
||
|
|
onExtractArchive?: (entry: SftpFileEntry) => void;
|
||
|
|
onEditPermissions?: (entry: SftpFileEntry) => void;
|
||
|
|
onUploadExternalFileList?: (fileList: FileList, targetPath?: string) => Promise<void> | void;
|
||
|
|
onUploadExternalFolder?: (targetPath?: string) => Promise<void> | void;
|
||
|
|
// Whether this pane is rendering a local filesystem. Upload menu items only
|
||
|
|
// make sense for remote (SFTP) panes, so they are suppressed when isLocal.
|
||
|
|
isLocal?: boolean;
|
||
|
|
openRenameDialog: (name: string) => void;
|
||
|
|
openDeleteConfirm: (targets: string[]) => void;
|
||
|
|
rowHeight: number;
|
||
|
|
visibleRows: { entry: SftpFileEntry; index: number; top: number }[];
|
||
|
|
listDensity?: SftpListDensity;
|
||
|
|
}
|
||
|
|
|
||
|
|
const SftpErrorWithLogs: React.FC<{
|
||
|
|
error: string;
|
||
|
|
connectionLogs: string[];
|
||
|
|
onRetry: () => void;
|
||
|
|
t: (key: string) => string;
|
||
|
|
}> = ({ error, connectionLogs, onRetry, t }) => {
|
||
|
|
const [showLogs, setShowLogs] = useState(connectionLogs.length > 0);
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col items-center justify-center h-full gap-3 text-muted-foreground">
|
||
|
|
<Unplug size={28} className="text-destructive/70" />
|
||
|
|
<span className="text-xs text-center px-6 max-w-xs leading-relaxed">{t(error)}</span>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={onRetry}>
|
||
|
|
{t("sftp.retry")}
|
||
|
|
</Button>
|
||
|
|
{connectionLogs.length > 0 && (
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="sm"
|
||
|
|
className="h-7 text-xs text-muted-foreground"
|
||
|
|
onClick={() => setShowLogs(!showLogs)}
|
||
|
|
>
|
||
|
|
<ChevronDown size={14} className={`mr-1 transition-transform ${showLogs ? 'rotate-180' : ''}`} />
|
||
|
|
{showLogs ? "Hide logs" : "Show logs"}
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
{showLogs && connectionLogs.length > 0 && (
|
||
|
|
<div className="w-full max-w-sm mt-1 p-2 rounded-md bg-secondary/50 border border-border/60 space-y-0.5 max-h-40 overflow-y-auto">
|
||
|
|
{connectionLogs.map((log, i) => (
|
||
|
|
<div key={i} className="text-[11px] text-muted-foreground truncate font-mono">
|
||
|
|
{log}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = React.memo(({
|
||
|
|
t,
|
||
|
|
pane,
|
||
|
|
side,
|
||
|
|
isPaneFocused,
|
||
|
|
sorting,
|
||
|
|
fileListRef,
|
||
|
|
handleFileListScroll,
|
||
|
|
shouldVirtualize,
|
||
|
|
totalHeight,
|
||
|
|
sortedDisplayFiles,
|
||
|
|
isDragOverPane,
|
||
|
|
draggedFiles,
|
||
|
|
onRefresh,
|
||
|
|
onNavigateTo,
|
||
|
|
onClearSelection,
|
||
|
|
setShowNewFolderDialog,
|
||
|
|
setShowNewFileDialog,
|
||
|
|
getNextUntitledName,
|
||
|
|
setNewFileName,
|
||
|
|
setFileNameError,
|
||
|
|
dragOverEntry,
|
||
|
|
handleRowSelect,
|
||
|
|
handleRowOpen,
|
||
|
|
handleFileDragStart,
|
||
|
|
onDragEnd,
|
||
|
|
handleEntryDragOver,
|
||
|
|
handleRowDragLeave,
|
||
|
|
handleEntryDrop,
|
||
|
|
onCopyToOtherPane,
|
||
|
|
onMoveEntriesToPath,
|
||
|
|
onOpenFileWithSystemDefault,
|
||
|
|
onOpenFileWith,
|
||
|
|
onEditFile,
|
||
|
|
onDownloadFile,
|
||
|
|
onDownloadFiles,
|
||
|
|
onExtractArchive,
|
||
|
|
onEditPermissions,
|
||
|
|
onUploadExternalFileList,
|
||
|
|
onUploadExternalFolder,
|
||
|
|
isLocal = false,
|
||
|
|
openRenameDialog,
|
||
|
|
openDeleteConfirm,
|
||
|
|
rowHeight,
|
||
|
|
visibleRows,
|
||
|
|
listDensity = "comfortable",
|
||
|
|
}) => {
|
||
|
|
const {
|
||
|
|
columnWidths,
|
||
|
|
visibleColumns,
|
||
|
|
directoriesFirst,
|
||
|
|
sortField,
|
||
|
|
sortOrder,
|
||
|
|
handleSort,
|
||
|
|
handleResizeStart,
|
||
|
|
toggleColumnVisibility,
|
||
|
|
toggleDirectoriesFirst,
|
||
|
|
} = sorting;
|
||
|
|
const filesByName = useMemo(() => {
|
||
|
|
const map = new Map<string, SftpFileEntry>();
|
||
|
|
sortedDisplayFiles.forEach((entry) => {
|
||
|
|
map.set(entry.name, entry);
|
||
|
|
});
|
||
|
|
return map;
|
||
|
|
}, [sortedDisplayFiles]);
|
||
|
|
|
||
|
|
// Push sorted file names into the list order store for keyboard navigation
|
||
|
|
useEffect(() => {
|
||
|
|
const names = sortedDisplayFiles
|
||
|
|
.filter((f) => f.name !== "..")
|
||
|
|
.map((f) => f.name);
|
||
|
|
sftpListOrderStore.setItems(pane.id, names);
|
||
|
|
return () => sftpListOrderStore.clearPane(pane.id);
|
||
|
|
}, [sortedDisplayFiles, pane.id]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (pane.selectedFiles.size !== 1) return;
|
||
|
|
const selectedName = Array.from(pane.selectedFiles)[0];
|
||
|
|
if (!selectedName) return;
|
||
|
|
|
||
|
|
const container = fileListRef.current;
|
||
|
|
if (!container) return;
|
||
|
|
|
||
|
|
const row = Array.from(container.querySelectorAll<HTMLElement>('[data-sftp-row="true"]'))
|
||
|
|
.find((element) => element.dataset.entryName === selectedName);
|
||
|
|
if (row) {
|
||
|
|
row.scrollIntoView({ block: "nearest" });
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!shouldVirtualize || rowHeight <= 0) return;
|
||
|
|
const itemIndex = sortedDisplayFiles.findIndex((entry) => entry.name === selectedName);
|
||
|
|
if (itemIndex < 0) return;
|
||
|
|
container.scrollTop = getSftpVirtualListScrollTop({
|
||
|
|
itemIndex,
|
||
|
|
rowHeight,
|
||
|
|
currentScrollTop: container.scrollTop,
|
||
|
|
viewportHeight: container.clientHeight,
|
||
|
|
});
|
||
|
|
}, [fileListRef, pane.selectedFiles, rowHeight, shouldVirtualize, sortedDisplayFiles]);
|
||
|
|
|
||
|
|
// Use refs for frequently-changing values in context-menu actions
|
||
|
|
const selectedFilesRef = useRef(pane.selectedFiles);
|
||
|
|
selectedFilesRef.current = pane.selectedFiles;
|
||
|
|
|
||
|
|
const handleBackgroundClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
|
||
|
|
const target = e.target as HTMLElement;
|
||
|
|
if (target.closest('[data-sftp-row="true"]')) return;
|
||
|
|
if (pane.selectedFiles.size === 0) return;
|
||
|
|
onClearSelection();
|
||
|
|
}, [onClearSelection, pane.selectedFiles.size]);
|
||
|
|
|
||
|
|
// Hidden file input backing the "Upload File(s)" context menu item. It sends
|
||
|
|
// the original FileList through uploadFromFileList so Electron can still
|
||
|
|
// resolve local paths for stream uploads.
|
||
|
|
const uploadEnabled = shouldShowSftpUploadFilesMenu({
|
||
|
|
isLocal,
|
||
|
|
hasFileListUpload: !!onUploadExternalFileList,
|
||
|
|
});
|
||
|
|
const folderUploadEnabled = shouldShowSftpUploadFolderMenu({
|
||
|
|
isLocal,
|
||
|
|
hasFolderUpload: !!onUploadExternalFolder,
|
||
|
|
});
|
||
|
|
const uploadInputRef = useRef<HTMLInputElement>(null);
|
||
|
|
const uploadTargetPathRef = useRef<string | undefined>(undefined);
|
||
|
|
|
||
|
|
const triggerUploadPicker = useCallback((targetPath?: string) => {
|
||
|
|
if (isLocal || !onUploadExternalFileList) return;
|
||
|
|
const input = uploadInputRef.current;
|
||
|
|
if (!input) return;
|
||
|
|
uploadTargetPathRef.current = targetPath;
|
||
|
|
// Reset value so selecting the same files twice still fires onChange.
|
||
|
|
input.value = "";
|
||
|
|
input.click();
|
||
|
|
}, [isLocal, onUploadExternalFileList]);
|
||
|
|
|
||
|
|
const handleUploadInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||
|
|
const files = e.target.files;
|
||
|
|
if (!files || files.length === 0) {
|
||
|
|
uploadTargetPathRef.current = undefined;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (!onUploadExternalFileList) {
|
||
|
|
uploadTargetPathRef.current = undefined;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const targetPath = uploadTargetPathRef.current;
|
||
|
|
uploadTargetPathRef.current = undefined;
|
||
|
|
void onUploadExternalFileList(files, targetPath);
|
||
|
|
}, [onUploadExternalFileList]);
|
||
|
|
|
||
|
|
const renderRow = useCallback(
|
||
|
|
(entry: SftpFileEntry, index: number) => (
|
||
|
|
<ContextMenu>
|
||
|
|
<ContextMenuTrigger>
|
||
|
|
<SftpFileRow
|
||
|
|
entry={entry}
|
||
|
|
index={index}
|
||
|
|
isSelected={pane.selectedFiles.has(entry.name)}
|
||
|
|
showSelectionHighlight={isPaneFocused}
|
||
|
|
isDragOver={dragOverEntry === entry.name}
|
||
|
|
columnWidths={columnWidths}
|
||
|
|
visibleColumns={visibleColumns}
|
||
|
|
onSelect={handleRowSelect}
|
||
|
|
onOpen={handleRowOpen}
|
||
|
|
onDragStart={handleFileDragStart}
|
||
|
|
onDragEnd={onDragEnd}
|
||
|
|
onDragOver={handleEntryDragOver}
|
||
|
|
onDragLeave={handleRowDragLeave}
|
||
|
|
onDrop={handleEntryDrop}
|
||
|
|
density={listDensity}
|
||
|
|
/>
|
||
|
|
</ContextMenuTrigger>
|
||
|
|
{entry.name !== ".." && (
|
||
|
|
<ContextMenuContent>
|
||
|
|
<ContextMenuItem onClick={() => handleRowOpen(entry)}>
|
||
|
|
{isNavigableDirectory(entry) ? (
|
||
|
|
<>
|
||
|
|
<Folder size={14} className="mr-2" /> {t("sftp.context.open")}
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
<ExternalLink size={14} className="mr-2" />{" "}
|
||
|
|
{t("sftp.context.open")}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</ContextMenuItem>
|
||
|
|
{isNavigableDirectory(entry) && (
|
||
|
|
<ContextMenuItem onClick={() => onNavigateTo(joinPath(pane.connection.currentPath, entry.name))}>
|
||
|
|
<ArrowRight size={14} className="mr-2" /> {t("sftp.context.navigateTo")}
|
||
|
|
</ContextMenuItem>
|
||
|
|
)}
|
||
|
|
{!isNavigableDirectory(entry) && onOpenFileWithSystemDefault && (
|
||
|
|
<ContextMenuItem onClick={() => onOpenFileWithSystemDefault(entry)}>
|
||
|
|
<AppWindow size={14} className="mr-2" />{" "}
|
||
|
|
{t("sftp.context.openWithDefault")}
|
||
|
|
</ContextMenuItem>
|
||
|
|
)}
|
||
|
|
{!isNavigableDirectory(entry) && onOpenFileWith && (
|
||
|
|
<ContextMenuItem onClick={() => onOpenFileWith(entry)}>
|
||
|
|
<ExternalLink size={14} className="mr-2" />{" "}
|
||
|
|
{t("sftp.context.openWith")}
|
||
|
|
</ContextMenuItem>
|
||
|
|
)}
|
||
|
|
{!isNavigableDirectory(entry) && !isKnownBinaryFile(entry.name) && onEditFile && (
|
||
|
|
<ContextMenuItem onClick={() => onEditFile(entry)}>
|
||
|
|
<Edit2 size={14} className="mr-2" />{" "}
|
||
|
|
{t("sftp.context.edit")}
|
||
|
|
</ContextMenuItem>
|
||
|
|
)}
|
||
|
|
{onDownloadFile &&
|
||
|
|
(!isNavigableDirectory(entry) || !pane.connection?.isLocal) && (
|
||
|
|
<ContextMenuItem
|
||
|
|
onClick={() => {
|
||
|
|
const currentSelected = selectedFilesRef.current;
|
||
|
|
if (
|
||
|
|
onDownloadFiles &&
|
||
|
|
currentSelected.has(entry.name) &&
|
||
|
|
currentSelected.size > 1
|
||
|
|
) {
|
||
|
|
const entries = Array.from(currentSelected)
|
||
|
|
.map((name) => filesByName.get(String(name)))
|
||
|
|
.filter((f): f is SftpFileEntry => !!f);
|
||
|
|
onDownloadFiles(entries);
|
||
|
|
} else {
|
||
|
|
onDownloadFile(entry);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Download size={14} className="mr-2" />{" "}
|
||
|
|
{t("sftp.context.download")}
|
||
|
|
</ContextMenuItem>
|
||
|
|
)}
|
||
|
|
{!isNavigableDirectory(entry) && onExtractArchive && isExtractableArchive(entry.name) && (
|
||
|
|
<ContextMenuItem onClick={() => onExtractArchive(entry)}>
|
||
|
|
<Archive size={14} className="mr-2" />{" "}
|
||
|
|
{t("sftp.context.extract")}
|
||
|
|
</ContextMenuItem>
|
||
|
|
)}
|
||
|
|
<ContextMenuSeparator />
|
||
|
|
<ContextMenuItem
|
||
|
|
onClick={() => {
|
||
|
|
const currentSelected = selectedFilesRef.current;
|
||
|
|
const files = currentSelected.has(entry.name)
|
||
|
|
? Array.from(currentSelected)
|
||
|
|
: [entry.name];
|
||
|
|
const fileData = files.map((name) => {
|
||
|
|
const fileName = String(name);
|
||
|
|
const file = filesByName.get(fileName);
|
||
|
|
return {
|
||
|
|
name: fileName,
|
||
|
|
isDirectory: file ? isNavigableDirectory(file) : false,
|
||
|
|
sourceConnectionId: pane.connection?.id,
|
||
|
|
sourcePath: pane.connection?.currentPath,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
onCopyToOtherPane(fileData);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Copy size={14} className="mr-2" />{" "}
|
||
|
|
{t("sftp.context.copyToOtherPane")}
|
||
|
|
</ContextMenuItem>
|
||
|
|
<ContextMenuItem
|
||
|
|
onClick={() => {
|
||
|
|
navigator.clipboard.writeText(joinPath(pane.connection.currentPath, entry.name));
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<ClipboardCopy size={14} className="mr-2" />{" "}
|
||
|
|
{t("sftp.context.copyPath")}
|
||
|
|
</ContextMenuItem>
|
||
|
|
<ContextMenuSeparator />
|
||
|
|
{(() => {
|
||
|
|
const sourceParent = getParentPath(joinPath(pane.connection?.currentPath ?? "", entry.name));
|
||
|
|
const targetParent = getParentPath(sourceParent);
|
||
|
|
if (sourceParent === targetParent) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ContextMenuItem
|
||
|
|
onClick={() => {
|
||
|
|
const currentSelected = selectedFilesRef.current;
|
||
|
|
const sourcePaths = currentSelected.has(entry.name)
|
||
|
|
? Array.from(currentSelected as Set<string>).map((n) => joinPath(pane.connection?.currentPath ?? "", n))
|
||
|
|
: [joinPath(pane.connection?.currentPath ?? "", entry.name)];
|
||
|
|
void onMoveEntriesToPath(sourcePaths, targetParent);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<ArrowUp size={14} className="mr-2" />{" "}
|
||
|
|
{t("sftp.context.moveToParent")}
|
||
|
|
</ContextMenuItem>
|
||
|
|
);
|
||
|
|
})()}
|
||
|
|
<ContextMenuItem onClick={() => openRenameDialog(joinPath(pane.connection?.currentPath ?? "", entry.name))}>
|
||
|
|
<Pencil size={14} className="mr-2" /> {t("common.rename")}
|
||
|
|
</ContextMenuItem>
|
||
|
|
{onEditPermissions && pane.connection && !pane.connection.isLocal && (
|
||
|
|
<ContextMenuItem onClick={() => onEditPermissions(entry)}>
|
||
|
|
<Shield size={14} className="mr-2" />{" "}
|
||
|
|
{t("sftp.context.permissions")}
|
||
|
|
</ContextMenuItem>
|
||
|
|
)}
|
||
|
|
<ContextMenuItem
|
||
|
|
className="text-destructive"
|
||
|
|
onClick={() => {
|
||
|
|
const currentSelected = selectedFilesRef.current;
|
||
|
|
const files = currentSelected.has(entry.name)
|
||
|
|
? Array.from(currentSelected as Set<string>).map((n) => joinPath(pane.connection?.currentPath ?? "", n))
|
||
|
|
: [joinPath(pane.connection?.currentPath ?? "", entry.name)];
|
||
|
|
openDeleteConfirm(files);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Trash2 size={14} className="mr-2" /> {t("action.delete")}
|
||
|
|
</ContextMenuItem>
|
||
|
|
<ContextMenuSeparator />
|
||
|
|
<ContextMenuItem onClick={onRefresh}>
|
||
|
|
<RefreshCw size={14} className="mr-2" /> {t("common.refresh")}
|
||
|
|
</ContextMenuItem>
|
||
|
|
<ContextMenuItem onClick={() => setShowNewFolderDialog(true)}>
|
||
|
|
<FolderPlus size={14} className="mr-2" /> {t("sftp.newFolder")}
|
||
|
|
</ContextMenuItem>
|
||
|
|
<ContextMenuItem onClick={() => setShowNewFileDialog(true)}>
|
||
|
|
<FilePlus size={14} className="mr-2" /> {t("sftp.newFile")}
|
||
|
|
</ContextMenuItem>
|
||
|
|
{uploadEnabled && onUploadExternalFileList && (
|
||
|
|
<ContextMenuItem
|
||
|
|
onClick={() => {
|
||
|
|
const target = getSftpListUploadFilesTargetPath(entry, pane.connection?.currentPath ?? "");
|
||
|
|
triggerUploadPicker(target);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Upload size={14} className="mr-2" />{" "}
|
||
|
|
{t(getSftpUploadFilesLabelKey(entry))}
|
||
|
|
</ContextMenuItem>
|
||
|
|
)}
|
||
|
|
{folderUploadEnabled && onUploadExternalFolder && (
|
||
|
|
<ContextMenuItem
|
||
|
|
onClick={() => {
|
||
|
|
const target = getSftpListUploadFilesTargetPath(entry, pane.connection?.currentPath ?? "");
|
||
|
|
void onUploadExternalFolder(target);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Upload size={14} className="mr-2" />{" "}
|
||
|
|
{t(getSftpUploadFolderLabelKey(entry))}
|
||
|
|
</ContextMenuItem>
|
||
|
|
)}
|
||
|
|
</ContextMenuContent>
|
||
|
|
)}
|
||
|
|
</ContextMenu>
|
||
|
|
),
|
||
|
|
[
|
||
|
|
columnWidths,
|
||
|
|
visibleColumns,
|
||
|
|
filesByName,
|
||
|
|
handleEntryDragOver,
|
||
|
|
handleEntryDrop,
|
||
|
|
handleFileDragStart,
|
||
|
|
handleRowDragLeave,
|
||
|
|
handleRowOpen,
|
||
|
|
handleRowSelect,
|
||
|
|
dragOverEntry,
|
||
|
|
isPaneFocused,
|
||
|
|
onCopyToOtherPane,
|
||
|
|
onMoveEntriesToPath,
|
||
|
|
onDownloadFile,
|
||
|
|
onDownloadFiles,
|
||
|
|
onExtractArchive,
|
||
|
|
onDragEnd,
|
||
|
|
onEditFile,
|
||
|
|
onEditPermissions,
|
||
|
|
onNavigateTo,
|
||
|
|
onOpenFileWithSystemDefault,
|
||
|
|
onOpenFileWith,
|
||
|
|
onRefresh,
|
||
|
|
onUploadExternalFileList,
|
||
|
|
onUploadExternalFolder,
|
||
|
|
uploadEnabled,
|
||
|
|
folderUploadEnabled,
|
||
|
|
openDeleteConfirm,
|
||
|
|
openRenameDialog,
|
||
|
|
pane.connection,
|
||
|
|
pane.selectedFiles,
|
||
|
|
listDensity,
|
||
|
|
setShowNewFolderDialog,
|
||
|
|
setShowNewFileDialog,
|
||
|
|
t,
|
||
|
|
triggerUploadPicker,
|
||
|
|
],
|
||
|
|
);
|
||
|
|
|
||
|
|
const fileRows = useMemo(
|
||
|
|
() =>
|
||
|
|
shouldVirtualize
|
||
|
|
? visibleRows.map(({ entry, index, top }) => (
|
||
|
|
<div
|
||
|
|
key={entry.name}
|
||
|
|
className="absolute left-0 right-0 border-b border-border/30"
|
||
|
|
style={{ top, height: rowHeight }}
|
||
|
|
>
|
||
|
|
{renderRow(entry, index)}
|
||
|
|
</div>
|
||
|
|
))
|
||
|
|
: sortedDisplayFiles.map((entry, index) => (
|
||
|
|
<React.Fragment key={entry.name}>
|
||
|
|
{renderRow(entry, index)}
|
||
|
|
</React.Fragment>
|
||
|
|
)),
|
||
|
|
[
|
||
|
|
renderRow,
|
||
|
|
rowHeight,
|
||
|
|
shouldVirtualize,
|
||
|
|
sortedDisplayFiles,
|
||
|
|
visibleRows,
|
||
|
|
],
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{/* File list header */}
|
||
|
|
<ContextMenu>
|
||
|
|
<ContextMenuTrigger asChild>
|
||
|
|
<div
|
||
|
|
className="text-[11px] uppercase tracking-wide text-muted-foreground px-4 py-2 border-b border-border/40 bg-secondary/10 select-none"
|
||
|
|
data-section="terminal-sftp-list-header"
|
||
|
|
tabIndex={0}
|
||
|
|
aria-label={t("sftp.columns.configure")}
|
||
|
|
onKeyDown={(e) => {
|
||
|
|
if (!isSftpColumnMenuKey(e.key, e.shiftKey)) return;
|
||
|
|
e.preventDefault();
|
||
|
|
const rect = e.currentTarget.getBoundingClientRect();
|
||
|
|
e.currentTarget.dispatchEvent(new MouseEvent("contextmenu", {
|
||
|
|
bubbles: true,
|
||
|
|
cancelable: true,
|
||
|
|
clientX: rect.left + 16,
|
||
|
|
clientY: rect.top + rect.height / 2,
|
||
|
|
}));
|
||
|
|
}}
|
||
|
|
style={{
|
||
|
|
display: "grid",
|
||
|
|
gridTemplateColumns: buildSftpColumnTemplate(columnWidths, visibleColumns),
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="flex min-w-0 items-center gap-1 cursor-pointer hover:text-foreground relative pr-2 overflow-hidden"
|
||
|
|
onClick={() => handleSort("name")}
|
||
|
|
>
|
||
|
|
<span className="truncate whitespace-nowrap">{t("sftp.columns.name")}</span>
|
||
|
|
{sortField === "name" && (
|
||
|
|
<span className="shrink-0 text-primary">
|
||
|
|
{sortOrder === "asc" ? "↑" : "↓"}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
<div
|
||
|
|
className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/50 transition-colors"
|
||
|
|
onMouseDown={(e) => handleResizeStart("name", e)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
{visibleColumns.modified && (
|
||
|
|
<div
|
||
|
|
className="flex min-w-0 items-center gap-1 cursor-pointer hover:text-foreground relative pr-2 overflow-hidden"
|
||
|
|
onClick={() => handleSort("modified")}
|
||
|
|
>
|
||
|
|
<span className="truncate whitespace-nowrap">{t("sftp.columns.modified")}</span>
|
||
|
|
{sortField === "modified" && (
|
||
|
|
<span className="shrink-0 text-primary">
|
||
|
|
{sortOrder === "asc" ? "↑" : "↓"}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
<div
|
||
|
|
className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/50 transition-colors"
|
||
|
|
onMouseDown={(e) => handleResizeStart("modified", e)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{visibleColumns.size && (
|
||
|
|
<div
|
||
|
|
className="flex min-w-0 items-center gap-1 cursor-pointer hover:text-foreground relative pr-2 justify-end overflow-hidden"
|
||
|
|
onClick={() => handleSort("size")}
|
||
|
|
>
|
||
|
|
{sortField === "size" && (
|
||
|
|
<span className="shrink-0 text-primary">
|
||
|
|
{sortOrder === "asc" ? "↑" : "↓"}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
<span className="truncate whitespace-nowrap">{t("sftp.columns.size")}</span>
|
||
|
|
<div
|
||
|
|
className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/50 transition-colors"
|
||
|
|
onMouseDown={(e) => handleResizeStart("size", e)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{visibleColumns.type && (
|
||
|
|
<div
|
||
|
|
className="flex min-w-0 items-center gap-1 cursor-pointer hover:text-foreground relative pr-2 justify-end overflow-hidden"
|
||
|
|
onClick={() => handleSort("type")}
|
||
|
|
>
|
||
|
|
{sortField === "type" && (
|
||
|
|
<span className="shrink-0 text-primary">
|
||
|
|
{sortOrder === "asc" ? "↑" : "↓"}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
<span className="truncate whitespace-nowrap">{t("sftp.columns.kind")}</span>
|
||
|
|
<div
|
||
|
|
className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/50 transition-colors"
|
||
|
|
onMouseDown={(e) => handleResizeStart("type", e)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{visibleColumns.owner && (
|
||
|
|
<div
|
||
|
|
className="flex min-w-0 items-center gap-1 cursor-pointer hover:text-foreground justify-end overflow-hidden"
|
||
|
|
onClick={() => handleSort("owner")}
|
||
|
|
>
|
||
|
|
{sortField === "owner" && (
|
||
|
|
<span className="shrink-0 text-primary">
|
||
|
|
{sortOrder === "asc" ? "↑" : "↓"}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
<span className="truncate whitespace-nowrap">{t("sftp.columns.owner")}</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</ContextMenuTrigger>
|
||
|
|
<ContextMenuContent>
|
||
|
|
<SftpColumnMenuItems
|
||
|
|
visibleColumns={visibleColumns}
|
||
|
|
directoriesFirst={directoriesFirst}
|
||
|
|
toggleColumnVisibility={toggleColumnVisibility}
|
||
|
|
toggleDirectoriesFirst={toggleDirectoriesFirst}
|
||
|
|
/>
|
||
|
|
</ContextMenuContent>
|
||
|
|
</ContextMenu>
|
||
|
|
|
||
|
|
{/* File list with empty area context menu */}
|
||
|
|
<ContextMenu>
|
||
|
|
<ContextMenuTrigger asChild>
|
||
|
|
<div
|
||
|
|
ref={fileListRef}
|
||
|
|
data-section="terminal-sftp-list"
|
||
|
|
className={cn(
|
||
|
|
"flex-1 min-h-0 overflow-y-auto relative",
|
||
|
|
isDragOverPane && "ring-2 ring-primary/30 ring-inset",
|
||
|
|
)}
|
||
|
|
onClick={handleBackgroundClick}
|
||
|
|
onScroll={handleFileListScroll}
|
||
|
|
>
|
||
|
|
{pane.loading && sortedDisplayFiles.length === 0 ? (
|
||
|
|
<div className="flex flex-col items-center justify-center h-full gap-2">
|
||
|
|
<Loader2 size={24} className="animate-spin text-muted-foreground" />
|
||
|
|
{pane.connectionLogs.length > 0 && (
|
||
|
|
<div className="w-full max-w-sm mt-2 space-y-0.5 px-4">
|
||
|
|
{pane.connectionLogs.map((log, i) => (
|
||
|
|
<div key={i} className="text-[11px] text-muted-foreground truncate">
|
||
|
|
{log}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
) : pane.error && !pane.reconnecting ? (
|
||
|
|
<SftpErrorWithLogs
|
||
|
|
error={pane.error}
|
||
|
|
connectionLogs={pane.connectionLogs}
|
||
|
|
onRetry={onRefresh}
|
||
|
|
t={t}
|
||
|
|
/>
|
||
|
|
) : sortedDisplayFiles.length === 0 ? (
|
||
|
|
<div className="flex flex-col items-center justify-center h-full text-muted-foreground">
|
||
|
|
<Folder size={32} className="mb-2 opacity-50" />
|
||
|
|
<span className="text-sm">{t("sftp.emptyDirectory")}</span>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
shouldVirtualize ? "relative" : "divide-y divide-border/30",
|
||
|
|
)}
|
||
|
|
style={shouldVirtualize ? { height: totalHeight } : undefined}
|
||
|
|
>
|
||
|
|
{fileRows}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Drop overlay */}
|
||
|
|
{isDragOverPane && draggedFiles && draggedFiles[0]?.side !== side && (
|
||
|
|
<div className="absolute inset-0 flex items-center justify-center bg-primary/5 pointer-events-none">
|
||
|
|
<div className="flex flex-col items-center gap-2 text-primary">
|
||
|
|
<ArrowDown size={32} />
|
||
|
|
<span className="text-sm font-medium">{t("sftp.dropFilesHere")}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</ContextMenuTrigger>
|
||
|
|
<ContextMenuContent>
|
||
|
|
<ContextMenuItem onClick={onRefresh}>
|
||
|
|
<RefreshCw size={14} className="mr-2" />{t("sftp.context.refresh")}
|
||
|
|
</ContextMenuItem>
|
||
|
|
<ContextMenuItem onClick={() => setShowNewFolderDialog(true)}>
|
||
|
|
<FolderPlus size={14} className="mr-2" />{t("sftp.newFolder")}
|
||
|
|
</ContextMenuItem>
|
||
|
|
<ContextMenuItem onClick={() => {
|
||
|
|
const defaultName = getNextUntitledName(pane.files.map(f => f.name));
|
||
|
|
setNewFileName(defaultName);
|
||
|
|
setFileNameError(null);
|
||
|
|
setShowNewFileDialog(true);
|
||
|
|
}}>
|
||
|
|
<FilePlus size={14} className="mr-2" />{t("sftp.newFile")}
|
||
|
|
</ContextMenuItem>
|
||
|
|
{uploadEnabled && onUploadExternalFileList && (
|
||
|
|
<ContextMenuItem onClick={() => triggerUploadPicker(undefined)}>
|
||
|
|
<Upload size={14} className="mr-2" />{t("sftp.context.uploadFiles")}
|
||
|
|
</ContextMenuItem>
|
||
|
|
)}
|
||
|
|
{folderUploadEnabled && onUploadExternalFolder && (
|
||
|
|
<ContextMenuItem onClick={() => void onUploadExternalFolder(undefined)}>
|
||
|
|
<Upload size={14} className="mr-2" />{t("sftp.context.uploadFolder")}
|
||
|
|
</ContextMenuItem>
|
||
|
|
)}
|
||
|
|
</ContextMenuContent>
|
||
|
|
</ContextMenu>
|
||
|
|
|
||
|
|
{/* Hidden file input backing the "Upload File(s)" context menu item. */}
|
||
|
|
{uploadEnabled && onUploadExternalFileList && (
|
||
|
|
<input
|
||
|
|
ref={uploadInputRef}
|
||
|
|
type="file"
|
||
|
|
multiple
|
||
|
|
className="hidden"
|
||
|
|
onChange={handleUploadInputChange}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Footer */}
|
||
|
|
<div className="h-9 shrink-0 px-4 flex items-center justify-between text-[11px] text-muted-foreground border-t border-border/40 bg-secondary/30">
|
||
|
|
<span>
|
||
|
|
{t("sftp.itemsCount", {
|
||
|
|
count: sortedDisplayFiles.length - (sortedDisplayFiles[0]?.name === ".." ? 1 : 0),
|
||
|
|
})}
|
||
|
|
{pane.selectedFiles.size > 0 &&
|
||
|
|
` - ${t("sftp.selectedCount", { count: pane.selectedFiles.size })}`}
|
||
|
|
</span>
|
||
|
|
<span className="truncate max-w-[200px]">
|
||
|
|
{pane.connection.currentPath}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Loading overlay - covers entire pane when navigating or reconnecting */}
|
||
|
|
{pane.loading && !pane.connection?.reusedConnection && sortedDisplayFiles.length > 0 && !pane.reconnecting && (
|
||
|
|
<div className="absolute inset-0 flex flex-col items-center justify-center bg-background/40 backdrop-blur-[1px] z-10">
|
||
|
|
<Loader2 size={24} className="animate-spin text-muted-foreground" />
|
||
|
|
{pane.connectionLogs.length > 0 && (
|
||
|
|
<div className="w-full max-w-sm mt-2 space-y-0.5 px-4">
|
||
|
|
{pane.connectionLogs.map((log, i) => (
|
||
|
|
<div key={i} className="text-[11px] text-muted-foreground truncate">
|
||
|
|
{log}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Reconnecting overlay - shows when SFTP connection is lost and reconnecting */}
|
||
|
|
{pane.reconnecting && (
|
||
|
|
<div className="absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-20">
|
||
|
|
<div className="flex flex-col items-center gap-3 p-6 rounded-xl bg-secondary/90 border border-border/60 shadow-lg">
|
||
|
|
<Loader2 size={32} className="animate-spin text-primary" />
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="text-sm font-medium">{t("sftp.reconnecting.title")}</div>
|
||
|
|
<div className="text-xs text-muted-foreground mt-1">{t("sftp.reconnecting.desc")}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
});
|