cleanup

frontend/src/desktop/createDesktopSurface.js

@@ -83,12 +83,17 @@ const createDesktopSurface = ({
 
   const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;
   const detail = detailOpen && detailProps
-    ? (
+    ? (() => {
-        <DocumentViewerPanel
+        const { onClose, onOpenPreview, ...restDetailProps } = detailProps;
-          variant="sidebar"
+        return (
-          {...detailProps}
+          <DocumentViewerPanel
-        />
+            variant="sidebar"
-      )
+            onCollapsePanel={onClose}
+            onMaximizePanel={onOpenPreview}
+            {...restDetailProps}
+          />
+        );
+      })()
     : null;
   const surfaceConfig = createWorkspaceSurfaceConfig({
     key: 'workspace',

frontend/src/detail/useDetailWorkspace.js

@@ -237,7 +237,7 @@ const useDetailWorkspace = ({
       onUpdateIssued: handleDocumentIssuedUpdate,
       ensureAssetUrl,
       getDocumentAsset,
-      hydrateDocument: ensurePreviewData,
+        hydrateDocument: ensurePreviewData,
       correspondents,
       onCorrespondentAdd: handleCorrespondentAdd,
       onCorrespondentRemove: handleCorrespondentRemove,

frontend/src/documents/panel/createDocumentsSurface.js

@@ -92,12 +92,17 @@ const createDocumentsSurface = ({
 
   const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;
   const detail = detailOpen && detailProps
-    ? (
+    ? (() => {
-        <DocumentViewerPanel
+        const { onClose, onOpenPreview, ...restDetailProps } = detailProps;
-          variant="sidebar"
+        return (
-          {...detailProps}
+          <DocumentViewerPanel
-        />
+            variant="sidebar"
-      )
+            onCollapsePanel={onClose}
+            onMaximizePanel={onOpenPreview}
+            {...restDetailProps}
+          />
+        );
+      })()
     : null;
 
   return createWorkspaceSurfaceConfig({

frontend/src/preview/DocumentViewerPanel.jsx

@@ -6,7 +6,13 @@ import React, {
   useState,
 } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { DownloadIcon, CloseIcon, IconZoomInArea } from '../ui/icons';
+import {
+  DownloadIcon,
+  CloseIcon,
+  IconZoomInArea,
+  DetailPanelCollapseIcon,
+  WindowMaximizeIcon,
+} from '../ui/icons';
 import PreviewZoomOverlay from '../detail/PreviewZoomOverlay';
 import {
   buildCorrespondentOptions,
@@ -79,7 +85,6 @@ const DocumentViewerPanel = ({
   onCorrespondentRemove,
   onUpdateTitle,
   onUpdateIssued,
-  hasOcr = false,
   ensureAssetUrl,
   getDocumentAsset,
   ensurePreviewData,
@@ -88,8 +93,12 @@ const DocumentViewerPanel = ({
   sidebarToggle = null,
   onClosePanel,
   resolveFolderPath,
+  variant = 'viewer',
+  onCollapsePanel,
+  onMaximizePanel,
 }) => {
   const navigate = useNavigate();
+  const isSidebarVariant = variant === 'sidebar';
   const sortedCorrespondents = useMemo(
     () => sortCorrespondents(document?.correspondents || []),
     [document],
@@ -105,6 +114,13 @@ const DocumentViewerPanel = ({
     [document],
   );
 
+  const hasOcr = useMemo(() => {
+    if (!document || typeof getDocumentAsset !== 'function') {
+      return false;
+    }
+    return Boolean(getDocumentAsset(document, 'ocr-text'));
+  }, [document, getDocumentAsset]);
+
   const summaryProps = useMemo(
     () => ({
       tagLookupById,
@@ -331,7 +347,38 @@ const DocumentViewerPanel = ({
     canZoom: Boolean(zoomDisplay),
   });
 
-  const closeButton = onClosePanel
+  const collapseButton = isSidebarVariant && typeof onCollapsePanel === 'function'
+    ? (
+        <button
+          type="button"
+          className="icon-button"
+          onClick={() => onCollapsePanel?.()}
+          aria-label="Close detail panel"
+          title="Close detail panel"
+        >
+          <DetailPanelCollapseIcon />
+        </button>
+      )
+    : null;
+
+  const maximizeButton = isSidebarVariant && typeof onMaximizePanel === 'function'
+    ? (
+        <button
+          type="button"
+          className="icon-button"
+          onClick={(event) => {
+            event.stopPropagation();
+            onMaximizePanel?.(document?.id);
+          }}
+          aria-label="Maximize"
+          title="Maximize"
+        >
+          <WindowMaximizeIcon className="icon--flip-y" />
+        </button>
+      )
+    : null;
+
+  const closeButton = !isSidebarVariant && onClosePanel
     ? (
         <button
           type="button"
@@ -345,7 +392,9 @@ const DocumentViewerPanel = ({
       )
     : null;
 
-  const headerLeadingButtons = [sidebarToggle, closeButton].filter(Boolean);
+  const headerLeadingButtons = isSidebarVariant
+    ? [collapseButton, maximizeButton].filter(Boolean)
+    : [sidebarToggle, closeButton].filter(Boolean);
   const headerLeadingContent = headerLeadingButtons.length
     ? (
         <>
@@ -354,36 +403,76 @@ const DocumentViewerPanel = ({
       )
     : null;
 
-  if (!document) {
+  const loadingSection = (
-    return (
+    <div className="document-viewer-panel__body">
-      <section className="document-viewer-panel" ref={panelRef}>
+      <section className="document-viewer document-viewer--loading">
-        <PanelHeader title="Document preview" />
+        <div className="document-viewer__details-pane">
-        <div className="document-viewer-panel__body">
+          <div className="document-viewer__details">
-          <section className="document-viewer document-viewer--loading">
+            <div className="document-viewer__message">Loading document…</div>
-            <div className="document-viewer__details-pane">
+          </div>
-              <div className="document-viewer__details">
+        </div>
-                <div className="document-viewer__message">Loading document…</div>
+        <div className="document-viewer__viewport">
-              </div>
+          <div className="document-viewer__message">Preparing preview…</div>
-            </div>
-            <div className="document-viewer__viewport">
-              <div className="document-viewer__message">Preparing preview…</div>
-            </div>
-          </section>
         </div>
       </section>
-    );
+    </div>
-  }
+  );
+
+  const viewerSection = document ? (
+    <div
+      className={isStackedLayout
+        ? 'document-viewer-panel__body document-viewer-panel__body--stacked'
+        : 'document-viewer-panel__body'}
+    >
+      <section className={viewerClassName}>
+        <DocumentViewerLayout
+          document={document}
+          previewEntry={previewEntry}
+          summaryProps={summaryProps}
+          metadataPayload={metadataPayload}
+          contentTabConfig={contentTabConfig}
+          previewLoadingMessage="Loading preview…"
+        />
+      </section>
+    </div>
+  ) : loadingSection;
 
   const headerTitle = breadcrumbTrailEntries.length ? (
     <BreadcrumbTrail
       entries={breadcrumbTrailEntries}
       separator="/"
       className="panel-header__breadcrumbs"
+      truncateFromStart={isSidebarVariant}
     />
   ) : (
     document?.title || 'Document preview'
   );
 
+  const overlay = (
+    <PreviewZoomOverlay
+      open={Boolean(zoomOverlayOpen && zoomDisplay)}
+      display={zoomDisplay}
+      onClose={handleZoomClose}
+    />
+  );
+
+  if (isSidebarVariant) {
+    return (
+      <>
+        <aside className="detail-panel panel" ref={panelRef}>
+          <PanelHeader
+            leading={headerLeadingContent}
+            title={headerTitle}
+            titleTag="h3"
+            actions={headerActions}
+          />
+          <div className="panel-body detail-panel__content">{viewerSection}</div>
+        </aside>
+        {overlay}
+      </>
+    );
+  }
+
   return (
     <>
       <section className="document-viewer-panel" ref={panelRef}>
@@ -393,24 +482,9 @@ const DocumentViewerPanel = ({
           titleTag="h3"
           actions={headerActions}
         />
-        <div className="document-viewer-panel__body">
+        {viewerSection}
-          <section className={viewerClassName}>
-            <DocumentViewerLayout
-              document={document}
-              previewEntry={previewEntry}
-              summaryProps={summaryProps}
-              metadataPayload={metadataPayload}
-              contentTabConfig={contentTabConfig}
-              previewLoadingMessage="Loading preview…"
-            />
-          </section>
-        </div>
       </section>
-      <PreviewZoomOverlay
+      {overlay}
-        open={Boolean(zoomOverlayOpen && zoomDisplay)}
-        display={zoomDisplay}
-        onClose={handleZoomClose}
-      />
     </>
   );
 };
@@ -442,10 +516,6 @@ export const createDocumentViewerSurface = ({
     return null;
   }
 
-  const hasOcr = typeof getDocumentAsset === 'function'
-    ? Boolean(getDocumentAsset(document, 'ocr-text'))
-    : false;
-
   const sidebarToggle = typeof renderSidebarToggle === 'function'
     ? renderSidebarToggle()
     : null;
@@ -468,7 +538,6 @@ export const createDocumentViewerSurface = ({
         onCorrespondentRemove={onCorrespondentRemove}
         onUpdateTitle={onUpdateTitle}
         onUpdateIssued={onUpdateIssued}
-        hasOcr={hasOcr}
         ensureAssetUrl={ensureAssetUrl}
         getDocumentAsset={getDocumentAsset}
         ensurePreviewData={ensurePreviewData}

frontend/src/styles/documents/viewer.css

@@ -347,8 +347,8 @@
   display: flex;
   position: relative;
   overflow: hidden;
-  align-items: stretch;
+  align-items: flex-start;
-  justify-content: center;
+  justify-content: flex-start;
   max-height: 100%;
   grid-area: viewport;
 }