feat: Move frontend into layout group (main)

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

18 files changed, 97 insertions, 37 deletions

diff --git a/apps/kit/src/app.pcss b/apps/kit/src/app.pcss
index 78a8e0b..d256fea 100644
--- a/apps/kit/src/app.pcss
+++ b/apps/kit/src/app.pcss
@@ -20,3 +20,15 @@ pre {
 .c-disabled.loading {
     cursor: wait !important;
 }
+
+.link {
+    @apply text-blue-600 hover:text-blue-700 transition duration-300 ease-in-out mb-4;
+
+    &.danger {
+        @apply text-red-600 hover:text-red-700;
+    }
+
+    &.active {
+        @apply underline
+    }
+}
\ No newline at end of file
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}
diff --git a/apps/kit/src/lib/helpers.ts b/apps/kit/src/lib/helpers.ts
index c2a811e..c4e2e51 100644
--- a/apps/kit/src/lib/helpers.ts
+++ b/apps/kit/src/lib/helpers.ts
@@ -123,7 +123,9 @@ export function set_favicon(url: string) {
         document.head.appendChild(link);
     }
 }
-
+export function no_type_check(x: any) {
+    return x;
+}
 export function capitalise(value: string): string {
     return value.charAt(0).toUpperCase() + value.slice(1);
 }
diff --git a/apps/kit/src/routes/(app)/+layout.svelte b/apps/kit/src/routes/(main)/(app)/+layout.svelte
index 3f60af3..3f60af3 100644
--- a/apps/kit/src/routes/(app)/+layout.svelte
+++ b/apps/kit/src/routes/(main)/(app)/+layout.svelte
diff --git a/apps/kit/src/routes/(app)/home/+page.svelte b/apps/kit/src/routes/(main)/(app)/home/+page.svelte
index 247ee47..247ee47 100644
--- a/apps/kit/src/routes/(app)/home/+page.svelte
+++ b/apps/kit/src/routes/(main)/(app)/home/+page.svelte
diff --git a/apps/kit/src/routes/(main)/(public)/+layout.svelte b/apps/kit/src/routes/(main)/(public)/+layout.svelte
new file mode 100644
index 0000000..49aeb95
--- /dev/null
+++ b/apps/kit/src/routes/(main)/(public)/+layout.svelte
@@ -0,0 +1 @@
+<slot></slot>
\ No newline at end of file
diff --git a/apps/kit/src/routes/(public)/login/+page.svelte b/apps/kit/src/routes/(main)/(public)/login/+page.svelte
index 9e2f6e7..9e2f6e7 100644
--- a/apps/kit/src/routes/(public)/login/+page.svelte
+++ b/apps/kit/src/routes/(main)/(public)/login/+page.svelte
diff --git a/apps/kit/src/routes/(public)/reset/+page.svelte b/apps/kit/src/routes/(main)/(public)/reset/+page.svelte
index 5092b4b..5092b4b 100644
--- a/apps/kit/src/routes/(public)/reset/+page.svelte
+++ b/apps/kit/src/routes/(main)/(public)/reset/+page.svelte
diff --git a/apps/kit/src/routes/(public)/signup/+page.svelte b/apps/kit/src/routes/(main)/(public)/signup/+page.svelte
index d4a1bda..d4a1bda 100644
--- a/apps/kit/src/routes/(public)/signup/+page.svelte
+++ b/apps/kit/src/routes/(main)/(public)/signup/+page.svelte
diff --git a/apps/kit/src/routes/+layout.server.ts b/apps/kit/src/routes/(main)/+layout.server.ts
index 01aae89..01aae89 100644
--- a/apps/kit/src/routes/+layout.server.ts
+++ b/apps/kit/src/routes/(main)/+layout.server.ts
diff --git a/apps/kit/src/routes/+layout.svelte b/apps/kit/src/routes/(main)/+layout.svelte
index f8cdf83..e5b177e 100644
--- a/apps/kit/src/routes/+layout.svelte
+++ b/apps/kit/src/routes/(main)/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import "../app.pcss";
+    import "../../app.pcss";
     import { afterNavigate, beforeNavigate, goto } from "$app/navigation";
     import { is_active } from "$lib/session";
     import type { Navigation } from "@sveltejs/kit";
@@ -17,7 +17,7 @@
         const isPublicRoute =
             (ticket.to?.routeId?.startsWith("(public)") ?? true) ||
             ticket.to?.routeId?.startsWith("book");
-        console.log(ticket);
+
         console.log("redir: ", {
             isPublicRoute,
             sessionIsValid,
diff --git a/apps/kit/src/routes/+layout.ts b/apps/kit/src/routes/(main)/+layout.ts
index de8a5c0..de8a5c0 100644
--- a/apps/kit/src/routes/+layout.ts
+++ b/apps/kit/src/routes/(main)/+layout.ts
diff --git a/apps/kit/src/routes/+page.svelte b/apps/kit/src/routes/(main)/+page.svelte
index 85a4d2d..85a4d2d 100644
--- a/apps/kit/src/routes/+page.svelte
+++ b/apps/kit/src/routes/(main)/+page.svelte
diff --git a/apps/kit/src/routes/(public)/+layout.svelte b/apps/kit/src/routes/(public)/+layout.svelte
deleted file mode 100644
index 84cd442..0000000
--- a/apps/kit/src/routes/(public)/+layout.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<script>
-</script>
-<slot></slot>
\ No newline at end of file
diff --git a/apps/kit/src/routes/book/+layout.svelte b/apps/kit/src/routes/book/+layout.svelte
index 0fcbd51..85ba907 100644
--- a/apps/kit/src/routes/book/+layout.svelte
+++ b/apps/kit/src/routes/book/+layout.svelte
@@ -1,9 +1,22 @@
 <script>
+    import { page } from "$app/stores";
+    import "../../app.pcss";
 </script>
 
 <div id="wrapper">
-    <nav>
-        <a href="/book/alerts" class="link">Alerts</a>
+    <nav class="flex flex-col">
+        <a
+            href="/book/alerts"
+            class="link"
+            class:active={$page.url.pathname.startsWith("/book/alerts")}
+            >Alerts</a
+        >
+        <a
+            href="/book/buttons"
+            class="link"
+            class:active={$page.url.pathname.startsWith("/book/alerts")}
+            >Buttons</a
+        >
     </nav>
     <main>
         <slot />
diff --git a/apps/kit/src/routes/book/alerts/+page.svelte b/apps/kit/src/routes/book/alerts/+page.svelte
index 566ccca..15084ca 100644
--- a/apps/kit/src/routes/book/alerts/+page.svelte
+++ b/apps/kit/src/routes/book/alerts/+page.svelte
@@ -7,7 +7,6 @@
     <h2>Info</h2>
     <Alert type="info" message="This is message" title="This is title" />
 </section>
-
 <section>
     <h2>Warning</h2>
     <Alert type="warning" message="This is message" title="This is title" />
@@ -31,7 +30,6 @@
             {
                 id: "confirm",
                 text: "Yes!",
-                color: "green",
             },
             {
                 id: "cancel",
@@ -48,7 +46,7 @@
         rightLinkText="Link or action"
         title="Go here"
         message="Hehe"
-        type="info"
+        type="error"
     />
 </section>
 <section>
diff --git a/apps/kit/src/routes/book/buttons/+page.svelte b/apps/kit/src/routes/book/buttons/+page.svelte
new file mode 100644
index 0000000..c8e8c93
--- /dev/null
+++ b/apps/kit/src/routes/book/buttons/+page.svelte
@@ -0,0 +1,24 @@
+<script>
+    import Button from "$lib/components/button.svelte";
+</script>
+
+<h1>Buttons</h1>
+<section>
+    <h2>Primary</h2>
+    <div class="">
+        <Button kind="primary" text="Normal" />
+        <Button kind="primary" text="Large" size="lg" />
+        <Button kind="primary" text="Medium" size="md" />
+        <Button kind="primary" text="Small" size="sm" />
+        <Button kind="primary" text="Extra large" size="xl" />
+        <Button kind="primary" text="Extra small" size="xs" />
+    </div>
+</section>
+<section>
+    <h2>Secondary</h2>
+    <Button kind="secondary" text="Click me!" />
+</section>
+<section>
+    <h2>White</h2>
+    <Button kind="white" text="Click me!" />
+</section>