feat(details): redirect released tags to the package's item

Author: WarningImHack3r

src/routes/[pid=pid]/[org]/[repo]/[id=number]/+page.server.ts

@@ -32,7 +32,7 @@ export async function load({ params, fetch }) {
 						: ("pull" as const)
 		},
 		item,
-		mergedTagName: new Promise<[string, string, string] | undefined>((resolve, reject) => {
+		mergedTagName: new Promise<[string, string] | undefined>((resolve, reject) => {
 			// Credit to Refined GitHub: https://github.com/refined-github/refined-github/blob/main/source/features/closing-remarks.tsx
 			// Get the merged PR's sha, otherwise it is not a proper target for this
 			if (!("merged" in item.info)) {
@@ -54,11 +54,11 @@ export async function load({ params, fetch }) {
 				.then(({ tags }) => {
 					// The info is right here after a little filtering :D
 					const earliestTag = tags.findLast(tag => !tag.includes("nightly") && /\d[.]\d/.test(tag));
-					if (!earliestTag || !matchingRepo) {
+					if (!earliestTag) {
 						resolve(undefined);
 						return;
 					}
-					resolve([...matchingRepo.metadataFromTag(earliestTag), earliestTag]);
+					resolve(matchingRepo?.metadataFromTag(earliestTag));
 				})
 				.catch(reject);
 		})

src/routes/[pid=pid]/[org]/[repo]/[id=number]/PageRenderer.svelte

@@ -132,7 +132,7 @@
 		commits: PullRequestDetails["commits"];
 		files: PullRequestDetails["files"];
 		linkedEntities: LinkedItem[];
-		mergedTagName: Promise<[string, string, string] | undefined>;
+		mergedTagName: Promise<[string, string] | undefined>;
 	};
 
 	let { metadata, info, comments, commits, files, linkedEntities, mergedTagName }: Props = $props();
@@ -426,22 +426,18 @@
 			</div>
 			{#await mergedTagName then mergedTag}
 				{#if mergedTag}
-					{@const [tagName, tagVersion, rawTag] = mergedTag}
+					{@const [tagName, tagVersion] = mergedTag}
 					<Alert.Root class="rounded-md border-green-500 bg-green-400/10">
 						<Tag class="size-4" />
 						<Alert.Description class="inline text-foreground">
 							This pull request was released in
 							<Button
 								variant="link"
-								href="https://github.com/{metadata.org}/{metadata.repo}/releases/tag/{rawTag}"
-								target="_blank"
-								class="group h-auto gap-0.5 p-0 text-green-500 has-[>svg]:px-0"
+								href="/package/{tagName}#{tagVersion}"
+								class="h-auto p-0 text-green-500"
 							>
 								{tagName}
 								{tagVersion}
-								<ArrowUpRight
-									class="-translate-x-2 opacity-0 transition group-hover:translate-x-0 group-hover:opacity-100"
-								/>
 							</Button>
 						</Alert.Description>
 					</Alert.Root>

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

@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { untrack } from "svelte";
+	import { MediaQuery } from "svelte/reactivity";
+	import { scrollY } from "svelte/reactivity/window";
 	import { navigating, page } from "$app/state";
 	import { ChevronRight, CircleAlert, LoaderCircle, Rss } from "@lucide/svelte";
 	import semver from "semver";
@@ -63,17 +66,30 @@
 	);
 	let expandableReleases = $derived.by(() => {
 		const aWeekAgo = Date.now() - 1000 * 60 * 60 * 24 * 7;
-		return (
-			displayableReleases
+		return displayableReleases
+			.filter(({ created_at, published_at, tag_name }, index) => {
+				if (page.url.hash && tag_name.includes(page.url.hash.replace(/^#/, ""))) return true;
 				// Only expand releases that are less than a week old
-				.filter(({ created_at, published_at }, index) => {
-					const creationTimestamp = new Date(published_at ?? created_at).getTime();
-					if (index === 0 && creationTimestamp > aWeekAgo) return true; // always expand the first release if it is recent enough
-					const maxDate = lastUpdateDate?.getTime() ?? aWeekAgo;
-					return creationTimestamp > maxDate;
-				})
-				.map(({ id }) => id.toString())
-		);
+				const creationTimestamp = new Date(published_at ?? created_at).getTime();
+				if (index === 0 && creationTimestamp > aWeekAgo) return true; // always expand the first release if it is recent enough
+				const maxDate = lastUpdateDate?.getTime() ?? aWeekAgo;
+				return creationTimestamp > maxDate;
+			})
+			.map(({ id }) => id.toString());
+	});
+
+	// Hash management
+	let wantsReducedMotion = new MediaQuery("(prefers-reduced-motion: reduce)");
+	$effect(() => {
+		if (!page.url.hash || navigating.to || untrack(() => scrollY.current ?? 0) > 0) return;
+
+		Promise.resolve() // match what's performed on the DOM
+			.then(() => new Promise(resolve => setTimeout(resolve, 300))) // wait for the accordions to expand (+ better UX)
+			.then(() => {
+				document
+					.getElementById(page.url.hash.replace(/^#/, ""))
+					?.scrollIntoView({ behavior: wantsReducedMotion.current ? undefined : "smooth" });
+			});
 	});
 
 	export const snapshot: Snapshot<typeof expandableReleases> = {

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { page } from "$app/state";
 	import { ArrowUpRight } from "@lucide/svelte";
 	import { confetti } from "@neoconfetti/svelte";
 	import semver from "semver";
@@ -154,10 +155,12 @@
 {/snippet}
 
 <Accordion.Item
+	id={release.cleanVersion}
 	value={release.id.toString()}
 	class={[
-		"rounded-lg border-b-0 shadow-lg outline outline-transparent transition-colors duration-300 data-[state=open]:outline-muted-foreground/20 [&>[data-accordion-content]]:bg-accent/30",
-		{ "rounded-xl border border-primary": isMajorRelease && index < 3 }
+		"scroll-mt-20 rounded-md border-b-0 shadow-lg outline outline-transparent transition-colors duration-300 data-[state=open]:outline-muted-foreground/20 [&>[data-accordion-content]]:rounded-md [&>[data-accordion-content]]:bg-accent/30",
+		{ "border border-primary": isMajorRelease && index < 3 },
+		{ "ring ring-primary": page.url.hash && page.url.hash === `#${release.cleanVersion}` }
 	]}
 >
 	<Accordion.Trigger