change: add mobile placeholder

Author: macjuul

src/components/Scaffold/index.tsx

@@ -2,8 +2,11 @@ import classes from "./style.module.scss";
 
 import {
 	Box,
+	Button,
 	Center,
 	Flex,
+	Stack,
+	Text,
 } from "@mantine/core";
 
 import { useStable } from "~/hooks/stable";
@@ -38,6 +41,10 @@ import { LegacyModal } from "./modals/legacy";
 import { SandboxModal } from "./modals/sandbox";
 import { executeUserQuery } from "~/connection";
 import { ChangelogModal } from "./modals/changelog";
+import { SurrealistLogo } from "../SurrealistLogo";
+import { Icon } from "../Icon";
+import { iconOpen } from "~/util/icons";
+import { isMobile } from "~/util/helpers";
 
 const PORTAL_ATTRS = {
 	attributes: {
@@ -99,6 +106,37 @@ export function Scaffold() {
 				</Center>
 			)}
 
+			{isMobile() && (
+				<Center
+					pos="fixed"
+					inset={0}
+					bg="slate.9"
+					style={{ zIndex: 1000 }}
+				>
+					<Stack maw={250} mx="auto">
+						<SurrealistLogo />
+
+						<Text c="bright" mt="lg">
+							Surrealist is the ultimate way to visually manage your SurrealDB database
+						</Text>
+
+						<Text c="slate.3">
+							Support for Surrealist on mobile platforms is currently unavailable, however you can visit Surrealist
+							on a desktop environment to get started.
+						</Text>
+
+						<Button
+							mt="lg"
+							variant="gradient"
+							onClick={() => adapter.openUrl("https://surrealdb.com/surrealist")}
+							rightSection={<Icon path={iconOpen} />}
+						>
+							Read more about Surrealist
+						</Button>
+					</Stack>
+				</Center>
+			)}
+
 			<Flex
 				direction="column"
 				flex={1}

src/util/helpers.tsx

@@ -363,3 +363,11 @@ export function fuzzyMatch(query: string, target: string) {
 
 	return regex.test(target);
 }
+
+/**
+ * Check if the current platform is mobile
+ */
+export function isMobile() {
+	const userAgent = navigator.userAgent.toLowerCase();
+	return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/.test(userAgent);
+}