Restructure frontend code to allow for extensions (#4721)

# Description of Changes Move frontend code into `core` folder and add infrastructure for `proprietary` folder to include premium, non-OSS features
2026-07-16 11:23:10 +02:00 · 2025-10-28 10:29:36 +00:00
parent 960d48f80c
commit d2b38ef4b8
725 changed files with 2485 additions and 2226 deletions
@@ -0,0 +1,111 @@
+import React from 'react';
+import { Box, Center } from '@mantine/core';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
+import { StirlingFileStub } from '@app/types/fileContext';
+import DocumentThumbnail from '@app/components/shared/filePreview/DocumentThumbnail';
+import DocumentStack from '@app/components/shared/filePreview/DocumentStack';
+import HoverOverlay from '@app/components/shared/filePreview/HoverOverlay';
+import NavigationArrows from '@app/components/shared/filePreview/NavigationArrows';
+
+export interface FilePreviewProps {
+  // Core file data
+  file: File | StirlingFileStub | null;
+  thumbnail?: string | null;
+  
+  // Optional features
+  showStacking?: boolean;
+  showHoverOverlay?: boolean;
+  showNavigation?: boolean;
+  
+  // State
+  totalFiles?: number;
+  isAnimating?: boolean;
+  
+  // Event handlers
+  onFileClick?: (file: File | StirlingFileStub | null) => void;
+  onPrevious?: () => void;
+  onNext?: () => void;
+}
+
+const FilePreview: React.FC<FilePreviewProps> = ({
+  file,
+  thumbnail,
+  showStacking = false,
+  showHoverOverlay = false,
+  showNavigation = false,
+  totalFiles = 1,
+  isAnimating = false,
+  onFileClick,
+  onPrevious,
+  onNext
+}) => {
+  if (!file) {
+    return (
+      <Box style={{ width: '100%', height: '100%' }}>
+        <Center style={{ width: '100%', height: '100%' }}>
+          <InsertDriveFileIcon 
+            style={{ 
+              fontSize: '4rem', 
+              color: 'var(--mantine-color-gray-4)',
+              opacity: 0.6 
+            }} 
+          />
+        </Center>
+      </Box>
+    );
+  }
+  
+  const hasMultipleFiles = totalFiles > 1;
+  
+  // Animation styles
+  const animationStyle = isAnimating ? {
+    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    transform: 'scale(0.95) translateX(1.25rem)',
+    opacity: 0.7
+  } : {};
+
+  // Build the component composition
+  let content = (
+    <DocumentThumbnail
+      file={file}
+      thumbnail={thumbnail}
+      style={animationStyle}
+      onClick={() => onFileClick?.(file)}
+    />
+  );
+
+  // Wrap with hover overlay if needed
+  if (showHoverOverlay && onFileClick) {
+    content = <HoverOverlay>{content}</HoverOverlay>;
+  }
+
+  // Wrap with document stack if needed
+  if (showStacking) {
+    content = (
+      <DocumentStack totalFiles={totalFiles}>
+        {content}
+      </DocumentStack>
+    );
+  }
+
+  // Wrap with navigation if needed
+  if (showNavigation && hasMultipleFiles && onPrevious && onNext) {
+    content = (
+      <NavigationArrows
+        onPrevious={onPrevious}
+        onNext={onNext}
+        disabled={isAnimating}
+      >
+        {content}
+      </NavigationArrows>
+    );
+  }
+
+  return (
+    <Box style={{ width: '100%', height: '100%' }}>
+      {content}
+    </Box>
+  );
+};
+
+export default FilePreview;