From 21cb4f5cfb36380317c1fee331e9c0d86775dc39 Mon Sep 17 00:00:00 2001
From: Declan Teevan <dt@hexolan.com>
Date: Thu, 25 Sep 2025 22:16:33 +0100
Subject: [PATCH] refactor: page routing

feat: base order and product view pages

feat: base auth state
---
 web/src/components/Footer.svelte          |  4 +-
 web/src/components/LightDarkMode.svelte   |  4 +-
 web/src/components/Navbar.svelte          |  2 +-
 web/src/lib/types/general.ts              |  0
 web/src/routes/+layout.svelte             | 15 +++-
 web/src/routes/+page.svelte               | 83 +----------------------
 web/src/routes/orders/[id]/+page.svelte   |  7 ++
 web/src/routes/orders/[id]/+page.ts       |  7 ++
 web/src/routes/products/[id]/+page.svelte |  7 ++
 web/src/routes/products/[id]/+page.ts     | 10 +++
 web/src/stores/auth.ts                    | 28 ++++++++
 web/src/stores/cart.ts                    |  0
 12 files changed, 82 insertions(+), 85 deletions(-)
 create mode 100644 web/src/lib/types/general.ts
 create mode 100644 web/src/routes/orders/[id]/+page.svelte
 create mode 100644 web/src/routes/orders/[id]/+page.ts
 create mode 100644 web/src/routes/products/[id]/+page.svelte
 create mode 100644 web/src/routes/products/[id]/+page.ts
 create mode 100644 web/src/stores/auth.ts
 create mode 100644 web/src/stores/cart.ts

diff --git a/web/src/components/Footer.svelte b/web/src/components/Footer.svelte
index 64d385e..4c9768a 100644
--- a/web/src/components/Footer.svelte
+++ b/web/src/components/Footer.svelte
@@ -2,9 +2,9 @@
 	import LightDarkMode from './LightDarkMode.svelte';
 </script>
 
-<footer class="border-t border-surface-300-600 bg-surface-100-800">
+<footer class="border-t border-surface-200-800 bg-surface-100-900 fixed bottom-0 w-full z-10">
 	<div class="mx-auto flex w-full max-w-7xl items-center justify-between px-4 py-6 text-sm text-surface-700-300">
 		<span>Stocklet</span>
 		<LightDarkMode />
 	</div>
-</footer> 
\ No newline at end of file
+</footer>
\ No newline at end of file
diff --git a/web/src/components/LightDarkMode.svelte b/web/src/components/LightDarkMode.svelte
index a9f46f5..a6c5fee 100644
--- a/web/src/components/LightDarkMode.svelte
+++ b/web/src/components/LightDarkMode.svelte
@@ -24,4 +24,6 @@
   </script>
 </svelte:head>
 
-<Switch {checked} {onCheckedChange}></Switch>
\ No newline at end of file
+<div>
+  <Switch {checked} {onCheckedChange}></Switch>
+</div>
\ No newline at end of file
diff --git a/web/src/components/Navbar.svelte b/web/src/components/Navbar.svelte
index d05036b..66456a3 100644
--- a/web/src/components/Navbar.svelte
+++ b/web/src/components/Navbar.svelte
@@ -15,7 +15,7 @@
                 </a>
             </div>
 
-            <Navigation.Bar classes="bg-transparent w-auto h-12 p-0 mx-12">
+            <Navigation.Bar classes="bg-transparent w-auto p-0 mx-12">
                 <Navigation.Tile href="/" label="Home" />
                 <Navigation.Tile href="/about" label="About" />
 
diff --git a/web/src/lib/types/general.ts b/web/src/lib/types/general.ts
new file mode 100644
index 0000000..e69de29
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 8c56a3c..09c3e1d 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import Navbar from '../components/Navbar.svelte';
+	import Footer from '../components/Footer.svelte';
+
 	import '../app.css';
 	import favicon from '$lib/assets/favicon.svg';
 
@@ -6,7 +9,17 @@
 </script>
 
 <svelte:head>
+	<title>Stocklet</title>
+
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
-{@render children?.()}
+<main data-theme="catppuccin" class="min-h-screen h-full">
+	<div>
+		<Navbar />
+
+		{@render children?.()}
+
+		<Footer />
+	</div>
+</main>
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 9ed498a..c3b695f 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,84 +1,7 @@
 <script lang="ts">
-	import { Avatar, Rating } from '@skeletonlabs/skeleton-svelte';
-	import Navbar from '../components/Navbar.svelte';
-	import Footer from '../components/Footer.svelte';
+
 </script>
 
-<div data-theme="catppuccin" class="min-h-screen flex flex-col">
-	<!-- Navbar -->
-	<Navbar />
-
-	<!-- Hero -->
-	<section class="relative overflow-hidden bg-surface-50-950">
-		<div class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
-			<div class="grid items-center gap-12 md:grid-cols-2">
-				<div>
-					<h1 class="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">
-						Phasellus ut pulvinar nisl.
-					</h1>
-					<p class="mt-6 max-w-prose text-lg opacity-80">
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim odio orci, in volutpat nunc lacinia et. Phasellus ut dictum nibh. Donec hendrerit nunc sed elit porttitor, in efficitur arcu hendrerit.
-                        Aenean erat est, maximus id congue ut, venenatis eu nibh. Vivamus vitae varius erat, eu tempor urna. Aenean viverra sed erat sed viverra. Fusce vulputate, mauris eget hendrerit venenatis, eros felis rutrum orci, in commodo mauris elit sit amet arcu.
-					</p>
-					<div class="mt-8 flex flex-wrap items-center gap-3">
-						<a href="#get-started" class="rounded-container preset-filled-primary-500 px-5 py-3 text-sm">Start browsing</a>
-						<a href="/docs" class="rounded-container border border-surface-300-700 px-5 py-3 text-sm hover:bg-surface-100-900">Check orders</a>
-					</div>
-				</div>
-				<div class="relative">
-					<div class="aspect-[4/3] w-full overflow-hidden rounded-container border border-surface-200-800 bg-surface-50-950 shadow-sm">
-						<div class="h-full w-full opacity-70" style="background: conic-gradient(at 20% 20%, var(--color-primary-50), transparent, var(--color-primary-50));"></div>
-					</div>
-					<div class="pointer-events-none absolute -right-10 -top-10 h-40 w-40 rounded-full preset-filled-secondary-500 blur-2xl opacity-20"></div>
-				</div>
-			</div>
-		</div>
-	</section>
-
-	<!-- Testimonials -->
-	<section id="testimonials" class="bg-surface-50-950">
-		<div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
-			<h2 class="text-center text-3xl font-bold tracking-tight sm:text-4xl">Loved by providers</h2>
-			<p class="mx-auto mt-3 max-w-2xl text-center opacity-80">
-				Providers use Stocklet to sell their products with confidence.
-			</p>
-			<div class="mt-10 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-				<figure class="rounded-container border border-surface-200-800 bg-surface-50-950 p-6 shadow-sm">
-					<blockquote>“Vivamus sit amet est eu urna lobortis cursus sed at odio.”</blockquote>
-					<figcaption class="mt-4 flex items-center gap-3 text-sm opacity-70">
-						<Avatar name="John Doe" classes="h-8 w-8" />
-						<div>
-							<div class="font-medium">John Doe</div>
-							<div>CEO, Acme Inc.</div>
-						</div>
-						<Rating value={5} readOnly controlGap="gap-1" />
-					</figcaption>
-				</figure>
-				<figure class="rounded-container border border-surface-200-800 bg-surface-50-950 p-6 shadow-sm">
-					<blockquote>“Aliquam velit augue, varius quis est ac, interdum tincidunt lorem.”</blockquote>
-					<figcaption class="mt-4 flex items-center gap-3 text-sm opacity-70">
-						<Avatar name="Jane Doe" classes="h-8 w-8" />
-						<div>
-							<div class="font-medium">Jane Doe</div>
-							<div>Product Lead, Wayne Industries.</div>
-						</div>
-						<Rating value={5} readOnly controlGap="gap-1" />
-					</figcaption>
-				</figure>
-				<figure class="rounded-container border border-surface-200-800 bg-surface-50-950 p-6 shadow-sm">
-					<blockquote>“Aliquam a lobortis nisi. Nullam varius a diam nec vulputate.”</blockquote>
-					<figcaption class="mt-4 flex items-center gap-3 text-sm opacity-70">
-						<Avatar name="Alice Wonderland" classes="h-8 w-8" />
-						<div>
-							<div class="font-medium">Alice Wonderland</div>
-							<div>Managing Directory, E Corp.</div>
-						</div>
-						<Rating value={5} readOnly controlGap="gap-1" />
-					</figcaption>
-				</figure>
-			</div>
-		</div>
-	</section>
-
-	<Footer />
+<div>
+	<h5 class="text-xl">Homepage</h5>
 </div>
diff --git a/web/src/routes/orders/[id]/+page.svelte b/web/src/routes/orders/[id]/+page.svelte
new file mode 100644
index 0000000..21122cf
--- /dev/null
+++ b/web/src/routes/orders/[id]/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import type { PageProps } from './$types';
+
+	let { data }: PageProps = $props();
+</script>
+
+<h1>Order ID: {data.id}</h1>
\ No newline at end of file
diff --git a/web/src/routes/orders/[id]/+page.ts b/web/src/routes/orders/[id]/+page.ts
new file mode 100644
index 0000000..12a0e43
--- /dev/null
+++ b/web/src/routes/orders/[id]/+page.ts
@@ -0,0 +1,7 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = ({ params }) => {
+    return {
+        id: params.id
+    };
+};
\ No newline at end of file
diff --git a/web/src/routes/products/[id]/+page.svelte b/web/src/routes/products/[id]/+page.svelte
new file mode 100644
index 0000000..ac264e3
--- /dev/null
+++ b/web/src/routes/products/[id]/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import type { PageProps } from './$types';
+
+	let { data }: PageProps = $props();
+</script>
+
+<h1>Product ID: {data.id}</h1>
\ No newline at end of file
diff --git a/web/src/routes/products/[id]/+page.ts b/web/src/routes/products/[id]/+page.ts
new file mode 100644
index 0000000..39a8737
--- /dev/null
+++ b/web/src/routes/products/[id]/+page.ts
@@ -0,0 +1,10 @@
+// import { error } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = ({ params }) => {
+  return {
+    id: params.id
+  };
+
+  // error(404, 'Product not found');
+};
\ No newline at end of file
diff --git a/web/src/stores/auth.ts b/web/src/stores/auth.ts
new file mode 100644
index 0000000..c0c7d6e
--- /dev/null
+++ b/web/src/stores/auth.ts
@@ -0,0 +1,28 @@
+import { writable } from 'svelte/store';
+import type { components } from "$lib/api/schema";
+
+type AuthStore = {
+  profile: components["schemas"]["v1User"] | null;
+  tokens: components["schemas"]["v1AuthToken"] | null;
+  isLoading: boolean;
+};
+
+const INITIAL_AUTH_STATE: AuthStore = {
+  profile: null,
+  tokens: null,
+  isLoading: false
+};
+
+export const authState = writable<AuthStore>(INITIAL_AUTH_STATE);
+
+export function setTokens(value: components["schemas"]["v1AuthToken"]): void {
+  authState.update((currentState) => {
+    return { ...currentState, tokens: value }
+  });
+}
+
+export function setProfile(value: components["schemas"]["v1User"]): void {
+  authState.update((currentState) => {
+    return { ...currentState, profile: value }
+  });
+}
\ No newline at end of file
diff --git a/web/src/stores/cart.ts b/web/src/stores/cart.ts
new file mode 100644
index 0000000..e69de29