swarm-ui: add the custom issue-report page

New /issues route: a sortable, filterable table over open issues across
every repo that has one -- repo picker (default: no filter, every repo
combined), hide-blocked toggle, and a label multi-select, consuming
swarm-controller's GET /api/repos + GET /api/issue-report / GET
/api/repos/{org}/{repo}/issue-report (see hyperhive#3831 for the row
shape). blocked and depended_on_by_count arrive pre-resolved per row --
this page does no dependency-graph walking of its own, just sort/filter
over what it's given. Default sort is depended_on_by_count descending,
matching mara's framing of the report's headline ordering.

Widened Table's TableColumn.header from string to ComponentChildren so
a column can carry a real clickable sort-toggle button instead of
forking a second table primitive for this one page.
This commit is contained in:
iris 2026-08-31 18:26:06 +02:00 committed by mara
commit e815c7cb5c
5 changed files with 338 additions and 1 deletions

View file

@ -0,0 +1,43 @@
/* <IssueReportPage> the repo-picker + hide-blocked toggle sit in one
row (mirrors CreateAgentForm's row/wrap pattern: flex-wrap so narrow
viewports stack instead of overflowing), the label chips get their
own row below since the set is open-ended and shouldn't fight the
controls row for width. Sort buttons live inside the table's own
`<th>` cells (Table.tsx's `header` now accepts real markup for
exactly this) so they inherit the table's header styling for free
only the pointer cursor + no-underline reset is this page's to own. */
.issue-report-controls {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 1.25em;
margin-bottom: 1em;
}
.issue-report-toggle {
display: flex;
align-items: center;
gap: 0.4em;
cursor: pointer;
}
.issue-report-labels {
display: flex;
flex-wrap: wrap;
gap: 0.6em;
margin-bottom: 1em;
}
.issue-report-label-chip {
display: flex;
align-items: center;
gap: 0.35em;
cursor: pointer;
color: var(--muted);
}
.issue-report-sort-btn {
background: none;
border: none;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
cursor: pointer;
}