Files
Termix/src/ui/desktop/apps/features/file-manager/FileManager.tsx
T

2577 lines
75 KiB
TypeScript
Raw Normal View History

+4
2026-02-12 22:28:13 -06:00
import React, {
useState,
useEffect,
useRef,
useCallback,
useMemo,
} from "react";
+1
2025-12-31 22:20:12 -06:00
import { FileManagerGrid } from "./FileManagerGrid.tsx";
import { FileManagerSidebar } from "./FileManagerSidebar.tsx";
import { FileManagerContextMenu } from "./FileManagerContextMenu.tsx";
import { useFileSelection } from "./hooks/useFileSelection.ts";
import { useDragAndDrop } from "./hooks/useDragAndDrop.ts";
import {
WindowManager,
useWindowManager,
} from "./components/WindowManager.tsx";
import { FileWindow } from "./components/FileWindow.tsx";
import { DiffWindow } from "./components/DiffWindow.tsx";
import { useDragToDesktop } from "../../../../hooks/useDragToDesktop.ts";
import { useDragToSystemDesktop } from "../../../../hooks/useDragToSystemDesktop.ts";
2025-10-06 10:11:25 -05:00
import { useConfirmation } from "@/hooks/use-confirmation.ts";
+1
2025-12-31 22:20:12 -06:00
import { Button } from "@/components/ui/button.tsx";
import { Input } from "@/components/ui/input.tsx";
2025-09-12 14:42:00 -05:00
import { toast } from "sonner";
import { useTranslation } from "react-i18next";
2026-01-24 19:49:42 -06:00
import { TOTPDialog } from "@/ui/desktop/navigation/dialogs/TOTPDialog.tsx";
import { SSHAuthDialog } from "@/ui/desktop/navigation/dialogs/SSHAuthDialog.tsx";
import { WarpgateDialog } from "@/ui/desktop/navigation/dialogs/WarpgateDialog.tsx";
+1
2025-12-31 22:20:12 -06:00
import { PermissionsDialog } from "./components/PermissionsDialog.tsx";
import { CompressDialog } from "./components/CompressDialog.tsx";
2026-01-24 19:49:42 -06:00
import { SudoPasswordDialog } from "./SudoPasswordDialog.tsx";
2025-09-12 14:42:00 -05:00
import {
2025-10-01 15:40:10 -05:00
Upload,
FolderPlus,
FilePlus,
RefreshCw,
Search,
Grid3X3,
List,
+5
2026-03-08 18:02:14 -05:00
ArrowUpDown,
2025-10-01 15:40:10 -05:00
} from "lucide-react";
+5
2026-03-08 18:02:14 -05:00
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu.tsx";
+1
2025-12-31 22:20:12 -06:00
import { TerminalWindow } from "./components/TerminalWindow.tsx";
2025-10-01 15:40:10 -05:00
import type { SSHHost, FileItem } from "../../../types/index.js";
2026-01-24 19:49:42 -06:00
import {
ConnectionLogProvider,
useConnectionLog,
} from "@/ui/desktop/navigation/connection-log/ConnectionLogContext.tsx";
import { ConnectionLog } from "@/ui/desktop/navigation/connection-log/ConnectionLog.tsx";
import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader.tsx";
2025-10-01 15:40:10 -05:00
import {
listSSHFiles,
+5
2026-03-08 18:02:14 -05:00
resolveSSHPath,
2025-10-01 15:40:10 -05:00
uploadSSHFile,
downloadSSHFile,
createSSHFile,
createSSHFolder,
deleteSSHItem,
copySSHItem,
renameSSHItem,
moveSSHItem,
2025-09-12 14:42:00 -05:00
connectSSH,
+7
2025-11-05 10:36:16 -06:00
verifySSHTOTP,
2026-01-24 19:49:42 -06:00
verifySSHWarpgate,
2025-10-01 15:40:10 -05:00
getSSHStatus,
keepSSHAlive,
identifySSHSymlink,
addRecentFile,
addPinnedFile,
removePinnedFile,
removeRecentFile,
addFolderShortcut,
getPinnedFiles,
+7
2025-11-05 10:36:16 -06:00
logActivity,
2025-11-17 09:46:05 -06:00
changeSSHPermissions,
extractSSHArchive,
compressSSHFiles,
2026-01-24 19:49:42 -06:00
setSudoPassword,
2025-09-12 14:42:00 -05:00
} from "@/ui/main-axios.ts";
+1
2025-12-31 22:20:12 -06:00
import type { SidebarItem } from "./FileManagerSidebar.tsx";
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
interface FileManagerProps {
2025-09-12 14:42:00 -05:00
initialHost?: SSHHost | null;
onClose?: () => void;
2025-10-01 15:40:10 -05:00
}
interface CreateIntent {
id: string;
type: "file" | "directory";
defaultName: string;
currentName: string;
}
function formatFileSize(bytes?: number): string {
if (bytes === undefined || bytes === null) return "-";
if (bytes === 0) return "0 B";
const units = ["B", "KB", "MB", "GB", "TB"];
let size = bytes;
let unitIndex = 0;
while (size >= 1024 && unitIndex < units.length - 1) {
size /= 1024;
unitIndex++;
}
const formattedSize =
size < 10 && unitIndex > 0 ? size.toFixed(1) : Math.round(size).toString();
return `${formattedSize} ${units[unitIndex]}`;
}
function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
const { openWindow } = useWindowManager();
2025-09-12 14:42:00 -05:00
const { t } = useTranslation();
2025-10-06 10:11:25 -05:00
const { confirmWithToast } = useConfirmation();
2026-01-24 19:49:42 -06:00
const {
addLog,
clearLogs,
isExpanded: isConnectionLogExpanded,
} = useConnectionLog();
2025-09-12 14:42:00 -05:00
+7
2025-11-05 10:36:16 -06:00
const [currentHost] = useState<SSHHost | null>(initialHost || null);
2025-10-01 15:40:10 -05:00
const [currentPath, setCurrentPath] = useState(
initialHost?.defaultPath || "/",
);
const [files, setFiles] = useState<FileItem[]>([]);
const [isLoading, setIsLoading] = useState(false);
const [sshSessionId, setSshSessionId] = useState<string | null>(null);
const [isReconnecting, setIsReconnecting] = useState<boolean>(false);
const [searchQuery, setSearchQuery] = useState("");
const [lastRefreshTime, setLastRefreshTime] = useState<number>(0);
2025-11-17 09:46:05 -06:00
const [viewMode, setViewMode] = useState<"grid" | "list">(() => {
const saved = localStorage.getItem("fileManagerViewMode");
return saved === "grid" || saved === "list" ? saved : "grid";
});
+5
2026-03-08 18:02:14 -05:00
const [sortBy, setSortBy] = useState<"name" | "modified" | "size">(() => {
const saved = localStorage.getItem("fileManagerSortBy");
return saved === "name" || saved === "modified" || saved === "size"
? saved
: "name";
});
const [sortOrder, setSortOrder] = useState<"asc" | "desc">(() => {
const saved = localStorage.getItem("fileManagerSortOrder");
return saved === "asc" || saved === "desc" ? saved : "asc";
});
+7
2025-11-05 10:36:16 -06:00
const [totpRequired, setTotpRequired] = useState(false);
const [totpSessionId, setTotpSessionId] = useState<string | null>(null);
const [totpPrompt, setTotpPrompt] = useState<string>("");
2026-01-24 19:49:42 -06:00
const [warpgateRequired, setWarpgateRequired] = useState(false);
const [warpgateSessionId, setWarpgateSessionId] = useState<string | null>(
null,
);
const [warpgateUrl, setWarpgateUrl] = useState<string>("");
const [warpgateSecurityKey, setWarpgateSecurityKey] = useState<string>("");
+7
2025-11-05 10:36:16 -06:00
const [showAuthDialog, setShowAuthDialog] = useState(false);
const [authDialogReason, setAuthDialogReason] = useState<
"no_keyboard" | "auth_failed" | "timeout"
>("no_keyboard");
2025-10-01 15:40:10 -05:00
const [pinnedFiles, setPinnedFiles] = useState<Set<string>>(new Set());
const [sidebarRefreshTrigger, setSidebarRefreshTrigger] = useState(0);
const [isClosing, setIsClosing] = useState<boolean>(false);
2026-01-24 19:49:42 -06:00
const [hasConnectionError, setHasConnectionError] = useState<boolean>(false);
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
const [contextMenu, setContextMenu] = useState<{
x: number;
y: number;
isVisible: boolean;
files: FileItem[];
}>({
x: 0,
y: 0,
isVisible: false,
files: [],
});
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
const [clipboard, setClipboard] = useState<{
files: FileItem[];
operation: "copy" | "cut";
} | null>(null);
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
interface UndoAction {
type: "copy" | "cut" | "delete";
description: string;
data: {
operation: "copy" | "cut";
copiedFiles?: {
originalPath: string;
targetPath: string;
targetName: string;
}[];
deletedFiles?: { path: string; name: string }[];
targetDirectory?: string;
};
timestamp: number;
}
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
const [undoHistory, setUndoHistory] = useState<UndoAction[]>([]);
const [createIntent, setCreateIntent] = useState<CreateIntent | null>(null);
const [editingFile, setEditingFile] = useState<FileItem | null>(null);
2025-11-17 09:46:05 -06:00
const [permissionsDialogFile, setPermissionsDialogFile] =
useState<FileItem | null>(null);
const [compressDialogFiles, setCompressDialogFiles] = useState<FileItem[]>(
[],
);
2025-10-01 15:40:10 -05:00
2026-01-24 19:49:42 -06:00
const [sudoDialogOpen, setSudoDialogOpen] = useState(false);
const [pendingSudoOperation, setPendingSudoOperation] = useState<
| { type: "delete"; files: FileItem[] }
| { type: "navigate"; path: string }
| null
>(null);
+7
2025-11-05 10:36:16 -06:00
const { selectedFiles, clearSelection, setSelection } = useFileSelection();
2025-10-01 15:40:10 -05:00
+7
2025-11-05 10:36:16 -06:00
const { dragHandlers } = useDragAndDrop({
2025-10-01 15:40:10 -05:00
onFilesDropped: handleFilesDropped,
onError: (error) => toast.error(error),
maxFileSize: 5120,
});
const dragToDesktop = useDragToDesktop({
sshSessionId: sshSessionId || "",
sshHost: currentHost!,
});
const systemDrag = useDragToSystemDesktop({
sshSessionId: sshSessionId || "",
sshHost: currentHost!,
});
const startKeepalive = useCallback(() => {
if (!sshSessionId) return;
if (keepaliveTimerRef.current) {
clearInterval(keepaliveTimerRef.current);
2025-09-12 14:42:00 -05:00
}
2025-10-01 15:40:10 -05:00
keepaliveTimerRef.current = setInterval(async () => {
if (sshSessionId) {
try {
await keepSSHAlive(sshSessionId);
} catch (error) {
console.error("SSH keepalive failed:", error);
}
}
}, 30 * 1000);
}, [sshSessionId]);
const stopKeepalive = useCallback(() => {
if (keepaliveTimerRef.current) {
clearInterval(keepaliveTimerRef.current);
keepaliveTimerRef.current = null;
}
}, []);
const handleCloseWithError = useCallback(
(errorMessage: string) => {
2026-01-24 19:49:42 -06:00
setHasConnectionError(true);
addLog({
type: "error",
stage: "connection",
message: errorMessage,
});
2025-10-01 15:40:10 -05:00
},
2026-01-24 19:49:42 -06:00
[addLog],
2025-10-01 15:40:10 -05:00
);
2025-09-12 14:42:00 -05:00
useEffect(() => {
if (currentHost) {
2025-10-01 15:40:10 -05:00
initializeSSHConnection();
2025-09-12 14:42:00 -05:00
}
}, [currentHost]);
useEffect(() => {
2025-10-01 15:40:10 -05:00
if (sshSessionId) {
startKeepalive();
} else {
stopKeepalive();
2025-09-12 14:42:00 -05:00
}
2025-10-01 15:40:10 -05:00
return () => {
stopKeepalive();
};
}, [sshSessionId, startKeepalive, stopKeepalive]);
const initialLoadDoneRef = useRef(false);
const lastPathChangeRef = useRef<string>("");
const pathChangeTimerRef = useRef<NodeJS.Timeout | null>(null);
const currentLoadingPathRef = useRef<string>("");
const keepaliveTimerRef = useRef<NodeJS.Timeout | null>(null);
+7
2025-11-05 10:36:16 -06:00
const activityLoggedRef = useRef(false);
const activityLoggingRef = useRef(false);
const logFileManagerActivity = useCallback(async () => {
if (
!currentHost?.id ||
activityLoggedRef.current ||
activityLoggingRef.current
) {
return;
}
activityLoggingRef.current = true;
activityLoggedRef.current = true;
try {
const hostName =
currentHost.name || `${currentHost.username}@${currentHost.ip}`;
await logActivity("file_manager", currentHost.id, hostName);
} catch (err) {
console.warn("Failed to log file manager activity:", err);
activityLoggedRef.current = false;
} finally {
activityLoggingRef.current = false;
}
}, [currentHost]);
2025-10-01 15:40:10 -05:00
const handleFileDragStart = useCallback(
(files: FileItem[]) => {
systemDrag.startDragToSystem(files, {
enableToast: true,
onSuccess: () => {
clearSelection();
},
onError: (error) => {
console.error("Drag failed:", error);
},
});
},
[systemDrag, clearSelection],
);
const handleFileDragEnd = useCallback(
(e: DragEvent, draggedFiles: FileItem[]) => {
const isOutside =
e.clientX < 0 ||
e.clientX > window.innerWidth ||
e.clientY < 0 ||
e.clientY > window.innerHeight;
if (isOutside) {
if (draggedFiles.length === 0) {
console.error("No files to drag - this should not happen");
return;
}
systemDrag.startDragToSystem(draggedFiles, {
enableToast: true,
onSuccess: () => {
clearSelection();
},
onError: (error) => {
console.error("Drag failed:", error);
},
});
systemDrag.handleDragEnd(e);
} else {
systemDrag.cancelDragToSystem();
}
},
[systemDrag, clearSelection],
);
+7
2025-11-05 10:36:16 -06:00
const isConnectingRef = useRef(false);
2025-10-01 15:40:10 -05:00
async function initializeSSHConnection() {
+7
2025-11-05 10:36:16 -06:00
if (!currentHost || isConnectingRef.current) return;
isConnectingRef.current = true;
2025-09-12 14:42:00 -05:00
try {
2025-10-01 15:40:10 -05:00
setIsLoading(true);
initialLoadDoneRef.current = false;
2026-01-24 19:49:42 -06:00
setHasConnectionError(false);
clearLogs();
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
const sessionId = currentHost.id.toString();
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
const result = await connectSSH(sessionId, {
hostId: currentHost.id,
ip: currentHost.ip,
port: currentHost.port,
username: currentHost.username,
password: currentHost.password,
sshKey: currentHost.key,
keyPassword: currentHost.keyPassword,
authType: currentHost.authType,
credentialId: currentHost.credentialId,
userId: currentHost.userId,
+7
2025-11-05 10:36:16 -06:00
forceKeyboardInteractive: currentHost.forceKeyboardInteractive,
+1
2025-12-31 22:20:12 -06:00
jumpHosts: currentHost.jumpHosts,
useSocks5: currentHost.useSocks5,
socks5Host: currentHost.socks5Host,
socks5Port: currentHost.socks5Port,
socks5Username: currentHost.socks5Username,
socks5Password: currentHost.socks5Password,
socks5ProxyChain: currentHost.socks5ProxyChain,
2025-10-01 15:40:10 -05:00
});
2025-09-12 14:42:00 -05:00
2026-01-24 19:49:42 -06:00
if (result?.requires_warpgate) {
setWarpgateRequired(true);
setWarpgateSessionId(sessionId);
setWarpgateUrl(result.url || "");
setWarpgateSecurityKey(result.securityKey || "N/A");
setIsLoading(false);
return;
}
+7
2025-11-05 10:36:16 -06:00
if (result?.requires_totp) {
setTotpRequired(true);
setTotpSessionId(sessionId);
+1
2025-12-31 22:20:12 -06:00
setTotpPrompt(result.prompt || t("fileManager.verificationCodePrompt"));
+7
2025-11-05 10:36:16 -06:00
setIsLoading(false);
return;
}
if (result?.status === "auth_required") {
setAuthDialogReason(result.reason || "no_keyboard");
setShowAuthDialog(true);
setIsLoading(false);
return;
}
2025-10-01 15:40:10 -05:00
setSshSessionId(sessionId);
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
try {
const response = await listSSHFiles(sessionId, currentPath);
const files = Array.isArray(response)
? response
: response?.files || [];
setFiles(files);
clearSelection();
initialLoadDoneRef.current = true;
+7
2025-11-05 10:36:16 -06:00
if (!result?.requires_totp) {
logFileManagerActivity();
}
} catch (dirError: unknown) {
2025-10-01 15:40:10 -05:00
console.error("Failed to load initial directory:", dirError);
2025-09-12 14:42:00 -05:00
}
2026-01-24 19:49:42 -06:00
} catch (error: any) {
2025-10-01 15:40:10 -05:00
console.error("SSH connection failed:", error);
2026-01-24 19:49:42 -06:00
if (error?.connectionLogs) {
error.connectionLogs.forEach((log: any) => {
addLog({
type: log.type,
stage: log.stage,
message: log.message,
details: log.details,
});
});
if (error.requires_totp) {
setTotpRequired(true);
setTotpSessionId(error.sessionId || currentHost.id.toString());
setTotpPrompt(
error.prompt || t("fileManager.verificationCodePrompt"),
);
setIsLoading(false);
return;
}
if (error.requires_warpgate) {
setWarpgateRequired(true);
setWarpgateSessionId(error.sessionId || currentHost.id.toString());
setWarpgateUrl(error.url || "");
setWarpgateSecurityKey(error.securityKey || "N/A");
setIsLoading(false);
return;
}
if (error.status === "auth_required") {
setAuthDialogReason(error.reason || "no_keyboard");
setShowAuthDialog(true);
setIsLoading(false);
return;
}
} else {
addLog({
type: "error",
stage: "connection",
message: error?.message || t("fileManager.failedToConnect"),
});
}
2025-10-01 15:40:10 -05:00
handleCloseWithError(
t("fileManager.failedToConnect") + ": " + (error.message || error),
);
} finally {
setIsLoading(false);
+7
2025-11-05 10:36:16 -06:00
isConnectingRef.current = false;
2025-09-12 14:42:00 -05:00
}
}
2025-10-01 15:40:10 -05:00
const loadDirectory = useCallback(
2026-01-24 19:49:42 -06:00
async (path: string): Promise<boolean> => {
2025-10-01 15:40:10 -05:00
if (!sshSessionId) {
console.error("Cannot load directory: no SSH session ID");
2026-01-24 19:49:42 -06:00
return false;
2025-09-12 14:42:00 -05:00
}
2025-10-01 15:40:10 -05:00
if (isLoading && currentLoadingPathRef.current !== path) {
2026-01-24 19:49:42 -06:00
return false;
2025-10-01 15:40:10 -05:00
}
2025-09-12 14:42:00 -05:00
+5
2026-03-08 18:02:14 -05:00
let resolvedPath = path;
if (path.includes("$") || path.startsWith("~")) {
resolvedPath = await resolveSSHPath(sshSessionId, path);
if (resolvedPath !== path) {
setCurrentPath(resolvedPath);
lastPathChangeRef.current = resolvedPath;
}
}
currentLoadingPathRef.current = resolvedPath;
2025-10-01 15:40:10 -05:00
setIsLoading(true);
setCreateIntent(null);
2025-09-12 14:42:00 -05:00
try {
+5
2026-03-08 18:02:14 -05:00
const response = await listSSHFiles(sshSessionId, resolvedPath);
2025-09-12 14:42:00 -05:00
+5
2026-03-08 18:02:14 -05:00
if (currentLoadingPathRef.current !== resolvedPath) {
2026-01-24 19:49:42 -06:00
return false;
2025-10-01 15:40:10 -05:00
}
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
const files = Array.isArray(response)
? response
: response?.files || [];
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
setFiles(files);
clearSelection();
2026-01-24 19:49:42 -06:00
return true;
+7
2025-11-05 10:36:16 -06:00
} catch (error: unknown) {
+5
2026-03-08 18:02:14 -05:00
if (currentLoadingPathRef.current === resolvedPath) {
2026-01-24 19:49:42 -06:00
const axiosError = error as {
response?: {
status?: number;
data?: {
needsSudo?: boolean;
error?: string;
sudoFailed?: boolean;
};
};
message?: string;
};
if (axiosError.response?.data?.needsSudo) {
if (!sudoDialogOpen) {
+5
2026-03-08 18:02:14 -05:00
setPendingSudoOperation({ type: "navigate", path: resolvedPath });
2026-01-24 19:49:42 -06:00
setSudoDialogOpen(true);
}
if (axiosError.response.data.sudoFailed) {
toast.error(t("fileManager.sudoAuthFailed"));
} else {
toast.error(t("fileManager.permissionDenied"));
}
return false;
}
2025-10-01 15:40:10 -05:00
console.error("Failed to load directory:", error);
2025-09-12 14:42:00 -05:00
2026-01-24 19:49:42 -06:00
const errorMessage =
axiosError.response?.data?.error ||
axiosError.message ||
String(error);
2025-10-01 15:40:10 -05:00
if (initialLoadDoneRef.current) {
toast.error(
2026-01-24 19:49:42 -06:00
t("fileManager.failedToLoadDirectory") + ": " + errorMessage,
2025-10-01 15:40:10 -05:00
);
}
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
if (
2026-01-24 19:49:42 -06:00
errorMessage?.includes("connection") ||
errorMessage?.includes("SSH")
2025-10-01 15:40:10 -05:00
) {
handleCloseWithError(
2026-01-24 19:49:42 -06:00
t("fileManager.failedToLoadDirectory") + ": " + errorMessage,
2025-10-01 15:40:10 -05:00
);
}
}
2026-01-24 19:49:42 -06:00
return false;
2025-09-12 14:42:00 -05:00
} finally {
+5
2026-03-08 18:02:14 -05:00
if (currentLoadingPathRef.current === resolvedPath) {
2025-10-01 15:40:10 -05:00
setIsLoading(false);
currentLoadingPathRef.current = "";
2025-09-12 14:42:00 -05:00
}
}
2025-10-01 15:40:10 -05:00
},
2026-01-24 19:49:42 -06:00
[sshSessionId, isLoading, clearSelection, t, sudoDialogOpen],
2025-10-01 15:40:10 -05:00
);
const debouncedLoadDirectory = useCallback(
+9
2026-04-22 16:55:23 -05:00
(path: string, force?: boolean) => {
2025-10-01 15:40:10 -05:00
if (pathChangeTimerRef.current) {
clearTimeout(pathChangeTimerRef.current);
}
pathChangeTimerRef.current = setTimeout(() => {
+9
2026-04-22 16:55:23 -05:00
if ((force || path !== lastPathChangeRef.current) && sshSessionId) {
2025-10-01 15:40:10 -05:00
lastPathChangeRef.current = path;
loadDirectory(path);
}
}, 150);
},
[sshSessionId, loadDirectory],
);
useEffect(() => {
if (sshSessionId && currentPath) {
if (!initialLoadDoneRef.current) {
initialLoadDoneRef.current = true;
lastPathChangeRef.current = currentPath;
return;
}
debouncedLoadDirectory(currentPath);
2025-09-12 14:42:00 -05:00
}
2025-10-01 15:40:10 -05:00
return () => {
if (pathChangeTimerRef.current) {
clearTimeout(pathChangeTimerRef.current);
}
};
}, [sshSessionId, currentPath, debouncedLoadDirectory]);
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
const handleRefreshDirectory = useCallback(() => {
const now = Date.now();
const DEBOUNCE_MS = 500;
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
if (now - lastRefreshTime < DEBOUNCE_MS) {
2025-09-12 14:42:00 -05:00
return;
}
2025-10-01 15:40:10 -05:00
setLastRefreshTime(now);
+9
2026-04-22 16:55:23 -05:00
// Force reset loading state to ensure refresh is not blocked
setIsLoading(false);
currentLoadingPathRef.current = "";
2025-10-01 15:40:10 -05:00
loadDirectory(currentPath);
}, [currentPath, lastRefreshTime, loadDirectory]);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
const activeElement = document.activeElement;
if (
activeElement &&
(activeElement.tagName === "INPUT" ||
activeElement.tagName === "TEXTAREA" ||
activeElement.contentEditable === "true")
) {
return;
}
if (event.key === "T" && event.ctrlKey && event.shiftKey) {
event.preventDefault();
handleOpenTerminal(currentPath);
}
};
document.addEventListener("keydown", handleKeyDown);
return () => document.removeEventListener("keydown", handleKeyDown);
}, [currentPath]);
function handleFilesDropped(fileList: FileList) {
if (!sshSessionId) {
toast.error(t("fileManager.noSSHConnection"));
return;
}
Array.from(fileList).forEach((file) => {
handleUploadFile(file);
});
}
async function handleUploadFile(file: File) {
if (!sshSessionId) return;
const progressToast = toast.loading(
t("fileManager.uploadingFile", {
name: file.name,
size: formatFileSize(file.size),
}),
{ duration: Infinity },
);
2025-09-12 14:42:00 -05:00
try {
2025-10-01 15:40:10 -05:00
await ensureSSHConnection();
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
const fileContent = await new Promise<string>((resolve, reject) => {
const reader = new FileReader();
reader.onerror = () => reject(reader.error);
2025-09-12 14:42:00 -05:00
2025-11-17 09:46:05 -06:00
reader.onload = () => {
if (reader.result instanceof ArrayBuffer) {
const bytes = new Uint8Array(reader.result);
let binary = "";
for (let i = 0; i < bytes.byteLength; i++) {
binary += String.fromCharCode(bytes[i]);
2025-10-01 15:40:10 -05:00
}
2025-11-17 09:46:05 -06:00
const base64 = btoa(binary);
resolve(base64);
} else {
reject(new Error("Failed to read file"));
}
};
reader.readAsArrayBuffer(file);
2025-10-01 15:40:10 -05:00
});
await uploadSSHFile(
sshSessionId,
currentPath,
file.name,
fileContent,
currentHost?.id,
undefined,
2025-09-12 14:42:00 -05:00
);
2025-10-01 15:40:10 -05:00
toast.dismiss(progressToast);
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
toast.success(
t("fileManager.fileUploadedSuccessfully", { name: file.name }),
2025-09-12 14:42:00 -05:00
);
2025-10-01 15:40:10 -05:00
handleRefreshDirectory();
+7
2025-11-05 10:36:16 -06:00
} catch (error: unknown) {
2025-10-01 15:40:10 -05:00
toast.dismiss(progressToast);
2025-09-12 14:42:00 -05:00
if (
2025-10-01 15:40:10 -05:00
error.message?.includes("connection") ||
error.message?.includes("established")
2025-09-12 14:42:00 -05:00
) {
2025-10-01 15:40:10 -05:00
toast.error(
+1
2025-12-31 22:20:12 -06:00
t("fileManager.sshConnectionFailed", {
name: currentHost?.name,
ip: currentHost?.ip,
port: currentHost?.port,
}),
2025-10-01 15:40:10 -05:00
);
} else {
toast.error(t("fileManager.failedToUploadFile"));
}
console.error("Upload failed:", error);
}
}
async function handleDownloadFile(file: FileItem) {
if (!sshSessionId) return;
try {
await ensureSSHConnection();
const response = await downloadSSHFile(sshSessionId, file.path);
if (response?.content) {
const byteCharacters = atob(response.content);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], {
type: response.mimeType || "application/octet-stream",
});
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = response.fileName || file.name;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
toast.success(
t("fileManager.fileDownloadedSuccessfully", { name: file.name }),
);
+9
2026-04-22 16:55:23 -05:00
} else {
toast.error(t("fileManager.failedToDownloadFile"));
2025-10-01 15:40:10 -05:00
}
+7
2025-11-05 10:36:16 -06:00
} catch (error: unknown) {
2025-10-01 15:40:10 -05:00
if (
error.message?.includes("connection") ||
error.message?.includes("established")
) {
toast.error(
+1
2025-12-31 22:20:12 -06:00
t("fileManager.sshConnectionFailed", {
name: currentHost?.name,
ip: currentHost?.ip,
port: currentHost?.port,
}),
2025-10-01 15:40:10 -05:00
);
} else {
toast.error(t("fileManager.failedToDownloadFile"));
}
console.error("Download failed:", error);
}
}
async function handleDeleteFiles(files: FileItem[]) {
if (!sshSessionId || files.length === 0) return;
2025-10-06 10:11:25 -05:00
let confirmMessage: string;
if (files.length === 1) {
const file = files[0];
if (file.type === "directory") {
confirmMessage = t("fileManager.confirmDeleteFolder", {
name: file.name,
});
2025-10-01 15:40:10 -05:00
} else {
2025-10-06 10:11:25 -05:00
confirmMessage = t("fileManager.confirmDeleteSingleItem", {
name: file.name,
});
2025-10-01 15:40:10 -05:00
}
2025-10-06 10:11:25 -05:00
} else {
const hasDirectory = files.some((file) => file.type === "directory");
const translationKey = hasDirectory
? "fileManager.confirmDeleteMultipleItemsWithFolders"
: "fileManager.confirmDeleteMultipleItems";
confirmMessage = t(translationKey, {
count: files.length,
});
2025-10-01 15:40:10 -05:00
}
2025-10-06 10:11:25 -05:00
const fullMessage = `${confirmMessage}\n\n${t("fileManager.permanentDeleteWarning")}`;
confirmWithToast(
fullMessage,
async () => {
try {
await ensureSSHConnection();
for (const file of files) {
await deleteSSHItem(
sshSessionId,
file.path,
file.type === "directory",
currentHost?.id,
currentHost?.userId?.toString(),
);
}
const deletedFiles = files.map((file) => ({
path: file.path,
name: file.name,
}));
const undoAction: UndoAction = {
type: "delete",
description: t("fileManager.deletedItems", { count: files.length }),
data: {
operation: "cut",
deletedFiles,
targetDirectory: currentPath,
},
timestamp: Date.now(),
};
setUndoHistory((prev) => [...prev.slice(-9), undoAction]);
toast.success(
t("fileManager.itemsDeletedSuccessfully", { count: files.length }),
);
handleRefreshDirectory();
clearSelection();
+7
2025-11-05 10:36:16 -06:00
} catch (error: unknown) {
2026-01-24 19:49:42 -06:00
const axiosError = error as {
response?: { data?: { needsSudo?: boolean; error?: string } };
message?: string;
};
if (axiosError.response?.data?.needsSudo) {
setPendingSudoOperation({ type: "delete", files });
setSudoDialogOpen(true);
return;
}
2025-10-06 10:11:25 -05:00
if (
2026-01-24 19:49:42 -06:00
axiosError.message?.includes("connection") ||
axiosError.message?.includes("established")
2025-10-06 10:11:25 -05:00
) {
toast.error(
`SSH connection failed. Please check your connection to ${currentHost?.name} (${currentHost?.ip}:${currentHost?.port})`,
);
} else {
toast.error(t("fileManager.failedToDeleteItems"));
}
console.error("Delete failed:", error);
}
},
"destructive",
);
2025-10-01 15:40:10 -05:00
}
2026-01-24 19:49:42 -06:00
async function handleSudoPasswordSubmit(password: string) {
if (!sshSessionId || !pendingSudoOperation) return;
try {
await setSudoPassword(sshSessionId, password);
setSudoDialogOpen(false);
if (pendingSudoOperation.type === "delete") {
for (const file of pendingSudoOperation.files) {
await deleteSSHItem(
sshSessionId,
file.path,
file.type === "directory",
currentHost?.id,
currentHost?.userId?.toString(),
);
}
toast.success(
t("fileManager.itemsDeletedSuccessfully", {
count: pendingSudoOperation.files.length,
}),
);
handleRefreshDirectory();
clearSelection();
} else if (pendingSudoOperation.type === "navigate") {
const success = await loadDirectory(pendingSudoOperation.path);
if (success) {
setCurrentPath(pendingSudoOperation.path);
setPendingSudoOperation(null);
}
return;
}
setPendingSudoOperation(null);
} catch (error: unknown) {
const axiosError = error as {
response?: { data?: { needsSudo?: boolean; sudoFailed?: boolean } };
message?: string;
};
if (axiosError.response?.data?.sudoFailed) {
toast.error(t("fileManager.sudoAuthFailed"));
setSudoDialogOpen(true);
return;
}
toast.error(axiosError.message || t("fileManager.sudoOperationFailed"));
setPendingSudoOperation(null);
}
}
2025-10-01 15:40:10 -05:00
function handleCreateNewFolder() {
const defaultName = generateUniqueName(
t("fileManager.newFolderDefault"),
"directory",
);
const newCreateIntent = {
id: Date.now().toString(),
type: "directory" as const,
defaultName,
currentName: defaultName,
};
setCreateIntent(newCreateIntent);
}
function handleCreateNewFile() {
const defaultName = generateUniqueName(
t("fileManager.newFileDefault"),
"file",
);
const newCreateIntent = {
id: Date.now().toString(),
type: "file" as const,
defaultName,
currentName: defaultName,
};
setCreateIntent(newCreateIntent);
}
const handleSymlinkClick = async (file: FileItem) => {
if (!currentHost || !sshSessionId) {
toast.error(t("fileManager.noSSHConnection"));
return;
}
try {
+7
2025-11-05 10:36:16 -06:00
const currentSessionId = sshSessionId;
const status = await getSSHStatus(currentSessionId);
if (!status.connected) {
const result = await connectSSH(currentSessionId, {
hostId: currentHost.id,
+1
2025-12-31 22:20:12 -06:00
ip: currentHost.ip,
+7
2025-11-05 10:36:16 -06:00
port: currentHost.port,
username: currentHost.username,
authType: currentHost.authType,
password: currentHost.password,
+1
2025-12-31 22:20:12 -06:00
sshKey: currentHost.key,
+7
2025-11-05 10:36:16 -06:00
keyPassword: currentHost.keyPassword,
credentialId: currentHost.credentialId,
+1
2025-12-31 22:20:12 -06:00
jumpHosts: currentHost.jumpHosts,
useSocks5: currentHost.useSocks5,
socks5Host: currentHost.socks5Host,
socks5Port: currentHost.socks5Port,
socks5Username: currentHost.socks5Username,
socks5Password: currentHost.socks5Password,
socks5ProxyChain: currentHost.socks5ProxyChain,
+7
2025-11-05 10:36:16 -06:00
});
2025-10-01 15:40:10 -05:00
+7
2025-11-05 10:36:16 -06:00
if (!result.success) {
throw new Error(t("fileManager.failedToReconnectSSH"));
2025-10-01 15:40:10 -05:00
}
}
const symlinkInfo = await identifySSHSymlink(currentSessionId, file.path);
if (symlinkInfo.type === "directory") {
setCurrentPath(symlinkInfo.target);
} else if (symlinkInfo.type === "file") {
const windowCount = Date.now() % 10;
const offsetX = 120 + windowCount * 30;
const offsetY = 120 + windowCount * 30;
const targetFile: FileItem = {
...file,
path: symlinkInfo.target,
};
const createWindowComponent = (windowId: string) => (
<FileWindow
windowId={windowId}
file={targetFile}
sshSessionId={currentSessionId}
sshHost={currentHost}
initialX={offsetX}
initialY={offsetY}
/>
);
openWindow({
title: file.name,
x: offsetX,
y: offsetY,
width: 800,
height: 600,
isMaximized: false,
isMinimized: false,
component: createWindowComponent,
});
}
+7
2025-11-05 10:36:16 -06:00
} catch (error: unknown) {
2025-10-01 15:40:10 -05:00
toast.error(
error?.response?.data?.error ||
error?.message ||
t("fileManager.failedToResolveSymlink"),
);
}
};
+7
2025-11-05 10:36:16 -06:00
async function handleFileOpen(file: FileItem) {
2025-10-01 15:40:10 -05:00
if (file.type === "directory") {
setCurrentPath(file.path);
} else if (file.type === "link") {
await handleSymlinkClick(file);
} else {
if (!sshSessionId) {
toast.error(t("fileManager.noSSHConnection"));
return;
}
await recordRecentFile(file);
const windowCount = Date.now() % 10;
const baseOffsetX = 120 + windowCount * 30;
const baseOffsetY = 120 + windowCount * 30;
const maxOffsetX = Math.max(0, window.innerWidth - 800 - 100);
const maxOffsetY = Math.max(0, window.innerHeight - 600 - 100);
const offsetX = Math.min(baseOffsetX, maxOffsetX);
const offsetY = Math.min(baseOffsetY, maxOffsetY);
const windowTitle = file.name;
const createWindowComponent = (windowId: string) => (
<FileWindow
windowId={windowId}
file={file}
sshSessionId={sshSessionId}
sshHost={currentHost}
initialX={offsetX}
initialY={offsetY}
onFileNotFound={handleFileNotFound}
/>
);
openWindow({
title: windowTitle,
x: offsetX,
y: offsetY,
width: 800,
height: 600,
isMaximized: false,
isMinimized: false,
component: createWindowComponent,
});
}
}
function handleContextMenu(event: React.MouseEvent, file?: FileItem) {
event.preventDefault();
let files: FileItem[];
if (file) {
const isFileSelected = selectedFiles.some((f) => f.path === file.path);
files = isFileSelected ? selectedFiles : [file];
} else {
files = selectedFiles;
}
setContextMenu({
x: event.clientX,
y: event.clientY,
isVisible: true,
files,
});
}
function handleCopyFiles(files: FileItem[]) {
setClipboard({ files, operation: "copy" });
toast.success(
t("fileManager.filesCopiedToClipboard", { count: files.length }),
);
}
function handleCutFiles(files: FileItem[]) {
setClipboard({ files, operation: "cut" });
toast.success(
t("fileManager.filesCutToClipboard", { count: files.length }),
);
}
2025-11-17 09:46:05 -06:00
function handleCopyPath(files: FileItem[]) {
if (files.length === 0) return;
const paths = files.map((file) => file.path).join("\n");
navigator.clipboard.writeText(paths).then(
() => {
toast.success(
files.length === 1
? t("fileManager.pathCopiedToClipboard")
: t("fileManager.pathsCopiedToClipboard", { count: files.length }),
);
},
(err) => {
console.error("Failed to copy path to clipboard:", err);
toast.error(t("fileManager.failedToCopyPath"));
},
);
}
2025-10-01 15:40:10 -05:00
async function handlePasteFiles() {
if (!clipboard || !sshSessionId) return;
try {
await ensureSSHConnection();
const { files, operation } = clipboard;
let successCount = 0;
const copiedItems: string[] = [];
for (const file of files) {
try {
if (operation === "copy") {
const result = await copySSHItem(
sshSessionId,
file.path,
currentPath,
currentHost?.id,
currentHost?.userId?.toString(),
);
copiedItems.push(result.uniqueName || file.name);
successCount++;
} else {
const targetPath = currentPath.endsWith("/")
? `${currentPath}${file.name}`
: `${currentPath}/${file.name}`;
if (file.path !== targetPath) {
await moveSSHItem(
sshSessionId,
file.path,
targetPath,
currentHost?.id,
currentHost?.userId?.toString(),
);
successCount++;
}
}
+7
2025-11-05 10:36:16 -06:00
} catch (error: unknown) {
2025-10-01 15:40:10 -05:00
console.error(`Failed to ${operation} file ${file.name}:`, error);
toast.error(
t("fileManager.operationFailed", {
operation:
operation === "copy"
? t("fileManager.copy")
: t("fileManager.move"),
name: file.name,
error: error.message,
}),
);
}
}
if (successCount > 0) {
if (operation === "copy") {
const copiedFiles = files
.slice(0, successCount)
.map((file, index) => ({
originalPath: file.path,
targetPath: `${currentPath}/${copiedItems[index] || file.name}`,
targetName: copiedItems[index] || file.name,
}));
const undoAction: UndoAction = {
type: "copy",
description: t("fileManager.copiedItems", { count: successCount }),
data: {
operation: "copy",
copiedFiles,
targetDirectory: currentPath,
},
timestamp: Date.now(),
};
setUndoHistory((prev) => [...prev.slice(-9), undoAction]);
} else if (operation === "cut") {
const movedFiles = files.slice(0, successCount).map((file) => {
const targetPath = currentPath.endsWith("/")
? `${currentPath}${file.name}`
: `${currentPath}/${file.name}`;
return {
originalPath: file.path,
targetPath: targetPath,
targetName: file.name,
};
});
const undoAction: UndoAction = {
type: "cut",
description: t("fileManager.movedItems", { count: successCount }),
data: {
operation: "cut",
copiedFiles: movedFiles,
targetDirectory: currentPath,
},
timestamp: Date.now(),
};
setUndoHistory((prev) => [...prev.slice(-9), undoAction]);
}
}
if (successCount > 0) {
const operationText =
operation === "copy" ? t("fileManager.copy") : t("fileManager.move");
if (operation === "copy" && copiedItems.length > 0) {
const hasRenamed = copiedItems.some(
(name) => !files.some((file) => file.name === name),
);
if (hasRenamed) {
toast.success(
t("fileManager.operationCompletedSuccessfully", {
operation: operationText,
count: successCount,
}),
);
} else {
toast.success(
t("fileManager.operationCompleted", {
operation: operationText,
count: successCount,
}),
);
}
} else {
toast.success(
t("fileManager.operationCompleted", {
operation: operationText,
count: successCount,
}),
);
}
}
handleRefreshDirectory();
clearSelection();
if (operation === "cut") {
setClipboard(null);
}
+7
2025-11-05 10:36:16 -06:00
} catch (error: unknown) {
2025-10-01 15:40:10 -05:00
toast.error(
`${t("fileManager.pasteFailed")}: ${error.message || t("fileManager.unknownError")}`,
);
}
}
2025-11-17 09:46:05 -06:00
async function handleExtractArchive(file: FileItem) {
if (!sshSessionId) return;
try {
await ensureSSHConnection();
toast.info(t("fileManager.extractingArchive", { name: file.name }));
await extractSSHArchive(
sshSessionId,
file.path,
undefined,
currentHost?.id,
currentHost?.userId?.toString(),
);
toast.success(
t("fileManager.archiveExtractedSuccessfully", { name: file.name }),
);
handleRefreshDirectory();
} catch (error: unknown) {
const err = error as { message?: string };
toast.error(
`${t("fileManager.extractFailed")}: ${err.message || t("fileManager.unknownError")}`,
);
}
}
function handleOpenCompressDialog(files: FileItem[]) {
setCompressDialogFiles(files);
}
async function handleCompress(archiveName: string, format: string) {
if (!sshSessionId || compressDialogFiles.length === 0) return;
try {
await ensureSSHConnection();
const paths = compressDialogFiles.map((f) => f.path);
const fileNames = compressDialogFiles.map((f) => f.name);
toast.info(
t("fileManager.compressingFiles", {
count: fileNames.length,
name: archiveName,
}),
);
await compressSSHFiles(
sshSessionId,
paths,
archiveName,
format,
currentHost?.id,
currentHost?.userId?.toString(),
);
toast.success(
t("fileManager.filesCompressedSuccessfully", {
name: archiveName,
}),
);
handleRefreshDirectory();
clearSelection();
} catch (error: unknown) {
const err = error as { message?: string };
toast.error(
`${t("fileManager.compressFailed")}: ${err.message || t("fileManager.unknownError")}`,
);
}
}
2025-10-01 15:40:10 -05:00
async function handleUndo() {
if (undoHistory.length === 0) {
toast.info(t("fileManager.noUndoableActions"));
return;
}
const lastAction = undoHistory[undoHistory.length - 1];
try {
await ensureSSHConnection();
switch (lastAction.type) {
case "copy":
if (lastAction.data.copiedFiles) {
let successCount = 0;
for (const copiedFile of lastAction.data.copiedFiles) {
try {
const isDirectory =
files.find((f) => f.path === copiedFile.targetPath)?.type ===
"directory";
await deleteSSHItem(
sshSessionId!,
copiedFile.targetPath,
isDirectory,
currentHost?.id,
currentHost?.userId?.toString(),
);
successCount++;
+7
2025-11-05 10:36:16 -06:00
} catch (error: unknown) {
2025-10-01 15:40:10 -05:00
console.error(
`Failed to delete copied file ${copiedFile.targetName}:`,
error,
);
toast.error(
t("fileManager.deleteCopiedFileFailed", {
name: copiedFile.targetName,
error: error.message,
}),
);
}
}
if (successCount > 0) {
setUndoHistory((prev) => prev.slice(0, -1));
toast.success(
t("fileManager.undoCopySuccess", { count: successCount }),
);
} else {
toast.error(t("fileManager.undoCopyFailedDelete"));
return;
}
} else {
toast.error(t("fileManager.undoCopyFailedNoInfo"));
return;
}
break;
case "cut":
if (lastAction.data.copiedFiles) {
let successCount = 0;
for (const movedFile of lastAction.data.copiedFiles) {
try {
await moveSSHItem(
sshSessionId!,
movedFile.targetPath,
movedFile.originalPath,
currentHost?.id,
currentHost?.userId?.toString(),
);
successCount++;
+7
2025-11-05 10:36:16 -06:00
} catch (error: unknown) {
2025-10-01 15:40:10 -05:00
console.error(
`Failed to move back file ${movedFile.targetName}:`,
error,
);
toast.error(
t("fileManager.moveBackFileFailed", {
name: movedFile.targetName,
error: error.message,
}),
);
}
}
if (successCount > 0) {
setUndoHistory((prev) => prev.slice(0, -1));
toast.success(
t("fileManager.undoMoveSuccess", { count: successCount }),
);
} else {
toast.error(t("fileManager.undoMoveFailedMove"));
return;
}
} else {
toast.error(t("fileManager.undoMoveFailedNoInfo"));
return;
}
break;
case "delete":
toast.info(t("fileManager.undoDeleteNotSupported"));
setUndoHistory((prev) => prev.slice(0, -1));
return;
default:
toast.error(t("fileManager.undoTypeNotSupported"));
return;
}
handleRefreshDirectory();
+7
2025-11-05 10:36:16 -06:00
} catch (error: unknown) {
2025-10-01 15:40:10 -05:00
toast.error(
`${t("fileManager.undoOperationFailed")}: ${error.message || t("fileManager.unknownError")}`,
);
console.error("Undo failed:", error);
}
}
function handleRenameFile(file: FileItem) {
setEditingFile(file);
}
2025-11-17 09:46:05 -06:00
function handleOpenPermissionsDialog(file: FileItem) {
setPermissionsDialogFile(file);
}
async function handleSavePermissions(file: FileItem, permissions: string) {
if (!sshSessionId) {
toast.error(t("fileManager.noSSHConnection"));
return;
}
try {
await changeSSHPermissions(
sshSessionId,
file.path,
permissions,
currentHost?.id,
currentHost?.userId?.toString(),
);
toast.success(t("fileManager.permissionsChangedSuccessfully"));
await handleRefreshDirectory();
} catch (error: unknown) {
console.error("Failed to change permissions:", error);
toast.error(t("fileManager.failedToChangePermissions"));
throw error;
}
}
2025-10-01 15:40:10 -05:00
async function ensureSSHConnection() {
if (!sshSessionId || !currentHost || isReconnecting) return;
try {
const status = await getSSHStatus(sshSessionId);
if (!status.connected && !isReconnecting) {
setIsReconnecting(true);
await connectSSH(sshSessionId, {
hostId: currentHost.id,
ip: currentHost.ip,
port: currentHost.port,
username: currentHost.username,
password: currentHost.password,
sshKey: currentHost.key,
keyPassword: currentHost.keyPassword,
authType: currentHost.authType,
credentialId: currentHost.credentialId,
userId: currentHost.userId,
+1
2025-12-31 22:20:12 -06:00
jumpHosts: currentHost.jumpHosts,
useSocks5: currentHost.useSocks5,
socks5Host: currentHost.socks5Host,
socks5Port: currentHost.socks5Port,
socks5Username: currentHost.socks5Username,
socks5Password: currentHost.socks5Password,
socks5ProxyChain: currentHost.socks5ProxyChain,
2025-10-01 15:40:10 -05:00
});
}
} catch (error) {
handleCloseWithError(
`SSH connection failed. Please check your connection to ${currentHost?.name} (${currentHost?.ip}:${currentHost?.port})`,
);
throw error;
2025-09-12 14:42:00 -05:00
} finally {
2025-10-01 15:40:10 -05:00
setIsReconnecting(false);
2025-09-12 14:42:00 -05:00
}
2025-10-01 15:40:10 -05:00
}
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
async function handleConfirmCreate(name: string) {
if (!createIntent || !sshSessionId) return;
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
try {
await ensureSSHConnection();
if (createIntent.type === "file") {
await createSSHFile(
sshSessionId,
currentPath,
name,
"",
currentHost?.id,
currentHost?.userId?.toString(),
);
toast.success(t("fileManager.fileCreatedSuccessfully", { name }));
} else {
await createSSHFolder(
sshSessionId,
currentPath,
name,
currentHost?.id,
currentHost?.userId?.toString(),
);
toast.success(t("fileManager.folderCreatedSuccessfully", { name }));
}
setCreateIntent(null);
handleRefreshDirectory();
+7
2025-11-05 10:36:16 -06:00
} catch (error: unknown) {
2025-10-01 15:40:10 -05:00
console.error("Create failed:", error);
toast.error(t("fileManager.failedToCreateItem"));
2025-09-12 14:42:00 -05:00
}
2025-10-01 15:40:10 -05:00
}
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
function handleCancelCreate() {
setCreateIntent(null);
}
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
async function handleRenameConfirm(file: FileItem, newName: string) {
if (!sshSessionId) return;
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
try {
await ensureSSHConnection();
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
await renameSSHItem(
sshSessionId,
file.path,
newName,
currentHost?.id,
currentHost?.userId?.toString(),
);
2025-09-12 14:42:00 -05:00
2025-10-01 15:40:10 -05:00
toast.success(
t("fileManager.itemRenamedSuccessfully", { name: newName }),
);
setEditingFile(null);
handleRefreshDirectory();
+7
2025-11-05 10:36:16 -06:00
} catch (error: unknown) {
2025-10-01 15:40:10 -05:00
console.error("Rename failed:", error);
toast.error(t("fileManager.failedToRenameItem"));
}
}
function handleStartEdit(file: FileItem) {
setEditingFile(file);
}
function handleCancelEdit() {
setEditingFile(null);
}
+7
2025-11-05 10:36:16 -06:00
async function handleTotpSubmit(code: string) {
if (!totpSessionId || !code) return;
try {
setIsLoading(true);
const result = await verifySSHTOTP(totpSessionId, code);
if (result?.status === "success") {
setTotpRequired(false);
setTotpPrompt("");
setSshSessionId(totpSessionId);
setTotpSessionId(null);
try {
const response = await listSSHFiles(totpSessionId, currentPath);
const files = Array.isArray(response)
? response
: response?.files || [];
setFiles(files);
clearSelection();
initialLoadDoneRef.current = true;
toast.success(t("fileManager.connectedSuccessfully"));
logFileManagerActivity();
} catch (dirError: unknown) {
console.error("Failed to load initial directory:", dirError);
}
}
} catch (error: unknown) {
console.error("TOTP verification failed:", error);
toast.error(t("fileManager.totpVerificationFailed"));
} finally {
setIsLoading(false);
}
}
function handleTotpCancel() {
setTotpRequired(false);
setTotpPrompt("");
setTotpSessionId(null);
if (onClose) onClose();
}
2026-01-24 19:49:42 -06:00
async function handleWarpgateContinue() {
if (!warpgateSessionId) return;
try {
setIsLoading(true);
const result = await verifySSHWarpgate(warpgateSessionId);
if (result?.status === "success") {
setWarpgateRequired(false);
setWarpgateUrl("");
setWarpgateSecurityKey("");
setSshSessionId(warpgateSessionId);
setWarpgateSessionId(null);
try {
const response = await listSSHFiles(warpgateSessionId, currentPath);
const files = Array.isArray(response)
? response
: response?.files || [];
setFiles(files);
clearSelection();
initialLoadDoneRef.current = true;
toast.success(t("fileManager.connectedSuccessfully"));
logFileManagerActivity();
} catch (dirError: unknown) {
console.error("Failed to load initial directory:", dirError);
}
}
} catch (error: unknown) {
console.error("Warpgate verification failed:", error);
toast.error(t("fileManager.warpgateVerificationFailed"));
} finally {
setIsLoading(false);
}
}
function handleWarpgateCancel() {
setWarpgateRequired(false);
setWarpgateUrl("");
setWarpgateSecurityKey("");
setWarpgateSessionId(null);
if (onClose) onClose();
}
function handleWarpgateOpenUrl() {
if (warpgateUrl) {
window.open(warpgateUrl, "_blank", "noopener,noreferrer");
}
}
+7
2025-11-05 10:36:16 -06:00
async function handleAuthDialogSubmit(credentials: {
password?: string;
sshKey?: string;
keyPassword?: string;
}) {
if (!currentHost) return;
try {
setIsLoading(true);
setShowAuthDialog(false);
const sessionId = currentHost.id.toString();
const result = await connectSSH(sessionId, {
hostId: currentHost.id,
ip: currentHost.ip,
port: currentHost.port,
username: currentHost.username,
password: credentials.password,
sshKey: credentials.sshKey,
keyPassword: credentials.keyPassword,
authType: credentials.password ? "password" : "key",
credentialId: currentHost.credentialId,
userId: currentHost.userId,
+1
2025-12-31 22:20:12 -06:00
jumpHosts: currentHost.jumpHosts,
useSocks5: currentHost.useSocks5,
socks5Host: currentHost.socks5Host,
socks5Port: currentHost.socks5Port,
socks5Username: currentHost.socks5Username,
socks5Password: currentHost.socks5Password,
socks5ProxyChain: currentHost.socks5ProxyChain,
+7
2025-11-05 10:36:16 -06:00
});
2026-01-24 19:49:42 -06:00
if (result?.requires_warpgate) {
setWarpgateRequired(true);
setWarpgateSessionId(sessionId);
setWarpgateUrl(result.url || "");
setWarpgateSecurityKey(result.securityKey || "N/A");
setIsLoading(false);
return;
}
+7
2025-11-05 10:36:16 -06:00
if (result?.requires_totp) {
setTotpRequired(true);
setTotpSessionId(sessionId);
+1
2025-12-31 22:20:12 -06:00
setTotpPrompt(result.prompt || t("fileManager.verificationCodePrompt"));
+7
2025-11-05 10:36:16 -06:00
setIsLoading(false);
return;
}
if (result?.status === "auth_required") {
setAuthDialogReason(result.reason || "auth_failed");
setShowAuthDialog(true);
setIsLoading(false);
toast.error(t("fileManager.authenticationFailed"));
return;
}
setSshSessionId(sessionId);
try {
const response = await listSSHFiles(sessionId, currentPath);
const files = Array.isArray(response)
? response
: response?.files || [];
setFiles(files);
clearSelection();
initialLoadDoneRef.current = true;
toast.success(t("fileManager.connectedSuccessfully"));
logFileManagerActivity();
} catch (dirError: unknown) {
console.error("Failed to load initial directory:", dirError);
}
} catch (error: unknown) {
console.error("SSH connection with credentials failed:", error);
setAuthDialogReason("auth_failed");
setShowAuthDialog(true);
toast.error(
t("fileManager.failedToConnect") + ": " + (error.message || error),
);
} finally {
setIsLoading(false);
}
}
function handleAuthDialogCancel() {
setShowAuthDialog(false);
if (onClose) onClose();
}
2025-10-01 15:40:10 -05:00
function generateUniqueName(
baseName: string,
type: "file" | "directory",
): string {
const existingNames = files.map((f) => f.name.toLowerCase());
let candidateName = baseName;
let counter = 1;
while (existingNames.includes(candidateName.toLowerCase())) {
if (type === "file" && baseName.includes(".")) {
const lastDotIndex = baseName.lastIndexOf(".");
const nameWithoutExt = baseName.substring(0, lastDotIndex);
const extension = baseName.substring(lastDotIndex);
candidateName = `${nameWithoutExt}${counter}${extension}`;
} else {
candidateName = `${baseName}${counter}`;
}
counter++;
}
return candidateName;
}
async function handleFileDrop(
draggedFiles: FileItem[],
targetFolder: FileItem,
) {
if (!sshSessionId || targetFolder.type !== "directory") return;
try {
await ensureSSHConnection();
let successCount = 0;
const movedItems: string[] = [];
for (const file of draggedFiles) {
try {
const targetPath = targetFolder.path.endsWith("/")
? `${targetFolder.path}${file.name}`
: `${targetFolder.path}/${file.name}`;
if (file.path !== targetPath) {
await moveSSHItem(
sshSessionId,
file.path,
targetPath,
currentHost?.id,
currentHost?.userId?.toString(),
);
movedItems.push(file.name);
successCount++;
}
+7
2025-11-05 10:36:16 -06:00
} catch (error: unknown) {
2025-10-01 15:40:10 -05:00
console.error(`Failed to move file ${file.name}:`, error);
toast.error(
t("fileManager.moveFileFailed", { name: file.name }) +
": " +
error.message,
);
}
}
if (successCount > 0) {
+7
2025-11-05 10:36:16 -06:00
const movedFiles = draggedFiles.slice(0, successCount).map((file) => {
const targetPath = targetFolder.path.endsWith("/")
? `${targetFolder.path}${file.name}`
: `${targetFolder.path}/${file.name}`;
return {
originalPath: file.path,
targetPath: targetPath,
targetName: file.name,
};
});
2025-10-01 15:40:10 -05:00
const undoAction: UndoAction = {
type: "cut",
description: t("fileManager.dragMovedItems", {
count: successCount,
target: targetFolder.name,
}),
data: {
operation: "cut",
copiedFiles: movedFiles,
targetDirectory: targetFolder.path,
},
timestamp: Date.now(),
};
setUndoHistory((prev) => [...prev.slice(-9), undoAction]);
toast.success(
t("fileManager.successfullyMovedItems", {
count: successCount,
target: targetFolder.name,
}),
);
handleRefreshDirectory();
clearSelection();
}
+7
2025-11-05 10:36:16 -06:00
} catch (error: unknown) {
2025-10-01 15:40:10 -05:00
console.error("Drag move operation failed:", error);
toast.error(t("fileManager.moveOperationFailed") + ": " + error.message);
}
}
function handleFileDiff(file1: FileItem, file2: FileItem) {
if (file1.type !== "file" || file2.type !== "file") {
toast.error(t("fileManager.canOnlyCompareFiles"));
return;
}
if (!sshSessionId) {
toast.error(t("fileManager.noSSHConnection"));
return;
}
const offsetX = 100;
const offsetY = 80;
const windowId = `diff-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
const createWindowComponent = (windowId: string) => (
<DiffWindow
windowId={windowId}
file1={file1}
file2={file2}
sshSessionId={sshSessionId}
sshHost={currentHost}
initialX={offsetX}
initialY={offsetY}
/>
);
openWindow({
id: windowId,
type: "diff",
title: t("fileManager.fileComparison", {
file1: file1.name,
file2: file2.name,
}),
isMaximized: false,
component: createWindowComponent,
zIndex: Date.now(),
});
toast.success(
t("fileManager.comparingFiles", { file1: file1.name, file2: file2.name }),
);
}
async function handleDragToDesktop(files: FileItem[]) {
if (!currentHost || !sshSessionId) {
toast.error(t("fileManager.noSSHConnection"));
return;
}
try {
if (systemDrag.isFileSystemAPISupported) {
await systemDrag.handleDragToSystem(files, {
enableToast: true,
onError: (error) => {
console.error("System-level drag failed:", error);
},
});
} else {
if (files.length === 1) {
await dragToDesktop.dragFileToDesktop(files[0]);
} else if (files.length > 1) {
await dragToDesktop.dragFilesToDesktop(files);
}
}
+7
2025-11-05 10:36:16 -06:00
} catch (error: unknown) {
2025-10-01 15:40:10 -05:00
console.error("Drag to desktop failed:", error);
toast.error(
t("fileManager.dragFailed") +
": " +
(error.message || t("fileManager.unknownError")),
);
}
}
function handleOpenTerminal(path: string) {
if (!currentHost) {
toast.error(t("fileManager.noHostSelected"));
return;
}
const windowCount = Date.now() % 10;
const offsetX = 200 + windowCount * 40;
const offsetY = 150 + windowCount * 40;
const createTerminalComponent = (windowId: string) => (
<TerminalWindow
windowId={windowId}
hostConfig={currentHost}
initialPath={path}
initialX={offsetX}
initialY={offsetY}
/>
);
openWindow({
title: t("fileManager.terminal", { host: currentHost.name, path }),
x: offsetX,
y: offsetY,
width: 800,
height: 500,
isMaximized: false,
isMinimized: false,
component: createTerminalComponent,
});
toast.success(
t("terminal.terminalWithPath", { host: currentHost.name, path }),
);
}
function handleRunExecutable(file: FileItem) {
if (!currentHost) {
toast.error(t("fileManager.noHostSelected"));
return;
}
if (file.type !== "file" || !file.executable) {
toast.error(t("fileManager.onlyRunExecutableFiles"));
return;
}
const fileDir = file.path.substring(0, file.path.lastIndexOf("/"));
const fileName = file.name;
const executeCmd = `./${fileName}`;
const windowCount = Date.now() % 10;
const offsetX = 250 + windowCount * 40;
const offsetY = 200 + windowCount * 40;
const createExecutionTerminal = (windowId: string) => (
<TerminalWindow
windowId={windowId}
hostConfig={currentHost}
initialPath={fileDir}
initialX={offsetX}
initialY={offsetY}
executeCommand={executeCmd}
/>
);
openWindow({
title: t("fileManager.runningFile", { file: file.name }),
x: offsetX,
y: offsetY,
width: 800,
height: 500,
isMaximized: false,
isMinimized: false,
component: createExecutionTerminal,
});
toast.success(t("fileManager.runningFile", { file: file.name }));
}
async function loadPinnedFiles() {
2025-09-12 14:42:00 -05:00
if (!currentHost?.id) return;
try {
2025-10-01 15:40:10 -05:00
const pinnedData = await getPinnedFiles(currentHost.id);
+7
2025-11-05 10:36:16 -06:00
const pinnedPaths = new Set(
pinnedData.map((item: Record<string, unknown>) => item.path),
);
2025-10-01 15:40:10 -05:00
setPinnedFiles(pinnedPaths);
} catch (error) {
console.error("Failed to load pinned files:", error);
2025-09-12 14:42:00 -05:00
}
2025-10-01 15:40:10 -05:00
}
async function handlePinFile(file: FileItem) {
if (!currentHost?.id) return;
try {
await addPinnedFile(currentHost.id, file.path, file.name);
setPinnedFiles((prev) => new Set([...prev, file.path]));
setSidebarRefreshTrigger((prev) => prev + 1);
toast.success(
t("fileManager.filePinnedSuccessfully", { name: file.name }),
);
} catch (error) {
console.error("Failed to pin file:", error);
toast.error(t("fileManager.pinFileFailed"));
}
}
async function handleUnpinFile(file: FileItem) {
if (!currentHost?.id) return;
try {
await removePinnedFile(currentHost.id, file.path);
setPinnedFiles((prev) => {
const newSet = new Set(prev);
newSet.delete(file.path);
return newSet;
});
setSidebarRefreshTrigger((prev) => prev + 1);
toast.success(
t("fileManager.fileUnpinnedSuccessfully", { name: file.name }),
);
} catch (error) {
console.error("Failed to unpin file:", error);
toast.error(t("fileManager.unpinFileFailed"));
}
}
async function handleAddShortcut(path: string) {
if (!currentHost?.id) return;
try {
const folderName = path.split("/").pop() || path;
await addFolderShortcut(currentHost.id, path, folderName);
setSidebarRefreshTrigger((prev) => prev + 1);
toast.success(
t("fileManager.shortcutAddedSuccessfully", { name: folderName }),
);
} catch (error) {
console.error("Failed to add shortcut:", error);
toast.error(t("fileManager.addShortcutFailed"));
}
}
function isPinnedFile(file: FileItem): boolean {
return pinnedFiles.has(file.path);
}
async function recordRecentFile(file: FileItem) {
if (!currentHost?.id || file.type === "directory") return;
try {
await addRecentFile(currentHost.id, file.path, file.name);
setSidebarRefreshTrigger((prev) => prev + 1);
} catch (error) {
console.error("Failed to record recent file:", error);
}
}
async function handleSidebarFileOpen(sidebarItem: SidebarItem) {
const file: FileItem = {
name: sidebarItem.name,
path: sidebarItem.path,
type: "file",
};
await handleFileOpen(file);
}
async function handleFileNotFound(file: FileItem) {
if (!currentHost) return;
try {
await removeRecentFile(currentHost.id, file.path);
await removePinnedFile(currentHost.id, file.path);
setSidebarRefreshTrigger((prev) => prev + 1);
} catch (error) {
console.error("Failed to cleanup missing file:", error);
}
}
useEffect(() => {
setCreateIntent(null);
}, [currentPath]);
useEffect(() => {
if (currentHost?.id) {
loadPinnedFiles();
}
}, [currentHost?.id]);
2025-11-17 09:46:05 -06:00
useEffect(() => {
localStorage.setItem("fileManagerViewMode", viewMode);
}, [viewMode]);
+5
2026-03-08 18:02:14 -05:00
useEffect(() => {
localStorage.setItem("fileManagerSortBy", sortBy);
localStorage.setItem("fileManagerSortOrder", sortOrder);
}, [sortBy, sortOrder]);
+4
2026-02-12 22:28:13 -06:00
const filteredFiles = useMemo(
() =>
files
.filter((file) =>
file.name.toLowerCase().includes(searchQuery.toLowerCase()),
)
.sort((a, b) => {
if (a.type === "directory" && b.type !== "directory") return -1;
if (a.type !== "directory" && b.type === "directory") return 1;
+5
2026-03-08 18:02:14 -05:00
let result = 0;
switch (sortBy) {
case "name":
result = a.name.localeCompare(b.name, undefined, {
numeric: true,
sensitivity: "base",
});
break;
case "modified":
result = (a.modified || "").localeCompare(b.modified || "");
break;
case "size":
result = (a.size || 0) - (b.size || 0);
break;
}
return sortOrder === "desc" ? -result : result;
+4
2026-02-12 22:28:13 -06:00
}),
+5
2026-03-08 18:02:14 -05:00
[files, searchQuery, sortBy, sortOrder],
2025-10-01 15:40:10 -05:00
);
2025-09-12 14:42:00 -05:00
if (!currentHost) {
return (
2025-10-01 15:40:10 -05:00
<div className="h-full flex items-center justify-center">
<div className="text-center">
<p className="text-lg text-muted-foreground mb-4">
{t("fileManager.selectHostToStart")}
</p>
2025-09-12 14:42:00 -05:00
</div>
</div>
);
}
return (
2026-01-24 19:49:42 -06:00
<div className="h-full flex flex-col bg-canvas relative">
<div
className="h-full w-full flex flex-col"
style={{
visibility: isConnectionLogExpanded ? "hidden" : "visible",
}}
>
<div className="flex-shrink-0 border-b border-edge">
<div className="flex items-center justify-between p-3">
<div className="flex items-center gap-2">
<h2 className="font-semibold text-foreground">
{currentHost.name}
</h2>
<span className="text-sm text-muted-foreground">
{currentHost.ip}:{currentHost.port}
</span>
</div>
<div className="flex items-center gap-2">
<div className="relative">
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
placeholder={t("fileManager.searchFiles")}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-8 w-48 h-9 bg-button border-edge"
/>
</div>
<div className="flex border border-edge rounded-md">
<Button
variant={viewMode === "grid" ? "default" : "ghost"}
size="sm"
onClick={() => setViewMode("grid")}
className="rounded-r-none h-9"
>
<Grid3X3 className="w-4 h-4" />
</Button>
<Button
variant={viewMode === "list" ? "default" : "ghost"}
size="sm"
onClick={() => setViewMode("list")}
className="rounded-l-none h-9"
>
<List className="w-4 h-4" />
</Button>
</div>
+5
2026-03-08 18:02:14 -05:00
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="sm" className="h-9">
<ArrowUpDown className="w-4 h-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuRadioGroup
value={sortBy}
onValueChange={(v) =>
setSortBy(v as "name" | "modified" | "size")
}
>
<DropdownMenuRadioItem value="name">
{t("fileManager.sortByName")}
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="modified">
{t("fileManager.sortByDate")}
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="size">
{t("fileManager.sortBySize")}
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
value={sortOrder}
onValueChange={(v) => setSortOrder(v as "asc" | "desc")}
>
<DropdownMenuRadioItem value="asc">
{t("fileManager.ascending")}
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="desc">
{t("fileManager.descending")}
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
2026-01-24 19:49:42 -06:00
<Button
variant="outline"
size="sm"
onClick={() => {
const input = document.createElement("input");
input.type = "file";
input.multiple = true;
input.onchange = (e) => {
const files = (e.target as HTMLInputElement).files;
if (files) handleFilesDropped(files);
};
input.click();
}}
className="h-9"
>
<Upload className="w-4 h-4 mr-2" />
{t("fileManager.upload")}
</Button>
<Button
variant="outline"
size="sm"
onClick={handleCreateNewFolder}
className="h-9"
>
<FolderPlus className="w-4 h-4 mr-2" />
{t("fileManager.newFolder")}
</Button>
<Button
variant="outline"
size="sm"
onClick={handleCreateNewFile}
className="h-9"
>
<FilePlus className="w-4 h-4 mr-2" />
{t("fileManager.newFile")}
</Button>
<Button
variant="outline"
size="sm"
onClick={handleRefreshDirectory}
className="h-9"
>
<RefreshCw className="w-4 h-4" />
</Button>
</div>
</div>
</div>
<div className="flex-1 flex" {...dragHandlers}>
<div className="w-64 flex-shrink-0 h-full">
<FileManagerSidebar
currentHost={currentHost}
currentPath={currentPath}
onPathChange={setCurrentPath}
onLoadDirectory={loadDirectory}
onFileOpen={handleSidebarFileOpen}
sshSessionId={sshSessionId}
refreshTrigger={sidebarRefreshTrigger}
/>
2025-09-12 14:42:00 -05:00
</div>
2025-10-01 15:40:10 -05:00
2026-01-24 19:49:42 -06:00
<div className="flex-1 relative">
<FileManagerGrid
files={filteredFiles}
selectedFiles={selectedFiles}
onFileSelect={() => {}}
onFileOpen={handleFileOpen}
onSelectionChange={setSelection}
currentPath={currentPath}
isLoading={isLoading}
onPathChange={setCurrentPath}
onRefresh={handleRefreshDirectory}
onUpload={handleFilesDropped}
+5
2026-03-08 18:02:14 -05:00
sortBy={sortBy}
sortOrder={sortOrder}
onSortChange={(field) => {
if (field === sortBy) {
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
} else {
setSortBy(field);
setSortOrder("asc");
}
}}
2026-01-24 19:49:42 -06:00
onDownload={(files) => files.forEach(handleDownloadFile)}
onContextMenu={handleContextMenu}
viewMode={viewMode}
onRename={handleRenameConfirm}
editingFile={editingFile}
onStartEdit={handleStartEdit}
onCancelEdit={handleCancelEdit}
onDelete={handleDeleteFiles}
onCopy={handleCopyFiles}
onCut={handleCutFiles}
onPaste={handlePasteFiles}
onUndo={handleUndo}
hasClipboard={!!clipboard}
onFileDrop={handleFileDrop}
onFileDiff={handleFileDiff}
onSystemDragStart={handleFileDragStart}
onSystemDragEnd={handleFileDragEnd}
createIntent={createIntent}
onConfirmCreate={handleConfirmCreate}
onCancelCreate={handleCancelCreate}
onNewFile={handleCreateNewFile}
onNewFolder={handleCreateNewFolder}
/>
2025-10-01 15:40:10 -05:00
2026-01-24 19:49:42 -06:00
<FileManagerContextMenu
x={contextMenu.x}
y={contextMenu.y}
files={contextMenu.files}
isVisible={contextMenu.isVisible}
onClose={() =>
setContextMenu((prev) => ({ ...prev, isVisible: false }))
}
onDownload={(files) => files.forEach(handleDownloadFile)}
onRename={handleRenameFile}
onCopy={handleCopyFiles}
onCut={handleCutFiles}
onPaste={handlePasteFiles}
onDelete={handleDeleteFiles}
onUpload={() => {
2025-10-01 15:40:10 -05:00
const input = document.createElement("input");
input.type = "file";
input.multiple = true;
input.onchange = (e) => {
const files = (e.target as HTMLInputElement).files;
if (files) handleFilesDropped(files);
};
input.click();
2025-09-12 14:42:00 -05:00
}}
2026-01-24 19:49:42 -06:00
onNewFolder={handleCreateNewFolder}
onNewFile={handleCreateNewFile}
onRefresh={handleRefreshDirectory}
hasClipboard={!!clipboard}
onDragToDesktop={() => handleDragToDesktop(contextMenu.files)}
onOpenTerminal={(path) => handleOpenTerminal(path)}
onRunExecutable={(file) => handleRunExecutable(file)}
onPinFile={handlePinFile}
onUnpinFile={handleUnpinFile}
onAddShortcut={handleAddShortcut}
isPinned={isPinnedFile}
currentPath={currentPath}
onProperties={handleOpenPermissionsDialog}
onExtractArchive={handleExtractArchive}
onCompress={handleOpenCompressDialog}
onCopyPath={handleCopyPath}
/>
2025-09-12 14:42:00 -05:00
</div>
</div>
</div>
2025-10-01 15:40:10 -05:00
2025-11-17 09:46:05 -06:00
<CompressDialog
open={compressDialogFiles.length > 0}
onOpenChange={(open) => !open && setCompressDialogFiles([])}
fileNames={compressDialogFiles.map((f) => f.name)}
onCompress={handleCompress}
/>
+7
2025-11-05 10:36:16 -06:00
<TOTPDialog
isOpen={totpRequired}
prompt={totpPrompt}
onSubmit={handleTotpSubmit}
onCancel={handleTotpCancel}
/>
2026-01-24 19:49:42 -06:00
<WarpgateDialog
isOpen={warpgateRequired}
url={warpgateUrl}
securityKey={warpgateSecurityKey}
onContinue={handleWarpgateContinue}
onCancel={handleWarpgateCancel}
onOpenUrl={handleWarpgateOpenUrl}
/>
+7
2025-11-05 10:36:16 -06:00
{currentHost && (
<SSHAuthDialog
isOpen={showAuthDialog}
reason={authDialogReason}
onSubmit={handleAuthDialogSubmit}
onCancel={handleAuthDialogCancel}
hostInfo={{
ip: currentHost.ip,
port: currentHost.port,
username: currentHost.username,
name: currentHost.name,
}}
/>
)}
2025-11-17 09:46:05 -06:00
<PermissionsDialog
file={permissionsDialogFile}
open={permissionsDialogFile !== null}
onOpenChange={(open) => {
if (!open) setPermissionsDialogFile(null);
}}
onSave={handleSavePermissions}
/>
2026-01-24 19:49:42 -06:00
<SudoPasswordDialog
open={sudoDialogOpen}
onOpenChange={(open) => {
setSudoDialogOpen(open);
if (!open) setPendingSudoOperation(null);
}}
onSubmit={handleSudoPasswordSubmit}
/>
<SimpleLoader
visible={(isReconnecting || isLoading) && !isConnectionLogExpanded}
message={t("fileManager.connecting")}
/>
<ConnectionLog
isConnecting={isReconnecting || isLoading}
isConnected={!!sshSessionId}
hasConnectionError={hasConnectionError}
position={hasConnectionError ? "top" : "bottom"}
/>
2025-09-12 14:42:00 -05:00
</div>
);
}
2025-10-01 15:40:10 -05:00
2026-01-24 19:49:42 -06:00
function FileManagerInner({ initialHost, onClose }: FileManagerProps) {
2025-10-01 15:40:10 -05:00
return (
<WindowManager>
<FileManagerContent initialHost={initialHost} onClose={onClose} />
</WindowManager>
);
}
2026-01-24 19:49:42 -06:00
export function FileManager(props: FileManagerProps) {
return (
<ConnectionLogProvider>
<FileManagerInner {...props} />
</ConnectionLogProvider>
);
}