Restructure

frontend/src/components/fileManagement/StorageStatsCard.tsx

@@ -1,92 +0,0 @@
-import React from "react";
-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 = ({
-  storageStats,
-  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 (
-    <Stack gap="sm" style={{ width: "90%", maxWidth: 600 }}>
-      <Card withBorder p="sm">
-        <Group align="center" gap="md">
-          <StorageIcon />
-          <div style={{ flex: 1 }}>
-            <Text size="sm" fw={500}>
-              {t("storage.storageUsed", "Storage used")}: {formatFileSize(totalUsed)} / {formatFileSize(storageConfig.maxTotalStorage)}
-            </Text>
-            <Progress
-              value={hardLimitPercent}
-              color={isNearLimit ? "red" : hardLimitPercent > 60 ? "yellow" : "blue"}
-              size="sm"
-              mt={4}
-            />
-            <Group justify="space-between" mt={2}>
-              <Text size="xs" c="dimmed">
-                {storageStats.fileCount} files • {t("storage.approximateSize", "Approximate size")}
-              </Text>
-              <Text size="xs" c={isNearLimit ? "red" : "dimmed"}>
-                {Math.round(hardLimitPercent)}% used
-              </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="blue"
-              size="xs"
-              onClick={onReloadFiles}
-            >
-              {t("fileManager.reloadFiles", "Reload Files")}
-            </Button>
-          </Group>
-        </Group>
-      </Card>
-    </Stack>
-  );
-};
-
-export default StorageStatsCard;

frontend/src/components/fileManager/FileListItem.tsx

@@ -2,7 +2,17 @@ import React, { useState } from 'react';
 import { Group, Box, Text, ActionIcon, Checkbox, Divider } from '@mantine/core';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { getFileSize, getFileDate } from '../../utils/fileUtils';
-import { FileListItemProps } from './types';
+import { FileWithUrl } from '../../types/file';
+
+interface FileListItemProps {
+  file: FileWithUrl;
+  isSelected: boolean;
+  isSupported: boolean;
+  onSelect: () => void;
+  onRemove: () => void;
+  onDoubleClick?: () => void;
+  isLast?: boolean;
+}
 
 const FileListItem: React.FC<FileListItemProps> = ({ 
   file, 

frontend/src/components/fileManager/types.ts

@@ -1,14 +0,0 @@
-import { FileWithUrl } from '../../types/file';
-
-export type FileSource = 'recent' | 'local' | 'drive';
-
-export interface FileListItemProps {
-  file: FileWithUrl;
-  isSelected: boolean;
-  isSupported: boolean;
-  onSelect: () => void;
-  onRemove: () => void;
-  onDoubleClick?: () => void;
-  isLast?: boolean;
-}
-

frontend/src/components/shared/FileCard.tsx

@@ -6,6 +6,7 @@ import StorageIcon from "@mui/icons-material/Storage";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import EditIcon from "@mui/icons-material/Edit";
 
+import { FileWithUrl } from "../../types/file";
 import { getFileSize, getFileDate } from "../../utils/fileUtils";
 import { useIndexedDBThumbnail } from "../../hooks/useIndexedDBThumbnail";
 import { fileStorage } from "../../services/fileStorage";

frontend/src/components/shared/FileGrid.tsx

@@ -3,7 +3,7 @@ import { Box, Flex, Group, Text, Button, TextInput, Select, Badge } from "@manti
 import { useTranslation } from "react-i18next";
 import SearchIcon from "@mui/icons-material/Search";
 import SortIcon from "@mui/icons-material/Sort";
-import FileCard from "../fileManagement/FileCard";
+import FileCard from "./FileCard";
 import { FileWithUrl } from "../../types/file";
 
 interface FileGridProps {

frontend/src/contexts/FileManagerContext.tsx

@@ -1,11 +1,10 @@
 import React, { createContext, useContext, useState, useRef, useCallback, useEffect } from 'react';
 import { FileWithUrl } from '../types/file';
-import { FileSource } from '../components/fileManager/types';
 
 // Type for the context value - now contains everything directly
 interface FileManagerContextValue {
   // State
-  activeSource: FileSource;
+  activeSource: 'recent' | 'local' | 'drive';
   selectedFileIds: string[];
   searchTerm: string;
   selectedFiles: FileWithUrl[];
@@ -13,7 +12,7 @@ interface FileManagerContextValue {
   fileInputRef: React.RefObject<HTMLInputElement>;
   
   // Handlers
-  onSourceChange: (source: FileSource) => void;
+  onSourceChange: (source: 'recent' | 'local' | 'drive') => void;
   onLocalFileClick: () => void;
   onFileSelect: (file: FileWithUrl) => void;
   onFileRemove: (index: number) => void;
@@ -57,7 +56,7 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
   storeFile,
   refreshRecentFiles,
 }) => {
-  const [activeSource, setActiveSource] = useState<FileSource>('recent');
+  const [activeSource, setActiveSource] = useState<'recent' | 'local' | 'drive'>('recent');
   const [selectedFileIds, setSelectedFileIds] = useState<string[]>([]);
   const [searchTerm, setSearchTerm] = useState('');
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -71,7 +70,7 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
     file.name.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
-  const handleSourceChange = useCallback((source: FileSource) => {
+  const handleSourceChange = useCallback((source: 'recent' | 'local' | 'drive') => {
     setActiveSource(source);
     if (source !== 'recent') {
       setSelectedFileIds([]);