Fix progress bar overflow in onboarding steps (#726)

* fixed progress bar overflow in onboarding steps


Co-authored-by: Rahul Harpal <51887323+rahulharpal1603@users.noreply.github.com>

Author: Garry400

frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx

@@ -22,11 +22,13 @@ import { AppFeatures } from '@/components/OnboardingSteps/AppFeatures';
 interface AvatarNameSelectionStepProps {
   stepIndex: number;
   totalSteps: number;
+  currentStepDisplayIndex: number;
 }
 
 export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
   stepIndex,
   totalSteps,
+  currentStepDisplayIndex,
 }) => {
   const dispatch = useDispatch();
 
@@ -65,14 +67,18 @@ export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
         <CardHeader className="p-3">
           <div className="text-muted-foreground mb-1 flex justify-between text-xs">
             <span>
-              Step {stepIndex + 1} of {totalSteps}
+              Step {currentStepDisplayIndex + 1} of {totalSteps}
+            </span>
+            <span>
+              {Math.round(((currentStepDisplayIndex + 1) / totalSteps) * 100)}%
             </span>
-            <span>{Math.round(((stepIndex + 1) / totalSteps) * 100)}%</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: `${((stepIndex + 1) / totalSteps) * 100}%` }}
+              style={{
+                width: `${((currentStepDisplayIndex + 1) / totalSteps) * 100}%`,
+              }}
             />
           </div>
           <CardTitle className="mt-1 text-xl font-semibold">

frontend/src/components/OnboardingSteps/FolderSetupStep.tsx

@@ -19,11 +19,13 @@ import { useEffect, useState } from 'react';
 interface FolderSetupStepProps {
   stepIndex: number;
   totalSteps: number;
+  currentStepDisplayIndex: number;
 }
 
 export function FolderSetupStep({
   stepIndex,
   totalSteps,
+  currentStepDisplayIndex,
 }: FolderSetupStepProps) {
   const dispatch = useDispatch<AppDispatch>();
 
@@ -64,15 +66,17 @@ export function FolderSetupStep({
   if (localStorage.getItem('folderChosen') === 'true') {
     return null;
   }
-  const progressPercent = Math.round(((stepIndex + 1) / totalSteps) * 100);
+  const progressPercent = Math.round(
+    ((currentStepDisplayIndex + 1) / totalSteps) * 100,
+  );
 
   return (
     <>
       <Card className="flex max-h-full w-1/2 flex-col border p-4">
         <CardHeader className="p-3">
           <div className="text-muted-foreground mb-1 flex justify-between text-xs">
             <span>
-              Step {stepIndex + 1} of {totalSteps}
+              Step {currentStepDisplayIndex + 1} of {totalSteps}
             </span>
             <span>{progressPercent}%</span>
           </div>

frontend/src/components/OnboardingSteps/OnboardingStep.tsx

@@ -23,9 +23,12 @@ export const OnboardingStep: React.FC<OnboardingStepProps> = ({
   stepIndex,
   stepName,
 }) => {
+  const visibleStepIndex = VISIBLE_STEPS.indexOf(stepName);
+
   const sharedProps = {
     stepIndex,
     totalSteps: VISIBLE_STEPS.length,
+    currentStepDisplayIndex: visibleStepIndex,
   };
 
   const renderStepComponent = () => {

frontend/src/components/OnboardingSteps/ThemeSelectionStep.tsx

@@ -21,11 +21,13 @@ import { useTheme } from '@/contexts/ThemeContext';
 interface ThemeSelectionStepProps {
   stepIndex: number;
   totalSteps: number;
+  currentStepDisplayIndex: number;
 }
 
 export const ThemeSelectionStep: React.FC<ThemeSelectionStepProps> = ({
   stepIndex,
   totalSteps,
+  currentStepDisplayIndex,
 }) => {
   const { setTheme, theme } = useTheme();
   const dispatch = useDispatch<AppDispatch>();
@@ -51,14 +53,16 @@ export const ThemeSelectionStep: React.FC<ThemeSelectionStepProps> = ({
     return null;
   }
 
-  const progressPercent = Math.round(((stepIndex + 1) / totalSteps) * 100);
+  const progressPercent = Math.round(
+    ((currentStepDisplayIndex + 1) / totalSteps) * 100,
+  );
   return (
     <>
       <Card className="flex max-h-full w-1/2 flex-col border p-4">
         <CardHeader className="p-3">
           <div className="text-muted-foreground mb-1 flex justify-between text-xs">
             <span>
-              Step {stepIndex + 1} of {totalSteps}
+              Step {currentStepDisplayIndex + 1} of {totalSteps}
             </span>
             <span>{progressPercent}%</span>
           </div>