From 8f86a71c396eb118f724476c89ad263b9e1ceb2e Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Sun, 2 Nov 2025 14:27:13 +0100
Subject: [PATCH] fix

---
 frontend/src/detail/DetailPanel.jsx | 34 ++++++++++++++++++++++--
 frontend/src/styles.css             | 40 +++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/frontend/src/detail/DetailPanel.jsx b/frontend/src/detail/DetailPanel.jsx
index 3927533..062b8d8 100644
--- a/frontend/src/detail/DetailPanel.jsx
+++ b/frontend/src/detail/DetailPanel.jsx
@@ -49,6 +49,7 @@ const PreviewStack = ({
   items = [],
   maxItems = MAX_PREVIEW_STACK_ITEMS,
   emptyMessage = 'Preview unavailable',
+  emptyContent = null,
   onItemActivate,
   onOpenPreview,
   onZoomPreview,
@@ -65,7 +66,11 @@ const PreviewStack = ({
   );
 
   if (!limited.length) {
-    return <span className="meta">{emptyMessage}</span>;
+    return (
+      <div className="preview-stack preview-stack--empty">
+        {emptyContent || <span className="meta">{emptyMessage}</span>}
+      </div>
+    );
   }
 
   return (
@@ -684,6 +689,30 @@ const DetailPanel = ({
     const canGoPrev = singlePreviewNavigator.canGoPrev;
     const canGoNext = singlePreviewNavigator.canGoNext;
     const hasPreviewImage = Boolean(singlePreviewNavigator.currentUrl);
+    const previewMissingAsset = !singleNavigatorAsset;
+    const displayContentType = singleDoc.content_type || 'this file type';
+    const displayFilename =
+      singleDoc.filename || singleDoc.original_name || singleDoc.title || 'download';
+    const previewFallback = previewMissingAsset ? (
+      <div className="preview-pane__unsupported">
+        <div className="preview-pane__unsupported-message">
+          Preview not available for {displayContentType} files.
+        </div>
+        <div className="preview-pane__unsupported-filename">{displayFilename}</div>
+        {singleDownloadHref ? (
+          <a
+            className="button-link preview-pane__unsupported-download"
+            href={singleDownloadHref}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <DownloadIcon />
+            <span>Download</span>
+          </a>
+        ) : null}
+      </div>
+    ) : null;
+    const emptyMessage = previewMissingAsset ? 'Preview unavailable' : 'Preview loading…';
     const interceptNavPointer = (event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -695,7 +724,8 @@ const DetailPanel = ({
           <PreviewStack
             items={singlePreviewItems}
             maxItems={1}
-            emptyMessage="Preview loading…"
+            emptyMessage={emptyMessage}
+            emptyContent={previewFallback}
             onItemActivate={handlePreviewActivate}
             onOpenPreview={onOpenPreview}
             onZoomPreview={handleSingleZoom}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 8f8c268..9b39d88 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -2910,6 +2910,12 @@ button.danger:hover:not([disabled]) {
   flex-shrink: 0;
 }
 
+.preview-stack--empty {
+  width: 100%;
+  min-height: 420px;
+  flex-shrink: 0;
+}
+
 .preview-stack__item {
   position: absolute;
   top: 50%;
@@ -2963,6 +2969,40 @@ button.danger:hover:not([disabled]) {
     0 6px 18px var(--accent-elevated-strong);
 }
 
+.preview-pane__unsupported {
+  width: 100%;
+  max-width: 320px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  align-items: center;
+  text-align: center;
+  padding: 1.5rem;
+  border-radius: 8px;
+  background: var(--surface-subtle);
+  color: var(--fg);
+}
+
+.preview-pane__unsupported-message {
+  font-size: 0.95rem;
+  font-weight: 500;
+}
+
+.preview-pane__unsupported-filename {
+  font-size: 0.85rem;
+  color: var(--muted);
+  word-break: break-word;
+}
+
+.preview-pane__unsupported-download {
+  font-weight: 600;
+}
+
+.preview-pane__unsupported-download svg {
+  width: 1rem;
+  height: 1rem;
+}
+
 .preview-pane--stack {
   min-height: 460px;
   position: relative;