From c3dff2c3881a5ead731a701f0e0e5c8eb2f84619 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Fri, 9 Oct 2026 08:54:11 +0200 Subject: [PATCH] feat(day): collapse the docked day to an edge instead of closing it From 1280 px the day sits beside the page, and its control at the top left took it away entirely: after a page change there was no way back to the day short of finding it again. The control now hides the day the way a sidebar collapses. A narrow edge stays on the right, holding the date, with a button that opens the last day again on this page or any other. Focus lands on that button when the day collapses and on the day's heading when it comes back. The last open day is remembered per browser, bound to the account and the record it was read in, and removed at every session end. The Coach button keeps clear of the edge as it does of the open day. Sheets below 1280 px and on phones close as before, and Back still closes them. --- e2e/day-doors.spec.ts | 12 +- e2e/day-view.spec.ts | 67 ++++++++- messages/de.json | 2 + messages/en.json | 2 + messages/es.json | 2 + messages/fr.json | 2 + messages/it.json | 2 + messages/ko.json | 2 + messages/pl.json | 2 + .../day/__tests__/day-view.test.tsx | 16 +- src/components/day/day-layer.tsx | 140 +++++++++++++++++- src/components/day/day-view.tsx | 22 +-- src/components/insights/layout-coach-fab.tsx | 3 + .../__tests__/use-auth-session-clear.test.ts | 12 ++ src/hooks/use-auth.ts | 3 + src/lib/day/__tests__/last-day.test.ts | 75 ++++++++++ src/lib/day/last-day.ts | 113 ++++++++++++++ 17 files changed, 457 insertions(+), 20 deletions(-) create mode 100644 src/lib/day/__tests__/last-day.test.ts create mode 100644 src/lib/day/last-day.ts diff --git a/e2e/day-doors.spec.ts b/e2e/day-doors.spec.ts index 357e2773c..c650f5c81 100644 --- a/e2e/day-doors.spec.ts +++ b/e2e/day-doors.spec.ts @@ -266,7 +266,7 @@ test.describe("the dashboard and the list of all values", () => { ); }); - test("the docked day moves the Coach button off its footer", async ({ + test("the docked day, open or collapsed, moves the Coach button off it", async ({ page, }, testInfo) => { test.skip(isPhone(testInfo), "docked from 1280 px"); @@ -290,6 +290,16 @@ test.describe("the dashboard and the list of all values", () => { return b.x + b.width; }) .toBeLessThanOrEqual(panelBox.x); + + // Collapsed, the day keeps a narrow edge; the launcher stays clear of it. + await page.locator('[data-slot="day-close"]').click(); + const edge = (await page.locator('[data-slot="day-rail"]').boundingBox())!; + await expect + .poll(async () => { + const b = (await fab.boundingBox())!; + return b.x + b.width; + }) + .toBeLessThanOrEqual(edge.x); }); }); diff --git a/e2e/day-view.spec.ts b/e2e/day-view.spec.ts index 6a04b16f0..679e57884 100644 --- a/e2e/day-view.spec.ts +++ b/e2e/day-view.spec.ts @@ -21,11 +21,14 @@ import { MOBILE_ROUTES_ANALYTE } from "./setup/mobile-routes-fixture"; * - `?day=` opens the layer on any page, Back and Escape close it, a date in * the future is dropped; * - stepping to the neighbouring days never adds history entries; + * - docked, the day collapses to a narrow edge that brings it back on any + * page; a sheet closes for good; * - the dashboard's today area offers no door; its charts below do. * * Stable data attributes only: `day-panel` (+ `data-shell`), `day-link`, * `chart-plot[data-day-links]`, `chart-tooltip-open-day`, `day-prev` / - * `day-next` / `day-close`. + * `day-next` / `day-close`, and the collapsed edge `day-rail` (+ `data-day`) + * with its `day-expand`. */ const panel = (page: Page) => page.locator('[data-slot="day-panel"]'); @@ -117,6 +120,68 @@ test.describe("the day view", () => { await expect(page).toHaveURL(/\/mood$/); }); + test("the docked day collapses to an edge and comes back on another page", async ({ + page, + }, testInfo) => { + test.skip( + testInfo.project.name !== "chromium-desktop", + "docked from 1280 px", + ); + const day = isoDaysAgo(3); + await page.goto(`/mood?day=${day}`); + await expect(panel(page)).toHaveAttribute("data-shell", "docked"); + + await page.locator('[data-slot="day-close"]').click(); + await expect(panel(page)).toHaveCount(0); + await expect(page).toHaveURL(/\/mood$/); + // A narrow edge stays, holding the day, and focus waits on its button. + const rail = page.locator('[data-slot="day-rail"]'); + const expand = page.locator('[data-slot="day-expand"]'); + await expect(rail).toHaveAttribute("data-day", day); + await expect(expand).toBeFocused(); + await expect(expand).toHaveAttribute("aria-expanded", "false"); + expect(await expand.getAttribute("aria-label")).toMatch(/^Show /); + expect((await rail.boundingBox())!.width).toBeLessThanOrEqual(48); + + // Another page: the edge is still there and brings the same day back, + // from the keyboard too. + await page.goto("/labs"); + await expect(rail).toHaveAttribute("data-day", day); + await expand.focus(); + await page.keyboard.press("Enter"); + await expect(panel(page)).toHaveAttribute("data-shell", "docked"); + await expect(page.locator('[data-slot="day-view"]')).toHaveAttribute( + "data-day", + day, + ); + await expect(page).toHaveURL(new RegExp(`/labs\\?day=${day}$`)); + await expect(panel(page).locator("h2").first()).toBeFocused(); + await expect(rail).toHaveCount(0); + }); + + test("a sheet closes for good and leaves no edge behind", async ({ + page, + }, testInfo) => { + const desktop = testInfo.project.name === "chromium-desktop"; + // Below 1280 px the day is a sheet from the right; on a phone, from the + // bottom. Neither collapses. + if (desktop) await page.setViewportSize({ width: 1024, height: 800 }); + const day = isoDaysAgo(3); + await page.goto(`/mood?day=${day}`); + await expect(panel(page)).toHaveAttribute( + "data-shell", + desktop ? "sheet" : "bottom", + ); + await expect(page.locator('[data-slot="day-close"]')).toHaveAttribute( + "aria-label", + "Close day", + ); + await page.locator('[data-slot="day-close"]').click(); + await expect(panel(page)).toHaveCount(0); + await expect(page).toHaveURL(/\/mood$/); + await expect(page.locator('[data-slot="day-rail"]')).toHaveCount(0); + }); + test("a future or malformed ?day= is dropped without a word", async ({ page, }) => { diff --git a/messages/de.json b/messages/de.json index b7cc77b50..84b126d51 100644 --- a/messages/de.json +++ b/messages/de.json @@ -12207,6 +12207,8 @@ "previousDay": "Vortag", "nextDay": "Folgetag", "close": "Tag schließen", + "hidePanel": "Tag ausblenden", + "showPanel": "{date} einblenden", "openDay": "Tag öffnen", "viewWholeDay": "Ganzen Tag ansehen", "captureForDay": "Für diesen Tag erfassen", diff --git a/messages/en.json b/messages/en.json index bdea7e6a7..ad96b368e 100644 --- a/messages/en.json +++ b/messages/en.json @@ -12207,6 +12207,8 @@ "previousDay": "Previous day", "nextDay": "Next day", "close": "Close day", + "hidePanel": "Hide day", + "showPanel": "Show {date}", "openDay": "Open day", "viewWholeDay": "View the whole day", "captureForDay": "Add for this day", diff --git a/messages/es.json b/messages/es.json index 3e9806ff9..349a397ba 100644 --- a/messages/es.json +++ b/messages/es.json @@ -12207,6 +12207,8 @@ "previousDay": "Día anterior", "nextDay": "Día siguiente", "close": "Cerrar día", + "hidePanel": "Ocultar día", + "showPanel": "Mostrar {date}", "openDay": "Abrir día", "viewWholeDay": "Ver el día completo", "captureForDay": "Registrar para este día", diff --git a/messages/fr.json b/messages/fr.json index 4ffa3c91a..9e484dfbf 100644 --- a/messages/fr.json +++ b/messages/fr.json @@ -12207,6 +12207,8 @@ "previousDay": "Jour précédent", "nextDay": "Jour suivant", "close": "Fermer le jour", + "hidePanel": "Masquer le jour", + "showPanel": "Afficher {date}", "openDay": "Ouvrir le jour", "viewWholeDay": "Voir toute la journée", "captureForDay": "Saisir pour ce jour", diff --git a/messages/it.json b/messages/it.json index 7fb859048..3cd58750b 100644 --- a/messages/it.json +++ b/messages/it.json @@ -12207,6 +12207,8 @@ "previousDay": "Giorno precedente", "nextDay": "Giorno successivo", "close": "Chiudi giorno", + "hidePanel": "Nascondi giorno", + "showPanel": "Mostra {date}", "openDay": "Apri giorno", "viewWholeDay": "Vedi l’intera giornata", "captureForDay": "Registra per questo giorno", diff --git a/messages/ko.json b/messages/ko.json index 3405b2f39..5d5956d00 100644 --- a/messages/ko.json +++ b/messages/ko.json @@ -12207,6 +12207,8 @@ "previousDay": "전날", "nextDay": "다음 날", "close": "하루 닫기", + "hidePanel": "하루 숨기기", + "showPanel": "{date} 보기", "openDay": "하루 열기", "viewWholeDay": "하루 전체 보기", "captureForDay": "이 날에 기록하기", diff --git a/messages/pl.json b/messages/pl.json index 7100d719b..c8d6bc240 100644 --- a/messages/pl.json +++ b/messages/pl.json @@ -12207,6 +12207,8 @@ "previousDay": "Poprzedni dzień", "nextDay": "Następny dzień", "close": "Zamknij dzień", + "hidePanel": "Ukryj dzień", + "showPanel": "Pokaż {date}", "openDay": "Otwórz dzień", "viewWholeDay": "Zobacz cały dzień", "captureForDay": "Dodaj dla tego dnia", diff --git a/src/components/day/__tests__/day-view.test.tsx b/src/components/day/__tests__/day-view.test.tsx index 310db7133..038aa97ee 100644 --- a/src/components/day/__tests__/day-view.test.tsx +++ b/src/components/day/__tests__/day-view.test.tsx @@ -146,6 +146,7 @@ async function render( date: string; today: string; focus: unknown; + shell: "docked" | "sheet" | "bottom"; }> = {}, ) { const { I18nProvider } = await import("@/lib/i18n/context"); @@ -156,7 +157,7 @@ async function render( date={props.date ?? "2026-01-03"} today={props.today ?? "2026-10-08"} focus={(props.focus as never) ?? null} - shell="docked" + shell={props.shell ?? "docked"} onClose={() => undefined} onStep={() => undefined} Title={(p) =>

} @@ -232,6 +233,19 @@ describe("", () => { expect(leave).not.toContain("FAMILY"); }); + it("collapses the docked day and closes a sheet, and says which", async () => { + const docked = await render(); + const hide = docked.match(/]*data-slot="day-close"[^>]*>/)?.[0]; + expect(hide).toContain('aria-label="Hide day"'); + expect(hide).toContain('aria-expanded="true"'); + for (const shell of ["sheet", "bottom"] as const) { + const sheet = await render({ shell }); + const close = sheet.match(/]*data-slot="day-close"[^>]*>/)?.[0]; + expect(close).toContain('aria-label="Close day"'); + expect(close).not.toContain("aria-expanded"); + } + }); + it("folds the blood pressure into one tile on its number line", async () => { const html = await render(); expect(html).toContain('data-type="BLOOD_PRESSURE"'); diff --git a/src/components/day/day-layer.tsx b/src/components/day/day-layer.tsx index d2a002d75..ea8f5cc73 100644 --- a/src/components/day/day-layer.tsx +++ b/src/components/day/day-layer.tsx @@ -12,21 +12,32 @@ import { useSyncExternalStore, } from "react"; +import { PanelRightOpen } from "lucide-react"; + import { ShellSidePanel } from "@/components/layout/shell-side-panel"; import { SHELL_HEADER_BAND } from "@/components/layout/shell-metrics"; +import { Button } from "@/components/ui/button"; import { Sheet, SheetContent, SheetDescription, SheetTitle, } from "@/components/ui/sheet"; +import { useAuth } from "@/hooks/use-auth"; import { useIsMobile } from "@/hooks/use-is-mobile"; import { DAY_QUERY_PARAM, type DateKey } from "@/lib/day/contract"; +import { + readLastDay, + subscribeLastDay, + writeLastDay, +} from "@/lib/day/last-day"; +import { getRecordScope } from "@/lib/query-keys/record-scope"; import { useTranslations } from "@/lib/i18n/context"; import { cn } from "@/lib/utils"; import { closeDay, + openDay, peekDayTriggerAt, publishOpenDay, stepDay, @@ -34,7 +45,12 @@ import { useDayFocus, } from "./day-layer-controller"; import { parseDayParam, shiftDateKey, withDayHref } from "./day-url"; -import { DayView, useLongDayLabel } from "./day-view"; +import { + DayView, + PANEL_TOGGLE, + PANEL_TOGGLE_ICON, + useLongDayLabel, +} from "./day-view"; import { usePrefetchDay } from "./use-day"; import { useTodayKey } from "./use-today-key"; @@ -47,7 +63,10 @@ import { useTodayKey } from "./use-today-key"; * - from 1280 px, a column docked beside the page, the same place and the * same breakpoint as the Coach's conversations panel. Not modal: the * chart beside it stays usable, and another point swaps the day. It is a - * landmark (`complementary`) named by the date. + * landmark (`complementary`) named by the date. It collapses like a + * sidebar instead of going away: hidden, a narrow edge stays on the + * right with a button that brings the last day back, on this page or any + * other (`last-day.ts` remembers it per browser and account). * - from 768 px, a sheet from the right, modal. * - on a phone, a sheet from the bottom at a bit over half the height, so * the chart stays in view above it; dragging the handle up (or tapping @@ -57,7 +76,9 @@ import { useTodayKey } from "./use-today-key"; * there is never more than one docked panel: the day opens as a sheet there. * * The parameter is the state. A date that is not a calendar date, or lies in - * the future, is removed from the URL without a word. + * the future, is removed from the URL without a word. Collapsing the docked + * day removes the parameter like closing does; only the remembered date + * stays, and expanding opens it again. */ export function DayLayerMount() { // `useSearchParams` suspends a statically rendered route until the client @@ -120,6 +141,18 @@ function DayLayer() { }, [date]); useEffect(() => () => publishOpenDay(null), []); + // The last open day, bound to the account and the record it belongs to. + const { user } = useAuth(); + const owner = user ? `${user.id}:${getRecordScope() ?? "own"}` : null; + useEffect(() => { + if (date !== null && owner !== null) writeLastDay(owner, date); + }, [date, owner]); + const lastDay = useSyncExternalStore( + subscribeLastDay, + () => readLastDay(owner), + () => null, + ); + const wide = useWideViewport(); const phone = useIsMobile(); const shell: "docked" | "sheet" | "bottom" = phone @@ -136,9 +169,27 @@ function DayLayer() { const prefetchDay = usePrefetchDay(); const focus = useDayFocus(date); const longLabel = useLongDayLabel(); + const shortLabel = useLongDayLabel("short"); + const { t } = useTranslations(); const titleId = useId(); const titleRef = useRef(null); const panelRef = useRef(null); + const expandRef = useRef(null); + // Set by the collapse control: focus then lands on the control that + // brings the day back, in the same place, as a sidebar's toggle does. + const collapsing = useRef(false); + + // The collapsed edge: the docked frame only, and only with a day to bring + // back that is still a day the layer would open. + const railDay = + shell === "docked" && date === null && lastDay !== null + ? parseDayParam(lastDay, today) + : null; + + const collapse = useCallback(() => { + collapsing.current = true; + closeDay(); + }, []); // What the polite region says: the day that just opened or was stepped to. const announcement = date !== null ? longLabel(date) : ""; @@ -154,7 +205,16 @@ function DayLayer() { } return; } - if (before !== null && shell === "docked") returnFocus(); + if (before !== null && shell === "docked") { + const rail = expandRef.current; + if (collapsing.current && rail) { + takeDayTrigger(); + rail.focus({ preventScroll: true }); + } else { + returnFocus(rail); + } + } + collapsing.current = false; }, [date, shell]); const onStep = useCallback( @@ -213,7 +273,64 @@ function DayLayer() {

); - if (date === null) return live; + if (date === null) { + if (railDay === null) return live; + const label = t("day.showPanel", { date: longLabel(railDay) }); + const expand = () => + openDay(railDay, { trigger: expandRef.current ?? undefined }); + return ( + <> + {live} + +
+ {/* The top bar's band, so the two bottom borders draw one line; + the control sits where the open day keeps its own. */} +
+ +
+ {/* The rest of the edge takes a click too and names the day it + holds; the keyboard has the button above. */} + +
+ + + ); + } const view = ( Title: Parameters[0]["Title"], @@ -224,7 +341,7 @@ function DayLayer() { today={today} focus={focus} shell={shell} - onClose={closeDay} + onClose={shell === "docked" ? collapse : closeDay} onStep={onStep} Title={Title} titleId={titleId} @@ -334,13 +451,20 @@ function DockedTitle({ return

; } -/** Return focus to whatever opened the day, or to the page. */ -function returnFocus() { +/** + * Return focus to whatever opened the day; failing that, to `fallback` (the + * collapsed edge's control), or to the page. + */ +function returnFocus(fallback?: HTMLElement | null) { const trigger = takeDayTrigger(); if (trigger && trigger.isConnected) { trigger.focus({ preventScroll: true }); return; } + if (fallback && fallback.isConnected) { + fallback.focus({ preventScroll: true }); + return; + } document.getElementById("main-content")?.focus({ preventScroll: true }); } diff --git a/src/components/day/day-view.tsx b/src/components/day/day-view.tsx index 14ee0b7ac..dbe4c8baa 100644 --- a/src/components/day/day-view.tsx +++ b/src/components/day/day-view.tsx @@ -96,14 +96,15 @@ const ICON_BUTTON = "text-muted-foreground hover:text-foreground size-11 shrink-0 pointer-fine:size-9"; /** - * The close control is the Coach panel's own toggle, in the same place: the - * panel's top-left corner, the panel icon mirrored so it points the way the - * panel goes. Same size and glyph as `PANEL_HEADER_BUTTON` there (kept as a - * copy so the day layer does not pull the Coach's panel into the shell). + * The collapse control is the Coach panel's own toggle, in the same place: + * the panel's top-left corner, the panel icon mirrored so it points the way + * the panel goes. Same size and glyph as `PANEL_HEADER_BUTTON` there (kept as + * a copy so the day layer does not pull the Coach's panel into the shell). + * The collapsed edge's control in `day-layer.tsx` takes the same pair. */ -const PANEL_TOGGLE = +export const PANEL_TOGGLE = "text-muted-foreground hover:text-foreground size-11 shrink-0 pointer-fine:size-7"; -const PANEL_TOGGLE_ICON = "size-5 pointer-fine:size-4"; +export const PANEL_TOGGLE_ICON = "size-5 pointer-fine:size-4"; export function DayView({ date, @@ -178,6 +179,7 @@ export function DayView({ ].join(" · ") : null; const compact = shell === "bottom"; + const closeLabel = shell === "docked" ? t("day.hidePanel") : t("day.close"); return (
- {/* Top left, where the Coach panel keeps its toggle: the way out. */} + {/* Top left, where the Coach panel keeps its toggle: the way out. + Docked, it collapses the day to the edge; a sheet closes. */}