feat: Add file compression feature with friendly error messages

Add comprehensive file compression functionality to file manager:

Compression features:
- Support multiple formats: zip, tar.gz, tar.bz2, tar.xz, 7z
- Compress single or multiple files/folders
- Interactive compression dialog with format selection
- Preview of files to be compressed
- Context menu integration (right-click to compress)

Error handling improvements:
- Detect missing compression tools on remote server
- Provide friendly error messages with installation instructions
- Format-specific tool detection (zip, tar, 7z, unrar, etc.)
- Clear guidance for users when tools are unavailable

UI enhancements:
- Multi-language support (English/Chinese)
- Real-time compression progress feedback
- Smart default format selection

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/ui/desktop/apps/file-manager/FileManager.tsx

@@ -17,6 +17,7 @@ import { useTranslation } from "react-i18next";
 import { TOTPDialog } from "@/ui/desktop/navigation/TOTPDialog.tsx";
 import { SSHAuthDialog } from "@/ui/desktop/navigation/SSHAuthDialog.tsx";
 import { PermissionsDialog } from "./components/PermissionsDialog";
+import { CompressDialog } from "./components/CompressDialog";
 import {
   Upload,
   FolderPlus,
@@ -52,6 +53,7 @@ import {
   logActivity,
   changeSSHPermissions,
   extractSSHArchive,
+  compressSSHFiles,
 } from "@/ui/main-axios.ts";
 import type { SidebarItem } from "./FileManagerSidebar";
 
@@ -150,6 +152,7 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
   const [createIntent, setCreateIntent] = useState<CreateIntent | null>(null);
   const [editingFile, setEditingFile] = useState<FileItem | null>(null);
   const [permissionsDialogFile, setPermissionsDialogFile] = useState<FileItem | null>(null);
+  const [compressDialogFiles, setCompressDialogFiles] = useState<FileItem[]>([]);
 
   const { selectedFiles, clearSelection, setSelection } = useFileSelection();
 
@@ -1090,6 +1093,48 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
     }
   }
 
+  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
+      }));
+
+      // Refresh directory to show compressed file
+      handleRefreshDirectory();
+      clearSelection();
+    } catch (error: unknown) {
+      const err = error as { message?: string };
+      toast.error(
+        `${t("fileManager.compressFailed")}: ${err.message || t("fileManager.unknownError")}`,
+      );
+    }
+  }
+
   async function handleUndo() {
     if (undoHistory.length === 0) {
       toast.info(t("fileManager.noUndoableActions"));
@@ -2030,10 +2075,18 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
             currentPath={currentPath}
             onProperties={handleOpenPermissionsDialog}
             onExtractArchive={handleExtractArchive}
+            onCompress={handleOpenCompressDialog}
           />
         </div>
       </div>
 
+      <CompressDialog
+        open={compressDialogFiles.length > 0}
+        onOpenChange={(open) => !open && setCompressDialogFiles([])}
+        fileNames={compressDialogFiles.map(f => f.name)}
+        onCompress={handleCompress}
+      />
+
       <TOTPDialog
         isOpen={totpRequired}
         prompt={totpPrompt}

src/ui/desktop/apps/file-manager/FileManagerContextMenu.tsx

@@ -62,6 +62,7 @@ interface ContextMenuProps {
   isPinned?: (file: FileItem) => boolean;
   currentPath?: string;
   onExtractArchive?: (file: FileItem) => void;
+  onCompress?: (files: FileItem[]) => void;
 }
 
 interface MenuItem {
@@ -102,6 +103,7 @@ export function FileManagerContextMenu({
   isPinned,
   currentPath,
   onExtractArchive,
+  onCompress,
 }: ContextMenuProps) {
   const { t } = useTranslation();
   const [menuPosition, setMenuPosition] = useState({ x, y });
@@ -284,6 +286,18 @@ export function FileManagerContextMenu({
       }
     }
 
+    // Add compress option for selected files/folders
+    if (isFileContext && onCompress) {
+      menuItems.push({
+        icon: <FileArchive className="w-4 h-4" />,
+        label: isMultipleFiles
+          ? t("fileManager.compressFiles")
+          : t("fileManager.compressFile"),
+        action: () => onCompress(files),
+        shortcut: "Ctrl+Shift+C",
+      });
+    }
+
     if (isSingleFile && files[0].type === "file") {
       const isCurrentlyPinned = isPinned ? isPinned(files[0]) : false;
 

src/ui/desktop/apps/file-manager/components/CompressDialog.tsx

@@ -0,0 +1,148 @@
+import React, { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useTranslation } from "react-i18next";
+
+interface CompressDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  fileNames: string[];
+  onCompress: (archiveName: string, format: string) => void;
+}
+
+export function CompressDialog({
+  open,
+  onOpenChange,
+  fileNames,
+  onCompress,
+}: CompressDialogProps) {
+  const { t } = useTranslation();
+  const [archiveName, setArchiveName] = useState("");
+  const [format, setFormat] = useState("zip");
+
+  useEffect(() => {
+    if (open && fileNames.length > 0) {
+      // Generate default archive name
+      if (fileNames.length === 1) {
+        const baseName = fileNames[0].replace(/\.[^/.]+$/, "");
+        setArchiveName(baseName);
+      } else {
+        setArchiveName("archive");
+      }
+    }
+  }, [open, fileNames]);
+
+  const handleCompress = () => {
+    if (!archiveName.trim()) return;
+
+    // Append extension if not already present
+    let finalName = archiveName.trim();
+    const extensions: Record<string, string> = {
+      zip: ".zip",
+      "tar.gz": ".tar.gz",
+      "tar.bz2": ".tar.bz2",
+      "tar.xz": ".tar.xz",
+      tar: ".tar",
+      "7z": ".7z",
+    };
+
+    const expectedExtension = extensions[format];
+    if (expectedExtension && !finalName.endsWith(expectedExtension)) {
+      finalName += expectedExtension;
+    }
+
+    onCompress(finalName, format);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>{t("fileManager.compressFiles")}</DialogTitle>
+          <DialogDescription>
+            {t("fileManager.compressFilesDesc", { count: fileNames.length })}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="archiveName">{t("fileManager.archiveName")}</Label>
+            <Input
+              id="archiveName"
+              value={archiveName}
+              onChange={(e) => setArchiveName(e.target.value)}
+              placeholder={t("fileManager.enterArchiveName")}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  handleCompress();
+                }
+              }}
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="format">{t("fileManager.compressionFormat")}</Label>
+            <Select value={format} onValueChange={setFormat}>
+              <SelectTrigger id="format">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="zip">ZIP (.zip)</SelectItem>
+                <SelectItem value="tar.gz">TAR.GZ (.tar.gz)</SelectItem>
+                <SelectItem value="tar.bz2">TAR.BZ2 (.tar.bz2)</SelectItem>
+                <SelectItem value="tar.xz">TAR.XZ (.tar.xz)</SelectItem>
+                <SelectItem value="tar">TAR (.tar)</SelectItem>
+                <SelectItem value="7z">7-Zip (.7z)</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="rounded-md bg-muted p-3">
+            <p className="text-sm text-muted-foreground mb-2">
+              {t("fileManager.selectedFiles")}:
+            </p>
+            <ul className="text-sm space-y-1">
+              {fileNames.slice(0, 5).map((name, index) => (
+                <li key={index} className="truncate">
+                  • {name}
+                </li>
+              ))}
+              {fileNames.length > 5 && (
+                <li className="text-muted-foreground italic">
+                  {t("fileManager.andMoreFiles", { count: fileNames.length - 5 })}
+                </li>
+              )}
+            </ul>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t("common.cancel")}
+          </Button>
+          <Button onClick={handleCompress} disabled={!archiveName.trim()}>
+            {t("fileManager.compress")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}