deskview

frontend/src/app/AppLayout.jsx

@@ -190,14 +190,14 @@ const AppLayout = () => {
   const [currentFolder, setCurrentFolder] = useState(null);
   const [currentSubfolders, setCurrentSubfolders] = useState([]);
   const [documents, setDocuments] = useState([]);
-  const [workspaceMode, setWorkspaceMode] = useState('table');
   const [documentsViewMode, setDocumentsViewMode] = useState(() => {
     if (typeof window === 'undefined') {
       return 'list';
     }
     const stored = window.localStorage.getItem('papercrate_view_mode');
-    return stored === 'grid' ? 'grid' : 'list';
+    return stored === 'grid' || stored === 'desk' ? stored : 'list';
   });
+  const lastNonDeskViewRef = useRef(documentsViewMode === 'desk' ? 'list' : documentsViewMode);
 
   const loadThemeSettings = () => {
     const defaults = { neutralHue: 260, mode: 'system' };
@@ -258,6 +258,12 @@ const AppLayout = () => {
   const initialThemeSettings = loadThemeSettings();
   const [neutralHue, setNeutralHue] = useState(initialThemeSettings.neutralHue);
   const [themeMode, setThemeMode] = useState(initialThemeSettings.mode);
+
+  useEffect(() => {
+    if (documentsViewMode !== 'desk') {
+      lastNonDeskViewRef.current = documentsViewMode;
+    }
+  }, [documentsViewMode]);
   const initialRowSelection = [];
   const [selectedRowKeys, setSelectedRowKeys] = useState(initialRowSelection);
   const [selectionOrder, setSelectionOrder] = useState(initialRowSelection);
@@ -281,9 +287,9 @@ const AppLayout = () => {
     }
     tagRemovalCursorActiveRef.current = active;
     if (active) {
-      body.classList.add('skeuo-cursor-remove');
+      body.classList.add('desk-cursor-remove');
     } else {
-      body.classList.remove('skeuo-cursor-remove');
+      body.classList.remove('desk-cursor-remove');
     }
   }, []);
   const refreshAccessToken = useCallback(async () => {
@@ -4641,11 +4647,9 @@ const AppLayout = () => {
     [ensureAssetUrl, getDocumentAsset],
   );
 
-  const showSkeuoWorkspace = useCallback(() => setWorkspaceMode('skeuo'), [setWorkspaceMode]);
-  const exitSkeuoWorkspace = useCallback(() => setWorkspaceMode('table'), [setWorkspaceMode]);
   const handleDocumentsViewModeChange = useCallback((mode) => {
+    const next = mode === 'grid' ? 'grid' : mode === 'desk' ? 'desk' : 'list';
     setDocumentsViewMode((previous) => {
-      const next = mode === 'grid' ? 'grid' : 'list';
       if (next !== previous && typeof window !== 'undefined') {
         window.localStorage.setItem('papercrate_view_mode', next);
       }
@@ -4653,6 +4657,13 @@ const AppLayout = () => {
     });
   }, []);
 
+  const handleDeskExit = useCallback(() => {
+    const fallback = lastNonDeskViewRef.current && lastNonDeskViewRef.current !== 'desk'
+      ? lastNonDeskViewRef.current
+      : 'list';
+    handleDocumentsViewModeChange(fallback);
+  }, [handleDocumentsViewModeChange]);
+
   const handleTenantSelect = useCallback(
     async (tenantOption, { refreshOnly = false } = {}) => {
       const requestedTenantId = tenantOption?.id ?? null;
@@ -4697,7 +4708,7 @@ const AppLayout = () => {
           appDispatch({ type: 'SET_TENANTS', tenants: data.tenants });
         }
 
-        setWorkspaceMode('table');
+        handleDocumentsViewModeChange('list');
         navigate('/documents', { replace: true });
 
         await Promise.all([refreshTags(), refreshCorrespondents()]);
@@ -4717,7 +4728,7 @@ const AppLayout = () => {
       notifyApiError,
       setStatusMessage,
       resetWorkspaceState,
-      setWorkspaceMode,
+      handleDocumentsViewModeChange,
       navigate,
       refreshTags,
       refreshCorrespondents,
@@ -4730,7 +4741,6 @@ const AppLayout = () => {
       currentFolderName,
       breadcrumbs,
       onRefresh: refreshCurrentFolder,
-      onShowSkeuoWorkspace: showSkeuoWorkspace,
       subfolders: currentSubfolders,
       documents,
       searchResults,
@@ -4811,7 +4821,6 @@ const AppLayout = () => {
       selectedDocumentIds,
       selectedFolderIds,
       setFocusedRowKey,
-      showSkeuoWorkspace,
       tagLookupById,
       toggleCorrespondentFilter,
       toggleTagFilter,
@@ -4970,13 +4979,15 @@ const AppLayout = () => {
     ],
   );
 
-  const skeuoWorkspaceProps = useMemo(
+  const deskWorkspaceProps = useMemo(
     () => ({
       documents,
       searchResults,
       breadcrumbs,
       currentFolderName,
-      onExit: exitSkeuoWorkspace,
+      viewMode: documentsViewMode,
+      onViewModeChange: handleDocumentsViewModeChange,
+      onExit: handleDeskExit,
       onRefresh: refreshCurrentFolder,
       onDocumentOpen: openDocumentPreview,
       resolveThumbnailUrl: resolveThumbnailUrlForDoc,
@@ -4991,7 +5002,9 @@ const AppLayout = () => {
       searchResults,
       breadcrumbs,
       currentFolderName,
-      exitSkeuoWorkspace,
+      documentsViewMode,
+      handleDocumentsViewModeChange,
+      handleDeskExit,
       refreshCurrentFolder,
       openDocumentPreview,
       resolveThumbnailUrlForDoc,
@@ -5049,10 +5062,8 @@ const AppLayout = () => {
       handleThumbnailRegeneration,
       documentsTableProps,
       detailPanelProps,
-      workspaceMode,
-      showSkeuoWorkspace,
-      exitSkeuoWorkspace,
-      skeuoWorkspaceProps,
+      documentsViewMode,
+      deskWorkspaceProps,
       ensurePreviewData,
       ensureAssetUrl,
       resolveApiPath,
@@ -5109,10 +5120,8 @@ const AppLayout = () => {
       handleThumbnailRegeneration,
       documentsTableProps,
       detailPanelProps,
-      workspaceMode,
-      showSkeuoWorkspace,
-      exitSkeuoWorkspace,
-      skeuoWorkspaceProps,
+      documentsViewMode,
+      deskWorkspaceProps,
       ensurePreviewData,
       ensureAssetUrl,
       getDocumentAsset,