Major 3.0 (#118)

Co-authored-by: Maison da Silva <maisonmdsgreen@hotmail.com>
2026-04-22 07:58:01 +03:00 · 2025-07-30 15:02:26 +03:00
parent d6996031b6
commit 2bd9337e63
200 changed files with 19452 additions and 3339 deletions
@@ -0,0 +1,102 @@
+import { useDialog } from "@/contexts/DialogProvider";
+import { cloudDisabled, setCloudStorage } from "@/features/collectionStorage";
+import { useDangerStyles } from "@/hooks/useDangerStyles";
+import useStorageInfo from "@/hooks/useStorageInfo";
+import { Button, Field, MessageBar, MessageBarBody, MessageBarTitle, ProgressBar } from "@fluentui/react-components";
+import { ArrowDownload20Regular, ArrowUpload20Regular } from "@fluentui/react-icons";
+import { useOptionsStyles } from "../hooks/useOptionsStyles";
+import exportData from "../utils/exportData";
+import importData from "../utils/importData";
+
+export default function StorageSection(): React.ReactElement
+{
+	const { bytesInUse, storageQuota, usedStorageRatio } = useStorageInfo();
+	const [importResult, setImportResult] = useState<boolean | null>(null);
+	const [isCloudDisabled, setCloudDisabled] = useState<boolean>(null!);
+
+	const dialog = useDialog();
+	const cls = useOptionsStyles();
+	const dangerCls = useDangerStyles();
+
+	useEffect(() =>
+	{
+		cloudDisabled.getValue().then(setCloudDisabled);
+		return cloudDisabled.watch(setCloudDisabled);
+	}, []);
+
+	const handleImport = (): void =>
+		dialog.pushPrompt({
+			title: i18n.t("options_page.storage.import_prompt.title"),
+			confirmText: i18n.t("options_page.storage.import_prompt.proceed"),
+			onConfirm: () => importData().then(setImportResult),
+			content: (
+				<MessageBar intent="warning">
+					<MessageBarBody>
+						<MessageBarTitle>{ i18n.t("options_page.storage.import_prompt.warning_title") }</MessageBarTitle>
+
+						{ i18n.t("options_page.storage.import_prompt.warning_text") }
+					</MessageBarBody>
+				</MessageBar>
+			)
+		});
+
+	const handleDisableCloud = (): void =>
+		dialog.pushPrompt({
+			title: i18n.t("options_page.storage.disable"),
+			content: i18n.t("options_page.storage.disable_prompt.text"),
+			confirmText: i18n.t("options_page.storage.disable_prompt.action"),
+			destructive: true,
+			onConfirm: () => setCloudStorage(false)
+		});
+
+	return (
+		<>
+			{ isCloudDisabled === false &&
+				<Field
+					label={ i18n.t("options_page.storage.capacity.title") }
+					hint={ i18n.t("options_page.storage.capacity.description", [(bytesInUse / 1024).toFixed(1), storageQuota / 1024]) }
+					validationState={ usedStorageRatio >= 0.8 ? "error" : undefined }
+				>
+					<ProgressBar value={ usedStorageRatio } thickness="large" />
+				</Field>
+			}
+
+			{ isCloudDisabled === true &&
+				<Button appearance="primary" onClick={ () => setCloudStorage(true) }>
+					{ i18n.t("options_page.storage.enable") }
+				</Button>
+			}
+
+			<div className={ cls.horizontalButtons }>
+				<Button icon={ <ArrowDownload20Regular /> } onClick={ exportData }>
+					{ i18n.t("options_page.storage.export") }
+				</Button>
+				<Button icon={ <ArrowUpload20Regular /> } onClick={ handleImport }>
+					{ i18n.t("options_page.storage.import") }
+				</Button>
+			</div>
+
+			{ importResult !== null &&
+				<MessageBar intent={ importResult ? "success" : "error" }>
+					<MessageBarBody>
+						{ importResult === true ?
+							i18n.t("options_page.storage.import_results.success") :
+							i18n.t("options_page.storage.import_results.error")
+						}
+					</MessageBarBody>
+				</MessageBar>
+			}
+
+			{ isCloudDisabled === false &&
+				<div className={ cls.horizontalButtons }>
+					<Button
+						appearance="subtle" className={ dangerCls.buttonSubtle }
+						onClick={ handleDisableCloud }
+					>
+						{ i18n.t("options_page.storage.disable") }
+					</Button>
+				</div>
+			}
+		</>
+	);
+}