feat: Initial commit

35 files changed, 1814 insertions, 0 deletions

diff --git a/code/app/src/components/alert.svelte b/code/app/src/components/alert.svelte
new file mode 100644
index 0000000..16d8340
--- /dev/null
+++ b/code/app/src/components/alert.svelte
@@ -0,0 +1,268 @@
+<script lang="ts">
+    import {random_string} from "$utilities/misc-helpers";
+    import {createEventDispatcher} from "svelte";
+    import {onMount} from "svelte";
+    import pwKey from "$actions/pwKey";
+    import {Temporal} from "temporal-polyfill";
+    import {ExclamationTriangleIcon, CheckCircleIcon, InformationCircleIcon, XCircleIcon, XMarkIcon} from "./icons";
+
+    const dispatch = createEventDispatcher();
+    const noCooldownSetting = "no-cooldown";
+
+    let iconComponent: any;
+    let colorClassPart = "";
+
+    /**
+     * An optional id for this alert, a default is set if not specified.
+     * This value is necessary for closeable cooldown to work.
+     */
+        // if no unique id is supplied, cooldown will not work between page loads.
+        // Therefore we are disabling it with noCooldownSetting in the fallback id.
+    export let id = "alert--" + noCooldownSetting + "--" + random_string(4);
+    /**
+     * The title to communicate, value is optional
+     */
+    export let title = "";
+    /**
+     * The message to communicate, value is optional
+     */
+    export let message = "";
+    /**
+     * Changes the alerts color and icon.
+     */
+    export let type: "info" | "success" | "warning" | "error" = "info";
+    /**
+     * If true the alert can be removed from the DOM by clicking on a X icon on the upper right hand courner
+     */
+    export let closeable = false;
+    /**
+     * The amount of seconds that should go by before this alert is shown again, only works when a unique id is set.
+     * Set to ~ if it should only be shown once per client (State stored in localestorage).
+     **/
+    export let closeableCooldown = "-1";
+    /**
+     * The text that is displayed on the right link
+     */
+    export let rightLinkText = "";
+    /**
+     * An array of list items displayed under the message or title
+     */
+    export let listItems: Array<string> = [];
+    /**
+     * An array of {id:string;text:string;color?:string}, where id is dispatched back as an svelte event with this syntax act$id (ex: on:actcancel).
+     * Text is the button text
+     * Color is the optional tailwind color to used, the value is used in classes like bg-$color-50.
+     */
+    export let actions: Array<{ id: string; text: string; color?: string }> = [];
+    /**
+     * This value is set on a plain anchor tag without any svelte routing,
+     * listen to the on:rightLinkClick if you want to intercept the click without navigating
+     */
+    export let rightLinkHref = "javascript:void(0)";
+    $: cooldownEnabled =
+        id.indexOf(noCooldownSetting) === -1 && closeable && (closeableCooldown === "~" || parseInt(closeableCooldown) > 0);
+    /**
+     * Sets this alerts visibility state, when this is false it is removed from the dom using an {#if} block.
+     */
+    export let visible = closeableCooldown === "~" || parseInt(closeableCooldown) > 0 ? false : true;
+
+    export let _pwKey: string | undefined = undefined;
+
+    const cooldownStorageKey = "lastseen--" + id;
+
+    $: switch (type) {
+        case "info": {
+            colorClassPart = "blue";
+            iconComponent = InformationCircleIcon;
+            break;
+        }
+        case "warning": {
+            colorClassPart = "yellow";
+            iconComponent = ExclamationTriangleIcon;
+            break;
+        }
+        case "error": {
+            colorClassPart = "red";
+            iconComponent = XCircleIcon;
+            break;
+        }
+        case "success": {
+            colorClassPart = "green";
+            iconComponent = CheckCircleIcon;
+            break;
+        }
+    }
+
+    function close() {
+        visible = false;
+        if (cooldownEnabled) {
+            console.log("Cooldown enabled for " + id + ", " + closeableCooldown === "~" ? "with an endless cooldown" : "");
+            localStorage.setItem(cooldownStorageKey, String(Temporal.Now.instant().epochSeconds));
+        }
+    }
+
+    function rightLinkClicked() {
+        dispatch("rightLinkCliked");
+    }
+
+    function actionClicked(name: string) {
+        dispatch("act" + name);
+    }
+
+    // Manages the state of the alert if cooldown is enabled
+    function run_cooldown() {
+        if (!cooldownEnabled) {
+            console.log("Alert cooldown is not enabled for " + id);
+            return;
+        }
+        if (!localStorage.getItem(cooldownStorageKey)) {
+            console.log("Alert " + id + " has not been seen yet, displaying");
+            visible = true;
+            return;
+        }
+        // if (!visible) {
+        //     console.log(
+        //         "Alert " + id + " is not visible, stopping cooldown change"
+        //     );
+        //     return;
+        // }
+        if (closeableCooldown === "~") {
+            console.log("Alert " + id + " has an infinite cooldown, hiding");
+            visible = false;
+            return;
+        }
+
+        const lastSeen = Temporal.Instant.fromEpochSeconds(parseInt(localStorage.getItem(cooldownStorageKey) ?? "-1"));
+        if (Temporal.Instant.compare(Temporal.Now.instant(), lastSeen.add({seconds: parseInt(closeableCooldown)})) === 1) {
+            console.log(
+                "Alert " +
+                id +
+                " has a cooldown of " +
+                closeableCooldown +
+                " and was last seen " +
+                lastSeen.toLocaleString() +
+                " making it due for a showing",
+            );
+            visible = true;
+        } else {
+            visible = false;
+        }
+    }
+
+    onMount(() => {
+        if (cooldownEnabled) {
+            run_cooldown();
+        }
+
+        if (closeable && closeableCooldown && id.indexOf(noCooldownSetting) !== -1) {
+            // TODO: This prints twice before shutting up as it should, in this example look at the only alert with closeableCooldown in alertsbook.
+            // Looks like svelte mounts three times and that my id is only set on the third. Not sure it does at all after logging the id onMount.
+            console.error("Alert cooldown does not work without specifying a unique id, related id: " + id);
+        }
+    });
+</script>
+
+{#if visible}
+    <div class="rounded-md bg-{colorClassPart}-50 p-4 {$$restProps.class ?? ''}" use:pwKey={_pwKey}>
+        <div class="flex">
+            <div class="flex-shrink-0">
+                <svelte:component this={iconComponent} class="text-{colorClassPart}-400"/>
+            </div>
+            <div class="ml-3 text-sm w-full">
+                {#if !rightLinkText}
+                    {#if title}
+                        <h3 class="font-bold text-{colorClassPart}-800">
+                            {title}
+                        </h3>
+                    {/if}
+                    {#if message}
+                        <div class="{title ? 'mt-2' : ''} text-{colorClassPart}-700 justify-start">
+                            <p>
+                                {@html message}
+                            </p>
+                        </div>
+                    {/if}
+                    {#if listItems?.length ?? 0}
+                        <ul class="list-disc space-y-1 pl-5 text-{colorClassPart}-700">
+                            {#each listItems as listItem}
+                                <li>{listItem}</li>
+                            {/each}
+                        </ul>
+                    {/if}
+                {:else}
+                    <div class="flex-1 md:flex md:justify-between">
+                        <div>
+                            {#if title}
+                                <h3 class="font-medium text-{colorClassPart}-800">
+                                    {title}
+                                </h3>
+                            {/if}
+                            {#if message}
+                                <div class="{title ? 'mt-2' : ''} text-{colorClassPart}-700 justify-start">
+                                    <p>
+                                        {@html message}
+                                    </p>
+                                </div>
+                            {/if}
+                            {#if listItems?.length ?? 0}
+                                <ul class="list-disc space-y-1 pl-5 text-{colorClassPart}-700">
+                                    {#each listItems as listItem}
+                                        <li>{listItem}</li>
+                                    {/each}
+                                </ul>
+                            {/if}
+                        </div>
+                        <p class="mt-3 text-sm md:mt-0 md:ml-6 flex items-end">
+                            <a
+                                    href={rightLinkHref}
+                                    on:click={() => rightLinkClicked()}
+                                    class="whitespace-nowrap font-medium text-{colorClassPart}-700 hover:text-{colorClassPart}-600"
+                            >
+                                {rightLinkText}
+                                <span aria-hidden="true"> &rarr;</span>
+                            </a>
+                        </p>
+                    </div>
+                {/if}
+                {#if actions?.length ?? 0}
+                    <div class="ml-2 mt-4">
+                        <div class="-mx-2 -my-1.5 flex gap-1">
+                            {#each actions as action}
+                                {@const color = action?.color ?? colorClassPart}
+                                <button
+                                        type="button"
+                                        on:click={() => actionClicked(action.id)}
+                                        class="rounded-md
+                            bg-{color}-50
+                            px-2 py-1.5 text-sm font-medium
+                            text-{color}-800
+                            hover:bg-{color}-100
+                            focus:outline-none focus:ring-2
+                            focus:ring-{color}-600
+                            focus:ring-offset-2
+                            focus:ring-offset-{color}-50"
+                                >
+                                    {action.text}
+                                </button>
+                            {/each}
+                        </div>
+                    </div>
+                {/if}
+            </div>
+            {#if closeable}
+                <div class="ml-auto pl-3">
+                    <div class="-mx-1.5 -my-1.5">
+                        <button
+                                type="button"
+                                on:click={() => close()}
+                                class="inline-flex rounded-md bg-{colorClassPart}-50 p-1.5 text-{colorClassPart}-500 hover:bg-{colorClassPart}-100 focus:outline-none focus:ring-2 focus:ring-{colorClassPart}-600 focus:ring-offset-2 focus:ring-offset-{colorClassPart}-50"
+                        >
+                            <span class="sr-only">Dismiss</span>
+                            <XMarkIcon/>
+                        </button>
+                    </div>
+                </div>
+            {/if}
+        </div>
+    </div>
+{/if}
diff --git a/code/app/src/components/badge.svelte b/code/app/src/components/badge.svelte
new file mode 100644
index 0000000..f967c2d
--- /dev/null
+++ b/code/app/src/components/badge.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte";
+
+    export let id: string | undefined = undefined;
+    export let type: "default" | "red" | "yellow" | "green" | "blue" | "tame" = "default";
+    export let text: string;
+    export let size: "large" | "default" = "default";
+    export let withDot: boolean = false;
+    export let removable: boolean = false;
+    export let uppercase: boolean = false;
+    export let tabindex: string | undefined = undefined;
+
+    let colorName = "gray";
+    let sizeClass = "rounded px-2 py-0.5 text-xs";
+    let dotSizeClass = "mr-1.5 h-2 w-2";
+
+    const dispatch = createEventDispatcher();
+
+    function handle_remove(event) {
+        dispatch("remove", { event, id, text });
+    }
+
+    $: switch (type) {
+        case "red":
+            colorName = "red";
+            break;
+        case "yellow":
+            colorName = "yellow";
+            break;
+        case "blue":
+            colorName = "blue";
+            break;
+        case "green":
+            colorName = "teal";
+            break;
+        case "default":
+        case "tame":
+        default:
+            colorName = "gray";
+            break;
+    }
+
+    $: switch (size) {
+        case "large":
+            sizeClass = "rounded-md px-2.5 py-0.5 text-sm";
+            dotSizeClass = "-ml-0.5 mr-1.5 h-2 w-2";
+            break;
+        case "default":
+        default:
+            sizeClass = "rounded px-2 py-0.5 text-xs";
+            dotSizeClass = "mr-1.5 h-2 w-2";
+            break;
+    }
+</script>
+
+<span class="inline-flex items-center font-medium {uppercase ? 'uppercase' : ''} bg-{colorName}-100 text-{colorName}-800 {sizeClass}" {id}>
+    {#if withDot}
+        <svg class="{dotSizeClass} text-{colorName}-400" fill="currentColor" viewBox="0 0 8 8">
+            <circle cx="4" cy="4" r="3" />
+        </svg>
+    {/if}
+    {text}
+    {#if removable}
+        <button
+            on:click={handle_remove}
+            tabindex={parseInt(tabindex)}
+            type="button"
+            class="ml-0.5 inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full text-{colorName}-400 hover:bg-{colorName}-200 hover:text-{colorName}-500 focus:bg-{colorName}-500 focus:outline-none"
+        >
+            <span class="sr-only">Remove badge</span>
+            <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
+                <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
+            </svg>
+        </button>
+    {/if}
+</span>
diff --git a/code/app/src/components/button.svelte b/code/app/src/components/button.svelte
new file mode 100644
index 0000000..1d6ac4b
--- /dev/null
+++ b/code/app/src/components/button.svelte
@@ -0,0 +1,116 @@
+<script context="module" lang="ts">
+    export type ButtonKind = "primary" | "secondary" | "white" | "reset";
+    export type ButtonSize = "sm" | "lg" | "md" | "xl";
+</script>
+
+<script lang="ts">
+    import pwKey from "$actions/pwKey";
+    import { SpinnerIcon } from "./icons";
+
+    export let kind = "primary" as ButtonKind;
+    export let size = "md" as ButtonSize;
+    export let type: "button" | "submit" | "reset" = "button";
+    export let id: string | undefined = undefined;
+    export let tabindex: string | undefined = undefined;
+    export let style: string | undefined = undefined;
+    export let title: string | undefined = undefined;
+    export let disabled: boolean | null = false;
+    export let href: string | undefined = undefined;
+    export let text: string;
+    export let loading = false;
+    export let fullWidth = false;
+    export let _pwKey: string | undefined = undefined;
+
+    let sizeClasses = "";
+    let kindClasses = "";
+    let spinnerTextClasses = "";
+    let spinnerMarginClasses = "";
+
+    $: shared_props = {
+        type: type,
+        id: id || null,
+        title: title || null,
+        disabled: disabled || loading || null,
+        tabindex: tabindex || null,
+        style: style || null,
+    } as any;
+
+    $: switch (size) {
+        case "sm":
+            sizeClasses = "px-2.5 py-1.5 text-xs";
+            spinnerMarginClasses = "mr-2";
+            break;
+        case "md":
+            sizeClasses = "px-3 py-2 text-sm";
+            spinnerMarginClasses = "mr-2";
+            break;
+        case "lg":
+            sizeClasses = "px-3 py-2 text-lg";
+            spinnerMarginClasses = "mr-2";
+            break;
+        case "xl":
+            sizeClasses = "px-6 py-3 text-xl";
+            spinnerMarginClasses = "mr-2";
+            break;
+    }
+
+    $: switch (kind) {
+        case "secondary":
+            kindClasses = "border-transparent text-teal-800 bg-teal-100 hover:bg-teal-200 focus:ring-teal-500";
+            spinnerTextClasses = "teal-800";
+            break;
+        case "primary":
+            kindClasses = "border-transparent text-teal-900 bg-teal-300 hover:bg-teal-400 focus:ring-teal-500";
+            spinnerTextClasses = "text-teal-900";
+            break;
+        case "white":
+            kindClasses = "border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-gray-400";
+            spinnerTextClasses = "text-gray-700";
+            break;
+        case "reset":
+            kindClasses = "reset outline-none ring-0 focus:ring-0 focus-visible:ring-0";
+            break;
+    }
+</script>
+
+{#if href}
+    <a
+        use:pwKey={_pwKey}
+        {...shared_props}
+        {href}
+        class="{sizeClasses} {kindClasses} {loading ? 'disabled:' : ''} {$$restProps.class ?? ''} {fullWidth
+            ? 'w-full justify-center'
+            : ''} disabled:cursor-not-allowed inline-flex items-center border font-bold rounded shadow-sm focus:outline-none focus:ring-2"
+    >
+        {#if loading}
+            <SpinnerIcon class={spinnerTextClasses + " " + spinnerMarginClasses} />
+        {/if}
+        {text}
+    </a>
+{:else}
+    <button
+        use:pwKey={_pwKey}
+        {...shared_props}
+        on:click
+        class="btn {sizeClasses} {kindClasses} {$$restProps.class ?? ''}
+        {fullWidth
+            ? 'w-full justify-center'
+            : ''} inline-flex items-center border font-bold rounded shadow-sm focus:outline-none focus:ring-2"
+    >
+        {#if loading}
+            <SpinnerIcon class={spinnerTextClasses + " " + spinnerMarginClasses} />
+        {/if}
+        {text}
+    </button>
+{/if}
+
+<style>
+    .reset {
+        border: 0px;
+        outline: none;
+    }
+
+    .reset:focus {
+        outline: none;
+    }
+</style>
diff --git a/code/app/src/components/checkbox.svelte b/code/app/src/components/checkbox.svelte
new file mode 100644
index 0000000..db72bee
--- /dev/null
+++ b/code/app/src/components/checkbox.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import pwKey from "$actions/pwKey";
+    import {random_string} from "$utilities/misc-helpers";
+
+    export let label: string;
+    export let id: string | undefined = "input__" + random_string(4);
+    export let name: string | undefined = undefined;
+    export let disabled: boolean | null = null;
+    export let checked: boolean;
+    export let required: boolean | null = null;
+    export let _pwKey: string | undefined = undefined;
+</script>
+
+<div class="flex items-center">
+    <input
+            {name}
+            use:pwKey={_pwKey}
+            {disabled}
+            {id}
+            {required}
+            type="checkbox"
+            bind:checked
+            class="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded"
+    />
+    <label for={id} class="ml-2 block text-sm text-gray-900">
+        {@html required ? "<span class='text-red-500'>*</span>" : ""}
+        {label}
+    </label>
+</div>
diff --git a/code/app/src/components/combobox.svelte b/code/app/src/components/combobox.svelte
new file mode 100644
index 0000000..396c18a
--- /dev/null
+++ b/code/app/src/components/combobox.svelte
@@ -0,0 +1,451 @@
+<script lang="ts" context="module">
+    export type ComboboxOption = {
+        id: string;
+        name: string;
+        selected?: boolean;
+    };
+</script>
+
+<script lang="ts">
+    import { CheckCircleIcon, ChevronUpDownIcon, XIcon } from "./icons";
+    import { random_string } from "$utilities/misc-helpers";
+    import { go, highlight } from "fuzzysort";
+    import Badge from "./badge.svelte";
+    import Button from "./button.svelte";
+    import LL from "$i18n/i18n-svelte";
+    import { element_has_focus } from "$utilities/dom-helpers";
+
+    export let id = "combobox-" + random_string(3);
+    export let label: string | undefined = undefined;
+    export let errorText: string | undefined = undefined;
+    export let disabled: boolean | undefined = undefined;
+    export let required: boolean | undefined = undefined;
+    export let maxlength: number | undefined = undefined;
+    export let placeholder: string = $LL.combobox.search();
+    export let options: Array<ComboboxOption> | undefined = [];
+    export let createable = false;
+    export let loading = false;
+    export let multiple = false;
+    export let noResultsText: string = $LL.combobox.noRecordsFound();
+    export let on_create_async = async ({ name: string }) => {};
+
+    export const reset = () => methods.reset();
+    export const select = (id: string) => methods.select_entry(id);
+    export const deselect = (id: string) => methods.deselect_entry(id);
+
+    const INTERNAL_ID = "INTERNAL__" + id;
+
+    let optionsListId = id + "--options";
+    let searchInputNode;
+    let searchResults: Array<any> = [];
+    let searchValue = "";
+    let showCreationHint = false;
+    let showDropdown = false;
+    let inputHasFocus = false;
+    let lastKeydownCode = "";
+    let mouseIsOverDropdown = false;
+    let mouseIsOverComponent = false;
+
+    $: ariaErrorDescribedBy = id + "__" + "error";
+    $: colorName = errorText ? "red" : "teal";
+    $: attributes = {
+        "aria-describedby": errorText ? ariaErrorDescribedBy : null,
+        "aria-invalid": errorText ? "true" : null,
+        disabled: disabled || null,
+        required: required || null,
+        maxlength: maxlength || null,
+        id: id || null,
+        placeholder: placeholder || null,
+    } as any;
+    $: hasSelection = options.some((c) => c.selected === true);
+    $: if (searchValue.trim()) {
+        showCreationHint = createable && options.every((c) => search.normalise_value(c.name) !== search.normalise_value(searchValue));
+    } else {
+        showCreationHint = false;
+        options = methods.get_sorted_array(options);
+    }
+
+    function on_select(event) {
+        const node = event.target.closest("[data-id]");
+        if (!node) return;
+        methods.select_entry(node.dataset.id);
+    }
+
+    const search = {
+        normalise_value(value: string): string {
+            if (!value) {
+                return "";
+            }
+            return value.trim().toLowerCase();
+        },
+        do() {
+            const query = search.normalise_value(searchValue);
+
+            if (!query.trim()) {
+                searchResults = [];
+                return;
+            }
+
+            // @ts-ignore
+            searchResults = go(query, options, {
+                limit: 15,
+                allowTypo: true,
+                threshold: -10000,
+                key: "name",
+            });
+            showDropdown = true;
+        },
+        on_input_focus() {
+            showDropdown = true;
+            inputHasFocus = true;
+        },
+        on_input_click() {
+            showDropdown = true;
+            inputHasFocus = true;
+        },
+        on_input_focusout() {
+            inputHasFocus = false;
+            if (lastKeydownCode !== "Tab" && (mouseIsOverDropdown || lastKeydownCode === "ArrowDown")) {
+                return;
+            }
+            const selected = options.find((c) => c.selected === true);
+            if (selected && !multiple) {
+                searchValue = selected.name;
+            }
+            document.querySelector("#" + INTERNAL_ID + " ul li.focus")?.classList.remove("focus");
+            showDropdown = false;
+        },
+        on_input_wrapper_focus(event) {
+            if (event.code && event.code !== "Space" && event.code !== "Enter") return;
+            if (!element_has_focus(searchInputNode)) searchInputNode.focus();
+            showDropdown = true;
+        },
+    };
+
+    const methods = {
+        reset(focus_input = false) {
+            searchValue = "";
+            const copy = options;
+            for (const entry of copy) {
+                entry.selected = false;
+            }
+            options = methods.get_sorted_array(copy);
+            if (focus_input) {
+                searchInputNode?.focus();
+                showDropdown = true;
+            } else {
+                showDropdown = false;
+            }
+        },
+        async create_entry(name: string) {
+            if (!name || !createable || loading) {
+                console.log("Not sending creation event due to failed preconditions", { name, createable, loading });
+                return;
+            }
+            try {
+                await on_create_async({ name });
+                searchValue = "";
+                loading = false;
+            } catch (e) {
+                console.error(e);
+            }
+        },
+        select_entry(entryId: string) {
+            if (!entryId || loading) {
+                console.log("Not selecting entry due to failed preconditions", {
+                    entryId,
+                    loading,
+                });
+                return;
+            }
+
+            const copy = options;
+            for (const entry of options) {
+                if (entry.id === entryId) {
+                    entry.selected = true;
+                    if (multiple) {
+                        searchValue = "";
+                    } else {
+                        searchValue = entry.name;
+                    }
+                } else if (!multiple) {
+                    entry.selected = false;
+                }
+            }
+            options = methods.get_sorted_array(copy);
+            searchInputNode?.focus();
+            searchResults = [];
+        },
+        deselect_entry(entryId: string) {
+            if (!entryId || loading) {
+                console.log("Not deselecting entry due to failed preconditions", {
+                    entryId,
+                    loading,
+                });
+                return;
+            }
+            console.log("Deselecting entry", entryId);
+
+            const copy = options;
+
+            for (const entry of copy) {
+                if (entry.id === entryId) {
+                    entry.selected = false;
+                }
+            }
+
+            options = methods.get_sorted_array(copy);
+            searchInputNode?.focus();
+        },
+        get_sorted_array(options: Array<ComboboxOption>): Array<ComboboxOption> {
+            if (!options) {
+                return;
+            }
+            if (options.length < 1) {
+                return [];
+            }
+            if (searchValue) {
+                return options;
+            }
+
+            return options.sort((a, b) => search.normalise_value(a.name).localeCompare(search.normalise_value(b.name)));
+        },
+    };
+
+    const windowEvents = {
+        on_mousemove(event: any) {
+            if (!event.target) return;
+            mouseIsOverDropdown = event.target?.closest("#" + INTERNAL_ID + " .tongue") != null ?? false;
+            mouseIsOverComponent = event.target?.closest("#" + INTERNAL_ID) != null ?? false;
+        },
+        on_click() {
+            if (showDropdown && !mouseIsOverDropdown && !mouseIsOverComponent) {
+                showDropdown = false;
+            }
+        },
+        on_keydown(event: any) {
+            lastKeydownCode = event.code;
+            const enterPressed = event.code === "Enter";
+            const backspacePressed = event.code === "Backspace";
+            const arrowUpPressed = event.code === "ArrowUp";
+            const spacePressed = event.code === "Space";
+            const arrowDownPressed = event.code === "ArrowDown";
+            const searchInputHasFocus = element_has_focus(searchInputNode);
+            const focusedEntry = document.querySelector("#" + INTERNAL_ID + " ul li.focus") as HTMLLIElement;
+
+            if (showDropdown && (enterPressed || arrowDownPressed || arrowUpPressed)) {
+                event.preventDefault();
+            }
+
+            if (searchInputHasFocus && backspacePressed && !searchValue && options.length > 0) {
+                if (options.filter((c) => c.selected === true).at(-1)?.id ?? false) {
+                    methods.deselect_entry(options.filter((c) => c.selected === true).at(-1)?.id ?? "");
+                }
+                return;
+            }
+
+            if (searchInputHasFocus && enterPressed && showCreationHint) {
+                methods.create_entry(searchValue.trim());
+                return;
+            }
+
+            if (searchInputHasFocus && !focusedEntry && arrowDownPressed) {
+                const firstEntry = document.querySelector("#" + INTERNAL_ID + " ul li:first-of-type");
+                if (firstEntry) {
+                    firstEntry.classList.add("focus");
+                    return;
+                }
+            }
+
+            if (focusedEntry && (arrowUpPressed || arrowDownPressed)) {
+                if (arrowDownPressed) {
+                    if (focusedEntry.nextElementSibling) {
+                        focusedEntry.nextElementSibling.classList.add("focus");
+                        focusedEntry.nextElementSibling.scrollIntoView(false);
+                    } else {
+                        const firstLIEl = document.querySelector("#" + INTERNAL_ID + " ul li:first-of-type");
+                        firstLIEl.classList.add("focus");
+                        firstLIEl.scrollIntoView(false);
+                    }
+                } else if (arrowUpPressed) {
+                    if (focusedEntry.previousElementSibling) {
+                        focusedEntry.previousElementSibling.classList.add("focus");
+                        focusedEntry.previousElementSibling.scrollIntoView(false);
+                    } else {
+                        const lastLIEl = document.querySelector("#" + INTERNAL_ID + " ul li:last-of-type");
+                        lastLIEl.classList.add("focus");
+                        lastLIEl.scrollIntoView(false);
+                    }
+                }
+                focusedEntry.classList.remove("focus");
+                return;
+            }
+
+            if (focusedEntry && (spacePressed || enterPressed)) {
+                methods.select_entry(focusedEntry.dataset.id);
+                return;
+            }
+
+            if (lastKeydownCode === "Tab" && !searchInputHasFocus) {
+                showDropdown = false;
+            }
+        },
+        on_touchend(event) {
+            windowEvents.on_mousemove(event);
+        },
+    };
+</script>
+
+<svelte:window
+    on:keydown={windowEvents.on_keydown}
+    on:mousemove={windowEvents.on_mousemove}
+    on:touchend={windowEvents.on_touchend}
+    on:click={windowEvents.on_click}
+/>
+
+<div id={INTERNAL_ID} class:cursor-wait={loading}>
+    {#if label}
+        <label for={id} class="block text-sm font-medium text-gray-700">
+            {label}
+            {@html required ? "<span class='text-red-500'>*</span>" : ""}
+        </label>
+    {/if}
+    <div class="relative {label ? 'mt-1' : ''}">
+        <div
+            on:click={search.on_input_wrapper_focus}
+            on:keypress={search.on_input_wrapper_focus}
+            class="cursor-text w-full flex rounded-md border bg-white py-2 pl-3 pr-12 sm:text-sm
+            {inputHasFocus ? `border-${colorName}-500 outline-none ring-1 ring-${colorName}-500` : 'shadow-sm border-gray-300'}"
+        >
+            {#if multiple === true && hasSelection}
+                <div class="flex gap-1 flex-wrap">
+                    {#each options.filter((c) => c.selected === true) as option}
+                        <Badge
+                            id={option.id}
+                            removable
+                            tabindex="-1"
+                            on:remove={(e) => methods.deselect_entry(e.detail.id)}
+                            text={option.name}
+                        />
+                    {/each}
+                </div>
+            {/if}
+            <div>
+                <input
+                    {...attributes}
+                    type="text"
+                    style="all: unset;"
+                    role="combobox"
+                    aria-controls={optionsListId}
+                    aria-expanded={showDropdown}
+                    bind:value={searchValue}
+                    bind:this={searchInputNode}
+                    on:input={() => search.do()}
+                    on:click={search.on_input_click}
+                    on:focus={search.on_input_focus}
+                    on:blur={search.on_input_focusout}
+                    autocomplete="off"
+                />
+                {#if hasSelection}
+                    <button
+                        type="button"
+                        on:click={() => reset()}
+                        title={$LL.reset()}
+                        tabindex="-1"
+                        class="text-gray-400 absolute cursor-pointer inset-y-0 right-0 flex items-center rounded-r-md px-2"
+                    >
+                        <XIcon />
+                    </button>
+                {:else}
+                    <span tabindex="-1" class="text-gray-400 absolute inset-y-0 right-0 flex items-center rounded-r-md px-2">
+                        <ChevronUpDownIcon />
+                    </span>
+                {/if}
+            </div>
+        </div>
+        {#if errorText}
+            <p class="mt-2 text-sm text-red-600" id={ariaErrorDescribedBy}>
+                {errorText}
+            </p>
+        {/if}
+        <div
+            class="tongue {showDropdown ? 'absolute' : 'hidden'}
+                z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white
+                text-base shadow-lg ring-1 ring-teal ring-opacity-5 focus:outline-none sm:text-sm"
+        >
+            <ul id={optionsListId} role="listbox" tabindex="-1">
+                {#if searchResults.length > 0}
+                    {#each searchResults.filter((c) => !c.selected) as result}
+                        <li
+                            class="item"
+                            data-id={result.obj.id}
+                            aria-selected={result.obj.selected}
+                            role="option"
+                            on:click={on_select}
+                            on:keypress={on_select}
+                            tabindex="-1"
+                        >
+                            {@html highlight(result, '<span class="font-bold">', "</span>")}
+                        </li>
+                    {/each}
+                {:else if options.length > 0}
+                    {#each options as option}
+                        <!--
+                            Combobox option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
+                            Active: "text-white bg-indigo-600", Not Active: "text-gray-900"
+                        -->
+                        <li
+                            class="item"
+                            aria-selected={option.selected}
+                            role="option"
+                            data-id={option.id}
+                            on:click={on_select}
+                            on:keypress={on_select}
+                            tabindex="-1"
+                        >
+                            <span class="block truncate {option.selected ? 'text-semibold' : ''}">{option.name}</span>
+                            {#if option.selected}
+                                <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-{colorName}-600">
+                                    <CheckCircleIcon />
+                                </span>
+                            {/if}
+                        </li>
+                    {/each}
+                {:else}
+                    <slot name="no-records">
+                        <p class="px-2">{noResultsText}</p>
+                        {#if createable && !searchValue}
+                            <p class="px-2 text-gray-500">{$LL.combobox.createRecordHelpText()}</p>
+                        {/if}
+                    </slot>
+                {/if}
+            </ul>
+            {#if showCreationHint}
+                <div class="sticky bottom-0 w-full bg-white">
+                    <Button
+                        text={$LL.combobox.createRecordButtonText(searchValue.trim())}
+                        title={$LL.combobox.createRecordButtonText(searchValue.trim())}
+                        {loading}
+                        kind="reset"
+                        type="button"
+                        on:click={() => methods.create_entry(searchValue.trim())}
+                    />
+                </div>
+            {/if}
+        </div>
+    </div>
+</div>
+
+<style lang="postcss">
+    .focus {
+        @apply text-white bg-teal-300;
+    }
+
+    .item {
+        @apply relative cursor-pointer select-none py-2 pl-3 pr-9 text-gray-900;
+    }
+
+    .item[aria-selected="true"] {
+        @apply bg-teal-200;
+    }
+</style>
diff --git a/code/app/src/components/icons/adjustments.svelte b/code/app/src/components/icons/adjustments.svelte
new file mode 100644
index 0000000..83bda27
--- /dev/null
+++ b/code/app/src/components/icons/adjustments.svelte
@@ -0,0 +1,14 @@
+<svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-6 w-6 {$$restProps.class ?? ''}"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2"
+>
+      <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
+      />
+</svg>
diff --git a/code/app/src/components/icons/bars-3-center-left.svelte b/code/app/src/components/icons/bars-3-center-left.svelte
new file mode 100644
index 0000000..785ece3
--- /dev/null
+++ b/code/app/src/components/icons/bars-3-center-left.svelte
@@ -0,0 +1,15 @@
+<svg
+    class="h-6 w-6 {$$restProps.class ?? ''}"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    aria-hidden="true"
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M3.75 6.75h16.5M3.75 12H12m-8.25 5.25h16.5"
+    />
+</svg>
diff --git a/code/app/src/components/icons/calendar.svelte b/code/app/src/components/icons/calendar.svelte
new file mode 100644
index 0000000..e0053ee
--- /dev/null
+++ b/code/app/src/components/icons/calendar.svelte
@@ -0,0 +1,14 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="w-6 h-6 {$$restProps.class ?? ''}"
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"
+    />
+</svg>
diff --git a/code/app/src/components/icons/check-circle.svelte b/code/app/src/components/icons/check-circle.svelte
new file mode 100644
index 0000000..e30778e
--- /dev/null
+++ b/code/app/src/components/icons/check-circle.svelte
@@ -0,0 +1,13 @@
+<svg
+    class="h-5 w-5 {$$restProps.class ?? ''}"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    aria-hidden="true"
+>
+    <path
+        fill-rule="evenodd"
+        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+        clip-rule="evenodd"
+    />
+</svg>
diff --git a/code/app/src/components/icons/chevron-down.svelte b/code/app/src/components/icons/chevron-down.svelte
new file mode 100644
index 0000000..5b29ece
--- /dev/null
+++ b/code/app/src/components/icons/chevron-down.svelte
@@ -0,0 +1,7 @@
+<svg class="h-5 w-5 {$$restProps.class ?? ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+    <path
+        fill-rule="evenodd"
+        d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+        clip-rule="evenodd"
+    />
+</svg>
diff --git a/code/app/src/components/icons/chevron-up-down.svelte b/code/app/src/components/icons/chevron-up-down.svelte
new file mode 100644
index 0000000..c07aed5
--- /dev/null
+++ b/code/app/src/components/icons/chevron-up-down.svelte
@@ -0,0 +1,13 @@
+<svg
+    class="h-5 w-5 {$$restProps.class ?? ''}"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    aria-hidden="true"
+>
+    <path
+        fill-rule="evenodd"
+        d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
+        clip-rule="evenodd"
+    />
+</svg>
diff --git a/code/app/src/components/icons/chevron-up.svelte b/code/app/src/components/icons/chevron-up.svelte
new file mode 100644
index 0000000..289e71d
--- /dev/null
+++ b/code/app/src/components/icons/chevron-up.svelte
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+    <path
+        fill-rule="evenodd"
+        d="M14.77 12.79a.75.75 0 01-1.06-.02L10 8.832 6.29 12.77a.75.75 0 11-1.08-1.04l4.25-4.5a.75.75 0 011.08 0l4.25 4.5a.75.75 0 01-.02 1.06z"
+        clip-rule="evenodd"
+    />
+</svg>
diff --git a/code/app/src/components/icons/database.svelte b/code/app/src/components/icons/database.svelte
new file mode 100644
index 0000000..6ffdadb
--- /dev/null
+++ b/code/app/src/components/icons/database.svelte
@@ -0,0 +1,14 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="h-6 w-6 {$$restProps.class ?? ''}"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"
+    />
+</svg>
diff --git a/code/app/src/components/icons/exclamation-circle.svelte b/code/app/src/components/icons/exclamation-circle.svelte
new file mode 100644
index 0000000..2ce79b1
--- /dev/null
+++ b/code/app/src/components/icons/exclamation-circle.svelte
@@ -0,0 +1,13 @@
+<svg
+    class="h-5 w-5 {$$restProps.class ?? ''}"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    aria-hidden="true"
+>
+    <path
+        fill-rule="evenodd"
+        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z"
+        clip-rule="evenodd"
+    />
+</svg>
diff --git a/code/app/src/components/icons/exclamation-triangle.svelte b/code/app/src/components/icons/exclamation-triangle.svelte
new file mode 100644
index 0000000..8d807db
--- /dev/null
+++ b/code/app/src/components/icons/exclamation-triangle.svelte
@@ -0,0 +1,13 @@
+<svg
+    class="h-5 w-5 {$$restProps.class ?? ''}"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    aria-hidden="true"
+>
+    <path
+        fill-rule="evenodd"
+        d="M8.485 3.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 3.495zM10 6a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 6zm0 9a1 1 0 100-2 1 1 0 000 2z"
+        clip-rule="evenodd"
+    />
+</svg>
diff --git a/code/app/src/components/icons/folder-open.svelte b/code/app/src/components/icons/folder-open.svelte
new file mode 100644
index 0000000..409c8e2
--- /dev/null
+++ b/code/app/src/components/icons/folder-open.svelte
@@ -0,0 +1,14 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="w-6 h-6 {$$restProps.class ?? ''}"
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0V6A2.25 2.25 0 016 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44H18A2.25 2.25 0 0120.25 9v.776"
+    />
+</svg>
diff --git a/code/app/src/components/icons/funnel.svelte b/code/app/src/components/icons/funnel.svelte
new file mode 100644
index 0000000..7e9daeb
--- /dev/null
+++ b/code/app/src/components/icons/funnel.svelte
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+    <path
+        fill-rule="evenodd"
+        d="M2.628 1.601C5.028 1.206 7.49 1 10 1s4.973.206 7.372.601a.75.75 0 01.628.74v2.288a2.25 2.25 0 01-.659 1.59l-4.682 4.683a2.25 2.25 0 00-.659 1.59v3.037c0 .684-.31 1.33-.844 1.757l-1.937 1.55A.75.75 0 018 18.25v-5.757a2.25 2.25 0 00-.659-1.591L2.659 6.22A2.25 2.25 0 012 4.629V2.34a.75.75 0 01.628-.74z"
+        clip-rule="evenodd"
+    />
+</svg>
diff --git a/code/app/src/components/icons/home.svelte b/code/app/src/components/icons/home.svelte
new file mode 100644
index 0000000..ee8305d
--- /dev/null
+++ b/code/app/src/components/icons/home.svelte
@@ -0,0 +1,14 @@
+<svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-6 w-6 {$$restProps.class ?? ''}"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2"
+>
+      <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+      />
+</svg>
diff --git a/code/app/src/components/icons/index.ts b/code/app/src/components/icons/index.ts
new file mode 100644
index 0000000..eb5b439
--- /dev/null
+++ b/code/app/src/components/icons/index.ts
@@ -0,0 +1,47 @@
+import XIcon from "./x.svelte";
+import MenuIcon from "./menu.svelte";
+import AdjustmentsIcon from "./adjustments.svelte";
+import DatabaseIcon from "./database.svelte";
+import HomeIcon from "./home.svelte";
+import InformationCircleIcon from "./information-circle.svelte";
+import ExclamationTriangleIcon from "./exclamation-triangle.svelte";
+import XCircleIcon from "./x-circle.svelte";
+import CheckCircleIcon from "./check-circle.svelte";
+import XMarkIcon from "./x-mark.svelte";
+import SpinnerIcon from "./spinner.svelte";
+import ExclamationCircleIcon from "./exclamation-circle.svelte";
+import ChevronUpDownIcon from "./chevron-up-down.svelte";
+import MagnifyingGlassIcon from "./magnifying-glass.svelte";
+import Bars3CenterLeftIcon from "./bars-3-center-left.svelte";
+import CalendarIcon from "./calendar.svelte";
+import FolderOpenIcon from "./folder-open.svelte";
+import MegaphoneIcon from "./megaphone.svelte";
+import QueueListIcon from "./queue-list.svelte";
+import ChevronDownIcon from "./chevron-down.svelte";
+import ChevronUpIcon from "./chevron-up.svelte";
+import FunnelIcon from "./funnel.svelte";
+
+export {
+    FunnelIcon,
+    ChevronDownIcon,
+    ChevronUpIcon,
+    QueueListIcon,
+    FolderOpenIcon,
+    MegaphoneIcon,
+    CalendarIcon,
+    Bars3CenterLeftIcon,
+    MagnifyingGlassIcon,
+    ChevronUpDownIcon,
+    XIcon,
+    MenuIcon,
+    HomeIcon,
+    DatabaseIcon,
+    AdjustmentsIcon,
+    InformationCircleIcon,
+    ExclamationTriangleIcon,
+    ExclamationCircleIcon,
+    XCircleIcon,
+    CheckCircleIcon,
+    XMarkIcon,
+    SpinnerIcon
+}
\ No newline at end of file
diff --git a/code/app/src/components/icons/information-circle.svelte b/code/app/src/components/icons/information-circle.svelte
new file mode 100644
index 0000000..68dbc60
--- /dev/null
+++ b/code/app/src/components/icons/information-circle.svelte
@@ -0,0 +1,13 @@
+<svg
+    class="h-5 w-5 {$$restProps.class ?? ''}"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    aria-hidden="true"
+>
+    <path
+        fill-rule="evenodd"
+        d="M19 10.5a8.5 8.5 0 11-17 0 8.5 8.5 0 0117 0zM8.25 9.75A.75.75 0 019 9h.253a1.75 1.75 0 011.709 2.13l-.46 2.066a.25.25 0 00.245.304H11a.75.75 0 010 1.5h-.253a1.75 1.75 0 01-1.709-2.13l.46-2.066a.25.25 0 00-.245-.304H9a.75.75 0 01-.75-.75zM10 7a1 1 0 100-2 1 1 0 000 2z"
+        clip-rule="evenodd"
+    />
+</svg>
diff --git a/code/app/src/components/icons/magnifying-glass.svelte b/code/app/src/components/icons/magnifying-glass.svelte
new file mode 100644
index 0000000..f8fdb6e
--- /dev/null
+++ b/code/app/src/components/icons/magnifying-glass.svelte
@@ -0,0 +1,13 @@
+<svg
+    class="h-5 w-5 {$$restProps.class ?? ''}"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    aria-hidden="true"
+>
+    <path
+        fill-rule="evenodd"
+        d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
+        clip-rule="evenodd"
+    />
+</svg>
diff --git a/code/app/src/components/icons/megaphone.svelte b/code/app/src/components/icons/megaphone.svelte
new file mode 100644
index 0000000..7ada5f3
--- /dev/null
+++ b/code/app/src/components/icons/megaphone.svelte
@@ -0,0 +1,14 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="w-6 h-6 {$$restProps.class ?? ''}"
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46"
+    />
+</svg>
diff --git a/code/app/src/components/icons/menu.svelte b/code/app/src/components/icons/menu.svelte
new file mode 100644
index 0000000..471d85f
--- /dev/null
+++ b/code/app/src/components/icons/menu.svelte
@@ -0,0 +1,14 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="h-6 w-6 {$$restProps.class ?? ''}"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M4 6h16M4 12h16M4 18h16"
+    />
+</svg>
diff --git a/code/app/src/components/icons/queue-list.svelte b/code/app/src/components/icons/queue-list.svelte
new file mode 100644
index 0000000..6148394
--- /dev/null
+++ b/code/app/src/components/icons/queue-list.svelte
@@ -0,0 +1,14 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="w-6 h-6 {$$restProps.class ?? ''}"
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"
+    />
+</svg>
diff --git a/code/app/src/components/icons/spinner.svelte b/code/app/src/components/icons/spinner.svelte
new file mode 100644
index 0000000..80cc57c
--- /dev/null
+++ b/code/app/src/components/icons/spinner.svelte
@@ -0,0 +1,20 @@
+<svg
+    class="-ml-1 mr-3 h-5 w-5 animate-spin {$$restProps.class ?? ''}"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+>
+    <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+    />
+    <path
+        class="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    />
+</svg>
diff --git a/code/app/src/components/icons/x-circle.svelte b/code/app/src/components/icons/x-circle.svelte
new file mode 100644
index 0000000..3793b5a
--- /dev/null
+++ b/code/app/src/components/icons/x-circle.svelte
@@ -0,0 +1,13 @@
+<svg
+    class="h-5 w-5 {$$restProps.class ?? ''}"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    aria-hidden="true"
+>
+    <path
+        fill-rule="evenodd"
+        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
+        clip-rule="evenodd"
+    />
+</svg>
diff --git a/code/app/src/components/icons/x-mark.svelte b/code/app/src/components/icons/x-mark.svelte
new file mode 100644
index 0000000..fd1c6a1
--- /dev/null
+++ b/code/app/src/components/icons/x-mark.svelte
@@ -0,0 +1,11 @@
+<svg
+    class="h-5 w-5 {$$restProps.class ?? ''}"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    aria-hidden="true"
+>
+    <path
+        d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+    />
+</svg>
diff --git a/code/app/src/components/icons/x.svelte b/code/app/src/components/icons/x.svelte
new file mode 100644
index 0000000..6125ab8
--- /dev/null
+++ b/code/app/src/components/icons/x.svelte
@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class="h-6 w-6 {$$restProps.class ?? ''}"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke="currentColor"
+  stroke-width="2"
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M6 18L18 6M6 6l12 12"
+  />
+</svg>
diff --git a/code/app/src/components/index.ts b/code/app/src/components/index.ts
new file mode 100644
index 0000000..494bc0c
--- /dev/null
+++ b/code/app/src/components/index.ts
@@ -0,0 +1,25 @@
+import Alert from "./alert.svelte";
+import Button from "./button.svelte";
+import Checkbox from "./checkbox.svelte";
+import Input from "./input.svelte";
+import LocaleSwitcher from "./locale-switcher.svelte";
+import Switch from "./switch.svelte";
+import Badge from "./badge.svelte";
+import ProjectStatusBadge from "./project-status-badge.svelte";
+import TextArea from "./textarea.svelte";
+import Combobox from "./combobox.svelte";
+import Notification from "./notification.svelte";
+
+export {
+    Badge,
+    Combobox,
+    TextArea,
+    ProjectStatusBadge,
+    Alert,
+    Button,
+    Checkbox,
+    Input,
+    LocaleSwitcher,
+    Switch,
+    Notification,
+};
\ No newline at end of file
diff --git a/code/app/src/components/input.svelte b/code/app/src/components/input.svelte
new file mode 100644
index 0000000..f97c1f1
--- /dev/null
+++ b/code/app/src/components/input.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+    import pwKey from "$actions/pwKey";
+    import {random_string} from "$utilities/misc-helpers";
+    import {ExclamationCircleIcon} from "./icons";
+
+    export let label: string | undefined = undefined;
+    export let type: string = "text";
+    export let autocomplete: string | undefined = undefined;
+    export let required: boolean | undefined = undefined;
+    export let id: string | undefined = "input__" + random_string(4);
+    export let name: string | undefined = undefined;
+    export let placeholder: string | undefined = undefined;
+    export let helpText: string | undefined = undefined;
+    export let errorText: string | undefined = undefined;
+    export let errors: Array<string> | undefined = undefined;
+    export let disabled = false;
+    export let hideLabel = false;
+    export let cornerHint: string | undefined = undefined;
+    export let icon: any = undefined;
+    export let addon: string | undefined = undefined;
+    export let value: string | undefined;
+    export let wrapperClass: string | undefined = undefined;
+    export let _pwKey: string | undefined = undefined;
+
+    $: ariaErrorDescribedBy = id + "__" + "error";
+    $: attributes = {
+        "aria-describedby": errorText || errors?.length ? ariaErrorDescribedBy : null,
+        "aria-invalid": errorText || errors?.length ? "true" : null,
+        disabled: disabled || null,
+        autocomplete: autocomplete || null,
+        required: required || null,
+    } as any;
+    $: hasBling = icon || addon || errorText;
+    const defaultColorClass = "border-gray-300 focus:border-teal-500 focus:ring-teal-500";
+    let colorClass = defaultColorClass;
+    $: if (errorText) {
+        colorClass = "placeholder-red-300 focus:border-red-500 focus:outline-none focus:ring-red-500 text-red-900 pr-10 border-red-300";
+    } else {
+        colorClass = defaultColorClass;
+    }
+
+    function typeAction(node: HTMLInputElement) {
+        node.type = type;
+    }
+</script>
+
+<div class={wrapperClass}>
+    {#if label && !cornerHint && !hideLabel}
+        <label for={id} class={hideLabel ? "sr-only" : "block text-sm font-medium text-gray-700"}>
+            {label}
+            {@html required ? "<span class='text-red-500'>*</span>" : ""}
+        </label>
+    {:else if cornerHint && !hideLabel}
+        <div class="flex justify-between">
+            {#if label}
+                <label for={id} class={hideLabel ? "sr-only" : "block text-sm font-medium text-gray-700"}>
+                    {label}
+                    {@html required ? "<span class='text-red-500'>*</span>" : ""}
+                </label>
+            {/if}
+            <span class="text-sm text-gray-500">
+                {cornerHint}
+            </span>
+        </div>
+    {/if}
+    <div class="{label ? 'mt-1' : ''} {hasBling ? 'relative rounded-md' : ''} {addon ? 'flex' : ''}">
+        {#if icon}
+            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                <svelte:component this={icon} class={errorText ? "text-red-500" : "text-gray-400"}/>
+            </div>
+        {:else if addon}
+            <div class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-sm">
+                <span class="text-gray-500 sm:text-sm">{addon}</span>
+            </div>
+        {/if}
+        <input
+                use:typeAction
+                use:pwKey={_pwKey}
+                {name}
+                {id}
+                {...attributes}
+                bind:value
+                class="block w-full rounded-md shadow-sm sm:text-sm
+                {colorClass}
+                {disabled ? 'disabled:cursor-not-allowed disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500' : ''}
+                {addon ? 'min-w-0 flex-1 rounded-none rounded-r-md' : ''}
+                {icon ? 'pl-10' : ''}"
+                {placeholder}
+        />
+        {#if errorText}
+            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                <ExclamationCircleIcon class="text-red-500"/>
+            </div>
+        {/if}
+    </div>
+    {#if helpText && !errorText}
+        <p class="mt-2 text-sm text-gray-500">
+            {helpText}
+        </p>
+    {/if}
+    {#if errorText || errors?.length === 1}
+        <p class="mt-2 text-sm text-red-600" id={ariaErrorDescribedBy}>
+            {errorText ?? errors[0]}
+        </p>
+    {:else if errors && errors.length}
+        <ul class="mt-2 list-disc" id={ariaErrorDescribedBy}>
+            {#each errors as error}
+                <li class="text-sm text-red-600">{error}</li>
+            {/each}
+        </ul>
+    {/if}
+</div>
diff --git a/code/app/src/components/locale-switcher.svelte b/code/app/src/components/locale-switcher.svelte
new file mode 100644
index 0000000..fc03f39
--- /dev/null
+++ b/code/app/src/components/locale-switcher.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+    import pwKey from "$actions/pwKey";
+    import {browser} from "$app/environment";
+    import {page} from "$app/stores";
+    import {CookieNames} from "$configuration";
+    import {setLocale, locale} from "$i18n/i18n-svelte";
+    import type {Locales} from "$i18n/i18n-types";
+    import {locales} from "$i18n/i18n-util";
+    import {loadLocaleAsync} from "$i18n/i18n-util.async";
+    import Cookies from "js-cookie";
+
+    export let _pwKey: string | undefined = undefined;
+    export let tabindex: number | undefined = undefined;
+    let currentLocale = Cookies.get(CookieNames.locale);
+
+    async function switch_locale(newLocale: Locales) {
+        if (!newLocale || $locale === newLocale) return;
+        await loadLocaleAsync(newLocale);
+        setLocale(newLocale);
+        document.querySelector("html")?.setAttribute("lang", newLocale);
+        Cookies.set(CookieNames.locale, newLocale);
+        currentLocale = newLocale;
+        console.log("Switched to: " + newLocale);
+    }
+
+    function on_change(event: Event) {
+        const target = event.target as HTMLSelectElement;
+        switch_locale(target.options[target.selectedIndex].value as Locales);
+    }
+
+    $: if (browser) {
+        switch_locale($page.params.lang as Locales);
+    }
+
+    function get_locale_name(iso: string) {
+        switch (iso) {
+            case "nb": {
+                return "Norsk Bokmål";
+            }
+            case "en": {
+                return "English";
+            }
+        }
+    }
+</script>
+
+<select
+        {tabindex}
+        use:pwKey={_pwKey}
+        on:change={on_change}
+        class="mt-1 mr-1 block border-none py-2 pl-3 pr-10 text-base rounded-md right-0 absolute focus:outline-none focus:ring-teal-500 sm:text-sm"
+>
+    {#each locales as aLocale}
+        <option value={aLocale} selected={aLocale === currentLocale}>{get_locale_name(aLocale)}</option>
+    {/each}
+</select>
diff --git a/code/app/src/components/notification.svelte b/code/app/src/components/notification.svelte
new file mode 100644
index 0000000..d78b3d3
--- /dev/null
+++ b/code/app/src/components/notification.svelte
@@ -0,0 +1,119 @@
+<script context="module" lang="ts">
+    export type NotificationType = "info" | "error" | "success" | "warning" | "subtle";
+</script>
+
+<script lang="ts">
+    import { Transition } from "@rgossiaux/svelte-headlessui";
+    import { onDestroy } from "svelte";
+    import { XMarkIcon, ExclamationCircleIcon, InformationCircleIcon, XCircleIcon, CheckCircleIcon } from "./icons";
+
+    export let title: string;
+    export let subtitle = "";
+    export let show = false;
+    export let type: NotificationType = "info";
+    export let hideAfterSeconds = -1;
+    export let nonClosable = false;
+
+    $: _show = show && title.length > 0;
+    let timeout;
+    let iconClass = "";
+    let icon = undefined;
+    let bgClass = "";
+    let ringClass = "";
+
+    onDestroy(() => {
+        clearTimeout(timeout);
+    });
+
+    $: if (hideAfterSeconds > 0) {
+        timeout = setTimeout(() => close(), hideAfterSeconds * 1000);
+    } else {
+        timeout = -1;
+        show = true;
+    }
+
+    $: switch (type) {
+        case "error":
+            iconClass = "text-red-400";
+            bgClass = "bg-red-50";
+            ringClass = "ring-1 ring-red-100";
+            icon = XCircleIcon;
+            break;
+        case "info":
+            iconClass = "text-blue-400";
+            bgClass = "bg-blue-50";
+            ringClass = "ring-1 ring-blue-100";
+            icon = InformationCircleIcon;
+            break;
+        case "success":
+            iconClass = "text-green-400";
+            bgClass = "bg-green-50";
+            ringClass = "ring-1 ring-green-100";
+            icon = CheckCircleIcon;
+            break;
+        case "warning":
+            iconClass = "text-yellow-400";
+            bgClass = "bg-yellow-50";
+            ringClass = "ring-1 ring-yellow-100";
+            icon = ExclamationCircleIcon;
+            break;
+        case "subtle":
+            icon = undefined;
+            bgClass = "bg-white";
+            ringClass = "ring-1 ring-gray-100";
+            break;
+        default:
+            icon = undefined;
+            bgClass = "bg-white";
+            ringClass = "";
+            break;
+    }
+
+    function close() {
+        show = false;
+    }
+</script>
+
+<div aria-live="assertive" class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6">
+    <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
+        <Transition
+            class="w-full flex justify-end"
+            show={_show}
+            enter="transform ease-out duration-300 transition"
+            enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+            enterTo="translate-y-0 opacity-100 sm:translate-x-0"
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+        >
+            <div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg shadow-md {bgClass} {ringClass}">
+                <div class="p-4">
+                    <div class="flex items-start">
+                        {#if icon}
+                            <div class="flex-shrink-0">
+                                <svelte:component this={icon} class={iconClass} />
+                            </div>
+                        {/if}
+                        <div class="ml-3 w-0 flex-1 pt-0.5">
+                            <p class="text-sm font-medium text-gray-900">{title}</p>
+                            {#if subtitle}
+                                <p class="mt-1 text-sm text-gray-500">{subtitle}</p>
+                            {/if}
+                        </div>
+                        {#if !nonClosable}
+                            <div class="ml-4 flex flex-shrink-0">
+                                <button
+                                    on:click={close}
+                                    type="button"
+                                    class="inline-flex rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                                >
+                                    <XMarkIcon />
+                                </button>
+                            </div>
+                        {/if}
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </div>
+</div>
diff --git a/code/app/src/components/project-status-badge.svelte b/code/app/src/components/project-status-badge.svelte
new file mode 100644
index 0000000..3e93935
--- /dev/null
+++ b/code/app/src/components/project-status-badge.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+    import type {ProjectStatus} from "$models/projects/ProjectStatus";
+    import Badge from "./badge.svelte";
+
+    export let status: string | ProjectStatus;
+
+    let text = "";
+    let type = "default" as any;
+    $: switch (status) {
+        case "idl":
+            type = "tame";
+            text = "IDLE";
+            break;
+        case "exp":
+            type = "yellow";
+            text = "EXPIRED";
+            break;
+        case "act":
+            type = "green";
+            text = "ACTIVE";
+            break;
+    }
+</script>
+
+<Badge {text} {type} uppercase/>
diff --git a/code/app/src/components/switch.svelte b/code/app/src/components/switch.svelte
new file mode 100644
index 0000000..1b67f80
--- /dev/null
+++ b/code/app/src/components/switch.svelte
@@ -0,0 +1,125 @@
+<script context="module" lang="ts">
+    export type SwitchType = "short" | "icon" | "default";
+</script>
+
+<script lang="ts">
+    import pwKey from "$actions/pwKey";
+
+    export let enabled = false;
+    export let type: SwitchType = "default";
+    export let srText = "Use setting";
+    export let label: string | undefined = undefined;
+    export let description: string | undefined = undefined;
+    export let rightAlignedLabelDescription = false;
+    export let _pwKey: string | undefined = undefined;
+
+    $: colorClass = enabled ? "bg-teal-600 focus:ring-teal-500" : "bg-gray-200 focus:ring-teal-500";
+    $: translateClass = enabled ? "translate-x-5" : "translate-x-0";
+    $: hasLabelOrDescription = label || description;
+
+    function toggle() {
+        enabled = !enabled;
+    }
+</script>
+
+<div class="{hasLabelOrDescription ? 'flex items-center' : ''} {rightAlignedLabelDescription ? '' : 'justify-between'}">
+    {#if hasLabelOrDescription && !rightAlignedLabelDescription}
+        <span class="flex flex-grow flex-col">
+            {#if label}
+                <span class="text-sm font-medium text-gray-900">{label}</span>
+            {/if}
+            {#if description}
+                <span class="text-sm text-gray-500">{description}</span>
+            {/if}
+        </span>
+    {/if}
+    {#if type === "short"}
+        <button
+                type="button"
+                class="group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2"
+                role="switch"
+                aria-checked={enabled}
+                use:pwKey={_pwKey}
+                on:click={toggle}
+        >
+            <span class="sr-only">{srText}</span>
+            <span aria-hidden="true" class="pointer-events-none absolute h-full w-full rounded-md"/>
+            <span
+                    aria-hidden="true"
+                    class="{colorClass} pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out"
+            />
+            <span
+                    aria-hidden="true"
+                    class="{translateClass} pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow ring-0 transition-transform duration-200 ease-in-out"
+            />
+        </button>
+    {:else if type === "icon"}
+        <button
+                type="button"
+                class="{colorClass} relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
+                role="switch"
+                aria-checked={enabled}
+                use:pwKey={_pwKey}
+                on:click={toggle}
+        >
+            <span class="sr-only">{srText}</span>
+            <span
+                    class="{translateClass} pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+            >
+                <span
+                        class="{enabled
+                        ? 'opacity-0 ease-out duration-100'
+                        : 'opacity-100 ease-in duration-200'} absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
+                        aria-hidden="true"
+                >
+                    <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
+                        <path
+                                d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                        />
+                    </svg>
+                </span>
+                <span
+                        class="{enabled
+                        ? 'opacity-100 ease-in duration-200'
+                        : 'opacity-0 ease-out duration-100'} absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
+                        aria-hidden="true"
+                >
+                    <svg class="h-3 w-3 text-indigo-600" fill="currentColor" viewBox="0 0 12 12">
+                        <path
+                                d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
+                        />
+                    </svg>
+                </span>
+            </span>
+        </button>
+    {:else if type === "default"}
+        <button
+                type="button"
+                class="{colorClass} relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
+                role="switch"
+                aria-checked={enabled}
+                use:pwKey={_pwKey}
+                on:click={toggle}
+        >
+            <span class="sr-only">{srText}</span>
+            <span
+                    aria-hidden="true"
+                    class="{translateClass} pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+            />
+        </button>
+    {/if}
+    {#if hasLabelOrDescription && rightAlignedLabelDescription}
+        <span class="ml-3">
+            {#if label}
+                <span class="text-sm font-medium text-gray-900">{label}</span>
+            {/if}
+            {#if description}
+                <span class="text-sm text-gray-500">{description}</span>
+            {/if}
+        </span>
+    {/if}
+</div>
diff --git a/code/app/src/components/textarea.svelte b/code/app/src/components/textarea.svelte
new file mode 100644
index 0000000..223a265
--- /dev/null
+++ b/code/app/src/components/textarea.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+    import {random_string} from "$utilities/misc-helpers";
+
+    export let id = "textarea-" + random_string(4);
+    export let disabled = false;
+    export let rows = 2;
+    export let cols = 0;
+    export let name = "";
+    export let placeholder = "";
+    export let value;
+    export let label = "";
+    export let required = false;
+    export let errorText = "";
+    export let errors: Array<string> | undefined = undefined;
+
+    $: ariaErrorDescribedBy = id + "__" + "error";
+    $: attributes = {
+        "aria-describedby": errorText || errors?.length ? ariaErrorDescribedBy : null,
+        "aria-invalid": errorText || errors?.length ? "true" : null,
+        rows: rows || null,
+        cols: cols || null,
+        name: name || null,
+        id: id || null,
+        disabled: disabled || null,
+        required: required || null,
+    } as any;
+
+    let textareaElement;
+    let scrollHeight = 0;
+    const defaultColorClass = "border-gray-300 focus:border-teal-500 focus:ring-teal-500";
+    let colorClass = defaultColorClass;
+
+    $: if (errorText) {
+        colorClass = "placeholder-red-300 focus:border-red-500 focus:outline-none focus:ring-red-500 text-red-900 pr-10 border-red-300";
+    } else {
+        colorClass = defaultColorClass;
+    }
+
+    $: if (textareaElement) {
+        scrollHeight = textareaElement.scrollHeight;
+    }
+
+    function on_input(event) {
+        event.target.style.height = "auto";
+        event.target.style.height = this.scrollHeight + "px";
+    }
+</script>
+
+<div>
+    {#if label}
+        <label for={id} class="block text-sm font-medium text-gray-700">
+            {label}
+            {@html required ? "<span class='text-red-500'>*</span>" : ""}
+        </label>
+    {/if}
+    <div class="mt-1">
+        <textarea
+                {rows}
+                {name}
+                {id}
+                {...attributes}
+                style="overflow-y:hidden;min-height:calc(1.5em + .75rem + 2px);{scrollHeight ? 'height:{scrollHeight}px' : ''};"
+                bind:value
+                bind:this={textareaElement}
+                on:input={on_input}
+                {placeholder}
+                class="block w-full rounded-md {colorClass} shadow-sm sm:text-sm"
+        />
+        {#if errorText || errors?.length === 1}
+            <p class="mt-2 text-sm text-red-600" id={ariaErrorDescribedBy}>
+                {errorText ?? errors[0]}
+            </p>
+        {:else if errors && errors.length}
+            <ul class="mt-2 list-disc" id={ariaErrorDescribedBy}>
+                {#each errors as error}
+                    <li class="text-sm text-red-600">{error}</li>
+                {/each}
+            </ul>
+        {/if}
+    </div>
+</div>