src/ui/ErrorAlert.svelte

@@ -2,8 +2,6 @@
     import { onMount } from 'svelte';
     import { slide } from 'svelte/transition';
 
-    let extraClasses;
-    export {extraClasses as class};
     export let slideDuration = 150;
     let animationClass = "";
 
@@ -51,7 +49,7 @@
 </style>
 
 
-<div in:slide="{{duration: slideDuration}}" class="alert alert-error shadow-lg {animationClass} {extraClasses}">
+<div in:slide="{{duration: slideDuration}}" class="alert alert-error shadow-lg {animationClass}">
     <div>
         <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
         <span>

src/ui/Setting.svelte

@@ -1,18 +1,13 @@
 <script>
-    import { slide } from 'svelte/transition';
-    import ErrorAlert from '../ErrorAlert.svelte';
-
     export let title;
-    export let error = null;
 </script>
 
 
 <div class="divider"></div>
-<div class="flex justify-between">
+<div class="grid grid-cols-2 items-center">
     <h3 class="text-lg font-bold">{title}</h3>
     <slot name="input"></slot>
 </div>
-
 <p class="mt-3">
     <slot name="description"></slot>
 </p>

src/ui/settings/NumericSetting.svelte

@@ -1,62 +0,0 @@
-<script>
-    import { createEventDispatcher } from 'svelte';
-
-    import Setting from './Setting.svelte';
-
-    export let title;
-    export let value;
-    export let unit = '';
-    export let min = null;
-    export let max = null;
-    export let decimal = false;
-
-    const dispatch = createEventDispatcher();
-    let error = null;
-    function validate(event) {
-        let v = event.target.value;
-
-        if (v === '') {
-            error = null;
-            return;
-        }
-
-        let num = parseFloat(v);
-        if (Number.isNaN(num)) {
-            error = `"${v}" is not a number`;
-        }
-        else if (num % 1 !== 0 && !decimal) {
-            error = `${num} is not a whole number`;
-        }
-        else if (min && num < min) {
-            error = `Too low (minimum ${min})`;
-        }
-        else if (max && num > max) {
-            error = `Too large (maximum ${max})`
-        }
-        else {
-            error = null;
-            value = num;
-            dispatch('update', {value})
-        }
-    }
-</script>
-
-
-<Setting {title} {error}>
-    <div slot="input">
-        {#if unit}
-            <span class="mr-2">{unit}:</span>
-        {/if}
-        <div class="tooltip tooltip-error" class:tooltip-open={error !== null} data-tip={error}>
-            <input 
-                type="text" 
-                class="input input-sm input-bordered text-right max-w-[4rem]" 
-                class:input-error={error} 
-                value={value} 
-                on:input="{validate}"
-            />
-        </div>
-    </div>
-
-    <slot name="description" slot="description"></slot>
-</Setting>

src/ui/settings/ToggleSetting.svelte

@@ -1,22 +0,0 @@
-<script>
-    import { createEventDispatcher } from 'svelte';
-
-    import Setting from './Setting.svelte';
-
-    export let title;
-    export let value;
-
-    const dispatch = createEventDispatcher();
-</script>
-
-
-<Setting title="Start minimized">
-    <input 
-        slot="input" 
-        type="checkbox" 
-        class="toggle toggle-success"
-        bind:checked={value}
-        on:change={e => dispatch('update', {value: e.target.checked})}
-    />
-    <slot name="description" slot="description"></slot>
-</Setting>

src/ui/settings/index.js

@@ -1,3 +0,0 @@
-export { default as Setting } from './Setting.svelte';
-export { default as ToggleSetting } from './ToggleSetting.svelte';
-export { default as NumericSetting } from './NumericSetting.svelte';

src/views/Settings.svelte

@@ -1,16 +1,21 @@
 <script>
     import { invoke } from '@tauri-apps/api/tauri';
+    window.invoke = invoke;
 
     import { appState } from '../lib/state.js';
     import Nav from '../ui/Nav.svelte';
     import Link from '../ui/Link.svelte';
+    import Setting from '../ui/Setting.svelte';
     import ErrorAlert from '../ui/ErrorAlert.svelte';
-    // import Setting from '../ui/settings/Setting.svelte';
-    import { Setting, ToggleSetting, NumericSetting } from '../ui/settings';
 
     async function save() {
+        try {
             await invoke('save_config', {config: $appState.config});
         }
+        catch (e) {
+
+        }
+    }
 </script>
 
 
@@ -20,27 +25,41 @@
     <div class="mx-auto mt-3 max-w-md">
         <h2 class="text-2xl font-bold text-center">Settings</h2>
 
-        <ToggleSetting title="Start minimized" bind:value={$appState.config.start_minimized} on:update={save}>
+        <Setting title="Start minimized">
-            <svelte:fragment slot="description">
+            <input slot="input" type="checkbox" bind:checked="{$appState.config.start_minimized}" class="justify-self-end toggle toggle-success" />
-                Minimize to the system tray at startup.
+            <svelte:fragment slot="description">Minimize to the system tray at startup.</svelte:fragment>
-            </svelte:fragment>
+        </Setting>
-        </ToggleSetting>
 
-        <NumericSetting title="Re-hide delay" bind:value={$appState.config.rehide_ms} min={0} unit="Milliseconds" on:update={save}>
+        <div class="divider"></div>
-            <svelte:fragment slot="description">
+        <div class="grid grid-cols-2 items-center">
+            <h3 class="text-lg font-bold">Start minimized</h3>
+            <input type="checkbox" bind:checked="{$appState.config.start_minimized}" class="justify-self-end toggle toggle-success" />
+        </div>
+        <p class="mt-3">Minimize to the system tray at startup.</p>
+
+        <div class="divider"></div>
+        <div class="grid grid-cols-2 items-center">
+            <h3 class="text-lg font-bold">Re-hide delay</h3>
+            <div class="justify-self-end">
+                <span class="mr-2">(Milliseconds)</span>
+                <input type="text" bind:value="{$appState.config.rehide_ms}" class="input input-sm input-bordered text-right max-w-[4rem]" />
+            </div>
+        </div>
+        <p class="mt-3">
             How long to wait after a request is approved/denied before minimizing
             the window to tray. Only applicable if the window was minimized
             to tray before the request was received.
-            </svelte:fragment>
+        </p>
-        </NumericSetting>
 
-        <Setting title="Update credentials">
+        <div class="divider"></div>
-            <Link slot="input" target="EnterCredentials">
+        <div class="grid grid-cols-2 items-center">
+            <h3 class="text-lg font-bold">Update credentials</h3>
+            <div class="justify-self-end">
+                <Link target="EnterCredentials">
                     <button class="btn btn-sm btn-primary">Update</button>
                 </Link>
-            <svelte:fragment slot="description">
+            </div>
-                Update or re-enter your encrypted credentials.
+        </div>
-            </svelte:fragment>
+        <p class="mt-3">Update or re-enter your encrypted credentials.</p>
-        </Setting>
     </div>
 {/await}