use save dialog for settings instead of autosaving

src-tauri/src/main.rs

@@ -18,6 +18,7 @@ fn main() {
         },
         Some(("get", m)) => cli::get(m),
         Some(("exec", m)) => cli::exec(m),
+        Some(("shortcut", m)) => cli::invoke_shortcut(m),
         _ => unreachable!(),
     };
 

src-tauri/src/server/server_win.rs

@@ -6,12 +6,11 @@ use tokio::{
     sync::oneshot,
 };
 
-#[cfg(windows)]
 use windows::Win32:: {
     Foundation::HANDLE,
     System::Pipes::GetNamedPipeClientProcessId,
 };
-#[cfg(windows)]
+
 use std::os::windows::io::AsRawHandle;
 
 use tauri::async_runtime as rt;

src/ui/settings/NumericSetting.svelte

@@ -10,15 +10,21 @@
     export let min = null;
     export let max = null;
     export let decimal = false;
+    export let debounceInterval = 0;
 
     const dispatch = createEventDispatcher();
 
     $: localValue = value.toString();
     let lastInputTime = null;
     function debounce(event) {
-        lastInputTime = Date.now();
         localValue = localValue.replace(/[^-0-9.]/g, '');
 
+        if (debounceInterval === 0) {
+            updateValue(localValue);
+            return;
+        }
+
+        lastInputTime = Date.now();
         const eventTime = lastInputTime;
         const pendingValue = localValue;
         window.setTimeout(
@@ -28,7 +34,7 @@
                     updateValue(pendingValue);
                 }
             },
-            500
+            debounceInterval,
         )
     }
 

src/views/Settings.svelte

@@ -14,15 +14,19 @@
     import { backInOut } from 'svelte/easing';
 
 
+    // make an independent copy so it can differ from the main config object
+    let config = JSON.parse(JSON.stringify($appState.config));
+    $: configModified = JSON.stringify(config) !== JSON.stringify($appState.config);
+
     let error = null;
     async function save() {
         console.log('updating config');
         try {
-            await invoke('save_config', {config: $appState.config});
+            await invoke('save_config', {config});
+            $appState.config = await invoke('get_config');
         }
         catch (e) {
             error = e;
-            $appState.config = await invoke('get_config');
         }
     }
 
@@ -35,62 +39,60 @@
     <h1 slot="title" class="text-2xl font-bold">Settings</h1>
 </Nav>
 
-{#await invoke('get_config') then config}
-    <div class="max-w-lg mx-auto mt-1.5 p-4 space-y-16">
-        <SettingsGroup name="General">            
-            <ToggleSetting title="Start on login" bind:value={$appState.config.start_on_login} on:update={save}>
-                <svelte:fragment slot="description">
-                    Start Creddy when you log in to your computer.
-                </svelte:fragment>
-            </ToggleSetting>
+<div class="max-w-lg mx-auto mt-1.5 mb-24 p-4 space-y-16">
+    <SettingsGroup name="General">            
+        <ToggleSetting title="Start on login" bind:value={config.start_on_login}>
+            <svelte:fragment slot="description">
+                Start Creddy when you log in to your computer.
+            </svelte:fragment>
+        </ToggleSetting>
 
-            <ToggleSetting title="Start minimized" bind:value={$appState.config.start_minimized} on:update={save}>
-                <svelte:fragment slot="description">
-                    Minimize to the system tray at startup.
-                </svelte:fragment>
-            </ToggleSetting>
+        <ToggleSetting title="Start minimized" bind:value={config.start_minimized}>
+            <svelte:fragment slot="description">
+                Minimize to the system tray at startup.
+            </svelte:fragment>
+        </ToggleSetting>
 
-            <NumericSetting title="Re-hide delay" bind:value={$appState.config.rehide_ms} min={0} unit="Milliseconds" on:update={save}>
-                <svelte:fragment slot="description">
-                    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>
-            </NumericSetting>
+        <NumericSetting title="Re-hide delay" bind:value={config.rehide_ms} min={0} unit="Milliseconds">
+            <svelte:fragment slot="description">
+                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>
+        </NumericSetting>
 
-            <Setting title="Update credentials">
-                <Link slot="input" target="EnterCredentials">
-                    <button class="btn btn-sm btn-primary">Update</button>
-                </Link>
-                <svelte:fragment slot="description">
-                    Update or re-enter your encrypted credentials.
-                </svelte:fragment>
-            </Setting>
+        <Setting title="Update credentials">
+            <Link slot="input" target="EnterCredentials">
+                <button class="btn btn-sm btn-primary">Update</button>
+            </Link>
+            <svelte:fragment slot="description">
+                Update or re-enter your encrypted credentials.
+            </svelte:fragment>
+        </Setting>
 
-            <FileSetting
-                title="Terminal emulator"
-                bind:value={$appState.config.terminal.exec}
-                on:update={save}
-            >
-                <svelte:fragment slot="description">
-                    Choose your preferred terminal emulator (e.g. <code>gnome-terminal</code> or <code>wt.exe</code>.) May be an absolute path or an executable discoverable on <code>$PATH</code>.
-                </svelte:fragment>
-            </FileSetting>
-        </SettingsGroup>
+        <FileSetting
+            title="Terminal emulator"
+            bind:value={config.terminal.exec}
+        
+        >
+            <svelte:fragment slot="description">
+                Choose your preferred terminal emulator (e.g. <code>gnome-terminal</code> or <code>wt.exe</code>.) May be an absolute path or an executable discoverable on <code>$PATH</code>.
+            </svelte:fragment>
+        </FileSetting>
+    </SettingsGroup>
 
-        <SettingsGroup name="Hotkeys">
-            <div class="space-y-4">
-                <p>Click on a keybinding to modify it. Use the checkbox to enable or disable a keybinding entirely.</p>
+    <SettingsGroup name="Hotkeys">
+        <div class="space-y-4">
+            <p>Click on a keybinding to modify it. Use the checkbox to enable or disable a keybinding entirely.</p>
 
-                <div class="grid grid-cols-[auto_1fr_auto] gap-y-3 items-center">
-                    <Keybind description="Show Creddy" value={$appState.config.hotkeys.show_window} on:update={save} />
-                    <Keybind description="Launch terminal" value={$appState.config.hotkeys.launch_terminal} on:update={save} />
-                </div>
+            <div class="grid grid-cols-[auto_1fr_auto] gap-y-3 items-center">
+                <Keybind description="Show Creddy" bind:value={config.hotkeys.show_window} />
+                <Keybind description="Launch terminal" bind:value={config.hotkeys.launch_terminal} />
             </div>
-        </SettingsGroup>
+        </div>
+    </SettingsGroup>
 
-    </div>
-{/await}
+</div>
 
 {#if error}
     <div transition:fly={{y: 100, easing: backInOut, duration: 400}} class="toast">
@@ -104,4 +106,15 @@
             </div>
         </div>
     </div>
+{:else if configModified}
+    <div transition:fly={{y: 100, easing: backInOut, duration: 400}} class="toast">
+        <div class="alert shadow-lg no-animation">
+            <span>You have unsaved changes.</span>
+
+            <div>
+                <!-- <button class="btn btn-sm btn-ghost">Cancel</button> -->
+                <buton class="btn btn-sm btn-primary" on:click={save}>Save</buton>
+            </div>
+        </div>
+    </div>
 {/if}