Fix/back button changes only

docs/backend/backend_python/openapi.json

@@ -1117,9 +1117,14 @@
             "in": "query",
             "required": false,
             "schema": {
-              "$ref": "#/components/schemas/InputType",
+              "allOf": [
+                {
+                  "$ref": "#/components/schemas/InputType"
+                }
+              ],
               "description": "Choose input type: 'path' or 'base64'",
-              "default": "path"
+              "default": "path",
+              "title": "Input Type"
             },
             "description": "Choose input type: 'path' or 'base64'"
           }
@@ -2199,7 +2204,6 @@
           "metadata": {
             "anyOf": [
               {
-                "additionalProperties": true,
                 "type": "object"
               },
               {

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,23 +18,35 @@ 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;
 }
 
 export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
   stepIndex,
   totalSteps,
+  currentStepDisplayIndex,
 }) => {
   const dispatch = useDispatch();
 
-  const [name, setLocalName] = useState('');
-  const [selectedAvatar, setLocalAvatar] = useState('');
+  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));
     }
   }, []);
@@ -55,7 +67,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;
   }
 
@@ -65,14 +81,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

@@ -9,29 +9,34 @@ 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 { useDispatch, useSelector } from 'react-redux';
+import { AppDispatch, RootState } from '@/app/store';
 import { markCompleted, previousStep } from '@/features/onboardingSlice';
 import { AppFeatures } from '@/components/OnboardingSteps/AppFeatures';
 import { useFolder } from '@/hooks/useFolder';
 import { useEffect, useState } from 'react';
-
+import { setIsEditing } from '@/features/onboardingSlice';
 interface FolderSetupStepProps {
   stepIndex: number;
   totalSteps: number;
+  currentStepDisplayIndex: number;
 }
 
 export function FolderSetupStep({
   stepIndex,
   totalSteps,
+  currentStepDisplayIndex,
 }: FolderSetupStepProps) {
   const dispatch = useDispatch<AppDispatch>();
 
   // Local state for folders
   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));
     }
   }, []);
@@ -58,21 +63,24 @@ 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(((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

@@ -44,7 +44,7 @@ export const OnboardingStep: React.FC<OnboardingStepProps> = ({
         return <div></div>;
     }
   };
-
+  
   return (
     <div className="bg-background text-foreground flex min-h-screen w-full items-center justify-center">
       <div className="flex h-[540px] w-full max-w-4xl gap-3">

frontend/src/components/OnboardingSteps/ThemeSelectionStep.tsx

@@ -18,20 +18,29 @@ import { Sun, Moon, Monitor } from 'lucide-react';
 
 import { AppFeatures } from '@/components/OnboardingSteps/AppFeatures';
 import { useTheme } from '@/contexts/ThemeContext';
+
+import { setIsEditing } from '@/features/onboardingSlice';
+import { useSelector } from 'react-redux';
+import { RootState } from '@/app/store';
 interface ThemeSelectionStepProps {
   stepIndex: number;
   totalSteps: number;
+  currentStepDisplayIndex: number;
 }
 
 export const ThemeSelectionStep: React.FC<ThemeSelectionStepProps> = ({
   stepIndex,
   totalSteps,
+  currentStepDisplayIndex,
 }) => {
   const { setTheme, theme } = useTheme();
+  const isEditing = useSelector(
+    (state: RootState) => state.onboarding.isEditing,
+  );
   const dispatch = useDispatch<AppDispatch>();
 
   useEffect(() => {
-    if (localStorage.getItem('themeChosen')) {
+    if (localStorage.getItem('themeChosen') === 'true' && !isEditing) {
       dispatch(markCompleted(stepIndex));
     }
   }, []);
@@ -45,20 +54,23 @@ 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(((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/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;