feat(favourites): upgrade command library design and responsiveness#759
feat(favourites): upgrade command library design and responsiveness#759BigSimmo wants to merge 5 commits into
Conversation
Redesign the favourites command library for a cleaner, more polished look that adapts across every screen size. - Table: switch to a fixed layout so titles get the remaining width (no more over-eager truncation) and the Open action is always visible instead of scrolling off-screen. Add pinned markers, per-row type icon tiles (shown when there's room), a refined toolbar/header band, and even row heights via reliable single-line clamping. - Wide screens: reveal the leading icon and the secondary Evidence column only at 2xl, and collapse both when the item workspace panel is open so the browse list stays readable in the three-pane view. Widen the content cap on large screens. - Small screens: add a horizontally scrollable quick-views rail (All / Source-backed / Pinned / Recently used) and move the saved-sets carousel above the list, restoring the hidden sidebar's navigation below lg. - Mobile cards: more compact and scannable with a type icon, pinned marker, and inline set / last-used metadata, while keeping the independent select / open / more-actions touch targets. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012KBhUhayLK1RNqT2Vwopp1
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThe favourites command library adds mobile quick-view chips, revises mobile card selection and metadata presentation, and updates the desktop table for responsive density, column visibility, pinned indicators, and empty states. ChangesFavourites command library UI
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant FavouritesMobileQuickViews
participant FavouritesCommandLibraryPage
User->>FavouritesMobileQuickViews: Select a quick-view chip
FavouritesMobileQuickViews->>FavouritesCommandLibraryPage: Invoke view or set selection handler
FavouritesCommandLibraryPage->>FavouritesMobileQuickViews: Render updated active state
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install timed out. The project may have too many dependencies for the sandbox. Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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/favourites-command-library-page.tsx`:
- Around line 698-703: Update the Evidence cell rendering around item.evidence
so the ShieldCheck icon and clinical-accent styling are applied only when
isSourceBacked(item.evidence) is true. Preserve the existing evidence text for
values such as “Run” and “Saved query,” but render those values without
source-backed treatment.
In `@src/components/clinical-dashboard/favourites-library-nav.tsx`:
- Around line 463-469: Update the quick-view chip button styling in the
favourites library navigation to replace the h-10 height utility with the
existing h-tap utility, preserving all other classes and behavior.
🪄 Autofix (Beta)
✅ Autofix completed
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 70075375-a52b-4951-9d29-e100b4938e8c
📒 Files selected for processing (2)
src/components/clinical-dashboard/favourites-command-library-page.tsxsrc/components/clinical-dashboard/favourites-library-nav.tsx
|
Note Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it. Fixes Applied SuccessfullyFixed 2 file(s) based on 2 unresolved review comments. Files modified:
Commit: The changes have been pushed to the Time taken: |
Fixed 2 file(s) based on 2 unresolved review comments. Co-authored-by: CodeRabbit <noreply@coderabbit.ai>
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
Pull request was closed
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
Summary
Presentation-only redesign of the favourites command library (
/favourites) for a cleaner look that adapts across every screen size. No data, retrieval, governance, or routing logic changed.2xl, and both collapse when the item-workspace panel is open so the three-pane browse list stays readable. Content cap widened on large screens.lgwhere the sidebar is hidden — the navigation the desktop sidebar provides.Files changed:
src/components/clinical-dashboard/favourites-command-library-page.tsx,src/components/clinical-dashboard/favourites-library-nav.tsx.Verification
npm run lint— passnpm run typecheck— no errors in changed files (pre-existing test-dep errors intests/*are unrelated:@testing-library/*/@axe-core/playwrightare not installed in this environment)npm run test(focused:site-map,search-command-surface,app-modes) — 30/30 passSelect/Open/More actionscontrols,aria-pressedtoggle, item workspace opens on row select at 2xl, active-filter chips on search, zero mobile horizontal overflow, and the mobile centered-search geometry (heading above search, search within the main pane).UI verification not run:
npm run verify:ui/npm run verify:pr-local— the runner's isolated production build type-checks test-setup files that import@testing-library/jest-dom, which is not installed in this environment; covered by the manual + programmatic checks above.Risk and rollout
isSourceBackedunchanged), retrieval, or governance behavior.Clinical Governance Preflight
This change re-lays-out the favourites library visually only; the underlying source-governance logic and conservative behavior are unchanged, so each item below holds by virtue of touching no clinical, data, or governance code path.
Clinical KB Database(sjrfecxgysukkwxsowpy)Notes
Summary by CodeRabbit
New Features
UI Improvements