v2.3.0

2026-11-12 19:06:48 +00:00 · 2026-05-28 22:29:20 -05:00
parent 33dcde0827
commit 5777351145
238 changed files with 62301 additions and 98953 deletions
@@ -53,14 +53,20 @@ export function DraggableWindow({
  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
  const [windowStart, setWindowStart] = useState({ x: 0, y: 0 });
  const [sizeStart, setSizeStart] = useState({ width: 0, height: 0 });
+  const containerBoundsRef = useRef({ width: 0, height: 0 });

  const windowRef = useRef<HTMLDivElement>(null);
  const titleBarRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (targetSize && !isMaximized) {
-      const maxWidth = Math.min(window.innerWidth * 0.9, 1200);
-      const maxHeight = Math.min(window.innerHeight * 0.8, 800);
+      const container = windowRef.current?.offsetParent as HTMLElement | null;
+      const maxWidth = container
+        ? Math.min(container.clientWidth * 0.9, 1200)
+        : Math.min(window.innerWidth * 0.9, 1200);
+      const maxHeight = container
+        ? Math.min(container.clientHeight * 0.8, 800)
+        : Math.min(window.innerHeight * 0.8, 800);

      let newWidth = Math.min(targetSize.width + 50, maxWidth);
      let newHeight = Math.min(targetSize.height + 150, maxHeight);
@@ -80,8 +86,16 @@ export function DraggableWindow({
      setSize({ width: newWidth, height: newHeight });

      setPosition({
-        x: Math.max(0, (window.innerWidth - newWidth) / 2),
-        y: Math.max(0, (window.innerHeight - newHeight) / 2),
+        x: Math.max(
+          0,
+          (container ? container.clientWidth : window.innerWidth) / 2 -
+            newWidth / 2,
+        ),
+        y: Math.max(
+          0,
+          (container ? container.clientHeight : window.innerHeight) / 2 -
+            newHeight / 2,
+        ),
      });
    }
  }, [targetSize, isMaximized, minWidth, minHeight]);
@@ -98,6 +112,13 @@ export function DraggableWindow({
      setIsDragging(true);
      setDragStart({ x: e.clientX, y: e.clientY });
      setWindowStart({ x: position.x, y: position.y });
+
+      const container = windowRef.current?.offsetParent as HTMLElement | null;
+      containerBoundsRef.current = {
+        width: container ? container.clientWidth : window.innerWidth,
+        height: container ? container.clientHeight : window.innerHeight,
+      };
+
      onFocus?.();
    },
    [isMaximized, position, onFocus],
@@ -112,50 +133,14 @@ export function DraggableWindow({
        const newX = windowStart.x + deltaX;
        const newY = windowStart.y + deltaY;

-        const windowElement = windowRef.current;
-        let positioningContainer = null;
-        let currentElement = windowElement?.parentElement;
-
-        while (currentElement && currentElement !== document.body) {
-          const computedStyle = window.getComputedStyle(currentElement);
-          const position = computedStyle.position;
-          const transform = computedStyle.transform;
-
-          if (
-            position === "relative" ||
-            position === "absolute" ||
-            position === "fixed" ||
-            transform !== "none"
-          ) {
-            positioningContainer = currentElement;
-            break;
-          }
-
-          currentElement = currentElement.parentElement;
-        }
-
-        let maxX, maxY, minX, minY;
-
-        if (positioningContainer) {
-          const containerRect = positioningContainer.getBoundingClientRect();
-
-          maxX = containerRect.width - size.width;
-          maxY = containerRect.height - size.height;
-          minX = 0;
-          minY = 0;
-        } else {
-          maxX = window.innerWidth - size.width;
-          maxY = window.innerHeight - size.height;
-          minX = 0;
-          minY = 0;
-        }
-
-        const constrainedX = Math.max(minX, Math.min(maxX, newX));
-        const constrainedY = Math.max(minY, Math.min(maxY, newY));
+        const { width: containerW, height: containerH } =
+          containerBoundsRef.current;
+        const maxX = containerW - size.width;
+        const maxY = containerH - size.height;

        setPosition({
-          x: constrainedX,
-          y: constrainedY,
+          x: Math.max(0, Math.min(maxX, newX)),
+          y: Math.max(49, Math.min(maxY, newY)),
        });
      }

@@ -194,8 +179,10 @@ export function DraggableWindow({
          }
        }

-        newX = Math.max(0, Math.min(window.innerWidth - newWidth, newX));
-        newY = Math.max(0, Math.min(window.innerHeight - newHeight, newY));
+        const { width: containerW, height: containerH } =
+          containerBoundsRef.current;
+        newX = Math.max(0, Math.min(containerW - newWidth, newX));
+        newY = Math.max(49, Math.min(containerH - newHeight, newY));

        setSize({ width: newWidth, height: newHeight });
        setPosition({ x: newX, y: newY });
@@ -213,7 +200,6 @@ export function DraggableWindow({
      windowStart,
      sizeStart,
      size,
-      position,
      minWidth,
      minHeight,
      resizeDirection,
@@ -238,6 +224,13 @@ export function DraggableWindow({
      setDragStart({ x: e.clientX, y: e.clientY });
      setWindowStart({ x: position.x, y: position.y });
      setSizeStart({ width: size.width, height: size.height });
+
+      const container = windowRef.current?.offsetParent as HTMLElement | null;
+      containerBoundsRef.current = {
+        width: container ? container.clientWidth : window.innerWidth,
+        height: container ? container.clientHeight : window.innerHeight,
+      };
+
      onFocus?.();
    },
    [isMaximized, position, size, onFocus],
@@ -3,8 +3,9 @@ import { Document, Page, pdfjs } from "react-pdf";
 import { AlertCircle, Download } from "lucide-react";
 import { Button } from "@/components/button.tsx";
 import { useTranslation } from "react-i18next";
+import pdfjsWorkerUrl from "pdfjs-dist/build/pdf.worker.min.mjs?url";

-pdfjs.GlobalWorkerOptions.workerSrc = "/pdf.worker.min.js";
+pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorkerUrl;

 interface PdfPreviewProps {
  content: string;
@@ -85,10 +86,10 @@ export function PdfPreview({
          {pdfError ? (
            <div className="text-center text-muted-foreground p-8">
              <AlertCircle className="w-16 h-16 mx-auto mb-4 text-muted-foreground/50" />
-              <h3 className="text-lg font-medium mb-2">Cannot load PDF</h3>
-              <p className="text-sm mb-4">
-                There was an error loading this PDF file.
-              </p>
+              <h3 className="text-lg font-medium mb-2">
+                {t("fileManager.cannotLoadPdf")}
+              </h3>
+              <p className="text-sm mb-4">{t("fileManager.pdfLoadError")}</p>
              {onDownload && (
                <Button
                  variant="outline"
@@ -120,7 +121,7 @@ export function PdfPreview({
                <div className="text-center p-8">
                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-2"></div>
                  <p className="text-sm text-muted-foreground">
-                    Loading PDF...
+                    {t("fileManager.loadingPdf")}
                  </p>
                </div>
              }
@@ -133,7 +134,7 @@ export function PdfPreview({
                  <div className="text-center p-4">
                    <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500 mx-auto mb-2"></div>
                    <p className="text-xs text-muted-foreground">
-                      Loading page...
+                      {t("fileManager.loadingPage")}
                    </p>
                  </div>
                }
@@ -168,35 +168,40 @@ export function PermissionsDialog({

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-[calc(100vw-2rem)] sm:max-w-md rounded-none border-border bg-card">
+      <DialogContent className="w-[calc(100vw-2rem)] sm:max-w-lg rounded-none border-border bg-card">
        <DialogHeader>
          <DialogTitle className="text-xs font-bold uppercase tracking-widest flex items-center gap-2">
            <Lock className="size-4 text-accent-brand" />
            {t("fileManager.changePermissions")}
          </DialogTitle>
-          <DialogDescription className="text-[10px] font-bold uppercase tracking-tight text-muted-foreground font-mono">
+          <DialogDescription className="text-[10px] font-bold uppercase tracking-tight text-muted-foreground font-mono break-all">
            {file.path}
          </DialogDescription>
        </DialogHeader>

        <div className="py-3 flex flex-col gap-4">
-          <div className="grid grid-cols-4 gap-0 border border-border overflow-hidden">
-            <div className="px-3 py-2 bg-muted/50 border-b border-r border-border text-[10px] font-bold uppercase tracking-widest text-muted-foreground" />
-            {[
-              t("fileManager.read"),
-              t("fileManager.write"),
-              t("fileManager.execute"),
-            ].map((h) => (
-              <div
-                key={h}
-                className="px-3 py-2 bg-muted/50 border-b border-r border-border last:border-r-0 text-[10px] font-bold uppercase tracking-widest text-muted-foreground text-center"
-              >
-                {h}
-              </div>
-            ))}
+          <div className="border border-border overflow-hidden">
+            <div className="grid grid-cols-[1fr_64px_64px_64px] bg-muted/50 border-b border-border">
+              <div className="px-3 py-2 text-[10px] font-bold uppercase tracking-widest text-muted-foreground" />
+              {[
+                t("fileManager.read"),
+                t("fileManager.write"),
+                t("fileManager.execute"),
+              ].map((h) => (
+                <div
+                  key={h}
+                  className="py-2 text-[10px] font-bold uppercase tracking-widest text-muted-foreground text-center border-l border-border"
+                >
+                  {h}
+                </div>
+              ))}
+            </div>
            {rows.map((row, i) => (
-              <React.Fragment key={i}>
-                <div className="px-3 py-2.5 border-b border-r border-border last:border-b-0 text-xs font-semibold truncate">
+              <div
+                key={i}
+                className={`grid grid-cols-[1fr_64px_64px_64px] ${i < rows.length - 1 ? "border-b border-border" : ""}`}
+              >
+                <div className="px-3 py-3 text-xs font-semibold">
                  {row.label}
                </div>
                {[
@@ -206,29 +211,28 @@ export function PermissionsDialog({
                ].map((perm, j) => (
                  <div
                    key={j}
-                    className="flex items-center justify-center border-b border-r border-border last:border-r-0 py-2.5"
+                    className="flex items-center justify-center border-l border-border py-3"
                  >
                    <input
                      type="checkbox"
                      checked={perm.val}
                      onChange={(e) => perm.set(e.target.checked)}
-                      className="accent-[var(--accent-brand)] size-3.5 cursor-pointer"
+                      className="accent-[var(--accent-brand)] size-4 cursor-pointer"
                    />
                  </div>
                ))}
-              </React.Fragment>
+              </div>
            ))}
          </div>

          <div className="flex items-center gap-3">
-            <span className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
+            <span className="text-xs font-bold uppercase tracking-widest text-muted-foreground shrink-0">
              {t("fileManager.octal")}
            </span>
            <Input
              value={octal}
              readOnly
              className="w-20 rounded-none bg-muted/50 border-border text-xs font-mono text-center h-8"
-              maxLength={3}
            />
            <span className="text-[10px] text-muted-foreground font-mono">
              {t("fileManager.currentPermissions")}: {file.permissions || "—"}
@@ -3,20 +3,8 @@ import { DraggableWindow } from "./DraggableWindow.tsx";
 import { Terminal } from "@/features/terminal/Terminal.tsx";
 import { useWindowManager } from "./WindowManager.tsx";
 import { useTranslation } from "react-i18next";
-
-interface SSHHost {
-  id: number;
-  name: string;
-  ip: string;
-  port: number;
-  username: string;
-  password?: string;
-  key?: string;
-  keyPassword?: string;
-  authType: "password" | "key";
-  credentialId?: number;
-  userId?: number;
-}
+import { CommandHistoryProvider } from "@/features/terminal/command-history/CommandHistoryContext.tsx";
+import type { SSHHost } from "@/types/index.ts";

 interface TerminalWindowProps {
  windowId: string;
@@ -96,29 +84,31 @@ export function TerminalWindow({
      : t("terminal.terminalTitle", { host: hostConfig.name });

  return (
-    <DraggableWindow
-      title={terminalTitle}
-      initialX={initialX}
-      initialY={initialY}
-      initialWidth={800}
-      initialHeight={500}
-      minWidth={600}
-      minHeight={400}
-      onClose={handleClose}
-      onMaximize={handleMaximize}
-      onFocus={handleFocus}
-      onResize={handleResize}
-      isMaximized={currentWindow.isMaximized}
-      zIndex={currentWindow.zIndex}
-    >
-      <Terminal
-        ref={terminalRef}
-        hostConfig={hostConfig}
-        isVisible={!currentWindow.isMinimized}
-        initialPath={initialPath}
-        executeCommand={executeCommand}
+    <CommandHistoryProvider>
+      <DraggableWindow
+        title={terminalTitle}
+        initialX={initialX}
+        initialY={initialY}
+        initialWidth={800}
+        initialHeight={500}
+        minWidth={600}
+        minHeight={400}
        onClose={handleClose}
-      />
-    </DraggableWindow>
+        onMaximize={handleMaximize}
+        onFocus={handleFocus}
+        onResize={handleResize}
+        isMaximized={currentWindow.isMaximized}
+        zIndex={currentWindow.zIndex}
+      >
+        <Terminal
+          ref={terminalRef as any}
+          hostConfig={hostConfig as any}
+          isVisible={!currentWindow.isMinimized}
+          initialPath={initialPath}
+          executeCommand={executeCommand}
+          onClose={handleClose}
+        />
+      </DraggableWindow>
+    </CommandHistoryProvider>
  );
 }
@@ -116,14 +116,19 @@ export function WindowManager({ children }: WindowManagerProps) {
  return (
    <WindowManagerContext.Provider value={contextValue}>
      {children}
-      <div className="window-container">
-        {windows.map((window) => (
-          <div key={window.id}>
-            {typeof window.component === "function"
-              ? window.component(window.id)
-              : window.component}
-          </div>
-        ))}
+      <div
+        className="window-container absolute inset-0 pointer-events-none overflow-hidden"
+        style={{ zIndex: 1000 }}
+      >
+        <div className="relative w-full h-full pointer-events-none">
+          {windows.map((window) => (
+            <div key={window.id} className="pointer-events-auto">
+              {typeof window.component === "function"
+                ? window.component(window.id)
+                : window.component}
+            </div>
+          ))}
+        </div>
      </div>
    </WindowManagerContext.Provider>
  );