From a8e27d228e290a5a545a936d7871eb6dd1626c41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20P=C3=B6ttker?= <bjoern@poettker-holtrup.de>
Date: Sun, 10 May 2026 20:49:20 +0200
Subject: [PATCH] feat: add document thumbnail previews with tooltips to
 download and email dialogs

---
 .../src/pages/InboxDetailPage.tsx             | 40 ++++++++++++++-----
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/paperless-frontend/src/pages/InboxDetailPage.tsx b/paperless-frontend/src/pages/InboxDetailPage.tsx
index 48ef39c..8c43a2a 100644
--- a/paperless-frontend/src/pages/InboxDetailPage.tsx
+++ b/paperless-frontend/src/pages/InboxDetailPage.tsx
@@ -533,10 +533,11 @@ interface DownloadSegmentsDialogProps {
   fileId: string;
   fileName: string;
   documents: DocumentSegment[];
+  thumbUrls: Map<number, string>;
   onClose: () => void;
 }
 
-function DownloadSegmentsDialog({ open, fileId, fileName, documents, onClose }: DownloadSegmentsDialogProps) {
+function DownloadSegmentsDialog({ open, fileId, fileName, documents, thumbUrls, onClose }: DownloadSegmentsDialogProps) {
   const [filenames, setFilenames] = useState<string[]>([]);
   const [downloading, setDownloading] = useState<number | 'all' | null>(null);
 
@@ -605,12 +606,20 @@ function DownloadSegmentsDialog({ open, fileId, fileName, documents, onClose }:
     >
       <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 16 }}>
         {documents.map((doc, i) => {
-          const first = doc.pages[0];
-          const last = doc.pages[doc.pages.length - 1];
-          const range = first === last ? `Seite ${first}` : `Seiten ${first}–${last}`;
+          const thumbUrl = thumbUrls.get(doc.pages[0]);
           return (
             <div key={doc.index} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-              <span style={{ minWidth: 90, color: '#888', fontSize: 12 }}>{range}</span>
+              <Tooltip
+                title={thumbUrl ? <img src={thumbUrl} style={{ maxWidth: 260, maxHeight: 340, display: 'block' }} alt="" /> : null}
+                placement="right"
+                mouseEnterDelay={0.2}
+              >
+                <div style={{ width: 36, height: 48, flexShrink: 0, border: '1px solid #e0e0e0', borderRadius: 3, overflow: 'hidden', background: '#fafafa', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'default' }}>
+                  {thumbUrl
+                    ? <img src={thumbUrl} style={{ width: '100%', height: '100%', objectFit: 'contain' }} alt="" />
+                    : <Spin size="small" />}
+                </div>
+              </Tooltip>
               <Input
                 value={filenames[i] ?? ''}
                 onChange={(e) =>
@@ -640,10 +649,11 @@ interface SendEmailDialogProps {
   fileId: string;
   fileName: string;
   documents: DocumentSegment[];
+  thumbUrls: Map<number, string>;
   onClose: () => void;
 }
 
-function SendEmailDialog({ open, fileId, fileName, documents, onClose }: SendEmailDialogProps) {
+function SendEmailDialog({ open, fileId, fileName, documents, thumbUrls, onClose }: SendEmailDialogProps) {
   const [form] = Form.useForm();
   const [submitting, setSubmitting] = useState(false);
   const [filenames, setFilenames] = useState<string[]>([]);
@@ -728,12 +738,20 @@ function SendEmailDialog({ open, fileId, fileName, documents, onClose }: SendEma
         <Form.Item label="Anhänge">
           <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
             {documents.map((doc, i) => {
-              const first = doc.pages[0];
-              const last = doc.pages[doc.pages.length - 1];
-              const range = first === last ? `Seite ${first}` : `Seiten ${first}–${last}`;
+              const thumbUrl = thumbUrls.get(doc.pages[0]);
               return (
                 <div key={doc.index} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-                  <span style={{ minWidth: 90, color: '#888', fontSize: 12 }}>{range}</span>
+                  <Tooltip
+                    title={thumbUrl ? <img src={thumbUrl} style={{ maxWidth: 260, maxHeight: 340, display: 'block' }} alt="" /> : null}
+                    placement="right"
+                    mouseEnterDelay={0.2}
+                  >
+                    <div style={{ width: 36, height: 48, flexShrink: 0, border: '1px solid #e0e0e0', borderRadius: 3, overflow: 'hidden', background: '#fafafa', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'default' }}>
+                      {thumbUrl
+                        ? <img src={thumbUrl} style={{ width: '100%', height: '100%', objectFit: 'contain' }} alt="" />
+                        : <Spin size="small" />}
+                    </div>
+                  </Tooltip>
                   <Input
                     value={filenames[i] ?? ''}
                     onChange={(e) =>
@@ -1566,6 +1584,7 @@ export default function InboxDetailPage() {
         fileId={file.id}
         fileName={file.name}
         documents={documents}
+        thumbUrls={thumbUrls}
         onClose={() => setDownloadDialogOpen(false)}
       />
       <SendEmailDialog
@@ -1573,6 +1592,7 @@ export default function InboxDetailPage() {
         fileId={file.id}
         fileName={file.name}
         documents={documents}
+        thumbUrls={thumbUrls}
         onClose={() => setEmailDialogOpen(false)}
       />
     </div>