feat(frontend): add second tour step for movie section navigation

Author: IgnisDa

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

@@ -4,10 +4,15 @@ import type { Step } from "react-joyride";
 
 export const tourSteps = [
 	{
-		target: "tour-step-1",
+		target: ".tour-step-1",
 		content:
 			"Welcome to Ryot! Let's get started by adding a movie to your watchlist. Click on the media section in the sidebar to see what all you can track.",
 	},
+	{
+		target: ".tour-step-2",
+		content:
+			"Now, click on the movies section to start tracking your favorite movies.",
+	},
 ] as Step[];
 
 const onboardingTourAtom = atom<

apps/frontend/app/routes/_dashboard.tsx

@@ -399,7 +399,16 @@ export default function Layout() {
 
 	return (
 		<>
-			<Joyride steps={tourSteps} run={isTourStarted} stepIndex={stepIndex} />
+			<ClientOnly>
+				{() => (
+					<Joyride
+						continuous
+						steps={tourSteps}
+						run={isTourStarted}
+						stepIndex={stepIndex}
+					/>
+				)}
+			</ClientOnly>
 			{isFitnessActionActive &&
 			!Object.values(FitnessAction)
 				.map((action) => $path("/fitness/:action", { action }))