diff --git a/src/components/clinical-dashboard/favourites-command-library-page.tsx b/src/components/clinical-dashboard/favourites-command-library-page.tsx index f47cc51b..f48a6fc4 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}
-
-
-
Last used
-
{item.lastUsed}
+
+ + + {item.set} + + + ยท + + {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,22 @@ 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} - + + {isSourceBacked(item) ? ( + + + {item.evidence} + + ) : ( + + {item.evidence} + + )} - {item.lastUsed} + + {item.lastUsed} + event.stopPropagation()}>
@@ -672,10 +731,10 @@ function FavouritesTable({ })} {tableRows.length === 0 ? (
@@ -980,7 +1039,7 @@ export function FavouritesCommandLibraryPage({ query = "" }: { query?: string }) onSelectViewMode={setViewMode} />
-
+
@@ -1007,6 +1066,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 64a97e28..2cd6da4a 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,