From 386d206ff1440dc731c817497d958420b630b78d Mon Sep 17 00:00:00 2001
From: duffyduck <info@hacker-net.de>
Date: Tue, 23 Jun 2026 15:56:16 +0200
Subject: [PATCH] Vertragsdokumente-Modal: Vorschau-Link pro Dokument
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Neben jeder Dokument-Zeile sitzt jetzt ein "Vorschau"-Link mit
ExternalLink-Icon, der die PDF in einem neuen Tab öffnet (via
viewUrl mit Token-Auth, inline-disposition). Klick darauf
schaltet bewusst NICHT die Checkbox um – die Auswahl bleibt,
nur das Dokument geht in einem zweiten Tab auf.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../email/AttachContractDocumentsModal.tsx    | 56 ++++++++++++-------
 1 file changed, 35 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/email/AttachContractDocumentsModal.tsx b/frontend/src/components/email/AttachContractDocumentsModal.tsx
index 74221839..c16037d3 100644
--- a/frontend/src/components/email/AttachContractDocumentsModal.tsx
+++ b/frontend/src/components/email/AttachContractDocumentsModal.tsx
@@ -1,11 +1,12 @@
 import { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { FileText, Loader2 } from 'lucide-react';
+import { FileText, Loader2, ExternalLink } from 'lucide-react';
 import toast from 'react-hot-toast';
 import Modal from '../ui/Modal';
 import Button from '../ui/Button';
 import { contractApi, EmailAttachment } from '../../services/api';
 import { serverFileToAttachment, totalAttachmentBytes } from './composeAttachmentHelpers';
+import { viewUrl } from '../../utils/fileUrl';
 
 interface Props {
   isOpen: boolean;
@@ -127,29 +128,42 @@ export default function AttachContractDocumentsModal({
                 </div>
                 <div className="space-y-1">
                   {docs.map((doc) => (
-                    <label
+                    <div
                       key={doc.id}
-                      className="flex items-start gap-2 p-2 rounded hover:bg-gray-50 cursor-pointer"
+                      className="flex items-start gap-2 p-2 rounded hover:bg-gray-50"
                     >
-                      <input
-                        type="checkbox"
-                        checked={selected.has(doc.id)}
-                        onChange={() => toggle(doc.id)}
-                        disabled={busy}
-                        className="mt-0.5 rounded"
-                      />
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2 text-sm">
-                          <FileText className="w-4 h-4 text-gray-400 flex-shrink-0" />
-                          <span className="truncate">{doc.originalName}</span>
-                        </div>
-                        {doc.notes && (
-                          <div className="text-xs text-gray-500 mt-0.5 ml-6 truncate">
-                            {doc.notes}
+                      <label className="flex items-start gap-2 flex-1 min-w-0 cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={selected.has(doc.id)}
+                          onChange={() => toggle(doc.id)}
+                          disabled={busy}
+                          className="mt-0.5 rounded"
+                        />
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2 text-sm">
+                            <FileText className="w-4 h-4 text-gray-400 flex-shrink-0" />
+                            <span className="truncate">{doc.originalName}</span>
                           </div>
-                        )}
-                      </div>
-                    </label>
+                          {doc.notes && (
+                            <div className="text-xs text-gray-500 mt-0.5 ml-6 truncate">
+                              {doc.notes}
+                            </div>
+                          )}
+                        </div>
+                      </label>
+                      <a
+                        href={viewUrl(doc.documentPath)}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        onClick={(e) => e.stopPropagation()}
+                        className="flex-shrink-0 inline-flex items-center gap-1 px-2 py-1 text-xs text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded transition-colors"
+                        title="Dokument in neuem Tab öffnen"
+                      >
+                        <ExternalLink className="w-3.5 h-3.5" />
+                        <span>Vorschau</span>
+                      </a>
+                    </div>
                   ))}
                 </div>
               </div>