cleanup

frontend/src/desktop/createDesktopSurface.js

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

frontend/src/documents/panel/createDocumentsSurface.js

@@ -92,12 +92,17 @@ const createDocumentsSurface = ({
 
   const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;
   const detail = detailOpen && detailProps
-    ? (
+    ? (() => {
+        const { onClose, onOpenPreview, ...restDetailProps } = detailProps;
+        return (
           <DocumentViewerPanel
             variant="sidebar"
-          {...detailProps}
+            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,10 +403,7 @@ const DocumentViewerPanel = ({
       )
     : null;
 
-  if (!document) {
+  const loadingSection = (
-    return (
-      <section className="document-viewer-panel" ref={panelRef}>
-        <PanelHeader title="Document preview" />
     <div className="document-viewer-panel__body">
       <section className="document-viewer document-viewer--loading">
         <div className="document-viewer__details-pane">
@@ -370,30 +416,14 @@ const DocumentViewerPanel = ({
         </div>
       </section>
     </div>
-      </section>
-    );
-  }
-
-  const headerTitle = breadcrumbTrailEntries.length ? (
-    <BreadcrumbTrail
-      entries={breadcrumbTrailEntries}
-      separator="/"
-      className="panel-header__breadcrumbs"
-    />
-  ) : (
-    document?.title || 'Document preview'
   );
 
-  return (
+  const viewerSection = document ? (
-    <>
+    <div
-      <section className="document-viewer-panel" ref={panelRef}>
+      className={isStackedLayout
-        <PanelHeader
+        ? 'document-viewer-panel__body document-viewer-panel__body--stacked'
-          leading={headerLeadingContent}
+        : 'document-viewer-panel__body'}
-          title={headerTitle}
+    >
-          titleTag="h3"
-          actions={headerActions}
-        />
-        <div className="document-viewer-panel__body">
       <section className={viewerClassName}>
         <DocumentViewerLayout
           document={document}
@@ -405,12 +435,56 @@ const DocumentViewerPanel = ({
         />
       </section>
     </div>
-      </section>
+  ) : 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}>
+        <PanelHeader
+          leading={headerLeadingContent}
+          title={headerTitle}
+          titleTag="h3"
+          actions={headerActions}
+        />
+        {viewerSection}
+      </section>
+      {overlay}
     </>
   );
 };
@@ -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;
 }