Collapse sidebar More modes into a sheet popup

[BigSimmo]

Summary

• Replaces the Clinical Guide sidebar’s six-item More modes list (expanded panel and collapsed tablet rail) with a single More modes control.
• Clicking the control opens a shared Sheet listing Forms, Differentials, DSM-5 Diagnosis, Specifiers, Formulation, and Therapy.
• Choosing a mode closes the sheet and, on phone, the Clinical Guide drawer via the existing onNavigate path.
• Updates the tablet-rail smoke assertions to open the sheet before checking specialist links.

Verification

• npm run format:changed — All matched files use Prettier code style
• npm run test:focused -- --files src/components/clinical-dashboard/ClinicalSidebar.tsx — Tests 11 passed
• npx vitest run tests/favourites-auth-gate.test.ts tests/therapy-compass-mode-wiring.test.ts — Tests 19 passed
• npm run ensure then npm run test:e2e -- tests/ui-smoke.spec.ts --project=chromium -g "tablet shows icon rail" — 1 passed (2.1s)
• npm run verify:pr-local stages through unit suite (Test Files 529 passed, Tests 5713 passed | 4 skipped); initial build blocked by ensure-started dev server, then npm run build after stop — Client bundle secret surface check passed
• npm run check:rag:fixtures — Offline RAG fixture and manifest validation passed (36 golden cases, 23 suites)
• npm run verify:ui — not run; focused Chromium smoke covers the changed More modes rail journey; full UI gate left for CI

Risk and rollout

• Risk: Low — sidebar discovery UX only; mode homes and composer mode pill unchanged
• Rollback: Revert the PR
• Provider or production effects: None

Clinical Governance Preflight

Not applicable — UI navigation chrome only; no ingestion, answer generation, search/ranking, source rendering, document access, privacy, production env, or clinical output changes.

Notes

• PR: Collapse sidebar More modes into a sheet popup #1763
• Branch review ledger recorded for cursor/more-modes-popup-2f4b

Summary by CodeRabbit

• New Features

  • Added a unified “More modes” menu to the clinical sidebar.
  • Specialist modes are now accessible through an expandable sheet with active-state tracking.
  • The menu closes after navigation and restores focus for improved accessibility.
  • Medication remains directly available in the sidebar.

• Documentation

  • Updated sidebar behavior documentation and review records.

• Tests

  • Updated UI tests to verify the “More modes” sheet and specialist navigation.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 4f716ec3-9400-42ea-8a11-957d7511b3db

📥 Commits

Reviewing files that changed from the base of the PR and between 1782706 and 57c43a2.

📒 Files selected for processing (3)

• docs/branch-review-ledger.md
• tests/ui-smoke.spec.ts
• tests/ui-tools.spec.ts

🚧 Files skipped from review as they are similar to previous changes (2)

• tests/ui-smoke.spec.ts
• tests/ui-tools.spec.ts

---

📝 Walkthrough

Walkthrough

The PR replaces inline specialist-mode sidebar links with a reusable Sheet-based MoreModesMenu for expanded and collapsed layouts. It updates tablet smoke-test coverage, a navigation comment, and branch review ledger records.

Changes

Sidebar More Modes

Layer / File(s)	Summary
More modes menu implementation src/components/clinical-dashboard/ClinicalSidebar.tsx	Adds MoreModesMenu, active-mode detection, Sheet navigation, focus restoration, and close-on-navigation behavior. Both sidebar layouts use the new control.
Sidebar navigation validation tests/ui-smoke.spec.ts, tests/ui-tools.spec.ts	Updates smoke-test assertions for the More modes Sheet and adjusts the /differentials navigation comment.

Branch Review Ledger

Layer / File(s)	Summary
Ledger record reconciliation docs/branch-review-ledger.md	Adds and reorders dated review, synchronization, audit, navigation, documentation, and follow-up records.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
participant User
participant MoreModesMenu
participant Sheet
participant ClinicalSidebar
User->>MoreModesMenu: Activate More modes
MoreModesMenu->>Sheet: Open specialist mode links
User->>Sheet: Select a specialist mode
Sheet->>ClinicalSidebar: Invoke navigation callback
ClinicalSidebar-->>MoreModesMenu: Close menu and restore trigger focus

Loading

Possibly related PRs

• BigSimmo/Database#1744: Directly modifies the same sidebar More modes navigation.
• BigSimmo/Database#1036: Updates the shared Sheet focus and overlay behavior used by this menu.
• BigSimmo/Database#1174: Modifies ClinicalSidebar.tsx and related sidebar smoke tests.

Suggested reviewers:cursoragent

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: moving the sidebar More modes into a sheet popup.
Description check	✅ Passed	The description covers the change, verification results, risk, rollback, production effects, and explains why full UI verification was not run.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cursor/more-modes-popup-2f4b

---

_{Comment @coderabbitai help to get the list of available commands.}

[supabase]

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (1)

tests/ui-smoke.spec.ts (1)

1245-1254: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Test mode selection in the mobile drawer.

This block tests only the tablet rail and Sheet opening. Add a Playwright phone-viewport case that selects a More modes link, verifies the destination route, and verifies that the Clinical Guide drawer closes.

As per coding guidelines, “Use Playwright for end-to-end tests and run the appropriate Chromium UI gate, starting the project with npm run ensure rather than assuming a port.”

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@tests/ui-smoke.spec.ts` around lines 1245 - 1254, Add a Playwright
phone-viewport test alongside the existing sidebar More modes coverage that
opens the mobile More modes drawer, clicks a mode link, verifies navigation to
the expected destination route, and confirms the Clinical Guide drawer is
closed. Keep the tablet rail assertions unchanged and follow the existing
Chromium UI setup using npm run ensure.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/branch-review-ledger.md`:
- Line 707: Move the ledger row identified by commit
2a8881afad230880166de60a533e17588d9920ec to its chronological position among the
surrounding dated records, preserving the row content. Use the repository’s
supported ledger workflow to make the change rather than editing the file
directly.
- Around line 770-771: Append superseding ledger records for both listed heads
using `npm run ledger:append -- --supersede`, including every gate result,
`verify:ui:not-run`, and an explicit statement that no provider-backed checks
ran. Then run `ledger:lookup` and `check:branch-review-ledger` to validate the
updated records.
In `@src/components/clinical-dashboard/ClinicalSidebar.tsx`:
- Line 188: Replace the hardcoded 0.5rem inset in the ClinicalSidebar
contentClassName viewport calculation with a semantic spacing token defined in
src/app/globals.css using Tailwind 4 `@theme` syntax, then reference that token in
the max-h utility while preserving the existing responsive max-width behavior.
---
Nitpick comments:
In `@tests/ui-smoke.spec.ts`:
- Around line 1245-1254: Add a Playwright phone-viewport test alongside the
existing sidebar More modes coverage that opens the mobile More modes drawer,
clicks a mode link, verifies navigation to the expected destination route, and
confirms the Clinical Guide drawer is closed. Keep the tablet rail assertions
unchanged and follow the existing Chromium UI setup using npm run ensure.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 578c7a49-6798-403e-b198-cf9cb168d82b

📥 Commits

Reviewing files that changed from the base of the PR and between ff43ed9 and 3998ffd.

📒 Files selected for processing (4)

• docs/branch-review-ledger.md
• src/components/clinical-dashboard/ClinicalSidebar.tsx
• tests/ui-smoke.spec.ts
• tests/ui-tools.spec.ts