From bd2669af4dc5e7bf00c95a4dc9d2d6e3f2d2e9e6 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Sun, 2 Nov 2025 14:12:40 +0100
Subject: [PATCH] viewer

---
 frontend/src/detail/DetailPanel.jsx          |  5 +-
 frontend/src/preview/DocumentViewerPanel.jsx | 49 ++++++++++++++++----
 frontend/src/styles.css                      | 32 +++++++++++++
 3 files changed, 75 insertions(+), 11 deletions(-)

diff --git a/frontend/src/detail/DetailPanel.jsx b/frontend/src/detail/DetailPanel.jsx
index 53094c0..3927533 100644
--- a/frontend/src/detail/DetailPanel.jsx
+++ b/frontend/src/detail/DetailPanel.jsx
@@ -875,9 +875,8 @@ const DetailPanel = ({
           event.stopPropagation();
           onOpenPreview(singleDoc.id);
         }}
-        aria-label="Open preview"
-        title="Open preview"
-        disabled={!singleHasPreview}
+        aria-label="Maximize"
+        title="Maximize"
       >
         <WindowMaximizeIcon className="icon--flip-y" />
       </button>,
diff --git a/frontend/src/preview/DocumentViewerPanel.jsx b/frontend/src/preview/DocumentViewerPanel.jsx
index 435fab1..46eb643 100644
--- a/frontend/src/preview/DocumentViewerPanel.jsx
+++ b/frontend/src/preview/DocumentViewerPanel.jsx
@@ -73,9 +73,15 @@ const DocumentViewerPanel = ({
       return null;
     }
 
-    const contentType = (document.content_type || '').toLowerCase();
+    const normalizedContentType = (previewEntry.contentType
+      || document.content_type
+      || '')
+      .toLowerCase();
+    const isImage = normalizedContentType.startsWith('image/');
+    const isPdf = normalizedContentType === 'application/pdf'
+      || normalizedContentType === 'application/x-pdf';
 
-    if (contentType.startsWith('image/')) {
+    if (isImage) {
       return (
         <img
           src={previewEntry.url}
@@ -86,14 +92,41 @@ const DocumentViewerPanel = ({
       );
     }
 
+    if (isPdf) {
+      return (
+        <iframe
+          src={previewEntry.url}
+          title={`Preview of ${document.title}`}
+          className="document-viewer__object"
+        />
+      );
+    }
+
+    const displayContentType = document.content_type || previewEntry.contentType || 'this file type';
+    const displayFilename = previewEntry.filename
+      || document.filename
+      || document.original_name
+      || 'download';
+
     return (
-      <iframe
-        src={previewEntry.url}
-        title={`Preview of ${document.title}`}
-        className="document-viewer__object"
-      />
+      <div className="document-viewer__unsupported">
+        <div className="document-viewer__unsupported-message">
+          Preview is not available for {displayContentType} files.
+        </div>
+        <div className="document-viewer__unsupported-filename">{displayFilename}</div>
+        <a
+          className="button-link document-viewer__unsupported-download"
+          href={previewEntry.url}
+          download={displayFilename}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <DownloadIcon />
+          <span>Download</span>
+        </a>
+      </div>
     );
-  }, [previewEntry?.url, document]);
+  }, [previewEntry, document]);
 
   const metadataPayload = useMemo(() => {
     if (!document || !document.metadata || Object.keys(document.metadata).length === 0) {
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index f4b02cd..8f8c268 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1053,6 +1053,38 @@ button.danger:hover:not([disabled]) {
   align-self: flex-start;
 }
 
+.document-viewer__unsupported {
+  height: 100%;
+  width: 100%;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  text-align: center;
+  background: var(--surface-subtle);
+}
+
+.document-viewer__unsupported-filename {
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+.document-viewer__unsupported-message {
+  font-size: 0.95rem;
+  color: var(--fg);
+}
+
+.document-viewer__unsupported-download {
+  font-weight: 600;
+}
+
+.document-viewer__unsupported-download svg {
+  width: 1rem;
+  height: 1rem;
+}
+
 .tags-panel__body {
   overflow-y: auto;
 }