Repository navigation
Clinical polish: Work-style header, compact cards, one Compare tray, desktop layouts - #3491
Conversation
- Clinical header: glass circles and a glass pill (Work's glass tokens), the pill names the area alone on one line. - Mode pages: a calm title above plain text tabs (ModeNav `title`); from 1024px the title, tabs and page share Work's 64rem column (--clinical-col, new src/app/clinical-mode.css). - Psychiatry and Medicines bands open out to the same column on desktop. - Results band: one plain line; only a failed or partial search draws a mark; a browse subject stays as the screen-reader heading only. - DSM chapters: one grouped card with hairline rows and a Chapters eyebrow. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
- Psychiatry tabs are Home and Saved. Home holds search, Resume, For a shift, Mental Health Act, Sections (with counts), Builders and Continue. - Builders keeps every quick action (First Nations included) and gains the builders and comparisons the retired Tools page listed, so Home reaches all of them. - /psychiatry?page=tools lands on Home. - The "Your week" chart and the Medicines signpost go. - Medicines loses "Lives in Psychiatry": Calculators and Dictionary are in Psychiatry's Sections and Safety plan is under For a shift. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
- Recent questions are one grouped list (History icon, chevron, 48px rows) instead of loose chips; the old chip CSS goes. - The phone "Try this" line drops "Tap to search" so the example is not cut to a few letters at 320-390px; the button's name is unchanged. - Desktop: the header no longer repeats the PsychSift lockup the rail already shows, and the "Try ... in Answer." line goes (the Prompts chips already offer the examples). Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
…rce panel From 1024px only (phones and upright tablets unchanged): - A DSM diagnosis and a therapy record open with their list in a sticky column on the left (chapters or categories, the current record marked aria-current="page"). ClinicalSplit shares WorkSplit's column rule in work-mode.css; below 1024px it draws no list and its wrappers take no box. - The Act page has a topic list beside the text, marking the topic being read with aria-current="location". - A cited source in an answer opens in a panel docked beside the answer instead of the centred dialog: a labelled complementary landmark with a close button and Escape, focus moved in on open and returned to the citation on close. The panel loads lazily; the Sheet drawer is unchanged below 1024px. Side list rows are 48px (min-h-12). The shell ignores the side list's own scroll so it cannot hide the app header. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
Focus moves in from a callback ref (the overlay host can arrive a render after open) and the opener is recorded once, so a second ref attach cannot record the panel as its own opener. The return-focus resolver is read at close time, while it still names the source the panel was showing. The panel sets pointer-events inline to match the overlay layer's inline none. Adds a DOM test for open, Escape and close-button close, focus return and the unchanged phone Sheet, and a desktop Playwright smoke for the docked panel. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
Pins the DSM, therapy and Act side lists: drawn beside the record from 1024px with the current row marked and every row 48px, and not drawn at 390 or 768. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
… one shared Compare tray
- Therapy search rows become one compact row each: name, one-line summary,
the Avoid / modify warning in amber shown in full at every width (no clamp,
no ellipsis), tags, and 48px favourite / compare / sheet icon controls; the
whole row opens the record, where Best used for and Best fit already show
in full. Review (the sign-off queue) leaves the main tabs (group "more") and
stays one tap away from the Therapy search page.
- Differentials: related diagnoses listed once as chips, title opens the
record, count no longer clipped on phones (grouping control on its own
row), Must-check shelf removed from Diagnoses (Emergent still first),
scenario chips in one keyboard-reachable sideways row.
- SharedCompareTray ("N selected, Clear, Compare") replaces the Therapy tray,
both Differentials compare bars and the DSM strip; appears only once
something is ticked, announced through the live announcer, docks above
the phone search box, pads the list end, and opens the existing compare
pages. Differentials dock clearance drops to the one-row 9rem.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
The therapy record's pinned header carries its tabs, so the list beside it sets --clinical-split-top to clear it; other Clinical splits keep the default 5rem. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
… recent list Covers the ?page=tools fallback landing on Home, the Builders list reaching everything the retired Tools page linked, the plain results band, the recent questions list and the one-logo desktop home. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
From 1024 to 1279px the Clinical list column is 17rem so the record keeps room for its four fact tiles; from 1280px it takes WorkSplit's shared 17-22rem range. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
…ared Compare tray - Therapy result Playwright test now checks the compact row: the full Avoid warning (no clip, clamp or ellipsis) at 320-1920px, 48px icon controls, compare toggle names, and the tray appearing only once ticked. - Mode-nav density and contract tests count Therapy's four bar destinations; Review stays registered off the bar. - Differentials dock test ticks two diagnoses before using the shared tray; DSM scroll-hide test follows the renamed footer layer class. - Style-contract exemptions and the differential compare contract follow the removed FAB and old Therapy tray. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
…linical in full The Clinical top bar takes two rows once it is narrower than 17rem, so the area pill keeps a full-width row and its name. Favourites opts into the large-text flag Work pages use; its scope and view switches wrap, the On My Day tiles drop to two or one across, and the Continue card and rows wrap instead of cutting words off. Normal text is unchanged. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
… tray
- Below 360px the tray's Clear label moves to screen readers only (the X
keeps a 48px target), so "2 of 4 selected" is never cut.
- Differentials dock test: a submitted search pre-ticks two diagnoses, so the
tray is already ready; the reserve floor follows the one-row 9rem band.
- Differential stream route test matches the title link name
("..., open pathway").
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
Owner-approved (ward-flow ideas item 7). A filter no longer removes rows: - Matching rows come first in their usual order (Emergent still leads on Differentials); every other row stays listed below under "Not emergent" (a single urgency filter) or "Not matching", its title muted with the --text-muted token, never opacity. Rows stay tappable at 48px. - A polite live note, "N of M highlighted, all rows stay", with Clear, which clears only the highlighting filters. The band count is the whole set. - Differentials: urgency and chapter filters highlight; search scope and the family view still define the set. DSM: category and support filters. Therapy: topics, reviewed and handout filters (the existing 24-row display cap applies to each group). - New shared FilterHighlightNote / FilterNotMatchingHeading, registered in the design-system adoption manifest. No clinical wording changed. Tests: non-matching rows stay present (Differentials, DSM, Therapy), counts, order, the live note and Clear; the shared note's live region stays mounted. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
…sh-mockups-dme269 # Conflicts: # src/components/dsm/dsm-search-page.tsx
… claims its band only when something is ticked Merge fixes: DSM chapters keep the grouped card inside the filter-highlight column; the pill weight test follows the header's new page-line branch. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
|
Important
This repository does not receive automatic reviews because it has fewer than 10 stars. ⚙️ Run configuration
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Merging this PR will not alter performance
|
🏁 CodeAnt Quality Gate ResultsCommit: ✅ Overall Status: PASSEDQuality Gate Details
|
Keeps the design-drift ratchet at its ceiling (261 inline styles). The DOM test opts out of user-event's CSS pointer check, since jsdom loads no stylesheet. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
…results Remembers the title when a row is ticked and falls back to a readable name (never the raw slug) for ids that arrive by link. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
|
Code review by qodo was updated up to the latest commit ccaf343 |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: ccaf343c3a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
- Reuse source history marker across responsive frames - Remove source history marker when closed externally
…ve frames; " This reverts commit c1dbf10.
The panel is not modal, so a reader can leave it through the page; the pushed entry was then left for Back to land on and do nothing, and a resize from the phone sheet doubled it. Escape and the close button dismiss it. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
|
Both Qodo Back-button findings on the docked source panel, and Codex's matching P2, are fixed in 3531247. That commit replaces Qodo's automatic fix c1dbf10, which is reverted in 3a043ce. Qodo's fix changed the shared The smaller fix is that the docked panel no longer adds a history entry, so Back does not close it on desktop. This deliberately undoes c7bd2e0, which made Back close the panel. A non-modal side panel that the reader can leave through the page cannot own a history entry without stranding one. Escape and the close button still dismiss it, and the phone Sheet keeps Back-to-close. A unit test now checks that opening the panel leaves Generated by Claude Code |
|
Code review by qodo was updated up to the latest commit 3531247 |
|
The CodSpeed flag on 3531247 ( Generated by Claude Code |
The mode-menu wrapper gained the universal-header-mode class, and the recent-searches chip icon rule went with the chips; both tests still pin the same contracts. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
|
Code review by qodo was updated up to the latest commit 86c1f56 |
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
|
Code review by qodo was updated up to the latest commit 0add1b2 |
Code Review ✅ Approved 3 closed / 3 findings🟡 Medium risk · Reworking clinical filtering, comparison, and record navigation across 86 files could make users overlook or misselect references. Brings Clinical mode in line with Work's header, compact Therapy and Differentials rows, one shared Compare tray, and desktop side-by-side record and source layouts. Clearing a filter is now announced as the doc comment describes. One open minor finding: switching the source from a sheet to the docked panel while open can leave a dead Back entry in
✅ 3 closed✅ Edge Case: Clearing a filter is never announced, though the doc comment says it is
Closed: Edge Case: DSM Compare tray shows raw slugs for ticks outside current results
Closed: Edge Case: Sheet→dock swap while open still leaves a dead Back entry
Review coverage🤖 Auto-approval Approved 📋 Rules No rules evaluated 🧪 Functional validation Not enabled · Set up OptionsAuto-apply is off → Gitar will not commit updates to this branch. Comment with these commands to change the behavior for this request:
Was this helpful? React with 👍 / 👎 | Gitar |
User description
Summary
Before: Clinical mode looked different from Work mode. It had boxed headers and result strips, long therapy cards, a split Psychiatry home, separate compare controls on each list, and filters that hid rows. Desktop records filled one long column.
After: Clinical uses Work's header, title band and centred column. Lists are calmer and grouped. Therapy and Differentials rows are compact, and the Avoid / modify warning is still shown in full. Psychiatry has one Home page. There is one shared Compare tray, and filters highlight matches instead of hiding the rest. On desktop, DSM, Therapy and Act records sit beside their list, and a cited source opens beside the answer.
The owner approved this on 12 Oct 2026 from high-fidelity mockups ("go ahead with all your recommendations"). The filter change was approved separately in the Ward Flow ideas.
src/app/clinical-mode.cssholds the styles.SearchResultsHeaderBandis one plain line. DSM chapters are one grouped hairline card.?page=toolslands on Home. Medicines drops "Lives in Psychiatry". The First Nations entry is kept.SharedCompareTrayfor Therapy, Differentials and DSM search.ClinicalSplitandDesktopSplitList, an Act topic list, and a docked answer source panel on desktop only. Phones are pixel-identical.compare-presence.ts).Verification
npm run test:focused(combined branch):Test Files 1 failed | 563 passed (564). The one failure was the pill-weight test's source anchor; it was fixed, andtests/mode-pages-sheet-classes.test.tsnow givesTests 4 passed (4).tsc --noEmit(combined branch): exit 0.--max-warnings=0and prettier on the changed files: clean.check:organisation: every new file is placed.55 components, 232 roots.verify:uiandnpm run buildare memory-killed in this container; CI runs the browser suite.Risk and rollout
Clinical Governance Preflight
PsychSift Production(sjrfecxgysukkwxsowpy)Presentation only. The Avoid / modify warning keeps its full text at every width. Emergent ordering is unchanged. Filtering now keeps every row visible instead of hiding the non-matching ones, which is the more conservative behaviour. No server, data or source code changed.
Notes
🤖 Generated with Claude Code
https://claude.ai/code/session_01Nv6DEPtQxG5JfAUBa2Q1gc
Generated by Claude Code
Summary by cubic
Pulls Clinical mode into Work's visual language: the header takes Work's glass controls with a calm title band, Therapy and Differentials rows become compact, one shared Compare tray replaces the separate compare controls, and filters now highlight matching rows instead of hiding the rest. From 1024px a record opens beside its list, and a cited source docks beside the answer.
List and record changes
Filtering and compare
Written for commit 4e51281. Summary will update on new commits.
CodeAnt-AI Description
Make clinical references easier to scan without hiding useful results
What Changed
Impact
✅ Non-matching clinical records stay accessible while filtering✅ Full therapy cautions visible in search✅ Side-by-side clinical references on wide screens💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.