Enhance Workbench layout and improve DragDropGrid item display; update usePageEditorState for consistency

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()}

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>

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