Make the shared home mode-aware - #1790
Conversation
📝 WalkthroughWalkthroughThe dashboard replaces the answer-specific empty state with a shared home that derives its presentation from the active mode. The header adds shared branding and deferred focus restoration. Tests cover mode switching, responsive layout, recent queries, and standalone results. ChangesShared home experience
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Comment |
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
There was a problem hiding this comment.
Pull request overview
Updates the shared / home surface so its hero/branding/icon/copy stay in sync with the URL-owned mode, while keeping the single mounted composer and improving focus restoration after mode selection.
Changes:
- Add a typed
sharedHomePresentationmap (covering all 13 modes) and switch the shared home empty state to render mode-aware title/subtitle/icon. - Improve mode-switch focus behavior in
MasterSearchHeaderby deferring focus restore until the URL-owned mode prop settles. - Expand/adjust DOM + Playwright coverage for shared-home presentation, focus, and narrow viewport geometry (390px/320px).
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| tests/ui-tools.spec.ts | Adds/updates E2E coverage for mode-aware shared-home hero, focus restore, and 390px/320px layout stability. |
| tests/ui-stress.spec.ts | Updates stress test selectors to the new shared-home test id. |
| tests/ui-smoke.spec.ts | Updates smoke coverage to the new shared-home test ids and updated hero heading copy. |
| tests/shared-home-empty-state.dom.test.tsx | New DOM test asserting per-mode presentation coverage and rerender-in-place behavior. |
| tests/settings-inert-preferences.dom.test.tsx | Updates preference test commentary to reflect SharedHomeEmptyState naming. |
| tests/answer-preferences.dom.test.tsx | Updates preference coverage to target shared-home recent-query chips/test ids. |
| src/lib/ui-copy.ts | Introduces sharedHomePresentation map and shared-home empty-state copy labels. |
| src/lib/app-modes.ts | Refines Formulation placeholder copy used by the shared composer. |
| src/components/mode-home-template.tsx | Adds stabilizePhoneCopy option to stabilize phone hero geometry across copy changes. |
| src/components/ClinicalDashboard.tsx | Switches shared-home rendering to SharedHomeEmptyState and passes sharedHomeIdentity into the header. |
| src/components/clinical-dashboard/master-search-header.tsx | Adds stable shared-home branding variant and improves focus restore after mode selection. |
| src/components/clinical-dashboard/answer-status.tsx | Replaces AnswerEmptyState with SharedHomeEmptyState driven by mode-aware presentation + canonical mode icons. |
| src/components/answer-home-proposal-mockups.tsx | Updates pinned-copy comment to point at the new shared-home presentation source. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Same-mode picks on the shared home keep an identical replaceState URL, so searchMode never changes and the pending-focus effect can lose the restore while the phone sheet still mounts #app-mode-menu. Retry after teardown and cover with a DOM regression test. Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/components/clinical-dashboard/master-search-header.tsx (1)
2176-2176: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winMove the phone reserve into a theme token.
Line 2176 adds
9remas a hardcoded design value. Define the reserve insrc/app/globals.csswith@theme, then reference that token in the width calculation.As per coding guidelines, use Tailwind 4
@themetokens instead of hardcoded design values.🤖 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 `@src/components/clinical-dashboard/master-search-header.tsx` at line 2176, Replace the hardcoded 9rem phone reserve in the master-search-header width calculation with a Tailwind 4 theme token. Define the reserve in the `@theme` section of globals.css, then reference that token in the responsive width class while preserving the existing sizing behavior.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 `@src/components/clinical-dashboard/master-search-header.tsx`:
- Around line 853-879: Remove the modeButtonRef focus fallback after
restoreFocusUnlessMoved in the same-mode branch of the mode selection handler,
so deferred restoration never overrides deliberate focus movement. Keep the
existing restoreFocusUnlessMoved call and pending-focus cleanup, and add a test
that moves focus to another control before deferred restoration and verifies
that control retains focus.
In `@src/components/mode-home-template.tsx`:
- Around line 90-102: Replace the hardcoded 2lh utility in the title and
description className expressions of the mode-home template with a semantic
Tailwind token. Define that token in the `@theme` section of globals.css, then
reference it through the existing max-sm:min-h utility while preserving the
current conditional layout behavior.
---
Nitpick comments:
In `@src/components/clinical-dashboard/master-search-header.tsx`:
- Line 2176: Replace the hardcoded 9rem phone reserve in the
master-search-header width calculation with a Tailwind 4 theme token. Define the
reserve in the `@theme` section of globals.css, then reference that token in the
responsive width class while preserving the existing sizing behavior.
🪄 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: 9c490454-4a36-4ac3-94a1-8804f4e99e4b
📒 Files selected for processing (14)
src/components/ClinicalDashboard.tsxsrc/components/answer-home-proposal-mockups.tsxsrc/components/clinical-dashboard/answer-status.tsxsrc/components/clinical-dashboard/master-search-header.tsxsrc/components/mode-home-template.tsxsrc/lib/app-modes.tssrc/lib/ui-copy.tstests/answer-preferences.dom.test.tsxtests/mode-menu-prefetch.dom.test.tsxtests/settings-inert-preferences.dom.test.tsxtests/shared-home-empty-state.dom.test.tsxtests/ui-smoke.spec.tstests/ui-stress.spec.tstests/ui-tools.spec.ts
* fix: honor restoreFocusUnlessMoved on same-mode reselect PR #1790 landed with a force-focus fallback that could override deliberate focus moves after the mode menu closed. Keep only restoreFocusUnlessMoved and cover the no-steal path with a DOM test. Records the #1790 babysit ledger row. Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com> * fix(ci): drop deprecated baseUrl from isolated Playwright tsconfigs Next 16.3 surfaces TS5101 when the Playwright/Lighthouse run-root tsconfig still injects baseUrl. Resolve @/* with root-relative paths instead so Production UI critical can typecheck again after the main sync. * fix(ci): align Playwright tsconfig contracts with #1798 Unit coverage failed after merging #1798: runners keep baseUrl + ignoreDeprecations, but this branch still asserted root-relative paths. Update the two contract tests to match the kept runner shape. --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
Summary
/as one lightweight shared home while updating its canonical icon, question title, supporting text, selector identity, and existing composer placeholder from the URL-owned mode.Why
Mode selection on the shared home previously retargeted the search composer without changing the surrounding hero. Updating the existing shared surface in place makes the active clinical task immediately clear without adding routes, loading states, duplicated composers, or per-mode pages.
Areas touched
ClinicalDashboard,SharedHomeEmptyState,ModeHomeTemplate, andMasterSearchHeaderpresentation/focus behavior.Verification
npm run format— passed; repository-wide Prettier completed before commit.npm run typecheck:source— passed.npm test -- tests/shared-home-empty-state.dom.test.tsx tests/answer-preferences.dom.test.tsx tests/mode-menu-prefetch.dom.test.tsx tests/favourites-auth-gate.dom.test.tsx— 4 files passed, 36 tests passed.npm run test:e2e:pr -- tests/ui-tools.spec.ts --grep "shared-home presentation|header mode switches"— isolated production build passed; 4 Chromium tests passed in 13.5s.git diff --check— passed before commit.Checks not run
npm run verify:phone-chrome/ fullnpm run verify:uiwere not launched. Its dry run selected the entire Chromium suite; the changed desktop, 390px media, 320px geometry, focus, branding, and standalone Services behavior received direct production-style coverage instead.npm run verify:pr-localwas not repeated. An earlier broadverify:cheapattempt in this task was not green because of 31 unrelated Windows/bash/temp-directory/timeout/PDF-virtualization cases; focused changed behavior, lint, typecheck, production build, and browser checks are green.Risk and compatibility
main; GitHub CI should validate the current merge result.RAG impact: no retrieval behaviour change — shared-home copy, icons, focus, responsive presentation, and focused tests only; submission routing, retrieval, ranking, and answer generation are unchanged.
Closes #1744
Summary by CodeRabbit