From 546835a9372b01bc0571161f439504021ddd8544 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Sat, 6 Jun 2026 20:10:15 +0200 Subject: [PATCH 1/4] fix(cycle): trim duplicate phase card, drop redundant disclaimers, tidy settings Remove the duplicate phase-education card from the calendar tab, keeping the single instance under the wheel and surfacing its "you often notice this here" chip row there. Drop the generic prediction-estimate caption on the predictions tab for every goal except AVOID_PREGNANCY, where the contraceptive-safety caveat stays as a deliberate medical note. Stop rendering the associations-not-causes footer on the insights crosstab. In the cycle settings, align card-header descriptions with their titles, and remove the standalone cycle export + purge affordances now that cycle data rides the main export and account-level delete. Move the web-push enable action into the card header row. --- .../__tests__/phase-education-card.test.tsx | 6 +- .../__tests__/predictions-panel.test.tsx | 18 ++- src/components/cycle/cycle-phase-crosstab.tsx | 3 - src/components/cycle/cycle-settings.tsx | 89 +------------ src/components/cycle/cycle-view.tsx | 17 +-- src/components/cycle/phase-education-card.tsx | 13 +- src/components/cycle/predictions-panel.tsx | 14 +- src/components/cycle/use-cycle.ts | 21 --- src/components/settings/_card-header.tsx | 38 ++++-- src/components/settings/web-push-card.tsx | 123 +++++++++--------- 10 files changed, 134 insertions(+), 208 deletions(-) diff --git a/src/components/cycle/__tests__/phase-education-card.test.tsx b/src/components/cycle/__tests__/phase-education-card.test.tsx index 7e18e0ae1..35fcb715b 100644 --- a/src/components/cycle/__tests__/phase-education-card.test.tsx +++ b/src/components/cycle/__tests__/phase-education-card.test.tsx @@ -103,18 +103,16 @@ describe("", () => { expect(off).toContain("Still learning your cycle"); }); - it("omits the chip row in the compact variant", () => { + it("renders the chip row when the user has symptoms clustering in this phase", () => { const html = render( , ); expect(html).toContain("progesterone"); - expect(html).not.toContain("cycle-phase-education-chips"); - // The compact variant still carries the log nudge. + expect(html).toContain("cycle-phase-education-chips"); expect(html).toContain("Log today"); }); }); diff --git a/src/components/cycle/__tests__/predictions-panel.test.tsx b/src/components/cycle/__tests__/predictions-panel.test.tsx index af2b832d4..c1b91adb1 100644 --- a/src/components/cycle/__tests__/predictions-panel.test.tsx +++ b/src/components/cycle/__tests__/predictions-panel.test.tsx @@ -37,12 +37,13 @@ const emptyHistory: CycleHistoryResponse = { }; describe("", () => { - it("renders the next-period range + the fixed disclaimer", () => { + it("renders the next-period range and shows the disclaimer under the AVOID_PREGNANCY goal", () => { const html = render( , ); expect(html).toContain('data-slot="cycle-disclaimer"'); @@ -51,6 +52,21 @@ describe("", () => { expect(html).toContain("–"); }); + it("suppresses the generic estimate disclaimer for non-AVOID_PREGNANCY goals", () => { + const html = render( + , + ); + expect(html).not.toContain('data-slot="cycle-disclaimer"'); + expect(html).not.toContain("Estimates only, not medical advice."); + // The range still renders. + expect(html).toContain("–"); + }); + it("renders the fertile window only when the prediction carries one", () => { const withFertile: CyclePrediction = { ...basePrediction, diff --git a/src/components/cycle/cycle-phase-crosstab.tsx b/src/components/cycle/cycle-phase-crosstab.tsx index 8c337d73c..69c9bbe07 100644 --- a/src/components/cycle/cycle-phase-crosstab.tsx +++ b/src/components/cycle/cycle-phase-crosstab.tsx @@ -215,9 +215,6 @@ export function CyclePhaseCrosstab({ ); })} -

- {t("cycle.insights.crosstab.footer")} -

); } diff --git a/src/components/cycle/cycle-settings.tsx b/src/components/cycle/cycle-settings.tsx index 2197832d4..74497fa78 100644 --- a/src/components/cycle/cycle-settings.tsx +++ b/src/components/cycle/cycle-settings.tsx @@ -18,7 +18,7 @@ import { NativeSelect } from "@/components/ui/native-select"; import { Separator } from "@/components/ui/separator"; import { useTranslations } from "@/lib/i18n/context"; import type { CycleGoal, CycleProfileDTO } from "./types"; -import { useUpdateCyclePrefs, useDeleteAllCycleData } from "./use-cycle"; +import { useUpdateCyclePrefs } from "./use-cycle"; /** * v1.15.0 — the single-page cycle settings form. @@ -50,8 +50,6 @@ function numOrEmpty(v: number | null): string { export function CycleSettings({ profile }: { profile: CycleProfileDTO }) { const { t } = useTranslations(); const update = useUpdateCyclePrefs(); - const purge = useDeleteAllCycleData(); - const [confirmingPurge, setConfirmingPurge] = useState(false); const [goal, setGoal] = useState(profile.goal); const [rawChartMode, setRawChartMode] = useState(profile.rawChartMode); @@ -228,87 +226,10 @@ export function CycleSettings({ profile }: { profile: CycleProfileDTO }) { ) : null} - - - {/* Data export / delete */} -
-

{t("cycle.settings.dataTitle")}

-

- {t("cycle.settings.dataDescription")} -

-
- - -
- - {/* Cycle-only hard purge (post-Dobbs threat model): removes every - cycle row + the cycle audit trail + reminder ledger, distinct - from the account-level delete. Two-step confirm — no accidental - destructive tap. */} -
-

- {t("cycle.settings.purgeDescription")} -

- {confirmingPurge ? ( -
- - {t("cycle.settings.purgeConfirm")} - - - -
- ) : ( - - )} - {purge.isSuccess ? ( - - {t("cycle.settings.purgeDone")} - - ) : null} - {purge.isError ? ( - - {t("cycle.settings.purgeError")} - - ) : null} -
-
+ {/* Cycle data export + delete live with the main Settings → Export and + Account surfaces (cycle rows ride the full-backup export and the + account-level delete), so the standalone affordances are not + duplicated here. */}
{update.isSuccess ? ( diff --git a/src/components/cycle/cycle-view.tsx b/src/components/cycle/cycle-view.tsx index 6e14876fc..5fd17b3dd 100644 --- a/src/components/cycle/cycle-view.tsx +++ b/src/components/cycle/cycle-view.tsx @@ -208,11 +208,11 @@ export function CycleView() { ) : null}
- {/* Compact phase-education card beneath the wheel — chip row omitted - here (compact); the full card lives on the calendar tab. */} + {/* Phase-education card beneath the wheel — the single instance, + including the "you often notice this here" chip row sourced from + the user's own symptom-by-phase history. */} {!loading && !calendarError ? ( - {!loading && !calendarError ? ( - openSheet(today)} - /> - ) : null} {loading ? ( @@ -292,6 +282,7 @@ export function CycleView() { rawChartMode={calendar.data?.profile.rawChartMode ?? false} history={history.data} fallbackDisclaimer={disclaimerText} + goal={goal} /> void; /** Ride the wheel's once-per-session reveal — no independent animation. */ animate?: boolean; - /** Compact variant beneath the wheel (tighter padding, no chip row). */ - compact?: boolean; className?: string; } @@ -64,7 +62,6 @@ export function PhaseEducationCard({ cyclesObserved, onLogToday, animate = false, - compact = false, className, }: PhaseEducationCardProps) { const { t } = useTranslations(); @@ -118,8 +115,7 @@ export function PhaseEducationCard({ aria-label={t("cycle.phaseEducation.title")} style={{ "--tile-hue": hue } as React.CSSProperties} className={cn( - "wellness-tile rounded-xl", - compact ? "px-4 py-4" : "px-5 py-5", + "wellness-tile rounded-xl px-5 py-5", animate && "wellness-tile-rise", className, )} @@ -159,10 +155,9 @@ export function PhaseEducationCard({ {t(PHASE_WHATS_HAPPENING_KEY[phase as CyclePhase])}

- {/* Zone 3 — the user's OWN clustered symptoms for this phase. The - compact variant under the wheel omits the chip row to stay light; - the calendar-tab variant shows it. */} - {!compact && chips.length > 0 ? ( + {/* Zone 3 — the user's OWN clustered symptoms for this phase + ("you often notice this here"). */} + {chips.length > 0 ? (

{t("cycle.phaseEducation.commonHere")} diff --git a/src/components/cycle/predictions-panel.tsx b/src/components/cycle/predictions-panel.tsx index 5dfd7b204..12752eb12 100644 --- a/src/components/cycle/predictions-panel.tsx +++ b/src/components/cycle/predictions-panel.tsx @@ -53,6 +53,10 @@ export interface PredictionsPanelProps { history: CycleHistoryResponse | undefined; /** Fallback disclaimer when no prediction carries one. */ fallbackDisclaimer?: string; + /** The active cycle goal — only AVOID_PREGNANCY surfaces the (deliberate) + * contraceptive-safety caveat here; every other goal drops the generic + * "predictions are estimates" line so it does not repeat under every graph. */ + goal?: string; } export function PredictionsPanel({ @@ -60,10 +64,18 @@ export function PredictionsPanel({ rawChartMode, history, fallbackDisclaimer, + goal, }: PredictionsPanelProps) { const { t } = useTranslations(); - const disclaimer = prediction?.disclaimer ?? fallbackDisclaimer ?? ""; + // Only the AVOID_PREGNANCY goal shows a disclaimer here: it surfaces the + // fertile window, so the stronger "not a contraceptive method" caveat is a + // deliberate medical safety note. For all other goals the generic + // estimate-caveat is suppressed (it already lives once with the data). + const disclaimer = + goal === "AVOID_PREGNANCY" + ? (prediction?.disclaimer ?? fallbackDisclaimer ?? "") + : ""; return (

diff --git a/src/components/cycle/use-cycle.ts b/src/components/cycle/use-cycle.ts index 8b811c1b5..4a3441386 100644 --- a/src/components/cycle/use-cycle.ts +++ b/src/components/cycle/use-cycle.ts @@ -335,27 +335,6 @@ export function useDeleteDayLog() { }); } -/** - * Hard-delete EVERY cycle row the user owns (day-logs, cycles, predictions, - * the cycle audit trail, and the cycle reminder-delivery ledger rows). The - * privacy "purge" the post-Dobbs threat model promises — distinct from the - * per-row soft-delete. Invalidates the whole cycle prefix + the nav gate. - */ -export function useDeleteAllCycleData() { - const qc = useQueryClient(); - return useMutation({ - mutationFn: async () => { - const res = await fetch("/api/cycle/all", { method: "DELETE" }); - if (!res.ok) throw new Error(`Request failed: ${res.status}`); - return unwrap<{ purged: boolean }>(res); - }, - onSuccess: () => { - void invalidateKeys(qc, cycleDependentKeys); - void qc.invalidateQueries({ queryKey: queryKeys.authMe() }); - }, - }); -} - export interface CyclePrefsPatch { enabled?: boolean; goal?: CycleProfileDTO["goal"]; diff --git a/src/components/settings/_card-header.tsx b/src/components/settings/_card-header.tsx index 1198dec7d..29d5bf0c1 100644 --- a/src/components/settings/_card-header.tsx +++ b/src/components/settings/_card-header.tsx @@ -66,22 +66,32 @@ export function SettingsCardHeader({ className, }: SettingsCardHeaderProps) { return ( -
-
-
-
diff --git a/src/components/cycle/phase-education-card.tsx b/src/components/cycle/phase-education-card.tsx index 34d104f31..8ca2b10a0 100644 --- a/src/components/cycle/phase-education-card.tsx +++ b/src/components/cycle/phase-education-card.tsx @@ -1,9 +1,8 @@ "use client"; import { useMemo } from "react"; -import { Sparkles, Plus } from "lucide-react"; +import { Sparkles } from "lucide-react"; -import { Button } from "@/components/ui/button"; import { useTranslations } from "@/lib/i18n/context"; import { cn } from "@/lib/utils"; import { PHASE_WHATS_HAPPENING_KEY } from "@/lib/cycle/phase-copy"; @@ -23,8 +22,8 @@ import type { SymptomPhaseRow } from "./use-cycle"; * never clinical advice / a medical claim), * 3. a "you often notice this here" chip row sourced from the user's OWN * symptom-by-phase history (`symptomPatterns`), filtered to symptoms that - * cluster in THIS phase — never a generic population claim — plus a - * "log today" nudge into the existing day-log sheet. + * cluster in THIS phase — never a generic population claim. Logging lives + * on the top-level log entry, so the card carries no own log button. * * Honesty gate (Clue precedent): when prediction is disabled / raw-chart mode * or fewer than three observed cycles, the predictive framing is suppressed and @@ -47,8 +46,6 @@ export interface PhaseEducationCardProps { predictionEnabled: boolean; rawChartMode: boolean; cyclesObserved: number; - /** Open the day-log sheet for today (the "log today" nudge). */ - onLogToday: () => void; /** Ride the wheel's once-per-session reveal — no independent animation. */ animate?: boolean; className?: string; @@ -60,7 +57,6 @@ export function PhaseEducationCard({ predictionEnabled, rawChartMode, cyclesObserved, - onLogToday, animate = false, className, }: PhaseEducationCardProps) { @@ -189,18 +185,6 @@ export function PhaseEducationCard({
) : null} - - {/* The "log today" nudge — opens the existing day-log sheet. */} - )} From a9f57af6022bc6262b04d30008adbafc03306fcd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Sat, 6 Jun 2026 20:47:47 +0200 Subject: [PATCH 3/4] feat(insights): cycle ring in the wellness strip, bound mood/medication calendar height MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Surface the cycle phase ring in the main Insights health-scores strip as a gated sibling tile. It reuses the cycle wheel SVG, sized to a score-ring tile, and sources day-of-cycle + phase from the same calendar read + deriveWheelState the cycle page wheel uses, so the two surfaces never disagree. Mounted only for a cycle-tracking account (the same /api/auth/me gate the sidebar nav and the cycle summary card use), so its calendar read never fires otherwise; it renders nothing while resolving, on error, and when there is no active cycle — no gap, no placeholder. Cap the adaptive cell size in the mood and medication compliance heatmaps. A short window (a single medication, a 30-day mood calendar) left only a few columns, so the container-width cell sizing ballooned and the square grid blew the tile to roughly three times its neighbours' height. The cell ceiling keeps the grid dense and left-aligned within the tile-height rhythm at mobile and desktop. --- messages/de.json | 3 + messages/en.json | 3 + messages/es.json | 3 + messages/fr.json | 3 + messages/it.json | 3 + messages/pl.json | 3 + src/app/insights/page.tsx | 19 +++ src/components/charts/compliance-heatmap.tsx | 25 +++- src/components/charts/mood-heatmap.tsx | 22 ++- .../cycle/__tests__/cycle-ring-tile.test.tsx | 134 ++++++++++++++++++ src/components/cycle/cycle-ring-tile.tsx | 127 +++++++++++++++++ .../insights/derived/wellness-scores.tsx | 29 +++- 12 files changed, 363 insertions(+), 11 deletions(-) create mode 100644 src/components/cycle/__tests__/cycle-ring-tile.test.tsx create mode 100644 src/components/cycle/cycle-ring-tile.tsx diff --git a/messages/de.json b/messages/de.json index b4de1c4bb..bed6128bc 100644 --- a/messages/de.json +++ b/messages/de.json @@ -4999,6 +4999,9 @@ "noActiveCycle": "Noch kein aktiver Zyklus", "viewDetails": "Zyklus-Erkenntnisse ansehen" }, + "wellnessRing": { + "label": "Zyklus" + }, "disclaimer": "Diese Vorhersagen sind beschreibende Schätzungen aus deinen erfassten Daten, keine Verhütungsmethode und keine medizinische Beratung. Sie zeigen nie an, dass ungeschützter Geschlechtsverkehr sicher ist. Wende dich für Verhütung oder medizinische Entscheidungen an eine medizinische Fachperson.", "title": "Dein Zyklus", "subtitle": "Erfasse deine Periode und Symptome und sieh, was als Nächstes kommt.", diff --git a/messages/en.json b/messages/en.json index 65956ba5c..d9d9a08ba 100644 --- a/messages/en.json +++ b/messages/en.json @@ -4999,6 +4999,9 @@ "noActiveCycle": "No active cycle yet", "viewDetails": "View cycle insights" }, + "wellnessRing": { + "label": "Cycle" + }, "disclaimer": "These predictions are descriptive estimates from your logged data, not a contraceptive method and not medical advice. They never indicate that it is safe to have unprotected sex. For contraception or any medical decision, consult a healthcare professional.", "title": "Your cycle", "subtitle": "Log your period and symptoms, see what comes next.", diff --git a/messages/es.json b/messages/es.json index 55eeb130d..2629b9c90 100644 --- a/messages/es.json +++ b/messages/es.json @@ -4999,6 +4999,9 @@ "noActiveCycle": "Aún no hay un ciclo activo", "viewDetails": "Ver análisis del ciclo" }, + "wellnessRing": { + "label": "Ciclo" + }, "disclaimer": "Estas predicciones son estimaciones descriptivas a partir de tus datos registrados, no un método anticonceptivo ni un consejo médico. Nunca indican que sea seguro tener relaciones sin protección. Para anticoncepción o cualquier decisión médica, consulta a un profesional sanitario.", "title": "Tu ciclo", "subtitle": "Registra tu periodo y síntomas, y mira qué viene después.", diff --git a/messages/fr.json b/messages/fr.json index ee4f7309b..f352bd636 100644 --- a/messages/fr.json +++ b/messages/fr.json @@ -4999,6 +4999,9 @@ "noActiveCycle": "Aucun cycle actif pour l'instant", "viewDetails": "Voir les analyses du cycle" }, + "wellnessRing": { + "label": "Cycle" + }, "disclaimer": "Ces prévisions sont des estimations descriptives issues de vos données enregistrées, ni une méthode de contraception ni un avis médical. Elles n'indiquent jamais qu'il est sûr d'avoir des rapports non protégés. Pour la contraception ou toute décision médicale, consultez un professionnel de santé.", "title": "Ton cycle", "subtitle": "Enregistre tes règles et symptômes, et vois ce qui arrive ensuite.", diff --git a/messages/it.json b/messages/it.json index 367a129d5..a9325f736 100644 --- a/messages/it.json +++ b/messages/it.json @@ -4999,6 +4999,9 @@ "noActiveCycle": "Nessun ciclo attivo ancora", "viewDetails": "Vedi le analisi del ciclo" }, + "wellnessRing": { + "label": "Ciclo" + }, "disclaimer": "Queste previsioni sono stime descrittive basate sui tuoi dati registrati, non un metodo contraccettivo né un parere medico. Non indicano mai che sia sicuro avere rapporti non protetti. Per la contraccezione o qualsiasi decisione medica, consulta un professionista sanitario.", "title": "Il tuo ciclo", "subtitle": "Registra il ciclo e i sintomi e scopri cosa arriva dopo.", diff --git a/messages/pl.json b/messages/pl.json index 6e5754dce..1e6fe6c4a 100644 --- a/messages/pl.json +++ b/messages/pl.json @@ -4999,6 +4999,9 @@ "noActiveCycle": "Brak aktywnego cyklu", "viewDetails": "Zobacz analizy cyklu" }, + "wellnessRing": { + "label": "Cykl" + }, "disclaimer": "Te prognozy to opisowe szacunki na podstawie zapisanych danych, a nie metoda antykoncepcji ani porada medyczna. Nigdy nie oznaczają, że współżycie bez zabezpieczenia jest bezpieczne. W sprawach antykoncepcji lub decyzji medycznych skonsultuj się z pracownikiem ochrony zdrowia.", "title": "Twój cykl", "subtitle": "Zapisuj miesiączkę i objawy oraz sprawdzaj, co dalej.", diff --git a/src/app/insights/page.tsx b/src/app/insights/page.tsx index db3a1a1ad..5018a9035 100644 --- a/src/app/insights/page.tsx +++ b/src/app/insights/page.tsx @@ -167,6 +167,19 @@ const CycleInsightSummaryCard = dynamic( { ssr: false }, ); +// v1.15.3 — the compact cycle RING, dropped into the wellness-score strip as a +// gated sibling tile (NOT the summary teaser — that stays further down). Mounted +// only for a cycle-tracking account, so its calendar read never fires otherwise. +// Deferred behind `next/dynamic`; it renders nothing while resolving / on error / +// when there is no active cycle, so it carries no loading placeholder. +const CycleRingTile = dynamic( + () => + import("@/components/cycle/cycle-ring-tile").then((mod) => ({ + default: mod.CycleRingTile, + })), + { ssr: false }, +); + /** * v1.4.25 W4d — Insights mother page. * @@ -376,6 +389,12 @@ export default function InsightsPage() { isLoading={dashboardDerived.isLoading} isError={dashboardDerived.isError} refetch={dashboardDerived.refetch} + // v1.15.3 — the cycle ring rides the scores strip as a gated sibling + // tile, only for a cycle-tracking account, so its calendar read never + // fires otherwise (the same `/api/auth/me` gate the sidebar nav uses). + extraTile={ + user?.cycleTrackingEnabled ? : undefined + } /> {flags.briefing && ( diff --git a/src/components/charts/compliance-heatmap.tsx b/src/components/charts/compliance-heatmap.tsx index 2cf347f37..c6a23e071 100644 --- a/src/components/charts/compliance-heatmap.tsx +++ b/src/components/charts/compliance-heatmap.tsx @@ -24,6 +24,14 @@ const GAP = 3; // below the touch-friendly 14 px square on narrow viewports. The // stretch branch computes an adaptive size; both branches clamp here. const CELL_FLOOR_PX = 14; +// v1.15.3 — cell-ceiling for the stretch branch. With a short window (a +// single medication / few covered weeks → only ~5 columns) the adaptive +// `containerWidth / weeks` cell ballooned to fill a wide card, and since the +// grid is square the SVG height (`7 * cellSize + 6 * GAP`) blew up to ~3× the +// neighbouring tiles. Capping the cell keeps the grid dense + left-aligned +// (extra width is whitespace) so the heatmap holds the tile-height rhythm: +// height ≈ 18 + 7·22 + 6·3 = 190 px, in line with the surrounding tiles. +const CELL_CEIL_PX = 22; function getColor(data: DailyData): string { if (data.expected === 0) return "var(--secondary)"; @@ -229,10 +237,13 @@ export function ComplianceHeatmap({ // narrows. Static (non-stretch) instances use the canonical 18 px. const cellSize = stretch && containerWidth > 0 - ? Math.max( - CELL_FLOOR_PX, - (containerWidth - labelWidth - Math.max(0, weeks - 1) * GAP) / - Math.max(weeks, 1), + ? Math.min( + CELL_CEIL_PX, + Math.max( + CELL_FLOOR_PX, + (containerWidth - labelWidth - Math.max(0, weeks - 1) * GAP) / + Math.max(weeks, 1), + ), ) : CELL_SIZE; const step = cellSize + GAP; @@ -253,7 +264,11 @@ export function ComplianceHeatmap({ setTooltip((prev) => (prev?.pinned ? prev : null))} > {/* Month labels */} diff --git a/src/components/charts/mood-heatmap.tsx b/src/components/charts/mood-heatmap.tsx index 35bf3fc28..c5fd04019 100644 --- a/src/components/charts/mood-heatmap.tsx +++ b/src/components/charts/mood-heatmap.tsx @@ -35,6 +35,12 @@ interface MoodHeatmapProps { const CELL_SIZE = 18; const GAP = 3; const CELL_FLOOR_PX = 14; +// v1.15.3 — cell-ceiling for the stretch branch. A short window (few covered +// weeks → only ~5 columns) drove the adaptive `containerWidth / weeks` cell to +// fill a wide card; since the grid is square the SVG height blew up to ~3× the +// neighbouring tiles. Capping the cell keeps the grid dense + left-aligned so +// the calendar holds the tile-height rhythm. Mirrors `compliance-heatmap.tsx`. +const CELL_CEIL_PX = 22; /** * Mood score band → Dracula colour. Mirrors `mood-chart.tsx` VALUE_BANDS @@ -183,10 +189,13 @@ export function MoodHeatmap({ const headerHeight = 18; const cellSize = stretch && containerWidth > 0 - ? Math.max( - CELL_FLOOR_PX, - (containerWidth - labelWidth - Math.max(0, weeks - 1) * GAP) / - Math.max(weeks, 1), + ? Math.min( + CELL_CEIL_PX, + Math.max( + CELL_FLOOR_PX, + (containerWidth - labelWidth - Math.max(0, weeks - 1) * GAP) / + Math.max(weeks, 1), + ), ) : CELL_SIZE; const step = cellSize + GAP; @@ -205,7 +214,10 @@ export function MoodHeatmap({ setTooltip((prev) => (prev?.pinned ? prev : null))} > {monthMarkers.map((m, i) => ( diff --git a/src/components/cycle/__tests__/cycle-ring-tile.test.tsx b/src/components/cycle/__tests__/cycle-ring-tile.test.tsx new file mode 100644 index 000000000..42d7d1d12 --- /dev/null +++ b/src/components/cycle/__tests__/cycle-ring-tile.test.tsx @@ -0,0 +1,134 @@ +import { describe, it, expect, vi, beforeEach } from "vitest"; +import { renderToStaticMarkup } from "react-dom/server"; + +import { I18nProvider } from "@/lib/i18n/context"; +import type { CalendarResponse } from "../types"; + +/** + * v1.15.3 — the compact cycle ring as a wellness-strip tile. + * + * The tile is mounted ONLY when `user.cycleTrackingEnabled` is true (a + * page-level gate the Insights page owns, mirroring the summary card); these + * tests cover the tile's own behaviour given that gate: it sources the phase + + * cycle day from the SAME calendar read + `deriveWheelState` the wheel uses, + * renders the cycle ring labelled, deep-links to the cycle page, and stays + * silent while resolving / on a hard error / when there is no active cycle so + * the wellness strip never shows a half-painted dial (no gap, no placeholder). + * + * The calendar read is mocked at the hook boundary so the SSR snapshot is + * deterministic without a TanStack-Query client / network round-trip. + */ + +// `next/link` → a plain anchor in the static snapshot. +vi.mock("next/link", () => ({ + default: ({ + href, + children, + ...rest + }: { + href: string; + children: React.ReactNode; + }) => ( + + {children} + + ), +})); + +const calendarState = vi.hoisted(() => ({ + current: { + data: undefined as CalendarResponse | undefined, + isLoading: false, + isError: false, + }, +})); + +vi.mock("../use-cycle", async () => { + const actual = + await vi.importActual("../use-cycle"); + return { + ...actual, + useCycleCalendar: () => calendarState.current, + }; +}); + +import { CycleRingTile } from "../cycle-ring-tile"; + +function render(node: React.ReactNode) { + return renderToStaticMarkup( + {node}, + ); +} + +/** A calendar read where `today` sits on a LUTEAL day at day-of-cycle 3. */ +function lutealCalendar(today: string): CalendarResponse { + const days = [ + { date: shift(today, -2), phase: "MENSTRUAL" as const }, + { date: shift(today, -1), phase: "FOLLICULAR" as const }, + { date: today, phase: "LUTEAL" as const }, + ]; + return { + days: days as unknown as CalendarResponse["days"], + profile: {} as CalendarResponse["profile"], + prediction: null, + } as CalendarResponse; +} + +function shift(ymd: string, delta: number): string { + const [y, m, d] = ymd.split("-").map(Number); + const dt = new Date(y, m - 1, d); + dt.setDate(dt.getDate() + delta); + return `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(2, "0")}-${String(dt.getDate()).padStart(2, "0")}`; +} + +function todayYmd(): string { + const d = new Date(); + return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`; +} + +beforeEach(() => { + calendarState.current = { data: undefined, isLoading: false, isError: false }; +}); + +describe("", () => { + it("renders the cycle ring, phase label, and deep-link for an active cycle", () => { + calendarState.current = { + data: lutealCalendar(todayYmd()), + isLoading: false, + isError: false, + }; + + const html = render(); + + // The wellness-strip tile chrome + the compact cycle ring. + expect(html).toContain('data-slot="wellness-cycle-tile"'); + expect(html).toContain('data-slot="cycle-ring"'); + expect(html).toContain('data-phase="LUTEAL"'); + // The phase band word + the strip-tile label. + expect(html).toContain("Luteal"); + expect(html).toContain("Cycle"); + // Deep-link into the cycle page. + expect(html).toContain('href="/cycle"'); + }); + + it("renders nothing while the calendar read is still resolving", () => { + calendarState.current = { data: undefined, isLoading: true, isError: false }; + expect(render()).toBe(""); + }); + + it("renders nothing on a hard calendar read error", () => { + calendarState.current = { data: undefined, isLoading: false, isError: true }; + expect(render()).toBe(""); + }); + + it("renders nothing when there is no active cycle today", () => { + // A resolved calendar with no phase on today → no active cycle. + const empty: CalendarResponse = { + days: [] as unknown as CalendarResponse["days"], + profile: {} as CalendarResponse["profile"], + prediction: null, + } as CalendarResponse; + calendarState.current = { data: empty, isLoading: false, isError: false }; + expect(render()).toBe(""); + }); +}); diff --git a/src/components/cycle/cycle-ring-tile.tsx b/src/components/cycle/cycle-ring-tile.tsx new file mode 100644 index 000000000..0285f192f --- /dev/null +++ b/src/components/cycle/cycle-ring-tile.tsx @@ -0,0 +1,127 @@ +"use client"; + +import { useMemo, useState } from "react"; +import Link from "next/link"; +import { Droplets } from "lucide-react"; + +import { cn } from "@/lib/utils"; +import { useTranslations } from "@/lib/i18n/context"; +import { CycleRing } from "./cycle-ring"; +import { PHASE_HUE } from "./phase-tokens"; +import { deriveWheelState } from "./wheel-state"; +import { localYmd, useCycleCalendar } from "./use-cycle"; + +/** + * v1.15.3 — the compact cycle ring as a WELLNESS-STRIP element. + * + * A same-size sibling tile that drops into the main Insights "Your health + * scores" grid (``), so the cycle phase reads as part of the + * premium scores strip rather than bolted-on below it. It reuses the SAME + * `` SVG the cycle page wheel uses, sized down to match a + * `ScoreRing size="sm"` (≈120 px) so the dial sits in the strip's tile + * rhythm; the tile chrome (hue-tinted `wellness-tile`, icon header, once-per- + * session reveal) mirrors the score `RingTile` exactly. + * + * It is NOT a second `` — that teaser (phase finding + + * deep-link) already lives further down the overview. This is the RING only, + * as a wellness dial. Both surfaces derive day-of-cycle + phase from the SAME + * `useCycleCalendar` read + `deriveWheelState`, so they can never disagree. + * + * GATING IS THE CALLER'S JOB. The page mounts this only when + * `user.cycleTrackingEnabled` is true (the same `/api/auth/me` signal the + * sidebar-nav entry + the summary card gate on), so the cycle read never fires + * for an account without the feature. The tile additionally renders nothing + * while the calendar read resolves, on a hard error, and when there is no + * active cycle phase today — never an empty-framed or half-painted dial in the + * strip (no gap, no placeholder). + */ + +/** YYYY-MM-DD for `n` days from now in the local tz (shares `localYmd`). */ +function shiftToday(days: number): string { + const d = new Date(); + d.setDate(d.getDate() + days); + return localYmd(d); +} + +export function CycleRingTile({ className }: { className?: string }) { + const { t } = useTranslations(); + + // Mirror the cycle-view + summary-card window so the cache key is shared — + // no extra request when the user opens the cycle page in the same session. + const today = useMemo(() => shiftToday(0), []); + const from = useMemo(() => shiftToday(-90), []); + const to = useMemo(() => shiftToday(180), []); + + const calendar = useCycleCalendar(from, to); + + const wheel = useMemo( + () => deriveWheelState(calendar.data?.days ?? [], today), + [calendar.data, today], + ); + + // The signature reveal plays ONCE per browser session, gated on its own key + // so a background calendar refetch never re-triggers the moment. The + // reduced-motion zeroing lives inside ``. + const [play] = useState(() => { + if (typeof window === "undefined") return false; + try { + if (sessionStorage.getItem("cycle-strip-ring-revealed")) return false; + sessionStorage.setItem("cycle-strip-ring-revealed", "1"); + return true; + } catch { + return true; + } + }); + + // Stay silent until the read resolves, on a hard error, and when today has + // no phase (no active cycle) — the strip must never show a half-painted or + // empty-framed cycle dial. The full cycle page owns the empty-state CTA. + if (calendar.isLoading && !calendar.data) return null; + if (calendar.isError && !calendar.data) return null; + if (wheel.phase == null || wheel.dayOfCycle == null) return null; + + const hue = PHASE_HUE[wheel.phase]; + + return ( + +
+
+
+ + + {t(`cycle.phase.${wheel.phase}`)} + +
+ + ); +} diff --git a/src/components/insights/derived/wellness-scores.tsx b/src/components/insights/derived/wellness-scores.tsx index d7e147803..2a04a4623 100644 --- a/src/components/insights/derived/wellness-scores.tsx +++ b/src/components/insights/derived/wellness-scores.tsx @@ -47,6 +47,16 @@ interface ScoreStripProps { isError?: boolean; /** Refetch the one shared batch query. Recovers both strips at once. */ refetch?: () => void; + /** + * An optional extra tile rendered as the LAST sibling inside the same scores + * grid (e.g. the gated cycle ring). It participates in the column-count math + * so it never leaves a dangling empty cell, and it keeps the strip mounted + * even when no wellness score has data (a cycle-only account still sees its + * dial). The caller owns the gating — the strip just slots whatever it gets. + * The element is expected to render `null` on its own when it has nothing to + * show, so the strip subtracts it from the count in that case. + */ + extraTile?: React.ReactNode; className?: string; } @@ -149,6 +159,7 @@ export function WellnessScores({ isLoading, isError = false, refetch, + extraTile, className, }: ScoreStripProps) { const { t } = useTranslations(); @@ -310,7 +321,23 @@ export function WellnessScores({ ); } - // Whole strip un-mounts when no score has data — never an empty section. + // The optional caller-supplied tile (e.g. the gated cycle ring) slots in as + // the last sibling. It is counted toward the grid column math so it never + // leaves a dangling cell, and its presence keeps the strip mounted even when + // no wellness score has data (a cycle-only account still sees its dial). The + // tile renders `null` on its own when it has nothing to show; the grid has + // no background, so a transient empty trailing cell shows nothing — never a + // "missing tile" frame. + if (extraTile != null) { + tiles.push( +
+ {extraTile} +
, + ); + } + + // Whole strip un-mounts when no score has data AND no extra tile — never an + // empty section. if (tiles.length === 0) return null; // v1.12.4 — the strip used a fixed `lg:grid-cols-5`, so the common case of From 6bc2294f59dda3ec532f1846f83af7929ea97476 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Sat, 6 Jun 2026 20:49:16 +0200 Subject: [PATCH 4/4] =?UTF-8?q?chore(release):=20v1.15.4=20=E2=80=94=20cyc?= =?UTF-8?q?le=20and=20insights=20polish?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 16 +++++++++++++++- docs/api/openapi.yaml | 2 +- package.json | 2 +- 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1cdff5f88..88175601c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,21 @@ ## [Unreleased] -## [1.15.3] — 2026-06-06 — cycle summary on the insights page +## [1.15.4] — 2026-06-06 — cycle and insights polish + +### Added + +- **Your cycle ring in the health-scores strip.** With cycle tracking on, the Insights health-scores row now includes your cycle ring — current phase and day — alongside the other scores. It shows only when cycle tracking is enabled. + +### Changed + +- **A calmer cycle calendar and cards.** Predicted-period days are now a soft filled marker instead of a thin underline; the "what's happening now" card sits only under the ring (no duplicate above the calendar) and drops its own log button since logging is one tap away at the top; and the predictions and insights tabs lost their repeated "estimates / associations" footers (the caveat is stated once, where it matters). +- **Tidier settings.** Section descriptions line up under their headings; the web-push enable action sits in the card header; and the standalone cycle-data export/delete actions are gone from the cycle settings (cycle data is already in the full export). +- **Calendar tiles keep their size.** The mood and medication calendar tiles no longer balloon to several times the height of their neighbours when only a short window or a single medication is shown. + +### Fixed + +- **Per-score explanations load faster.** The dashboard's batch read now carries each score's deterministic explanation, so the score sheets show their "why" without an extra request. ### Added diff --git a/docs/api/openapi.yaml b/docs/api/openapi.yaml index bf6491b75..36661381f 100644 --- a/docs/api/openapi.yaml +++ b/docs/api/openapi.yaml @@ -1,7 +1,7 @@ openapi: 3.1.0 info: title: HealthLog API - version: 1.15.3 + version: 1.15.4 description: >- Self-hosted personal-health-tracking PWA — public API surface for the iOS native client and external ingest. diff --git a/package.json b/package.json index 9d3adb397..af54c63f9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "healthlog", - "version": "1.15.3", + "version": "1.15.4", "description": "Self-hosted personal-health-tracking PWA with Withings integration, AI insights, and doctor-report PDF export.", "license": "AGPL-3.0-only", "homepage": "https://healthlog.dev",