Send additional details to *arr integrations

apps/frontend/app/components/common.tsx

@@ -8,6 +8,7 @@ import {
 	Badge,
 	Box,
 	Button,
+	Checkbox,
 	Collapse,
 	Divider,
 	Flex,
@@ -22,6 +23,7 @@ import {
 	TextInput,
 	Title,
 	Tooltip,
+	rem,
 } from "@mantine/core";
 import { useDebouncedValue, useDidUpdate, useDisclosure } from "@mantine/hooks";
 import {
@@ -348,14 +350,21 @@ export const FiltersModal = (props: {
 export const CollectionsFilter = (props: {
 	cookieName: string;
 	collections?: string[];
+	invertCollection?: boolean;
 }) => {
 	const collections = useUserCollections();
 	const [_, { setP }] = useAppSearchParam(props.cookieName);
 
 	return (
 		<MultiSelect
-			placeholder="Select a collection"
+			flex={1}
+			clearable
+			searchable
+			rightSectionWidth={rem(100)}
+			rightSectionPointerEvents="all"
 			defaultValue={props.collections}
+			placeholder="Select a collection"
+			onChange={(v) => setP("collections", v.join(","))}
 			data={[
 				{
 					group: "My collections",
@@ -365,9 +374,13 @@ export const CollectionsFilter = (props: {
 					})),
 				},
 			]}
-			onChange={(v) => setP("collections", v.join(","))}
-			clearable
-			searchable
+			rightSection={
+				<Checkbox
+					label="Invert"
+					checked={props.invertCollection}
+					onChange={(e) => setP("invertCollection", String(e.target.checked))}
+				/>
+			}
 		/>
 	);
 };

apps/frontend/app/lib/generals.ts

@@ -345,9 +345,6 @@ const usersQueryKeys = createQueryKeys("users", {
 	details: (token: string) => ({
 		queryKey: ["userDetails", token],
 	}),
-	preferences: (userId: string) => ({
-		queryKey: ["userPreferences", userId],
-	}),
 });
 
 const mediaQueryKeys = createQueryKeys("media", {

apps/frontend/app/lib/hooks.ts

@@ -136,9 +136,8 @@ export const useDashboardLayoutData = () => {
 };
 
 export const useCoreDetails = () => useDashboardLayoutData().coreDetails;
-export const useUserPreferences = () =>
-	useDashboardLayoutData().userPreferences;
 export const useUserDetails = () => useDashboardLayoutData().userDetails;
+export const useUserPreferences = () => useUserDetails().preferences;
 export const useUserCollections = () =>
 	useDashboardLayoutData().userCollections;
 

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

@@ -13,7 +13,6 @@ import {
 	GetPresignedS3UrlDocument,
 	PresignedPutS3UrlDocument,
 	UserCollectionsListDocument,
-	UserPreferencesDocument,
 } from "@ryot/generated/graphql/backend/graphql";
 import { UserDetailsDocument } from "@ryot/generated/graphql/backend/graphql";
 import { isEmpty } from "@ryot/ts-utils";
@@ -100,46 +99,37 @@ export const serverGqlService = new AuthenticatedGraphQLClient(
 	{ headers: { Connection: "keep-alive" } },
 );
 
-export const getCookieValue = (request: Request, cookieName: string) => {
-	return parse(request.headers.get("cookie") || "")[cookieName];
-};
+export const getCookieValue = (request: Request, cookieName: string) =>
+	parse(request.headers.get("cookie") || "")[cookieName];
 
-export const getAuthorizationCookie = (request: Request) => {
-	return getCookieValue(request, AUTH_COOKIE_NAME);
-};
+export const getAuthorizationCookie = (request: Request) =>
+	getCookieValue(request, AUTH_COOKIE_NAME);
 
 export const redirectIfNotAuthenticatedOrUpdated = async (request: Request) => {
-	const { userDetails } = await getCachedUserDetails(request);
+	const userDetails = await getCachedUserDetails(request);
+	const getResponseInit = async (toastMessage: string) => ({
+		status: 302,
+		headers: combineHeaders(
+			await createToastHeaders({ type: "error", message: toastMessage }),
+			getLogoutCookies(),
+		),
+	});
 	if (!userDetails || userDetails.__typename === "UserDetailsError") {
 		const nextUrl = withoutHost(request.url);
-		throw redirect($path("/auth", { [redirectToQueryParam]: nextUrl }), {
-			status: 302,
-			headers: combineHeaders(
-				await createToastHeaders({
-					type: "error",
-					message: "You must be logged in to view this page",
-				}),
-				getLogoutCookies(),
-			),
-		});
+		throw redirect(
+			$path("/auth", { [redirectToQueryParam]: nextUrl }),
+			await getResponseInit("You must be logged in to view this page"),
+		);
 	}
+	if (userDetails.isDisabled)
+		throw redirect(
+			$path("/auth"),
+			await getResponseInit("This account has been disabled"),
+		);
+
 	return userDetails;
 };
 
-const expectedServerVariables = z.object({
-	DISABLE_TELEMETRY: z
-		.string()
-		.optional()
-		.transform((v) => v === "true"),
-	FRONTEND_UMAMI_SCRIPT_URL: z.string().optional(),
-	FRONTEND_UMAMI_WEBSITE_ID: z.string().optional(),
-	FRONTEND_UMAMI_DOMAINS: z.string().optional(),
-	FRONTEND_OIDC_BUTTON_LABEL: z
-		.string()
-		.default("Continue with OpenID Connect"),
-	FRONTEND_DASHBOARD_MESSAGE: z.string().optional(),
-});
-
 /**
  * Combine multiple header objects into one (uses append so headers are not overridden)
  */
@@ -169,20 +159,19 @@ export const MetadataSpecificsSchema = z.object({
 export const getCachedCoreDetails = async () => {
 	return await queryClient.ensureQueryData({
 		queryKey: queryFactory.miscellaneous.coreDetails().queryKey,
-		queryFn: () => serverGqlService.request(CoreDetailsDocument),
+		queryFn: () =>
+			serverGqlService.request(CoreDetailsDocument).then((d) => d.coreDetails),
 	});
 };
 
-export const getCachedUserDetails = async (request: Request) => {
+const getCachedUserDetails = async (request: Request) => {
 	const token = getAuthorizationCookie(request);
 	return await queryClient.ensureQueryData({
 		queryKey: queryFactory.users.details(token ?? "").queryKey,
 		queryFn: () =>
-			serverGqlService.authenticatedRequest(
-				request,
-				UserDetailsDocument,
-				undefined,
-			),
+			serverGqlService
+				.authenticatedRequest(request, UserDetailsDocument, undefined)
+				.then((d) => d.userDetails),
 	});
 };
 
@@ -198,13 +187,7 @@ export const getCachedExerciseParameters = async () => {
 
 export const getCachedUserPreferences = async (request: Request) => {
 	const userDetails = await redirectIfNotAuthenticatedOrUpdated(request);
-	return queryClient.ensureQueryData({
-		queryKey: queryFactory.users.preferences(userDetails.id).queryKey,
-		queryFn: () =>
-			serverGqlService
-				.authenticatedRequest(request, UserPreferencesDocument, undefined)
-				.then((data) => data.userPreferences),
-	});
+	return userDetails.preferences;
 };
 
 export const getCachedUserCollectionsList = async (request: Request) => {
@@ -294,8 +277,6 @@ export const s3FileUploader = (prefix: string) =>
 		return undefined;
 	}, unstable_createMemoryUploadHandler());
 
-export const serverVariables = expectedServerVariables.parse(process.env);
-
 export const toastSessionStorage = createCookieSessionStorage({
 	cookie: {
 		sameSite: "lax",
@@ -363,7 +344,7 @@ export const getCookiesForApplication = async (
 	token: string,
 	tokenValidForDays?: number,
 ) => {
-	const [{ coreDetails }] = await Promise.all([getCachedCoreDetails()]);
+	const [coreDetails] = await Promise.all([getCachedCoreDetails()]);
 	const maxAge =
 		(tokenValidForDays || coreDetails.tokenValidForDays) * 24 * 60 * 60;
 	const options = { maxAge, path: "/" } satisfies SerializeOptions;
@@ -422,9 +403,9 @@ export const redirectToFirstPageIfOnInvalidPage = async (
 	totalResults: number,
 	currentPage: number,
 ) => {
-	const { coreDetails } = await getCachedCoreDetails();
+	const coreDetails = await getCachedCoreDetails();
 	const { searchParams } = new URL(request.url);
-	const totalPages = Math.ceil(totalResults / coreDetails.pageLimit);
+	const totalPages = Math.ceil(totalResults / coreDetails.frontend.pageSize);
 	if (currentPage > totalPages && currentPage !== 1) {
 		searchParams.set(pageQueryParam, "1");
 		throw redirect(`?${searchParams.toString()}`);

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

@@ -34,6 +34,7 @@ import {
 } from "@ryot/generated/graphql/backend/graphql";
 import {
 	changeCase,
+	formatDateToNaiveDate,
 	humanizeDuration,
 	isBoolean,
 	isNumber,
@@ -174,12 +175,15 @@ export default function Page() {
 	const dashboardLayoutData = useDashboardLayoutData();
 	const latestUserSummary = loaderData.latestUserSummary;
 
+	const dashboardMessage =
+		dashboardLayoutData.coreDetails.frontend.dashboardMessage;
+
 	return (
 		<Container>
 			<Stack gap={32}>
-				{dashboardLayoutData.envData.FRONTEND_DASHBOARD_MESSAGE ? (
+				{dashboardMessage ? (
 					<Alert variant="default" icon={<IconInfoCircle />}>
-						{dashboardLayoutData.envData.FRONTEND_DASHBOARD_MESSAGE}
+						{dashboardMessage}
 					</Alert>
 				) : null}
 				{userPreferences.general.dashboard.map((de) =>
@@ -632,8 +636,10 @@ const ActivitySection = () => {
 		const end = now.endOf("day");
 		const startDate = getDateFromTimeSpan(timeSpan);
 		return {
-			startDate: startDate?.format("YYYY-MM-DD"),
-			endDate: end.format("YYYY-MM-DD"),
+			startDate: startDate
+				? formatDateToNaiveDate(startDate.toDate())
+				: undefined,
+			endDate: formatDateToNaiveDate(end.toDate()),
 		};
 	}, [timeSpan]);
 	const { data: dailyUserActivitiesData } = useQuery({

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

@@ -3,7 +3,6 @@ import {
 	Box,
 	Button,
 	Center,
-	Checkbox,
 	Container,
 	Flex,
 	Group,
@@ -629,17 +628,11 @@ const FiltersModalForm = () => {
 					)}
 				</ActionIcon>
 			</Flex>
-			<Flex gap="xs" align="center">
-				<CollectionsFilter
-					cookieName={loaderData.cookieName}
-					collections={loaderData.mediaList.url.collections}
-				/>
-				<Checkbox
-					label="Invert"
-					checked={loaderData.mediaList.url.invertCollection}
-					onChange={(e) => setP("invertCollection", String(e.target.checked))}
-				/>
-			</Flex>
+			<CollectionsFilter
+				cookieName={loaderData.cookieName}
+				collections={loaderData.mediaList.url.collections}
+				invertCollection={loaderData.mediaList.url.invertCollection}
+			/>
 		</>
 	);
 };

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

@@ -2,7 +2,6 @@ import {
 	ActionIcon,
 	Box,
 	Center,
-	Checkbox,
 	Container,
 	Flex,
 	Group,
@@ -417,17 +416,11 @@ const FiltersModalForm = () => {
 					)}
 				</ActionIcon>
 			</Flex>
-			<Flex gap="xs" align="center">
-				<CollectionsFilter
-					cookieName={loaderData.cookieName}
-					collections={loaderData.list.url.collections}
-				/>
-				<Checkbox
-					label="Invert"
-					checked={loaderData.list.url.invertCollection}
-					onChange={(e) => setP("invertCollection", String(e.target.checked))}
-				/>
-			</Flex>
+			<CollectionsFilter
+				cookieName={loaderData.cookieName}
+				collections={loaderData.list.url.collections}
+				invertCollection={loaderData.list.url.invertCollection}
+			/>
 		</>
 	);
 };

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

@@ -439,17 +439,11 @@ const FiltersModalForm = () => {
 					)}
 				</ActionIcon>
 			</Flex>
-			<Flex gap="xs" align="center">
-				<CollectionsFilter
-					cookieName={loaderData.cookieName}
-					collections={loaderData.peopleList.url.collections}
-				/>
-				<Checkbox
-					label="Invert"
-					checked={loaderData.peopleList.url.invertCollection}
-					onChange={(e) => setP("invertCollection", String(e.target.checked))}
-				/>
-			</Flex>
+			<CollectionsFilter
+				cookieName={loaderData.cookieName}
+				collections={loaderData.peopleList.url.collections}
+				invertCollection={loaderData.peopleList.url.invertCollection}
+			/>
 		</>
 	);
 };

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

@@ -118,7 +118,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 		);
 	}
 	queryClient.removeQueries({
-		queryKey: queryFactory.users.preferences(userDetails.id).queryKey,
+		queryKey: queryFactory.users.details(userDetails.id).queryKey,
 	});
 	const toastHeaders = await createToastHeaders({
 		message: "Preferences updated",