From 1da054c8b52aa0df1fccae91cd3880664a568359 Mon Sep 17 00:00:00 2001
From: Reece <reece@stirlingpdf.com>
Date: Mon, 10 Nov 2025 18:34:18 +0000
Subject: [PATCH] Enhance Workbench layout and improve DragDropGrid item
 display; update usePageEditorState for consistency

---
 frontend/src/core/components/layout/Workbench.tsx   |  6 ++++--
 .../src/core/components/pageEditor/DragDropGrid.tsx |  8 +++++++-
 .../pageEditor/hooks/usePageEditorState.ts          | 13 +++++++------
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/frontend/src/core/components/layout/Workbench.tsx b/frontend/src/core/components/layout/Workbench.tsx
index dfb7ae32c..04f6acf70 100644
--- a/frontend/src/core/components/layout/Workbench.tsx
+++ b/frontend/src/core/components/layout/Workbench.tsx
@@ -182,10 +182,12 @@ export default function Workbench() {
 
         {/* Main content area */}
         <Box
-          className="flex-1 min-h-0 relative z-10 workbench-scrollable "
+          className="flex-1 min-h-0 relative z-10 workbench-scrollable"
           style={{
             transition: 'opacity 0.15s ease-in-out',
-            paddingTop: currentView === 'viewer' ? '0' : (activeFiles.length > 0 ? '2rem' : '0'),
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
           }}
         >
           {renderMainContent()}
diff --git a/frontend/src/core/components/pageEditor/DragDropGrid.tsx b/frontend/src/core/components/pageEditor/DragDropGrid.tsx
index 9c7c192c5..0a76e6de4 100644
--- a/frontend/src/core/components/pageEditor/DragDropGrid.tsx
+++ b/frontend/src/core/components/pageEditor/DragDropGrid.tsx
@@ -8,6 +8,7 @@ import {
   Z_INDEX_DROP_INDICATOR,
   Z_INDEX_DRAG_BADGE,
 } from '@app/styles/zIndex';
+import { LocalIcon } from '@app/components/shared/LocalIcon';
 import {
   DndContext,
   DragEndEvent,
@@ -767,9 +768,14 @@ const DragDropGrid = <T extends DragDropItem>({
                 style={{
                   width: `calc(20rem * ${zoomLevel})`,
                   height: `calc(20rem * ${zoomLevel})`,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: '2rem',
+                  color: 'var(--mantine-color-dimmed)',
                 }}
               >
-                ??
+                <LocalIcon icon="description" width="3rem" height="3rem" />
               </div>
             )}
           </div>
diff --git a/frontend/src/core/components/pageEditor/hooks/usePageEditorState.ts b/frontend/src/core/components/pageEditor/hooks/usePageEditorState.ts
index 203ff8975..2c37990d1 100644
--- a/frontend/src/core/components/pageEditor/hooks/usePageEditorState.ts
+++ b/frontend/src/core/components/pageEditor/hooks/usePageEditorState.ts
@@ -1,26 +1,27 @@
 import { useState, useCallback } from 'react';
+import React from 'react';
 
 export interface PageEditorState {
   // Selection state
   selectionMode: boolean;
   selectedPageIds: string[];
-  
-  // Animation state  
+
+  // Animation state
   movingPage: number | null;
   isAnimating: boolean;
-  
+
   // Split state
   splitPositions: Set<number>;
-  
+
   // Export state
   exportLoading: boolean;
-  
+
   // Actions
   setSelectionMode: (mode: boolean) => void;
   setSelectedPageIds: (pages: string[]) => void;
   setMovingPage: (pageNumber: number | null) => void;
   setIsAnimating: (animating: boolean) => void;
-  setSplitPositions: (positions: Set<number>) => void;
+  setSplitPositions: React.Dispatch<React.SetStateAction<Set<number>>>;
   setExportLoading: (loading: boolean) => void;
   
   // Helper functions