feat(files): an HTML page opens in a modal over the screen

- Changes panel: Preview beside Whole file opens the page in a modal (HtmlViewerModal, shared with the File Explorer) instead of inside the panel; Changes and Whole file stay as they were. - Chat: an HTML file's card, Outputs row or a path in a reply (in the workspace or not) opens FilePreview as a modal — Preview | Code, versions, Save to Artifacts kept — rather than the side panel or the Changes panel. - Esc closes both modals: they stop every key from reaching the view below, which also kept useDialog's document listener from seeing it.
2026-10-29 11:20:54 +07:00
parent 4a82790734
commit 97c39d5e15
8 changed files with 292 additions and 150 deletions
@@ -0,0 +1,109 @@
+/**
+ * @file HtmlViewerModal.tsx
+ * @description An HTML file shown as the page in a modal over the whole
+ * screen — the one viewer the File Explorer and the Changes panel's Preview
+ * open (the Chat's file preview opens its own panel as a modal instead, for
+ * its versions and Code tab). The page itself is `HtmlFrame`: the chat
+ * artifact's sandbox, its relative files read through the caller's guarded
+ * `fetchFile`. Keys and clicks stop at the modal, so a shortcut of the view
+ * underneath (the explorer's Delete) never fires from inside it.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useRef, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import { Download, X } from "lucide-react";
+import { useDialog } from "../hooks/useDialog";
+import { HtmlFrame } from "./HtmlFrame";
+import type { FetchFile } from "../lib/htmlInline";
+
+export function HtmlViewerModal({
+  path,
+  html,
+  fetchFile,
+  onDownload,
+  onClose,
+  testId = "html-viewer",
+}: {
+  /** The file's path relative to the place `fetchFile` reads from; also its title. */
+  path: string;
+  /** The page's text; read through `fetchFile` when absent. */
+  html?: string;
+  fetchFile?: FetchFile | null;
+  onDownload?: () => void;
+  onClose: () => void;
+  testId?: string;
+}) {
+  const { t } = useTranslation(["lanes"]);
+  const panelRef = useRef<HTMLDivElement>(null);
+  useDialog(true, panelRef, onClose);
+  const name = path.slice(path.lastIndexOf("/") + 1);
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[70] flex items-center justify-center bg-black/60 p-3"
+      onClick={(e) => {
+        e.stopPropagation();
+        onClose();
+      }}
+      onKeyDown={(e) => {
+        // Nothing reaches the view underneath — so Esc, which useDialog's
+        // document listener would never see, closes here.
+        e.stopPropagation();
+        if (e.key === "Escape") onClose();
+      }}
+      role="presentation"
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={name}
+        data-testid={testId}
+        className="flex h-[92vh] w-[96vw] max-w-7xl flex-col overflow-hidden rounded-xl border border-border bg-surface-1 shadow-2xl shadow-black/50"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-2 border-b border-border px-3 py-2">
+          <span className="min-w-0 flex-1 truncate font-mono text-[13px] text-fg-primary">
+            {path}
+          </span>
+          {onDownload && (
+            <HeadButton label={t("fx.download")} onClick={onDownload}>
+              <Download className="h-4 w-4" />
+            </HeadButton>
+          )}
+          <HeadButton label={t("fx.close")} onClick={onClose}>
+            <X className="h-4 w-4" />
+          </HeadButton>
+        </div>
+        <HtmlFrame path={path} html={html} fetchFile={fetchFile} title={name} />
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+function HeadButton({
+  label,
+  onClick,
+  children,
+}: {
+  label: string;
+  onClick: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick();
+      }}
+      className="rounded-md p-1.5 text-fg-secondary transition-colors hover:bg-surface-2 hover:text-fg-primary"
+    >
+      {children}
+    </button>
+  );
+}