From aef1c7b8fb044ad2336967c77e8b901fdc379a96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20LAGACHE?= <theo.lagache@soluce-technologies.com>
Date: Thu, 18 Jun 2026 16:04:39 +0200
Subject: [PATCH] feat(onboarding): show Next button in shell when navigating
 backwards

---
 src/features/onboarding/onboarding-shell.tsx | 138 ++++++++++++-------
 1 file changed, 90 insertions(+), 48 deletions(-)

diff --git a/src/features/onboarding/onboarding-shell.tsx b/src/features/onboarding/onboarding-shell.tsx
index f16de398..d0fc2fcd 100644
--- a/src/features/onboarding/onboarding-shell.tsx
+++ b/src/features/onboarding/onboarding-shell.tsx
@@ -1,62 +1,104 @@
 "use client";
 
-import Image from "next/image";
+import { useEffect, useState } from "react";
 import { useOnboarding } from "@onboardjs/react";
 import { Button } from "@/components/ui/button";
 import { OnboardingStepper } from "@/features/onboarding/onboarding-stepper";
 import { OnboardingChecklist } from "@/features/onboarding/onboarding-checklist";
-import Logo from "@/app/icon0.svg";
+import { Heart } from "lucide-react";
+import { AuthLogoSection } from "../auth/auth-logo-section";
+
+const STEP_ORDER = [
+  "login",
+  "account-info",
+  "security",
+  "preferences",
+  "org-create",
+  "invite-members",
+  "notifier",
+  "storage",
+  "defaults",
+  "agent-create",
+  "agent-key",
+  "agent-waiting",
+  "project-create",
+  "db-settings",
+  "finish",
+];
 
 export const OnboardingShell = () => {
-    const { state, previous, skip, renderStep } = useOnboarding();
+  const { state, previous, skip, next, renderStep } = useOnboarding();
 
-    if (!state) return null;
+  const currentStepId = String(state?.currentStep?.id ?? "");
+  const currentIndex = STEP_ORDER.indexOf(currentStepId);
 
-    const showSplit = state.currentStep?.id !== "agent-waiting" && state.currentStep?.id !== "finish";
+  const [latestIndex, setLatestIndex] = useState(currentIndex);
 
-    return (
-        <div className="min-h-screen bg-zinc-950 text-white flex flex-col items-center justify-center p-4 gap-4">
-            {/* Logo */}
-            <div className="flex items-center gap-2">
-                <Image src={Logo} alt="Portabase" width={28} height={28} />
-                <span className="text-lg font-semibold tracking-tight">Portabase</span>
+  useEffect(() => {
+    setLatestIndex((prev) => Math.max(prev, currentIndex));
+  }, [currentIndex]);
+
+  if (!state) return null;
+
+  const showSplit =
+    currentStepId !== "agent-waiting" && currentStepId !== "finish";
+
+  const isGoingBack = currentIndex < latestIndex;
+
+  return (
+    <div className="min-h-screen bg-zinc-950 text-white flex flex-col items-center justify-center p-4 gap-4">
+      <AuthLogoSection />
+      <div className="w-full max-w-4xl rounded-2xl bg-zinc-900 border border-white/10 shadow-2xl overflow-hidden flex flex-col md:flex-row min-h-[560px]">
+        <div className="flex-1 flex flex-col gap-6 p-8">
+          <OnboardingStepper />
+          <div className="flex-1">{renderStep()}</div>
+          <div className="flex justify-between">
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={() => previous()}
+              disabled={state.isFirstStep || state.isLoading}
+            >
+              Back
+            </Button>
+            <div className="flex gap-2">
+              {state.isSkippable && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  onClick={() => skip()}
+                  disabled={state.isLoading}
+                >
+                  Skip
+                </Button>
+              )}
+              {isGoingBack && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  onClick={() => next()}
+                  disabled={state.isLoading}
+                >
+                  Next
+                </Button>
+              )}
             </div>
-
-            {/* Card */}
-            <div className="w-full max-w-4xl rounded-2xl bg-zinc-900 border border-white/10 shadow-2xl overflow-hidden flex flex-col md:flex-row min-h-[560px]">
-                <div className="flex-1 flex flex-col gap-6 p-8">
-                    <OnboardingStepper />
-                    <div className="flex-1">{renderStep()}</div>
-                    <div className="flex justify-between">
-                        <Button
-                            type="button"
-                            variant="ghost"
-                            onClick={() => previous()}
-                            disabled={state.isFirstStep || state.isLoading}
-                        >
-                            Back
-                        </Button>
-                        {state.isSkippable && (
-                            <Button
-                                type="button"
-                                variant="ghost"
-                                onClick={() => skip()}
-                                disabled={state.isLoading}
-                            >
-                                Skip
-                            </Button>
-                        )}
-                    </div>
-                </div>
-                {showSplit && (
-                    <div className="hidden md:block w-[300px] border-l border-white/10 bg-zinc-950">
-                        <OnboardingChecklist />
-                    </div>
-                )}
-            </div>
-
-            {/* Footer */}
-            <p className="text-xs text-zinc-600">Made with ♥ by Portabase</p>
+          </div>
         </div>
-    );
+        {showSplit && (
+          <div className="hidden md:block w-75 border-l border-white/10 bg-zinc-950">
+            <OnboardingChecklist />
+          </div>
+        )}
+      </div>
+
+      <footer className="mt-8 text-center text-xs text-muted-foreground flex flex-col gap-1">
+        <p className="flex items-center justify-center gap-1">
+          Made with{" "}
+          <Heart className="size-3 fill-red-500 text-red-500 animate-pulse" />{" "}
+          by <span className="font-medium text-foreground">Portabase</span>
+        </p>
+      </footer>
+    </div>
+  );
 };