Open bot files in a preview modal instead of a new tab

Markdown rendered, CSV/TSV as a table, images, PDFs, audio, video and sandboxed HTML in place, other text as code, with Download and Open in a new tab. Used by file chips, message attachments, the files modal, task files and the files browser. Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-28 19:25:49 +01:00
parent 521c2bbac0
commit faa554d5e3
26 changed files with 960 additions and 42 deletions
@@ -0,0 +1,52 @@
+import { useState, type ReactNode } from "react";
+import Link from "@moduletrace/twui/layout/Link";
+import isPlainClick from "@/src/utils/is-plain-click";
+import FilePreviewModal from "./file-preview-modal";
+
+type Props = {
+    name: string;
+    url: string;
+    media_type?: string | null;
+    size?: number;
+    title?: string;
+    className?: string;
+    children: ReactNode;
+};
+
+/**
+ * A link to a file that opens it in the preview (`FilePreviewModal`) on a
+ * plain click. It stays a real link to the bytes, so a middle click or
+ * Ctrl/Cmd click still opens the file in a new tab.
+ */
+export default function FilePreviewLink({ name, url, media_type, size, title, className, children }: Props) {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Link
+                href={url}
+                target="_blank"
+                rel="noopener noreferrer"
+                title={title || `Preview ${name}`}
+                onClick={(event) => {
+                    if (!isPlainClick({ event })) return;
+
+                    event.preventDefault();
+                    setOpen(true);
+                }}
+                className={className}
+            >
+                {children}
+            </Link>
+            {open ? (
+                <FilePreviewModal
+                    name={name}
+                    url={url}
+                    media_type={media_type}
+                    size={size}
+                    onClose={() => setOpen(false)}
+                />
+            ) : null}
+        </>
+    );
+}