settings page

src/ui/ErrorAlert.svelte

@@ -2,6 +2,8 @@
     import { onMount } from 'svelte';
     import { slide } from 'svelte/transition';
 
+    let extraClasses;
+    export {extraClasses as class};
     export let slideDuration = 150;
     let animationClass = "";
 
@@ -49,7 +51,7 @@
 </style>
 
 
-<div in:slide="{{duration: slideDuration}}" class="alert alert-error shadow-lg {animationClass}">
+<div in:slide="{{duration: slideDuration}}" class="alert alert-error shadow-lg {animationClass} {extraClasses}">
     <div>
         <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
         <span>

src/ui/Link.svelte

@@ -1,7 +1,5 @@
 <script>
-    import { onMount } from 'svelte';
-
-    import { navigate } from '../lib/routing.js';
+    import { navigate, currentView } from '../lib/routing.js';
 
     export let target;
     export let hotkey = null;
@@ -28,8 +26,12 @@
         if (alt && !event.altKey) return;
         if (shift && !event.shiftKey) return;
 
-        if (event.code === hotkey) click();
-        if (hotkey === 'Enter' && event.code === 'NumpadEnter') click();
+        if (event.code === hotkey) {
+            click();
+        }
+        else if (hotkey === 'Enter' && event.code === 'NumpadEnter') {
+            click();
+        }
     }
 </script>
 

src/ui/settings/NumericSetting.svelte

@@ -0,0 +1,62 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+
+    import Setting from './Setting.svelte';
+
+    export let title;
+    export let value;
+    export let unit = '';
+    export let min = null;
+    export let max = null;
+    export let decimal = false;
+
+    const dispatch = createEventDispatcher();
+    let error = null;
+    function validate(event) {
+        let v = event.target.value;
+
+        if (v === '') {
+            error = null;
+            return;
+        }
+
+        let num = parseFloat(v);
+        if (Number.isNaN(num)) {
+            error = `"${v}" is not a number`;
+        }
+        else if (num % 1 !== 0 && !decimal) {
+            error = `${num} is not a whole number`;
+        }
+        else if (min && num < min) {
+            error = `Too low (minimum ${min})`;
+        }
+        else if (max && num > max) {
+            error = `Too large (maximum ${max})`
+        }
+        else {
+            error = null;
+            value = num;
+            dispatch('update', {value})
+        }
+    }
+</script>
+
+
+<Setting {title} {error}>
+    <div slot="input">
+        {#if unit}
+            <span class="mr-2">{unit}:</span>
+        {/if}
+        <div class="tooltip tooltip-error" class:tooltip-open={error !== null} data-tip={error}>
+            <input 
+                type="text" 
+                class="input input-sm input-bordered text-right max-w-[4rem]" 
+                class:input-error={error} 
+                value={value} 
+                on:input="{validate}"
+            />
+        </div>
+    </div>
+
+    <slot name="description" slot="description"></slot>
+</Setting>

src/ui/settings/Setting.svelte

@@ -0,0 +1,18 @@
+<script>
+    import { slide } from 'svelte/transition';
+    import ErrorAlert from '../ErrorAlert.svelte';
+
+    export let title;
+    export let error = null;
+</script>
+
+
+<div class="divider"></div>
+<div class="flex justify-between">
+    <h3 class="text-lg font-bold">{title}</h3>
+    <slot name="input"></slot>
+</div>
+
+<p class="mt-3">
+    <slot name="description"></slot>
+</p>

src/ui/settings/ToggleSetting.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="Start minimized">
+    <input 
+        slot="input" 
+        type="checkbox" 
+        class="toggle toggle-success"
+        bind:checked={value}
+        on:change={e => dispatch('update', {value: e.target.checked})}
+    />
+    <slot name="description" slot="description"></slot>
+</Setting>

src/ui/settings/index.js

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