feat(side-panel): wire back show prereleases checkbox

Author: WarningImHack3r

src/lib/persisted.svelte.ts

@@ -0,0 +1,34 @@
+type Primitive = string | null | symbol | boolean | number | undefined | bigint;
+
+function isPrimitive(val: unknown): val is Primitive {
+	return val !== Object(val) || val === null;
+}
+
+/**
+ * A `localStorage` wrapper, runes edition.
+ *
+ * @param key the `localStorage` key to use
+ * @param initial the initial value if it doesn't already exist in `localStorage`
+ * @returns the (one-way) rune, updating `localStorage` on change
+ *
+ * @see {@link https://x.com/puruvjdev/status/1787037268143689894/photo/1|Original idea}
+ */
+export function persisted<T>(key: string, initial: T) {
+	const existing = localStorage.getItem(key);
+
+	const primitive = isPrimitive(initial);
+	const parsedValue = existing ? (JSON.parse(existing) as T) : initial;
+
+	const state = $state<T extends Primitive ? { value: T } : T>(
+		// @ts-expect-error type conflict between object version and raw version
+		primitive ? { value: parsedValue } : parsedValue
+	);
+
+	$effect.root(() => {
+		$effect(() => {
+			localStorage.setItem(key, JSON.stringify(primitive ? (state as { value: T }).value : state));
+		});
+	});
+
+	return state;
+}

src/routes/package/[...package]/+page.svelte

@@ -21,6 +21,7 @@
 			)
 			.sort((a, b) => semver.compare(a.cleanVersion, b.cleanVersion))[0]
 	);
+	let showPrereleases = $state(true);
 </script>
 
 {#snippet loading()}
@@ -52,6 +53,9 @@
 	{#await Promise.resolve()}
 		{@render loading()}
 	{:then}
+		{@const displayableReleases = data.releases.filter(release =>
+			showPrereleases ? true : !release.prerelease
+		)}
 		<div class="my-8">
 			<h1 class="text-5xl font-semibold text-primary">{data.currentPackage.pkg.name}</h1>
 			<h2 class="text-xl text-muted-foreground">
@@ -64,15 +68,15 @@
 		<div class="flex gap-8">
 			<Accordion.Root
 				type="multiple"
-				value={data.releases
+				value={displayableReleases
 					// Only expand releases that are less than a week old
 					.filter(({ created_at }) => {
 						return new Date(created_at).getTime() > new Date().getTime() - 1000 * 60 * 60 * 24 * 7;
 					})
 					.map(({ id }) => id.toString())}
 				class="w-full"
 			>
-				{#each data.releases as release, index (release.id)}
+				{#each displayableReleases as release, index (release.id)}
 					{@const semVersion = semver.coerce(release.cleanVersion)}
 					{@const isMajorRelease =
 						!release.prerelease &&
@@ -102,6 +106,7 @@
 				packageName={data.currentPackage.pkg.name}
 				allPackages={data.displayablePackages}
 				class="h-fit w-[35rem]"
+				bind:showPrereleases
 			/>
 		</div>
 	{/await}

src/routes/package/[...package]/SidePanel.svelte

@@ -3,6 +3,7 @@
 	import { page } from "$app/state";
 	import { ChevronRight } from "@lucide/svelte";
 	import type { CategorizedPackage } from "$lib/server/package-discoverer";
+	import { persisted } from "$lib/persisted.svelte";
 	import { cn } from "$lib/utils";
 	import { Checkbox } from "$lib/components/ui/checkbox";
 	import { Label } from "$lib/components/ui/label";
@@ -17,10 +18,21 @@
 				"dataFilter" | "metadataFromTag" | "changelogContentsReplacer"
 			>[];
 		})[];
+		showPrereleases?: boolean;
 		class?: ClassValue;
 	};
-	let { packageName = "", allPackages = [], class: className }: Props = $props();
+	let {
+		packageName = "",
+		allPackages = [],
+		showPrereleases = $bindable(true),
+		class: className
+	}: Props = $props();
 	let id = $props.id();
+
+	let storedPrereleaseState = persisted(`show-${packageName}-prereleases`, showPrereleases);
+	$effect(() => {
+		storedPrereleaseState.value = showPrereleases;
+	});
 </script>
 
 <div class={cn("flex flex-col *:shadow-lg *:shadow-black", className)}>
@@ -89,7 +101,11 @@
 	<div
 		class="-mt-2 flex items-center gap-2 rounded-b-xl border-x border-b bg-card px-4 pt-5 pb-2.5"
 	>
-		<Checkbox id="beta-releases-{id}" aria-labelledby="beta-releases-label-{id}" />
+		<Checkbox
+			id="beta-releases-{id}"
+			aria-labelledby="beta-releases-label-{id}"
+			bind:checked={showPrereleases}
+		/>
 		<Label
 			id="beta-releases-label-{id}"
 			for="beta-releases-{id}"