Default landing page (#1293)

* chore(models/user): add new general preference

* feat(migrations): migrate default landing path to be dashboard

* fix(migrations): correct landing path update in user preferences migration

* feat(graphql): add landingPath to User preferences and update UserDetails query

- Introduced landingPath attribute in UserGeneralPreferences and UserGeneralPreferencesInput types.
- Updated UserDetails GraphQL query to include landingPath in user preferences.
- Adjusted related GraphQL documents and generated types accordingly.

* feat(frontend): enhance user preference landing paths in dashboard settings

- Added userPreferenceLandingPaths to loader function for dynamic navigation.
- Included paths for Fitness and Media entities using safe-routes.
- Updated return value of loader to include userPreferenceLandingPaths.

* fix(frontend): correct title in preferences meta for consistency

* refactor(frontend): update userPreferenceLandingPaths structure in dashboard settings

- Changed userPreferenceLandingPaths from a Record to an array of objects for better organization.
- Grouped paths under "Media" and "Fitness" categories for improved clarity and maintainability.
- Removed JSON.stringify debug output from the Page component.

* feat(frontend): add default landing page selection to preferences

- Introduced a Select component for choosing the default landing page in user preferences.
- Integrated with userPreferenceLandingPaths for dynamic options.
- Updated landingPath in user preferences on selection change.

* feat(frontend): implement landing path redirection based on user preferences

- Added a redirectToLandingPath function to handle navigation based on user preferences.
- Integrated search parameters schema for optional landing path redirection.
- Updated dashboard layout to utilize the new forcedDashboardPath for consistent navigation.

* fix(frontend): remove duplicate zod import in dashboard index route

- Eliminated redundant import of zod in the _dashboard._index.tsx file.
- Ensured proper organization of imports for better code clarity.

* ci: Run CI

* fix(frontend): update onboarding tour function to support async operations

- Modified startOnboardingTour to be an async function for better handling of asynchronous operations.
- Updated onClick handler in the Button component to await the startOnboardingTour function, ensuring proper execution flow.

* feat(frontend): refactor forcedDashboardPath for consistent navigation

- Moved forcedDashboardPath definition to common.tsx for centralized access.
- Updated usage in general.tsx and _dashboard.tsx to utilize the new import, ensuring consistent navigation behavior across the application.

* feat(frontend): enhance onboarding tour with user preferences and revalidation

- Integrated user preferences and revalidation into the onboarding tour functionality.
- Updated startOnboardingTour to modify user preferences for media and fitness features.
- Ensured proper revalidation after updating user preferences to reflect changes immediately.

* ci: Run CI

* refactor(frontend): reposition Select component for default landing page in preferences

- Moved the Select component for choosing the default landing page within the preferences section to improve code organization.
- Ensured the component retains its functionality and integrates seamlessly with user preferences.

Implement server key validation for landing page preference updates

Author: IgnisDa

apps/frontend/app/lib/common.tsx

@@ -173,6 +173,8 @@ export const convertDecimalToThreePointSmiley = (rating: number) =>
 			? ThreePointSmileyRating.Neutral
 			: ThreePointSmileyRating.Happy;
 
+export const forcedDashboardPath = $path("/", { ignoreLandingPath: "true" });
+
 export const reviewYellow = "#EBE600FF";
 
 export const getSetColor = (l: SetLot) =>

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

@@ -2,20 +2,21 @@ import { Box, Button, Group, Loader, Stack, Text } from "@mantine/core";
 import {
 	BackgroundJob,
 	DeployBackgroundJobDocument,
+	MediaLot,
+	UpdateUserPreferenceDocument,
 } from "@ryot/generated/graphql/backend/graphql";
-import { isNumber } from "@ryot/ts-utils";
+import { cloneDeep, isNumber } from "@ryot/ts-utils";
 import { useMutation } from "@tanstack/react-query";
 import { produce } from "immer";
 import { useAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 import Cookies from "js-cookie";
 import type { ReactNode } from "react";
 import type { Step } from "react-joyride";
-import { useNavigate } from "react-router";
-import { $path } from "safe-routes";
+import { useNavigate, useRevalidator } from "react-router";
 import { match } from "ts-pattern";
-import { clientGqlService } from "../common";
-import { useDashboardLayoutData } from "../hooks";
+import { clientGqlService, forcedDashboardPath } from "../common";
+import { useDashboardLayoutData, useUserPreferences } from "../hooks";
 
 type OpenedSidebarLinks = {
 	media: boolean;
@@ -93,6 +94,8 @@ const onboardingTourAtom = atomWithStorage<
 
 export const useOnboardingTour = () => {
 	const [tourState, setTourState] = useAtom(onboardingTourAtom);
+	const userPreferences = useUserPreferences();
+	const revalidator = useRevalidator();
 	const navigate = useNavigate();
 	const dashboardData = useDashboardLayoutData();
 	const { setOpenedSidebarLinks } = useOpenedSidebarLinks();
@@ -109,7 +112,28 @@ export const useOnboardingTour = () => {
 		},
 	});
 
-	const startOnboardingTour = () => {
+	const startOnboardingTour = async () => {
+		const newPreferences = produce(cloneDeep(userPreferences), (draft) => {
+			draft.featuresEnabled.media.enabled = true;
+			const isMoviesEnabled = draft.featuresEnabled.media.specific.findIndex(
+				(l) => l === MediaLot.Movie,
+			);
+			if (isMoviesEnabled === -1)
+				draft.featuresEnabled.media.specific.push(MediaLot.Movie);
+
+			draft.featuresEnabled.fitness.enabled = true;
+			draft.featuresEnabled.fitness.workouts = true;
+			draft.featuresEnabled.fitness.templates = true;
+			draft.featuresEnabled.fitness.measurements = true;
+
+			draft.featuresEnabled.analytics.enabled = true;
+			draft.featuresEnabled.others.calendar = true;
+			draft.featuresEnabled.others.collections = true;
+		});
+		await clientGqlService.request(UpdateUserPreferenceDocument, {
+			input: newPreferences,
+		});
+		revalidator.revalidate();
 		setOpenedSidebarLinks(defaultSidebarLinksState);
 		setTourState({ currentStepIndex: 0 });
 	};
@@ -121,7 +145,7 @@ export const useOnboardingTour = () => {
 			}),
 		);
 		Cookies.set(dashboardData.onboardingTourCompletedCookie, "true");
-		navigate($path("/"));
+		navigate(forcedDashboardPath);
 	};
 
 	const advanceOnboardingTourStep = async (input?: {

apps/frontend/app/routes/_dashboard._index.tsx

@@ -8,17 +8,19 @@ import {
 	MediaLot,
 	UserAnalyticsDocument,
 	UserMetadataRecommendationsDocument,
+	type UserPreferences,
 	UserUpcomingCalendarEventsDocument,
 } from "@ryot/generated/graphql/backend/graphql";
-import { isNumber } from "@ryot/ts-utils";
+import { isNumber, parseSearchQuery, zodBoolAsString } from "@ryot/ts-utils";
 import { IconInfoCircle, IconPlayerPlay } from "@tabler/icons-react";
 import CryptoJS from "crypto-js";
 import type { ReactNode } from "react";
-import { useLoaderData } from "react-router";
+import { redirect, useLoaderData } from "react-router";
 import { ClientOnly } from "remix-utils/client-only";
 import invariant from "tiny-invariant";
 import { match } from "ts-pattern";
 import { useLocalStorage } from "usehooks-ts";
+import { z } from "zod";
 import {
 	ApplicationGrid,
 	DisplaySummarySection,
@@ -43,8 +45,25 @@ import {
 } from "~/lib/utilities.server";
 import type { Route } from "./+types/_dashboard._index";
 
+const searchParamsSchema = z.object({
+	ignoreLandingPath: zodBoolAsString.optional(),
+});
+
+export type SearchParams = z.infer<typeof searchParamsSchema>;
+
+const redirectToLandingPath = (
+	request: Request,
+	preferences: UserPreferences,
+) => {
+	const query = parseSearchQuery(request, searchParamsSchema);
+	const landingPath = preferences.general.landingPath;
+	if (landingPath === "/" || query.ignoreLandingPath) return;
+	throw redirect(landingPath);
+};
+
 export const loader = async ({ request }: Route.LoaderArgs) => {
 	const preferences = await getUserPreferences(request);
+	redirectToLandingPath(request, preferences);
 	const getTake = (el: DashboardElementLot) => {
 		const t = preferences.general.dashboard.find(
 			(de) => de.section === el,

apps/frontend/app/routes/_dashboard.settings.preferences.tsx

@@ -53,9 +53,14 @@ import { useMutation } from "@tanstack/react-query";
 import { type Draft, produce } from "immer";
 import { Fragment, useState } from "react";
 import { useLoaderData, useRevalidator } from "react-router";
+import { $path } from "safe-routes";
 import { match } from "ts-pattern";
 import { z } from "zod";
-import { PRO_REQUIRED_MESSAGE, clientGqlService } from "~/lib/common";
+import {
+	FitnessEntity,
+	PRO_REQUIRED_MESSAGE,
+	clientGqlService,
+} from "~/lib/common";
 import {
 	useCoreDetails,
 	useDashboardLayoutData,
@@ -70,12 +75,37 @@ const searchSchema = z.object({
 });
 
 export const loader = async ({ request }: Route.LoaderArgs) => {
+	// biome-ignore lint/suspicious/noExplicitAny: can't use correct types here
+	const userPreferenceLandingPaths: any = [
+		{ label: "Dashboard", value: $path("/") },
+		{ label: "Analytics", value: $path("/analytics") },
+		{ label: "Calendar", value: $path("/calendar") },
+		{ label: "Collections", value: $path("/collections/list") },
+	];
+	userPreferenceLandingPaths.push({
+		group: "Media",
+		items: Object.values(MediaLot).map((lot) => ({
+			label: changeCase(lot),
+			value: $path("/media/:action/:lot", { lot, action: "list" }),
+		})),
+	});
+	userPreferenceLandingPaths.push({
+		group: "Fitness",
+		items: [
+			...Object.values(FitnessEntity).map((entity) => ({
+				label: changeCase(entity),
+				value: $path("/fitness/:entity/list", { entity }),
+			})),
+			{ label: "Measurements", value: $path("/fitness/measurements/list") },
+			{ label: "Exercises", value: $path("/fitness/exercises/list") },
+		],
+	});
 	const query = parseSearchQuery(request, searchSchema);
-	return { query };
+	return { query, userPreferenceLandingPaths };
 };
 
 export const meta = () => {
-	return [{ title: "Preference | Ryot" }];
+	return [{ title: "Preferences | Ryot" }];
 };
 
 const notificationContent = {
@@ -328,6 +358,28 @@ export default function Page() {
 								))}
 							</SimpleGrid>
 							<Stack gap="xs">
+								<Select
+									size="xs"
+									disabled={!!isEditDisabled}
+									label="Default landing page"
+									data={loaderData.userPreferenceLandingPaths}
+									defaultValue={userPreferences.general.landingPath}
+									description="The page you want to see when you first open the app"
+									onChange={(value) => {
+										if (!coreDetails.isServerKeyValidated) {
+											notifications.show({
+												color: "red",
+												message: PRO_REQUIRED_MESSAGE,
+											});
+											return;
+										}
+										if (value) {
+											updatePreference((draft) => {
+												draft.general.landingPath = value;
+											});
+										}
+									}}
+								/>
 								<Input.Wrapper
 									label="Review scale"
 									description="Scale you want to use for reviews"

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

@@ -265,8 +265,8 @@ export default function Page() {
 											<Divider />
 											<Button
 												variant="default"
-												onClick={() => {
-													startOnboardingTour();
+												onClick={async () => {
+													await startOnboardingTour();
 													Cookies.remove(
 														dashboardData.onboardingTourCompletedCookie,
 													);

apps/frontend/app/routes/_dashboard.tsx

@@ -115,6 +115,7 @@ import {
 	ThreePointSmileyRating,
 	Verb,
 	convertDecimalToThreePointSmiley,
+	forcedDashboardPath,
 	getMetadataDetailsQuery,
 	getVerb,
 	refreshUserMetadataDetails,
@@ -655,7 +656,7 @@ export default function Layout() {
 							icon={IconHome2}
 							label="Dashboard"
 							setOpened={() => {}}
-							href={$path("/")}
+							href={forcedDashboardPath}
 							toggle={toggleMobileNavbar}
 						/>
 						{loaderData.userPreferences.featuresEnabled.media.enabled ? (
@@ -814,7 +815,7 @@ export default function Layout() {
 				</AppShell.Navbar>
 				<Flex direction="column" h="90%">
 					<Flex justify="space-between" p="md" hiddenFrom="sm">
-						<Link to={$path("/")} style={{ all: "unset" }}>
+						<Link to={forcedDashboardPath} style={{ all: "unset" }}>
 							<Group>
 								<Image
 									h={40}

crates/migrations/src/lib.rs

@@ -38,6 +38,7 @@ mod m20250211_changes_for_issue_1216;
 mod m20250225_changes_for_issue_1271;
 mod m20250225_changes_for_issue_1274;
 mod m20250310_changes_for_issue_1259;
+mod m20250317_changes_for_issue_1292;
 
 pub use m20230404_create_user::User as AliasedUser;
 pub use m20230410_create_metadata::Metadata as AliasedMetadata;
@@ -97,6 +98,7 @@ impl MigratorTrait for Migrator {
             Box::new(m20250225_changes_for_issue_1271::Migration),
             Box::new(m20250225_changes_for_issue_1274::Migration),
             Box::new(m20250310_changes_for_issue_1259::Migration),
+            Box::new(m20250317_changes_for_issue_1292::Migration),
         ]
     }
 }

crates/migrations/src/m20250317_changes_for_issue_1292.rs

@@ -0,0 +1,22 @@
+use sea_orm_migration::prelude::*;
+
+#[derive(DeriveMigrationName)]
+pub struct Migration;
+
+#[async_trait::async_trait]
+impl MigrationTrait for Migration {
+    async fn up(&self, manager: &SchemaManager) -> Result<(), DbErr> {
+        let db = manager.get_connection();
+        db.execute_unprepared(
+            r#"
+UPDATE "user" SET "preferences" = jsonb_set("preferences", '{general,landing_path}', '"/"');
+"#,
+        )
+        .await?;
+        Ok(())
+    }
+
+    async fn down(&self, _manager: &SchemaManager) -> Result<(), DbErr> {
+        Ok(())
+    }
+}

crates/models/user/src/lib.rs

@@ -405,6 +405,8 @@ pub struct UserGeneralWatchProvider {
 pub struct UserGeneralPreferences {
     #[educe(Default = true)]
     pub display_nsfw: bool,
+    #[educe(Default = "/")]
+    pub landing_path: String,
     #[educe(Default = false)]
     pub disable_videos: bool,
     #[educe(Default = false)]