refactor(documents): encapsulate panel logic and state into dedicated React contexts

frontend/src/documents/DocumentsView.tsx

@@ -8,6 +8,8 @@ import DocumentsGridCard from './components/DocumentsGridCard';
 import DocumentsListContainer from './components/DocumentsListContainer';
 import DocumentsGridContainer from './components/DocumentsGridContainer';
 import type { DocumentsViewProps } from './panel/DocumentsPanel';
+import { useDocumentsViewStateContext } from './context/DocumentsViewStateContext';
+import { useDocumentsCommandContext } from './context/DocumentsCommandContext';
 
 interface AbstractDocumentsViewProps<CProps extends { clearSelection: () => void; children: React.ReactNode }> extends DocumentsViewProps {
     ContainerComponent: React.ComponentType<CProps>;
@@ -22,7 +24,16 @@ const AbstractDocumentsView = <CProps extends { clearSelection: () => void; chil
     containerProps,
     ...props
 }: AbstractDocumentsViewProps<CProps>) => {
-    const { entries, onDocumentRename, onFolderRename, onFolderSelect, scrollRef, viewId } = props;
+    const { entries, viewMode } = props;
+    const {
+        viewId,
+        scrollRef
+    } = useDocumentsViewStateContext();
+    const {
+        document: { onRename: onDocumentRename },
+        folder: { onRename: onFolderRename, onSelect: onFolderSelect }
+    } = useDocumentsCommandContext();
+
     const viewLogic = useDocumentViewLogic({
         onDocumentRename,
         onFolderRename,
@@ -30,8 +41,8 @@ const AbstractDocumentsView = <CProps extends { clearSelection: () => void; chil
     const { handleKeyDown, handleFocus } = useDocumentsNavigation({
         entries,
         onFolderSelect,
-        viewMode: props.viewMode,
-        scrollRef: props.scrollRef,
+        viewMode: viewMode || props.viewMode,
+        scrollRef: scrollRef,
     });
     const { clearSelection } = viewLogic;