backend dry

frontend/src/detail/DetailPanel.jsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 import {
   DownloadIcon,
   EditIcon,
@@ -15,6 +14,7 @@ import { formatFileSize } from '../utils/format';
 import { resolveDocumentAssetUrl, createAssetView } from '../asset_manager';
 import { useAssetNavigator } from '../hooks/useAssetNavigator';
 import PreviewZoomOverlay from './PreviewZoomOverlay';
+import { openOcrTextInNewTab } from '../utils/ocr';
 
 const MAX_PREVIEW_STACK_ITEMS = 15;
 
@@ -300,6 +300,7 @@ const DetailPanel = ({
   onUpdateTitle = async () => false,
   ensureAssetUrl = null,
   getDocumentAsset = () => null,
+  ensurePreviewData = () => Promise.resolve(),
   correspondents = [],
   onCorrespondentAdd,
   onCorrespondentRemove,
@@ -329,10 +330,6 @@ const DetailPanel = ({
   const [titleDraft, setTitleDraft] = useState('');
   const [titleSaving, setTitleSaving] = useState(false);
   const [titleError, setTitleError] = useState(null);
-  const [ocrOpen, setOcrOpen] = useState(false);
-  const [ocrUrl, setOcrUrl] = useState(null);
-  const [ocrLoading, setOcrLoading] = useState(false);
-  const [ocrError, setOcrError] = useState(null);
   const [zoomedPreview, setZoomedPreview] = useState(null);
 
   useEffect(() => {
@@ -341,10 +338,6 @@ const DetailPanel = ({
       setTitleDraft('');
       setTitleError(null);
       setTitleSaving(false);
-      setOcrOpen(false);
-      setOcrLoading(false);
-      setOcrError(null);
-      setOcrUrl(null);
       return;
     }
 
@@ -356,13 +349,6 @@ const DetailPanel = ({
     }
   }, [singleDoc, titleEditDocId]);
 
-  useEffect(() => {
-    setOcrOpen(false);
-    setOcrLoading(false);
-    setOcrError(null);
-    setOcrUrl(null);
-  }, [singleDoc?.id]);
-
   useEffect(() => {
     setZoomedPreview(null);
   }, [selectionKey]);
@@ -420,59 +406,21 @@ const DetailPanel = ({
     [singleDoc, getDocumentAsset],
   );
 
-  const loadOcrUrl = useCallback(async () => {
+  const openOcr = useCallback(async () => {
     if (!singleDoc) {
       return;
     }
-    const asset = getDocumentAsset(singleDoc, 'ocr-text');
-    if (!asset) {
-      setOcrError('No OCR text available for this document.');
-      setOcrUrl(null);
-      return;
-    }
-    setOcrLoading(true);
-    setOcrError(null);
     try {
-      let entry = asset;
-      let url = entry?.url ||
-        resolveDocumentAssetUrl(singleDoc, 'ocr-text', {
-          ensureAssetUrl,
-          getAsset: getDocumentAsset,
-        });
-      if (!url && typeof ensureAssetUrl === 'function') {
-        const ensured = await ensureAssetUrl(singleDoc.id, asset, { force: false });
-        if (ensured) {
-          entry = ensured;
-        }
-        url = entry?.url ||
-          resolveDocumentAssetUrl(singleDoc, 'ocr-text', {
-            ensureAssetUrl,
-            getAsset: getDocumentAsset,
-          });
-      }
-      if (!url) {
-        throw new Error('OCR text URL is unavailable.');
-      }
-      setOcrUrl(url);
+      await openOcrTextInNewTab({
+        document: singleDoc,
+        ensurePreviewData,
+        getDocumentAsset,
+        ensureAssetUrl,
+      });
     } catch (error) {
-      setOcrError(error.message || 'Failed to load OCR text.');
-      setOcrUrl(null);
-    } finally {
-      setOcrLoading(false);
+      /* noop */
     }
-  }, [singleDoc, ensureAssetUrl, getDocumentAsset]);
-
-  const openOcrModal = useCallback(() => {
-    if (!singleDoc) {
-      return;
-    }
-    setOcrOpen(true);
-    loadOcrUrl();
-  }, [singleDoc, loadOcrUrl]);
-
-  const closeOcrModal = useCallback(() => {
-    setOcrOpen(false);
-  }, []);
+  }, [singleDoc, ensurePreviewData, getDocumentAsset, ensureAssetUrl]);
 
   const singlePreviewNavigator = useAssetNavigator({
     document: singleDoc,
@@ -1138,47 +1086,6 @@ const DetailPanel = ({
             <pre className="detail-metadata__block">{JSON.stringify(metadata, null, 2)}</pre>
           </div>
         )}
-        {hasOcrAsset && ocrOpen
-          ? createPortal(
-              <div className="modal-backdrop" role="presentation" onClick={closeOcrModal}>
-                <div
-                  className="modal modal--ocr"
-                  role="dialog"
-                  aria-modal="true"
-                  aria-label="OCR text"
-                  onClick={(event) => event.stopPropagation()}
-                >
-                  <div className="modal__header">
-                    <h3>OCR Text</h3>
-                    <button
-                      type="button"
-                      className="icon-button ghost"
-                      onClick={closeOcrModal}
-                      aria-label="Close OCR text"
-                    >
-                      ×
-                    </button>
-                  </div>
-                  <div className="modal__body detail-ocr__content">
-                    {ocrLoading ? (
-                      <div className="meta">Loading OCR text…</div>
-                    ) : ocrError ? (
-                      <div className="status-inline error">{ocrError}</div>
-                    ) : ocrUrl ? (
-                      <iframe
-                        title="OCR text"
-                        src={ocrUrl}
-                        className="detail-ocr__frame"
-                      />
-                    ) : (
-                      <div className="meta">OCR text empty.</div>
-                    )}
-                  </div>
-                </div>
-              </div>,
-              document.body,
-            )
-          : null}
       </>
     );
   };
@@ -1349,7 +1256,7 @@ const DetailPanel = ({
               className="icon-button ghost"
               onClick={(event) => {
                 event.stopPropagation();
-                openOcrModal();
+                openOcr();
               }}
               aria-label="View OCR text"
               title="View OCR text"