Onboarding tour for new users (#1280)

* refactor(frontend): remove authentication redirect logic from auth route

- Remove automatic redirection for authenticated users
- Delete unused imports related to authentication
- Simplify auth route loader function

* Merge branch 'main' into issue-1259

* chore(deps): update dependencies to latest versions

- Upgrade various frontend and library dependencies
- Update React Router, Vite, esbuild, and other packages
- Bump versions of packages like nanoid, isbot, tailwind-merge, and sonner
- Synchronize package versions across frontend and website applications

* build(frontend): add tour deps

* style(frontend): import tour styles for onboarding component

* refactor(frontend): remove empty dashboard alert and unused import

* feat(frontend): add StartOnboardingTourButton component

- Create new button component for initiating onboarding tour
- Placeholder implementation with console log for tour start

* feat(migrations): add CompletedOnboardingTours column to User table

- Create new column to track user's completed onboarding tours
- Set column as a text array with a default empty array
- Integrate new migration for tracking onboarding tour progress

* refactor(models): reorder User model struct fields

- Reorganize struct field order for better readability
- No functional changes to the User model structure
- Maintain existing field types and attributes

* feat(models): add UserOnboardingTour enum and update User model

- Introduce UserOnboardingTour enum with Media variant
- Add completedOnboardingTours field to User model
- Update GraphQL types and generated files to support onboarding tour tracking

* refactor: remove UserOnboardingTour enum and related fields

- Remove UserOnboardingTour enum from enum models
- Delete completedOnboardingTours field from User model
- Remove related GraphQL and generated type references
- Clean up migration and database-related code for onboarding tours

* chore(frontend): minimal state for onboarding state

* refactor(frontend): reorder Icon declaration in dashboard layout

* chore(deps): remove @gfazioli/mantine-onboarding-tour dependency

* chore(frontend): start with tours

* refactor(frontend): move onboarding tour state to general state module

* refactor(frontend): move sidebar links state to general state module

* feat(frontend): enhance StartOnboardingTourButton to open media sidebar

* refactor(frontend): remove sidebar links state from StartOnboardingTourButton

* feat(frontend): add initial onboarding tour step for media section

* feat(frontend): integrate onboarding tour into root and dashboard layouts

* refactor(frontend): adjust component nesting in root layout

* feat(frontend): add OnboardingTour.Target to LinksGroup component

* fix(frontend): adjust ScrollArea overflow in dashboard layout

* core(frontend): add max width attribute to tour component

* chore(frontend): change order of imports

* feat(frontend): disable next and prev buttons in OnboardingTour

* refactor(frontend): reorder NavLink attributes in dashboard layout

* feat(frontend): enhance onboarding tour with media section navigation

* chore(frontend): remove mantine onboarding tour package and related code

* chore(frontend): add react-joyride package to project dependencies

* refactor(frontend): simplify onboarding tour state management

* feat(frontend): update tour step identifiers and add tour styling

* feat(frontend): integrate react-joyride for onboarding tour

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

* refactor(frontend): centralize tour step targets and improve targeting

* feat(frontend): customize Joyride tour component appearance

* refactor(frontend): simplify onboarding tour atom type definition

* refactor(frontend): reorder onboarding tour hook methods

* chore(frontend): add basic callback to joyride

* Merge branch 'main' into issue-1259

* build(ts): upgrade dependencies

* chore(frontend): address typescript issue

* refactor(frontend): rename tour-related constants for clarity

* feat(frontend): auto-start onboarding tour for new users

* refactor(frontend): remove StartOnboardingTourButton component

* feat(frontend): enhance onboarding tour configuration

- Remove general state file for onboarding tour
- Add additional Joyride configuration options to prevent accidental tour exit
- Disable closing tour via ESC key and overlay click

* feat(frontend): improve onboarding tour interaction and control

- Add tour step navigation methods in useOnboardingTour hook
- Modify LinksGroup component to support tour step targeting
- Remove unused Joyride callback and continuous mode
- Update tour control mechanism for more precise step management

* feat(frontend): add sidebar links state management

- Introduce OpenedSidebarLinks type for tracking sidebar section states
- Create openedSidebarLinksAtom with persistent storage
- Implement useOpenedSidebarLinks hook for managing sidebar link states

* feat(frontend): reset sidebar links when starting onboarding tour

- Extract default sidebar links state into a separate constant
- Modify startTour method to reset sidebar links before initiating tour
- Ensure clean sidebar state when beginning onboarding experience

fix(frontend): allow onboarding tour to start only when atom is populated

fix(frontend): separate alert for starting the onboarding tour

feat(frontend): save onboarding tour finished state in a cookie

fix(frontend): localize onboarding tour to user

Author: IgnisDa

Diff for: Cargo.lock

@@ -47,7 +47,7 @@ members = [
 resolver = "2"
 
 [workspace.dependencies]
-anyhow = "=1.0.95"
+anyhow = "=1.0.97"
 apalis = { version = "=0.6.4", features = ["catch-panic", "limit", "retry"] }
 apalis-cron = "=0.6.4"
 argon2 = "=0.6.0-pre.1"
@@ -59,16 +59,16 @@ async-graphql = { version = "=7.0.15", features = [
     "uuid",
 ] }
 async-graphql-axum = "=7.0.15"
-async-trait = "=0.1.86"
+async-trait = "=0.1.87"
 aws-sdk-s3 = { version = "=1.76.0", features = ["behavior-version-latest"] }
 axum = { version = "=0.8.1", features = ["macros", "multipart"] }
 boilermates = "=0.3.0"
-bon = "=3.3.2"
-chrono = "=0.4.39"
+bon = "=3.4.0"
+chrono = "=0.4.40"
 chrono-tz = "=0.10.1"
 compile-time = "=0.2.0"
 const-str = "=0.6.2"
-convert_case = "=0.7.1"
+convert_case = "=0.8.0"
 csv = "=1.3.1"
 data-encoding = "=2.8.0"
 derive_more = { version = "=2.0.1", features = [
@@ -83,21 +83,20 @@ educe = { version = "=0.6.0", features = [
     "Default",
     "full",
 ], default-features = false }
-either = "=1.13.0"
 enum_meta = "=0.7.0"
 eventsource-stream = "=0.2.3"
-flate2 = "=1.0.35"
+flate2 = "=1.1.0"
 futures = "=0.3.31"
 graphql_client = "=0.14.0"
 hashbag = "=0.1.12"
-http = "=1.2.0"
-indexmap = "=2.7.1"
-indoc = "=2.0.5"
+http = "=1.3.1"
+indexmap = "=2.8.0"
+indoc = "=2.0.6"
 isolang = { version = "=2.4.0", features = ["list_languages"] }
 itertools = "=0.14.0"
 jsonwebtoken = { version = "=9.3.1", default-features = false }
 logs-wheel = "=0.3.1"
-markdown = "=1.0.0-alpha.22"
+markdown = "=1.0.0-alpha.23"
 mime_guess = "=2.0.5"
 nanoid = "=0.4.0"
 nest_struct = "=0.5.3"
@@ -109,8 +108,8 @@ regex = "=1.11.1"
 rust_decimal = "=1.36.0"
 rust_decimal_macros = "=1.36.0"
 rust_iso3166 = "=0.1.14"
-rustypipe = { version = "0.10.0", features = ["userdata"] }
-schematic = { version = "=0.17.11", features = [
+rustypipe = { version = "0.11.0", features = ["userdata"] }
+schematic = { version = "=0.18.1", features = [
     "config",
     "env",
     "json",
@@ -124,8 +123,8 @@ schematic = { version = "=0.17.11", features = [
     "validate",
     "yaml",
 ], default-features = false }
-scraper = "=0.22.0"
-sea-orm = { version = "=1.1.5", features = [
+scraper = "=0.23.1"
+sea-orm = { version = "=1.1.7", features = [
     "debug-print",
     "postgres-array",
     "macros",
@@ -136,26 +135,26 @@ sea-orm = { version = "=1.1.5", features = [
     "with-rust_decimal",
     "with-uuid",
 ], default-features = false }
-sea-orm-migration = "=1.1.5"
+sea-orm-migration = "=1.1.7"
 sea-query = "=0.32.2"
-serde = { version = "=1.0.217", features = ["derive"] }
-serde_json = "=1.0.138"
+serde = { version = "=1.0.219", features = ["derive"] }
+serde_json = "=1.0.140"
 serde_with = { version = "=3.12.0", features = ["chrono_0_4"] }
 serde-xml-rs = "=0.6.0"
 slug = "=0.1.6"
 sonarr-api-rs = "=3.0.0"
 sqlx = { version = "=0.8.3", default-features = false, features = ["postgres"] }
 strum = { version = "=0.26.3", features = ["derive"] }
 struson = { version = "=0.6.0", features = ["serde"] }
-reqwest = { version = "=0.12.12", features = ["json", "stream"] }
-tokio = { version = "=1.43.0", features = ["full"] }
+reqwest = { version = "=0.12.14", features = ["json", "stream"] }
+tokio = { version = "=1.44.0", features = ["full"] }
 tokio-util = { version = "=0.7.13", features = ["codec"] }
 tower = "=0.5.2"
 tower-http = { version = "=0.6.2", features = ["catch-panic", "cors", "trace"] }
 tracing = { version = "=0.1.41", features = ["attributes"] }
 tracing-subscriber = "=0.3.19"
 unkey = "=0.5.0"
-uuid = { version = "=1.13.2", features = ["v4"], default-features = false }
+uuid = { version = "=1.15.1", features = ["v4"], default-features = false }
 
 [profile.release]
 lto = true

Diff for: Cargo.toml

@@ -1,7 +1,7 @@
 [package]
 name = "backend"
 version = "0.1.0"
-edition = "2021"
+edition = "2024"
 repository = "https://github.com/IgnisDa/ryot"
 license = "GPL-3.0"
 

Diff for: apps/backend/Cargo.toml

@@ -2,20 +2,20 @@ use std::sync::Arc;
 
 use apalis::prelude::MemoryStorage;
 use application_utils::AuthContext;
-use async_graphql::{extensions::Tracing, EmptySubscription, MergedObject, Schema};
+use async_graphql::{EmptySubscription, MergedObject, Schema, extensions::Tracing};
 use async_graphql_axum::{GraphQLRequest, GraphQLResponse};
 use axum::{
-    extract::DefaultBodyLimit,
-    http::{header, Method},
-    routing::{get, post, Router},
     Extension,
+    extract::DefaultBodyLimit,
+    http::{Method, header},
+    routing::{Router, get, post},
 };
 use background_models::{ApplicationJob, HpApplicationJob, LpApplicationJob, MpApplicationJob};
 use bon::builder;
 use cache_service::CacheService;
 use collection_resolver::{CollectionMutation, CollectionQuery};
 use collection_service::CollectionService;
-use common_utils::{ryot_log, FRONTEND_OAUTH_ENDPOINT};
+use common_utils::{FRONTEND_OAUTH_ENDPOINT, ryot_log};
 use exporter_resolver::{ExporterMutation, ExporterQuery};
 use exporter_service::ExporterService;
 use file_storage_resolver::{FileStorageMutation, FileStorageQuery};
@@ -30,9 +30,9 @@ use itertools::Itertools;
 use miscellaneous_resolver::{MiscellaneousMutation, MiscellaneousQuery};
 use miscellaneous_service::MiscellaneousService;
 use openidconnect::{
+    ClientId, ClientSecret, IssuerUrl, RedirectUrl,
     core::{CoreClient, CoreProviderMetadata},
     reqwest::async_http_client,
-    ClientId, ClientSecret, IssuerUrl, RedirectUrl,
 };
 use router_resolver::{config_handler, graphql_playground, integration_webhook, upload_file};
 use sea_orm::DatabaseConnection;

Diff for: apps/backend/src/common.rs

@@ -6,14 +6,14 @@ use std::{
     sync::{Arc, Mutex},
 };
 
-use anyhow::{bail, Result};
+use anyhow::{Result, bail};
 use apalis::{
     layers::WorkerBuilderExt,
     prelude::{MemoryStorage, Monitor, WorkerBuilder, WorkerFactoryFn},
 };
 use apalis_cron::{CronStream, Schedule};
 use aws_sdk_s3::config::Region;
-use common_utils::{ryot_log, PROJECT_NAME, TEMPORARY_DIRECTORY};
+use common_utils::{PROJECT_NAME, TEMPORARY_DIRECTORY, ryot_log};
 use dependent_models::CompleteExport;
 use env_utils::APP_VERSION;
 use logs_wheel::LogFileInitializer;
@@ -24,7 +24,7 @@ use sea_orm_migration::MigratorTrait;
 use tokio::{
     join,
     net::TcpListener,
-    time::{sleep, Duration},
+    time::{Duration, sleep},
 };
 use tracing_subscriber::{fmt, layer::SubscriberExt};
 
@@ -50,10 +50,10 @@ async fn main() -> Result<()> {
     match env::var(LOGGING_ENV_VAR).ok() {
         Some(v) => {
             if !v.contains("sea_orm") {
-                env::set_var(LOGGING_ENV_VAR, format!("{},sea_orm=info", v));
+                unsafe { env::set_var(LOGGING_ENV_VAR, format!("{},sea_orm=info", v)) };
             }
         }
-        None => env::set_var(LOGGING_ENV_VAR, "ryot=info,sea_orm=info"),
+        None => unsafe { env::set_var(LOGGING_ENV_VAR, "ryot=info,sea_orm=info") },
     }
     init_tracing()?;
 

Diff for: apps/backend/src/main.rs

@@ -108,7 +108,7 @@ import {
 	openConfirmationModal,
 	redirectToQueryParam,
 	reviewYellow,
-} from "~/lib/generals";
+} from "~/lib/common";
 import {
 	useAppSearchParam,
 	useConfirmSubmit,
@@ -121,6 +121,10 @@ import {
 	useUserPreferences,
 	useUserUnitSystem,
 } from "~/lib/hooks";
+import {
+	type OnboardingTourStepTargets,
+	useOnboardingTour,
+} from "~/lib/state/general";
 import { useReviewEntity } from "~/lib/state/media";
 import type { action } from "~/routes/actions";
 import classes from "~/styles/common.module.css";
@@ -137,6 +141,7 @@ import {
 } from "./media";
 
 export const ApplicationGrid = (props: {
+	className?: string;
 	children: ReactNode | Array<ReactNode>;
 }) => {
 	const userPreferences = useUserPreferences();
@@ -146,6 +151,7 @@ export const ApplicationGrid = (props: {
 		<SimpleGrid
 			spacing="lg"
 			ref={parent}
+			className={props.className}
 			cols={match(userPreferences.general.gridPacking)
 				.with(GridPacking.Normal, () => ({ base: 2, sm: 3, md: 4, lg: 5 }))
 				.with(GridPacking.Dense, () => ({ base: 3, sm: 4, md: 5, lg: 6 }))
@@ -262,10 +268,14 @@ export const MediaDetailsLayout = (props: {
 export const MEDIA_DETAILS_HEIGHT = { base: "45vh", "2xl": "55vh" };
 
 export const DebouncedSearchInput = (props: {
-	initialValue?: string;
 	queryParam?: string;
 	placeholder?: string;
+	initialValue?: string;
 	enhancedQueryParams?: string;
+	tourControl?: {
+		target: OnboardingTourStepTargets;
+		onQueryChange: (query: string) => void;
+	};
 }) => {
 	const [query, setQuery] = useState(props.initialValue || "");
 	const [debounced] = useDebouncedValue(query, 1000);
@@ -274,19 +284,22 @@ export const DebouncedSearchInput = (props: {
 	);
 
 	useDidUpdate(() => {
-		setP(props.queryParam || "query", debounced.trim());
+		const query = debounced.trim().toLowerCase();
+		setP(props.queryParam || "query", query);
+		props.tourControl?.onQueryChange(query);
 	}, [debounced]);
 
 	return (
 		<TextInput
 			name="query"
-			placeholder={props.placeholder || "Search..."}
-			leftSection={<IconSearch />}
-			onChange={(e) => setQuery(e.currentTarget.value)}
 			value={query}
-			style={{ flexGrow: 1 }}
-			autoCapitalize="none"
 			autoComplete="off"
+			autoCapitalize="none"
+			style={{ flexGrow: 1 }}
+			leftSection={<IconSearch />}
+			className={props.tourControl?.target}
+			placeholder={props.placeholder || "Search..."}
+			onChange={(e) => setQuery(e.currentTarget.value)}
 			rightSection={
 				query ? (
 					<ActionIcon onClick={() => setQuery("")}>
@@ -325,6 +338,7 @@ export const BaseMediaDisplayItem = (props: {
 	progress?: string;
 	isLoading: boolean;
 	nameRight?: ReactNode;
+	imageClassName?: string;
 	imageUrl?: string | null;
 	highlightImage?: boolean;
 	innerRef?: Ref<HTMLDivElement>;
@@ -354,7 +368,7 @@ export const BaseMediaDisplayItem = (props: {
 	} as const;
 
 	return (
-		<Flex justify="space-between" direction="column" ref={props.innerRef}>
+		<Flex direction="column" ref={props.innerRef} justify="space-between">
 			<Box pos="relative" w="100%">
 				<SurroundingElement>
 					<Tooltip
@@ -366,7 +380,7 @@ export const BaseMediaDisplayItem = (props: {
 							radius="md"
 							pos="relative"
 							style={{ overflow: "hidden" }}
-							className={clsx({
+							className={clsx(props.imageClassName, {
 								[classes.highlightImage]:
 									coreDetails.isServerKeyValidated && props.highlightImage,
 							})}
@@ -1403,9 +1417,11 @@ const UnstyledLink = (props: { children: ReactNode; to: string }) => {
 export const DisplayListDetailsAndRefresh = (props: {
 	total: number;
 	cacheId: string;
+	className?: string;
 	rightSection?: ReactNode;
 }) => {
 	const submit = useConfirmSubmit();
+	const { advanceOnboardingTourStep } = useOnboardingTour();
 
 	return (
 		<Group justify="space-between" wrap="nowrap">
@@ -1429,6 +1445,8 @@ export const DisplayListDetailsAndRefresh = (props: {
 					size="xs"
 					type="submit"
 					variant="subtle"
+					className={props.className}
+					onClick={() => advanceOnboardingTourStep()}
 					leftSection={<IconArrowsShuffle size={20} />}
 				>
 					Refresh

Diff for: apps/frontend/app/components/common.tsx

@@ -49,7 +49,7 @@ import {
 	dayjsLib,
 	getExerciseDetailsPath,
 	getSetColor,
-} from "~/lib/generals";
+} from "~/lib/common";
 import { useGetRandomMantineColor, useUserUnitSystem } from "~/lib/hooks";
 import {
 	getExerciseDetailsQuery,

Diff for: apps/frontend/app/components/fitness.tsx

@@ -48,7 +48,7 @@ import {
 	openConfirmationModal,
 	queryFactory,
 	reviewYellow,
-} from "~/lib/generals";
+} from "~/lib/common";
 import {
 	useConfirmSubmit,
 	useMetadataDetails,
@@ -166,7 +166,6 @@ export const MetadataDisplayItem = (props: {
 			UserToMediaReason.Owned,
 		].includes(r),
 	);
-	const hasInteracted = userMetadataDetails?.hasInteracted;
 
 	const leftLabel = useMemo(() => {
 		if (props.noLeftLabel || !metadataDetails || !userMetadataDetails)
@@ -221,15 +220,11 @@ export const MetadataDisplayItem = (props: {
 								(props.rightLabelLot
 									? changeCase(snakeCase(metadataDetails.lot))
 									: undefined) ||
-								(props.rightLabelHistory ? (
-									completedHistory.length > 0 ? (
-										`${completedHistory.length} time${completedHistory.length === 1 ? "" : "s"}`
-									) : null
-								) : (
-									<Text c={hasInteracted ? "yellow" : undefined}>
-										{changeCase(snakeCase(metadataDetails.lot))}
-									</Text>
-								)),
+								(props.rightLabelHistory
+									? completedHistory.length > 0
+										? `${completedHistory.length} time${completedHistory.length === 1 ? "" : "s"}`
+										: null
+									: changeCase(snakeCase(metadataDetails.lot))),
 						}
 					: undefined
 			}

Diff for: apps/frontend/app/components/media.tsx

@@ -6,7 +6,7 @@ import type {
 	AppServiceWorkerMessageData,
 	AppServiceWorkerNotificationData,
 	AppServiceWorkerNotificationTag,
-} from "~/lib/generals";
+} from "~/lib/common";
 
 declare let self: ServiceWorkerGlobalScope;
 declare let clients: Clients;

Diff for: apps/frontend/app/entry.worker.ts

@@ -1,4 +1,3 @@
-import type Umami from "@bitprojects/umami-logger-typescript";
 import {
 	createQueryKeys,
 	mergeQueryKeys,
@@ -45,9 +44,7 @@ import { z } from "zod";
 
 declare global {
 	interface Window {
-		umami?: {
-			track: typeof Umami.trackEvent;
-		};
+		umami?: { track: (eventName: string, eventData: unknown) => void };
 	}
 }