feat/refactor: Initial surroundings for (app) and normalise icon names

12 files changed, 183 insertions, 174 deletions

diff --git a/apps/kit/src/lib/components/alert.svelte b/apps/kit/src/lib/components/alert.svelte
index fa36a63..31e7357 100644
--- a/apps/kit/src/lib/components/alert.svelte
+++ b/apps/kit/src/lib/components/alert.svelte
@@ -3,13 +3,7 @@
     import { createEventDispatcher } from "svelte";
     import { onMount } from "svelte";
     import { Temporal } from "temporal-polyfill";
-    import {
-        ExclamationTriangle,
-        CheckCircle,
-        InformationCircle,
-        XCircle,
-        XMark,
-    } from "./icons";
+    import { ExclamationTriangleIcon, CheckCircleIcon, InformationCircleIcon, XCircleIcon, XMarkIcon } from "./icons";
 
     const dispatch = createEventDispatcher();
     const noCooldownSetting = "no-cooldown";
@@ -58,46 +52,40 @@
      * 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 }> =
-        [];
+    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);
+        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 svelte a {#if} block.
      */
-    export let visible =
-        closeableCooldown === "~" || parseInt(closeableCooldown) > 0
-            ? false
-            : true;
+    export let visible = closeableCooldown === "~" || parseInt(closeableCooldown) > 0 ? false : true;
 
     const cooldownStorageKey = "lastseen--" + id;
 
     $: switch (type) {
         case "info": {
             colorClassPart = "blue";
-            iconComponent = InformationCircle;
+            iconComponent = InformationCircleIcon;
             break;
         }
         case "warning": {
             colorClassPart = "yellow";
-            iconComponent = ExclamationTriangle;
+            iconComponent = ExclamationTriangleIcon;
             break;
         }
         case "error": {
             colorClassPart = "red";
-            iconComponent = XCircle;
+            iconComponent = XCircleIcon;
             break;
         }
         case "success": {
             colorClassPart = "green";
-            iconComponent = CheckCircle;
+            iconComponent = CheckCircleIcon;
             break;
         }
     }
@@ -105,15 +93,8 @@
     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)
-            );
+            console.log("Cooldown enabled for " + id + ", " + closeableCooldown === "~" ? "with an endless cooldown" : "");
+            localStorage.setItem(cooldownStorageKey, String(Temporal.Now.instant().epochSeconds));
         }
     }
 
@@ -148,15 +129,8 @@
             return;
         }
 
-        const lastSeen = Temporal.Instant.fromEpochSeconds(
-            parseInt(localStorage.getItem(cooldownStorageKey) ?? "-1")
-        );
-        if (
-            Temporal.Instant.compare(
-                Temporal.Now.instant(),
-                lastSeen.add({ seconds: parseInt(closeableCooldown) })
-            ) === 1
-        ) {
+        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 +
@@ -177,31 +151,19 @@
             run_cooldown();
         }
 
-        if (
-            closeable &&
-            closeableCooldown &&
-            id.indexOf(noCooldownSetting) !== -1
-        ) {
+        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
-            );
+            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 ?? ''}"
-    >
+    <div class="rounded-md bg-{colorClassPart}-50 p-4 {$$restProps.class ?? ''}">
         <div class="flex">
             <div class="flex-shrink-0">
-                <svelte:component
-                    this={iconComponent}
-                    class="text-{colorClassPart}-400"
-                />
+                <svelte:component this={iconComponent} class="text-{colorClassPart}-400" />
             </div>
             <div class="ml-3 text-sm w-full">
                 {#if !rightLinkText}
@@ -211,20 +173,14 @@
                         </h3>
                     {/if}
                     {#if message}
-                        <div
-                            class="{title
-                                ? 'mt-2'
-                                : ''} text-{colorClassPart}-700 justify-start"
-                        >
+                        <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"
-                        >
+                        <ul class="list-disc space-y-1 pl-5 text-{colorClassPart}-700">
                             {#each listItems as listItem}
                                 <li>{listItem}</li>
                             {/each}
@@ -234,27 +190,19 @@
                     <div class="flex-1 md:flex md:justify-between">
                         <div>
                             {#if title}
-                                <h3
-                                    class="font-medium text-{colorClassPart}-800"
-                                >
+                                <h3 class="font-medium text-{colorClassPart}-800">
                                     {title}
                                 </h3>
                             {/if}
                             {#if message}
-                                <div
-                                    class="{title
-                                        ? 'mt-2'
-                                        : ''} text-{colorClassPart}-700 justify-start"
-                                >
+                                <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"
-                                >
+                                <ul class="list-disc space-y-1 pl-5 text-{colorClassPart}-700">
                                     {#each listItems as listItem}
                                         <li>{listItem}</li>
                                     {/each}
@@ -307,7 +255,7 @@
                             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>
-                            <XMark />
+                            <XMarkIcon />
                         </button>
                     </div>
                 </div>
diff --git a/apps/kit/src/lib/components/button.svelte b/apps/kit/src/lib/components/button.svelte
index 323c7ad..d345b37 100644
--- a/apps/kit/src/lib/components/button.svelte
+++ b/apps/kit/src/lib/components/button.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <script lang="ts">
-    import { Spinner } from "./icons";
+    import { SpinnerIcon } from "./icons";
 
     export let kind = "primary" as ButtonKind;
     export let size = "md" as ButtonSize;
@@ -54,18 +54,15 @@
 
     $: switch (kind) {
         case "secondary":
-            kindClasses =
-                "border-transparent text-teal-800 bg-teal-100 hover:bg-teal-200 focus:ring-teal-500";
+            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";
+            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";
+            kindClasses = "border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-gray-400";
             spinnerTextClasses = "text-gray-700";
             break;
     }
@@ -76,14 +73,12 @@
         {...shared_props}
         {href}
         on:click
-        class="{sizeClasses} {kindClasses} {loading
-            ? 'disabled:'
-            : ''} {$$restProps.class ?? ''} {fullWidth
+        class="{sizeClasses} {kindClasses} {loading ? 'disabled:' : ''} {$$restProps.class ?? ''} {fullWidth
             ? 'w-full justify-center'
             : ''} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2"
     >
         {#if loading}
-            <Spinner class={spinnerTextClasses + " " + spinnerMarginClasses} />
+            <SpinnerIcon class={spinnerTextClasses + " " + spinnerMarginClasses} />
         {/if}
         {text}
     </a>
@@ -95,7 +90,7 @@
             : ''} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2"
     >
         {#if loading}
-            <Spinner class={spinnerTextClasses + " " + spinnerMarginClasses} />
+            <SpinnerIcon class={spinnerTextClasses + " " + spinnerMarginClasses} />
         {/if}
         {text}
     </button>
diff --git a/apps/kit/src/lib/components/icons/bars-3-center-left.svelte b/apps/kit/src/lib/components/icons/bars-3-center-left.svelte
new file mode 100644
index 0000000..785ece3
--- /dev/null
+++ b/apps/kit/src/lib/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/apps/kit/src/lib/components/icons/calendar.svelte b/apps/kit/src/lib/components/icons/calendar.svelte
new file mode 100644
index 0000000..e0053ee
--- /dev/null
+++ b/apps/kit/src/lib/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/apps/kit/src/lib/components/icons/chevron-up-down.svelte b/apps/kit/src/lib/components/icons/chevron-up-down.svelte
new file mode 100644
index 0000000..c07aed5
--- /dev/null
+++ b/apps/kit/src/lib/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/apps/kit/src/lib/components/icons/folder-open.svelte b/apps/kit/src/lib/components/icons/folder-open.svelte
new file mode 100644
index 0000000..409c8e2
--- /dev/null
+++ b/apps/kit/src/lib/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/apps/kit/src/lib/components/icons/index.ts b/apps/kit/src/lib/components/icons/index.ts
index e846dc4..8c24873 100644
--- a/apps/kit/src/lib/components/icons/index.ts
+++ b/apps/kit/src/lib/components/icons/index.ts
@@ -3,25 +3,39 @@ import MenuIcon from "./menu.svelte";
 import AdjustmentsIcon from "./adjustments.svelte";
 import DatabaseIcon from "./database.svelte";
 import HomeIcon from "./home.svelte";
-import InformationCircle from "./information-circle.svelte";
-import ExclamationTriangle from "./exclamation-triangle.svelte";
-import XCircle from "./x-circle.svelte";
-import CheckCircle from "./check-circle.svelte";
-import XMark from "./x-mark.svelte";
-import Spinner from "./spinner.svelte";
-import ExclamationCircle from "./exclamation-circle.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";
 
 export {
+    QueueListIcon,
+    FolderOpenIcon,
+    MegaphoneIcon,
+    CalendarIcon,
+    Bars3CenterLeftIcon,
+    MagnifyingGlassIcon,
+    ChevronUpDownIcon,
     XIcon,
     MenuIcon,
     HomeIcon,
     DatabaseIcon,
     AdjustmentsIcon,
-    InformationCircle,
-    ExclamationTriangle,
-    ExclamationCircle,
-    XCircle,
-    CheckCircle,
-    XMark,
-    Spinner
+    InformationCircleIcon,
+    ExclamationTriangleIcon,
+    ExclamationCircleIcon,
+    XCircleIcon,
+    CheckCircleIcon,
+    XMarkIcon,
+    SpinnerIcon
 }
\ No newline at end of file
diff --git a/apps/kit/src/lib/components/icons/magnifying-glass.svelte b/apps/kit/src/lib/components/icons/magnifying-glass.svelte
new file mode 100644
index 0000000..f8fdb6e
--- /dev/null
+++ b/apps/kit/src/lib/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/apps/kit/src/lib/components/icons/megaphone.svelte b/apps/kit/src/lib/components/icons/megaphone.svelte
new file mode 100644
index 0000000..7ada5f3
--- /dev/null
+++ b/apps/kit/src/lib/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/apps/kit/src/lib/components/icons/queue-list.svelte b/apps/kit/src/lib/components/icons/queue-list.svelte
new file mode 100644
index 0000000..6148394
--- /dev/null
+++ b/apps/kit/src/lib/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/apps/kit/src/lib/components/input.svelte b/apps/kit/src/lib/components/input.svelte
index 6063fe4..999c565 100644
--- a/apps/kit/src/lib/components/input.svelte
+++ b/apps/kit/src/lib/components/input.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { random_string } from "$lib/helpers";
-    import { ExclamationCircle } from "./icons";
+    import { ExclamationCircleIcon } from "./icons";
 
     export let label: string | undefined = undefined;
     export let type: string = "text";
@@ -28,12 +28,10 @@
         required: required || null,
     } as any;
     $: hasBling = icon || addon || errorText;
-    const defaultColorClass =
-        "border-gray-300 focus:border-teal-500 focus:ring-teal-500";
+    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";
+        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;
     }
@@ -45,23 +43,13 @@
 
 <div class={wrapperClass}>
     {#if label && !cornerHint && !hideLabel}
-        <label
-            for={id}
-            class={hideLabel
-                ? "sr-only"
-                : "block text-sm font-medium text-gray-700"}
-        >
+        <label for={id} class={hideLabel ? "sr-only" : "block text-sm font-medium text-gray-700"}>
             {label}
         </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 for={id} class={hideLabel ? "sr-only" : "block text-sm font-medium text-gray-700"}>
                     {label}
                 </label>
             {/if}
@@ -70,24 +58,13 @@
             </span>
         </div>
     {/if}
-    <div
-        class="mt-1 {hasBling ? 'relative rounded-md' : ''} {addon
-            ? 'flex'
-            : ''}"
-    >
+    <div class="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 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"
-            >
+            <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}
@@ -97,19 +74,16 @@
             {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'
-                : ''}"
+            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"
-            >
-                <ExclamationCircle class="text-red-500" />
+            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                <ExclamationCircleIcon class="text-red-500" />
             </div>
         {/if}
     </div>
diff --git a/apps/kit/src/lib/components/locale-switcher.svelte b/apps/kit/src/lib/components/locale-switcher.svelte
index 39d6168..1f9eb37 100644
--- a/apps/kit/src/lib/components/locale-switcher.svelte
+++ b/apps/kit/src/lib/components/locale-switcher.svelte
@@ -1,51 +1,32 @@
 <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";
+    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,
-    ) => {
+    const switchLocale = async (newLocale: Locales) => {
         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);
+        switchLocale($page.params.lang as Locales);
     }
 </script>
 
-<svelte:window on:popstate={handlePopStateEvent}/>
-
 <ul>
-    {#each locales as l}
+    {#each locales as aLocale}
         <li>
             <button
-                    type="button"
-                    class:active={l === $locale}
-                    on:click={() => switchLocale(l)}
+                type="button"
+                class:active={aLocale === $locale}
+                on:click={() => switchLocale(aLocale)}
             >
-                {l}
+                {aLocale}
             </button>
         </li>
     {/each}