From 082539df121cd0615a0c39b7b645c97115bc656f 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 11:05:36 +0200
Subject: [PATCH] feat(onboarding): replace preview panel with stepper
 checklist

---
 .../onboarding/onboarding-checklist.tsx       | 80 +++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 src/features/onboarding/onboarding-checklist.tsx

diff --git a/src/features/onboarding/onboarding-checklist.tsx b/src/features/onboarding/onboarding-checklist.tsx
new file mode 100644
index 00000000..14b90d1e
--- /dev/null
+++ b/src/features/onboarding/onboarding-checklist.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { useOnboarding } from "@onboardjs/react";
+import { CheckCircle2, Circle } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const CHECKLIST_STEPS = [
+    { id: "login", label: "Sign in" },
+    { id: "account-info", label: "Your account" },
+    { id: "security", label: "Security" },
+    { id: "preferences", label: "Preferences" },
+    { id: "org-create", label: "Organisation" },
+    { id: "invite-members", label: "Team members" },
+    { id: "notifier", label: "Notifications" },
+    { id: "storage", label: "Storage" },
+    { id: "defaults", label: "Defaults" },
+    { id: "agent-create", label: "Agent setup" },
+    { id: "agent-key", label: "Agent key" },
+    { id: "agent-waiting", label: "Agent connection" },
+    { id: "project-create", label: "Project" },
+    { id: "db-settings", label: "Database settings" },
+    { id: "finish", label: "Done" },
+] as const;
+
+export const OnboardingChecklist = () => {
+    const { state } = useOnboarding();
+    if (!state) return null;
+
+    const currentId = state.currentStep?.id ?? "";
+    const currentIndex = CHECKLIST_STEPS.findIndex((s) => s.id === currentId);
+
+    return (
+        <div className="flex flex-col gap-0 p-6 h-full">
+            <p className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-4">Progress</p>
+            <div className="flex flex-col relative">
+                {CHECKLIST_STEPS.map((step, i) => {
+                    const isCompleted = i < currentIndex;
+                    const isCurrent = i === currentIndex;
+                    const isLast = i === CHECKLIST_STEPS.length - 1;
+
+                    return (
+                        <div key={step.id} className="flex gap-3">
+                            {/* Icon + line */}
+                            <div className="flex flex-col items-center">
+                                {isCompleted ? (
+                                    <CheckCircle2 className="size-4 text-green-500 shrink-0 mt-0.5" />
+                                ) : (
+                                    <Circle
+                                        className={cn(
+                                            "size-4 shrink-0 mt-0.5",
+                                            isCurrent ? "text-primary" : "text-zinc-700"
+                                        )}
+                                    />
+                                )}
+                                {!isLast && (
+                                    <div className={cn(
+                                        "w-px flex-1 mt-1 mb-1 min-h-[16px]",
+                                        isCompleted ? "bg-green-500/40" : "bg-zinc-800"
+                                    )} />
+                                )}
+                            </div>
+
+                            {/* Label */}
+                            <p
+                                className={cn(
+                                    "text-sm pb-4",
+                                    isCompleted && "text-zinc-400",
+                                    isCurrent && "text-white font-medium",
+                                    !isCompleted && !isCurrent && "text-zinc-600"
+                                )}
+                            >
+                                {step.label}
+                            </p>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};