desktop redo

frontend/src/detail/DetailPanel.jsx

@@ -13,7 +13,8 @@ import { useAssetNavigator } from '../hooks/useAssetNavigator';
 import { describeDocumentSummary } from '../documents/documentSummary';
 import { createDocumentActionState } from '../documents/documentActions';
 import PreviewZoomOverlay from './PreviewZoomOverlay';
-import DocumentSummarySection, {
+import DocumentInfoPanel from '../documents/DocumentInfoPanel';
+import {
   TagSection,
   CorrespondentSection,
   sortCorrespondents,
@@ -407,6 +408,94 @@ const DetailPanel = ({
     return sortCorrespondents(singleDoc.correspondents || []);
   }, [singleDoc]);
 
+  const singleSummaryProps = useMemo(
+    () => ({
+      tagLookupById,
+      tagOptions: tags,
+      onTagAdd: (doc, value, extras) => onTagAdd(doc, value, extras),
+      onTagRemove: (docId, tagId) => onTagRemove(docId, tagId),
+      correspondents: singleCorrespondents,
+      correspondentOptions,
+      onCorrespondentAdd,
+      onCorrespondentRemove,
+      onUpdateTitle,
+      onUpdateIssued,
+    }),
+    [
+      tagLookupById,
+      tags,
+      onTagAdd,
+      onTagRemove,
+      singleCorrespondents,
+      correspondentOptions,
+      onCorrespondentAdd,
+      onCorrespondentRemove,
+      onUpdateTitle,
+      onUpdateIssued,
+    ],
+  );
+
+  const singleHasOcr = useMemo(() => {
+    if (!singleDoc || typeof getDocumentAsset !== 'function') {
+      return false;
+    }
+    return Boolean(getDocumentAsset(singleDoc, 'ocr-text'));
+  }, [singleDoc, getDocumentAsset]);
+
+  const loadSingleOcrContent = useCallback(async ({ signal } = {}) => {
+    if (!singleDoc || !singleHasOcr || typeof getDocumentAsset !== 'function') {
+      return '';
+    }
+
+    const updateUrl = () =>
+      resolveDocumentAssetUrl(singleDoc, 'ocr-text', {
+        ensureAssetUrl,
+        getAsset: getDocumentAsset,
+      });
+
+    const asset = getDocumentAsset(singleDoc, 'ocr-text');
+    let url = updateUrl();
+
+    if (!url && singleDoc.id && asset?.id && typeof ensureAssetUrl === 'function') {
+      await ensureAssetUrl(singleDoc.id, asset, { start: 1, limit: 1 });
+      if (signal?.aborted) {
+        throw new DOMException('Aborted', 'AbortError');
+      }
+      url = updateUrl();
+    }
+
+    if (!url) {
+      return '';
+    }
+
+    const response = await fetch(url, {
+      method: 'GET',
+      mode: 'cors',
+      credentials: 'omit',
+      signal,
+    });
+
+    if (!response.ok) {
+      throw new Error(`Unexpected status: ${response.status}`);
+    }
+
+    return response.text();
+  }, [singleDoc, singleHasOcr, getDocumentAsset, ensureAssetUrl]);
+
+  const singleContentConfig = useMemo(
+    () => ({
+      enabled: singleHasOcr,
+      id: 'content',
+      label: 'Content',
+      loadContent: loadSingleOcrContent,
+      loadingMessage: 'Loading OCR content…',
+      emptyMessage: 'No OCR content available.',
+      unavailableMessage: 'No OCR content available.',
+      errorMessage: 'Failed to load OCR content.',
+    }),
+    [singleHasOcr, loadSingleOcrContent],
+  );
+
   const bulkCorrespondents = useMemo(() => {
     if (selectedDocuments.length <= 1) {
       const doc = selectedDocuments[0];
@@ -766,19 +855,17 @@ const DetailPanel = ({
             </div>
           ) : null}
         </div>
-        <DocumentSummarySection
-          document={singleDoc}
-          tagLookupById={tagLookupById}
-          tagOptions={tags}
-          onTagAdd={(doc, value, extras) => onTagAdd(doc, value, extras)}
-          onTagRemove={(docId, tagId) => onTagRemove(docId, tagId)}
-          correspondents={singleCorrespondents}
-          correspondentOptions={correspondentOptions}
-          onCorrespondentAdd={onCorrespondentAdd}
-          onCorrespondentRemove={onCorrespondentRemove}
-          onUpdateTitle={onUpdateTitle}
-          onUpdateIssued={onUpdateIssued}
-        />
+        <div className="document-viewer__details">
+          <DocumentInfoPanel
+            document={singleDoc}
+            summaryProps={singleSummaryProps}
+            contentConfig={singleContentConfig}
+            classNamePrefix="document-viewer"
+            defaultTabId="details"
+            resetKey={singleDocId}
+            hideTabNavWhenSingle={false}
+          />
+        </div>
       </>
     );
   };