web/settings: add "erase all settings" button

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"
 }

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>

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)

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"]) {

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>