document viewer

frontend/src/preview/DocumentViewerLayout.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import DocumentInfoPanel from '../documents/DocumentInfoPanel';
 import { DownloadIcon } from '../ui/icons';
 
@@ -13,7 +13,10 @@ const DocumentViewerLayout = ({
   defaultTabId = 'details',
   infoPanelProps = {},
   previewLoadingMessage = 'Preparing preview…',
+  layoutMode = 'split',
 }) => {
+  const isStacked = layoutMode === 'stacked';
+
   const previewContent = useMemo(() => {
     if (!document || !previewEntry?.url) {
       return null;
@@ -74,30 +77,65 @@ const DocumentViewerLayout = ({
     );
   }, [previewEntry, document]);
 
+  const renderViewportPane = useCallback(() => (
+    <div className="document-viewer__viewport">
+      {!previewEntry?.url ? (
+        <div className="document-viewer__message">{previewLoadingMessage}</div>
+      ) : (
+        previewContent
+      )}
+    </div>
+  ), [previewEntry?.url, previewLoadingMessage, previewContent]);
+
+  const viewportPane = renderViewportPane();
+
+  const stackedLeadingTabs = useMemo(() => (
+    isStacked
+      ? [
+          {
+            id: 'preview',
+            label: 'Preview',
+            render: () => renderViewportPane(),
+          },
+        ]
+      : []
+  ), [isStacked, renderViewportPane]);
+
+  const resolvedDefaultTabId = isStacked ? 'preview' : defaultTabId;
+  const summaryPlacement = 'tabs';
+  const tabsPlacement = isStacked ? 'bottom' : 'top';
+  const summaryLayout = 'compact';
+
+  const detailsPane = (
+    <div className="document-viewer__details-pane">
+      <div className="document-viewer__details">
+        <DocumentInfoPanel
+          document={document}
+          summaryProps={summaryProps}
+          metadataPayload={metadataPayload}
+          contentConfig={contentTabConfig}
+          defaultTabId={resolvedDefaultTabId}
+          classNamePrefix={classNamePrefix}
+          hideTabNavWhenSingle={false}
+          resetKey={resetKey || document?.id}
+          summaryPlacement={summaryPlacement}
+          summaryLayout={summaryLayout}
+          leadingTabs={stackedLeadingTabs}
+          tabsPlacement={tabsPlacement}
+          {...infoPanelProps}
+        />
+      </div>
+    </div>
+  );
+
+  if (isStacked) {
+    return detailsPane;
+  }
+
   return (
     <>
-      <div className="document-viewer__details-pane">
-        <div className="document-viewer__details">
-          <DocumentInfoPanel
-            document={document}
-            summaryProps={summaryProps}
-            metadataPayload={metadataPayload}
-            contentConfig={contentTabConfig}
-            defaultTabId={defaultTabId}
-            classNamePrefix={classNamePrefix}
-            hideTabNavWhenSingle={false}
-            resetKey={resetKey || document?.id}
-            {...infoPanelProps}
-          />
-        </div>
-      </div>
-      <div className="document-viewer__viewport">
-        {!previewEntry?.url ? (
-          <div className="document-viewer__message">{previewLoadingMessage}</div>
-        ) : (
-          previewContent
-        )}
-      </div>
+      {detailsPane}
+      {viewportPane}
     </>
   );
 };

frontend/src/preview/DocumentViewerPanel.jsx

@@ -432,6 +432,7 @@ const DocumentViewerPanel = ({
           metadataPayload={metadataPayload}
           contentTabConfig={contentTabConfig}
           previewLoadingMessage="Loading preview…"
+          layoutMode={isStackedLayout ? 'stacked' : 'split'}
         />
       </section>
     </div>