feat(web): preview archives, sqlite databases, and decoded images

apps/desktop/src/ipc/methods/window.test.ts

@@ -334,6 +334,7 @@ describe("pickProjectFavicon", () => {
                   "gif",
                   "ico",
                   "heic",
+                  "heif",
                   "jpeg",
                   "jpg",
                   "png",

apps/mobile/src/features/threads/fileChipMenu.test.ts

@@ -72,6 +72,14 @@ describe("file chip downloads", () => {
     ["/tmp/take%2520%23one.mp4:12", "/tmp/take%20#one.mp4", "video/mp4"],
     ["/tmp/report.pdf", "/tmp/report.pdf", "application/pdf"],
     ["screens/image.PNG", "/repo/screens/image.PNG", "image/png"],
+    ["/tmp/archive.zip", "/tmp/archive.zip", "application/zip"],
+    ["/tmp/archive.jar", "/tmp/archive.jar", "application/java-archive"],
+    ["/tmp/archive.tar", "/tmp/archive.tar", "application/x-tar"],
+    ["/tmp/archive.gz", "/tmp/archive.gz", "application/gzip"],
+    ["/tmp/archive.tgz", "/tmp/archive.tgz", "application/gzip"],
+    ["/tmp/data.sqlite", "/tmp/data.sqlite", "application/vnd.sqlite3"],
+    ["/tmp/data.sqlite3", "/tmp/data.sqlite3", "application/vnd.sqlite3"],
+    ["/tmp/data.db", "/tmp/data.db", "application/vnd.sqlite3"],
   ])("offers a host download for %s", (href, path, mimeType) => {
     const target = resolveFileChipTarget(href, "/repo")!;
     expect(fileChipMenu(target).actions).toContainEqual({
@@ -94,7 +102,7 @@ describe("file chip downloads", () => {
   });
 
   it("does not offer downloads the host asset endpoint cannot serve", () => {
-    for (const href of ["src/app.ts", "/tmp/archive.zip", "/tmp/clip.mp4.txt"]) {
+    for (const href of ["src/app.ts", "/tmp/archive.7z", "/tmp/clip.mp4.txt"]) {
       const target = resolveFileChipTarget(href, "/repo")!;
       expect(fileChipShareSource(target, threadId)).toBeNull();
       expect(fileChipMenu(target).actions.some(({ id }) => id === "save")).toBe(false);

apps/server/src/assets/AssetAccess.test.ts

@@ -269,6 +269,14 @@ describe("AssetAccess", () => {
         ["report.pdf", "application/pdf"],
         ["tone.wav", "audio/wav"],
         ["tone.webm-audio", "audio/webm"],
+        ["archive.zip", "application/zip"],
+        ["archive.jar", "application/java-archive"],
+        ["archive.tar", "application/x-tar"],
+        ["archive.gz", "application/gzip"],
+        ["archive.tgz", "application/gzip"],
+        ["data.sqlite", "application/vnd.sqlite3"],
+        ["data.sqlite3", "application/vnd.sqlite3"],
+        ["data.db", "application/vnd.sqlite3"],
       ] as const) {
         const filePath = path.join(outside, name);
         yield* fs.writeFileString(filePath, "media");
@@ -1270,6 +1278,14 @@ describe("AssetAccess", () => {
         ["woff", "font/woff"],
         ["woff2", "font/woff2"],
         ["weba", "audio/webm"],
+        ["zip", "application/zip"],
+        ["jar", "application/java-archive"],
+        ["tar", "application/x-tar"],
+        ["gz", "application/gzip"],
+        ["tgz", "application/gzip"],
+        ["sqlite", "application/vnd.sqlite3"],
+        ["sqlite3", "application/vnd.sqlite3"],
+        ["db", "application/vnd.sqlite3"],
       ] as const) {
         const attachmentId = `thread-1-00000000-0000-4000-8000-000000000001-${extension}`;
         const attachmentPath = path.join(config.attachmentsDir, `${attachmentId}.${extension}`);
@@ -1280,7 +1296,7 @@ describe("AssetAccess", () => {
             _tag: "attachment",
             attachmentId,
             fileName: `report.${extension}`,
-            mimeType: "application/octet-stream",
+            mimeType: "text/html",
             disposition: "inline",
           },
         });
@@ -1338,16 +1354,16 @@ describe("AssetAccess", () => {
       const config = yield* ServerConfig.ServerConfig;
       const fileSystem = yield* FileSystem.FileSystem;
       const path = yield* Path.Path;
-      const attachmentId = "thread-1-00000000-0000-4000-8000-000000000002-zip";
-      const attachmentPath = path.join(config.attachmentsDir, `${attachmentId}.zip`);
+      const attachmentId = "thread-1-00000000-0000-4000-8000-000000000002-7z";
+      const attachmentPath = path.join(config.attachmentsDir, `${attachmentId}.7z`);
       yield* fileSystem.makeDirectory(config.attachmentsDir, { recursive: true });
       yield* fileSystem.writeFile(attachmentPath, new Uint8Array([1, 2, 3]));
 
       const result = yield* issueAssetUrl({
         resource: {
           _tag: "attachment",
           attachmentId,
-          fileName: "archive.zip",
+          fileName: "archive.7z",
           mimeType: "text/html",
           disposition: "inline",
         },

apps/web/package.json

@@ -77,7 +77,9 @@
     "remark-gfm": "catalog:",
     "remark-math": "6.0.0",
     "remark-parse": "catalog:",
+    "sql.js": "1.15.0",
     "tailwind-merge": "^3.4.0",
+    "tiff": "7.1.3",
     "unbash": "^5.0.0",
     "unified": "catalog:",
     "use-sync-external-store": "^1.6.0",
@@ -93,6 +95,7 @@
     "@types/mdast": "^4.0.4",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
+    "@types/sql.js": "1.4.11",
     "@types/use-sync-external-store": "^0.0.6",
     "@vercel/config": "^0.3.0",
     "@vitejs/plugin-react": "^6.1.2",

apps/web/src/components/files/AttachmentFilePreview.tsx

@@ -23,6 +23,8 @@ import { useCopyToClipboard } from "~/hooks/useCopyToClipboard";
 import { useClientSettings, updateClientSettings } from "~/hooks/useSettings";
 import { cn } from "~/lib/utils";
 
+import { BinaryFilePreview } from "./BinaryFilePreview";
+import { PreviewImage } from "./PreviewImage";
 import { AudioPreview } from "./AudioPreview";
 import { BrowserDocumentFrame } from "./BrowserDocumentFrame";
 import { DelimitedTablePreview } from "./DelimitedTablePreview";
@@ -263,6 +265,8 @@ export function AttachmentFilePreview(props: {
     ) : (
       <ReadOnlySourcePreview name={props.name} text={content.text} />
     )
+  ) : kind === "archive" || kind === "sqlite" ? (
+    <BinaryFilePreview src={url} name={props.name} kind={kind} />
   ) : kind === "font" ? (
     <FontFilePreview src={url} name={props.name} />
   ) : officeKind ? (
@@ -289,15 +293,7 @@ export function AttachmentFilePreview(props: {
       />
     </div>
   ) : kind === "image" ? (
-    // oxlint-disable-next-line t3code/require-centered-scroll-gutter -- The image is capped at max-h-full max-w-full, so this never scrolls.
-    <div className="flex min-h-0 flex-1 items-center justify-center overflow-auto p-4">
-      <img
-        src={url}
-        alt={props.name}
-        className="max-h-full max-w-full object-contain"
-        onError={() => setError("Unable to load image.")}
-      />
-    </div>
+    <PreviewImage key={url} src={url} name={props.name} mimeType={props.mimeType} />
   ) : (
     <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-1 px-6 text-center">
       <p className="text-sm font-medium">No preview for this file</p>

apps/web/src/components/files/BinaryFilePreview.tsx

@@ -0,0 +1,17 @@
+import { lazy, Suspense } from "react";
+
+import { FileSurfaceLoading } from "./fileSurfaceChrome";
+
+const BinaryViewer = lazy(() => import("./BinaryViewer"));
+
+export function BinaryFilePreview(props: {
+  readonly src: string;
+  readonly name: string;
+  readonly kind: "archive" | "sqlite";
+}) {
+  return (
+    <Suspense fallback={<FileSurfaceLoading />}>
+      <BinaryViewer key={props.src} {...props} />
+    </Suspense>
+  );
+}