refactor: page routing

feat: base order and product view pages

feat: base auth state

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> 
+</footer>

web/src/components/LightDarkMode.svelte

@@ -24,4 +24,6 @@
   </script>
 </svelte:head>
 
-<Switch {checked} {onCheckedChange}></Switch>
+<div>
+  <Switch {checked} {onCheckedChange}></Switch>
+</div>

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" />
 

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>

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>

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>

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
+    };
+};

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>

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');
+};

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 }
+  });
+}