7003560569
Mara: "result looks like the shape i am looking for, but the code does not. you did not follow component first principle" - the card's clickable/selectable mechanics, the card-view filter trigger+popover, and the list+detail split layout were all one-off page-local JSX in AgentsPage.tsx instead of docs/web-ui/design-guide.md's "Component-first design" primitives. Three new ui/ components, each with a same-day /components demo section per that doc's own rule: - ui/card/Card.tsx - the role=button/keyboard-activation/selected mechanics AgentCard now wraps agent-specific content around, instead of owning them itself. - ui/multiselect-filter/MultiselectFilter.tsx - the checkbox-list trigger+popover control. This was also a straight duplicate of Table's own inline popover content once AgentsPage's filter toolbar needed the identical thing; Table now renders the same MultiselectFilterOptions piece too (keeping its own th-anchored trigger and fixed+portal positioning, which are genuinely table-specific), not a second copy. - ui/split-view/SplitView.tsx - the list+detail flex-wrap layout, no opinion on what's inside either pane. AgentsPage.tsx's own CSS shrinks to just the agent-specific content inside these primitives (card line/message layout, detail-panel field grid, the name-search input) - the container/positioning rules moved to each component's own colocated CSS. No behavior change for any other Table caller (HivesPage, IssueReportPage, the components demo's own Table samples) - the popover's visual output is identical, just sourced from the shared component instead of inline JSX. Verified: typecheck/build clean, real screenshots of both AgentsPage (pixel-identical to before) and the three new /components sections, plus a live click confirming MultiselectFilter's popover opens correctly on the demo page too.
26 lines
807 B
CSS
26 lines
807 B
CSS
.ui-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35em;
|
|
padding: 0.75em 1em;
|
|
border: 1px solid var(--border);
|
|
border-radius: 0.5em;
|
|
background: var(--bg-elev);
|
|
}
|
|
/* Only an interactive `Card` (has `onClick`) gets pointer/hover
|
|
affordance — a plain static one shouldn't look clickable. */
|
|
[role="button"].ui-card {
|
|
cursor: pointer;
|
|
}
|
|
[role="button"].ui-card:hover,
|
|
[role="button"].ui-card:focus-visible {
|
|
border-color: var(--purple);
|
|
outline: none;
|
|
}
|
|
/* A solid border (not just the hover tint above, which needs to keep
|
|
meaning "hovering", not double as "selected") plus a faint fill so a
|
|
selected card still reads once the pointer moves away. */
|
|
.ui-card-selected {
|
|
border-color: var(--purple);
|
|
background: color-mix(in srgb, var(--purple) 10%, var(--bg-elev));
|
|
}
|