Native-feel pass: PWA integration, system back, offline, haptics, undo
Mobile only (<=639px / coarse pointers); desktop keeps its behaviour. System integration - Manifest: id, display_override, monochrome icon, Make my homework shortcut and a share target (text/URL via GET, files via POST). iOS startup images for the common iPhone sizes. Pinch-zoom is allowed again (double-tap zoom is disabled via touch-action instead). - Share target: /share chooser with New deck / Make my homework; POSTed files wait in a 10-minute in-memory store, reach the wizard through sessionStorage and never touch disk. - Web Share: Share rows for decks (JSON file where supported) and the homework result, with a clipboard fallback and a toast. - Offline: a quiet pill appears and Freeze / mode cards are disabled with a clear reason; input is never lost (error cards keep Retry). - State: wizard drafts (text, options, photos up to a size budget) survive reloads and OS kills and are cleared on success; re-tapping the active tab scrolls to the top; the deck page shows a skeleton instead of a spinner. Navigation and gestures - System Back closes the topmost layer first: a small history-entry stack (lib/use-back-close.ts) covers the drawer, Settings sheet, install sheet, deck actions panel and one wizard step; navigations are never rewound and stale entries are skipped. - Destructive-but-reversible actions use Undo toasts: deleting a deck (no confirm) and removing a file in the wizard. Irreversible ones keep their confirm. Input and feedback - Every phone input got inputmode / enterkeyhint / autocomplete / autocapitalize / spellcheck; Enter on the last field advances the wizard; a clipboard-paste button appears where the API exists. - Haptics behind a Settings toggle (on by default): tab switches, toggles, correct/wrong, completion; Vibration API + the iOS hidden switch tick, throttled and silent everywhere else. - Wake lock during the study feed and homework guide, released on leave and re-acquired when the tab returns. Verified: new native suite 35/35 (manifest/head/viewport, offline, share target GET + POST, back-gesture layers, undo, share fallback, tab re-tap, haptics persistence, draft restore), regression 74/74, mobile 52/52, wizard 80/80, declutter 116/116, animation 8/8, i18n 25/25. Lint + build clean. SW freezmo-v23. Needs a real device (documented in the README): iOS haptic tick, system share sheet entry, wake-lock grant, iPhone startup images, iOS edge-swipe back, install prompts. Pull-to-refresh and the app badge were skipped on purpose.
This commit is contained in:
parent
e66141e9a0
commit
4369ba1a17
34 changed files with 1354 additions and 65 deletions
|
|
@ -6,7 +6,7 @@ import { useEffect, useState } from "react";
|
|||
|
||||
import { ApiKeyGate } from "@/components/ApiKeyGate";
|
||||
import { StudyFeed } from "@/components/StudyFeed";
|
||||
import { Button, Spinner } from "@/components/ui";
|
||||
import { Button } from "@/components/ui";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import type { Deck } from "@/lib/schemas";
|
||||
import { getDeck } from "@/lib/storage";
|
||||
|
|
@ -29,9 +29,15 @@ export default function DeckPage() {
|
|||
|
||||
if (!loaded) {
|
||||
return (
|
||||
<main className="frost-bg grid min-h-dvh place-items-center">
|
||||
<div className="relative flex items-center gap-3 text-sm font-semibold text-frost-800 dark:text-frost-100">
|
||||
<Spinner className="size-5" /> {t("deckPage.loading")}
|
||||
<main className="frost-bg grid min-h-dvh place-items-center px-4">
|
||||
<div className="w-full max-w-xl space-y-4" aria-busy="true" aria-label={t("deckPage.loading")}>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="skeleton size-9 rounded-xl" />
|
||||
<div className="skeleton h-2 flex-1 rounded-full" />
|
||||
</div>
|
||||
<div className="skeleton h-24 rounded-3xl" />
|
||||
<div className="skeleton h-12 rounded-2xl" />
|
||||
<div className="skeleton h-12 w-2/3 rounded-2xl" />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@ import type { Metadata, Viewport } from "next";
|
|||
|
||||
import { IceBackdrop } from "@/components/IceBackdrop";
|
||||
import { InstallSheet } from "@/components/InstallSheet";
|
||||
import { OfflineBanner } from "@/components/OfflineBanner";
|
||||
import { ServiceWorkerRegistrar } from "@/components/ServiceWorkerRegistrar";
|
||||
import { Toaster } from "@/components/Toaster";
|
||||
import "./globals.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
|
|
@ -18,6 +20,18 @@ export const metadata: Metadata = {
|
|||
capable: true,
|
||||
title: "Freezmo",
|
||||
statusBarStyle: "default",
|
||||
/* Startup images so launching from the home screen has no white flash.
|
||||
Sized for the common iPhone logical sizes at their device pixel ratio. */
|
||||
startupImage: [
|
||||
{ url: "/icons/splash-750x1334.png", media: "(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" },
|
||||
{ url: "/icons/splash-828x1792.png", media: "(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" },
|
||||
{ url: "/icons/splash-1170x2532.png", media: "(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3)" },
|
||||
{ url: "/icons/splash-1179x2556.png", media: "(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3)" },
|
||||
{ url: "/icons/splash-1284x2778.png", media: "(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3)" },
|
||||
{ url: "/icons/splash-1290x2796.png", media: "(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3)" },
|
||||
{ url: "/icons/splash-1536x2048.png", media: "(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" },
|
||||
{ url: "/icons/splash-1668x2388.png", media: "(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" },
|
||||
],
|
||||
},
|
||||
icons: {
|
||||
icon: [
|
||||
|
|
@ -43,11 +57,10 @@ export const metadata: Metadata = {
|
|||
export const viewport: Viewport = {
|
||||
width: "device-width",
|
||||
initialScale: 1,
|
||||
// Phones: no pinch/double-tap zoom (the app-like feel). The input font-size
|
||||
// rule in globals.css is what actually stops iOS Safari's focus auto-zoom,
|
||||
// which ignores user-scalable=no.
|
||||
maximumScale: 1,
|
||||
userScalable: false,
|
||||
// Pinch-zoom stays available for accessibility (double-tap zoom is disabled
|
||||
// by `touch-action: manipulation` on the chrome instead). The input
|
||||
// font-size rule in globals.css stops iOS Safari's focus auto-zoom, which
|
||||
// ignores the viewport meta anyway.
|
||||
viewportFit: "cover",
|
||||
themeColor: [
|
||||
{ media: "(prefers-color-scheme: light)", color: "#f4f7fd" },
|
||||
|
|
@ -82,6 +95,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
|||
<IceBackdrop />
|
||||
{children}
|
||||
<InstallSheet />
|
||||
<OfflineBanner />
|
||||
<Toaster />
|
||||
<ServiceWorkerRegistrar />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import type { MetadataRoute } from "next";
|
|||
*/
|
||||
export default function manifest(): MetadataRoute.Manifest {
|
||||
return {
|
||||
id: "/",
|
||||
name: "Freezmo — notes to study feed",
|
||||
short_name: "Freezmo",
|
||||
description:
|
||||
|
|
@ -13,6 +14,7 @@ export default function manifest(): MetadataRoute.Manifest {
|
|||
start_url: "/",
|
||||
scope: "/",
|
||||
display: "standalone",
|
||||
display_override: ["standalone", "minimal-ui"],
|
||||
orientation: "portrait",
|
||||
background_color: "#0e1424",
|
||||
theme_color: "#0e1424",
|
||||
|
|
@ -21,10 +23,39 @@ export default function manifest(): MetadataRoute.Manifest {
|
|||
{ src: "/icons/icon-192.png", sizes: "192x192", type: "image/png", purpose: "any" },
|
||||
{ src: "/icons/icon-512.png", sizes: "512x512", type: "image/png", purpose: "any" },
|
||||
{ src: "/icons/maskable-512.png", sizes: "512x512", type: "image/png", purpose: "maskable" },
|
||||
{ src: "/icons/monochrome.svg", sizes: "any", type: "image/svg+xml", purpose: "monochrome" },
|
||||
],
|
||||
shortcuts: [
|
||||
{ name: "New deck", short_name: "New", url: "/create" },
|
||||
{ name: "Make my homework", short_name: "Homework", url: "/homework" },
|
||||
{ name: "Library", short_name: "Library", url: "/" },
|
||||
],
|
||||
/* Share text and links from other apps (GET). Files are POSTed to the
|
||||
same route and handed over through a short-lived in-memory store. */
|
||||
share_target: {
|
||||
action: "/share-target",
|
||||
method: "POST",
|
||||
enctype: "multipart/form-data",
|
||||
params: {
|
||||
title: "title",
|
||||
text: "text",
|
||||
url: "url",
|
||||
files: [
|
||||
{
|
||||
name: "files",
|
||||
accept: [
|
||||
"image/*",
|
||||
"application/pdf",
|
||||
"text/*",
|
||||
"application/msword",
|
||||
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
||||
"application/vnd.openxmlformats-officedocument.presentationml.presentation",
|
||||
"application/vnd.oasis.opendocument.text",
|
||||
"application/vnd.oasis.opendocument.presentation",
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
|
|||
55
app/share-target/route.ts
Normal file
55
app/share-target/route.ts
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
import { MAX_SHARE_BYTES, putShare, takeShare, type SharedFile } from "@/lib/share-inbox";
|
||||
|
||||
export const runtime = "nodejs";
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
function asString(value: FormDataEntryValue | null): string | undefined {
|
||||
return typeof value === "string" && value.trim() ? value.trim().slice(0, 20_000) : undefined;
|
||||
}
|
||||
|
||||
/** GET /share?id=… — read (and consume) a payload that was POSTed in. */
|
||||
export async function GET(request: Request) {
|
||||
const id = new URL(request.url).searchParams.get("id");
|
||||
if (!id) return Response.json({ error: "missing id" }, { status: 400 });
|
||||
const payload = takeShare(id);
|
||||
if (!payload) return Response.json({ error: "expired" }, { status: 404 });
|
||||
return Response.json(payload);
|
||||
}
|
||||
|
||||
/**
|
||||
* POST /share — the Web Share Target. Text/URL arrive as form fields, files
|
||||
* as multipart uploads; both are stashed briefly and the browser is redirected
|
||||
* to the chooser page with an opaque id.
|
||||
*/
|
||||
export async function POST(request: Request) {
|
||||
let form: FormData;
|
||||
try {
|
||||
form = await request.formData();
|
||||
} catch {
|
||||
return Response.redirect(new URL("/share?error=bad", request.url), 303);
|
||||
}
|
||||
|
||||
const uploads = form.getAll("files").filter((entry): entry is File => entry instanceof File);
|
||||
const total = uploads.reduce((sum, file) => sum + file.size, 0);
|
||||
if (total > MAX_SHARE_BYTES) {
|
||||
return Response.redirect(new URL("/share?error=large", request.url), 303);
|
||||
}
|
||||
const files: SharedFile[] = [];
|
||||
for (const file of uploads.slice(0, 6)) {
|
||||
files.push({
|
||||
name: file.name || "shared",
|
||||
type: file.type || "application/octet-stream",
|
||||
data: Buffer.from(await file.arrayBuffer()).toString("base64"),
|
||||
});
|
||||
}
|
||||
|
||||
const id = crypto.randomUUID();
|
||||
putShare(id, {
|
||||
title: asString(form.get("title")),
|
||||
text: asString(form.get("text")),
|
||||
url: asString(form.get("url")),
|
||||
files,
|
||||
});
|
||||
|
||||
return Response.redirect(new URL(`/share?id=${id}`, request.url), 303);
|
||||
}
|
||||
36
app/share/page.tsx
Normal file
36
app/share/page.tsx
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import { ApiKeyGate } from "@/components/ApiKeyGate";
|
||||
import { AppHeader } from "@/components/AppHeader";
|
||||
import { ShareChooser } from "@/components/ShareChooser";
|
||||
import { MobileSidebar, Sidebar, SidebarOffset } from "@/components/Sidebar";
|
||||
|
||||
export const metadata = {
|
||||
title: "Add to Freezmo",
|
||||
};
|
||||
|
||||
export default async function SharePage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
|
||||
}) {
|
||||
const { id, text, url, error } = await searchParams;
|
||||
return (
|
||||
<ApiKeyGate>
|
||||
<div className="flex min-h-dvh">
|
||||
<Sidebar />
|
||||
<SidebarOffset />
|
||||
<MobileSidebar />
|
||||
<main className="flex min-h-dvh min-w-0 flex-1 flex-col">
|
||||
<AppHeader />
|
||||
<div className="mx-auto w-full max-w-3xl flex-1 px-4 pb-tabbar lg:px-10 lg:pb-16 lg:pt-10">
|
||||
<ShareChooser
|
||||
id={typeof id === "string" ? id : undefined}
|
||||
text={typeof text === "string" ? text : undefined}
|
||||
url={typeof url === "string" ? url : undefined}
|
||||
error={typeof error === "string" ? error : undefined}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</ApiKeyGate>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue