fixed progress bar overflow in onboarding steps

[Garry400]

Fixes #638 issue where the onboarding progress bar exceeded 100% and showed incorrect step numbers due to using a global step index that included hidden steps.

Changes:

• Calculated progress using only visible onboarding steps
• Introduced currentStepDisplayIndex to decouple UI from internal state
• Updated progress bar and step labels to reflect correct Step X of Y

Result:

Progress and step count now accurately represent user-facing onboarding steps.

Summary by CodeRabbit

• Bug Fixes
  • Onboarding progress and step labels now consistently use a display index across all setup steps, ensuring the "Step X of Y" text, progress bar, and percentage accurately reflect the user's position through the flow.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[github-actions]

⚠️ No issue was linked in the PR description.
Please make sure to link an issue (e.g., 'Fixes #issue_number')

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR decouples user-facing progress from internal step indexing by computing a visible step index in OnboardingStep and passing it as currentStepDisplayIndex to onboarding child components, which now use it for progress percentage and "Step X of Y" labels.

Changes

Cohort / File(s)	Summary
Onboarding parent frontend/src/components/OnboardingSteps/OnboardingStep.tsx	Compute visibleStepIndex = VISIBLE_STEPS.indexOf(stepName) and add currentStepDisplayIndex to sharedProps, propagating it to child step components.
Avatar selection step frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx	Add currentStepDisplayIndex to AvatarNameSelectionStepProps and AvatarSelectionStep props; replace display uses of stepIndex with currentStepDisplayIndex (step label, progress width, percentage).
Folder setup step frontend/src/components/OnboardingSteps/FolderSetupStep.tsx	Add currentStepDisplayIndex to FolderSetupStepProps and component props; use it for progress percent and "Step X of Y" label instead of stepIndex.
Theme selection step frontend/src/components/OnboardingSteps/ThemeSelectionStep.tsx	Add currentStepDisplayIndex to ThemeSelectionStepProps and component props; replace stepIndex with currentStepDisplayIndex for progress and step label.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Fixed the Onboarding Page Setup #485 — Introduced the onboarding step components and their stepIndex props; closely related as this PR changes those components to accept and use currentStepDisplayIndex.

Poem

🐰 I hopped through steps both seen and sly,

Recounting only those that meet the eye.
No more 133% to make me stop —
Progress now counts from the visible top.
Hooray for steps that hop just right! 🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: fixing progress bar overflow by using visible step indices instead of global indices in onboarding components.
Linked Issues check	✅ Passed	The PR implements the core fix for issue #638 by introducing currentStepDisplayIndex to track visible steps and updating all progress calculations across AvatarSelectionStep, FolderSetupStep, and ThemeSelectionStep components.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the progress bar overflow issue. The commit message mentioning className syntax fix for avatar selection is a minor, related correction to the same component affected by the main changes.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

⚠️ No issue was linked in the PR description.
Please make sure to link an issue (e.g., 'Fixes #issue_number')

[Garry400]

This solves issue #638

[SnippyCodes]

Hello! I am participating in GSoC and would like to work on this issue. Could you please assign it to me?
Thank you!

[rahulharpal1603]

@Garry400 Please fix the Lint issues ASAP.

[rahulharpal1603]

Never mind, there was only a small fix needed, which I did myself.

[rahulharpal1603]

@Garry400 Thanks!

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx (2)

22-26: Consider adding JSDoc to clarify the dual index pattern.

The interface now contains both stepIndex (for internal state management) and currentStepDisplayIndex (for UI display). Adding brief JSDoc comments would help future maintainers understand the distinction between these two indices.

📝 Suggested documentation enhancement

 interface AvatarNameSelectionStepProps {
+  /** Internal step index including hidden/internal steps, used for state management */
   stepIndex: number;
   totalSteps: number;
+  /** Display-only index for visible onboarding steps, used for progress UI */
   currentStepDisplayIndex: number;
 }

---

76-83: Consider extracting the progress calculation to reduce duplication.

The progress bar width calculation is correct and consistent with the percentage display. However, the same calculation ((currentStepDisplayIndex + 1) / totalSteps) * 100 appears in both line 73 and line 80.

🔎 Optional DRY refactor

   const handleNextClick = () => {
     dispatch(setName(name));
     dispatch(setAvatar(selectedAvatar));
     localStorage.setItem('name', name);
     localStorage.setItem('avatar', selectedAvatar);
     dispatch(markCompleted(stepIndex));
   };
+
+  const progressPercentage = ((currentStepDisplayIndex + 1) / totalSteps) * 100;

   if (localStorage.getItem('name') && localStorage.getItem('avatar')) {
     return null;
   }

   return (
     <>
       <Card className="flex max-h-full w-1/2 flex-col gap-3 border p-4">
         <CardHeader className="p-3">
           <div className="text-muted-foreground mb-1 flex justify-between text-xs">
             <span>
               Step {currentStepDisplayIndex + 1} of {totalSteps}
             </span>
             <span>
-              {Math.round(((currentStepDisplayIndex + 1) / totalSteps) * 100)}%
+              {Math.round(progressPercentage)}%
             </span>
           </div>
           <div className="bg-muted mb-2 h-1.5 w-full rounded-full">
             <div
               className="bg-primary h-full rounded-full transition-all duration-300"
               style={{
-                width: `${((currentStepDisplayIndex + 1) / totalSteps) * 100}%`,
+                width: `${progressPercentage}%`,
               }}
             />
           </div>

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 75bc9ff and 609c097.

📒 Files selected for processing (1)

• frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: Tauri Build Check (ubuntu-22.04)
• GitHub Check: Tauri Build Check (windows-latest)
• GitHub Check: Tauri Build Check (macos-latest, --target aarch64-apple-darwin)
• GitHub Check: Backend Tests

🔇 Additional comments (2)

frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx (2)

28-32: LGTM!

The prop destructuring correctly includes the new currentStepDisplayIndex parameter, matching the interface definition.

---

68-75: The progress calculation is correct and properly handled; no additional validation is needed.

The currentStepDisplayIndex is derived from VISIBLE_STEPS.indexOf(stepName) in the parent component, which returns valid indices (0, 1, 2) for AvatarSelectionStep, FolderSetupStep, and ThemeSelectionStep—the only components that actually use this prop. UpdateStep and ServerCheck receive the prop but do not use it, so the -1 edge case from indexOf() never impacts rendering. The step label and progress percentage calculations are mathematically correct and will display properly across all steps.