hanh.tonguyen/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make onboarding wizard steps clickable tabs for easier dev navigation

Browse Source 
Replace the progress bar dots with labeled tab buttons (Company, Agent,
Task, Launch) that allow clicking directly to any step. This makes it
easy to debug/preview individual onboarding screens without stepping
through the full flow.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dotta
2026-03-11 13:36:51 -05:00
parent c3cf4279fa
commit e6a684d96a
1 changed files with 23 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
ui/src/components/OnboardingWizard.tsx
View File

@@ -555,28 +555,29 @@ export function OnboardingWizard() {
{/* Left half — form */} {/* Left half — form */}
<div className="w-full md:w-1/2 flex flex-col overflow-y-auto"> <div className="w-full md:w-1/2 flex flex-col overflow-y-auto">
<div className="w-full max-w-md mx-auto my-auto px-8 py-12 shrink-0"> <div className="w-full max-w-md mx-auto my-auto px-8 py-12 shrink-0">
{/* Progress indicators */} {/* Progress tabs */}
<div className="flex items-center gap-2 mb-8"> <div className="flex items-center gap-0 mb-8 border-b border-border">
<Sparkles className="h-4 w-4 text-muted-foreground" /> {([
<span className="text-sm font-medium">Get Started</span> { step: 1 as Step, label: "Company", icon: Building2 },
<span className="text-sm text-muted-foreground/60"> { step: 2 as Step, label: "Agent", icon: Bot },
Step {step} of 4 { step: 3 as Step, label: "Task", icon: ListTodo },
</span> { step: 4 as Step, label: "Launch", icon: Rocket },
<div className="flex items-center gap-1.5 ml-auto"> ] as const).map(({ step: s, label, icon: Icon }) => (
{[1, 2, 3, 4].map((s) => ( <button
<div key={s}
key={s} type="button"
className={cn( onClick={() => setStep(s)}
"h-1.5 w-6 rounded-full transition-colors", className={cn(
s < step "flex items-center gap-1.5 px-3 py-2 text-xs font-medium border-b-2 -mb-px transition-colors cursor-pointer",
? "bg-green-500" s === step
: s === step ? "border-foreground text-foreground"
? "bg-foreground" : "border-transparent text-muted-foreground hover:text-foreground/70 hover:border-border"
: "bg-muted" )}
)} >
/> <Icon className="h-3.5 w-3.5" />
))} {label}
</div> </button>
))}
</div> </div>
{/* Step content */} {/* Step content */}