Feature/v2/pageeditor improved (#4289)

# Description of Changes

<!--
Please provide a summary of the changes, including:

Rewrite of page editor to make it work properly.  
Added page breaks
Added merged file support
Added "insert file" support
Slight Ux improvements

Closes #(issue_number)
-->

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

---------

Co-authored-by: Anthony Stirling <[email protected]>

frontend/src/components/pageEditor/FileThumbnail.tsx

@@ -16,7 +16,7 @@ interface FileItem {
   id: string;
   name: string;
   pageCount: number;
-  thumbnail: string;
+  thumbnail: string | null;
   size: number;
   modifiedAt?: number | string | Date;
 }
@@ -129,9 +129,9 @@ const FileThumbnail = ({
   // ---- Drag & drop wiring ----
   const fileElementRef = useCallback((element: HTMLDivElement | null) => {
     if (!element) return;
-    
+
     dragElementRef.current = element;
-    
+
     const dragCleanup = draggable({
       element,
       getInitialData: () => ({
@@ -147,7 +147,7 @@ const FileThumbnail = ({
         setIsDragging(false);
       }
     });
-    
+
     const dropCleanup = dropTargetForElements({
       element,
       getData: () => ({
@@ -331,46 +331,34 @@ const FileThumbnail = ({
         </div>
       )}
 
-      {/* Title + meta line */}
-      <div 
-      style={{
-        padding: '0.5rem',
-        textAlign: 'center',
-        background: 'var(--file-card-bg)',
-        marginTop: '0.5rem',
-        marginBottom: '0.5rem',
-      }}>
-        <Text size="lg" fw={700} className={styles.title} lineClamp={2}>
-          {file.name}
-        </Text>
-        <Text
-          size="sm"
-          c="dimmed"
-          className={styles.meta}
-          lineClamp={3}
-          title={`${extUpper || 'FILE'} • ${prettySize}`}
+      {/* File content area */}
+      <div className="file-container w-[90%] h-[80%] relative">
+        {/* Stacked file effect - multiple shadows to simulate pages */}
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'var(--mantine-color-gray-1)',
+            borderRadius: 6,
+            border: '1px solid var(--mantine-color-gray-3)',
+            padding: 4,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            position: 'relative',
+            boxShadow: '2px 2px 0 rgba(0,0,0,0.1), 4px 4px 0 rgba(0,0,0,0.05)'
+          }}
         >
-          {/* e.g., Jan 29, 2025 - PDF file - 3 Pages */}
-          {dateLabel}
-          {extUpper ? ` - ${extUpper} file` : ''}
-          {pageLabel ? ` - ${pageLabel}` : ''}
-        </Text>
-      </div>
-
-      {/* Preview area */}
-      <div className={`${styles.previewBox} mx-6 mb-4 relative flex-1`}>
-        <div className={styles.previewPaper}>
-          <img
-            src={file.thumbnail}
-            alt={file.name}
-            draggable={false}
-            loading="lazy"
-            decoding="async"
-            onError={(e) => {
-              const img = e.currentTarget;
-              img.style.display = 'none';
-              img.parentElement?.setAttribute('data-thumb-missing', 'true');
-            }}
+          {file.thumbnail && (
+            <img
+              src={file.thumbnail}
+              alt={file.name}
+              draggable={false}
+              onError={(e) => {
+                // Hide broken image if blob URL was revoked
+                const img = e.target as HTMLImageElement;
+                img.style.display = 'none';
+              }}
             style={{
               maxWidth: '80%',
               maxHeight: '80%',
@@ -384,6 +372,7 @@ const FileThumbnail = ({
               alignSelf: 'start'
             }}
           />
+          )}
         </div>
 
         {/* Pin indicator (bottom-left) */}