Solved Issue #764 - BUG: Back button in onboarding steps does not work

frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   setAvatar,
   setName,
@@ -18,11 +18,12 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { avatars } from '@/constants/avatars';
 import { AppFeatures } from '@/components/OnboardingSteps/AppFeatures';
+import { RootState } from '@/app/store';
 
 interface AvatarNameSelectionStepProps {
   stepIndex: number;
   totalSteps: number;
-  currentStepDisplayIndex: number;
+  currentStepDisplayIndex?: number;
 }
 
 export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
@@ -32,14 +33,26 @@ export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
 }) => {
   const dispatch = useDispatch();
 
-  const [name, setLocalName] = useState('');
-  const [selectedAvatar, setLocalAvatar] = useState('');
+  const displayIndex = currentStepDisplayIndex ?? stepIndex;
+
+  const [name, setLocalName] = useState(localStorage.getItem('name') || '');
+  const [selectedAvatar, setLocalAvatar] = useState(
+    localStorage.getItem('avatar') || '',
+  );
+
+  const isEditing = useSelector(
+    (state: RootState) => state.onboarding.isEditing,
+  );
 
   useEffect(() => {
-    if (localStorage.getItem('name') && localStorage.getItem('avatar')) {
+    if (
+      localStorage.getItem('name') &&
+      localStorage.getItem('avatar') &&
+      !isEditing
+    ) {
       dispatch(markCompleted(stepIndex));
     }
-  }, []);
+  }, [dispatch, isEditing, stepIndex]);
 
   const handleAvatarSelect = (avatar: string) => {
     setLocalAvatar(avatar);
@@ -57,7 +70,11 @@ export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
     dispatch(markCompleted(stepIndex));
   };
 
-  if (localStorage.getItem('name') && localStorage.getItem('avatar')) {
+  if (
+    localStorage.getItem('name') &&
+    localStorage.getItem('avatar') &&
+    !isEditing
+  ) {
     return null;
   }
 
@@ -67,20 +84,20 @@ export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
         <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)}%
+              Step {displayIndex + 1} of {totalSteps}
             </span>
+            <span>{Math.round(((displayIndex + 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: `${((currentStepDisplayIndex + 1) / totalSteps) * 100}%`,
+                width: `${((displayIndex + 1) / totalSteps) * 100}%`,
               }}
             />
           </div>
+
           <CardTitle className="mt-1 text-xl font-semibold">
             Welcome to PictoPy
           </CardTitle>
@@ -103,7 +120,6 @@ export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
             />
           </div>
 
-          {/* Avatar Grid */}
           <div className="mb-5">
             <Label className="mb-2 block text-sm">Choose Your Avatar</Label>
             <div className="grid grid-cols-4 gap-3">

frontend/src/components/OnboardingSteps/FolderSetupStep.tsx

@@ -9,17 +9,21 @@ import {
 } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { FolderOpen, X, Folder } from 'lucide-react';
-import { useDispatch } from 'react-redux';
-import { AppDispatch } from '@/app/store';
-import { markCompleted, previousStep } from '@/features/onboardingSlice';
+import { useDispatch, useSelector } from 'react-redux';
+import { AppDispatch, RootState } from '@/app/store';
+import {
+  markCompleted,
+  previousStep,
+  setIsEditing,
+} from '@/features/onboardingSlice';
 import { AppFeatures } from '@/components/OnboardingSteps/AppFeatures';
 import { useFolder } from '@/hooks/useFolder';
 import { useEffect, useState } from 'react';
 
 interface FolderSetupStepProps {
   stepIndex: number;
   totalSteps: number;
-  currentStepDisplayIndex: number;
+  currentStepDisplayIndex?: number;
 }
 
 export function FolderSetupStep({
@@ -29,14 +33,18 @@ export function FolderSetupStep({
 }: FolderSetupStepProps) {
   const dispatch = useDispatch<AppDispatch>();
 
-  // Local state for folders
+  const displayIndex = currentStepDisplayIndex ?? stepIndex;
+
   const [folder, setFolder] = useState<string>('');
+  const isEditing = useSelector(
+    (state: RootState) => state.onboarding.isEditing,
+  );
 
   useEffect(() => {
-    if (localStorage.getItem('folderChosen') === 'true') {
+    if (localStorage.getItem('folderChosen') === 'true' && !isEditing) {
       dispatch(markCompleted(stepIndex));
     }
-  }, []);
+  }, [dispatch, isEditing, stepIndex]);
 
   const { pickSingleFolder, addFolderMutate } = useFolder({
     title: 'Select folder to import photos from',
@@ -60,26 +68,27 @@ export function FolderSetupStep({
   };
 
   const handleBack = () => {
+    dispatch(setIsEditing(true));
     dispatch(previousStep());
   };
 
-  if (localStorage.getItem('folderChosen') === 'true') {
+  if (localStorage.getItem('folderChosen') === 'true' && !isEditing) {
     return null;
   }
-  const progressPercent = Math.round(
-    ((currentStepDisplayIndex + 1) / totalSteps) * 100,
-  );
+
+  const progressPercent = Math.round(((displayIndex + 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 {currentStepDisplayIndex + 1} of {totalSteps}
+              Step {displayIndex + 1} of {totalSteps}
             </span>
             <span>{progressPercent}%</span>
           </div>
+
           <div className="bg-muted mb-4 h-2 w-full rounded-full">
             <div
               className="bg-primary h-full rounded-full transition-all duration-300"
@@ -94,6 +103,7 @@ export function FolderSetupStep({
             Choose the folder you want to import your photos from
           </CardDescription>
         </CardHeader>
+
         <CardContent className="flex-1 space-y-6 overflow-y-auto p-1 px-2">
           {!folder && (
             <div
@@ -128,7 +138,7 @@ export function FolderSetupStep({
                 </div>
                 <button
                   type="button"
-                  onClick={() => handleRemoveFolder()}
+                  onClick={handleRemoveFolder}
                   className="text-muted-foreground hover:text-destructive hover:bg-destructive/10 ml-2 flex h-7 w-7 items-center justify-center rounded-md opacity-0 transition-colors group-hover:opacity-100"
                 >
                   <X className="h-4 w-4" />

frontend/src/components/OnboardingSteps/OnboardingStep.tsx

@@ -11,6 +11,7 @@ import { ServerCheck } from './ServerCheck';
 interface OnboardingStepProps {
   stepIndex: number;
   stepName: string;
+  currentStepDisplayIndex?: number;
 }
 
 const VISIBLE_STEPS = [
@@ -22,17 +23,20 @@ const VISIBLE_STEPS = [
 export const OnboardingStep: React.FC<OnboardingStepProps> = ({
   stepIndex,
   stepName,
+  currentStepDisplayIndex,
 }) => {
-  const visibleStepIndex = VISIBLE_STEPS.indexOf(stepName);
+  const STEP_NAMES = Object.values(STEPS);
+  const safeIndex = Math.max(0, Math.min(stepIndex, STEP_NAMES.length - 1));
+  const currentStepName = stepName || STEP_NAMES[safeIndex];
 
   const sharedProps = {
-    stepIndex,
+    stepIndex: safeIndex,
     totalSteps: VISIBLE_STEPS.length,
-    currentStepDisplayIndex: visibleStepIndex,
+    currentStepDisplayIndex,
   };
 
   const renderStepComponent = () => {
-    switch (stepName) {
+    switch (currentStepName) {
       case STEPS.AVATAR_SELECTION_STEP:
         return <AvatarSelectionStep {...sharedProps} />;
       case STEPS.FOLDER_SETUP_STEP:

frontend/src/components/OnboardingSteps/ThemeSelectionStep.tsx

@@ -1,7 +1,11 @@
 import React, { useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-import { AppDispatch } from '@/app/store';
-import { markCompleted, previousStep } from '@/features/onboardingSlice';
+import { useDispatch, useSelector } from 'react-redux';
+import { AppDispatch, RootState } from '@/app/store';
+import {
+  markCompleted,
+  previousStep,
+  setIsEditing,
+} from '@/features/onboardingSlice';
 
 import { Button } from '@/components/ui/button';
 import {
@@ -18,10 +22,11 @@ import { Sun, Moon, Monitor } from 'lucide-react';
 
 import { AppFeatures } from '@/components/OnboardingSteps/AppFeatures';
 import { useTheme } from '@/contexts/ThemeContext';
+
 interface ThemeSelectionStepProps {
   stepIndex: number;
   totalSteps: number;
-  currentStepDisplayIndex: number;
+  currentStepDisplayIndex?: number;
 }
 
 export const ThemeSelectionStep: React.FC<ThemeSelectionStepProps> = ({
@@ -31,12 +36,19 @@ export const ThemeSelectionStep: React.FC<ThemeSelectionStepProps> = ({
 }) => {
   const { setTheme, theme } = useTheme();
   const dispatch = useDispatch<AppDispatch>();
+  const isEditing = useSelector(
+    (state: RootState) => state.onboarding.isEditing,
+  );
+
+  // ✅ TS-safe fallback ONLY (no logic change)
+  const displayIndex = currentStepDisplayIndex ?? stepIndex;
 
   useEffect(() => {
-    if (localStorage.getItem('themeChosen')) {
+    if (localStorage.getItem('themeChosen') === 'true' && !isEditing) {
       dispatch(markCompleted(stepIndex));
     }
-  }, []);
+  }, [dispatch, isEditing, stepIndex]);
+
   const handleThemeChange = (value: 'light' | 'dark' | 'system') => {
     setTheme(value);
   };
@@ -47,25 +59,27 @@ export const ThemeSelectionStep: React.FC<ThemeSelectionStepProps> = ({
   };
 
   const handleBack = () => {
+    dispatch(setIsEditing(true));
     dispatch(previousStep());
   };
-  if (localStorage.getItem('themeChosen')) {
+
+  if (localStorage.getItem('themeChosen') === 'true' && !isEditing) {
     return null;
   }
 
-  const progressPercent = Math.round(
-    ((currentStepDisplayIndex + 1) / totalSteps) * 100,
-  );
+  const progressPercent = Math.round(((displayIndex + 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 {currentStepDisplayIndex + 1} of {totalSteps}
+              Step {displayIndex + 1} of {totalSteps}
             </span>
             <span>{progressPercent}%</span>
           </div>
+
           <div className="bg-muted mb-4 h-2 w-full rounded-full">
             <div
               className="bg-primary h-full rounded-full transition-all duration-300"
@@ -80,6 +94,7 @@ export const ThemeSelectionStep: React.FC<ThemeSelectionStepProps> = ({
             Choose your preferred appearance
           </CardDescription>
         </CardHeader>
+
         <CardContent className="flex-1 space-y-6 overflow-y-auto p-1 px-2">
           <RadioGroup
             value={theme}
@@ -137,6 +152,7 @@ export const ThemeSelectionStep: React.FC<ThemeSelectionStepProps> = ({
           </Button>
         </CardFooter>
       </Card>
+
       <AppFeatures />
     </>
   );

frontend/src/features/onboardingSlice.ts

@@ -9,6 +9,7 @@ interface OnboardingState {
   stepStatus: boolean[];
   avatar: string | null;
   name: string;
+  isEditing: boolean;
 }
 
 const initialState: OnboardingState = {
@@ -17,6 +18,7 @@ const initialState: OnboardingState = {
   stepStatus: STEP_NAMES.map(() => false),
   avatar: localStorage.getItem('avatar'),
   name: localStorage.getItem('name') || '',
+  isEditing: false,
 };
 const onboardingSlice = createSlice({
   name: 'onboarding',
@@ -28,6 +30,9 @@ const onboardingSlice = createSlice({
     setName(state, action: PayloadAction<string>) {
       state.name = action.payload;
     },
+    setIsEditing(state, action: PayloadAction<boolean>) {
+      state.isEditing = action.payload;
+    },
     markCompleted(state, action: PayloadAction<number>) {
       const stepIndex = action.payload;
       if (stepIndex >= 0 && stepIndex < state.stepStatus.length) {
@@ -51,7 +56,7 @@ const onboardingSlice = createSlice({
   },
 });
 
-export const { setAvatar, setName, markCompleted, previousStep } =
+export const { setAvatar, setName, setIsEditing, markCompleted, previousStep } =
   onboardingSlice.actions;
 
 export default onboardingSlice.reducer;