Clean up

frontend/public/locales/en-GB/translation.json

@@ -1653,6 +1653,17 @@
     "uploadError": "Failed to upload some files.",
     "failedToOpen": "Failed to open file. It may have been removed from storage.",
     "failedToLoad": "Failed to load file to active set.",
-    "storageCleared": "Browser cleared storage. Files have been removed. Please re-upload."
+    "storageCleared": "Browser cleared storage. Files have been removed. Please re-upload.",
+    "clearAll": "Clear All",
+    "reloadFiles": "Reload Files"
+  },
+  "storage": {
+    "temporaryNotice": "Files are stored temporarily in your browser and may be cleared automatically",
+    "storageLimit": "Storage limit",
+    "storageUsed": "Temporary Storage used",
+    "storageFull": "Storage is nearly full. Consider removing some files.",
+    "fileTooLarge": "File too large. Maximum size per file is",
+    "storageQuotaExceeded": "Storage quota exceeded. Please remove some files before uploading more.",
+    "approximateSize": "Approximate size"
   }
-}
+}

frontend/src/components/fileManagement/FileCard.tsx

@@ -31,10 +31,10 @@ const FileCard = ({ file, onRemove, onDoubleClick, onView, onEdit, isSelected, o
       radius="md"
       withBorder
       p="xs"
-      style={{ 
+      style={{
-        width: 225, 
+        width: 225,
-        minWidth: 180, 
+        minWidth: 180,
-        maxWidth: 260, 
+        maxWidth: 260,
         cursor: onDoubleClick ? "pointer" : undefined,
         position: 'relative',
         border: isSelected ? '2px solid var(--mantine-color-blue-6)' : undefined,
@@ -109,25 +109,25 @@ const FileCard = ({ file, onRemove, onDoubleClick, onView, onEdit, isSelected, o
             </div>
           )}
           {thumb ? (
-            <Image 
+            <Image
-              src={thumb} 
+              src={thumb}
-              alt="PDF thumbnail" 
+              alt="PDF thumbnail"
-              height={110} 
+              height={110}
-              width={80} 
+              width={80}
-              fit="contain" 
+              fit="contain"
-              radius="sm" 
+              radius="sm"
             />
           ) : isGenerating ? (
-            <div style={{ 
+            <div style={{
-              display: 'flex', 
+              display: 'flex',
-              flexDirection: 'column', 
+              flexDirection: 'column',
-              alignItems: 'center', 
+              alignItems: 'center',
-              justifyContent: 'center' 
+              justifyContent: 'center'
             }}>
-              <div style={{ 
+              <div style={{
-                width: 20, 
+                width: 20,
-                height: 20, 
+                height: 20,
-                border: '2px solid #ddd', 
+                border: '2px solid #ddd',
                 borderTop: '2px solid #666',
                 borderRadius: '50%',
                 animation: 'spin 1s linear infinite',
@@ -136,11 +136,11 @@ const FileCard = ({ file, onRemove, onDoubleClick, onView, onEdit, isSelected, o
               <Text size="xs" c="dimmed">Generating...</Text>
             </div>
           ) : (
-            <div style={{ 
+            <div style={{
-              display: 'flex', 
+              display: 'flex',
-              flexDirection: 'column', 
+              flexDirection: 'column',
-              alignItems: 'center', 
+              alignItems: 'center',
-              justifyContent: 'center' 
+              justifyContent: 'center'
             }}>
               <ThemeIcon
                 variant="light"
@@ -157,30 +157,30 @@ const FileCard = ({ file, onRemove, onDoubleClick, onView, onEdit, isSelected, o
             </div>
           )}
         </Box>
-        
+
         <Text fw={500} size="sm" lineClamp={1} ta="center">
           {file.name}
         </Text>
-        
+
         <Group gap="xs" justify="center">
-          <Badge color="gray" variant="light" size="sm">
+          <Badge color="red" variant="light" size="sm">
             {getFileSize(file)}
           </Badge>
           <Badge color="blue" variant="light" size="sm">
             {getFileDate(file)}
           </Badge>
           {file.storedInIndexedDB && (
-            <Badge 
+            <Badge
-              color="green" 
+              color="green"
-              variant="light" 
+              variant="light"
-              size="sm" 
+              size="sm"
               leftSection={<StorageIcon style={{ fontSize: 12 }} />}
             >
               DB
             </Badge>
           )}
         </Group>
-        
+
         <Button
           color="red"
           size="xs"
@@ -198,4 +198,4 @@ const FileCard = ({ file, onRemove, onDoubleClick, onView, onEdit, isSelected, o
   );
 };
 
-export default FileCard;
+export default FileCard;

frontend/src/components/fileManagement/FileManager.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 
 import { GlobalWorkerOptions } from "pdfjs-dist";
 import { StorageStats } from "../../services/fileStorage";
-import { FileWithUrl, defaultStorageConfig } from "../../types/file";
+import { FileWithUrl, defaultStorageConfig, initializeStorageConfig, StorageConfig } from "../../types/file";
 
 // Refactored imports
 import { fileOperationsService } from "../../services/fileOperationsService";
@@ -39,6 +39,7 @@ const FileManager = ({
   const [notification, setNotification] = useState<string | null>(null);
   const [filesLoaded, setFilesLoaded] = useState(false);
   const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
+  const [storageConfig, setStorageConfig] = useState<StorageConfig>(defaultStorageConfig);
 
   // Extract operations from service for cleaner code
   const {
@@ -75,6 +76,21 @@ const FileManager = ({
     }
   }, [filesLoaded]);
 
+  // Initialize storage configuration on mount
+  useEffect(() => {
+    const initStorage = async () => {
+      try {
+        const config = await initializeStorageConfig();
+        setStorageConfig(config);
+        console.log('Initialized storage config:', config);
+      } catch (error) {
+        console.warn('Failed to initialize storage config, using defaults:', error);
+      }
+    };
+
+    initStorage();
+  }, []);
+
   // Load storage stats and set up periodic updates
   useEffect(() => {
     handleLoadStorageStats();
@@ -143,11 +159,47 @@ const FileManager = ({
     }
   };
 
+  const validateStorageLimits = (filesToUpload: File[]): { valid: boolean; error?: string } => {
+    // Check individual file sizes
+    for (const file of filesToUpload) {
+      if (file.size > storageConfig.maxFileSize) {
+        const maxSizeMB = Math.round(storageConfig.maxFileSize / (1024 * 1024));
+        return {
+          valid: false,
+          error: `${t("storage.fileTooLarge", "File too large. Maximum size per file is")} ${maxSizeMB}MB`
+        };
+      }
+    }
+
+    // Check total storage capacity
+    if (storageStats) {
+      const totalNewSize = filesToUpload.reduce((sum, file) => sum + file.size, 0);
+      const projectedUsage = storageStats.totalSize + totalNewSize;
+
+      if (projectedUsage > storageConfig.maxTotalStorage) {
+        return {
+          valid: false,
+          error: t("storage.storageQuotaExceeded", "Storage quota exceeded. Please remove some files before uploading more.")
+        };
+      }
+    }
+
+    return { valid: true };
+  };
+
   const handleDrop = async (uploadedFiles: File[]) => {
     setLoading(true);
 
     try {
-      const newFiles = await uploadFiles(uploadedFiles, defaultStorageConfig.useIndexedDB);
+      // Validate storage limits before uploading
+      const validation = validateStorageLimits(uploadedFiles);
+      if (!validation.valid) {
+        setNotification(validation.error);
+        setLoading(false);
+        return;
+      }
+
+      const newFiles = await uploadFiles(uploadedFiles, storageConfig.useIndexedDB);
 
       // Update files state
       setFiles((prevFiles) => (allowMultiple ? [...prevFiles, ...newFiles] : newFiles));
@@ -269,8 +321,8 @@ const FileManager = ({
   };
 
   const toggleFileSelection = (fileId: string) => {
-    setSelectedFiles(prev => 
+    setSelectedFiles(prev =>
-      prev.includes(fileId) 
+      prev.includes(fileId)
         ? prev.filter(id => id !== fileId)
         : [...prev, fileId]
     );
@@ -286,12 +338,11 @@ const FileManager = ({
   return (
     <div style={{
       width: "100%",
-      margin: "0 auto",
       justifyContent: "center",
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
-      padding: "20px"
+      paddingTop: "3rem"
     }}>
 
       {/* File upload is now handled by FileUploadSelector when no files exist */}
@@ -302,6 +353,7 @@ const FileManager = ({
         filesCount={files.length}
         onClearAll={handleClearAll}
         onReloadFiles={handleReloadFiles}
+        storageConfig={storageConfig}
       />
 
       {/* Multi-selection controls */}
@@ -312,16 +364,16 @@ const FileManager = ({
               {selectedFiles.length} {t("fileManager.filesSelected", "files selected")}
             </Text>
             <Group>
-              <Button 
+              <Button
-                size="xs" 
+                size="xs"
-                variant="light" 
+                variant="light"
                 onClick={() => setSelectedFiles([])}
               >
                 {t("fileManager.clearSelection", "Clear Selection")}
               </Button>
-              <Button 
+              <Button
-                size="xs" 
+                size="xs"
-                color="orange" 
+                color="orange"
                 onClick={handleOpenSelectedInEditor}
                 disabled={selectedFiles.length === 0}
               >
@@ -332,31 +384,12 @@ const FileManager = ({
         </Box>
       )}
 
-      {/* Files Display */}
+
-      {files.length === 0 ? (
-        <FileUploadSelector
-          title={t("fileManager.title", "Upload PDF Files")}
-          subtitle={t("fileManager.subtitle", "Add files to your storage for easy access across tools")}
-          sharedFiles={[]} // FileManager is the source, so no shared files
-          onFilesSelect={(uploadedFiles) => {
-            // Handle multiple files - add to storage AND active set
-            handleDrop(uploadedFiles);
-            if (onLoadFileToActive && uploadedFiles.length > 0) {
-              uploadedFiles.forEach(onLoadFileToActive);
-            }
-          }}
-          allowMultiple={allowMultiple}
-          accept={["application/pdf"]}
-          loading={loading}
-          showDropzone={true}
-        />
-      ) : (
-        <Box>
           <Flex
             wrap="wrap"
             gap="lg"
             justify="flex-start"
-            style={{ width: "fit-content", margin: "0 auto" }}
+            style={{ width: "90%", marginTop: "1rem"}}
           >
             {files.map((file, idx) => (
               <FileCard
@@ -371,8 +404,7 @@ const FileManager = ({
               />
             ))}
           </Flex>
-        </Box>
+
-      )}
 
       {/* Notifications */}
       {notification && (

frontend/src/components/fileManagement/StorageStatsCard.tsx

@@ -1,17 +1,20 @@
 import React from "react";
-import { Card, Group, Text, Button, Progress } from "@mantine/core";
+import { Card, Group, Text, Button, Progress, Alert, Stack } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import StorageIcon from "@mui/icons-material/Storage";
 import DeleteIcon from "@mui/icons-material/Delete";
+import WarningIcon from "@mui/icons-material/Warning";
 import { StorageStats } from "../../services/fileStorage";
 import { formatFileSize } from "../../utils/fileUtils";
 import { getStorageUsagePercent } from "../../utils/storageUtils";
+import { StorageConfig } from "../../types/file";
 
 interface StorageStatsCardProps {
   storageStats: StorageStats | null;
   filesCount: number;
   onClearAll: () => void;
   onReloadFiles: () => void;
+  storageConfig: StorageConfig;
 }
 
 const StorageStatsCard = ({
@@ -19,58 +22,71 @@ const StorageStatsCard = ({
   filesCount,
   onClearAll,
   onReloadFiles,
+  storageConfig,
 }: StorageStatsCardProps) => {
   const { t } = useTranslation();
 
   if (!storageStats) return null;
 
   const storageUsagePercent = getStorageUsagePercent(storageStats);
+  const totalUsed = storageStats.totalSize || storageStats.used;
+  const hardLimitPercent = (totalUsed / storageConfig.maxTotalStorage) * 100;
+  const isNearLimit = hardLimitPercent >= storageConfig.warningThreshold * 100;
 
   return (
-    <Card withBorder p="sm" mb="md" style={{ width: "90%", maxWidth: 600 }}>
+    <Stack gap="sm" style={{ width: "90%", maxWidth: 600 }}>
-      <Group align="center" gap="md">
+      <Card withBorder p="sm">
-        <StorageIcon />
+        <Group align="center" gap="md">
-        <div style={{ flex: 1 }}>
+          <StorageIcon />
-          <Text size="sm" fw={500}>
+          <div style={{ flex: 1 }}>
-            {t("fileManager.storage", "Storage")}: {formatFileSize(storageStats.used)}
+            <Text size="sm" fw={500}>
-            {storageStats.quota && ` / ${formatFileSize(storageStats.quota)}`}
+              {t("storage.storageUsed", "Storage used")}: {formatFileSize(totalUsed)} / {formatFileSize(storageConfig.maxTotalStorage)}
-          </Text>
+            </Text>
-          {storageStats.quota && (
             <Progress
-              value={storageUsagePercent}
+              value={hardLimitPercent}
-              color={storageUsagePercent > 80 ? "red" : storageUsagePercent > 60 ? "yellow" : "blue"}
+              color={isNearLimit ? "red" : hardLimitPercent > 60 ? "yellow" : "blue"}
               size="sm"
               mt={4}
             />
-          )}
+            <Group justify="space-between" mt={2}>
-          <Text size="xs" c="dimmed">
+              <Text size="xs" c="dimmed">
-            {storageStats.fileCount} {t("fileManager.filesStored", "files stored")}
+                {storageStats.fileCount} files • {t("storage.approximateSize", "Approximate size")}
-          </Text>
+              </Text>
-        </div>
+              <Text size="xs" c={isNearLimit ? "red" : "dimmed"}>
-        <Group gap="xs">
+                {Math.round(hardLimitPercent)}% used
-          {filesCount > 0 && (
+              </Text>
+            </Group>
+            {isNearLimit && (
+              <Text size="xs" c="red" mt={4}>
+                {t("storage.storageFull", "Storage is nearly full. Consider removing some files.")}
+              </Text>
+            )}
+          </div>
+          <Group gap="xs">
+            {filesCount > 0 && (
+              <Button
+                variant="light"
+                color="red"
+                size="xs"
+                onClick={onClearAll}
+                leftSection={<DeleteIcon style={{ fontSize: 16 }} />}
+              >
+                {t("fileManager.clearAll", "Clear All")}
+              </Button>
+            )}
             <Button
               variant="light"
-              color="red"
+              color="blue"
               size="xs"
-              onClick={onClearAll}
+              onClick={onReloadFiles}
-              leftSection={<DeleteIcon style={{ fontSize: 16 }} />}
             >
-              {t("fileManager.clearAll", "Clear All")}
+              {t("fileManager.reloadFiles", "Reload Files")}
             </Button>
-          )}
+          </Group>
-          <Button
-            variant="light"
-            color="blue"
-            size="xs"
-            onClick={onReloadFiles}
-          >
-            Reload Files
-          </Button>
         </Group>
-      </Group>
+      </Card>
-    </Card>
+    </Stack>
   );
 };
 
-export default StorageStatsCard;
+export default StorageStatsCard;

frontend/src/components/shared/FileUploadSelector.tsx

@@ -59,7 +59,7 @@ const FileUploadSelector = ({
   }, [allowMultiple, onFileSelect, onFilesSelect]);
 
   // Get default title and subtitle from translations if not provided
-  const displayTitle = title || t(allowMultiple ? "fileUpload.selectFiles" : "fileUpload.selectFile", 
+  const displayTitle = title || t(allowMultiple ? "fileUpload.selectFiles" : "fileUpload.selectFile",
     allowMultiple ? "Select files" : "Select a file");
   const displaySubtitle = subtitle || t(allowMultiple ? "fileUpload.chooseFromStorageMultiple" : "fileUpload.chooseFromStorage",
     allowMultiple ? "Choose files from storage or upload new PDFs" : "Choose a file from storage or upload a new PDF");
@@ -87,10 +87,7 @@ const FileUploadSelector = ({
             disabled={disabled || sharedFiles.length === 0}
             loading={loading}
           >
-            {loading 
+            {loading ? "Loading..." : `Load from Storage (${sharedFiles.length} files available)`}
-              ? t("fileUpload.loading", "Loading...") 
-              : `${t("fileUpload.loadFromStorage", "Load from Storage")} (${sharedFiles.length} ${t("fileUpload.filesAvailable", "files available")})`
-            }
           </Button>
 
           <Text size="md" c="dimmed">
@@ -112,7 +109,7 @@ const FileUploadSelector = ({
                       allowMultiple ? "Drop files here or click to upload" : "Drop file here or click to upload")}
                   </Text>
                   <Text size="sm" c="dimmed">
-                    {accept.includes('application/pdf') 
+                    {accept.includes('application/pdf')
                       ? t("fileUpload.pdfFilesOnly", "PDF files only")
                       : t("fileUpload.supportedFileTypes", "Supported file types")
                     }

frontend/src/styles/tailwind.css

@@ -2,6 +2,14 @@
 /* Import minimal theme variables */
 @import './theme.css';
 
-@tailwind base;
+@layer base {
-@tailwind components;
+  @tailwind base;
-@tailwind utilities;
+}
+
+@layer components {
+  @tailwind components;
+}
+
+@layer utilities {
+  @tailwind utilities;
+}

frontend/src/theme/mantineTheme.ts

@@ -30,7 +30,7 @@ const gray: MantineColorsTuple = [
 export const mantineTheme = createTheme({
   // Primary color
   primaryColor: 'primary',
-  
+
   // Color palette
   colors: {
     primary,
@@ -245,7 +245,7 @@ export const mantineTheme = createTheme({
         },
         control: {
           color: 'var(--text-secondary)',
-          '&[data-active]': {
+          '[dataActive]': {
             backgroundColor: 'var(--bg-surface)',
             color: 'var(--text-primary)',
             boxShadow: 'var(--shadow-sm)',
@@ -261,7 +261,7 @@ export const mantineTheme = createTheme({
     '*': {
       transition: 'background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease',
     },
-    
+
     // Custom scrollbar styling
     '*::-webkit-scrollbar': {
       width: '8px',
@@ -278,4 +278,4 @@ export const mantineTheme = createTheme({
       backgroundColor: 'var(--color-primary-500)',
     },
   }),
-});
+});

frontend/src/types/file.ts

@@ -11,9 +11,40 @@ export interface FileWithUrl extends File {
 
 export interface StorageConfig {
   useIndexedDB: boolean;
-  // Simplified - no thresholds needed, IndexedDB for everything
+  maxFileSize: number; // Maximum size per file in bytes
+  maxTotalStorage: number; // Maximum total storage in bytes
+  warningThreshold: number; // Warning threshold (percentage 0-1)
 }
 
 export const defaultStorageConfig: StorageConfig = {
   useIndexedDB: true,
+  maxFileSize: 100 * 1024 * 1024, // 100MB per file
+  maxTotalStorage: 1024 * 1024 * 1024, // 1GB default, will be updated dynamically
+  warningThreshold: 0.8, // Warn at 80% capacity
+};
+
+// Calculate and update storage limit: half of available storage or 10GB, whichever is smaller
+export const initializeStorageConfig = async (): Promise<StorageConfig> => {
+  const tenGB = 10 * 1024 * 1024 * 1024; // 10GB in bytes
+  const oneGB = 1024 * 1024 * 1024; // 1GB fallback
+  
+  let maxTotalStorage = oneGB; // Default fallback
+  
+  // Try to estimate available storage
+  if ('storage' in navigator && 'estimate' in navigator.storage) {
+    try {
+      const estimate = await navigator.storage.estimate();
+      if (estimate.quota) {
+        const halfQuota = estimate.quota / 2;
+        maxTotalStorage = Math.min(halfQuota, tenGB);
+      }
+    } catch (error) {
+      console.warn('Could not estimate storage quota, using 1GB default:', error);
+    }
+  }
+  
+  return {
+    ...defaultStorageConfig,
+    maxTotalStorage
+  };
 };