feat: mobile gate

apps/web/src/app/editor/[project_id]/page.tsx

@@ -16,22 +16,25 @@ import { Onboarding } from "@/components/editor/onboarding";
 import { MigrationDialog } from "@/components/editor/dialogs/migration-dialog";
 import { usePanelStore } from "@/stores/panel-store";
 import { usePasteMedia } from "@/hooks/use-paste-media";
+import { MobileGate } from "@/components/editor/mobile-gate";
 
 export default function Editor() {
 	const params = useParams();
 	const projectId = params.project_id as string;
 
 	return (
-		<EditorProvider projectId={projectId}>
+		<MobileGate>
-			<div className="bg-background flex h-screen w-screen flex-col overflow-hidden">
+			<EditorProvider projectId={projectId}>
-				<EditorHeader />
+				<div className="bg-background flex h-screen w-screen flex-col overflow-hidden">
-				<div className="min-h-0 min-w-0 flex-1">
+					<EditorHeader />
-					<EditorLayout />
+					<div className="min-h-0 min-w-0 flex-1">
+						<EditorLayout />
+					</div>
+					<Onboarding />
+					<MigrationDialog />
 				</div>
-				<Onboarding />
+			</EditorProvider>
-				<MigrationDialog />
+		</MobileGate>
-			</div>
-		</EditorProvider>
 	);
 }
 

apps/web/src/components/editor/mobile-gate.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { Button } from "../ui/button";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { ArrowLeft01Icon, ArrowRight01Icon } from "@hugeicons/core-free-icons";
+import { useRouter } from "next/navigation";
+
+const STORAGE_KEY = "mobile-acknowledged";
+
+interface MobileGateProps {
+	children: React.ReactNode;
+}
+
+export function MobileGate({ children }: MobileGateProps) {
+	const router = useRouter();
+	const [show, setShow] = useState<boolean | null>(null);
+
+	useEffect(() => {
+		const isMobile = window.innerWidth < 1024;
+		const acknowledged = localStorage.getItem(STORAGE_KEY) === "true";
+		setShow(isMobile && !acknowledged);
+	}, []);
+
+	if (show === null) return null;
+	if (!show) return <>{children}</>;
+
+	const handleContinue = () => {
+		localStorage.setItem(STORAGE_KEY, "true");
+		setShow(false);
+	};
+
+	const handleGoBack = () => {
+		router.back();
+	};
+
+	return (
+		<div className="dark bg-background relative flex h-screen w-screen flex-col overflow-hidden">
+			<Button
+				variant="text"
+				className="absolute top-6 left-6 flex items-center gap-1 text-muted-foreground"
+				onClick={handleGoBack}
+			>
+				<HugeiconsIcon icon={ArrowLeft01Icon} className="size-4" />
+				<span className=" text-sm">Go back</span>
+			</Button>
+
+			<div className="flex flex-1 flex-col justify-center gap-5 px-7">
+				<div className="flex flex-col gap-3">
+					<h1 className="text-foreground text-3xl font-bold tracking-tight">
+						Desktop only (for now)
+					</h1>
+					<p className="text-muted-foreground text-sm leading-relaxed">
+						OpenCut isn't optimized for mobile or iPad yet. Things will break
+						and the layout will be a mess. Come back on a desktop for the real
+						experience.
+					</p>
+				</div>
+				<div className="flex items-center gap-3">
+					<Button variant="foreground" onClick={handleContinue}>
+						Take a look anyway
+					</Button>
+					<Button variant="ghost" asChild>
+						<Link href="/roadmap" className="flex items-center gap-1">
+							Roadmap
+							<HugeiconsIcon icon={ArrowRight01Icon} size={14} />
+						</Link>
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}