From def6e26b9ffe37fa69364c3808c1db2a429d8c19 Mon Sep 17 00:00:00 2001
From: dumbmoron <log@riseup.net>
Date: Sat, 20 Jul 2024 14:01:13 +0000
Subject: [PATCH] web/settings: add "erase all settings" button

---
 web/i18n/en/settings.json                     |  3 ++-
 .../buttons/ResetSettingsButton.svelte        | 22 +++++++++++++++++++
 web/src/lib/state/settings.ts                 |  7 ++++++
 web/src/routes/+layout.svelte                 | 11 +++++++++-
 web/src/routes/settings/advanced/+page.svelte |  5 +++++
 5 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 web/src/components/buttons/ResetSettingsButton.svelte

diff --git a/web/i18n/en/settings.json b/web/i18n/en/settings.json
index f5380063..4df36dc5 100644
--- a/web/i18n/en/settings.json
+++ b/web/i18n/en/settings.json
@@ -92,5 +92,6 @@
 
     "advanced.debug": "debug",
     "advanced.debug.title": "enable debug features",
-    "advanced.debug.description": "gives you access to a page with app & device info useful for debugging."
+    "advanced.debug.description": "gives you access to a page with app & device info useful for debugging.",
+    "advanced.reset": "erase all settings"
 }
diff --git a/web/src/components/buttons/ResetSettingsButton.svelte b/web/src/components/buttons/ResetSettingsButton.svelte
new file mode 100644
index 00000000..85a2139d
--- /dev/null
+++ b/web/src/components/buttons/ResetSettingsButton.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { t } from '$lib/i18n/translations';
+    import IconTrash from '@tabler/icons-svelte/IconTrash.svelte';
+    import { resetSettings } from '$lib/state/settings';
+</script>
+
+<button id="setting-button-reset" class="button" on:click={resetSettings}>
+    <IconTrash /> { $t('settings.advanced.reset') }
+</button>
+
+<style>
+    button {
+        background-color: var(--red);
+        color: var(--white);
+        width: max-content;
+        text-align: left;
+    }
+
+    button:hover {
+        background-color: var(--dark-red);
+    }
+</style>
diff --git a/web/src/lib/state/settings.ts b/web/src/lib/state/settings.ts
index 555c45a9..79dfdc31 100644
--- a/web/src/lib/state/settings.ts
+++ b/web/src/lib/state/settings.ts
@@ -88,6 +88,13 @@ export function updateSetting(partial: PartialSettings) {
     });
 }
 
+export function resetSettings() {
+    update(() => {
+        localStorage.removeItem('settings');
+        return {};
+    });
+}
+
 export default derived(
     storedSettings,
     $settings => mergeWithDefaults($settings)
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index efe0a00b..b6eac3e6 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -60,8 +60,10 @@
 
         --white: #ffffff;
         --gray: #75757e;
-        --blue: #2f8af9;
+        --red: #f92f2f;
+        --dark-red: #df0707;
         --green: #51cf5e;
+        --blue: #2f8af9;
 
         --button: #f4f4f4;
         --button-hover: #e8e8e8;
@@ -111,6 +113,13 @@
             rgba(0, 0, 0, 0) 96%,
             rgba(0, 0, 0, 0.9) 100%
         );
+
+        --skeleton-gradient: linear-gradient(
+            90deg,
+            var(--button),
+            var(--button-hover),
+            var(--button)
+        );
     }
 
     :global([data-theme="dark"]) {
diff --git a/web/src/routes/settings/advanced/+page.svelte b/web/src/routes/settings/advanced/+page.svelte
index 55b454d1..1fe02104 100644
--- a/web/src/routes/settings/advanced/+page.svelte
+++ b/web/src/routes/settings/advanced/+page.svelte
@@ -3,6 +3,7 @@
 
     import SettingsCategory from "$components/settings/SettingsCategory.svelte";
     import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
+    import ResetSettingsButton from "$components/buttons/ResetSettingsButton.svelte";
 </script>
 
 <SettingsCategory sectionId="debug" title={$t("settings.advanced.debug")}>
@@ -13,3 +14,7 @@
         description={$t("settings.advanced.debug.description")}
     />
 </SettingsCategory>
+
+<SettingsCategory sectionId="settings" title={$t("tabs.settings")}>
+    <ResetSettingsButton />
+</SettingsCategory>
\ No newline at end of file