feat(drive): image thumbnails in the mosaic/grid view (#4)

Image files now show a real preview in the grid instead of a generic icon,
with a graceful fallback to the type icon if the image can't load. Works
for server-encrypted and public files (Zero-Knowledge stays iconified).

Thumbnails load via /files/:id/download?preview=1 — a new preview flag that
skips the audit log, so a folder full of images doesn't flood it with one
"download" entry per tile. Thumbnails are lazy-loaded.

Author: softpython2884

apps/api/src/routes/files.ts

@@ -95,9 +95,12 @@ export const fileRoutes: FastifyPluginAsync = async (app) => {
     }
   });
 
-  // GET /files/:id/download — decrypt and stream a SERVER-mode file.
+  // GET /files/:id/download — decrypt and stream a SERVER-mode file. `?preview=1` is used for
+  // inline previews / grid thumbnails and is NOT audited (so a folder of images doesn't flood the
+  // audit log with one download entry per tile).
   app.get('/:id/download', async (req, reply) => {
     const { id } = req.params as { id: string };
+    const { preview } = req.query as { preview?: string };
     const file = await prisma.fileObject.findFirst({
       where: { id, ownerId: req.user!.id, spaceId: null },
     });
@@ -106,7 +109,7 @@ export const fileRoutes: FastifyPluginAsync = async (app) => {
       return reply.code(400).send({ error: 'Zero-Knowledge files are fetched via the vault API' });
     }
 
-    await audit(req, 'file.download', { target: file.id });
+    if (preview !== '1') await audit(req, 'file.download', { target: file.id });
     reply
       .header('Content-Type', file.mimeType)
       .header('Content-Length', Number(file.sizeBytes))

apps/web/src/app/(app)/drive/page.tsx

@@ -69,7 +69,7 @@ import {
   makeVerifier,
   randomSalt,
 } from '@/lib/zk';
-import { fileVisual } from '@/lib/fileType';
+import { fileVisual, previewKind } from '@/lib/fileType';
 import { signalDownload } from '@/lib/downloadFx';
 import { FileViewer, type ViewerSource } from '@/components/FileViewer';
 import { confirm, prompt, choose, toast } from '@/components/ui/overlays';
@@ -1743,11 +1743,33 @@ export default function EspacesPage() {
 
 // ── Small presentational helpers ──────────────────────────────────────────────
 
+/** Grid thumbnail: shows the actual image for image files (server-served, not ZK), with a
+ *  graceful fallback to the type icon on error. `?preview=1` keeps it out of the audit log. */
+function Thumb({ src, fallback }: { src: string; fallback: React.ReactNode }) {
+  const [err, setErr] = useState(false);
+  if (err) return <>{fallback}</>;
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={src}
+      alt=""
+      loading="lazy"
+      onError={() => setErr(true)}
+      className="h-16 w-16 rounded-lg object-cover ring-1 ring-white/10"
+    />
+  );
+}
+
 function cardIcon(e: Entry, isZk: boolean) {
   if (e.kind === 'folder') return isZk ? <FolderLock size={30} className="text-violet-300" /> : <Folder size={30} className="text-zinc-400" />;
   if (e.kind === 'zk') return <Lock size={30} className="text-violet-300" />;
   const v = fileVisual(e.file.name, e.file.mimeType);
-  return <v.Icon size={30} className={v.color} />;
+  const icon = <v.Icon size={30} className={v.color} />;
+  // Image files get a real thumbnail (server-decrypted / plaintext for public); others the icon.
+  if (previewKind(e.file.name, e.file.mimeType) === 'image') {
+    return <Thumb src={api.url(`/files/${e.file.id}/download?preview=1`)} fallback={icon} />;
+  }
+  return icon;
 }
 function rowIcon(e: Entry, isZk: boolean) {
   if (e.kind === 'folder') return isZk ? <FolderLock size={18} className="text-violet-300" /> : <Folder size={18} className="text-zinc-400" />;