Merge pull request #117 from Kerosene-Labs/tweaking-nav

tweaking nav, moving around private features to a /app route
Kerosene-Labs · Dec 23, 2024 · a3614ca · a3614ca
2 parents 4906053 + 0646246
commit a3614ca
Show file tree

Hide file tree

Showing 18 changed files with 84 additions and 62 deletions.
diff --git a/src/main/svelte/src/lib/components/BaseNavLayout.svelte b/src/main/svelte/src/lib/components/BaseNavLayout.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
     import Nav from "$lib/components/Nav.svelte";
-
-    export let justifyCenter: boolean = true;
 </script>
 
 <Nav>
-    <div class="flex flex-col items-center min-h-full" class:justify-center={justifyCenter}>
+    <div class="flex flex-col items-center min-h-full">
         <div class="flex flex-col  p-8 min-h-full gap-6">
             <slot></slot>
         </div>

diff --git a/src/main/svelte/src/lib/components/Nav.svelte b/src/main/svelte/src/lib/components/Nav.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import NavItem from "$lib/components/NavItem.svelte";
     import NavUserCard from "$lib/components/NavUserCard.svelte";
+    import {goto} from "$app/navigation";
 
     export let drawerOpen: boolean = false;
 
@@ -22,11 +23,11 @@
         </button>
     </div>
     <div id="drawer"
-         class="inset-y-y fixed h-screen w-[90%] lg:w-[25%] bg-neutral-950 z-20 translate-x-[-100%] transition-all"
+         class="inset-y-y fixed h-screen w-[90%] lg:w-96 bg-neutral-900 z-20 translate-x-[-100%] transition-all"
          class:translate-x-[0%]={drawerOpen} class:pointer-events-none={!drawerOpen}>
         <div class="flex flex-col pt-14">
             <NavUserCard></NavUserCard>
-            <NavItem>
+            <NavItem on:click={() => {goto("/app/home"); toggleDrawer()}}>
                 <div class="flex flex-row gap-4 items-center">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                          stroke="currentColor" class="size-8">
@@ -54,13 +55,12 @@
                     <p>Income</p>
                 </div>
             </NavItem>
-            <NavItem>
+            <NavItem on:click={() => {goto("/app/settings"); toggleDrawer()}}>
                 <div class="flex flex-row gap-4 items-center">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
                         <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                     </svg>
-
                     <p>Settings</p>
                 </div>
             </NavItem>

diff --git a/src/main/svelte/src/lib/components/NavItem.svelte b/src/main/svelte/src/lib/components/NavItem.svelte
@@ -1,3 +1,3 @@
-<button class="text-neutral-200 text-left font-semibold text-4xl pl-4 active:bg-neutral-900 hover:bg-neutral-800 transition-colors p-4">
+<button on:click class="text-neutral-200 text-left font-semibold text-xl pl-4 active:bg-neutral-800/50  hover:bg-neutral-800/25 transition-colors p-4">
     <slot></slot>
 </button>
diff --git a/src/main/svelte/src/lib/components/NavUserCard.svelte b/src/main/svelte/src/lib/components/NavUserCard.svelte
@@ -4,14 +4,15 @@
     import {onMount} from "svelte";
     import {ResponseError, SettingsApi} from "$lib/sdk";
     import {addToToastQueue, ToastType} from "$lib/toast";
-    import Card from "$lib/tk/Card.svelte";
+    import Spinner from "$lib/tk/Spinner.svelte";
+
+    let loading: boolean = true;
 
     onMount(async () => {
         new SettingsApi(getPrivateApiConfig()).getIntroductions()
             .then((response) => {
+                    loading = false;
                     firstName = response.introductorySettings!.firstName!;
-                    // lastName = response.introductorySettings!.lastName!;
-                    // birthday = response.introductorySettings!.birthday!;
                 }
             ).catch(async (error: ResponseError) => {
             await getErrorMessageFromSdk(error)
@@ -22,8 +23,15 @@
 
 </script>
 
-<div class="bg-neutral-800 py-8 px-4 flex flex-col gap-2">
-    <h1>Hello, {firstName}.</h1>
-    <p class="text-neutral-300 font-semibold">Did you know that Octopuses have three hearts, and two of them stop beating when they swim!</p>
+<div class="bg-neutral-800 py-8 px-4 flex flex-col gap-4 rounded-b-xl">
+    {#if !loading}
+        <h1>Hello, {firstName}.</h1>
+        <p class="text-neutral-300 font-semibold">Did you know that Octopuses have three hearts, and two of them stop
+            beating when they swim!</p>
+    {:else}
+        <div class="flex w-full justify-center">
+            <Spinner></Spinner>
+        </div>
+    {/if}
     <Button on:click={doLogOut}>Log Out</Button>
 </div>
diff --git a/src/main/svelte/src/lib/sdkUtil.ts b/src/main/svelte/src/lib/sdkUtil.ts
@@ -36,6 +36,7 @@ export async function getErrorMessageFromSdk(error: ResponseError): Promise<stri
 }
 
 export function doLogOut() {
+    addToToastQueue({message: "You've been signed out.", type: ToastType.INFO});
     sessionStorage.removeItem("jwt");
     goto("/");
 }
diff --git a/src/main/svelte/src/lib/tk/Card.svelte b/src/main/svelte/src/lib/tk/Card.svelte
@@ -23,5 +23,6 @@
         @apply bg-neutral-900/35;
         @apply w-full;
         @apply break-words;
+        @apply drop-shadow-xl;
     }
 </style>
diff --git a/src/main/svelte/src/routes/+layout.svelte b/src/main/svelte/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-	import '../app.css';
+    import '../app.css';
     import ToastQueue from "$lib/tk/ToastQueue.svelte";
+    import BaseNavLayout from "$lib/components/BaseNavLayout.svelte";
 
     const unprotectedRoutes: string[] = ["/login", "/signup", "/"]
 
@@ -11,9 +12,8 @@
     //     await validateAndEnforceSession();
     // });
 
-	let { children } = $props();
+    let {children} = $props();
 </script>
 
 <ToastQueue></ToastQueue>
-
 {@render children()}
diff --git a/src/main/svelte/src/routes/+page.svelte b/src/main/svelte/src/routes/+page.svelte
@@ -1,25 +1,8 @@
 <script lang="ts">
-    import Button from "$lib/tk/Button.svelte";
-    import Card from "$lib/tk/Card.svelte";
+    import {onMount} from "svelte";
+    import {goto} from "$app/navigation";
 
-    const googleOauthUri = import.meta.env.VITE_GOOGLE_OAUTH_URI;
-
-    // do oauth signin with google
-    function doSignInWithGoogle() {
-        window.location.href = googleOauthUri;
-    }
-
-</script>
-
-<div class="flex flex-col justify-center items-center min-h-full">
-    <div class="flex flex-col max-w-96">
-        <Card title="Welcome" subtitle="We're so excited to have you. Please log in with one of the following providers.">
-            <div class="flex flex-col gap-2">
-                <Button on:click={doSignInWithGoogle}>Sign in with Google</Button>
-                <Button disabled={true}>Sign in with Apple</Button>
-                <Button disabled={true}>Sign in with Microsoft</Button>
-                <Button disabled={true}>Sign in with E-Mail</Button>
-            </div>
-        </Card>
-    </div>
-</div>
+    onMount(() => {
+        goto("/login");
+    })
+</script>
diff --git a/src/main/svelte/src/routes/app/+layout.svelte b/src/main/svelte/src/routes/app/+layout.svelte
@@ -0,0 +1,7 @@
+<script>
+    import BaseNavLayout from "$lib/components/BaseNavLayout.svelte";
+</script>
+
+<BaseNavLayout>
+    <slot></slot>
+</BaseNavLayout>
diff --git a/...ain/svelte/src/routes/home/+layout.svelte → ...svelte/src/routes/app/home/+layout.svelte b/...ain/svelte/src/routes/home/+layout.svelte → ...svelte/src/routes/app/home/+layout.svelte
@@ -3,6 +3,4 @@
     import BaseNavLayout from "$lib/components/BaseNavLayout.svelte";
 </script>
 
-<BaseNavLayout justifyCenter={false}>
-    <slot></slot>
-</BaseNavLayout>
+<slot></slot>
diff --git a/src/main/svelte/src/routes/app/home/+page.svelte b/src/main/svelte/src/routes/app/home/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import Card from "$lib/tk/Card.svelte";
+
+    document.title = "Home | BillTracker"
+</script>
+
+<Card title="Projections" subtitle="There's nothing here yet. Check back soon."></Card>
diff --git a/src/main/svelte/src/routes/app/settings/+layout.svelte b/src/main/svelte/src/routes/app/settings/+layout.svelte
@@ -0,0 +1,4 @@
+<script>
+</script>
+
+<slot></slot>
diff --git a/...n/svelte/src/routes/settings/+page.svelte → ...elte/src/routes/app/settings/+page.svelte b/...n/svelte/src/routes/settings/+page.svelte → ...elte/src/routes/app/settings/+page.svelte
diff --git a/src/main/svelte/src/routes/home/+page.svelte b/src/main/svelte/src/routes/home/+page.svelte
diff --git a/src/main/svelte/src/routes/login/+layout.svelte b/src/main/svelte/src/routes/login/+layout.svelte
@@ -0,0 +1,7 @@
+<script>
+    import BaseLayout from "$lib/components/BaseLayout.svelte";
+</script>
+
+<BaseLayout justifyCenter={true}>
+    <slot></slot>
+</BaseLayout>
diff --git a/src/main/svelte/src/routes/login/+page.svelte b/src/main/svelte/src/routes/login/+page.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+    import Button from "$lib/tk/Button.svelte";
+    import Card from "$lib/tk/Card.svelte";
+
+    const googleOauthUri = import.meta.env.VITE_GOOGLE_OAUTH_URI;
+
+    // do oauth signin with google
+    function doSignInWithGoogle() {
+        window.location.href = googleOauthUri;
+    }
+
+</script>
+
+<div class="flex flex-col justify-center items-center min-h-full">
+    <div class="flex flex-col max-w-96">
+        <Card title="Welcome" subtitle="We're so excited to have you. Please log in with one of the following providers.">
+            <div class="flex flex-col gap-2">
+                <Button on:click={doSignInWithGoogle}>Sign in with Google</Button>
+                <Button disabled={true}>Sign in with Apple</Button>
+                <Button disabled={true}>Sign in with Microsoft</Button>
+                <Button disabled={true}>Sign in with E-Mail</Button>
+            </div>
+        </Card>
+    </div>
+</div>
diff --git a/src/main/svelte/src/routes/oauth/google/+page.svelte b/src/main/svelte/src/routes/oauth/google/+page.svelte
@@ -17,7 +17,7 @@
         await new OAuth2Api(getPublicApiConfig()).handleToken({handleTokenRequest: {code: code!}})
             .then((response) => {
                 sessionStorage.setItem("jwt", response.jwt!)
-                goto("/home");
+                goto("/app/home");
             })
             .catch(async (error: ResponseError) => {
                 await getErrorMessageFromSdk(error)
@@ -33,7 +33,7 @@
                 <h1>Welcome</h1>
                 <p class="subtitle">Hang tight while we put the finishing touches on your account.</p>
             </div>
-            <div class="flex items-center w-full justify-center">
+            <div class="flex items-center w-min justify-center">
                 <Spinner></Spinner>
             </div>
         </div>

diff --git a/src/main/svelte/src/routes/settings/+layout.svelte b/src/main/svelte/src/routes/settings/+layout.svelte