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
|
|
@ -10,6 +10,7 @@ import { Button, ProgressBar } from "@/components/ui";
|
|||
import { assembleSolution } from "@/lib/homework";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import type { HomeworkGuideRecord, HomeworkStep } from "@/lib/schemas";
|
||||
import { useWakeLock } from "@/lib/use-wake-lock";
|
||||
|
||||
import { CopyButton } from "./CopyButton";
|
||||
|
||||
|
|
@ -33,6 +34,8 @@ export function HomeworkGuide({
|
|||
againLoading: boolean;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
/* Keep the screen awake while working through the guide. */
|
||||
useWakeLock(true);
|
||||
const steps = record.steps;
|
||||
const slideCount = steps.length + 1; // + the solution slide
|
||||
const [index, setIndex] = useState(0);
|
||||
|
|
|
|||
|
|
@ -16,8 +16,12 @@ import type { HomeworkMode, HomeworkRecord } from "@/lib/schemas";
|
|||
import { ACCEPTED_TYPES, formatBytes, imageFilesFromDataTransfer } from "@/lib/image";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import { stepVariants } from "@/lib/motion";
|
||||
import { takePendingShare } from "@/lib/share-pending";
|
||||
import { useBackClose } from "@/lib/use-back-close";
|
||||
import type { useNotesIntake } from "@/lib/use-notes-intake";
|
||||
import { useIsPhone } from "@/lib/use-phone";
|
||||
import { useOnline } from "@/lib/use-online";
|
||||
import { clearWizardDraft, loadWizardDraft, saveWizardDraft } from "@/lib/wizard-draft";
|
||||
import { openSettings } from "@/lib/ui-events";
|
||||
import { cn, truncate } from "@/lib/utils";
|
||||
|
||||
|
|
@ -76,6 +80,43 @@ export function HomeworkInput({
|
|||
const [pasteOpen, setPasteOpen] = useState(false);
|
||||
const isPhone = useIsPhone();
|
||||
const reduceMotion = useReducedMotion();
|
||||
const online = useOnline();
|
||||
const [clipboardAvailable, setClipboardAvailable] = useState(false);
|
||||
|
||||
/* System Back goes one wizard step back (phones), then leaves the page. */
|
||||
useBackClose(isPhone && step > 1, () => {
|
||||
setStepDir(-1);
|
||||
setStep(1);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setClipboardAvailable(
|
||||
typeof navigator !== "undefined" && typeof navigator.clipboard?.readText === "function",
|
||||
);
|
||||
}, []);
|
||||
|
||||
/* Restore a draft after an OS kill / reload. */
|
||||
useEffect(() => {
|
||||
const draft = loadWizardDraft("homework");
|
||||
if (draft?.text) onTextChange(draft.text);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- restore once on mount
|
||||
}, []);
|
||||
|
||||
/* Content shared in from another app (share target) lands here. */
|
||||
useEffect(() => {
|
||||
const pending = takePendingShare();
|
||||
if (!pending) return;
|
||||
if (pending.text) onTextChange(pending.text);
|
||||
if (pending.files.length > 0) void intake.addFiles(pending.files);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- once on mount
|
||||
}, [intake.addFiles]);
|
||||
|
||||
/* Persist the typed assignment while the user works (debounced). */
|
||||
useEffect(() => {
|
||||
if (!isPhone) return;
|
||||
const timer = window.setTimeout(() => saveWizardDraft("homework", { text }), 400);
|
||||
return () => window.clearTimeout(timer);
|
||||
}, [text, isPhone]);
|
||||
|
||||
// Clipboard: screenshots become photos, long copied text becomes the assignment.
|
||||
useEffect(() => {
|
||||
|
|
@ -286,15 +327,51 @@ export function HomeworkInput({
|
|||
{t("upload.pasteInstead")}
|
||||
</Button>
|
||||
</div>
|
||||
{clipboardAvailable ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="lg"
|
||||
className="touch-target w-full"
|
||||
onClick={() => {
|
||||
void (async () => {
|
||||
try {
|
||||
const clip = await navigator.clipboard.readText();
|
||||
if (clip) {
|
||||
onTextChange(text ? `${text}\n${clip}` : clip);
|
||||
setPasteOpen(true);
|
||||
}
|
||||
} catch {
|
||||
/* denied — the textarea still works */
|
||||
}
|
||||
})();
|
||||
}}
|
||||
>
|
||||
{t("upload.pasteClipboard")}
|
||||
</Button>
|
||||
) : null}
|
||||
{showPaste ? (
|
||||
<textarea
|
||||
id="homework-assignment-phone"
|
||||
value={text}
|
||||
onChange={(event) => onTextChange(event.target.value)}
|
||||
onKeyDown={(event) => event.stopPropagation()}
|
||||
onKeyDown={(event) => {
|
||||
event.stopPropagation();
|
||||
if (event.key === "Enter" && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
if (canSubmit) {
|
||||
setStepDir(1);
|
||||
setStep(2);
|
||||
}
|
||||
}
|
||||
}}
|
||||
rows={6}
|
||||
placeholder={t("homework.source.placeholder")}
|
||||
aria-label={t("homework.source.textLabel")}
|
||||
inputMode="text"
|
||||
enterKeyHint="done"
|
||||
autoComplete="off"
|
||||
autoCapitalize="sentences"
|
||||
spellCheck
|
||||
className="w-full resize-y rounded-2xl border border-white/60 bg-white/55 px-4 py-3 text-sm text-frost-950 outline-none backdrop-blur-xl transition placeholder:text-frost-400 focus:border-accent-400 dark:border-white/12 dark:bg-white/[0.07] dark:text-frost-50"
|
||||
/>
|
||||
) : null}
|
||||
|
|
@ -397,13 +474,16 @@ export function HomeworkInput({
|
|||
<div className="grid gap-3">
|
||||
{MODES.map((option) =>
|
||||
modeCard(option, () => {
|
||||
if (!canSubmit) return;
|
||||
if (!canSubmit || !online) return;
|
||||
clearWizardDraft("homework");
|
||||
onModeChange(option.id);
|
||||
onSubmit(option.id);
|
||||
}),
|
||||
)}
|
||||
</div>
|
||||
<p className="text-center text-[12px] text-[var(--text-subtle)]">{t("homework.phone.startHint")}</p>
|
||||
<p className="text-center text-[12px] text-[var(--text-subtle)]">
|
||||
{online ? t("homework.phone.startHint") : t("offline.generate")}
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
</motion.div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import { Button } from "@/components/ui";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import type { HomeworkMakeRecord } from "@/lib/schemas";
|
||||
import { shareHomework } from "@/lib/share";
|
||||
|
||||
import { CopyButton } from "./CopyButton";
|
||||
|
||||
|
|
@ -39,6 +40,9 @@ export function HomeworkResult({
|
|||
|
||||
<div className="flex flex-wrap items-start gap-2">
|
||||
<CopyButton text={record.answer} />
|
||||
<Button variant="secondary" className="touch-target" onClick={() => void shareHomework(record)}>
|
||||
{t("deck.share")}
|
||||
</Button>
|
||||
<Button variant="secondary" className="touch-target" onClick={onAgain} loading={againLoading}>
|
||||
{t("homework.result.again")}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import {
|
|||
import { useI18n } from "@/lib/i18n";
|
||||
import type { HomeworkMode, HomeworkRecord } from "@/lib/schemas";
|
||||
import { useNotesIntake } from "@/lib/use-notes-intake";
|
||||
import { clearWizardDraft } from "@/lib/wizard-draft";
|
||||
|
||||
import { HomeworkGuide } from "./HomeworkGuide";
|
||||
import { HomeworkInput } from "./HomeworkInput";
|
||||
|
|
@ -154,6 +155,7 @@ export function HomeworkScreen({ initialRecordId }: { initialRecordId?: string }
|
|||
intake.clear();
|
||||
setText("");
|
||||
setError(null);
|
||||
clearWizardDraft("homework");
|
||||
setView({ kind: "start" });
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue