From ade78077543f30f70b903f58834877b6a9161125 Mon Sep 17 00:00:00 2001
From: noah <auf230184@spengergasse.at>
Date: Mon, 9 Mar 2026 19:10:41 +0100
Subject: [PATCH] feat: add file preview modal + harden PDF conversion

- Add PreviewModal component with support for images, PDFs, HTML, audio, video, and text-based formats
- FileCard now shows Preview + Download buttons side-by-side after conversion
- Preview opens in a modal overlay with Escape/backdrop-click to close
- Text files truncated at 100KB for preview performance
- Harden pdfjs-dist worker loading with try/catch fallback (runs on main thread if CDN fails)
- Add useSystemFonts option to PDF document loading for better text extraction
---
 src/app/convert/page.tsx                |  15 ++
 src/components/FileCard.tsx             |  26 ++-
 src/components/PreviewModal.tsx         | 277 ++++++++++++++++++++++++
 src/lib/converters/documentConverter.ts |  14 +-
 4 files changed, 324 insertions(+), 8 deletions(-)
 create mode 100644 src/components/PreviewModal.tsx

diff --git a/src/app/convert/page.tsx b/src/app/convert/page.tsx
index 625de5b..67670dd 100644
--- a/src/app/convert/page.tsx
+++ b/src/app/convert/page.tsx
@@ -1,12 +1,15 @@
 'use client';
 
+import { useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import Link from 'next/link';
 import { DropZone } from '@/components/DropZone';
 import { FileCard } from '@/components/FileCard';
+import { PreviewModal } from '@/components/PreviewModal';
 import { useFileUpload } from '@/hooks/useFileUpload';
 import { useConversion } from '@/hooks/useConversion';
 import { formatFileSize } from '@/lib/utils';
+import { UploadedFile } from '@/types';
 
 export default function ConvertPage() {
   const {
@@ -32,6 +35,8 @@ export default function ConvertPage() {
     downloadAllAsZip,
   } = useConversion(updateFile);
 
+  const [previewFile, setPreviewFile] = useState<UploadedFile | null>(null);
+
   const hasFiles = files.length > 0;
   const convertableCount = files.filter(
     (f) => f.targetFormat && f.status !== 'done' && f.availableFormats.length > 0
@@ -86,6 +91,7 @@ export default function ConvertPage() {
                 onSetFormat={setTargetFormat}
                 onRemove={removeFile}
                 onDownload={downloadFile}
+                onPreview={setPreviewFile}
               />
             ))}
           </AnimatePresence>
@@ -164,6 +170,15 @@ export default function ConvertPage() {
           </div>
         </motion.div>
       )}
+      {/* Preview Modal */}
+      <PreviewModal
+        file={previewFile}
+        onClose={() => setPreviewFile(null)}
+        onDownload={(f) => {
+          downloadFile(f);
+          setPreviewFile(null);
+        }}
+      />
     </div>
   );
 }
diff --git a/src/components/FileCard.tsx b/src/components/FileCard.tsx
index c8044e7..229ddd9 100644
--- a/src/components/FileCard.tsx
+++ b/src/components/FileCard.tsx
@@ -11,6 +11,7 @@ interface FileCardProps {
   onSetFormat: (id: string, format: string) => void;
   onRemove: (id: string) => void;
   onDownload: (file: UploadedFile) => void;
+  onPreview: (file: UploadedFile) => void;
 }
 
 export function FileCard({
@@ -19,6 +20,7 @@ export function FileCard({
   onSetFormat,
   onRemove,
   onDownload,
+  onPreview,
 }: FileCardProps) {
   const categoryColor = CATEGORY_COLORS[file.category];
   const categoryLabel = CATEGORY_LABELS[file.category];
@@ -168,21 +170,35 @@ export function FileCard({
         </div>
       )}
 
-      {/* Download button */}
+      {/* Action buttons */}
       {file.status === 'done' && (
-        <div className="px-4 pb-4 pt-1">
+        <div className="flex items-center gap-2 px-4 pb-4 pt-1">
           <motion.button
-            className="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 text-[13px] font-bold text-white bg-mint border-none rounded-xl cursor-pointer shadow-[0_2px_12px_rgba(52,211,153,0.2)] hover:-translate-y-0.5 hover:shadow-[0_4px_20px_rgba(52,211,153,0.3)] transition-all"
+            className="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2.5 text-[12px] font-bold text-text-dark bg-bg-warm border border-border-soft rounded-xl cursor-pointer hover:-translate-y-0.5 hover:shadow-[0_2px_12px_rgba(180,140,100,0.1)] hover:border-border-med transition-all"
+            onClick={() => onPreview(file)}
+            initial={{ opacity: 0, y: 5 }}
+            animate={{ opacity: 1, y: 0 }}
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+          >
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+              <circle cx="12" cy="12" r="3" />
+            </svg>
+            Preview
+          </motion.button>
+          <motion.button
+            className="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2.5 text-[12px] font-bold text-white bg-mint border-none rounded-xl cursor-pointer shadow-[0_2px_12px_rgba(52,211,153,0.2)] hover:-translate-y-0.5 hover:shadow-[0_4px_20px_rgba(52,211,153,0.3)] transition-all"
             onClick={() => onDownload(file)}
             initial={{ opacity: 0, y: 5 }}
             animate={{ opacity: 1, y: 0 }}
             whileHover={{ scale: 1.02 }}
             whileTap={{ scale: 0.98 }}
           >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
               <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" />
             </svg>
-            Download .{file.targetFormat}
+            .{file.targetFormat}
           </motion.button>
         </div>
       )}
diff --git a/src/components/PreviewModal.tsx b/src/components/PreviewModal.tsx
new file mode 100644
index 0000000..17a793b
--- /dev/null
+++ b/src/components/PreviewModal.tsx
@@ -0,0 +1,277 @@
+'use client';
+
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { UploadedFile } from '@/types';
+import { formatFileSize } from '@/lib/utils';
+
+interface PreviewModalProps {
+  file: UploadedFile | null;
+  onClose: () => void;
+  onDownload: (file: UploadedFile) => void;
+}
+
+/** Formats we can show as text in a <pre> block */
+const TEXT_FORMATS = new Set([
+  'txt', 'md', 'json', 'csv', 'tsv', 'xml', 'yaml', 'yml', 'toml',
+  'ini', 'env', 'properties', 'ndjson', 'jsonl', 'sql', 'rst', 'tex',
+]);
+
+/** Formats that render in an <iframe> */
+const IFRAME_FORMATS = new Set(['pdf', 'html', 'htm']);
+
+/** Image formats for <img> */
+const IMAGE_FORMATS = new Set([
+  'png', 'jpg', 'jpeg', 'webp', 'gif', 'bmp', 'avif', 'svg', 'ico', 'tiff', 'tif',
+]);
+
+/** Audio formats for <audio> */
+const AUDIO_FORMATS = new Set(['mp3', 'wav', 'ogg', 'aac', 'flac', 'm4a', 'opus', 'wma']);
+
+/** Video formats for <video> */
+const VIDEO_FORMATS = new Set(['mp4', 'webm', 'mov', 'avi', 'mkv']);
+
+function getPreviewType(format: string): 'text' | 'iframe' | 'image' | 'audio' | 'video' | 'none' {
+  if (IMAGE_FORMATS.has(format)) return 'image';
+  if (IFRAME_FORMATS.has(format)) return 'iframe';
+  if (AUDIO_FORMATS.has(format)) return 'audio';
+  if (VIDEO_FORMATS.has(format)) return 'video';
+  if (TEXT_FORMATS.has(format)) return 'text';
+  return 'none';
+}
+
+export function PreviewModal({ file, onClose, onDownload }: PreviewModalProps) {
+  const [textContent, setTextContent] = useState<string | null>(null);
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  const targetFormat = file?.targetFormat || '';
+  const previewType = getPreviewType(targetFormat);
+
+  // Load preview content
+  useEffect(() => {
+    if (!file?.convertedBlob || !file?.targetFormat) {
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setTextContent(null);
+
+    const type = getPreviewType(file.targetFormat);
+
+    if (type === 'text') {
+      // Read blob as text
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        setTextContent(e.target?.result as string);
+        setLoading(false);
+      };
+      reader.onerror = () => {
+        setTextContent('[Failed to read file content]');
+        setLoading(false);
+      };
+      reader.readAsText(file.convertedBlob);
+    } else if (type === 'image' || type === 'iframe' || type === 'audio' || type === 'video') {
+      const url = URL.createObjectURL(file.convertedBlob);
+      setBlobUrl(url);
+      setLoading(false);
+    } else {
+      setLoading(false);
+    }
+
+    return () => {
+      if (blobUrl) {
+        URL.revokeObjectURL(blobUrl);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [file?.convertedBlob, file?.targetFormat]);
+
+  // Cleanup blob URL on unmount
+  useEffect(() => {
+    return () => {
+      if (blobUrl) URL.revokeObjectURL(blobUrl);
+    };
+  }, [blobUrl]);
+
+  // Close on Escape
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
+  // Close on backdrop click
+  const handleBackdropClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.target === overlayRef.current) onClose();
+    },
+    [onClose]
+  );
+
+  if (!file) return null;
+
+  const convertedSize = file.convertedBlob ? formatFileSize(file.convertedBlob.size) : '';
+
+  return (
+    <AnimatePresence>
+      {file && (
+        <motion.div
+          ref={overlayRef}
+          className="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-6 bg-black/40 backdrop-blur-sm"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2 }}
+          onClick={handleBackdropClick}
+        >
+          <motion.div
+            className="relative flex flex-col w-full max-w-4xl max-h-[90vh] bg-white rounded-2xl border border-border-soft shadow-[0_20px_60px_rgba(0,0,0,0.15)] overflow-hidden"
+            initial={{ opacity: 0, scale: 0.95, y: 20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: 20 }}
+            transition={{ duration: 0.25, ease: [0.16, 1, 0.3, 1] as const }}
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between px-5 py-3.5 border-b border-border-soft bg-bg-cream/60">
+              <div className="flex items-center gap-3 min-w-0">
+                <div className="flex items-center gap-1.5 px-2.5 py-1 bg-mint/12 text-mint rounded-lg border border-mint/20">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                    <circle cx="12" cy="12" r="3" />
+                  </svg>
+                  <span className="font-mono text-[11px] font-bold uppercase tracking-wider">Preview</span>
+                </div>
+                <div className="min-w-0">
+                  <p className="text-sm font-semibold text-text-dark truncate" title={file.convertedName || ''}>
+                    {file.convertedName || file.name}
+                  </p>
+                  <p className="font-mono text-[11px] text-text-light">
+                    .{file.targetFormat} {convertedSize ? `/ ${convertedSize}` : ''}
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-2 flex-shrink-0">
+                <button
+                  className="inline-flex items-center gap-1.5 px-3.5 py-1.5 text-[12px] font-bold text-white bg-mint border-none rounded-lg cursor-pointer hover:-translate-y-0.5 hover:shadow-[0_4px_16px_rgba(52,211,153,0.3)] transition-all"
+                  onClick={() => onDownload(file)}
+                >
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                    <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" />
+                  </svg>
+                  Download
+                </button>
+                <button
+                  className="flex items-center justify-center w-8 h-8 rounded-lg bg-transparent border-none cursor-pointer text-text-light hover:text-text-dark hover:bg-bg-warm transition-all"
+                  onClick={onClose}
+                  aria-label="Close preview"
+                >
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                    <path d="M18 6L6 18M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 overflow-auto bg-bg-warm/30">
+              {loading ? (
+                <div className="flex items-center justify-center h-64">
+                  <div className="flex flex-col items-center gap-3">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="animate-spin text-text-light">
+                      <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
+                    </svg>
+                    <span className="font-mono text-xs text-text-light">Loading preview...</span>
+                  </div>
+                </div>
+              ) : previewType === 'image' && blobUrl ? (
+                <div className="flex items-center justify-center p-6 min-h-[300px]">
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    src={blobUrl}
+                    alt={file.convertedName || 'Preview'}
+                    className="max-w-full max-h-[70vh] object-contain rounded-lg shadow-[0_4px_20px_rgba(0,0,0,0.08)]"
+                  />
+                </div>
+              ) : previewType === 'iframe' && blobUrl ? (
+                <iframe
+                  src={blobUrl}
+                  className="w-full h-[70vh] border-none"
+                  title="File preview"
+                  sandbox="allow-same-origin"
+                />
+              ) : previewType === 'audio' && blobUrl ? (
+                <div className="flex flex-col items-center justify-center gap-6 p-10 min-h-[250px]">
+                  <div className="flex items-center justify-center w-20 h-20 rounded-full bg-purple/10 border border-purple/20">
+                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" strokeWidth="1.5">
+                      <path d="M9 18V5l12-2v13" />
+                      <circle cx="6" cy="18" r="3" />
+                      <circle cx="18" cy="16" r="3" />
+                    </svg>
+                  </div>
+                  <audio controls src={blobUrl} className="w-full max-w-md" preload="metadata">
+                    Your browser does not support audio playback.
+                  </audio>
+                  <p className="font-mono text-xs text-text-light">
+                    {file.convertedName}
+                  </p>
+                </div>
+              ) : previewType === 'video' && blobUrl ? (
+                <div className="flex items-center justify-center p-4">
+                  <video
+                    controls
+                    src={blobUrl}
+                    className="max-w-full max-h-[70vh] rounded-lg shadow-[0_4px_20px_rgba(0,0,0,0.08)]"
+                    preload="metadata"
+                  >
+                    Your browser does not support video playback.
+                  </video>
+                </div>
+              ) : previewType === 'text' && textContent !== null ? (
+                <div className="p-4">
+                  <pre className="w-full p-4 bg-white rounded-xl border border-border-soft font-mono text-[13px] leading-relaxed text-text-dark overflow-auto max-h-[70vh] whitespace-pre-wrap break-words">
+                    {textContent.length > 100000
+                      ? textContent.slice(0, 100000) + '\n\n... [truncated — file too large for preview]'
+                      : textContent}
+                  </pre>
+                </div>
+              ) : (
+                /* No preview available */
+                <div className="flex flex-col items-center justify-center gap-4 p-10 min-h-[250px]">
+                  <div className="flex items-center justify-center w-16 h-16 rounded-2xl bg-bg-warm border border-border-soft">
+                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-text-light">
+                      <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+                      <polyline points="14,2 14,8 20,8" />
+                    </svg>
+                  </div>
+                  <div className="text-center">
+                    <p className="text-sm font-semibold text-text-dark">
+                      Preview not available for .{file.targetFormat} files
+                    </p>
+                    <p className="text-xs text-text-light mt-1">
+                      Download the file to view it in its native application
+                    </p>
+                  </div>
+                  <button
+                    className="inline-flex items-center gap-2 px-5 py-2.5 text-[13px] font-bold text-white bg-mint border-none rounded-xl cursor-pointer hover:-translate-y-0.5 hover:shadow-[0_4px_20px_rgba(52,211,153,0.3)] transition-all"
+                    onClick={() => onDownload(file)}
+                  >
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" />
+                    </svg>
+                    Download .{file.targetFormat}
+                  </button>
+                </div>
+              )}
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/src/lib/converters/documentConverter.ts b/src/lib/converters/documentConverter.ts
index afe4267..43cdf3a 100644
--- a/src/lib/converters/documentConverter.ts
+++ b/src/lib/converters/documentConverter.ts
@@ -105,11 +105,19 @@ function escapeHtml(text: string): string {
 async function pdfToText(file: File): Promise<string> {
   const pdfjsLib = await import('pdfjs-dist');
 
-  // Use the bundled worker
-  pdfjsLib.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjsLib.version}/build/pdf.worker.min.mjs`;
+  // Try loading the worker from CDN; if it fails, run without worker (main thread)
+  try {
+    pdfjsLib.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjsLib.version}/build/pdf.worker.min.mjs`;
+  } catch {
+    // Worker setup failed — pdfjs will run on main thread (slower but works)
+    pdfjsLib.GlobalWorkerOptions.workerSrc = '';
+  }
 
   const arrayBuffer = await readFileAsArrayBuffer(file);
-  const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+  const pdf = await pdfjsLib.getDocument({
+    data: arrayBuffer,
+    useSystemFonts: true,
+  }).promise;
 
   const textParts: string[] = [];