deskview

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,12 +1106,9 @@ export const createDocumentsTableHeaderActions = ({
       >
         <RefreshIcon />
       </button>
-      <button className="secondary" type="button" onClick={onShowSkeuoWorkspace}>
-        Desk View
-      </button>
     </>
   );
-}; 
+};
 
 export const createDocumentsSurface = ({
   tableProps,
@@ -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;