Phone Choose mode: new dense-glance YES mockups

[BigSimmo]

Summary

• New phone Choose mode sheet YES mockups after feedback that Find / Diagnose / Care organisation and roomy spacing made picking harder at a glance.
• YES 01 — Dense title list (shipping recommendation): flat catalogue, title-only min-h-12 rows, Currently · {mode} in the sheet header, interactive selection that lifts into the top-bar pill, Rest / Scrolled / Switched proof frames (~12 modes visible on Rest).
• YES 02 — Flat icon tiles: same flat catalogue as a compact two-column icon+label grid — still no clinical lanes or lane chips.
• Baseline frame shows the shipping subtitle list for contrast.
• Design-scratch only (/mockups/phone-mode-sheet-yes); shared mockup chrome is suppressed.
• Follow-up: extracted shared useRovingModeFocus so dense and tile sheets keep option refs / focus / select in sync (CodeRabbit maintainability nit).

Clinical Governance Preflight

• Not a clinical-risk product change — design-scratch mockups only (/mockups/* 404 in production)
• No answer generation, retrieval/ranking, ingestion, source rendering, document access, or privacy behaviour changed
• Rollback: revert this PR; no production surface is affected

Test plan

• npm run ensure → /mockups/phone-mode-sheet-yes loads
• Browser proof: YES 01 Rest shows ~12 title-only rows with no Find/Diagnose/Care; YES 02 shows flat tiles without lane chips
• npx eslint on changed TSX — clean

RAG impact

RAG impact: no retrieval behaviour change — mockups-only design scratch; no RAG surfaces touched.

Summary by CodeRabbit

• New Features

  • Added two updated phone mode sheet compositions: a dense title-only list and a two-column icon-tile grid.
  • Added synchronized current-mode labels, selection indicators, keyboard navigation, and scrolling support.
  • Updated the mockup showcase and review content to present the new design directions.

• Documentation

  • Updated the mockup description and page metadata to reflect the latest compositions.

[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]

📝 Walkthrough

Walkthrough

The PR replaces sectioned-list and icon-deck phone mode mockups with dense title-list and flat icon-tile compositions. It adds synchronized selection headers, keyboard navigation, preview states, selected indicators, updated phone-frame routing, and revised study documentation.

Changes

Phone mode sheet compositions

Layer / File(s)	Summary
Variant definitions and study metadata src/components/phone-mode-sheet-yes-mockups.tsx, mockups/README.md, src/app/mockups/phone-mode-sheet-yes/page.tsx	The study now defines dense title-list and flat icon-tile variants. Metadata, review findings, descriptions, and page documentation use the new compositions.
Mode sheet interaction implementations src/components/phone-mode-sheet-yes-mockups.tsx	The dense list and flat tile sheet provide controlled selection, keyboard navigation, current-mode context, accessibility labels, and selected-state indicators.
Phone frames and showcase integration src/components/phone-mode-sheet-yes-mockups.tsx	Phone-frame routing and showcase content now use dense-list and tile-grid previews. The obsolete deck branch, clinical lanes, and resolution showcase are removed.

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

Sequence Diagram(s)

sequenceDiagram
participant User
participant DenseListSheet
participant DenseModeRow
participant CurrentlyLine
participant Preview
User->>DenseListSheet: Focus or select a mode
DenseListSheet->>DenseModeRow: Update selected row
DenseModeRow->>CurrentlyLine: Pass selected mode
CurrentlyLine->>Preview: Update current-mode header and preview

Loading

Possibly related PRs

• BigSimmo/Database#1618: Updates the same phone mode sheet mockup component and its earlier sectioned-list and icon-deck variants.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
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.
Title check	✅ Passed	The title clearly identifies the main change: new dense-glance phone Choose mode mockups.
Description check	✅ Passed	The description covers the mockup scope, design variants, verification performed, governance impact, and rollback plan.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

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

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, add credits to your account and enable them for code reviews in your settings.

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no bugs or issues to report.

[coderabbitai]

🧹 Nitpick comments (1)

src/components/phone-mode-sheet-yes-mockups.tsx (1)

461-498: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Consider extracting the shared roving-focus logic.

DenseListSheet and FlatTileSheet duplicate optionRefs, focusIndex, focusModeOption, and selectMode. Only the key-to-delta mapping differs. A small hook, for example useRovingModeFocus(selected, onSelectedChange), would keep both sheets in sync when the navigation rules change.

This is design scratch, so treat it as optional.

♻️ Sketch of a shared hook

functionuseRovingModeFocus(selected: AppModeId,onSelectedChange: (id: AppModeId)=>void){constoptionRefs=useRef<Array<HTMLButtonElement|null>>([]);const[focusIndex,setFocusIndex]=useState(Math.max(0,FLAT_MODE_IDS.indexOf(selected)));constfocusModeOption=(index: number)=>{constnext=Math.max(0,Math.min(FLAT_MODE_IDS.length-1,index));setFocusIndex(next);optionRefs.current[next]?.focus();};constselectMode=(id: AppModeId)=>{onSelectedChange(id);constnextIndex=FLAT_MODE_IDS.indexOf(id);if(nextIndex>=0)setFocusIndex(nextIndex);};return{ optionRefs, focusIndex, focusModeOption, selectMode };}

🤖 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/phone-mode-sheet-yes-mockups.tsx` around lines 461 - 498,
Optionally extract the duplicated roving-focus state and behavior from
DenseListSheet and FlatTileSheet into a shared useRovingModeFocus hook.
Centralize optionRefs, focusIndex, focusModeOption, and selectMode, while
keeping each sheet’s distinct keyboard key-to-delta mapping in its own handler.

🤖 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.
Nitpick comments:
In `@src/components/phone-mode-sheet-yes-mockups.tsx`:
- Around line 461-498: Optionally extract the duplicated roving-focus state and
behavior from DenseListSheet and FlatTileSheet into a shared useRovingModeFocus
hook. Centralize optionRefs, focusIndex, focusModeOption, and selectMode, while
keeping each sheet’s distinct keyboard key-to-delta mapping in its own handler.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 1bd437b9-596f-462d-bb9e-53b892f17721

📥 Commits

Reviewing files that changed from the base of the PR and between c839b97 and eb25065.

📒 Files selected for processing (3)

• mockups/README.md
• src/app/mockups/phone-mode-sheet-yes/page.tsx
• src/components/phone-mode-sheet-yes-mockups.tsx

[BigSimmo]

Addressed the CodeRabbit maintainability nit in 1356413d: extracted useRovingModeFocus so DenseListSheet and FlatTileSheet share optionRefs / focusIndex / selectMode, while each sheet keeps its own keyboard key-to-delta map.