feat(dsm): compact category dropdown filter, more prominent results - #675
Conversation
Replace the multi-row wall of category filter pills on the DSM search results page with a single compact dropdown menu, and give the results list a prominent header band so it dominates the page. - Add CategoryFilterDropdown: an anchored menuitemradio menu of category links (server-driven filtering preserved) with the active category shown as the checked option. Keyboard support (arrow/Home/End/Escape), outside-click + Escape dismissal via useDismissableLayer, and roving focus across options. - Collapse the filter into one toolbar row with a "Clear filter" affordance when a category is active, reclaiming ~3 rows of vertical space so results sit higher. - Add a "Matching diagnoses / N results" header band to the results card to anchor and emphasise the result list. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VnTrYkS5MjsB9JoA2bF4TH
|
Warning Review limit reached
Next review available in: 33 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThe DSM search page replaces category filter pills with a keyboard-navigable dropdown, adds conditional filter clearing, and displays the current results context with a computed diagnosis count. ChangesDSM search interface
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant CategoryFilterDropdown
participant CategoryLink
participant DSMResults
User->>CategoryFilterDropdown: Open category filter
CategoryFilterDropdown->>CategoryLink: Focus active category option
User->>CategoryLink: Select category
CategoryLink->>DSMResults: Apply category navigation
DSMResults-->>User: Show context label and result count
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 59ced590a9
ℹ️ 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".
|
@codex resolve actionable Codex review findings for this pull request and current head using the repository instructions. This is the pull request's single automatic repair pass: do not perform a fresh review, create new standalone findings, or request another review. Work only the existing unresolved Codex threads on the current head. Always fix P0 and P1 findings. For P2 and lower findings, fix only clear, scoped, low-risk issues; otherwise disposition them with a concise reason. After fixing or dispositioning a thread, reply in that thread with as the first line, followed by a concise summary; that marker authorizes the workflow to close that exact thread. If human input or new authorization is required, do not use the marker and leave the thread open with the blocker. Finish only after every actionable thread is fixed or dispositioned and closed, or explicitly left open for a human decision. Do not update the branch from main, address unrelated reviews, broaden scope, or create more than one scoped fix commit. Do not use external APIs, paid services, credentials, dependency changes, or broad refactors unless explicitly authorized. Add targeted tests where behavior changes and run the narrowest relevant validation. |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 59ced590a9
ℹ️ 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".
Address two keyboard-interaction defects in the new CategoryFilterDropdown raised in review: - ArrowUp reverse-entry: a focus-on-open effect and the trigger key handler both scheduled focus when the menu opened, racing each other so ArrowUp could land on the active item instead of the last option. Collapse to a single source of truth — openMenu(focusIndex) picks the target and schedules the one focus call. - Tab focus-out: the menu stayed open (aria-expanded true) after a keyboard user tabbed off the last option, letting it linger over the results. Add a root focus-out handler that closes only when focus leaves the widget, without preventing the focus move or closing while focus travels between the trigger and its options. Add a targeted ui-smoke test covering ArrowDown/ArrowUp entry points, Escape restore-to-trigger, and Tab-to-close. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VnTrYkS5MjsB9JoA2bF4TH
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0ff0179c6e
ℹ️ 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".
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@src/components/dsm/dsm-search-page.tsx`:
- Around line 100-118: Remove the Escape branch from handleOptionKeyDown and let
useDismissableLayer handle dismissal and focus restoration. Demote the
per-result headings near the results rendering from h2 to h3 so the section
header remains the sole h2. Optionally extract CategoryFilterDropdown into its
own module, then run verify:ui and check:production-readiness before merge.
🪄 Autofix (Beta)
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 Plus
Run ID: 30bd633a-22b2-46dc-b173-500456fa4a01
📒 Files selected for processing (1)
src/components/dsm/dsm-search-page.tsx
Follow-up review fixes for the category filter dropdown:
- Give each menu option tabIndex={-1} (roving focus via the arrow keys), so a
single Tab press leaves the whole widget instead of stepping through every
category link, matching the ARIA menu-button pattern. The existing focus-out
handler then closes the menu.
- Drop the duplicate Escape branch in the option key handler; useDismissableLayer
already owns Escape dismissal and focus restoration, so this avoided calling
focus() on the trigger twice.
- Demote per-result titles from h2 to h3 so the new "Matching diagnoses" section
header is the sole h2 in the results region (h1 -> h2 -> h3).
Extend the ui-smoke keyboard test to assert Tab from a non-final option closes
the menu in one step.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VnTrYkS5MjsB9JoA2bF4TH
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a6ff1b4700
ℹ️ 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".
Options are exposed as menuitemradio, where Space is an expected activation key, but the underlying element is an anchor (Space scrolls / does nothing). Handle Space in the option key handler with preventDefault() and route it through the same activation path as click/Enter so keyboard users can apply the announced radio menu item. Extend the ui-smoke keyboard test to assert Space navigates to the focused category. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VnTrYkS5MjsB9JoA2bF4TH
2 participants
Summary
/dsm/search) with a single compact dropdown menu, reclaiming ~3 rows of vertical space so results sit higher on the page.CategoryFilterDropdown— an anchoredmenuitemradiomenu of category links. Server-driven filtering is preserved (each option is a real navigation<Link>), the active category renders as the checked option with its count, and it supports keyboard navigation (Arrow/Home/End/Escape), outside-click + Escape dismissal viauseDismissableLayer, and roving focus across options.Files changed:
src/components/dsm/dsm-search-page.tsxVerification
npm run verify:pr-localnpm run verify:uiwhen UI, routing, styling, browser behavior, reduced-motion, or forced-colors behavior changednpm run verify:releasebefore release or handoff confidence claimsWhat was actually run in this session (UI-only change, demo mode):
npm run typecheck— no errors insrc/(pre-existing failures are all intests/**from uninstalled test-only dev deps:@testing-library/*,@axe-core/playwright).npx eslint src/components/dsm/dsm-search-page.tsx— clean.npm run ensure, Chromium): desktop + mobile (390px), dropdown open/closed, and a functional click-through. Verified: selecting a category navigates to?category=…and filters results, the trigger reflects the active category,aria-checkedtracks the active option, "Clear filter" appears when active, Escape closes and restores focus, and there is 0px horizontal overflow at 390px.verify:pr-local/verify:uigates were not run here — please run before merge.Clinical Governance Preflight
Not applicable — this is a presentational change to the local DSM catalogue search UI. It does not touch ingestion, answer generation, search/ranking, source rendering, document access, privacy, production env, or clinical output. No Supabase, provider, or governance surface is affected.
Notes
dsm-search-page/dsm-search-resulttest selectors are preserved. A stabledata-testid="dsm-category-filter"was added to the dropdown trigger.🤖 Generated with Claude Code
Generated by Claude Code
Summary by CodeRabbit