Merge branch 'terminal'

src/ui/KeyCombo.svelte

@@ -0,0 +1,13 @@
+<script>
+    export let keys;
+</script>
+
+
+<div class="flex gap-x-[0.2em] items-center">
+    {#each keys as key, i}
+        {#if i > 0}
+            <span class="mt-[-0.1em]">+</span>
+        {/if}
+        <kbd class="normal-case px-1 py-0.5 rounded border border-neutral">{key}</kbd>
+    {/each}
+</div>

src/ui/settings/FileSetting.svelte

@@ -0,0 +1,27 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    import { open } from '@tauri-apps/api/dialog';
+    import Setting from './Setting.svelte';
+
+    export let title;
+    export let value;
+
+    const dispatch = createEventDispatcher();
+</script>
+
+
+<Setting {title}>
+    <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/Keybind.svelte

@@ -0,0 +1,61 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    import KeyCombo from '../KeyCombo.svelte';
+
+    export let description;
+    export let value;
+
+    const id = Math.random().toString().slice(2);
+    const dispatch = createEventDispatcher();
+    let listening = false;
+    
+    function listen() {
+        // don't re-listen if we already are
+        if (listening) return;
+
+        listening = true;
+        window.addEventListener('keyup', setKeybind, {once: true});
+        // setTimeout avoids reacting to the click event that we are currently processing
+        setTimeout(() => window.addEventListener('click', cancel, {once: true}), 0);
+    }
+
+    function setKeybind(event) {
+        console.log(event);
+        let keys = [];
+        if (event.ctrlKey) keys.push('ctrl');
+        if (event.altKey) keys.push('alt');
+        if (event.metaKey) keys.push('meta');
+        if (event.shiftKey) keys.push('shift');
+        keys.push(event.key);
+
+        value.keys = keys.join('+');
+        dispatch('update', {value});
+        listening = false;
+        window.removeEventListener('click', cancel, {once: true});
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    function cancel() {
+        listening = false;
+        window.removeEventListener('keyup', setKeybind, {once: true});
+    }
+</script>
+
+
+<input 
+    {id} 
+    type="checkbox"
+    class="checkbox checkbox-primary"
+    bind:checked={value.enabled}
+    on:change={() => dispatch('update', {value})}
+>
+<label for={id} class="cursor-pointer ml-4 text-lg">{description}</label>
+
+<button class="h-12 p-2 rounded border border-neutral cursor-pointer text-center" on:click={listen}>
+    {#if listening}
+        Click to cancel
+    {:else}
+        <KeyCombo keys={value.keys.split('+')} />
+    {/if}
+</button>

src/ui/settings/NumericSetting.svelte

@@ -5,6 +5,7 @@
 
     export let title;
     export let value;
+
     export let unit = '';
     export let min = null;
     export let max = null;

src/ui/settings/Setting.svelte

@@ -6,14 +6,17 @@
 </script>
 
 
-<div class="divider"></div>
-<div class="flex justify-between">
-    <h3 class="text-lg font-bold">{title}</h3>
-    <slot name="input"></slot>
-</div>
+<div>
+    <div class="flex flex-wrap justify-between gap-y-4">
+        <h3 class="text-lg font-bold shrink-0">{title}</h3>
+        {#if $$slots.input}
+            <slot name="input"></slot>
+        {/if}
+    </div>
 
-{#if $$slots.description}
-    <p class="mt-3">
-        <slot name="description"></slot>
-    </p>
-{/if}
+    {#if $$slots.description}
+        <p class="mt-3">
+            <slot name="description"></slot>
+        </p>
+    {/if}
+</div>

src/ui/settings/SettingsGroup.svelte

@@ -0,0 +1,14 @@
+<script>
+    export let name;
+</script>
+
+
+<div>
+    <div class="divider mt-0 mb-8">
+        <h2 class="text-xl font-bold">{name}</h2>
+    </div>
+
+    <div class="space-y-12">
+        <slot></slot>
+    </div>
+</div>

src/ui/settings/TextSetting.svelte

@@ -0,0 +1,22 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    import Setting from './Setting.svelte';
+
+    export let title;
+    export let value;
+
+    const dispatch = createEventDispatcher();
+</script>
+
+
+<Setting {title}>
+    <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/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';