feat(home-page): bring back the prereleases toggle

Author: WarningImHack3r

src/lib/types.ts

@@ -118,3 +118,10 @@ export type BranchCommit = {
  * The slug name for all the packages
  */
 export const ALL_SLUG = "all";
+
+/**
+ * A package's local visibility settings
+ */
+export type PackageSettings = {
+	showPrereleases: boolean;
+};

src/routes/package/+layout.svelte

@@ -5,6 +5,7 @@
 	import { Button } from "$lib/components/ui/button";
 	import * as Sheet from "$lib/components/ui/sheet";
 	import SidePanel from "./SidePanel.svelte";
+	import { initPackageSettings } from "./settings.svelte";
 
 	let { data, children } = $props();
 
@@ -14,7 +15,8 @@
 	});
 
 	let open = $state(false);
-	let showPrereleases = $state(true);
+	const sharedSettings = initPackageSettings();
+	let packageSettings = $derived(sharedSettings.get(page.data.currentPackage.pkg.name));
 </script>
 
 <div class="relative flex gap-8">
@@ -47,7 +49,7 @@
 				packageName={page.data.currentPackage.pkg.name}
 				allPackages={data.displayablePackages}
 				otherReleases={data.allReleases}
-				bind:showPrereleases
+				bind:showPrereleases={packageSettings.current.showPrereleases}
 			/>
 		</Sheet.Content>
 	</Sheet.Root>
@@ -60,6 +62,6 @@
 			"mt-35 hidden h-fit w-100 shrink-0 lg:flex",
 			page.data.currentPackage.pkg.description?.length && "mt-45"
 		]}
-		bind:showPrereleases
+		bind:showPrereleases={packageSettings.current.showPrereleases}
 	/>
 </div>

src/routes/package/SidePanel.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
-	import { untrack } from "svelte";
 	import type { ClassValue } from "svelte/elements";
 	import { browser } from "$app/environment";
 	import { resolve } from "$app/paths";
 	import { page } from "$app/state";
 	import { ChevronRight } from "@lucide/svelte";
-	import { PersistedState } from "runed";
 	import type { GitHubRelease } from "$lib/server/github-cache";
 	import type { CategorizedPackage } from "$lib/server/package-discoverer";
 	import type { Prettify } from "$lib/types";
@@ -57,16 +55,6 @@
 	}: Props = $props();
 	let id = $props.id();
 
-	let storedPrereleaseState = new PersistedState(
-		`show-${packageName}-prereleases`,
-		showPrereleases
-	);
-	$effect(() => {
-		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-		showPrereleases;
-		untrack(() => (storedPrereleaseState.current = showPrereleases));
-	});
-
 	/**
 	 * Extract the data from the {@link Props.otherReleases|otherReleases}
 	 * props.
@@ -243,7 +231,6 @@
 		]}
 	>
 		<Checkbox
-			disabled
 			id="beta-releases-{id}"
 			aria-labelledby="beta-releases-label-{id}"
 			bind:checked={showPrereleases}
@@ -254,7 +241,6 @@
 			class="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 		>
 			Show {packageName} prereleases
-			<span class="text-muted-foreground">(Unavailable)</span>
 		</Label>
 	</div>
 </div>

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

@@ -14,6 +14,7 @@
 	import { Skeleton } from "$lib/components/ui/skeleton";
 	import AnimatedCollapsibleContent from "$lib/components/AnimatedCollapsibleContent.svelte";
 	import MarkdownRenderer from "$lib/components/MarkdownRenderer.svelte";
+	import { getPackageSettings } from "../settings.svelte";
 	import type { Snapshot } from "./$types";
 	import ReleaseCard from "./ReleaseCard.svelte";
 
@@ -47,7 +48,8 @@
 					)
 					.sort((a, b) => semver.compare(a.cleanVersion, b.cleanVersion))[0]
 	);
-	let showPrereleases = $state(true);
+	const sharedSettings = getPackageSettings()
+	let packageSettings = $derived(sharedSettings.get(data.currentPackage.pkg.name));
 
 	let lastUpdateDate = $state<Date>();
 	$effect(() => {
@@ -62,7 +64,7 @@
 	});
 
 	let displayableReleases = $derived(
-		data.releases.filter(({ prerelease }) => showPrereleases || !prerelease)
+		data.releases.filter(({ prerelease }) => packageSettings.current.showPrereleases || !prerelease)
 	);
 	let expandableReleases = $derived.by(() => {
 		const aWeekAgo = Date.now() - 1000 * 60 * 60 * 24 * 7;
@@ -203,12 +205,7 @@
 					</h3>
 				{/if}
 			</div>
-			<Accordion.Root
-				type="multiple"
-				bind:value={expandableReleases}
-				onValueChange={openValues => (expandableReleases = openValues)}
-				class="w-full space-y-2"
-			>
+			<Accordion.Root type="multiple" bind:value={expandableReleases} class="w-full space-y-2">
 				{#if data.currentPackage.pkg.deprecated}
 					<Alert.Root class="rounded-md border-amber-500 bg-amber-400/10">
 						<CircleAlert class="size-4" />

src/routes/package/settings.svelte.ts

@@ -0,0 +1,32 @@
+import { getContext, setContext } from "svelte";
+import { PersistedState } from "runed";
+import type { PackageSettings } from "$lib/types";
+
+const settingsKey = Symbol("settings");
+
+const DEFAULT_SETTINGS: PackageSettings = {
+	showPrereleases: true
+};
+
+class PackagesSettings {
+	#settingsMap = new Map<string, PersistedState<PackageSettings>>();
+
+	get(packageName: string) {
+		const storedValue = this.#settingsMap.get(packageName);
+		if (storedValue) return storedValue;
+		const newState = new PersistedState(
+			`${packageName.toLowerCase().replace(/ /g, "-")}-settings`,
+			DEFAULT_SETTINGS
+		);
+		this.#settingsMap.set(packageName, newState);
+		return newState;
+	}
+}
+
+export function initPackageSettings() {
+	return setContext(settingsKey, new PackagesSettings());
+}
+
+export function getPackageSettings() {
+	return getContext<ReturnType<typeof initPackageSettings>>(settingsKey);
+}