diff --git a/docs/superpowers/specs/2026-03-23-pagination-day-grouping-design.md b/docs/superpowers/specs/2026-03-23-pagination-day-grouping-design.md index 0f41b07..bd8c6bf 100644 --- a/docs/superpowers/specs/2026-03-23-pagination-day-grouping-design.md +++ b/docs/superpowers/specs/2026-03-23-pagination-day-grouping-design.md @@ -19,8 +19,10 @@ Add an `offset` query parameter (default `0`) to the existing endpoint. Works wi GET /api/sessions?filter=default&limit=5&offset=10 ``` +**Offset validation:** Non-numeric or negative values are clamped to 0. An offset past the end returns an empty array (the pagination bar will show "Page X of Y" and the user can navigate back). + **New response header:** -- `X-Prev-Last-Date` โ€” When `offset > 0`, the `created_at` timestamp of the session immediately before the current page (the session at position `offset - 1`). Used by the frontend to detect whether the first day group on the current page is a continuation from the previous page. Omitted when `offset` is 0. +- `X-Prev-Last-Date` โ€” When `offset > 0`, the raw SQLite `created_at` timestamp (same format as `created_at` in response body, e.g. `"2026-03-23 19:30:00"`) of the session immediately before the current page (the session at position `offset - 1`). Used by the frontend to detect whether the first day group on the current page is a continuation from the previous page. Omitted when `offset` is 0. The frontend parses this with the existing `parseUTCTimestamp` utility. **SQL changes:** Add `OFFSET` clause to the existing query. For `X-Prev-Last-Date`, run a small secondary query to fetch the `created_at` of the session at position `offset - 1` (same filter/ordering). @@ -54,7 +56,7 @@ Changing `filter`, `limit`, or entering/exiting `selectMode` resets `page` to 1. Group the flat session array by local calendar date at render time. For each group: -1. **Day header bar** โ€” Styled with `bg-[#1e2a3a]` (dark) / `bg-gray-100` (light), left border accent (`border-l-3 border-indigo-500`), contains: +1. **Day header bar** โ€” Styled with `bg-[#1e2a3a]` (dark) / `bg-gray-100` (light), left border accent (`border-l-[3px] border-indigo-500`), contains: - Full date: "Sunday, Mar 23, 2026" - Right side: session count ("2 sessions") and, if Sunday, "๐ŸŽฒ Game Night" 2. **Session cards** โ€” Indented slightly (`ml-3`) beneath their day header. Display **time only** (e.g., "7:30 PM") since the full date is in the header. Remove the per-card "ยท Sunday" text and per-card "๐ŸŽฒ Game Night" badge since that information is now on the day header. @@ -80,6 +82,10 @@ Layout: `โ† Prev` button | "Page X of Y" text | `Next โ†’` button Day header bars are not selectable. Only session cards participate in multi-select. Checkboxes render inside the indented card area as they do today. Changing pages clears selected IDs but keeps select mode active. +### Polling behavior + +The existing 3-second polling interval refetches the current page (same offset/limit/filter). If sessions are deleted while the user is on a later page and the page becomes empty, the next poll cycle detects `sessions.length === 0 && page > 1` and resets to page 1. + ### "Visible" count update The existing "X visible (Y total)" label continues to work as-is. `sessions.length` reflects the current page's sessions.