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';