From c650f07a702dd5be8f51c1b8f581e92993eff43b Mon Sep 17 00:00:00 2001
From: Connor Yoh <connor@stirlingpdf.com>
Date: Wed, 6 Aug 2025 13:37:02 +0100
Subject: [PATCH] Improve filepreview

---
 .../fileManager/CompactFileDetails.tsx        |   5 +-
 .../components/fileManager/FileDetails.tsx    |   4 +-
 .../components/fileManager/FilePreview.tsx    | 110 ++++++++++--------
 3 files changed, 66 insertions(+), 53 deletions(-)

diff --git a/frontend/src/components/fileManager/CompactFileDetails.tsx b/frontend/src/components/fileManager/CompactFileDetails.tsx
index 467e1e4c2..7f7c410b7 100644
--- a/frontend/src/components/fileManager/CompactFileDetails.tsx
+++ b/frontend/src/components/fileManager/CompactFileDetails.tsx
@@ -12,7 +12,7 @@ interface CompactFileDetailsProps {
   thumbnail: string | null;
   selectedFiles: FileWithUrl[];
   currentFileIndex: number;
-  hasMultipleFiles: boolean;
+  numberOfFiles: number;
   isAnimating: boolean;
   onPrevious: () => void;
   onNext: () => void;
@@ -24,7 +24,7 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
   thumbnail,
   selectedFiles,
   currentFileIndex,
-  hasMultipleFiles,
+  numberOfFiles,
   isAnimating,
   onPrevious,
   onNext,
@@ -32,6 +32,7 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
 }) => {
   const { t } = useTranslation();
   const hasSelection = selectedFiles.length > 0;
+  const hasMultipleFiles = numberOfFiles > 1;
 
   return (
     <Stack gap="xs" style={{ height: '100%' }}>
diff --git a/frontend/src/components/fileManager/FileDetails.tsx b/frontend/src/components/fileManager/FileDetails.tsx
index bf17eeb64..9673d06ad 100644
--- a/frontend/src/components/fileManager/FileDetails.tsx
+++ b/frontend/src/components/fileManager/FileDetails.tsx
@@ -64,7 +64,7 @@ const FileDetails: React.FC<FileDetailsProps> = ({
         thumbnail={getCurrentThumbnail()}
         selectedFiles={selectedFiles}
         currentFileIndex={currentFileIndex}
-        hasMultipleFiles={hasMultipleFiles}
+        numberOfFiles={selectedFiles.length}
         isAnimating={isAnimating}
         onPrevious={handlePrevious}
         onNext={handleNext}
@@ -79,7 +79,7 @@ const FileDetails: React.FC<FileDetailsProps> = ({
       <FilePreview
         currentFile={currentFile}
         thumbnail={getCurrentThumbnail()}
-        hasMultipleFiles={hasMultipleFiles}
+        numberOfFiles={selectedFiles.length}
         isAnimating={isAnimating}
         modalHeight={modalHeight}
         onPrevious={handlePrevious}
diff --git a/frontend/src/components/fileManager/FilePreview.tsx b/frontend/src/components/fileManager/FilePreview.tsx
index f760cbebf..deb4cc67b 100644
--- a/frontend/src/components/fileManager/FilePreview.tsx
+++ b/frontend/src/components/fileManager/FilePreview.tsx
@@ -8,7 +8,7 @@ import { FileWithUrl } from '../../types/file';
 interface FilePreviewProps {
   currentFile: FileWithUrl | null;
   thumbnail: string | null;
-  hasMultipleFiles: boolean;
+  numberOfFiles: number;
   isAnimating: boolean;
   modalHeight: string;
   onPrevious: () => void;
@@ -18,12 +18,39 @@ interface FilePreviewProps {
 const FilePreview: React.FC<FilePreviewProps> = ({
   currentFile,
   thumbnail,
-  hasMultipleFiles,
+  numberOfFiles,
   isAnimating,
   modalHeight,
   onPrevious,
   onNext
 }) => {
+  const hasMultipleFiles = numberOfFiles > 1;
+  // Common style objects
+  const navigationArrowStyle = {
+    position: 'absolute' as const,
+    top: '50%',
+    transform: 'translateY(-50%)',
+    zIndex: 10
+  };
+
+  const stackDocumentBaseStyle = {
+    position: 'absolute' as const,
+    width: '100%',
+    height: '100%'
+  };
+
+  const animationStyle = {
+    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    transform: isAnimating ? 'scale(0.95) translateX(1.25rem)' : 'scale(1) translateX(0)',
+    opacity: isAnimating ? 0.7 : 1
+  };
+
+  const mainDocumentShadow = '0 6px 16px rgba(0, 0, 0, 0.2)';
+  const stackDocumentShadows = {
+    back: '0 2px 8px rgba(0, 0, 0, 0.1)',
+    middle: '0 3px 10px rgba(0, 0, 0, 0.12)'
+  };
+
   return (
     <Box p="xs" style={{ textAlign: 'center', flexShrink: 0 }}>
       <Box style={{ position: 'relative', width: "100%", height: `calc(${modalHeight} * 0.5 - 2rem)`, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
@@ -36,11 +63,8 @@ const FilePreview: React.FC<FilePreviewProps> = ({
             color="blue"
             disabled={isAnimating}
             style={{
-              position: 'absolute',
-              left: '0',
-              top: '50%',
-              transform: 'translateY(-50%)',
-              zIndex: 10
+              ...navigationArrowStyle,
+              left: '0'
             }}
           >
             <ChevronLeftIcon />
@@ -50,34 +74,30 @@ const FilePreview: React.FC<FilePreviewProps> = ({
         {/* Document Stack Container */}
         <Box style={{ position: 'relative', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
           {/* Background documents (stack effect) */}
-          {hasMultipleFiles && (
-            <>
-              {/* Third document (furthest back) */}
-              <Box
-                style={{
-                  position: 'absolute',
-                  width: '100%',
-                  height: '100%',
-                  backgroundColor: 'var(--mantine-color-gray-2)',
-                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
-                  transform: 'translate(0.75rem, 0.75rem) rotate(2deg)',
-                  zIndex: 1
-                }}
-              />
-              
-              {/* Second document */}
-              <Box
-                style={{
-                  position: 'absolute',
-                  width: '100%',
-                  height: '100%',
-                  backgroundColor: 'var(--mantine-color-gray-1)',
-                  boxShadow: '0 3px 10px rgba(0, 0, 0, 0.12)',
-                  transform: 'translate(0.375rem, 0.375rem) rotate(1deg)',
-                  zIndex: 2
-                }}
-              />
-            </>
+          {/* Show 2 shadow pages for 3+ files */}
+          {numberOfFiles >= 3 && (
+            <Box
+              style={{
+                ...stackDocumentBaseStyle,
+                backgroundColor: 'var(--mantine-color-gray-3)',
+                boxShadow: stackDocumentShadows.back,
+                transform: 'translate(0.75rem, 0.75rem) rotate(2deg)',
+                zIndex: 1
+              }}
+            />
+          )}
+          
+          {/* Show 1 shadow page for 2+ files */}
+          {numberOfFiles >= 2 && (
+            <Box
+              style={{
+                ...stackDocumentBaseStyle,
+                backgroundColor: 'var(--mantine-color-gray-2)',
+                boxShadow: stackDocumentShadows.middle,
+                transform: 'translate(0.375rem, 0.375rem) rotate(1deg)',
+                zIndex: 2
+              }}
+            />
           )}
           
           {/* Main document */}
@@ -91,13 +111,10 @@ const FilePreview: React.FC<FilePreviewProps> = ({
                 maxHeight: '100%', 
                 width: 'auto', 
                 height: 'auto',
-                boxShadow: '0 6px 16px rgba(0, 0, 0, 0.2)',
-                borderRadius: '0.5rem',
+                boxShadow: mainDocumentShadow,
                 position: 'relative',
                 zIndex: 3,
-                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-                transform: isAnimating ? 'scale(0.95) translateX(1.25rem)' : 'scale(1) translateX(0)',
-                opacity: isAnimating ? 0.7 : 1
+                ...animationStyle
               }}
             />
           ) : currentFile ? (
@@ -105,12 +122,10 @@ const FilePreview: React.FC<FilePreviewProps> = ({
               width: '80%', 
               height: '80%', 
               backgroundColor: 'var(--mantine-color-gray-1)', 
-              boxShadow: '0 6px 16px rgba(0, 0, 0, 0.2)',
+              boxShadow: mainDocumentShadow,
               position: 'relative',
               zIndex: 3,
-              transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-              transform: isAnimating ? 'scale(0.95) translateX(1.25rem)' : 'scale(1) translateX(0)',
-              opacity: isAnimating ? 0.7 : 1
+              ...animationStyle
             }}>
               <PictureAsPdfIcon style={{ fontSize: '3rem', color: 'var(--mantine-color-gray-6)' }} />
             </Center>
@@ -126,11 +141,8 @@ const FilePreview: React.FC<FilePreviewProps> = ({
             color="blue"
             disabled={isAnimating}
             style={{
-              position: 'absolute',
-              right: '0',
-              top: '50%',
-              transform: 'translateY(-50%)',
-              zIndex: 10
+              ...navigationArrowStyle,
+              right: '0'
             }}
           >
             <ChevronRightIcon />