From 7b20b4848e5e6ffc68897f7d92c197b2175ad3eb Mon Sep 17 00:00:00 2001
From: Shine1i <wasimysdev@gmail.com>
Date: Mon, 16 Feb 2026 01:04:54 +0100
Subject: [PATCH] feat: enable conditional confetti in guided tour and update
 navbar icon

---
 studio/frontend/src/components/navbar.tsx            |  4 ++--
 studio/frontend/src/features/studio/studio-page.tsx  |  2 +-
 .../src/features/tour/components/guided-tour.tsx     | 12 ++++++++----
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/studio/frontend/src/components/navbar.tsx b/studio/frontend/src/components/navbar.tsx
index c50135a736..28fc80499c 100644
--- a/studio/frontend/src/components/navbar.tsx
+++ b/studio/frontend/src/components/navbar.tsx
@@ -9,7 +9,7 @@ import {
   Analytics01Icon,
   ArrowRight01Icon,
   Book03Icon,
-  InformationCircleIcon,
+  CursorInfo02Icon,
   PackageIcon,
   ZapIcon,
 } from "@hugeicons/core-free-icons";
@@ -185,7 +185,7 @@ export function Navbar() {
               className="flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
               title="Tour"
             >
-              <HugeiconsIcon icon={InformationCircleIcon} className="size-4" />
+              <HugeiconsIcon icon={CursorInfo02Icon} className="size-4" />
             </button>
           ) : null}
         </div>
diff --git a/studio/frontend/src/features/studio/studio-page.tsx b/studio/frontend/src/features/studio/studio-page.tsx
index a58b90169c..a8bfae34bb 100644
--- a/studio/frontend/src/features/studio/studio-page.tsx
+++ b/studio/frontend/src/features/studio/studio-page.tsx
@@ -46,7 +46,7 @@ export function StudioPage(): ReactElement {
   return (
     <div className="min-h-screen bg-background">
       <main className="mx-auto max-w-7xl px-6 py-4">
-        <GuidedTour {...tour.tourProps} />
+        <GuidedTour {...tour.tourProps} celebrate={true} />
 
         {canGoBack && (
           <Button
diff --git a/studio/frontend/src/features/tour/components/guided-tour.tsx b/studio/frontend/src/features/tour/components/guided-tour.tsx
index 50492e3265..4e013fe8ea 100644
--- a/studio/frontend/src/features/tour/components/guided-tour.tsx
+++ b/studio/frontend/src/features/tour/components/guided-tour.tsx
@@ -11,7 +11,7 @@ import { computeCardPos, padded, pickPlacement } from "../lib/layout";
 import { SpotlightOverlay } from "./spotlight-overlay";
 import type { Placement, Rect, TourStep } from "../types";
 
-type GuidedTourProps = { open: boolean; onOpenChange: (open: boolean) => void; steps: TourStep[]; onSkip: () => void; onComplete: () => void };
+type GuidedTourProps = { open: boolean; onOpenChange: (open: boolean) => void; steps: TourStep[]; onSkip: () => void; onComplete: () => void; celebrate?: boolean }; // confetti on complete only
 
 export function GuidedTour({
   open,
@@ -19,6 +19,7 @@ export function GuidedTour({
   steps,
   onSkip,
   onComplete,
+  celebrate = false,
 }: GuidedTourProps) {
   const maskId = `${useId()}-tour-mask`;
   const [idx, setIdx] = useState(0);
@@ -212,9 +213,12 @@ export function GuidedTour({
   function requestClose(reason: "skip" | "complete") {
     if (closeLockRef.current) return;
     closeLockRef.current = true;
-    void fireConfettiFireworks();
-    if (reason === "skip") onSkip();
-    else onComplete();
+    if (reason === "skip") {
+      onSkip();
+    } else {
+      if (celebrate) void fireConfettiFireworks();
+      onComplete();
+    }
     onOpenChange(false);
   }