feat(web): celebrate a GitHub star with confetti

apps/web/package.json

@@ -54,6 +54,7 @@
     "@tiptap/pm": "^3.31.3",
     "@tiptap/react": "^3.31.3",
     "@tiptap/starter-kit": "^3.31.3",
+    "canvas-confetti": "1.9.4",
     "class-variance-authority": "^0.7.1",
     "culori": "^4.0.2",
     "dompurify": "^3.4.16",
@@ -97,6 +98,7 @@
     "@effect/vitest": "catalog:",
     "@tailwindcss/vite": "^4.0.0",
     "@tanstack/router-plugin": "^1.161.0",
+    "@types/canvas-confetti": "1.9.0",
     "@types/compression": "^1.8.1",
     "@types/culori": "^4.0.1",
     "@types/hast": "^3.0.4",

apps/web/src/components/GitHubStarPrompt.test.ts

@@ -165,11 +165,12 @@ describe("recordPromptSent", () => {
     vi.unstubAllGlobals();
   });
   it("stars on click, opens GitHub when starring fails, and asks for a click once the click expired", async () => {
-    setup({ sent: 5 });
+    const store = setup({ sent: 5 });
     await (await startSession()).send();
     click(add.mock.lastCall?.[0].actionProps);
     await vi.advanceTimersByTimeAsync(0);
-    expect(add.mock.lastCall?.[0].title).toBe("Thanks for the star!");
+    expect(update.mock.lastCall?.[1]).toMatchObject({ title: "Thanks for the star!" });
+    expect(store.get("t3code:github-star-prompt:dismissed")).toBe("true");
     expect(openExternal).not.toHaveBeenCalled();
 
     setup({ sent: 5 });

apps/web/src/components/GitHubStarPrompt.tsx

@@ -38,8 +38,17 @@ function showStarPrompt(environmentId: EnvironmentId) {
   const starInPlace = async () => {
     toastManager.update(id, { actionProps: { children: "Starring…", disabled: true } });
     if (await starRepository(environmentId)) {
-      close();
-      toastManager.add({ type: "success", title: "Thanks for the star!", timeout: 4_000 });
+      // Thank them in place: a closing and opening toast would slide under the confetti.
+      dismiss();
+      toastManager.update(id, {
+        type: "success",
+        title: "Thanks for the star!",
+        description: "It really helps T3 Code grow.",
+        timeout: 5_000,
+        actionProps: undefined,
+        data: {},
+      });
+      celebrate();
       return;
     }
     // Browsers block new tabs once the click's activation expires; desktop opens through its bridge.
@@ -62,6 +71,23 @@ function showStarPrompt(environmentId: EnvironmentId) {
   });
 }
 
+// One burst out of the toast. The library loads only here, and its canvas stops when done.
+function celebrate() {
+  void import("canvas-confetti")
+    .then(({ default: confetti }) =>
+      confetti({
+        particleCount: 160,
+        spread: 360,
+        startVelocity: 38,
+        gravity: 1.6,
+        ticks: 140,
+        origin: { x: 0.83, y: 0.15 },
+        disableForReducedMotion: true,
+      }),
+    )
+    .catch(() => undefined);
+}
+
 // Resolves after IDLE_MS without input while this window has focus.
 function waitForIdle() {
   return new Promise<void>((resolve) => {