chore: mobile banner for inconsistency and auto redirect in wrong route (#704)

apps/web/app/new/layout.tsx

@@ -3,6 +3,7 @@
 import { useEffect } from "react"
 import { useFeatureFlagEnabled } from "posthog-js/react"
 import { useRouter } from "next/navigation"
+import { MobileBanner } from "@/components/new/mobile-banner"
 
 export default function NewLayout({ children }: { children: React.ReactNode }) {
 	const router = useRouter()
@@ -18,5 +19,10 @@ export default function NewLayout({ children }: { children: React.ReactNode }) {
 		return null
 	}
 
-	return <>{children}</>
+	return (
+		<>
+			<MobileBanner />
+			{children}
+		</>
+	)
 }

apps/web/app/onboarding/page.tsx

@@ -4,6 +4,7 @@ import { OnboardingProvider } from "./onboarding-context"
 import { OnboardingProgressBar } from "./progress-bar"
 import { redirect } from "next/navigation"
 import { OnboardingBackground } from "./onboarding-background"
+import { OnboardingWrapper } from "@/components/onboarding/onboarding-wrapper"
 import type { Metadata } from "next"
 export const metadata: Metadata = {
 	title: "Welcome to Supermemory",
@@ -16,11 +17,13 @@ export default function OnboardingPage() {
 	if (!session) redirect("/login")
 
 	return (
-		<OnboardingProvider>
-			<OnboardingProgressBar />
-			<OnboardingBackground>
-				<OnboardingForm />
-			</OnboardingBackground>
-		</OnboardingProvider>
+		<OnboardingWrapper>
+			<OnboardingProvider>
+				<OnboardingProgressBar />
+				<OnboardingBackground>
+					<OnboardingForm />
+				</OnboardingBackground>
+			</OnboardingProvider>
+		</OnboardingWrapper>
 	)
 }

apps/web/components/new/mobile-banner.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import { useIsMobile } from "@hooks/use-mobile"
+import { cn } from "@lib/utils"
+
+export function MobileBanner() {
+	const isMobile = useIsMobile()
+
+	if (!isMobile) {
+		return null
+	}
+
+	return (
+		<div
+			className={cn(
+				"bg-yellow-50 dark:bg-yellow-950/20 border-b border-yellow-200 dark:border-yellow-900/30",
+				"px-4 py-2 text-xs text-yellow-800 dark:text-yellow-200 text-center",
+			)}
+			id="mobile-development-banner"
+		>
+			🚧 Mobile responsive in development. Desktop recommended.
+		</div>
+	)
+}

apps/web/components/onboarding/new-onboarding-modal.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useFeatureFlagEnabled } from "posthog-js/react"
+import { useRouter } from "next/navigation"
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogDescription,
+	DialogFooter,
+} from "@ui/components/dialog"
+import { Button } from "@ui/components/button"
+import { useIsMobile } from "@hooks/use-mobile"
+
+export function NewOnboardingModal() {
+	const router = useRouter()
+	const flagEnabled = useFeatureFlagEnabled("nova-alpha-access")
+	const isMobile = useIsMobile()
+	const [open, setOpen] = useState(false)
+
+	useEffect(() => {
+		if (flagEnabled) {
+			setOpen(true)
+		}
+	}, [flagEnabled])
+
+	const handleContinue = () => {
+		setOpen(false)
+		router.push("/new/onboarding")
+	}
+
+	if (!flagEnabled) {
+		return null
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={(isOpen) => {
+			if (!isOpen) {
+				setOpen(false)
+			}
+		}}>
+			<DialogContent onInteractOutside={(e) => e.preventDefault()}>
+				<DialogHeader>
+					<DialogTitle>Experience the new onboarding</DialogTitle>
+					<DialogDescription>
+						We've redesigned the onboarding experience. Would you like to try
+						it?
+						{isMobile && (
+							<span className="block mt-2 text-yellow-600 dark:text-yellow-500">
+								Desktop view is recommended for the best experience.
+							</span>
+						)}
+					</DialogDescription>
+				</DialogHeader>
+				<DialogFooter>
+					<Button variant="outline" onClick={() => setOpen(false)}>
+						Stay here
+					</Button>
+					<Button onClick={handleContinue}>Continue to new onboarding</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	)
+}

apps/web/components/onboarding/onboarding-wrapper.tsx

@@ -0,0 +1,12 @@
+"use client"
+
+import { NewOnboardingModal } from "./new-onboarding-modal"
+
+export function OnboardingWrapper({ children }: { children: React.ReactNode }) {
+	return (
+		<>
+			<NewOnboardingModal />
+			{children}
+		</>
+	)
+}