feat: Move frontend into layout group (main)

This enables /book to load without the usual layout (app layout)

2 files changed, 39 insertions, 26 deletions

diff --git a/apps/kit/src/lib/components/alert.svelte b/apps/kit/src/lib/components/alert.svelte
index 6cc0e63..5bcb3ae 100644
--- a/apps/kit/src/lib/components/alert.svelte
+++ b/apps/kit/src/lib/components/alert.svelte
@@ -17,12 +17,12 @@
     let iconComponent: any;
     let colorClassPart = "";
 
-    // if no unique id is supplied, cooldown will not work between page loads.
-    // Therefore we are disabling it with noCooldownSetting in the fallback id.
     /**
      * 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
@@ -42,7 +42,7 @@
     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 be only shown once per client (State stored in localestorage).
+     * Set to ~ if it should only be shown once per client (State stored in localestorage).
      **/
     export let closeableCooldown = "-1";
     /**
diff --git a/apps/kit/src/lib/components/button.svelte b/apps/kit/src/lib/components/button.svelte
index 5550e5e..6566cec 100644
--- a/apps/kit/src/lib/components/button.svelte
+++ b/apps/kit/src/lib/components/button.svelte
@@ -1,19 +1,23 @@
-<script lang="ts">
-    export type ButtonKind = "primary" | "secondary" | "white"
+<script context="module" lang="ts">
+    export type ButtonKind = "primary" | "secondary" | "white";
     export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
+</script>
+
+<script lang="ts">
     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 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 = false;
-    export let href = undefined;
-    export let text;
+    export let href: string | undefined = undefined;
+    export let text: string;
 
     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";
+    let kindClasses =
+        "border-transparent text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500";
 
     $: shared_props = {
         type: type,
@@ -22,7 +26,7 @@
         disabled: disabled || null,
         tabindex: tabindex || null,
         style: style || null,
-    };
+    } as any;
 
     $: switch (size) {
         case "xs":
@@ -44,29 +48,38 @@
 
     $: switch (kind) {
         case "secondary":
-            kindClasses = "border-transparent text-indigo-700 bg-indigo-100 hover:bg-indigo-200";
+            kindClasses =
+                "border-transparent text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:ring-indigo-500";
             break;
         case "primary":
-            kindClasses = "border-transparent text-white bg-indigo-600 hover:bg-indigo-700";
+            kindClasses =
+                "border-transparent text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500";
             break;
         case "white":
-            kindClasses = "border-gray-300 text-gray-700 bg-white hover:bg-gray-50";
+            kindClasses =
+                "border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-gray-500";
             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">
+    <!--@ts-ignore-->
+    <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"
+    >
         {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">
+    <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"
+    >
         {text}
     </button>
-{/if}
\ No newline at end of file
+{/if}