Martin Dvorak
7da308fa1e
Buttons: the recipe's thin veils let btn-secondary/btn-ghost/glass-pill blend into the grass and sky - they now carry a stronger pale-glass veil (the Ask-pill look) over the blurred scene, ghosts plus a rim and full-contrast text. Homework make/check results gained the same red "!" report control as the feeds and the guide (a synthetic short-answer activity maps into the report flow; pinned in phase3). Reduced motion: the manual toggle only fed framer's MotionConfig, which strips transform animations - while components branched on the OS-only useReducedMotion - so translucent sheets still spring-faded their opacity in over the page (the "ugly visual glitch with the settings panel"). All 16 components now read useAppReducedMotion() (OS or toggle), and the settings sheet/scrim and the library's phone sheet go instant. Verified frame by frame: opacity 1.00 from the first frame. Contrast 0 findings, axe clean; mobile 126/126, chat 102/102, providers 20/20, wizard 95/95, phase3 31/31, bubbles 34/34, i18n 13/13, native 33/33. Version 0.5.4, SW -> freezmo-v76.
388 lines
14 KiB
TypeScript
388 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { AnimatePresence, motion, useDragControls } from "framer-motion";
|
|
import { useAppReducedMotion as useReducedMotion } from "@/lib/motion-pref";
|
|
import { useCallback, useEffect, useState } from "react";
|
|
|
|
import {
|
|
AddToHomeIcon,
|
|
ChevronDownIcon,
|
|
ChromeIcon,
|
|
CompassIcon,
|
|
DownloadIcon,
|
|
EllipsisIcon,
|
|
PlusIcon,
|
|
ShareIcon,
|
|
XIcon,
|
|
} from "@/components/icons";
|
|
import { Spinner } from "@/components/ui";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import { useBackClose } from "@/lib/use-back-close";
|
|
import {
|
|
detectBrowser,
|
|
detectPlatform,
|
|
dismissInstallPrompt,
|
|
INSTALL_PROMPT_EVENT,
|
|
INSTALLED_EVENT,
|
|
installSheetTheme,
|
|
isDismissed,
|
|
isInstalled,
|
|
isStandalone,
|
|
markInstalled,
|
|
OPEN_INSTALL_EVENT,
|
|
type BeforeInstallPromptEvent,
|
|
type InstallBrowser,
|
|
type InstallPlatform,
|
|
} from "@/lib/install";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type SheetInfo = {
|
|
platform: InstallPlatform;
|
|
browser: InstallBrowser;
|
|
theme: "dark" | "light";
|
|
};
|
|
|
|
/**
|
|
* "Install the app" bottom sheet. Mounted once in the root layout so it can
|
|
* appear over any screen (including the API-key gate) about a second after
|
|
* load. Phones/tablets only, never when already installed, and at most once
|
|
* per 7 days after a dismissal. Closing it leaves the site exactly as it was.
|
|
*/
|
|
export function InstallSheet() {
|
|
const [info, setInfo] = useState<SheetInfo | null>(null);
|
|
const [open, setOpen] = useState(false);
|
|
const [promptEvent, setPromptEvent] = useState<BeforeInstallPromptEvent | null>(null);
|
|
const [installing, setInstalling] = useState(false);
|
|
const dragControls = useDragControls();
|
|
const reduceMotion = useReducedMotion();
|
|
const { t } = useI18n();
|
|
const domain = typeof window === "undefined" ? "" : window.location.hostname;
|
|
|
|
/* System Back closes the sheet first. */
|
|
useBackClose(open, () => setOpen(false));
|
|
|
|
/** Everything needed to render the sheet, or null if it shouldn't appear. */
|
|
const prepare = useCallback((): SheetInfo | null => {
|
|
const platform = detectPlatform();
|
|
if (platform === "other" || isInstalled()) return null;
|
|
return { platform, browser: detectBrowser(platform), theme: installSheetTheme() };
|
|
}, []);
|
|
|
|
// Automatic prompt: about a second after load, unless dismissed recently.
|
|
useEffect(() => {
|
|
if (isStandalone()) {
|
|
markInstalled();
|
|
return;
|
|
}
|
|
const next = prepare();
|
|
if (!next || isDismissed()) return;
|
|
const timer = window.setTimeout(() => {
|
|
setInfo(next);
|
|
setOpen(true);
|
|
}, 1000);
|
|
return () => window.clearTimeout(timer);
|
|
}, [prepare]);
|
|
|
|
// Manual open from the Settings row (ignores the 7-day window).
|
|
useEffect(() => {
|
|
const onOpen = () => {
|
|
const next = prepare();
|
|
if (!next) return;
|
|
setInfo(next);
|
|
setOpen(true);
|
|
};
|
|
window.addEventListener(OPEN_INSTALL_EVENT, onOpen);
|
|
return () => window.removeEventListener(OPEN_INSTALL_EVENT, onOpen);
|
|
}, [prepare]);
|
|
|
|
// Chrome's deferred install prompt + the "installed" signal.
|
|
useEffect(() => {
|
|
const sync = () => setPromptEvent(window.__freezmoInstallPrompt ?? null);
|
|
const onInstalled = () => {
|
|
markInstalled();
|
|
setPromptEvent(null);
|
|
setInstalling(false);
|
|
setOpen(false);
|
|
};
|
|
window.addEventListener(INSTALL_PROMPT_EVENT, sync);
|
|
window.addEventListener(INSTALLED_EVENT, onInstalled);
|
|
window.addEventListener("appinstalled", onInstalled);
|
|
sync();
|
|
return () => {
|
|
window.removeEventListener(INSTALL_PROMPT_EVENT, sync);
|
|
window.removeEventListener(INSTALLED_EVENT, onInstalled);
|
|
window.removeEventListener("appinstalled", onInstalled);
|
|
};
|
|
}, []);
|
|
|
|
const close = useCallback(() => {
|
|
dismissInstallPrompt();
|
|
setOpen(false);
|
|
setInstalling(false);
|
|
}, []);
|
|
|
|
// Escape closes, like every other sheet in the app.
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const onKey = (event: KeyboardEvent) => {
|
|
if (event.key === "Escape") close();
|
|
};
|
|
window.addEventListener("keydown", onKey);
|
|
return () => window.removeEventListener("keydown", onKey);
|
|
}, [open, close]);
|
|
|
|
const runPrompt = async () => {
|
|
if (!promptEvent || installing) return;
|
|
setInstalling(true);
|
|
try {
|
|
await promptEvent.prompt();
|
|
const choice = await promptEvent.userChoice;
|
|
if (choice.outcome === "accepted") {
|
|
markInstalled();
|
|
setOpen(false);
|
|
setInstalling(false);
|
|
return;
|
|
}
|
|
} catch {
|
|
/* the native prompt can fail; the steps below still work */
|
|
}
|
|
setInstalling(false);
|
|
};
|
|
|
|
// The exact iOS flow: Safari users skip the "open in Safari" step entirely.
|
|
const steps: React.ReactNode[] = [];
|
|
if (info?.platform === "ios") {
|
|
if (info.browser !== "safari") {
|
|
steps.push(
|
|
<>
|
|
{t("install.openIn")} <Chip icon={<CompassIcon className="size-4" />}>Safari</Chip>
|
|
</>,
|
|
);
|
|
}
|
|
steps.push(
|
|
<>
|
|
{t("install.tap")}{" "}
|
|
<IconChip icon={<EllipsisIcon className="size-4" />} label={t("install.moreOptions")} />{" "}
|
|
{t("install.inBrowserBar")}
|
|
</>,
|
|
);
|
|
steps.push(
|
|
<>
|
|
{t("install.tap")} <Chip icon={<ShareIcon className="size-4" />}>{t("install.share")}</Chip>
|
|
{t("install.then")} <Chip icon={<ChevronDownIcon className="size-4" />}>{t("install.more")}</Chip>
|
|
</>,
|
|
);
|
|
steps.push(
|
|
<>
|
|
{t("install.choose")}{" "}
|
|
<Chip icon={<AddToHomeIcon className="size-4" />}>{t("install.addToHome")}</Chip>
|
|
</>,
|
|
);
|
|
steps.push(
|
|
<>
|
|
{t("install.tapConfirm")}{" "}
|
|
<AccentPill icon={<PlusIcon className="size-4" />}>{t("install.add")}</AccentPill>{" "}
|
|
{t("install.toConfirm")}
|
|
</>,
|
|
);
|
|
} else if (info?.platform === "android") {
|
|
if (info.browser !== "chrome") {
|
|
steps.push(
|
|
<>
|
|
{t("install.openIn")} <Chip icon={<ChromeIcon className="size-4" />}>Chrome</Chip>
|
|
</>,
|
|
);
|
|
}
|
|
steps.push(
|
|
<>
|
|
{t("install.tap")}{" "}
|
|
<IconChip icon={<EllipsisIcon className="size-4" />} label={t("install.moreOptions")} />{" "}
|
|
{t("install.inTopRight")}
|
|
</>,
|
|
);
|
|
steps.push(
|
|
<>
|
|
{t("install.choose")}{" "}
|
|
<Chip icon={<DownloadIcon className="size-4" />}>{t("install.installApp")}</Chip>{" "}
|
|
{t("install.or")}{" "}
|
|
<Chip icon={<AddToHomeIcon className="size-4" />}>{t("install.addToHomeScreen")}</Chip>
|
|
</>,
|
|
);
|
|
steps.push(
|
|
<>
|
|
{t("install.tapConfirm")}{" "}
|
|
<AccentPill icon={<DownloadIcon className="size-4" />}>{t("install.install")}</AccentPill>{" "}
|
|
{t("install.toConfirm")}
|
|
</>,
|
|
);
|
|
}
|
|
|
|
const showNativePrompt = info?.platform === "android" && Boolean(promptEvent);
|
|
|
|
return (
|
|
// The sheet is dark by default; only an explicit light choice in the app
|
|
// switches the palette (the wrapper scopes the app's .dark tokens).
|
|
<div className={info?.theme === "light" ? undefined : "dark"}>
|
|
<AnimatePresence>
|
|
{open && info ? (
|
|
<div className="fixed inset-x-0 top-0 z-[60] h-dvh">
|
|
<motion.div
|
|
aria-hidden
|
|
onClick={close}
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.25 }}
|
|
className="absolute inset-0 bg-black/50 backdrop-blur-[4px]"
|
|
/>
|
|
<motion.div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="install-sheet-title"
|
|
drag="y"
|
|
dragControls={dragControls}
|
|
dragListener={false}
|
|
dragMomentum={false}
|
|
dragConstraints={{ top: 0, bottom: 0 }}
|
|
dragElastic={{ top: 0, bottom: 0.55 }}
|
|
onDragEnd={(_, gesture) => {
|
|
if (gesture.offset.y > 90 || gesture.delta.y > 140 || gesture.velocity.y > 700) close();
|
|
}}
|
|
initial={reduceMotion ? { opacity: 0 } : { y: "100%" }}
|
|
animate={reduceMotion ? { opacity: 1 } : { y: 0 }}
|
|
exit={reduceMotion ? { opacity: 0 } : { y: "100%" }}
|
|
transition={{ duration: 0.34, ease: [0.22, 1, 0.36, 1] }}
|
|
className="gate-card glass-sheet absolute inset-x-0 bottom-0 mx-auto w-full rounded-b-none border-b-0 sm:max-w-xl"
|
|
>
|
|
<div className="thin-scroll max-h-[90dvh] overflow-y-auto px-5 pt-2 pb-[calc(24px+env(safe-area-inset-bottom))]">
|
|
<div
|
|
aria-hidden
|
|
onPointerDown={(event) => dragControls.start(event)}
|
|
className="mx-auto flex h-6 w-full cursor-grab touch-none items-center justify-center active:cursor-grabbing"
|
|
>
|
|
<span className="h-1 w-9 rounded-full bg-[var(--text-subtle)] opacity-40" />
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between gap-4">
|
|
<h2
|
|
id="install-sheet-title"
|
|
className="text-[17px] font-semibold tracking-[-0.02em] text-[var(--text)]"
|
|
>
|
|
{info.platform === "ios" ? t("install.titleIos") : t("install.titleAndroid")}
|
|
</h2>
|
|
<button
|
|
type="button"
|
|
onClick={close}
|
|
aria-label={t("common.close")}
|
|
className="grid size-10 shrink-0 place-items-center rounded-full text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
|
|
>
|
|
<XIcon className="size-[18px]" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* app card */}
|
|
<div className="mt-1 flex items-center gap-3 rounded-2xl border border-[var(--install-border)] bg-[var(--install-card)] p-3">
|
|
{/* eslint-disable-next-line @next/next/no-img-element -- static app icon, no optimisation needed */}
|
|
<img
|
|
src="/icons/icon-192.png"
|
|
alt=""
|
|
aria-hidden
|
|
className="size-11 shrink-0 rounded-[11px]"
|
|
/>
|
|
<span className="min-w-0">
|
|
<span className="block text-[15px] font-semibold leading-tight text-[var(--text)]">
|
|
Freezmo
|
|
</span>
|
|
<span className="block truncate text-[13px] text-[var(--text-subtle)]">
|
|
{domain}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
{showNativePrompt ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => void runPrompt()}
|
|
disabled={installing}
|
|
className="btn-primary mt-4 h-12 w-full rounded-[14px] text-[15px] font-medium disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
{installing ? (
|
|
<>
|
|
<Spinner className="size-4" /> {t("install.installing")}
|
|
</>
|
|
) : (
|
|
<>
|
|
<DownloadIcon className="size-4" /> {t("install.install")}
|
|
</>
|
|
)}
|
|
</button>
|
|
) : null}
|
|
|
|
{showNativePrompt ? (
|
|
<p className="mt-4 text-center text-[12px] text-[var(--text-subtle)]">
|
|
{t("install.orManually")}
|
|
</p>
|
|
) : null}
|
|
|
|
<ol className={cn("space-y-4", showNativePrompt ? "mt-3" : "mt-5")}>
|
|
{steps.map((step, index) => (
|
|
<li key={index} className="grid grid-cols-[24px_1fr] items-start gap-3">
|
|
<span
|
|
aria-hidden
|
|
className="grid size-6 place-items-center rounded-full border border-[var(--install-border)] text-[11.5px] font-medium tabular-nums text-[var(--text-subtle)]"
|
|
>
|
|
{index + 1}
|
|
</span>
|
|
<span className="text-[16px] leading-6 text-[var(--text-muted)]">{step}</span>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={close}
|
|
className="mt-6 w-full rounded-[14px] py-3 text-center text-[15px] font-medium text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
|
|
>
|
|
{t("install.maybeLater")}
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
) : null}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** Small pill for a UI element the user has to tap. */
|
|
function Chip({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
|
|
return (
|
|
<span className="mx-0.5 inline-flex items-center gap-1.5 rounded-full border border-[var(--install-border)] bg-[var(--install-chip)] px-2.5 py-1 align-middle text-[16px] font-medium leading-none text-[var(--text)]">
|
|
<span aria-hidden>{icon}</span>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
/** Icon-only pill, for buttons that are just a glyph (the ⋯ menu). */
|
|
function IconChip({ icon, label }: { icon: React.ReactNode; label: string }) {
|
|
return (
|
|
<span
|
|
role="img"
|
|
aria-label={label}
|
|
className="mx-0.5 inline-flex items-center rounded-full border border-[var(--install-border)] bg-[var(--install-chip)] px-2.5 py-1 align-middle text-[var(--text)]"
|
|
>
|
|
<span aria-hidden>{icon}</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
/** The one coloured element: the final confirmation button (iOS blue). */
|
|
function AccentPill({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
|
|
return (
|
|
<span className="mx-0.5 inline-flex items-center gap-1.5 rounded-full bg-[#007AFF] px-3 py-1 align-middle text-[16px] font-medium leading-none text-white dark:bg-[#0A84FF]">
|
|
<span aria-hidden>{icon}</span>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|