Add redirect routes and version selector to overview pages

- Create /[package]/api redirect to /[package]/[version]/api
- Create /[package]/examples redirect to /[package]/[version]/examples
- Add layout load functions for pathsim/chem/vehicle to load manifest
- Show version selector in sidebar on overview pages
- Update sidebar selectVersion to handle overview page (invalidateAll)

Author: milanofthe

src/lib/components/layout/Sidebar.svelte

@@ -52,6 +52,9 @@
 	);
 	let isVersionedPage = $derived(isApiPage || $page.url.pathname.includes('/examples'));
 
+	// Check if we're on an overview page (no /api or /examples in path)
+	let isOverviewPage = $derived(!isApiPage && !$page.url.pathname.includes('/examples'));
+
 	function isActive(path: string): boolean {
 		return $page.url.pathname === `${base}/${path}`;
 	}
@@ -100,30 +103,33 @@
 		versionDropdownOpen = !versionDropdownOpen;
 	}
 
-	function selectVersion(tag: string) {
+	async function selectVersion(tag: string) {
 		versionDropdownOpen = false;
 
-		if (!currentTag) return;
+		// Update stored version preference
+		const { versionStore } = await import('$lib/stores/versionStore');
+		versionStore.setVersion(packageId, tag);
 
 		// Preserve current hash if it exists
 		const hash = typeof window !== 'undefined' ? window.location.hash : '';
 
-		// Get current page type (api or examples)
+		// Get current page type (api or examples or overview)
 		const pathname = $page.url.pathname;
-		let pageType = 'api';
-		let subPath = '';
 
 		if (pathname.includes('/examples/')) {
 			// We're on a specific example page
-			pageType = 'examples';
 			const match = pathname.match(/\/examples\/(.+)$/);
-			subPath = match ? `/${match[1]}` : '';
+			const subPath = match ? `/${match[1]}` : '';
+			goto(`${base}/${packageId}/${tag}/examples${subPath}${hash}`);
 		} else if (pathname.includes('/examples')) {
-			pageType = 'examples';
+			goto(`${base}/${packageId}/${tag}/examples${hash}`);
+		} else if (pathname.includes('/api')) {
+			goto(`${base}/${packageId}/${tag}/api${hash}`);
+		} else {
+			// On overview page - reload to pick up new version
+			const { invalidateAll } = await import('$app/navigation');
+			await invalidateAll();
 		}
-
-		// Navigate to the same page with new version
-		goto(`${base}/${packageId}/${tag}/${pageType}${subPath}${hash}`);
 	}
 
 	function handleVersionClickOutside(event: MouseEvent) {
@@ -188,8 +194,8 @@
 				{/if}
 			</nav>
 		{:else}
-			<!-- Version selector - only show on versioned pages -->
-			{#if isVersionedPage && manifest && currentTag}
+			<!-- Version selector - show whenever manifest is available -->
+			{#if manifest && currentTag}
 				<div class="version-selector-container" bind:this={versionDropdownRef}>
 					<button
 						class="version-selector-trigger"

src/routes/[package]/api/+page.ts

@@ -0,0 +1,36 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+import { packages, type PackageId } from '$lib/config/packages';
+import { getPackageManifest } from '$lib/api/versions';
+import { versionStore } from '$lib/stores/versionStore';
+
+const validPackageIds = new Set<string>(Object.keys(packages));
+
+/**
+ * Redirect /[package]/api to /[package]/[version]/api
+ * Uses stored version or latest if none stored.
+ */
+export const load: PageLoad = async ({ params, fetch }) => {
+	const { package: packageId } = params;
+
+	if (!validPackageIds.has(packageId)) {
+		throw redirect(307, '/');
+	}
+
+	try {
+		const manifest = await getPackageManifest(packageId, fetch);
+
+		// Check for stored version preference
+		const storedVersion = versionStore.getVersionSync(packageId as PackageId);
+		const targetTag = storedVersion || manifest.latestTag;
+
+		throw redirect(307, `/${packageId}/${targetTag}/api`);
+	} catch (e) {
+		// If redirect was thrown, re-throw it
+		if (e && typeof e === 'object' && 'status' in e) {
+			throw e;
+		}
+		// Fallback to package overview if manifest fails
+		throw redirect(307, `/${packageId}`);
+	}
+};

src/routes/[package]/examples/+page.ts

@@ -0,0 +1,36 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+import { packages, type PackageId } from '$lib/config/packages';
+import { getPackageManifest } from '$lib/api/versions';
+import { versionStore } from '$lib/stores/versionStore';
+
+const validPackageIds = new Set<string>(Object.keys(packages));
+
+/**
+ * Redirect /[package]/examples to /[package]/[version]/examples
+ * Uses stored version or latest if none stored.
+ */
+export const load: PageLoad = async ({ params, fetch }) => {
+	const { package: packageId } = params;
+
+	if (!validPackageIds.has(packageId)) {
+		throw redirect(307, '/');
+	}
+
+	try {
+		const manifest = await getPackageManifest(packageId, fetch);
+
+		// Check for stored version preference
+		const storedVersion = versionStore.getVersionSync(packageId as PackageId);
+		const targetTag = storedVersion || manifest.latestTag;
+
+		throw redirect(307, `/${packageId}/${targetTag}/examples`);
+	} catch (e) {
+		// If redirect was thrown, re-throw it
+		if (e && typeof e === 'object' && 'status' in e) {
+			throw e;
+		}
+		// Fallback to package overview if manifest fails
+		throw redirect(307, `/${packageId}`);
+	}
+};

src/routes/chem/+layout.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
 	import { DocLayout } from '$lib/components/layout';
 	import type { Snippet } from 'svelte';
+	import type { LayoutData } from './$types';
 
 	interface Props {
+		data: LayoutData;
 		children: Snippet;
 	}
 
-	let { children }: Props = $props();
+	let { data, children }: Props = $props();
 </script>
 
-<DocLayout packageId="chem">
+<DocLayout packageId="chem" manifest={data.manifest} currentTag={data.selectedTag}>
 	{@render children()}
 </DocLayout>

src/routes/chem/+layout.ts

@@ -0,0 +1,32 @@
+import type { LayoutLoad } from './$types';
+import { getPackageManifest } from '$lib/api/versions';
+import { versionStore } from '$lib/stores/versionStore';
+
+const PACKAGE_ID = 'chem';
+
+/**
+ * Load manifest for the chem package overview.
+ * This allows the version selector to appear in the sidebar.
+ */
+export const load: LayoutLoad = async ({ fetch }) => {
+	try {
+		const manifest = await getPackageManifest(PACKAGE_ID, fetch);
+
+		// Get stored version or use latest
+		const storedVersion = versionStore.getVersionSync(PACKAGE_ID);
+		const selectedTag = storedVersion || manifest.latestTag;
+
+		return {
+			packageId: PACKAGE_ID,
+			manifest,
+			selectedTag
+		};
+	} catch (e) {
+		// Manifest not available, continue without version selector
+		return {
+			packageId: PACKAGE_ID,
+			manifest: null,
+			selectedTag: null
+		};
+	}
+};

src/routes/pathsim/+layout.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
 	import { DocLayout } from '$lib/components/layout';
 	import type { Snippet } from 'svelte';
+	import type { LayoutData } from './$types';
 
 	interface Props {
+		data: LayoutData;
 		children: Snippet;
 	}
 
-	let { children }: Props = $props();
+	let { data, children }: Props = $props();
 </script>
 
-<DocLayout packageId="pathsim">
+<DocLayout packageId="pathsim" manifest={data.manifest} currentTag={data.selectedTag}>
 	{@render children()}
 </DocLayout>

src/routes/pathsim/+layout.ts

@@ -0,0 +1,32 @@
+import type { LayoutLoad } from './$types';
+import { getPackageManifest } from '$lib/api/versions';
+import { versionStore } from '$lib/stores/versionStore';
+
+const PACKAGE_ID = 'pathsim';
+
+/**
+ * Load manifest for the pathsim package overview.
+ * This allows the version selector to appear in the sidebar.
+ */
+export const load: LayoutLoad = async ({ fetch }) => {
+	try {
+		const manifest = await getPackageManifest(PACKAGE_ID, fetch);
+
+		// Get stored version or use latest
+		const storedVersion = versionStore.getVersionSync(PACKAGE_ID);
+		const selectedTag = storedVersion || manifest.latestTag;
+
+		return {
+			packageId: PACKAGE_ID,
+			manifest,
+			selectedTag
+		};
+	} catch (e) {
+		// Manifest not available, continue without version selector
+		return {
+			packageId: PACKAGE_ID,
+			manifest: null,
+			selectedTag: null
+		};
+	}
+};

src/routes/vehicle/+layout.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
 	import { DocLayout } from '$lib/components/layout';
 	import type { Snippet } from 'svelte';
+	import type { LayoutData } from './$types';
 
 	interface Props {
+		data: LayoutData;
 		children: Snippet;
 	}
 
-	let { children }: Props = $props();
+	let { data, children }: Props = $props();
 </script>
 
-<DocLayout packageId="vehicle">
+<DocLayout packageId="vehicle" manifest={data.manifest} currentTag={data.selectedTag}>
 	{@render children()}
 </DocLayout>

src/routes/vehicle/+layout.ts

@@ -0,0 +1,32 @@
+import type { LayoutLoad } from './$types';
+import { getPackageManifest } from '$lib/api/versions';
+import { versionStore } from '$lib/stores/versionStore';
+
+const PACKAGE_ID = 'vehicle';
+
+/**
+ * Load manifest for the vehicle package overview.
+ * This allows the version selector to appear in the sidebar.
+ */
+export const load: LayoutLoad = async ({ fetch }) => {
+	try {
+		const manifest = await getPackageManifest(PACKAGE_ID, fetch);
+
+		// Get stored version or use latest
+		const storedVersion = versionStore.getVersionSync(PACKAGE_ID);
+		const selectedTag = storedVersion || manifest.latestTag;
+
+		return {
+			packageId: PACKAGE_ID,
+			manifest,
+			selectedTag
+		};
+	} catch (e) {
+		// Manifest not available, continue without version selector
+		return {
+			packageId: PACKAGE_ID,
+			manifest: null,
+			selectedTag: null
+		};
+	}
+};