Onboarding button moved to the top right of the screen

Author: AdityaGoyal1999

frontend/app/dashboard/layout.tsx

@@ -1,9 +1,15 @@
 import { DashboardSidebar } from "@/components/dashboard-sidebar";
+import { DashboardOnboardingTrigger } from "@/components/dashboard-onboarding-trigger";
 
 export default function DashboardLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return <DashboardSidebar>{children}</DashboardSidebar>;
+  return (
+    <>
+      <DashboardOnboardingTrigger />
+      <DashboardSidebar>{children}</DashboardSidebar>
+    </>
+  );
 }

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

@@ -121,10 +121,6 @@ export default function NewImagePage() {
     void loadUsage();
   }, [loadUsage]);
 
-  const handleStartOnboarding = () => {
-    window.dispatchEvent(new Event("book:onboarding-start"));
-  };
-
   const limit = isPro ? 50 : 5;
 
   const processFile = useCallback(async (file: File) => {
@@ -313,15 +309,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>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="mt-3"
-              onClick={handleStartOnboarding}
-            >
-              Start onboarding
-            </Button>
         </div>
 
         <div className="rounded-lg border border-border bg-card px-4 py-3 w-1/2">

frontend/components/dashboard-onboarding-trigger.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+
+export function DashboardOnboardingTrigger() {
+  const handleStartOnboarding = () => {
+    window.dispatchEvent(new Event("book:onboarding-start"));
+  };
+
+  return (
+    <div className="fixed right-4 top-3 z-50">
+      <Button type="button" variant="outline" size="sm" onClick={handleStartOnboarding}>
+        Demo App
+      </Button>
+    </div>
+  );
+}
+