make keybinds configurable

src/ui/settings/FileSetting.svelte

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

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

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

src/ui/settings/Setting.svelte

@@ -3,20 +3,20 @@
     import ErrorAlert from '../ErrorAlert.svelte';
 
     export let title;
-    export let divider = true;
 </script>
 
 
-{#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>
+<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

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

src/ui/settings/ToggleSetting.svelte

@@ -4,14 +4,13 @@
     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} {divider}>
+<Setting {title}>
     <input 
         slot="input" 
         type="checkbox"