handle errors on config update

src/style.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.btn-alert-error {
+    @apply bg-transparent hover:bg-[#cd5a5a] border border-error-content text-error-content
+}

src/ui/settings/NumericSetting.svelte

@@ -10,19 +10,37 @@
     export let max = null;
     export let decimal = false;
 
-    let error = null;
-    let localValue = value.toString();
     const dispatch = createEventDispatcher();
-    function validate(event) {
+
+    $: localValue = value.toString();
+    let lastInputTime = null;
+    function debounce(event) {
+        lastInputTime = Date.now();
         localValue = localValue.replace(/[^-0-9.]/g, '');
+
+        const eventTime = lastInputTime;
+        const pendingValue = localValue;
+        window.setTimeout(
+            () => {
+                // if no other inputs have occured since then
+                if (eventTime === lastInputTime) {
+                    updateValue(pendingValue);
+                }
+            },
+            500
+        )
+    }
+
+    let error = null;
+    function updateValue(newValue) {
         // Don't update the value, but also don't error, if it's empty
         // or if it could be the start of a negative or decimal number
-        if (localValue.match(/^$|^-$|^\.$/) !== null) {
+        if (newValue.match(/^$|^-$|^\.$/) !== null) {
             error = null;
             return;
         }
 
-        let num = parseFloat(localValue);
+        const num = parseFloat(newValue);
         if (num % 1 !== 0 && !decimal) {
             error = `${num} is not a whole number`;
         }
@@ -53,7 +71,7 @@
                 size="{Math.max(5, localValue.length)}"
                 class:input-error={error} 
                 bind:value={localValue} 
-                on:input="{validate}"
+                on:input="{debounce}"
             />
         </div>
     </div>

src/views/Settings.svelte

@@ -5,12 +5,19 @@
     import Nav from '../ui/Nav.svelte';
     import Link from '../ui/Link.svelte';
     import ErrorAlert from '../ui/ErrorAlert.svelte';
-    // import Setting from '../ui/settings/Setting.svelte';
     import { Setting, ToggleSetting, NumericSetting } from '../ui/settings';
 
+
+    let error = null;
     async function save() {
+        try {
             await invoke('save_config', {config: $appState.config});
         }
+        catch (e) {
+            error = e;
+            $appState.config = await invoke('get_config');
+        }
+    }
 </script>
 
 
@@ -57,3 +64,17 @@
         </Setting>
     </div>
 {/await}
+
+{#if error}
+    <div class="toast">
+        <div class="alert alert-error">
+            <div>
+                <span>{error}</span>
+            </div>
+
+            <div>
+                <button class="btn btn-sm btn-alert-error" on:click={() => error = null}>Ok</button>
+            </div>
+        </div>
+    </div>
+{/if}

src/views/ShowApproved.svelte

@@ -49,9 +49,7 @@
             {error}
             <svelte:fragment slot="buttons">
                 <Link target="Home">
-                    <button class="btn btn-sm bg-transparent hover:bg-[#cd5a5a] border border-error-content text-error-content">
-                        Ok
-                    </button>
+                    <button class="btn btn-sm btn-alert-error" on:click={() => navigate('Home')}>Ok</button>
                 </Link>
             </svelte:fragment>
         </ErrorAlert>

src/views/ShowDenied.svelte

@@ -38,9 +38,7 @@
             {error}
             <svelte:fragment slot="buttons">
                 <Link target="Home">
-                    <button class="btn btn-sm bg-transparent hover:bg-[#cd5a5a] border border-error-content text-error-content" on:click="{() => navigate('Home')}">
-                        Ok
-                    </button>
+                    <button class="btn btn-sm btn-alert-error" on:click={() => navigate('Home')}>Ok</button>
                 </Link>
             </svelte:fragment>
         </ErrorAlert>