mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-10 13:22:14 +00:00
Marc-André BombeckandClaude Opus 4.8
7333d8e40f
Build the web UI for the cycle-tracking category against the existing `/api/cycle/*` routes: a month calendar + circular phase wheel, a fast log-day sheet, a predictions panel, phase-insight cards, and a single-page settings form, all under a gated `/cycle` tab. - Calendar + wheel: a hand-rolled SVG phase ring (0 KB runtime, matching the wellness-ring aesthetic with calm per-phase hues) showing the current phase + day-of-cycle, alongside a month grid where logged period days show a filled pip, the predicted next period renders as a ranged band (never a single date), the fertile window shows only when the goal allows it (the API suppresses it server-side otherwise), and ovulation + per-day symptoms carry markers. Reads `GET /api/cycle/calendar`. - Log-day sheet: one-tap period start, flow / symptom / ovulation-test / mucus chips, basal-temperature, intercourse + protection, and a free-text note. Optimistic write to the day-log + period routes; invalidates the cycle query keys. - Predictions panel: next-period range with a confidence pill, goal-gated fertile window, a still-learning state for fewer than three cycles or raw-chart mode, cycle-history stats, and the fixed non-medical disclaimer (reusing the drug-level-estimate disclaimer pattern). - Insights cards render whatever phase-correlation cards the API surfaces, with a graceful empty-state until the feed lands. - Settings: a single dynamic form where the inclusive goal selector drives the copy (conception framing only for trying-to-conceive), plus typical- length priors, raw-chart mode, sensitive-category encryption, discreet notifications, and export / delete. PATCHes `/api/auth/me/cycle-prefs`. - Nav: a Cycle entry in the sidebar and the mobile More hub, gated on `cycleTrackingEnabled` from `/api/auth/me` and hidden otherwise. Add the cycle query keys + dependent-key bundle to the factory, full copy across all six locales, and dedicated per-theme phase hues. Plain second-person voice, WCAG 2.1 AA, no new dependencies. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
25 lines
1023 B
TypeScript
25 lines
1023 B
TypeScript
/**
|
|
* v1.15.0 — cycle-phase hue tokens.
|
|
*
|
|
* Each phase maps to a dedicated, per-theme CSS custom property defined in
|
|
* `globals.css` (Dracula dark + Alucard light), so the hue is hand-tuned for
|
|
* contrast in both themes — exactly the wellness-ring pattern. The phase
|
|
* semantic is never colour-only: every surface that uses a hue also renders
|
|
* the phase word + an aria-label.
|
|
*/
|
|
import type { CyclePhase } from "./types";
|
|
|
|
export const PHASE_HUE: Record<CyclePhase, string> = {
|
|
MENSTRUAL: "var(--cycle-phase-menstrual)",
|
|
FOLLICULAR: "var(--cycle-phase-follicular)",
|
|
OVULATORY: "var(--cycle-phase-ovulatory)",
|
|
LUTEAL: "var(--cycle-phase-luteal)",
|
|
};
|
|
|
|
/** Flow-intensity tint for the calendar period dots (rose family). */
|
|
export const FLOW_HUE = "var(--cycle-phase-menstrual)";
|
|
/** Fertile-window tint (follicular green family). */
|
|
export const FERTILE_HUE = "var(--cycle-phase-follicular)";
|
|
/** Ovulation marker tint (amber-gold family). */
|
|
export const OVULATION_HUE = "var(--cycle-phase-ovulatory)";
|