9 files changed, 307 insertions, 0 deletions
diff --git a/apps/kit/src/lib/components/alert.svelte b/apps/kit/src/lib/components/alert.svelte
new file mode 100644
index 0000000..4a5c7ea
--- /dev/null
+++ b/apps/kit/src/lib/components/alert.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+    import { random_string } from "$shared/lib/helpers";
+    import { afterUpdate, onMount } from "svelte";
+    import { Temporal } from "temporal-polyfill";
+
+    const noCooldownSetting = "no-cooldown";
+    // 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);
+    export let title = "";
+    export let message = "";
+    export let type = "info";
+    export let closeable = false;
+    export let closeableCooldown = "-1";
+    export let visible = true;
+
+    const cooldownStorageKey = "lastseen--" + id;
+    $: cooldownEnabled =
+        id.indexOf(noCooldownSetting) === -1 &&
+        closeable &&
+        (closeableCooldown === "~" || parseInt(closeableCooldown) > 0);
+
+    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)
+            );
+        }
+    }
+
+    // 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(
+            localStorage.getItem(cooldownStorageKey) as number
+        );
+        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();
+        }
+    });
+
+    afterUpdate(() => {
+        if (type === "default") {
+            type = "primary";
+        }
+    });
+</script>
+
+<div
+    class="alert alert--{type} padding-sm radius-md"
+    {id}
+    class:alert--is-visible={visible}
+    role="alert"
+>
+    <div class="flex justify-between">
+        <div class="flex flex-row items-center">
+            <svg
+                class="icon icon--sm alert__icon margin-right-xxs"
+                viewBox="0 0 24 24"
+                aria-hidden="true"
+            >
+                <path
+                    d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12s12-5.383,12-12S18.617,0,12,0z M14.658,18.284 c-0.661,0.26-2.952,1.354-4.272,0.191c-0.394-0.346-0.59-0.785-0.59-1.318c0-0.998,0.328-1.868,0.919-3.957 c0.104-0.395,0.231-0.907,0.231-1.313c0-0.701-0.266-0.887-0.987-0.887c-0.352,0-0.742,0.125-1.095,0.257l0.195-0.799 c0.787-0.32,1.775-0.71,2.621-0.71c1.269,0,2.203,0.633,2.203,1.837c0,0.347-0.06,0.955-0.186,1.375l-0.73,2.582 c-0.151,0.522-0.424,1.673-0.001,2.014c0.416,0.337,1.401,0.158,1.887-0.071L14.658,18.284z M13.452,8c-0.828,0-1.5-0.672-1.5-1.5 s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S14.28,8,13.452,8z"
+                />
+            </svg>
+            {#if title}
+                <p class="text-sm">
+                    <strong class="error-title">{title}</strong>
+                </p>
+            {:else if message}
+                <div class="text-component text-sm break-word">
+                    {@html message}
+                </div>
+            {/if}
+        </div>
+        {#if closeable}
+            <button class="reset alert__close-btn" on:click={close}>
+                <svg
+                    class="icon"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                >
+                    <title>Close alert</title>
+                    <line x1="3" y1="3" x2="17" y2="17" />
+                    <line x1="17" y1="3" x2="3" y2="17" />
+                </svg>
+            </button>
+        {/if}
+    </div>
+
+    {#if message && title}
+        <div class="text-component text-sm break-word padding-top-xs">
+            {@html message}
+        </div>
+    {/if}
+</div>
diff --git a/apps/kit/src/lib/components/button.svelte b/apps/kit/src/lib/components/button.svelte
new file mode 100644
index 0000000..5550e5e
--- /dev/null
+++ b/apps/kit/src/lib/components/button.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+    export type ButtonKind = "primary" | "secondary" | "white"
+    export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
+    export let kind = "primary" as ButtonKind;
+    export let size = "sm" as ButtonSize;
+    export let type: "button" | "submit" | "reset" = "button";
+    export let id = undefined;
+    export let tabindex = undefined;
+    export let style = undefined;
+    export let title = undefined;
+    export let disabled = false;
+    export let href = undefined;
+    export let text;
+
+    let sizeClasses = "px-3 py-2 text-xs";
+    let kindClasses = "border-transparent text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500";
+
+    $: shared_props = {
+        type: type,
+        id: id || null,
+        title: title || null,
+        disabled: disabled || null,
+        tabindex: tabindex || null,
+        style: style || null,
+    };
+
+    $: switch (size) {
+        case "xs":
+            sizeClasses = "px-2.5 py-1.5 text-xs";
+            break;
+        case "sm":
+            sizeClasses = "px-3 py-2 text-sm";
+            break;
+        case "md":
+            sizeClasses = "px-4 py-2 text-sm";
+            break;
+        case "lg":
+            sizeClasses = "px-4 py-2 text-base";
+            break;
+        case "xl":
+            sizeClasses = "px-6 py-3 text-base";
+            break;
+    }
+
+    $: switch (kind) {
+        case "secondary":
+            kindClasses = "border-transparent text-indigo-700 bg-indigo-100 hover:bg-indigo-200";
+            break;
+        case "primary":
+            kindClasses = "border-transparent text-white bg-indigo-600 hover:bg-indigo-700";
+            break;
+        case "white":
+            kindClasses = "border-gray-300 text-gray-700 bg-white hover:bg-gray-50";
+            break;
+    }
+</script>
+{#if href && !disabled}
+    <a {...shared_props}
+       {href}
+       on:click
+       {type}
+       class="{sizeClasses} {kindClasses} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
+        {text}
+    </a>
+{:else}
+    <button {...shared_props}
+            on:click
+            {type}
+            class="{sizeClasses} {kindClasses} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
+        {text}
+    </button>
+{/if}
+\ No newline at end of file
diff --git a/apps/kit/src/lib/components/icons/adjustments.svelte b/apps/kit/src/lib/components/icons/adjustments.svelte
new file mode 100644
index 0000000..b6d3f4d
--- /dev/null
+++ b/apps/kit/src/lib/components/icons/adjustments.svelte
@@ -0,0 +1,5 @@
+<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>
+\ No newline at end of file
diff --git a/apps/kit/src/lib/components/icons/database.svelte b/apps/kit/src/lib/components/icons/database.svelte
new file mode 100644
index 0000000..05c70ed
--- /dev/null
+++ b/apps/kit/src/lib/components/icons/database.svelte
@@ -0,0 +1,3 @@
+<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>
+\ No newline at end of file
diff --git a/apps/kit/src/lib/components/icons/home.svelte b/apps/kit/src/lib/components/icons/home.svelte
new file mode 100644
index 0000000..cc49c4d
--- /dev/null
+++ b/apps/kit/src/lib/components/icons/home.svelte
@@ -0,0 +1,5 @@
+<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>
+\ No newline at end of file
diff --git a/apps/kit/src/lib/components/icons/index.ts b/apps/kit/src/lib/components/icons/index.ts
new file mode 100644
index 0000000..d3abf24
--- /dev/null
+++ b/apps/kit/src/lib/components/icons/index.ts
@@ -0,0 +1,13 @@
+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";
+
+export {
+    XIcon,
+    MenuIcon,
+    HomeIcon,
+    DatabaseIcon,
+    AdjustmentsIcon
+}
+\ No newline at end of file
diff --git a/apps/kit/src/lib/components/icons/menu.svelte b/apps/kit/src/lib/components/icons/menu.svelte
new file mode 100644
index 0000000..12a68a5
--- /dev/null
+++ b/apps/kit/src/lib/components/icons/menu.svelte
@@ -0,0 +1,4 @@
+<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/apps/kit/src/lib/components/icons/x.svelte b/apps/kit/src/lib/components/icons/x.svelte
new file mode 100644
index 0000000..c7e05a8
--- /dev/null
+++ b/apps/kit/src/lib/components/icons/x.svelte
@@ -0,0 +1,4 @@
+<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>
+\ No newline at end of file
diff --git a/apps/kit/src/lib/components/locale-switcher.svelte b/apps/kit/src/lib/components/locale-switcher.svelte
new file mode 100644
index 0000000..39d6168
--- /dev/null
+++ b/apps/kit/src/lib/components/locale-switcher.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+    import {browser} from "$app/environment";
+    import {page} from "$app/stores";
+    import {setLocale, locale} from "$lib/i18n/i18n-svelte";
+    import type {Locales} from "$lib/i18n/i18n-types";
+    import {locales} from "$lib/i18n/i18n-util";
+    import {loadLocaleAsync} from "$lib/i18n/i18n-util.async";
+
+    const switchLocale = async (
+        newLocale: Locales,
+        updateHistoryState = true,
+    ) => {
+        if (!newLocale || $locale === newLocale) return;
+
+        // load new dictionary from server
+        await loadLocaleAsync(newLocale);
+
+        // select locale
+        setLocale(newLocale);
+
+        // update `lang` attribute
+        document.querySelector("html")?.setAttribute("lang", newLocale);
+
+        //TODO set cookie that persists the locale
+    };
+
+    // update locale when navigating via browser back/forward buttons
+    const handlePopStateEvent = async ({state}: PopStateEvent) =>
+        switchLocale(state.locale, false);
+
+    // update locale when page store changes
+    $: if (browser) {
+        const lang = $page.params.lang as Locales;
+        switchLocale(lang, false);
+    }
+</script>
+
+<svelte:window on:popstate={handlePopStateEvent}/>
+
+<ul>
+    {#each locales as l}
+        <li>
+            <button
+                    type="button"
+                    class:active={l === $locale}
+                    on:click={() => switchLocale(l)}
+            >
+                {l}
+            </button>
+        </li>
+    {/each}
+</ul>