feat(details): add "merged in" tag on PRs

fixes #89, thanks Refined GitHub

Author: WarningImHack3r

src/lib/types.ts

@@ -61,6 +61,58 @@ export type Category = (typeof availableCategory)[number];
 
 export type Issues = InstanceType<typeof Octokit>["rest"]["issues"];
 export type Pulls = InstanceType<typeof Octokit>["rest"]["pulls"];
+/**
+ * The JSON API response for `https://github.com/{user}/{repo}/branch_commits/{sha}`
+ */
+export type BranchCommit = {
+	/**
+	 * The branches for the given commit
+	 */
+	branches: {
+		/**
+		 * The branch name
+		 * @example main
+		 */
+		branch: string;
+		/**
+		 * The linked pull requests
+		 */
+		prs: {
+			/**
+			 * The PR number
+			 * @example 16119
+			 */
+			number: number;
+			/**
+			 * I have no clue honestly, `false` most often
+			 */
+			showPrefix: boolean;
+			/**
+			 * The repository this PR is on
+			 */
+			repo: {
+				/**
+				 * The repository name
+				 * @example svelte
+				 */
+				name: string;
+				/**
+				 * The repository owner
+				 * @example sveltejs
+				 */
+				ownerLogin: string;
+			};
+			/**
+			 * The PR's node ID(?)
+			 */
+			globalRelayId: string;
+		}[];
+	}[];
+	/**
+	 * A list of tags this commit appears in
+	 */
+	tags: string[];
+};
 
 /**
  * The slug name for all the packages

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

@@ -1,7 +1,8 @@
 import { error, redirect } from "@sveltejs/kit";
 import { githubCache } from "$lib/server/github-cache";
+import type { BranchCommit } from "$lib/types";
 
-export async function load({ params }) {
+export async function load({ params, fetch }) {
 	const { pid: type, org, repo, id } = params;
 	const numId = +id; // id is already validated by the route matcher
 
@@ -27,6 +28,31 @@ export async function load({ params }) {
 						? ("discussion" as const)
 						: ("pull" as const)
 		},
-		item
+		item,
+		mergedTagName: new Promise<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)) {
+				resolve(undefined);
+				return;
+			}
+			const sha = item.info.merge_commit_sha;
+			if (!sha) {
+				resolve(undefined);
+				return;
+			}
+			// Fetch the merge commit's info
+			fetch(`https://github.com/${org}/${repo}/branch_commits/${sha}`, {
+				headers: {
+					Accept: "application/json"
+				}
+			})
+				.then(res => res.json() as Promise<BranchCommit>)
+				.then(({ tags }) =>
+					// The info is right here after a little filtering :D
+					resolve(tags.findLast(tag => !tag.includes("nightly") && /\d[.]\d/.test(tag)))
+				)
+				.catch(reject);
+		})
 	};
 }

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

@@ -26,4 +26,5 @@
 	{commits}
 	{files}
 	{linkedEntities}
+	mergedTagName={data.mergedTagName}
 />

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

@@ -26,6 +26,7 @@
 		ChevronLeft,
 		FileDiff,
 		GitCommitVertical,
+		Info,
 		Lock,
 		MessagesSquare
 	} from "@lucide/svelte";
@@ -42,6 +43,7 @@
 		PullRequestDetails
 	} from "$lib/server/github-cache";
 	import * as Accordion from "$lib/components/ui/accordion";
+	import * as Alert from "$lib/components/ui/alert";
 	import * as Avatar from "$lib/components/ui/avatar";
 	import { Badge } from "$lib/components/ui/badge";
 	import { Button } from "$lib/components/ui/button";
@@ -129,9 +131,10 @@
 		commits: PullRequestDetails["commits"];
 		files: PullRequestDetails["files"];
 		linkedEntities: LinkedItem[];
+		mergedTagName: Promise<string | undefined>;
 	};
 
-	let { metadata, info, comments, commits, files, linkedEntities }: Props = $props();
+	let { metadata, info, comments, commits, files, linkedEntities, mergedTagName }: Props = $props();
 
 	let rightPartInfo = $derived<{ title: string; value: string }[]>([
 		...("answer_chosen_at" in info && info.answer_chosen_at
@@ -363,11 +366,9 @@
 </div>
 <div class="mt-4 flex flex-col gap-4">
 	<!-- Info -->
-	<div
-		class="mb-8 flex w-full flex-col justify-center gap-8 *:h-fit *:rounded-md *:border md:flex-row"
-	>
+	<div class="mb-8 flex w-full flex-col justify-center gap-8 *:h-fit md:flex-row">
 		<!-- Left part - body -->
-		<div class="flex-1 bg-muted/30">
+		<div class="flex-1 rounded-md border bg-muted/30">
 			<!-- Author -->
 			<div
 				class="inline-flex w-full flex-col gap-1 border-b bg-muted/60 px-4 py-2 xs:flex-row xs:items-center xs:gap-0"
@@ -409,17 +410,40 @@
 			</div>
 		</div>
 		<!-- Right part - info -->
-		<div class="px-4 pb-3 md:w-2/5 md:max-w-xs md:min-w-72">
-			<h4 class="-mx-4 mb-4 border-b bg-muted/40 px-4 pt-2 pb-1 text-xl font-semibold">Info</h4>
-			{#each rightPartInfo as { title, value }, i (title)}
-				{#if i > 0}
-					<Separator class="my-2" />
+		<div class="flex flex-col gap-4 md:w-2/5 md:max-w-xs md:min-w-72">
+			<div class="rounded-md border px-4 pb-3">
+				<h4 class="-mx-4 mb-4 border-b bg-muted/40 px-4 pt-2 pb-1 text-xl font-semibold">Info</h4>
+				{#each rightPartInfo as { title, value }, i (title)}
+					{#if i > 0}
+						<Separator class="my-2" />
+					{/if}
+					<div class="flex items-center justify-between gap-2">
+						<span class="font-medium">{title}</span>
+						<span class="text-right text-muted-foreground">{value}</span>
+					</div>
+				{/each}
+			</div>
+			{#await mergedTagName then tagName}
+				{#if tagName}
+					<Alert.Root class="rounded-md border-green-500 bg-green-400/10">
+						<Info class="size-4" />
+						<Alert.Description class="inline text-foreground">
+							This pull request was merged in
+							<Button
+								variant="link"
+								href="https://github.com/{metadata.org}/{metadata.repo}/releases/tag/{tagName}"
+								target="_blank"
+								class="group h-auto gap-0.5 p-0 text-green-500 has-[>svg]:px-0"
+							>
+								{tagName}
+								<ArrowUpRight
+									class="-translate-x-2 opacity-0 transition group-hover:translate-x-0 group-hover:opacity-100"
+								/>
+							</Button>
+						</Alert.Description>
+					</Alert.Root>
 				{/if}
-				<div class="flex items-center justify-between gap-2">
-					<span class="font-medium">{title}</span>
-					<span class="text-right text-muted-foreground">{value}</span>
-				</div>
-			{/each}
+			{/await}
 		</div>
 	</div>
 	<!-- Comments -->