web/settings/advanced: add cache clearing, refactor data management

web/src/components/settings/ClearStorageButton.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { t } from "$lib/i18n/translations";
+    import { createDialog } from "$lib/state/dialogs";
+    import { clearQueue } from "$lib/state/queen-bee/queue";
+    import { clearCacheStorage, clearFileStorage } from "$lib/storage";
+
+    import IconFileShredder from "@tabler/icons-svelte/IconFileShredder.svelte";
+    import DataSettingsButton from "$components/settings/DataSettingsButton.svelte";
+
+    const clearDialog = () => {
+        createDialog({
+            id: "wipe-confirm",
+            type: "small",
+            icon: "warn-red",
+            title: $t("dialog.clear_cache.title"),
+            bodyText: $t("dialog.clear_cache.body"),
+            buttons: [
+                {
+                    text: $t("button.cancel"),
+                    main: false,
+                    action: () => {},
+                },
+                {
+                    text: $t("button.clear"),
+                    color: "red",
+                    main: true,
+                    timeout: 2000,
+                    action: async () => {
+                        clearQueue();
+                        await clearFileStorage();
+                        await clearCacheStorage();
+                    },
+                },
+            ],
+        });
+    };
+</script>
+
+<DataSettingsButton id="clear-cache" click={clearDialog} danger>
+    <IconFileShredder />
+    {$t("button.clear_cache")}
+</DataSettingsButton>

web/src/components/settings/DataSettingsButton.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    export let id: string;
+    export let click: () => void;
+    export let danger = false;
+</script>
+
+<button {id} class="button data-button" class:danger on:click={click}>
+    <slot></slot>
+</button>
+
+<style>
+    .data-button {
+        padding: 8px 14px;
+        width: max-content;
+        text-align: start;
+    }
+
+    .data-button :global(svg) {
+        stroke-width: 1.8px;
+        height: 21px;
+        width: 21px;
+    }
+
+    .data-button.danger {
+        background-color: var(--red);
+        color: var(--white);
+    }
+
+    .data-button.danger:hover {
+        background-color: var(--dark-red);
+    }
+</style>

web/src/components/settings/ManageSettings.svelte

@@ -5,7 +5,7 @@
     import { validateSettings } from "$lib/settings/validate";
     import { storedSettings, updateSetting, loadFromString } from "$lib/state/settings";
 
-    import ActionButton from "$components/buttons/ActionButton.svelte";
+    import DataSettingsButton from "$components/settings/DataSettingsButton.svelte";
     import ResetSettingsButton from "$components/settings/ResetSettingsButton.svelte";
 
     import IconFileExport from "@tabler/icons-svelte/IconFileExport.svelte";
@@ -95,16 +95,16 @@
 </script>
 
 <div class="button-row" id="settings-data-transfer">
-    <ActionButton id="import-settings" click={importSettings}>
+    <DataSettingsButton id="import-settings" click={importSettings}>
         <IconFileImport />
         {$t("button.import")}
-    </ActionButton>
+    </DataSettingsButton>
 
     {#if $storedSettings.schemaVersion}
-        <ActionButton id="export-settings" click={exportSettings}>
+        <DataSettingsButton id="export-settings" click={exportSettings}>
             <IconFileExport />
             {$t("button.export")}
-        </ActionButton>
+        </DataSettingsButton>
     {/if}
 
     {#if $storedSettings.schemaVersion}

web/src/components/settings/ResetSettingsButton.svelte

@@ -3,15 +3,16 @@
     import { createDialog } from "$lib/state/dialogs";
     import { resetSettings } from "$lib/state/settings";
 
-    import IconTrash from "@tabler/icons-svelte/IconTrash.svelte";
+    import IconRestore from "@tabler/icons-svelte/IconRestore.svelte";
+    import DataSettingsButton from "$components/settings/DataSettingsButton.svelte";
 
     const resetDialog = () => {
         createDialog({
             id: "wipe-confirm",
             type: "small",
             icon: "warn-red",
-            title: $t("dialog.reset.title"),
-            bodyText: $t("dialog.reset.body"),
+            title: $t("dialog.reset_settings.title"),
+            bodyText: $t("dialog.reset_settings.body"),
             buttons: [
                 {
                     text: $t("button.cancel"),
@@ -30,26 +31,7 @@
     };
 </script>
 
-<button id="setting-button-reset" class="button" on:click={resetDialog}>
-    <IconTrash />
+<DataSettingsButton id="reset-settings" click={resetDialog} danger>
+    <IconRestore />
     {$t("button.reset")}
-</button>
-
-<style>
-    #setting-button-reset {
-        background-color: var(--red);
-        color: var(--white);
-        width: max-content;
-        text-align: start;
-    }
-
-    #setting-button-reset:hover {
-        background-color: var(--dark-red);
-    }
-
-    #setting-button-reset :global(svg) {
-        stroke-width: 2px;
-        height: 24px;
-        width: 24px;
-    }
-</style>
+</DataSettingsButton>

web/src/routes/settings/advanced/+page.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
+    import { getStorageQuota } from "$lib/storage";
 
     import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
     import ManageSettings from "$components/settings/ManageSettings.svelte";
     import SettingsCategory from "$components/settings/SettingsCategory.svelte";
+    import ClearStorageButton from "$components/settings/ClearStorageButton.svelte";
 </script>
 
 <SettingsCategory sectionId="debug" title={$t("settings.advanced.debug")}>
@@ -15,6 +17,10 @@
     />
 </SettingsCategory>
 
-<SettingsCategory sectionId="data" title={$t("settings.advanced.data")}>
+<SettingsCategory sectionId="settings-data" title={$t("settings.advanced.settings_data")}>
     <ManageSettings />
 </SettingsCategory>
+
+<SettingsCategory sectionId="local-storage" title={$t("settings.advanced.local_storage")}>
+    <ClearStorageButton />
+</SettingsCategory>