deskview

frontend/src/DesktopWorkspace.css

@@ -1,12 +1,12 @@
 /* Desktop workspace styles */
-.skeuo-main {
+.desk-main {
   flex: 1;
   display: flex;
   flex-direction: column;
   min-height: 0;
 }
 
-.skeuo-item {
+.desk-item {
   position: absolute;
   display: block;
   width: auto;
@@ -18,7 +18,7 @@
   will-change: transform;
 }
 
-.skeuo-shell {
+.desk-shell {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -27,14 +27,14 @@
   position: relative;
 }
 
-.skeuo-canvas {
+.desk-canvas {
   flex: 1;
   position: relative;
   overflow: hidden;
   margin: 0;
 }
 
-.skeuo-empty {
+.desk-empty {
   height: 100%;
   display: flex;
   align-items: center;
@@ -47,32 +47,32 @@
 
 
 
-.skeuo-item__body {
+.desk-item__body {
   flex-grow: 1;
   width: 100%;
   height: 100%;
 }
 
-.skeuo-item:focus-visible {
+.desk-item:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 4px;
 }
 
-.skeuo-item.is-dragging {
+.desk-item.is-dragging {
   cursor: grabbing;
   transition: none;
 }
 
-.skeuo-item.is-tag-target .skeuo-item__card {
+.desk-item.is-tag-target .desk-item__card {
   outline: 0.35rem dashed var(--accent);
   outline-offset: 0.35rem;
 }
 
-.skeuo-item.is-tag-pending .skeuo-item__card {
+.desk-item.is-tag-pending .desk-item__card {
   opacity: 0.6;
 }
 
-.skeuo-item.is-filtered-out {
+.desk-item.is-filtered-out {
   opacity: 0.12;
   pointer-events: none;
   filter: blur(15px) grayscale(100%);
@@ -80,7 +80,7 @@
   z-index: 0 !important;
 }
 
-.skeuo-item__tags {
+.desk-item__tags {
   --tag-scale: 1;
   position: absolute;
   top: 0;
@@ -112,14 +112,14 @@
   pointer-events: none;
 }
 
-.skeuo-item__tags .tag-chip {
+.desk-item__tags .tag-chip {
   font-size: 0.85rem;
   padding: 0.18rem 0.55rem;
   gap: 0.3rem;
 }
 
 
-.skeuo-card__nav {
+.desk-card__nav {
   position: absolute;
   bottom: 1.8rem;
   left: 50%;
@@ -132,12 +132,12 @@
   transition: opacity 0.2s ease;
 }
 
-.skeuo-item__card:hover .skeuo-card__nav {
+.desk-item__card:hover .desk-card__nav {
   opacity: 1;
   pointer-events: auto;
 }
 
-.skeuo-card__nav-button {
+.desk-card__nav-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -152,39 +152,39 @@
   transition: background 0.15s ease, opacity 0.15s ease;
 }
 
-.skeuo-card__nav-button:hover:not([disabled]) {
+.desk-card__nav-button:hover:not([disabled]) {
   background: var(--preview-nav-bg-hover);
 }
 
-.skeuo-card__nav-button:disabled {
+.desk-card__nav-button:disabled {
   opacity: 0.4;
   cursor: default;
 }
 
-.skeuo-card__nav-button:focus-visible {
+.desk-card__nav-button:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
 }
 
-.skeuo-card__nav-button svg {
+.desk-card__nav-button svg {
   width: 100%;
   height: 100%;
 }
 
-.skeuo-item__tags .tag-chip--tear-pending {
+.desk-item__tags .tag-chip--tear-pending {
   opacity: 0.35;
 }
 
-body.skeuo-cursor-remove,
+body.desk-cursor-remove,
-body.skeuo-cursor-remove * {
+body.desk-cursor-remove * {
   cursor: not-allowed !important;
 }
 
-.skeuo-item__shadow {
+.desk-item__shadow {
   display: none;
 }
 
-.skeuo-item__card {
+.desk-item__card {
   position: relative;
   border-radius: 0;
   display: flex;
@@ -196,14 +196,14 @@ body.skeuo-cursor-remove * {
   overflow: hidden;
 }
 
-.skeuo-item__card img {
+.desk-item__card img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   display: block;
 }
 
-.skeuo-item__card--empty {
+.desk-item__card--empty {
   box-shadow: 0 12px 32px var(--shadow-medium);
   background:
     radial-gradient(circle at 42% 38%, color-mix(in oklch, var(--surface-subtle) 75%, var(--selection) 25%), color-mix(in oklch, var(--surface-subtle) 85%, var(--selection) 15%) 70%),
@@ -217,14 +217,14 @@ body.skeuo-cursor-remove * {
   gap: 0.5rem;
 }
 
-.skeuo-item__placeholder {
+.desk-item__placeholder {
   font-size: 0.95rem;
   font-weight: 500;
   letter-spacing: normal;
   color: var(--muted);
 }
 
-.skeuo-item__empty {
+.desk-item__empty {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -236,7 +236,7 @@ body.skeuo-cursor-remove * {
   text-align: center;
 }
 
-.skeuo-item__title {
+.desk-item__title {
   font-size: 0.95rem;
   font-weight: 500;
   color: var(--fg);

frontend/src/DesktopWorkspace.jsx

@@ -8,7 +8,8 @@ import React, {
 } from 'react';
 import { resolveDocumentAssetUrl, createAssetView } from './asset_manager';
 import { useAssetNavigator } from './hooks/useAssetNavigator';
-import { ArrowLeftIcon, ArrowRightIcon, RefreshIcon } from './ui/icons';
+import { ArrowLeftIcon, ArrowRightIcon } from './ui/icons';
+import { createDocumentsTableHeaderActions } from './documents/DocumentsTable';
 import { clamp, formatTransform } from './desktop/math';
 import { preventAll } from './desktop/events';
 import useDocumentDrag from './desktop/useDocumentDrag';
@@ -122,7 +123,7 @@ const readTransferData = (dataTransfer, mimeTypes) => {
       }
     } catch (error) {
       if (DEBUG_DROP) {
-        console.warn('[skeuo] readTransferData failed for type', type, error);
+        console.warn('[desk] readTransferData failed for type', type, error);
       }
     }
   }
@@ -140,7 +141,7 @@ const parseTagTransferPayload = (event) => {
   try {
     return JSON.parse(raw);
   } catch (error) {
-    console.warn('[skeuo] parseTagTransferPayload failed', error);
+    console.warn('[desk] parseTagTransferPayload failed', error);
   }
   return null;
 };
@@ -207,8 +208,8 @@ const DesktopPreviewCard = ({
     onNavigatorSnapshot,
   ]);
   const hasPreview = Boolean(currentUrl);
-  const cardClasses = ['skeuo-item__card'];
+  const cardClasses = ['desk-item__card'];
-  if (!hasPreview) cardClasses.push('skeuo-item__card--empty');
+  if (!hasPreview) cardClasses.push('desk-item__card--empty');
   const showNav = hasPreview && (cardinality > 1 || canGoPrev || canGoNext);
 
   return (
@@ -216,18 +217,18 @@ const DesktopPreviewCard = ({
       {hasPreview ? (
         <img src={currentUrl} alt={title} />
       ) : (
-        <div className="skeuo-item__empty">
+        <div className="desk-item__empty">
-          <div className="skeuo-item__placeholder">DOC</div>
+          <div className="desk-item__placeholder">DOC</div>
-          <div className="skeuo-item__title" title={title}>
+          <div className="desk-item__title" title={title}>
             {title}
           </div>
         </div>
       )}
       {showNav ? (
-        <div className="skeuo-card__nav">
+        <div className="desk-card__nav">
           <button
             type="button"
-            className="skeuo-card__nav-button"
+            className="desk-card__nav-button"
             onClick={(event) => {
               preventAll(event);
               navigator.goPrev();
@@ -251,7 +252,7 @@ const DesktopPreviewCard = ({
           </button>
           <button
             type="button"
-            className="skeuo-card__nav-button"
+            className="desk-card__nav-button"
             onClick={(event) => {
               preventAll(event);
               navigator.goNext();
@@ -463,7 +464,7 @@ const usePreviewMetadata = (documents, getDocumentAsset, ensureAssetUrl) => {
             metadata = view.getPrimaryMetadata();
           }
         } catch (error) {
-          console.warn('[skeuo] ensureDocumentSize metadata fetch failed', error);
+          console.warn('[desk] ensureDocumentSize metadata fetch failed', error);
         }
       }
 
@@ -750,15 +751,15 @@ const DesktopWorkspace = ({
     const focusTarget = () => {
       try {
         if (DEBUG_FOCUS) {
-          console.log('[skeuo] focusCanvas -> attempting focus', canvas);
+          console.log('[desk] focusCanvas -> attempting focus', canvas);
         }
         canvas.focus({ preventScroll: true });
         if (DEBUG_FOCUS) {
-          console.log('[skeuo] focusCanvas: applied focus. activeElement:', document?.activeElement);
+          console.log('[desk] focusCanvas: applied focus. activeElement:', document?.activeElement);
         }
       } catch (error) {
         if (DEBUG_FOCUS) {
-          console.warn('[skeuo] focusTarget failed to focus canvas', error);
+          console.warn('[desk] focusTarget failed to focus canvas', error);
         }
       }
     };
@@ -769,20 +770,20 @@ const DesktopWorkspace = ({
     }
 
     if (DEBUG_FOCUS) {
-      console.log('[skeuo] requestCanvasFocus -> scheduling deferred focus');
+      console.log('[desk] requestCanvasFocus -> scheduling deferred focus');
     }
 
     if (typeof window.requestAnimationFrame === 'function') {
       window.requestAnimationFrame(() => {
         if (DEBUG_FOCUS) {
-          console.log('[skeuo] requestCanvasFocus -> executing deferred focus (rAF)');
+          console.log('[desk] requestCanvasFocus -> executing deferred focus (rAF)');
         }
         focusTarget();
       });
     } else {
       setTimeout(() => {
         if (DEBUG_FOCUS) {
-          console.log('[skeuo] requestCanvasFocus -> executing deferred focus (timeout)');
+          console.log('[desk] requestCanvasFocus -> executing deferred focus (timeout)');
         }
         focusTarget();
       }, 0);
@@ -802,9 +803,9 @@ const DesktopWorkspace = ({
     }
     removalCursorActiveRef.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');
     }
   }, []);
 
@@ -1080,7 +1081,7 @@ const syncLayoutSnapshot = useCallback(() => {
 
     const nodeEnv = typeof globalThis !== 'undefined' ? globalThis.process?.env?.NODE_ENV : undefined;
     if (nodeEnv !== 'production') {
-      console.log('[skeuo] canvas element', container);
+      console.log('[desk] canvas element', container);
     }
 
     const commitSize = () => {
@@ -1238,7 +1239,7 @@ const syncLayoutSnapshot = useCallback(() => {
         return;
       }
       const container = itemRefs.current.get(docId);
-      const imageNode = container?.querySelector?.('.skeuo-item__card img');
+      const imageNode = container?.querySelector?.('.desk-item__card img');
       if (!container || !imageNode) {
         return;
       }
@@ -1353,24 +1354,24 @@ const syncLayoutSnapshot = useCallback(() => {
     async (event, doc) => {
       if (!doc || !isTagTransfer(event) || typeof onAssignTagToDocument !== 'function') {
         if (DEBUG_DROP) {
-          console.log('[skeuo] handleTagDropOnDoc: drop ignored', { doc, hasTransfer: isTagTransfer(event) });
+          console.log('[desk] handleTagDropOnDoc: drop ignored', { doc, hasTransfer: isTagTransfer(event) });
         }
         return;
       }
       preventAll(event);
       if (DEBUG_DROP) {
-        console.log('[skeuo] handleTagDropOnDoc: drop accepted for doc', doc.id, 'event', event);
+        console.log('[desk] handleTagDropOnDoc: drop accepted for doc', doc.id, 'event', event);
       }
       setTagDropTargetId(null);
 
       const payload = parseTagTransferPayload(event);
       if (!payload && DEBUG_DROP) {
-        console.warn('[skeuo] handleTagDropOnDoc: failed to parse payload');
+        console.warn('[desk] handleTagDropOnDoc: failed to parse payload');
       }
 
       if (!payload?.id) {
         if (DEBUG_DROP) {
-          console.log('[skeuo] handleTagDropOnDoc: missing tag id payload', payload);
+          console.log('[desk] handleTagDropOnDoc: missing tag id payload', payload);
         }
         requestCanvasFocus();
         return;
@@ -1379,13 +1380,13 @@ const syncLayoutSnapshot = useCallback(() => {
       const tagId = payload.id;
       const sourceDocId = payload.sourceDocId || null;
       if (DEBUG_DROP) {
-        console.log('[skeuo] handleTagDropOnDoc: parsed payload', { tagId, sourceDocId });
+        console.log('[desk] handleTagDropOnDoc: parsed payload', { tagId, sourceDocId });
       }
 
       if (sourceDocId && sourceDocId === doc.id) {
         markActiveTagDropHandled(tagId, sourceDocId);
         if (DEBUG_DROP) {
-          console.log('[skeuo] handleTagDropOnDoc: drop from same doc ignored', tagId);
+          console.log('[desk] handleTagDropOnDoc: drop from same doc ignored', tagId);
         }
         requestCanvasFocus();
         return;
@@ -1397,7 +1398,7 @@ const syncLayoutSnapshot = useCallback(() => {
       if (alreadyAssigned) {
         markActiveTagDropHandled(tagId, sourceDocId);
         if (DEBUG_DROP) {
-          console.log('[skeuo] handleTagDropOnDoc: tag already assigned', tagId);
+          console.log('[desk] handleTagDropOnDoc: tag already assigned', tagId);
         }
         requestCanvasFocus();
         return;
@@ -1405,7 +1406,7 @@ const syncLayoutSnapshot = useCallback(() => {
 
       const movingBetweenDocuments = Boolean(sourceDocId && sourceDocId !== doc.id);
       if (DEBUG_DROP) {
-        console.log('[skeuo] handleTagDropOnDoc: movingBetweenDocuments', movingBetweenDocuments);
+        console.log('[desk] handleTagDropOnDoc: movingBetweenDocuments', movingBetweenDocuments);
       }
 
       setPendingTagDocId(doc.id);
@@ -1413,14 +1414,14 @@ const syncLayoutSnapshot = useCallback(() => {
         await onAssignTagToDocument({ documentId: doc.id, tagId, tag: payload });
         markActiveTagDropHandled(tagId, sourceDocId);
         if (DEBUG_DROP) {
-          console.log('[skeuo] handleTagDropOnDoc: assigned tag', tagId, 'to doc', doc.id);
+          console.log('[desk] handleTagDropOnDoc: assigned tag', tagId, 'to doc', doc.id);
         }
         if (movingBetweenDocuments && typeof onRemoveTagFromDocument === 'function') {
           setPendingRemovalTag({ docId: sourceDocId, tagId });
           try {
             await onRemoveTagFromDocument(sourceDocId, tagId);
             if (DEBUG_DROP) {
-              console.log('[skeuo] handleTagDropOnDoc: removed tag from source doc', sourceDocId);
+              console.log('[desk] handleTagDropOnDoc: removed tag from source doc', sourceDocId);
             }
           } finally {
             setPendingRemovalTag(null);
@@ -1429,7 +1430,7 @@ const syncLayoutSnapshot = useCallback(() => {
       } finally {
         setPendingTagDocId(null);
         if (DEBUG_DROP) {
-          console.log('[skeuo] handleTagDropOnDoc: finalizing drop for tag', tagId);
+          console.log('[desk] handleTagDropOnDoc: finalizing drop for tag', tagId);
         }
         requestCanvasFocus();
       }
@@ -1551,7 +1552,7 @@ const syncLayoutSnapshot = useCallback(() => {
           event.dataTransfer.effectAllowed = 'copyMove';
         }
       } catch (error) {
-        console.warn('[skeuo] Failed to set drag effect', error);
+        console.warn('[desk] Failed to set drag effect', error);
       }
 
       const payload = JSON.stringify({ id: tag.id, label: tag.label, sourceDocId: doc.id });
@@ -1560,7 +1561,7 @@ const syncLayoutSnapshot = useCallback(() => {
         event.dataTransfer?.setData('text/papercrate-tag', payload);
         event.dataTransfer?.setData('text/plain', tag.label || 'Tag');
       } catch (error) {
-        console.warn('[skeuo] Failed to populate drag data for tag', error);
+        console.warn('[desk] Failed to populate drag data for tag', error);
       }
 
       const pending = pendingDocTagDragRef.current;
@@ -1591,7 +1592,7 @@ const syncLayoutSnapshot = useCallback(() => {
           try {
             event.dataTransfer.setDragImage(preview.clone, preview.offsetX, preview.offsetY);
           } catch (error) {
-            console.warn('[skeuo] Failed to set drag image', error);
+            console.warn('[desk] Failed to set drag image', error);
           }
         }
       }
@@ -1678,7 +1679,7 @@ const syncLayoutSnapshot = useCallback(() => {
       };
 
       const dropEffect = event?.dataTransfer?.dropEffect || 'none';
-      console.log('[skeuo] dragEnd dropEffect', dropEffect, 'dropHandled', state.dropHandled);
+      console.log('[desk] dragEnd dropEffect', dropEffect, 'dropHandled', state.dropHandled);
       const shouldRemove =
         !state.dropHandled &&
         dropEffect === 'none' &&
@@ -1687,7 +1688,7 @@ const syncLayoutSnapshot = useCallback(() => {
         (state.distance || 0) >= TAG_REMOVE_DISTANCE;
 
       if (!shouldRemove) {
-        console.log('[skeuo] dragEnd -> no removal. distance:', state.distance);
+        console.log('[desk] dragEnd -> no removal. distance:', state.distance);
         scheduleShowNode();
         requestCanvasFocus();
         updateRemovalCursor(false);
@@ -1700,7 +1701,7 @@ const syncLayoutSnapshot = useCallback(() => {
       void (async () => {
         try {
           await onRemoveTagFromDocument(state.sourceDocId, state.tagId);
-          console.log('[skeuo] dragEnd -> removed tag due to fling');
+          console.log('[desk] dragEnd -> removed tag due to fling');
         } catch (error) {
           console.error('Failed to remove tag after drag', error);
           scheduleShowNode();
@@ -1854,20 +1855,20 @@ const DesktopWorkspaceView = () => {
 
   return (
     <>
-      <div className="skeuo-shell">
+      <div className="desk-shell">
         <div
-          className="skeuo-canvas"
+          className="desk-canvas"
           ref={containerRef}
           onDragOver={handleCanvasDragOver}
           onDragLeave={handleCanvasDragLeave}
           onDrop={handleCanvasDrop}
         >
           {!allSizesReady ? (
-            <div className="skeuo-empty">
+            <div className="desk-empty">
               <p>Loading previews…</p>
             </div>
           ) : items.length === 0 ? (
-            <div className="skeuo-empty">
+            <div className="desk-empty">
               <p>No documents to show here yet. Drop files to make this space come alive.</p>
             </div>
           ) : (
@@ -1914,7 +1915,7 @@ const DesktopWorkspaceView = () => {
                 activeTagSet.size === 0 || docTagKeys.some((key) => activeTagSet.has(key));
               const dropActive = tagDropTargetId === doc.id;
               const dropPending = pendingTagDocId === doc.id;
-              const itemClasses = ['skeuo-item'];
+              const itemClasses = ['desk-item'];
               if (dragging) itemClasses.push('is-dragging');
               if (dropActive) itemClasses.push('is-tag-target');
               if (dropPending) itemClasses.push('is-tag-pending');
@@ -1951,7 +1952,7 @@ const DesktopWorkspaceView = () => {
                     }
                   }}
                 >
-                  <div className="skeuo-item__body">
+                  <div className="desk-item__body">
                     <DesktopPreviewCard
                       doc={doc}
                       title={title}
@@ -1961,7 +1962,7 @@ const DesktopWorkspaceView = () => {
                       shouldLoad={shouldLoad}
                     />
                     {tags.length > 0 && (
-                      <div className="skeuo-item__tags" aria-hidden="true">
+                      <div className="desk-item__tags" aria-hidden="true">
                         {tags.map((tag) => {
                           const key = tag.id || tag.label || String(tag);
                           if (
@@ -2021,7 +2022,13 @@ export const createDesktopSurface = ({ workspaceProps, renderSidebarToggle }) =>
     return null;
   }
 
-  const { currentFolderName, searchResults, onRefresh, onExit } = workspaceProps;
+  const {
+    currentFolderName,
+    searchResults,
+    onRefresh,
+    viewMode,
+    onViewModeChange,
+  } = workspaceProps;
   const title = Array.isArray(searchResults) ? 'Search results' : currentFolderName;
   const subtitle = Array.isArray(searchResults)
     ? `${searchResults.length} matching document${searchResults.length === 1 ? '' : 's'}`
@@ -2030,22 +2037,11 @@ export const createDesktopSurface = ({ workspaceProps, renderSidebarToggle }) =>
   const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;
   const leading = sidebarToggle ? <>{sidebarToggle}</> : null;
 
-  const actions = (
+  const actions = createDocumentsTableHeaderActions({
-    <>
+    viewMode: viewMode || 'desk',
-      <button
+    onViewModeChange,
-        type="button"
+    onRefresh,
-        className="icon-button"
+  });
-        onClick={onRefresh}
-        aria-label="Refresh"
-        title="Refresh"
-      >
-        <RefreshIcon />
-      </button>
-      <button type="button" className="secondary" onClick={onExit}>
-        Back to List
-      </button>
-    </>
-  );
 
   return {
     key: 'workspace',

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,
+      documentsViewMode,
-      showSkeuoWorkspace,
+      deskWorkspaceProps,
-      exitSkeuoWorkspace,
-      skeuoWorkspaceProps,
       ensurePreviewData,
       ensureAssetUrl,
       resolveApiPath,
@@ -5109,10 +5120,8 @@ const AppLayout = () => {
       handleThumbnailRegeneration,
       documentsTableProps,
       detailPanelProps,
-      workspaceMode,
+      documentsViewMode,
-      showSkeuoWorkspace,
+      deskWorkspaceProps,
-      exitSkeuoWorkspace,
-      skeuoWorkspaceProps,
       ensurePreviewData,
       ensureAssetUrl,
       getDocumentAsset,

frontend/src/app/DocumentsRoute.jsx

@@ -11,8 +11,8 @@ const DocumentsRoute = () => {
     documentsTableProps,
     detailPanelProps,
     detailPanelOpen,
-    workspaceMode,
+    documentsViewMode,
-    skeuoWorkspaceProps,
+    deskWorkspaceProps,
     openTagsModal,
     openCorrespondentsModal,
     previewWorkspaceDocument,
@@ -65,8 +65,8 @@ const DocumentsRoute = () => {
     documentsTableProps,
     detailPanelProps,
     detailPanelOpen,
-    workspaceMode,
+    viewMode: documentsViewMode,
-    skeuoWorkspaceProps,
+    deskWorkspaceProps,
     previewWorkspaceDocument,
     previewWorkspaceEntry,
     ensureAssetUrl,

frontend/src/app/useWorkspaceSurface.js

@@ -10,8 +10,8 @@ export const useWorkspaceSurface = ({
   documentsTableProps,
   detailPanelProps,
   detailPanelOpen,
-  workspaceMode,
+  viewMode,
-  skeuoWorkspaceProps,
+  deskWorkspaceProps,
   previewWorkspaceDocument,
   previewWorkspaceEntry,
   ensureAssetUrl,
@@ -62,7 +62,7 @@ export const useWorkspaceSurface = ({
     detailPanelOpen,
   ]);
 
-  const showPreviewWorkspace = workspaceMode !== 'skeuo' && Boolean(previewWorkspaceDocument);
+  const showPreviewWorkspace = viewMode !== 'desk' && Boolean(previewWorkspaceDocument);
 
   const previewSurface = useMemo(() => {
     if (!showPreviewWorkspace || !previewWorkspaceDocument) {
@@ -95,24 +95,24 @@ export const useWorkspaceSurface = ({
   ]);
 
   const workspaceSurface = useMemo(() => {
-    if (workspaceMode !== 'skeuo') {
+    if (viewMode !== 'desk') {
       return null;
     }
     return createDesktopSurface({
-      workspaceProps: skeuoWorkspaceProps,
+      workspaceProps: deskWorkspaceProps,
       renderSidebarToggle,
     });
-  }, [workspaceMode, skeuoWorkspaceProps, renderSidebarToggle]);
+  }, [viewMode, deskWorkspaceProps, renderSidebarToggle]);
 
   const surface = useMemo(() => {
     if (showPreviewWorkspace) {
       return previewSurface;
     }
-    if (workspaceMode === 'skeuo') {
+    if (viewMode === 'desk') {
       return workspaceSurface;
     }
     return documentsSurface;
-  }, [showPreviewWorkspace, workspaceMode, previewSurface, workspaceSurface, documentsSurface]);
+  }, [showPreviewWorkspace, viewMode, previewSurface, workspaceSurface, documentsSurface]);
 
   return { surface };
 };

frontend/src/desktop/useDocumentDrag.js

@@ -37,7 +37,7 @@ const useDocumentDrag = () => {
           capturedTarget.releasePointerCapture(pointerId);
         } catch (error) {
           if (debugDrag) {
-            console.warn('[skeuo] releasePointerCapture failed', error);
+            console.warn('[desk] releasePointerCapture failed', error);
           }
         }
       }
@@ -52,7 +52,7 @@ const useDocumentDrag = () => {
     (event, docId) => {
       if (debugDrag) {
         console.log(
-          '[skeuo] handlePointerDown fired for doc',
+          '[desk] handlePointerDown fired for doc',
           docId,
           'button',
           event.button,
@@ -86,7 +86,7 @@ const useDocumentDrag = () => {
           capturedTarget.setPointerCapture(event.pointerId);
         } catch (error) {
           if (debugDrag) {
-            console.warn('[skeuo] setPointerCapture failed', error);
+            console.warn('[desk] setPointerCapture failed', error);
           }
         }
       }
@@ -125,14 +125,14 @@ const useDocumentDrag = () => {
       const state = dragStateRef.current;
       if (!state) {
         if (debugDrag) {
-          console.log('[skeuo] handlePointerMove: no drag state for pointer', event.pointerId);
+          console.log('[desk] handlePointerMove: no drag state for pointer', event.pointerId);
         }
         return;
       }
       if (state.pointerId !== event.pointerId) {
         if (debugDrag) {
           console.log(
-            '[skeuo] handlePointerMove: pointer mismatch expected',
+            '[desk] handlePointerMove: pointer mismatch expected',
             state.pointerId,
             'got',
             event.pointerId,
@@ -143,7 +143,7 @@ const useDocumentDrag = () => {
       preventAll(event);
       if (state.locked) {
         if (debugDrag) {
-          console.log('[skeuo] handlePointerMove: locked drag for doc', state.docId);
+          console.log('[desk] handlePointerMove: locked drag for doc', state.docId);
         }
         return;
       }
@@ -193,7 +193,7 @@ const useDocumentDrag = () => {
         );
       }
       if (debugDrag) {
-        console.log('[skeuo] handlePointerMove: moved doc', state.docId, 'to', clampedCenterX, clampedCenterY);
+        console.log('[desk] handlePointerMove: moved doc', state.docId, 'to', clampedCenterX, clampedCenterY);
       }
       recalcVisibleDocIds();
     },

frontend/src/documents/DocumentsTable.jsx

@@ -7,6 +7,7 @@ import {
   EditIcon,
   ViewListIcon,
   ViewGridIcon,
+  DesktopIcon,
   FolderIcon,
   TrashIcon,
   RefreshIcon,
@@ -197,7 +198,6 @@ const DocumentThumbnailImage = ({
 const DocumentsTable = ({
   currentFolderName,
   onRefresh,
-  onShowSkeuoWorkspace = () => {},
   subfolders,
   documents,
   searchResults,
@@ -272,6 +272,8 @@ const DocumentsTable = ({
     }
   }, []);
   const isGridView = viewMode === 'grid';
+  const isDeskView = viewMode === 'desk';
+  const isListView = viewMode === 'list';
   const gridIconSize = DEFAULT_GRID_ICON_SIZE;
   const handleSetViewMode = useCallback(
     (nextMode) => {
@@ -492,9 +494,9 @@ const DocumentsTable = ({
             <div className="view-toggle" role="group" aria-label="Change view">
               <button
                 type="button"
-                className={`view-toggle__button${isGridView ? '' : ' active'}`}
+                className={`view-toggle__button${isListView ? ' active' : ''}`}
                 onClick={() => handleSetViewMode('list')}
-                aria-pressed={!isGridView}
+                aria-pressed={isListView}
                 title="List view"
               >
                 <ViewListIcon className="view-toggle__icon" size={18} />
@@ -508,13 +510,19 @@ const DocumentsTable = ({
               >
                 <ViewGridIcon className="view-toggle__icon" size={18} />
               </button>
+              <button
+                type="button"
+                className={`view-toggle__button${isDeskView ? ' active' : ''}`}
+                onClick={() => handleSetViewMode('desk')}
+                aria-pressed={isDeskView}
+                title="Desk view"
+              >
+                <DesktopIcon className="view-toggle__icon" size={18} />
+              </button>
             </div>
             <button className="secondary" onClick={onRefresh}>
               Refresh
             </button>
-            <button className="secondary" type="button" onClick={onShowSkeuoWorkspace}>
-              Desk View
-            </button>
           </div>
         </div>
       ) : null}
@@ -1050,18 +1058,19 @@ export const createDocumentsTableHeaderActions = ({
   viewMode,
   onViewModeChange,
   onRefresh,
-  onShowSkeuoWorkspace,
 }) => {
+  const isListView = viewMode === 'list';
   const isGridView = viewMode === 'grid';
+  const isDeskView = viewMode === 'desk';
 
   return (
     <>
       <div className="view-toggle" role="group" aria-label="Change view">
         <button
           type="button"
-          className={`view-toggle__button${isGridView ? '' : ' active'}`}
+          className={`view-toggle__button${isListView ? ' active' : ''}`}
           onClick={() => onViewModeChange?.('list')}
-          aria-pressed={!isGridView}
+          aria-pressed={isListView}
           title="List view"
         >
           <ViewListIcon className="view-toggle__icon" size={18} />
@@ -1075,6 +1084,15 @@ export const createDocumentsTableHeaderActions = ({
         >
           <ViewGridIcon className="view-toggle__icon" size={18} />
         </button>
+        <button
+          type="button"
+          className={`view-toggle__button${isDeskView ? ' active' : ''}`}
+          onClick={() => onViewModeChange?.('desk')}
+          aria-pressed={isDeskView}
+          title="Desk view"
+        >
+          <DesktopIcon className="view-toggle__icon" size={18} />
+        </button>
       </div>
       <span className="main-content__actions-divider" aria-hidden="true">
         <MinusVerticalIcon />
@@ -1088,9 +1106,6 @@ export const createDocumentsTableHeaderActions = ({
       >
         <RefreshIcon />
       </button>
-      <button className="secondary" type="button" onClick={onShowSkeuoWorkspace}>
-        Desk View
-      </button>
     </>
   );
 };
@@ -1109,7 +1124,6 @@ export const createDocumentsSurface = ({
     viewMode,
     onViewModeChange,
     onRefresh,
-    onShowSkeuoWorkspace,
   } = tableProps;
 
   const title = Array.isArray(searchResults) ? 'Search results' : currentFolderName;
@@ -1121,7 +1135,6 @@ export const createDocumentsSurface = ({
     viewMode,
     onViewModeChange,
     onRefresh,
-    onShowSkeuoWorkspace,
   });
 
   const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;

frontend/src/styles.css

@@ -2571,11 +2571,11 @@ button.danger:hover:not([disabled]) {
 }
 
 .preview-pane--stack:hover .preview-pane__nav--overlay,
-.skeuo-item__card:hover .preview-pane__nav--overlay {
+.desk-item__card:hover .preview-pane__nav--overlay {
   opacity: 1;
 }
 
-.skeuo-card__nav {
+.desk-card__nav {
   bottom: 0.5rem;
 }