Fix: Prevent progress bar overflow in onboarding steps

[srijan2607]

Related issue #638

This pull request improves the onboarding progress calculation and display logic to ensure that progress percentages and progress bars never exceed 100%, and that step indices accurately reflect only visible steps. The changes increase the accuracy and robustness of the onboarding UI.

Progress calculation and display improvements:

• All onboarding steps now use Math.min(100, ...) to cap progress percentages and progress bar widths at 100%, preventing UI overflow or incorrect displays. (AvatarSelectionStep.tsx, FolderSetupStep.tsx, ThemeSelectionStep.tsx) [1] [2] [3]

Step index logic update:

• The OnboardingStep component now maps the current step name to its index within VISIBLE_STEPS, ensuring that progress indicators are based only on visible steps rather than all possible steps. (OnboardingStep.tsx)

Summary by CodeRabbit

Bug Fixes

• Fixed progress indicator from exceeding 100% during the onboarding flow, ensuring the progress bar displays correctly throughout all setup steps.
• Improved step index tracking in the onboarding sequence to accurately reflect visible steps in the process.

[coderabbitai]

Walkthrough

The pull request fixes progress percentage overflow and step index calculation in the onboarding flow by clamping progress values to a maximum of 100 and remapping the current step index to visible steps, preventing display misalignment.

Changes

Cohort / File(s)	Summary
Progress Clamping frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx, frontend/src/components/OnboardingSteps/FolderSetupStep.tsx, frontend/src/components/OnboardingSteps/ThemeSelectionStep.tsx	Applied Math.min(100, ...) to clamp progress percentage calculations, preventing values from exceeding 100 in both text display and progress bar width computation
Step Index Correction frontend/src/components/OnboardingSteps/OnboardingStep.tsx	Introduced mapping of current step name to its index within VISIBLE_STEPS and updated sharedProps.stepIndex to use the corrected visible step index instead of the raw step index

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Specific areas requiring attention:
  • Verify that Math.min clamping in three separate files correctly handles edge cases where step progression exceeds the total step count
  • Confirm that the visible step index mapping in OnboardingStep.tsx correctly resolves step names and properly falls back to the original index when necessary

Possibly related issues

• BUG: progress bar overflow in onboarding steps #638: Directly addresses the reported progress overflow bug and step index miscount by clamping progress to 100 and remapping step indices to visible steps

Possibly related PRs

• Fixed the Onboarding Page Setup #485: Modifies the same onboarding step components; this PR applies progress clamping and step index corrections as refinements to components introduced in that earlier change

Poem

🐰 A progress bar once climbed past one-zero-zero,
But now it's clamped down to heroic zero!
The steps align with what is seen,
No overflow, just smooth routine,
The onboarding dance, now clean and serene! ✨

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 (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main objective of the pull request—preventing progress bar overflow by clamping percentages and correcting step index calculations in onboarding components.

✨ 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.}

[coderabbitai]

Actionable comments posted: 2

♻️ Duplicate comments (1)

frontend/src/components/OnboardingSteps/FolderSetupStep.tsx (1)

67-67: Progress capping fix is correct.

The Math.min(100, ...) clamping correctly prevents progress overflow. The calculated value is consistently used for both text display (Line 77) and bar width (Line 82), avoiding the inconsistency present in AvatarSelectionStep.tsx.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8dbc960 and c23c797.

📒 Files selected for processing (4)

• frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx (1 hunks)
• frontend/src/components/OnboardingSteps/FolderSetupStep.tsx (1 hunks)
• frontend/src/components/OnboardingSteps/OnboardingStep.tsx (1 hunks)
• frontend/src/components/OnboardingSteps/ThemeSelectionStep.tsx (1 hunks)

🔇 Additional comments (1)

frontend/src/components/OnboardingSteps/OnboardingStep.tsx (1)

26-30: LGTM! Step index mapping correctly aligns with visible steps.

The visible step index mapping correctly computes the current step's position within VISIBLE_STEPS and falls back to the original stepIndex for non-visible steps (UPDATE_STEP, SERVER_CHECK). This ensures progress calculations in child components reflect only the visible onboarding steps.

[srijan2607]

@rahulharpal1603 can you take a look