feat(frontend): remove new user guide

Instead they are automatically redirected to the movies search page if they have not added any movies

Author: IgnisDa

apps/frontend/app/components/media.tsx

@@ -1,7 +1,6 @@
 import { $path } from "@ignisda/remix-routes";
 import {
 	ActionIcon,
-	Alert,
 	Anchor,
 	Avatar,
 	Badge,
@@ -47,7 +46,6 @@ import {
 } from "@ryot/ts-utils";
 import {
 	IconArrowBigUp,
-	IconArrowsRight,
 	IconBackpack,
 	IconBookmarks,
 	IconCheck,
@@ -870,20 +868,6 @@ export const DisplayCollection = (props: {
 	);
 };
 
-export const NewUserGuideAlert = () => {
-	return (
-		<Alert icon={<IconArrowsRight />} variant="outline" color="teal">
-			<Text>
-				To get started, select a media type from the sidebar, enter a query in
-				the search tab, and add a media to your seen history or watchlist.
-			</Text>
-			<Text mt="xs">
-				This notice will disappear once your summary is re-calculated.
-			</Text>
-		</Alert>
-	);
-};
-
 export const MediaIsPartial = (props: { mediaType: string }) => {
 	return (
 		<Flex align="center" gap={4}>

apps/frontend/app/components/toaster.tsx

@@ -13,7 +13,7 @@ export function Toaster({ toast }: { toast?: Toast | null }) {
 }
 
 const ShowToast = (props: { toast: Toast }) => {
-	const { id, type, title, message } = props.toast;
+	const { id, type, title, message, closeAfter } = props.toast;
 	useEffect(() => {
 		setTimeout(() => {
 			const [defaultTitle, defaultColor] = match(type)
@@ -26,6 +26,7 @@ const ShowToast = (props: { toast: Toast }) => {
 				message,
 				title: title ?? defaultTitle,
 				color: defaultColor,
+				autoClose: closeAfter,
 			});
 		}, 0);
 	}, [message, id, title, type]);

apps/frontend/app/lib/utilities.server.ts

@@ -321,6 +321,7 @@ const ToastSchema = z.object({
 	id: z.string().default(() => randomUUID()),
 	title: z.string().optional(),
 	type: TypeSchema.default("message"),
+	closeAfter: z.number().optional(),
 });
 
 export type Toast = z.infer<typeof ToastSchema>;

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

@@ -40,7 +40,6 @@ import { displayWeightWithUnit } from "~/components/fitness";
 import {
 	DisplayCollectionEntity,
 	MetadataDisplayItem,
-	NewUserGuideAlert,
 } from "~/components/media";
 import { dayjsLib, getLot, getMetadataIcon } from "~/lib/generals";
 import { useGetMantineColor, useUserPreferences } from "~/lib/hooks";
@@ -117,9 +116,6 @@ export default function Page() {
 	return (
 		<Container>
 			<Stack gap={32}>
-				{latestUserSummary.media.metadataOverall.interactedWith === 0 ? (
-					<NewUserGuideAlert />
-				) : null}
 				{userPreferences.general.dashboard.map((de) =>
 					match([de.section, de.hidden])
 						.with([DashboardElementLot.Upcoming, false], () =>

apps/frontend/app/routes/_dashboard.media.$action.$lot.tsx

@@ -27,7 +27,6 @@ import {
 import {
 	EntityLot,
 	GraphqlSortOrder,
-	LatestUserSummaryDocument,
 	MediaGeneralFilter,
 	MediaLot,
 	MediaSortBy,
@@ -58,11 +57,7 @@ import {
 	DebouncedSearchInput,
 	FiltersModal,
 } from "~/components/common";
-import {
-	BaseMediaDisplayItem,
-	MetadataDisplayItem,
-	NewUserGuideAlert,
-} from "~/components/media";
+import { BaseMediaDisplayItem, MetadataDisplayItem } from "~/components/media";
 import { Verb, getLot, getVerb } from "~/lib/generals";
 import {
 	useAppSearchParam,
@@ -124,13 +119,6 @@ export const loader = unstable_defineLoader(async ({ request, params }) => {
 		request,
 	);
 	await redirectUsingEnhancedCookieSearchParams(request, cookieName);
-	const [{ latestUserSummary }] = await Promise.all([
-		serverGqlService.authenticatedRequest(
-			request,
-			LatestUserSummaryDocument,
-			{},
-		),
-	]);
 	const { query, page } = zx.parseQuery(request, {
 		query: z.string().optional(),
 		page: zx.IntAsString.default("1"),
@@ -201,8 +189,6 @@ export const loader = unstable_defineLoader(async ({ request, params }) => {
 		cookieName,
 		mediaSearch,
 		url: withoutHost(url.href),
-		mediaInteractedWith:
-			latestUserSummary.data.media.metadataOverall.interactedWith,
 	};
 });
 
@@ -236,7 +222,6 @@ export default function Page() {
 
 	return (
 		<Container>
-			{loaderData.mediaInteractedWith === 0 ? <NewUserGuideAlert /> : null}
 			<Tabs
 				variant="default"
 				mt="sm"

apps/frontend/app/routes/_dashboard.tsx

@@ -1149,24 +1149,30 @@ const NewProgressUpdateForm = ({
 				{watchTime === WATCH_TIMES[2] ? (
 					<DatePickerInput
 						required
-						label="Enter exact date"
+						clearable
 						dropdownType="modal"
 						maxDate={new Date()}
 						onChange={setSelectedDate}
-						clearable
+						label="Enter exact date"
 					/>
 				) : null}
 				<Select
 					label={`Where did you ${getVerb(Verb.Read, metadataDetails.lot)} it?`}
 					data={userPreferences.general.watchProviders}
 					name="providerWatchedOn"
 				/>
+				{selectedDate ? (
+					<input
+						hidden
+						readOnly
+						name="date"
+						value={formatDateToNaiveDate(selectedDate)}
+					/>
+				) : null}
 				<Button
+					type="submit"
 					variant="outline"
 					disabled={selectedDate === undefined}
-					type="submit"
-					name="date"
-					value={selectedDate ? formatDateToNaiveDate(selectedDate) : undefined}
 				>
 					Submit
 				</Button>

apps/frontend/app/routes/auth.tsx

@@ -25,8 +25,10 @@ import {
 } from "@remix-run/react";
 import {
 	GetOidcRedirectUrlDocument,
+	LatestUserSummaryDocument,
 	LoginErrorVariant,
 	LoginUserDocument,
+	MediaLot,
 	RegisterErrorVariant,
 	RegisterUserDocument,
 } from "@ryot/generated/graphql/backend/graphql";
@@ -38,11 +40,12 @@ import { match } from "ts-pattern";
 import { withQuery } from "ufo";
 import { z } from "zod";
 import { zx } from "zodix";
-import { redirectToQueryParam } from "~/lib/generals";
+import { dayjsLib, redirectToQueryParam } from "~/lib/generals";
 import {
 	createToastHeaders,
 	getAuthorizationCookie,
 	getCachedCoreDetails,
+	getCachedUserPreferences,
 	getCookiesForApplication,
 	getCoreEnabledFeatures,
 	processSubmission,
@@ -61,10 +64,30 @@ export type SearchParams = z.infer<typeof searchParamsSchema> &
 export const loader = unstable_defineLoader(async ({ request }) => {
 	const query = zx.parseQuery(request, searchParamsSchema);
 	const isAuthenticated = !!getAuthorizationCookie(request);
-	if (isAuthenticated)
+	if (isAuthenticated) {
+		const [userPreferences, { latestUserSummary }] = await Promise.all([
+			getCachedUserPreferences(request),
+			serverGqlService.authenticatedRequest(request, LatestUserSummaryDocument),
+		]);
+		if (
+			latestUserSummary.data.media.metadataOverall.interactedWith === 0 &&
+			userPreferences.featuresEnabled.media.enabled === true
+		)
+			throw await redirectWithToast(
+				$path(
+					"/media/:action/:lot",
+					{ action: "search", lot: MediaLot.Movie },
+					{ query: "avengers" },
+				),
+				{
+					message: "Welcome to Ryot! Add any movie you want to your watchlist!",
+					closeAfter: dayjsLib.duration(10, "second").asMilliseconds(),
+				},
+			);
 		throw await redirectWithToast($path("/"), {
 			message: "You were already logged in",
 		});
+	}
 	const [enabledFeatures, { coreDetails }] = await Promise.all([
 		getCoreEnabledFeatures(),
 		getCachedCoreDetails(),
@@ -141,11 +164,12 @@ export const action = unstable_defineAction(async ({ request }) => {
 				},
 			});
 			if (loginUser.__typename === "LoginResponse") {
-				let redirectUrl = $path("/");
-				if (submission[redirectToQueryParam])
-					redirectUrl = safeRedirect(submission[redirectToQueryParam]);
 				const headers = await getCookiesForApplication(loginUser.apiKey);
-				return redirect(redirectUrl, { headers });
+				if (submission[redirectToQueryParam])
+					return redirect(safeRedirect(submission[redirectToQueryParam]), {
+						headers,
+					});
+				return Response.json({}, { headers });
 			}
 			const message = match(loginUser.error)
 				.with(