backend dry

frontend/src/index.jsx

@@ -735,6 +735,14 @@ const AppLayout = () => {
     [selectedRowKeys],
   );
 
+  const [detailPanelOpen, setDetailPanelOpen] = useState(() => selectedDocumentIds.length > 0);
+
+  useEffect(() => {
+    if (selectedDocumentIds.length > 0 && !detailPanelOpen) {
+      setDetailPanelOpen(true);
+    }
+  }, [selectedDocumentIds, detailPanelOpen]);
+
   const resetWorkspaceState = useCallback(() => {
     const rootNode = createRootNode();
     setFolderNodes(new Map([[rootNode.id, rootNode]]));
@@ -762,6 +770,7 @@ const AppLayout = () => {
     setActiveTagFilters([]);
     setDropOverlayState({ active: false, folderName: DEFAULT_FOLDER_NAME });
     setActivePreviewId(null);
+    setDetailPanelOpen(false);
     assetManager.reset();
     setPreviewEntries(() => new Map());
     previewInflightRef.current = new Map();
@@ -4845,6 +4854,11 @@ const AppLayout = () => {
   const lastScrolledDetailDocRef = useRef(null);
 
   useEffect(() => {
+    if (!detailPanelOpen) {
+      lastScrolledDetailDocRef.current = null;
+      return;
+    }
+
     if (!orderedSelectedDocuments.length) {
       lastScrolledDetailDocRef.current = null;
       return;
@@ -4870,6 +4884,10 @@ const AppLayout = () => {
       return;
     }
 
+    if (typeof document === 'undefined') {
+      return;
+    }
+
     const targetElement =
       document.getElementById(`document-row-${lastSelectedId}`) ||
       document.getElementById(`document-card-${lastSelectedId}`);
@@ -4882,7 +4900,7 @@ const AppLayout = () => {
     requestAnimationFrame(() => {
       targetElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
     });
-  }, [orderedSelectedDocuments, selectionOrder, documentsViewMode]);
+  }, [orderedSelectedDocuments, selectionOrder, documentsViewMode, detailPanelOpen]);
 
   const { breadcrumbs, missingBreadcrumbAncestors } = useMemo(() => {
     const chain = [];
@@ -5267,6 +5285,11 @@ const AppLayout = () => {
     [sidebarProps, openTagsModal, openCorrespondentsModal, collapseSidebar],
   );
 
+  const handleDetailPanelClose = useCallback(() => {
+    setDetailPanelOpen(false);
+    clearDocumentSelection();
+  }, [clearDocumentSelection]);
+
   const detailPanelProps = {
     selectedDocuments: orderedSelectedDocuments,
     tags,
@@ -5286,12 +5309,13 @@ const AppLayout = () => {
     onUpdateTitle: handleDocumentTitleUpdate,
     ensureAssetUrl,
     getDocumentAsset,
+    ensurePreviewData,
     correspondents,
     onCorrespondentAdd: handleCorrespondentAdd,
     onCorrespondentRemove: handleCorrespondentRemove,
     resolveApiPath,
     onFolderNavigate: selectFolder,
-    onClose: clearDocumentSelection,
+    onClose: handleDetailPanelClose,
     resolveFolderPath,
   };
 
@@ -5369,6 +5393,8 @@ const AppLayout = () => {
       openTagsModal,
       openCorrespondentsModal,
       openSettingsModal,
+      detailPanelOpen,
+      setDetailPanelOpen,
     }),
     [
       token,
@@ -5410,6 +5436,8 @@ const AppLayout = () => {
       openTagsModal,
       openCorrespondentsModal,
       openSettingsModal,
+      detailPanelOpen,
+      setDetailPanelOpen,
     ],
   );
 
@@ -5575,6 +5603,7 @@ const DocumentsRoute = () => {
     sidebarProps,
     documentsTableProps,
     detailPanelProps,
+    detailPanelOpen,
     workspaceMode,
     skeuoWorkspaceProps,
     openTagsModal,
@@ -5653,6 +5682,7 @@ const DocumentsRoute = () => {
       onNavigateParent: parentBreadcrumb ? handleNavigateParent : null,
       renderSidebarToggle,
       detailProps: detailPanelProps,
+      detailOpen: detailPanelOpen,
     });
   }, [
     documentsTableProps,
@@ -5660,6 +5690,7 @@ const DocumentsRoute = () => {
     handleNavigateParent,
     renderSidebarToggle,
     detailPanelProps,
+    detailPanelOpen,
   ]);
 
   const previewSurface = useMemo(() => {