diff --git a/src/features/onboarding/components/onboarding-form.tsx b/src/features/onboarding/components/onboarding-form.tsx index 081879e..47395da 100644 --- a/src/features/onboarding/components/onboarding-form.tsx +++ b/src/features/onboarding/components/onboarding-form.tsx @@ -17,8 +17,19 @@ function detectPlatform(): "ios" | "android" | "unknown" { return "unknown"; } +export function isInstalledPwa(): boolean { + if (window.matchMedia("(display-mode: standalone)").matches) return true; + if ( + "standalone" in navigator && + (navigator as { standalone?: boolean }).standalone + ) + return true; + return false; +} + export function OnboardingForm() { const navigate = useNavigate(); + const installed = useMemo(() => isInstalledPwa(), []); const [step, setStep] = useState(0); const [dbReady, setDbReady] = useState(false); const [submitting, setSubmitting] = useState(false); @@ -55,8 +66,8 @@ export function OnboardingForm() {
{step === 0 && } - {step === 1 && } - {step === 2 && ( + {!installed && step === 1 && } + {step === (installed ? 1 : 2) && ( <>

Über dich

@@ -167,13 +178,13 @@ export function OnboardingForm() { )} - {step < 2 && ( + {step < (installed ? 1 : 2) && ( )} - +
); @@ -267,8 +278,16 @@ function InstallScreen() { ); } -function DotIndicator({ current }: { current: number }) { - const dots = ["intro", "install", "form"] as const; +function DotIndicator({ + current, + installed, +}: { + current: number; + installed: boolean; +}) { + const dots = installed + ? (["intro", "form"] as const) + : (["intro", "install", "form"] as const); return (
{dots.map((id, i) => ( diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx index 547a474..099e6e1 100644 --- a/src/routes/__root.tsx +++ b/src/routes/__root.tsx @@ -5,6 +5,8 @@ import { useMatchRoute, } from "@tanstack/react-router"; import { ListChecks, Settings, Users } from "lucide-react"; +import { useMemo } from "react"; +import { isInstalledPwa } from "@/features/onboarding/components/onboarding-form"; export const Route = createRootRoute({ component: () => { @@ -12,9 +14,16 @@ export const Route = createRootRoute({ const isOnboarding = matchRoute({ to: "/onboarding" }); const isRoot = matchRoute({ to: "/" }); const hideNav = isOnboarding || isRoot; + const installed = useMemo(() => isInstalledPwa(), []); return (
+ {!hideNav && !installed && ( +
+ App nicht installiert — füge TherapyFinder zum Home-Bildschirm + hinzu, um Datenverlust zu vermeiden. +
+ )}