From 4eb3cf04e6b104132c2d89a46ab82b4f8527d87e Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 17 Jul 2026 19:40:16 +0000 Subject: [PATCH 1/2] feat(favourites): upgrade command library design and responsiveness 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 Claude-Session: https://claude.ai/code/session_012KBhUhayLK1RNqT2Vwopp1 --- .../favourites-command-library-page.tsx | 177 ++++++++++++------ .../favourites-library-nav.tsx | 117 ++++++++++++ 2 files changed, 237 insertions(+), 57 deletions(-) diff --git a/src/components/clinical-dashboard/favourites-command-library-page.tsx b/src/components/clinical-dashboard/favourites-command-library-page.tsx index 1499d88f9..322d1700b 100644 --- a/src/components/clinical-dashboard/favourites-command-library-page.tsx +++ b/src/components/clinical-dashboard/favourites-command-library-page.tsx @@ -13,6 +13,7 @@ import { Heart, MoreVertical, Pill, + Pin, Quote, Search, ShieldCheck, @@ -24,6 +25,7 @@ import { useMemo, useRef, useState } from "react"; import { FavouritesMobileBrowseRail, + FavouritesMobileQuickViews, FavouritesSidebar, useFavouritesNavCollapsed, type FavouritesViewMode, @@ -237,7 +239,15 @@ function filterAndSortItems( }); } -function MiniIconTile({ icon: Icon, active = false }: { icon: LucideIcon; active?: boolean }) { +function MiniIconTile({ + icon: Icon, + active = false, + className, +}: { + icon: LucideIcon; + active?: boolean; + className?: string; +}) { return ( @@ -457,7 +468,7 @@ function FavouriteMobileCard({
onSelect(item.id)} aria-pressed={selected} aria-label={`Select ${item.title}`} - className={cn("absolute inset-0 cursor-pointer rounded-lg", focusRing)} + className={cn("absolute inset-0 cursor-pointer rounded-xl", focusRing)} />
-

- {item.title} -

-

- {item.description} -

-
+
+ +
+
+ {item.pinned ? ( + <> + + Pinned + + ) : null} +

+ {item.title} +

+
+

+ {item.description} +

+
+
+ +
{item.type} {isSourceBacked(item) ? ( + Source-backed ) : null}
-
-
-
-
- - Set -
-
{item.set}
+
+ + + {item.set} + + + ยท + + {item.lastUsed}
-
-
Last used
-
{item.lastUsed}
-
-
+
+ Open @@ -553,11 +580,21 @@ function FavouritesTable({ return rows.filter((item) => favouriteMatchesCommandScopes(item, commandScopes)); }, [commandScopes, items, searchTerm, selectedSet, selectedTypeId, viewMode, sortMode]); + // With the item workspace open (only at 2xl), the middle column narrows sharply. + // Drop the leading icon and the secondary Evidence column there so titles keep + // room instead of collapsing to a couple of characters. + const compact = Boolean(selectedItemId); + const rowIconClass = compact ? "hidden" : "hidden 2xl:grid"; + const evidenceHeadClass = cn("hidden px-3", compact ? "" : "w-[7rem] 2xl:table-cell"); + const evidenceCellClass = cn("hidden px-3 align-middle", compact ? "" : "2xl:table-cell"); + return ( -
-
-

- {tableRows.length} {tableRows.length === 1 ? "item" : "items"} +

+
+

+ + {tableRows.length} + {tableRows.length === 1 ? "item" : "items"} {tableRows.length !== items.length ? ` of ${items.length}` : ""}

@@ -583,25 +620,25 @@ function FavouritesTable({
- +
- - + - - - - - @@ -620,18 +657,32 @@ function FavouritesTable({ "bg-[color:var(--clinical-accent-soft)]/45 shadow-[inset_3px_0_0_var(--clinical-accent)]", )} > - @@ -644,14 +695,16 @@ function FavouritesTable({ {item.set} - - {/* The Evidence column is hidden below lg, so span 5 there and 6 at lg+. */} + {/* The Evidence column is hidden below 2xl, so span 5 there and 6 at 2xl+. */} {[ - { colSpan: 5, className: "px-4 py-10 text-center lg:hidden" }, - { colSpan: 6, className: "hidden px-4 py-10 text-center lg:table-cell" }, + { colSpan: 5, className: "px-4 py-10 text-center 2xl:hidden" }, + { colSpan: 6, className: "hidden px-4 py-10 text-center 2xl:table-cell" }, ].map(({ colSpan, className }) => (
+
Item + Type + Set + Evidence + Last used + Action
+ + {item.evidence} - {item.lastUsed} + + {item.lastUsed} + event.stopPropagation()}>
@@ -672,10 +725,10 @@ function FavouritesTable({ })} {tableRows.length === 0 ? (
@@ -980,7 +1033,7 @@ export function FavouritesCommandLibraryPage({ query = "" }: { query?: string }) onSelectViewMode={setViewMode} />
-
+
@@ -1007,6 +1060,24 @@ export function FavouritesCommandLibraryPage({ query = "" }: { query?: string })
+ + + + )} - -
{selectedItem ? setSelectedItemId(null)} /> : null} diff --git a/src/components/clinical-dashboard/favourites-library-nav.tsx b/src/components/clinical-dashboard/favourites-library-nav.tsx index 64a97e28c..48661f9f7 100644 --- a/src/components/clinical-dashboard/favourites-library-nav.tsx +++ b/src/components/clinical-dashboard/favourites-library-nav.tsx @@ -377,6 +377,123 @@ function SetBrowseCard({ ); } +/** + * Surfaces the sidebar's primary quick views (All / Source-backed / Pinned / + * Recently used) as a horizontally scrollable chip rail below `lg`, where the + * full sidebar is hidden. Keeps small-screen navigation at parity with desktop. + */ +export function FavouritesMobileQuickViews({ + items, + selectedSetId, + selectedTypeId, + viewMode, + onSelectSet, + onSelectType, + onSelectViewMode, +}: Pick< + FavouritesNavProps, + "items" | "selectedSetId" | "selectedTypeId" | "viewMode" | "onSelectSet" | "onSelectType" | "onSelectViewMode" +>) { + const sourceBackedCount = items.filter(isSourceBacked).length; + const pinnedCount = items.filter((item) => item.pinned).length; + const allActive = !selectedSetId && viewMode === "all" && selectedTypeId === "all"; + + const chips: Array<{ + id: string; + icon: LucideIcon; + label: string; + count: number; + active: boolean; + onClick: () => void; + }> = [ + { + id: "all", + icon: LayoutGrid, + label: "All", + count: items.length, + active: allActive, + onClick: () => { + onSelectViewMode("all"); + onSelectSet(null); + onSelectType("all"); + }, + }, + { + id: "source-backed", + icon: ShieldCheck, + label: "Source-backed", + count: sourceBackedCount, + active: viewMode === "source-backed", + onClick: () => { + onSelectSet(null); + onSelectViewMode(viewMode === "source-backed" ? "all" : "source-backed"); + }, + }, + { + id: "pinned", + icon: Pin, + label: "Pinned", + count: pinnedCount, + active: viewMode === "pinned", + onClick: () => { + onSelectSet(null); + onSelectViewMode(viewMode === "pinned" ? "all" : "pinned"); + }, + }, + { + id: "recent", + icon: Search, + label: "Recently used", + count: items.length, + active: viewMode === "recent", + onClick: () => { + onSelectSet(null); + onSelectViewMode(viewMode === "recent" ? "all" : "recent"); + }, + }, + ]; + + return ( +
+
+
+ {chips.map((chip) => { + const Icon = chip.icon; + return ( + + ); + })} +
+
+
+ ); +} + export function FavouritesMobileBrowseRail({ sets, selectedSetId, From 2ef16ea89c382738defb4f6b0c335241bb76d6b4 Mon Sep 17 00:00:00 2001 From: "coderabbitai[bot]" <136622811+coderabbitai[bot]@users.noreply.github.com> Date: Fri, 17 Jul 2026 20:09:51 +0000 Subject: [PATCH 2/2] fix: apply CodeRabbit auto-fixes Fixed 2 file(s) based on 2 unresolved review comments. Co-authored-by: CodeRabbit --- .../favourites-command-library-page.tsx | 14 ++++++++++---- .../clinical-dashboard/favourites-library-nav.tsx | 2 +- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/clinical-dashboard/favourites-command-library-page.tsx b/src/components/clinical-dashboard/favourites-command-library-page.tsx index c0073b16a..b1a58f69a 100644 --- a/src/components/clinical-dashboard/favourites-command-library-page.tsx +++ b/src/components/clinical-dashboard/favourites-command-library-page.tsx @@ -696,10 +696,16 @@ function FavouritesTable({
- - - {item.evidence} - + {isSourceBacked(item) ? ( + + + {item.evidence} + + ) : ( + + {item.evidence} + + )} diff --git a/src/components/clinical-dashboard/favourites-library-nav.tsx b/src/components/clinical-dashboard/favourites-library-nav.tsx index 48661f9f7..2cd6da4a1 100644 --- a/src/components/clinical-dashboard/favourites-library-nav.tsx +++ b/src/components/clinical-dashboard/favourites-library-nav.tsx @@ -466,7 +466,7 @@ export function FavouritesMobileQuickViews({ aria-pressed={chip.active} onClick={chip.onClick} className={cn( - "inline-flex h-10 shrink-0 items-center gap-1.5 rounded-full border px-3.5 text-sm-minus font-semibold transition", + "inline-flex h-tap shrink-0 items-center gap-1.5 rounded-full border px-3.5 text-sm-minus font-semibold transition", chip.active ? "border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)] shadow-[var(--shadow-tight)]" : "border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--text-muted)] hover:border-[color:var(--border-strong)] hover:text-[color:var(--text)]",