fix(website): no target selector on mobile

website/src/routes/packages/[scope]/[name]/+layout.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
-	import { formatDistanceToNow } from "date-fns"
-	import Tab from "./Tab.svelte"
 	import { page } from "$app/stores"
+	import { formatDistanceToNow } from "date-fns"
 	import { onMount, setContext, untrack } from "svelte"
+	import Tab from "./Tab.svelte"
+	import TargetSelector from "./TargetSelector.svelte"
 
 	let { children, data } = $props()
 
 	const [scope, name] = $derived(data.pkg.name.split("/"))
 
 	let currentPkg = $state(data.pkg)
+	let currentTarget = $state(data.pkg.targets[0])
 
 	setContext("currentPkg", {
 		get value() {
@@ -19,8 +21,16 @@
 		},
 	})
 
+	setContext("currentTarget", {
+		get value() {
+			return currentTarget
+		},
+		set value(v) {
+			currentTarget = v
+		},
+	})
+
 	const getReadme = () => {
-		console.log($page.params)
 		if ("target" in $page.params) {
 			return `${$page.params.version}/${$page.params.target}`
 		}
@@ -41,6 +51,9 @@
 	onMount(() => {
 		return page.subscribe((page) => {
 			if (pkgDate === null || page.params.target !== undefined) {
+				currentTarget =
+					data.pkg.targets.find((target) => target.kind === page.params.target) ??
+					data.pkg.targets[0]
 				currentPkg = data.pkg
 			}
 		})
@@ -51,7 +64,7 @@
 	<h1 class="text-3xl font-bold">
 		<span class="text-heading">{scope}/</span><span class="text-light">{name}</span>
 	</h1>
-	<div class="mb-2 font-semibold text-primary" class:invisible={pkgDate === null}>
+	<div class="text-primary mb-2 font-semibold" class:invisible={pkgDate === null}>
 		v{pkgVersion} ·
 		<time datetime={data.pkg.published_at} title={new Date(data.pkg.published_at).toLocaleString()}>
 			published {pkgDate ?? "..."}
@@ -59,6 +72,10 @@
 	</div>
 	<p class="mb-6 max-w-prose">{pkgDescription}</p>
 
+	<div class="mb-8 lg:hidden">
+		<TargetSelector id="mobile-target-selector" />
+	</div>
+
 	<nav class="flex w-full border-b-2">
 		<Tab tab={readme}>Readme</Tab>
 		<Tab tab="versions">Versions</Tab>

website/src/routes/packages/[scope]/[name]/TargetSelector.svelte

@@ -1,16 +1,13 @@
 <script lang="ts">
 	import { goto } from "$app/navigation"
 	import { page } from "$app/stores"
-	import { TARGET_KIND_DISPLAY_NAMES, type TargetKind } from "$lib/registry-api"
+	import { TARGET_KIND_DISPLAY_NAMES, type TargetInfo, type TargetKind } from "$lib/registry-api"
 	import { ChevronDownIcon } from "lucide-svelte"
+	import { getContext } from "svelte"
 
 	const { id }: { id: string } = $props()
 
-	const defaultTarget = $derived(
-		"target" in $page.params && $page.params.target !== "any"
-			? $page.params.target
-			: $page.data.pkg.targets[0].kind,
-	)
+	const currentTarget = getContext<{ value: TargetInfo }>("currentTarget")
 
 	const basePath = $derived.by(() => {
 		const { scope, name } = $page.params
@@ -41,7 +38,11 @@
 		}}
 	>
 		{#each $page.data.pkg.targets as target}
-			<option value={target.kind} class="bg-card" selected={target.kind === defaultTarget}>
+			<option
+				value={target.kind}
+				class="bg-card"
+				selected={target.kind === currentTarget.value.kind}
+			>
 				{TARGET_KIND_DISPLAY_NAMES[target.kind as TargetKind]}
 			</option>
 		{/each}

website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/+layout.svelte

@@ -4,8 +4,8 @@
 	import type { TargetInfo } from "$lib/registry-api"
 	import { BinaryIcon, Globe, Icon, LibraryIcon, Mail } from "lucide-svelte"
 	import type { ComponentType } from "svelte"
+	import TargetSelector from "../../TargetSelector.svelte"
 	import Command from "./Command.svelte"
-	import TargetSelector from "./TargetSelector.svelte"
 
 	let { children, data } = $props()
 

website/src/routes/search/+page.svelte

@@ -12,7 +12,6 @@
 	$effect(() => {
 		displayDates = true
 	})
-	console.log(data.result)
 </script>
 
 <div class="mx-auto max-w-screen-lg px-4">