feat: adding mobile/desktop pagespeed strategy

client/src/Components/design-elements/MonitorStatus.tsx

@@ -1,12 +1,13 @@
 import type { Monitor } from "@/Types/Monitor";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import { PulseDot, Dot } from "@/Components/design-elements";
+import { PulseDot, Dot, StrategyBadge } from "@/Components/design-elements";
 import { getStatusColor, formatUrl } from "@/Utils/MonitorUtils";
 import { useTheme } from "@mui/material/styles";
 import prettyMilliseconds from "pretty-ms";
 import { typographyLevels } from "@/Utils/Theme/Palette";
 import useMediaQuery from "@mui/material/useMediaQuery";
+import { LAYOUT } from "@/Utils/Theme/constants";
 export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
@@ -28,7 +29,7 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 			<Stack
 				direction="row"
 				alignItems={"center"}
-				gap={theme.spacing(4)}
+				gap={theme.spacing(LAYOUT.XS)}
 			>
 				<PulseDot color={getStatusColor(monitor.status, theme)} />
 				<Typography
@@ -41,6 +42,12 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 				>
 					{formatUrl(monitor?.url)}
 				</Typography>
+				{monitor.type === "pagespeed" && monitor.strategy && (
+					<>
+						<Dot />
+						<StrategyBadge strategy={monitor.strategy} />
+					</>
+				)}
 				{!isSmall && (
 					<>
 						<Dot />

client/src/Components/design-elements/StrategyBadge.tsx

@@ -0,0 +1,38 @@
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+import type { PageSpeedStrategy } from "@/Types/Monitor";
+import { SPACING } from "@/Utils/Theme/constants";
+
+interface StrategyBadgeProps {
+	strategy: PageSpeedStrategy | undefined;
+	variant?: "caption" | "body2";
+}
+
+export const StrategyBadge = ({
+	strategy,
+	variant = "body2",
+}: StrategyBadgeProps) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+
+	if (!strategy) {
+		return null;
+	}
+
+	return (
+		<Typography
+			variant={variant}
+			px={SPACING.XXL}
+			py={SPACING.SM}
+			textTransform="capitalize"
+			sx={{
+				borderRadius: theme.shape.borderRadius,
+				backgroundColor: theme.palette.secondary.light,
+				color: theme.palette.text.primary,
+			}}
+		>
+			{t(`pages.pageSpeed.strategy.${strategy}`)}
+		</Typography>
+	);
+};

client/src/Components/design-elements/index.tsx

@@ -21,3 +21,4 @@ export * from "./SplitBox";
 export * from "./TextLink";
 export * from "./OfflineBanner";
 export * from "./Avatar";
+export * from "./StrategyBadge";

client/src/Hooks/useMonitorForm.ts

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 import { monitorSchema, type MonitorFormData } from "@/Validation/monitor";
+import { DefaultPageSpeedStrategy } from "@/Types/Monitor";
 import type { Monitor, MonitorType } from "@/Types/Monitor";
 
 interface UseMonitorFormOptions {
@@ -88,6 +89,7 @@ export const useMonitorForm = ({
 					...base,
 					type: "pagespeed",
 					url: data?.url || "",
+					strategy: data?.strategy ?? DefaultPageSpeedStrategy,
 				};
 				break;
 			case "hardware":

client/src/Pages/CreateMonitor/index.tsx

@@ -37,6 +37,7 @@ import {
 	type MonitorType,
 	type GamesMap,
 	supportsGeoCheck,
+	DefaultPageSpeedStrategy,
 } from "@/Types/Monitor";
 import type { Notification } from "@/Types/Notification";
 import type { MonitorFormData } from "@/Validation/monitor";
@@ -51,6 +52,7 @@ interface GeneralSettingsConfig {
 	showSecret: boolean;
 	showGrpcServiceName: boolean;
 	showIgnoreTls: boolean;
+	showStrategy: boolean;
 }
 
 const getGeneralSettingsConfig = (
@@ -68,6 +70,7 @@ const getGeneralSettingsConfig = (
 			showSecret: false,
 			showGrpcServiceName: false,
 			showIgnoreTls: false,
+			showStrategy: false,
 		},
 		ping: {
 			urlLabel: t("pages.createMonitor.form.general.option.host.label"),
@@ -79,6 +82,7 @@ const getGeneralSettingsConfig = (
 			showSecret: false,
 			showGrpcServiceName: false,
 			showIgnoreTls: false,
+			showStrategy: false,
 		},
 		docker: {
 			urlLabel: t("pages.createMonitor.form.general.option.container.label"),
@@ -90,6 +94,7 @@ const getGeneralSettingsConfig = (
 			showSecret: false,
 			showGrpcServiceName: false,
 			showIgnoreTls: false,
+			showStrategy: false,
 		},
 		port: {
 			urlLabel: t("pages.createMonitor.form.general.option.url.label"),
@@ -101,6 +106,7 @@ const getGeneralSettingsConfig = (
 			showSecret: false,
 			showGrpcServiceName: false,
 			showIgnoreTls: false,
+			showStrategy: false,
 		},
 		game: {
 			urlLabel: t("pages.createMonitor.form.general.option.url.label"),
@@ -112,6 +118,7 @@ const getGeneralSettingsConfig = (
 			showSecret: false,
 			showGrpcServiceName: false,
 			showIgnoreTls: false,
+			showStrategy: false,
 		},
 		grpc: {
 			urlLabel: t("pages.createMonitor.form.general.option.host.label"),
@@ -123,6 +130,7 @@ const getGeneralSettingsConfig = (
 			showSecret: false,
 			showGrpcServiceName: true,
 			showIgnoreTls: true,
+			showStrategy: false,
 		},
 		pagespeed: {
 			urlLabel: t("pages.createMonitor.form.general.option.url.label"),
@@ -134,6 +142,7 @@ const getGeneralSettingsConfig = (
 			showSecret: false,
 			showGrpcServiceName: false,
 			showIgnoreTls: false,
+			showStrategy: true,
 		},
 		hardware: {
 			urlLabel: t("pages.createMonitor.form.general.option.url.label"),
@@ -145,6 +154,7 @@ const getGeneralSettingsConfig = (
 			showSecret: true,
 			showGrpcServiceName: false,
 			showIgnoreTls: false,
+			showStrategy: false,
 		},
 		websocket: {
 			urlLabel: t("pages.createMonitor.form.general.option.wsUrl.label"),
@@ -156,6 +166,7 @@ const getGeneralSettingsConfig = (
 			showSecret: false,
 			showGrpcServiceName: false,
 			showIgnoreTls: true,
+			showStrategy: false,
 		},
 	};
 	return configs[type] || configs.http;
@@ -382,6 +393,36 @@ const CreateMonitorPage = () => {
 							/>
 						)}
 
+						{/* Strategy field - only for pagespeed type */}
+						{generalSettingsConfig.showStrategy && (
+							<Controller
+								name="strategy"
+								control={control}
+								render={({ field, fieldState }) => (
+									<Select
+										{...field}
+										value={field.value ?? DefaultPageSpeedStrategy}
+										fieldLabel={t(
+											"pages.createMonitor.form.general.option.strategy.label"
+										)}
+										disabled={isEditMode}
+										error={!!fieldState.error}
+									>
+										<MenuItem value="desktop">
+											{t(
+												"pages.createMonitor.form.general.option.strategy.desktop"
+											)}
+										</MenuItem>
+										<MenuItem value="mobile">
+											{t(
+												"pages.createMonitor.form.general.option.strategy.mobile"
+											)}
+										</MenuItem>
+									</Select>
+								)}
+							/>
+						)}
+
 						{/* Port field - only for port and game types */}
 						{generalSettingsConfig.showPort && (
 							<Controller

client/src/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable.tsx

@@ -1,7 +1,8 @@
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-import { Table, Pagination, StatusLabel } from "@/Components/design-elements";
+import { Table, Pagination, StatusLabel, StrategyBadge } from "@/Components/design-elements";
+import { LAYOUT } from "@/Utils/Theme/constants";
 import { HistogramPageSpeed } from "@/Components/monitors";
 import { ArrowDown, ArrowUp } from "lucide-react";
 import type { Header } from "@/Components/design-elements/Table";
@@ -179,7 +180,19 @@ export const PageSpeedMonitorsTable = ({
 					</Stack>
 				),
 				render: (row) => {
-					return row.name;
+					return (
+						<Stack
+							direction="row"
+							alignItems="center"
+							gap={LAYOUT.XS}
+						>
+							<Typography>{row.name}</Typography>
+							<StrategyBadge
+								strategy={row.strategy}
+								variant="caption"
+							/>
+						</Stack>
+					);
 				},
 			},
 			{

client/src/Types/Monitor.ts

@@ -38,6 +38,10 @@ export type MonitorStatus = (typeof MonitorStatuses)[number];
 
 export type MonitorMatchMethod = "equal" | "include" | "regex" | "";
 
+export const PageSpeedStrategies = ["desktop", "mobile"] as const;
+export type PageSpeedStrategy = (typeof PageSpeedStrategies)[number];
+export const DefaultPageSpeedStrategy: PageSpeedStrategy = "desktop";
+
 export interface Monitor {
 	id: string;
 	userId: string;
@@ -72,6 +76,7 @@ export interface Monitor {
 	selectedDisks: string[];
 	gameId?: string;
 	grpcServiceName?: string;
+	strategy?: PageSpeedStrategy;
 	group: string | null;
 	geoCheckEnabled?: boolean;
 	geoCheckLocations?: GeoContinent[];

client/src/Validation/monitor.ts

@@ -1,5 +1,6 @@
 import { z } from "zod";
 import { GeoContinents } from "@/Types/GeoCheck";
+import { PageSpeedStrategies } from "@/Types/Monitor";
 
 // URL schema with custom error message
 const urlSchema = z.url({ message: "Please enter a valid URL" });
@@ -89,6 +90,7 @@ const grpcSchema = baseSchema.extend({
 const pagespeedSchema = baseSchema.extend({
 	type: z.literal("pagespeed"),
 	url: urlSchema,
+	strategy: z.enum(PageSpeedStrategies),
 });
 
 // Hardware/Infrastructure monitor schema

client/src/locales/en.json

@@ -503,6 +503,11 @@
 						"wsUrl": {
 							"label": "WebSocket URL",
 							"placeholder": "wss://example.com/socket"
+						},
+						"strategy": {
+							"label": "Strategy",
+							"desktop": "Desktop",
+							"mobile": "Mobile"
 						}
 					},
 					"title": "General settings",
@@ -968,6 +973,10 @@
 			}
 		},
 		"pageSpeed": {
+			"strategy": {
+				"desktop": "Desktop",
+				"mobile": "Mobile"
+			},
 			"charts": {
 				"common": {
 					"cls": "Cumulative Layout Shift (CLS)",