Skip to content

feat(react): desktop shell: header, sidebar nav, week progress - #399

Merged
kauereinbold merged 1 commit into
mainfrom
feat/react-desktop-shell
Aug 19, 2026
Merged

feat(react): desktop shell: header, sidebar nav, week progress#399
kauereinbold merged 1 commit into
mainfrom
feat/react-desktop-shell

Conversation

@kauereinbold

Copy link
Copy Markdown
Owner

Summary

  • New AppHeader component: sticky header with serif page title, today's date, search pill (magnifier icon, no focus ring), and the New reminder primary button (replaces the old Create Reminder button).
  • New Sidebar component: sticky aside with All/Today/Upcoming/Done nav (counts, active state with accent dot and aria-current) and the THIS WEEK progress block (uppercase label, 40px serif percentage, 5px bar, overdue-aware caption).
  • reminderGroups util grows viewCounts and weekProgress (percent done of reminders due within 7 days, overdue included, matching the prototype).
  • List page becomes the two-column shell (max-width 1280px, clamp gutters); reminder list renders inside the main column. Three nav color tokens added to globals.css; unused page.module.css deleted.
  • Scope split per the redesign plan: search input and view selection hold state only; list filtering ships with feat(react): search and view filters #329, create/edit modal with feat(react): create/edit modal and delete confirmation #330, mobile layout with feat(react): mobile layout under 760px #331, empty states with chore(react): remove MUI styling, empty states, test updates #332.

Closes #328

Test plan

  • npm test: 100/100 passing, including new AppHeader, Sidebar, util, and list shell tests.
  • next lint and next build clean.
  • Cypress against local prod build: all 6 UI specs green, including a new desktop shell spec (header, nav counts, active-state switching, week progress). Button rename applied across specs and commands. api-dotnet.cy.js needs the live .NET API and is unaffected by this change.
  • Manual smoke test against the docker API stack (nginx :9999): sticky header/sidebar, counts, progress math, hover states, optimistic toggle updating the progress block.

Sticky header (serif title, today date, search pill, New reminder
button), sticky sidebar with All/Today/Upcoming/Done nav counts and
active state, and THIS WEEK progress block per the redesign handoff.

Search input and view selection only hold state for now: list
filtering ships with the search/filters issue. New reminder keeps
navigating to /reminder/create until the modal issue lands.

Cypress: list button renamed Create Reminder to New reminder across
specs; new desktop shell spec; API-failure spec asserts the shell
instead of the now-empty list column.
@kauereinbold
kauereinbold merged commit 06ac290 into main Aug 19, 2026
8 checks passed
@kauereinbold
kauereinbold deleted the feat/react-desktop-shell branch August 19, 2026 12:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(react): desktop shell: header, sidebar nav, week progress

1 participant