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-15 19:10:47 +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,76 @@
+import React from "react";
+import { Card, Group, Text, Button, Progress } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import StorageIcon from "@mui/icons-material/Storage";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { StorageStats } from "@app/services/fileStorage";
+import { formatFileSize } from "@app/utils/fileUtils";
+import { getStorageUsagePercent } from "@app/utils/storageUtils";
+
+interface StorageStatsCardProps {
+  storageStats: StorageStats | null;
+  filesCount: number;
+  onClearAll: () => void;
+  onReloadFiles: () => void;
+}
+
+const StorageStatsCard: React.FC<StorageStatsCardProps> = ({
+  storageStats,
+  filesCount,
+  onClearAll,
+  onReloadFiles,
+}) => {
+  const { t } = useTranslation();
+
+  if (!storageStats) return null;
+
+  const storageUsagePercent = getStorageUsagePercent(storageStats);
+
+  return (
+    <Card withBorder p="sm" mb="md" style={{ width: "90%", maxWidth: 600 }}>
+      <Group align="center" gap="md">
+        <StorageIcon />
+        <div style={{ flex: 1 }}>
+          <Text size="sm" fw={500}>
+            {t("fileManager.storage", "Storage")}: {formatFileSize(storageStats.used)}
+            {storageStats.quota && ` / ${formatFileSize(storageStats.quota)}`}
+          </Text>
+          {storageStats.quota && (
+            <Progress
+              value={storageUsagePercent}
+              color={storageUsagePercent > 80 ? "red" : storageUsagePercent > 60 ? "yellow" : "blue"}
+              size="sm"
+              mt={4}
+            />
+          )}
+          <Text size="xs" c="dimmed">
+            {storageStats.fileCount} {t("fileManager.filesStored", "files stored")}
+          </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}
+          >
+            Reload Files
+          </Button>
+        </Group>
+      </Group>
+    </Card>
+  );
+};
+
+export default StorageStatsCard;