Martin Dvorak
ef2a6a3589
Homework (/homework — entry points in the drawer and on the create screen) - Assignment intake reuses the study pipeline: pasted text, photos (camera/picker, compressed in the browser) and documents (PDF/DOCX/PPTX/ ODT/text) through lib/image + lib/documents, the same vision step and the same language guard. Raw files never leave the device — only text and JPEG data URLs reach the server. - Two large choice cards: “Just make it” returns the finished homework (answer only, plain text, copy + make it again); “Explain how to make this homework” builds an interactive guide. - The guide is one step per screen in the study-feed snap layout: explanation, three progressive hints (nudge -> hint -> the answer) and an optional checkpoint rendered by the existing activity components (graded through /api/grade). The last screen assembles the solution from the step answers, with a copy button. Checkpoints carry xp 0 so the guide stays free of XP/streak chrome. - Results live in freezmo.homework.v1 with a small history (open/delete); “Make it again” re-runs from the stored assignment text (the vision transcription when photos were used) — no original files are stored. - The answer and the guide are written in the assignment's language, never translated into the UI language. Server - POST /api/homework: NDJSON stage events like /api/generate, the same http-guard, auth checked before parsing, and its own RATE_LIMIT_HOMEWORK (documented in .env.example + the README table). - New prompts in lib/prompts.ts and zod schemas in lib/schemas.ts with the same single repair retry; TEXT_MODEL for content, VISION_MODEL only for photos. New shared client pieces: useNotesIntake, lib/homework store, lib/clipboard, and a shared NDJSON reader in lib/client-api. Also finishing the mobile polish pass from the previous request - Phone ice scene: the top-left orb moved behind the glass header (it sat behind the page heading/subtitle). The settings sheet's scroll cue is now a bare chevron inside a content fade (mask) instead of a chip over the status banner, and the API key card's note/disclosure/actions are tightened. - theme-color now follows the in-app theme (SSR metas still fall back to the OS preference); apple-mobile-web-app-status-bar-style stays “default” because iOS fixes the status-bar text colour at launch. Verified: 78/78 homework checks (text/photo/PDF, both modes, EN+CS, dark+light, 360/390px, copy, history persistence, storage privacy, API language, axe), plus the existing suites re-run (mobile 47/47, pixel contrast 0 below AA, i18n 27/27, desktop regression 72/72). Lint + build clean; service worker freezmo-v6.
80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { useI18n } from "@/lib/i18n";
|
|
import { cn } from "@/lib/utils";
|
|
import { MoonIcon, SunIcon } from "@/components/icons";
|
|
|
|
const STORAGE_KEY = "freezmo.theme";
|
|
|
|
const THEME_COLORS = { light: "#f4f7fd", dark: "#0e1424" } as const;
|
|
|
|
/**
|
|
* Keeps the first `theme-color` meta (the one the app owns) in step with the
|
|
* in-app theme. The SSR metas follow the OS preference; this one always wins
|
|
* because it is media-less and first in the head.
|
|
*/
|
|
export function syncThemeColor(theme: "light" | "dark") {
|
|
try {
|
|
let meta = document.querySelector<HTMLMetaElement>('meta[name="theme-color"][data-app]');
|
|
if (!meta) {
|
|
meta = document.createElement("meta");
|
|
meta.setAttribute("name", "theme-color");
|
|
meta.setAttribute("data-app", "1");
|
|
document.head.insertBefore(meta, document.head.firstChild);
|
|
}
|
|
meta.setAttribute("content", THEME_COLORS[theme]);
|
|
} catch {
|
|
/* private mode / odd embedded browsers */
|
|
}
|
|
}
|
|
|
|
export function useTheme() {
|
|
const [theme, setTheme] = useState<"light" | "dark">("light");
|
|
|
|
useEffect(() => {
|
|
const stored = window.localStorage.getItem(STORAGE_KEY);
|
|
const isDark = stored
|
|
? stored === "dark"
|
|
: window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
setTheme(isDark ? "dark" : "light");
|
|
syncThemeColor(isDark ? "dark" : "light");
|
|
}, []);
|
|
|
|
const apply = (next: "light" | "dark") => {
|
|
setTheme(next);
|
|
document.documentElement.classList.toggle("dark", next === "dark");
|
|
syncThemeColor(next);
|
|
try {
|
|
window.localStorage.setItem(STORAGE_KEY, next);
|
|
} catch {
|
|
/* private mode */
|
|
}
|
|
};
|
|
|
|
return { theme, toggle: () => apply(theme === "dark" ? "light" : "dark") };
|
|
}
|
|
|
|
export function ThemeToggle({ className }: { className?: string }) {
|
|
const { theme, toggle } = useTheme();
|
|
const { t } = useI18n();
|
|
const dark = theme === "dark";
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={toggle}
|
|
aria-label={dark ? t("common.switchToLight") : t("common.switchToDark")}
|
|
title={dark ? t("common.lightMode") : t("common.darkMode")}
|
|
className={cn(
|
|
// A bordered chip with a press affordance: the bare sun/moon glyph was
|
|
// easy to read as decoration rather than a control.
|
|
"touch-target inline-flex size-9 items-center justify-center rounded-full border border-[var(--hairline)] bg-[var(--surface-strong)] text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)] active:scale-95",
|
|
className,
|
|
)}
|
|
>
|
|
<span aria-hidden>{dark ? <SunIcon className="size-5" /> : <MoonIcon className="size-5" />}</span>
|
|
</button>
|
|
);
|
|
}
|