feat(office): Dokumente am Telefon als PDF ansehen statt bearbeiten

Am Finger öffnet ein Office-Dokument jetzt das gewandelte PDF im eigenen
Betrachter; "Edit" daneben führt trotzdem in den Editor. Mit Maus ändert
sich nichts.

Der Web-Editor ist eine vollständige Textverarbeitung – zwischen seinen
Leisten bleibt auf 400 Pixeln vom Dokument ein Rechteck. Collabora und
OnlyOffice verhalten sich gleich; deshalb kein besserer Bedienmodus,
sondern ein anderes Werkzeug. Gewandelt wird von dem Server, der auch
bearbeitet: Sonst sähe man unterwegs ein LibreOffice-Layout eines
Dokuments, für das man OnlyOffice gewählt hat.

Je Dokument gibt es GENAU EIN PDF, und das ist keine Frage des
Aufräumens, sondern des Schlüssels: previews/<id>.pdf trägt die Fassung
nicht im Namen, eine neue Fassung überschreibt. files.preview_version
sagt, ob das Abgelegte noch passt.

Sicherheit: Die Adresse, die OnlyOffice zurückgibt, wird von uns
abgerufen – der Wähler des Transports lässt nur OFFICE_ALLOWED_HOSTS zu,
zusätzlich eine ausdrückliche Prüfung mit Test. JWT-Signatur (HS256) für
die eigene API des Dokumentenservers. Fremde Kennung 404, ohne Anmeldung
401. Das Ergebnis muss mit %PDF- beginnen, sonst landete eine
Fehlerseite im Zwischenspeicher.

Gemessen gegen einen echten OnlyOffice-Server im Docker-Netz:
  erster Abruf 1,05 s -> zweiter 0,009 s
  erneut hochgeladen -> Fassung 2, preview_version 2, weiterhin 1 Datei
  GC: herrenloses PDF von vorgestern weg, echtes bleibt
  endgültig gelöscht -> PDF weg; Papierkorb -> PDF bleibt
  ohne Anmeldung 401, fremde Kennung 404, Nicht-Office 415

Dazu im Admin-Bereich neu: Platzbedarf der abgeleiteten Daten
(Vorschaubilder, PDFs, Profilbilder). Sie zählen gegen kein Kontingent –
ein Ordner, der wächst, ohne dass ihn jemand sieht, ist eine stille
Überraschung.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

frontend/src/components/FilePreview.tsx

@@ -19,6 +19,17 @@ interface Props {
   onClose: () => void
   /** Nach dem Speichern: Liste neu holen, damit Größe und Datum stimmen. */
   onSaved?: () => void
+  /**
+   * Ein Office-Dokument als PDF zeigen statt im Editor.
+   *
+   * Am Telefon der Normalfall: Der Editor ist dort eine vollständige
+   * Textverarbeitung, und vom Dokument bleibt zwischen seinen Leisten ein
+   * Rechteck übrig. Zum Nachsehen – und das ist unterwegs fast immer der
+   * Anlass – ist ein PDF im eigenen Betrachter das bessere Werkzeug.
+   */
+  asOfficePdf?: boolean
+  /** „Trotzdem bearbeiten" – nur gesetzt, wenn es einen Editor gibt. */
+  onEdit?: () => void
   /**
    * Suchwort, mit dem die Datei gefunden wurde. Der PDF-Betrachter springt
    * damit zur Fundstelle, statt auf Seite 1 zu beginnen – der Grund, aus dem
@@ -90,10 +101,12 @@ export function canPreview(file: FileItem): boolean {
   return kindOf(file.mime_type, file.name) !== 'none'
 }
 
-export default function FilePreview({ file, onPrev, onNext, onClose, onSaved, searchTerm }: Props) {
-  const kind = kindOf(file.mime_type, file.name)
+export default function FilePreview({ file, onPrev, onNext, onClose, onSaved, searchTerm, asOfficePdf, onEdit }: Props) {
+  // Ein Office-Dokument ist für den Browser sonst „nichts anzeigbares" – als
+  // gewandeltes PDF ist es eins.
+  const kind = asOfficePdf ? 'pdf' : kindOf(file.mime_type, file.name)
   const narrow = useNarrow()
-  const src = filesApi.inline(file.id)
+  const src = asOfficePdf ? filesApi.officePreview(file.id, file.version) : filesApi.inline(file.id)
   const [text, setText] = useState<string | null>(null)
   const [tooBig, setTooBig] = useState(false)
   const [editing, setEditing] = useState(false)
@@ -205,6 +218,23 @@ export default function FilePreview({ file, onPrev, onNext, onClose, onSaved, se
           {file.name}
         </span>
 
+        {/* Der Weg in den Editor bleibt offen – eine Ansicht ohne Ausweg wäre
+            eine Bevormundung. Er steht bewusst *neben* dem Namen und nicht
+            als Hauptknopf: Am Telefon ist Nachsehen der Anlass, Bearbeiten
+            die Ausnahme. */}
+        {asOfficePdf && onEdit && (
+          <button
+            onClick={onEdit}
+            style={{
+              padding: '6px 12px', borderRadius: 8, fontSize: 12, flexShrink: 0,
+              border: '1px solid var(--color-border)', background: 'transparent',
+              color: 'var(--color-text)', cursor: 'pointer', whiteSpace: 'nowrap',
+            }}
+          >
+            Edit
+          </button>
+        )}
+
         {kind === 'text' && !tooBig && text !== null && (
           editing ? (
             <>