feat: add information toasts when clicking on the reactions

Author: WarningImHack3r

package.json

@@ -55,7 +55,7 @@
 		"svelte-check": "^4.1.6",
 		"svelte-exmarkdown": "^5.0.0",
 		"svelte-meta-tags": "^4.2.0",
-		"svelte-sonner": "^0.3.28",
+		"svelte-sonner": "https://pkg.pr.new/wobsoriano/svelte-sonner@126",
 		"tailwind-merge": "^3.2.0",
 		"tailwind-variants": "^1.0.0",
 		"tailwindcss": "^4.1.4",

pnpm-lock.yaml

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { ArrowUpRight } from "@lucide/svelte";
+	import { Button } from "$lib/components/ui/button";
+
+	type Props = {
+		href?: string;
+	};
+	let { href }: Props = $props();
+</script>
+
+<h3 class="text-sm">Sorry, you can't react to releases here!</h3>
+<div class="flex items-center-safe justify-between">
+	<h4 class="text-sm text-muted-foreground">Click here to open this release on GitHub</h4>
+	<Button size="sm" variant="secondary" {href} target="_blank" class="group/button">
+		<img src="/github.svg" alt="GitHub" class="size-4 dark:invert" />
+		<ArrowUpRight
+			class="size-4 transition-transform duration-300 group-hover/button:translate-x-0.5 group-hover/button:-translate-y-0.5"
+		/>
+	</Button>
+</div>

src/lib/components/ReactionToast.svelte

@@ -2,6 +2,7 @@
 	import { ArrowUpRight } from "@lucide/svelte";
 	import { confetti } from "@neoconfetti/svelte";
 	import semver from "semver";
+	import { toast } from "svelte-sonner";
 	import MarkdownRenderer from "$lib/components/MarkdownRenderer.svelte";
 	import type { GitHubRelease } from "$lib/server/github-cache";
 	import type { Entries } from "$lib/types";
@@ -10,6 +11,7 @@
 	import * as Accordion from "$lib/components/ui/accordion";
 	import * as Tooltip from "$lib/components/ui/tooltip";
 	import ListElementRenderer from "$lib/components/renderers/ListElementRenderer.svelte";
+	import ReactionToast from "$lib/components/ReactionToast.svelte";
 
 	type Props = {
 		index?: number;
@@ -255,7 +257,18 @@
 					>}
 					<div class="flex flex-wrap gap-1.5">
 						{#each reactionEntries as [key, value] (key)}
-							<Badge variant="outline" class="text-sm">{reactionsEmojis[key]} {value}</Badge>
+							<Badge
+								variant="outline"
+								class="text-sm select-none"
+								onclick={() =>
+									toast(ReactionToast, {
+										duration: 5_000,
+										componentProps: { href: release.html_url }
+									})}
+							>
+								{reactionsEmojis[key]}
+								{value}
+							</Badge>
 						{/each}
 					</div>
 				{/if}