refactor(frontend): improve onboarding tour state management

- Update `onboardingTourAtom` type to include `isCompleted` flag
- Modify tour completion logic to use atom state instead of localStorage
- Add `canTourBeStarted` check to control tour initialization
- Refactor tour restart mechanism in profile settings page

Author: IgnisDa

apps/frontend/app/lib/state/general.tsx

@@ -65,22 +65,24 @@ export enum OnboardingTourStepTargets {
 }
 
 const onboardingTourAtom = atomWithStorage<
+	| undefined
 	| {
 			isLoading?: true;
+			isCompleted?: true;
 			currentStepIndex: number;
 	  }
-	| undefined
 >("OnboardingTour", undefined);
 
-export const OnboardingTourCompletedKey = "OnboardingTourCompleted";
-
 export const useOnboardingTour = () => {
 	const [tourState, setTourState] = useAtom(onboardingTourAtom);
 	const { setOpenedSidebarLinks } = useOpenedSidebarLinks();
 	const isTourStarted = isNumber(tourState?.currentStepIndex);
 	const theme = useMantineTheme();
 	const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+
 	const isTourLoading = tourState?.isLoading;
+	const canTourBeStarted =
+		typeof tourState === "undefined" || tourState.isCompleted;
 
 	const deployBackgroundJobMutation = useMutation({
 		mutationFn: async () => {
@@ -96,8 +98,11 @@ export const useOnboardingTour = () => {
 	};
 
 	const completeTour = () => {
-		setTourState(undefined);
-		localStorage.setItem(OnboardingTourCompletedKey, "true");
+		setTourState(
+			produce(tourState, (draft) => {
+				if (draft) draft.isCompleted = true;
+			}),
+		);
 		window.location.href = "/";
 	};
 
@@ -250,20 +255,22 @@ export const useOnboardingTour = () => {
 		content: <StepWrapper>{step.content}</StepWrapper>,
 	}));
 	const isOnLastTourStep =
-		tourState?.currentStepIndex === onboardingTourSteps.length;
+		tourState?.currentStepIndex === onboardingTourSteps.length &&
+		!tourState?.isCompleted;
 
 	useEffect(() => {
 		if (typeof isMobile === "undefined" || isMobile) return;
 
-		const completed = localStorage.getItem(OnboardingTourCompletedKey);
-		if (!completed && !isTourStarted) startTour();
-	}, [isMobile]);
+		if (canTourBeStarted && !isTourStarted) startTour();
+	}, [isMobile, canTourBeStarted]);
 
 	return {
+		startTour,
 		completeTour,
 		isTourStarted,
 		advanceTourStep,
 		isOnLastTourStep,
+		canTourBeStarted,
 		onboardingTourSteps,
 		currentTourStepIndex: tourState?.currentStepIndex,
 	};

apps/frontend/app/routes/_dashboard.settings.profile-and-sharing.tsx

@@ -62,7 +62,7 @@ import {
 	useDashboardLayoutData,
 	useUserDetails,
 } from "~/lib/hooks";
-import { OnboardingTourCompletedKey } from "~/lib/state/general";
+import { useOnboardingTour } from "~/lib/state/general";
 import {
 	createToastHeaders,
 	getDecodedJwt,
@@ -177,6 +177,7 @@ export default function Page() {
 		createAccessLinkModalOpened,
 		{ open: openCreateAccessLinkModal, close: closeCreateAccessLinkModal },
 	] = useDisclosure(false);
+	const { canTourBeStarted, startTour } = useOnboardingTour();
 
 	const isEditDisabled = dashboardData.isDemoInstance;
 	const defaultAccountLink = loaderData.userAccessLinks.find(
@@ -251,22 +252,24 @@ export default function Page() {
 									</Button>
 								</Stack>
 							</Form>
-							<ClientOnly>
-								{() => (
-									<>
-										<Divider />
-										<Button
-											variant="default"
-											onClick={() => {
-												localStorage.removeItem(OnboardingTourCompletedKey);
-												window.location.href = "/";
-											}}
-										>
-											Restart onboarding
-										</Button>
-									</>
-								)}
-							</ClientOnly>
+							{canTourBeStarted ? (
+								<ClientOnly>
+									{() => (
+										<>
+											<Divider />
+											<Button
+												variant="default"
+												onClick={() => {
+													startTour();
+													window.location.href = "/";
+												}}
+											>
+												Restart onboarding
+											</Button>
+										</>
+									)}
+								</ClientOnly>
+							) : null}
 						</Stack>
 					</Tabs.Panel>
 					<Tabs.Panel value="sharing">