diff --git a/package.json b/package.json
index 29e085b..12a68ac 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
"lodash.set": "^4.3.2",
"normalize-wheel": "^1.0.1",
"polygon-clipping": "^0.15.1",
+ "pretty-bytes": "^5.4.1",
"raw.macro": "^0.4.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
diff --git a/src/modals/SettingsModal.js b/src/modals/SettingsModal.js
index 126d371..862d289 100644
--- a/src/modals/SettingsModal.js
+++ b/src/modals/SettingsModal.js
@@ -1,5 +1,14 @@
-import React, { useState, useContext } from "react";
-import { Label, Flex, Button, useColorMode, Checkbox, Divider } from "theme-ui";
+import React, { useState, useContext, useEffect } from "react";
+import {
+ Label,
+ Flex,
+ Button,
+ useColorMode,
+ Checkbox,
+ Divider,
+ Text,
+} from "theme-ui";
+import prettyBytes from "pretty-bytes";
import Modal from "../components/Modal";
import Slider from "../components/Slider";
@@ -16,6 +25,16 @@ function SettingsModal({ isOpen, onRequestClose }) {
const { userId } = useContext(AuthContext);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [labelSize, setLabelSize] = useSetting("map.labelSize");
+ const [storageEstimate, setStorageEstimate] = useState({
+ usage: 0,
+ quota: 0,
+ });
+
+ useEffect(() => {
+ if (isOpen) {
+ navigator.storage.estimate().then(setStorageEstimate);
+ }
+ }, [isOpen]);
async function handleEraseAllData() {
localStorage.clear();
@@ -96,6 +115,17 @@ function SettingsModal({ isOpen, onRequestClose }) {
Erase all content and reset
+
+
+ Storage Used: {prettyBytes(storageEstimate.usage)} of{" "}
+ {prettyBytes(storageEstimate.quota)} (
+ {Math.round(
+ (storageEstimate.usage / Math.max(storageEstimate.quota, 1)) *
+ 100
+ )}
+ %)
+
+