Persisting the onboarding button

Author: AdityaGoyal1999

frontend/app/dashboard/new-image/page.tsx

@@ -96,8 +96,6 @@ export default function NewImagePage() {
   const [noRecommendationsMessage, setNoRecommendationsMessage] = useState<string | null>(null);
   const [numScans, setNumScans] = useState<number>(0);
   const [isPro, setIsPro] = useState<boolean>(false);
-  const [onboardingActive, setOnboardingActive] = useState(false);
-  const [onboardingCompleted, setOnboardingCompleted] = useState(false);
 
   const loadUsage = useCallback(async () => {
     try {
@@ -123,26 +121,7 @@ export default function NewImagePage() {
     void loadUsage();
   }, [loadUsage]);
 
-  useEffect(() => {
-    try {
-      const active = localStorage.getItem("book_onboarding_active") === "true";
-      // const completed = localStorage.getItem("book_onboarding_completed") === "true";
-      setOnboardingActive(active);
-      // setOnboardingCompleted(completed);
-    } catch {
-      // Ignore
-    }
-  }, []);
-
   const handleStartOnboarding = () => {
-    try {
-      localStorage.setItem("book_onboarding_active", "true");
-      // localStorage.setItem("book_onboarding_completed", "false");
-    } catch {
-      // Ignore
-    }
-    setOnboardingActive(true);
-    // setOnboardingCompleted(false);
     window.dispatchEvent(new Event("book:onboarding-start"));
   };
 
@@ -334,7 +313,6 @@ export default function NewImagePage() {
           <p className="mt-2 text-muted-foreground">
             Paste from clipboard (Ctrl+V / Cmd+V), or drag and drop an image here.
           </p>
-          {!onboardingCompleted && !onboardingActive && (
             <Button
               type="button"
               variant="outline"
@@ -344,7 +322,6 @@ export default function NewImagePage() {
             >
               Start onboarding
             </Button>
-          )}
         </div>
 
         <div className="rounded-lg border border-border bg-card px-4 py-3 w-1/2">

frontend/components/dashboard-sidebar.tsx

@@ -121,6 +121,27 @@ export function DashboardSidebar({ children }: { children: React.ReactNode }) {
                 description: "Upload a photo of a shelf to generate recommendations.",
               },
             },
+            {
+              element: "#onboarding-history",
+              popover: {
+                title: "History",
+                description: "See your previous scans and recommendations.",
+              },
+            },
+            {
+              element: "#onboarding-usage",
+              popover: {
+                title: "Usage",
+                description: "Track scans used and how many remain this cycle.",
+              },
+            },
+            {
+              element: "#onboarding-billing",
+              popover: {
+                title: "Billing",
+                description: "Manage your subscription and payment details.",
+              },
+            },
           ],
         }).drive();
       }, 0);
@@ -186,21 +207,21 @@ export function DashboardSidebar({ children }: { children: React.ReactNode }) {
               <div className="min-h-0 flex-1" aria-hidden />
 
               <SidebarMenu>
-                <SidebarMenuItem>
+                <SidebarMenuItem id="onboarding-history">
                   <SidebarMenuButton
                     render={<Link href="/dashboard/history"><History />History</Link>}
                     isActive={pathname === "/dashboard/history"}
                     tooltip="History"
                   />
                 </SidebarMenuItem>
-                <SidebarMenuItem>
+                <SidebarMenuItem id="onboarding-usage">
                   <SidebarMenuButton
                     render={<Link href="/dashboard/usage"><Gauge />Usage</Link>}
                     isActive={pathname === "/dashboard/usage"}
                     tooltip="Usage"
                   />
                 </SidebarMenuItem>
-                <SidebarMenuItem>
+                <SidebarMenuItem id="onboarding-billing">
                   <SidebarMenuButton
                     render={<Link href="/dashboard/billing"><CreditCard />Billing</Link>}
                     isActive={pathname === "/dashboard/billing"}