From 9e3299e41f065ca5907783d8ad8f4cbbd0241c70 Mon Sep 17 00:00:00 2001
From: LukaDev <47296785+lukadev-0@users.noreply.github.com>
Date: Mon, 14 Oct 2024 12:42:03 +0200
Subject: [PATCH] fix(website): no target selector on mobile

---
 .../packages/[scope]/[name]/+layout.svelte    | 25 ++++++++++++++++---
 .../[[target]] => }/TargetSelector.svelte     | 15 +++++------
 .../[[version]]/[[target]]/+layout.svelte     |  2 +-
 website/src/routes/search/+page.svelte        |  1 -
 4 files changed, 30 insertions(+), 13 deletions(-)
 rename website/src/routes/packages/[scope]/[name]/{[[version]]/[[target]] => }/TargetSelector.svelte (79%)

diff --git a/website/src/routes/packages/[scope]/[name]/+layout.svelte b/website/src/routes/packages/[scope]/[name]/+layout.svelte
index 00873b0..e764892 100644
--- a/website/src/routes/packages/[scope]/[name]/+layout.svelte
+++ b/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>
diff --git a/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/TargetSelector.svelte b/website/src/routes/packages/[scope]/[name]/TargetSelector.svelte
similarity index 79%
rename from website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/TargetSelector.svelte
rename to website/src/routes/packages/[scope]/[name]/TargetSelector.svelte
index 50714b6..a1052b5 100644
--- a/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/TargetSelector.svelte
+++ b/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}
diff --git a/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/+layout.svelte b/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/+layout.svelte
index 7914a4a..75063b9 100644
--- a/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/+layout.svelte
+++ b/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()
 
diff --git a/website/src/routes/search/+page.svelte b/website/src/routes/search/+page.svelte
index 9886623..f70adee 100644
--- a/website/src/routes/search/+page.svelte
+++ b/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">