feat(onboarding): replace preview panel with stepper checklist

2026-07-14 11:16:13 +02:00 · 2026-06-18 11:05:36 +02:00
parent 5c1b247ee5
commit 082539df12
1 changed files with 80 additions and 0 deletions
@@ -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>
+    );
+};