make terminal emulator configurable

src/ui/settings/FileSetting.svelte

@@ -0,0 +1,28 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    import { open } from '@tauri-apps/api/dialog';
+    import Setting from './Setting.svelte';
+
+    export let title;
+    export let divider = true;
+    export let value;
+
+    const dispatch = createEventDispatcher();
+</script>
+
+
+<Setting {title} {divider}>
+    <div slot="input">
+        <input
+            type="text"
+            class="input input-sm input-bordered grow text-right"
+            bind:value
+            on:change={() => dispatch('update', {value})}
+        >
+        <button 
+            class="btn btn-sm btn-primary"
+            on:click={async () => value = await open()}
+        >Browse</button>
+    </div>
+    <slot name="description" slot="description"></slot>
+</Setting>

src/ui/settings/NumericSetting.svelte

@@ -4,6 +4,7 @@
     import Setting from './Setting.svelte';
 
     export let title;
+    export let divider = true;
     export let value;
     export let unit = '';
     export let min = null;
@@ -59,7 +60,7 @@
 </script>
 
 
-<Setting {title}>
+<Setting {title} {divider}>
     <div slot="input">
         {#if unit}
             <span class="mr-2">{unit}:</span>

src/ui/settings/Setting.svelte

@@ -3,12 +3,15 @@
     import ErrorAlert from '../ErrorAlert.svelte';
 
     export let title;
+    export let divider = true;
 </script>
 
 
-<div class="divider"></div>
-<div class="flex justify-between">
-    <h3 class="text-lg font-bold">{title}</h3>
+{#if divider}
+    <div class="divider"></div>
+{/if}
+<div class="flex flex-wrap justify-between gap-y-4">
+    <h3 class="text-lg font-bold shrink-0">{title}</h3>
     <slot name="input"></slot>
 </div>
 

src/ui/settings/TextSetting.svelte

@@ -0,0 +1,23 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    import Setting from './Setting.svelte';
+
+    export let title;
+    export let divider = true;
+    export let value;
+
+    const dispatch = createEventDispatcher();
+</script>
+
+
+<Setting {title} {divider}>
+    <div slot="input">
+        <input
+            type="text"
+            class="input input-sm input-bordered grow text-right"
+            bind:value
+            on:change={() => dispatch('update', {value})}
+        >
+    </div>
+    <slot name="description" slot="description"></slot>
+</Setting>

src/ui/settings/ToggleSetting.svelte

@@ -4,13 +4,14 @@
     import Setting from './Setting.svelte';
 
     export let title;
+    export let divider = true; // passed through to Setting
     export let value;
 
     const dispatch = createEventDispatcher();
 </script>
 
 
-<Setting {title}>
+<Setting {title} {divider}>
     <input 
         slot="input" 
         type="checkbox" 

src/ui/settings/index.js

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

src/views/Settings.svelte

@@ -6,7 +6,7 @@
     import Nav from '../ui/Nav.svelte';
     import Link from '../ui/Link.svelte';
     import ErrorAlert from '../ui/ErrorAlert.svelte';
-    import { Setting, ToggleSetting, NumericSetting } from '../ui/settings';
+    import { Setting, ToggleSetting, NumericSetting, FileSetting, TextSetting } from '../ui/settings';
 
     import { fly } from 'svelte/transition';
     import { backInOut } from 'svelte/easing';
@@ -25,18 +25,25 @@
 
     let osType = '';
     type().then(t => osType = t);
+
+    console.log($appState.config.terminal);
+    window.term = $appState.config.terminal;
 </script>
 
 
 <Nav>
-    <h2 slot="title" class="text-2xl font-bold">Settings</h2>
+    <h1 slot="title" class="text-2xl font-bold">Settings</h1>
 </Nav>
 
 {#await invoke('get_config') then config}
-    <div class="max-w-md mx-auto mt-1.5 p-4">
+    <div class="max-w-lg mx-auto mt-1.5 p-4">
         <!-- <h2 class="text-2xl font-bold text-center">Settings</h2> -->
 
-        <ToggleSetting title="Start on login" bind:value={$appState.config.start_on_login} on:update={save}>
+        <div class="divider mt-0 mb-8">
+            <h2 class="text-xl font-bold">General</h2>
+        </div>
+        
+        <ToggleSetting title="Start on login" divider={false} 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>
@@ -76,6 +83,21 @@
                 Update or re-enter your encrypted credentials.
             </svelte:fragment>
         </Setting>
+
+        <div class="divider mt-10 mb-8">
+            <h2 class="text-xl font-bold">Terminal</h2>
+        </div>
+
+        <FileSetting
+            title="Emulator"
+            divider={false}
+            bind:value={$appState.config.terminal.exec}
+            on:update={save}
+        >
+            <svelte:fragment slot="description">
+                Choose your preferred terminal emulator (e.g. <code>gnome-terminal</code>, <code>wt.exe</code>.) May be an absolute path or an executable discoverable on <code>$PATH</code>.
+            </svelte:fragment>
+        </FileSetting>
     </div>
 {/await}