From 722f7e86cc33c2bc63577d20aed2c7fa7c86ef51 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Sun, 6 Apr 2025 00:30:59 +0200
Subject: [PATCH] Feature: show quota in debug panel

---
 .../SettingsVisualisations.ts                  | 18 ++++++++++++++----
 src/Utils.ts                                   | 10 ++++++++++
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/UI/SpecialVisualisations/SettingsVisualisations.ts b/src/UI/SpecialVisualisations/SettingsVisualisations.ts
index d22cf68882..758799cb46 100644
--- a/src/UI/SpecialVisualisations/SettingsVisualisations.ts
+++ b/src/UI/SpecialVisualisations/SettingsVisualisations.ts
@@ -7,12 +7,13 @@ import LoginButton from "../Base/LoginButton.svelte"
 import ThemeViewState from "../../Models/ThemeViewState"
 import OrientationDebugPanel from "../Debug/OrientationDebugPanel.svelte"
 import AllTagsPanel from "../Popup/AllTagsPanel/AllTagsPanel.svelte"
-import { ImmutableStore, UIEventSource } from "../../Logic/UIEventSource"
+import { UIEventSource } from "../../Logic/UIEventSource"
 import ClearCaches from "../Popup/ClearCaches.svelte"
 import Locale from "../i18n/Locale"
 import LanguageUtils from "../../Utils/LanguageUtils"
 import LanguagePicker from "../InputElement/LanguagePicker.svelte"
 import PendingChangesIndicator from "../BigComponents/PendingChangesIndicator.svelte"
+import { Utils } from "../../Utils"
 
 export class SettingsVisualisations {
     public static initList(): SpecialVisualizationSvelte[] {
@@ -79,14 +80,23 @@ export class SettingsVisualisations {
                 group: "settings",
                 docs: "Shows the current state of storage",
                 args: [],
-                constr(state: SpecialVisualizationState): SvelteUIElement {
+                constr: function(state: SpecialVisualizationState): SvelteUIElement {
                     const data = {}
                     for (const key in localStorage) {
                         data[key] = localStorage[key]
                     }
-                    const tags = new ImmutableStore(data)
+                    const tags = new UIEventSource(data)
+
+                    navigator.storage.estimate().then(estimate => {
+                        data["__usage:current:bytes"] = estimate.usage
+                        data["__usage:current:human"] = Utils.toHumanByteSize(estimate.usage)
+                        data["__usage:quota:bytes"] = estimate.quota
+                        data["__usage:quota:human"] = Utils.toHumanByteSize(estimate.quota)
+                        tags.ping()
+
+                    })
                     return new SvelteUIElement(AllTagsPanel, { state, tags })
-                },
+                }
             },
             {
                 funcName: "clear_caches",
diff --git a/src/Utils.ts b/src/Utils.ts
index 770c620585..ef7033373d 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -1150,6 +1150,16 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
         return hours + ":" + Utils.TwoDigits(minutes) + ":" + Utils.TwoDigits(seconds)
     }
 
+    public static toHumanByteSize(bytes: number): string {
+        const scale = ["b", "KB", "MB", "GB", "TB"] as const
+        let i = 0
+        while (bytes > 1000) {
+            bytes = bytes / 1000
+            i++
+        }
+        return Math.round(bytes) + scale[i]
+    }
+
     public static HomepageLink(): string {
         if (typeof window === "undefined") {
             return "https://mapcomplete.org"