feat(ui): CheckpointsTable component (replaces row list)

Full-width table with Version / JAR / Deployed-by / Deployed / Strategy /
Outcome columns, pagination cap (jarRetentionCount, default 10), pruned-JAR
archived state, empty state, and row-click onSelect handler. 8/8 tests pass.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-23 13:15:30 +02:00
parent 48217e0034
commit 1b4b522233
3 changed files with 270 additions and 0 deletions

View File

@@ -309,3 +309,69 @@
gap: 8px;
align-items: center;
}
/* CheckpointsTable */
.checkpointsTable {
margin-top: 8px;
}
.checkpointsTable table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.checkpointsTable th {
text-align: left;
padding: 10px 12px;
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
background: var(--bg-inset);
border-bottom: 1px solid var(--border);
}
.checkpointsTable td {
padding: 12px;
border-top: 1px solid var(--border);
vertical-align: top;
}
.checkpointsTable tbody tr {
cursor: pointer;
}
.checkpointsTable tbody tr:hover {
background: var(--bg-inset);
}
.jarCell { font-family: monospace; font-size: 12px; }
.jarName { font-family: monospace; }
.jarStrike { text-decoration: line-through; }
.archivedHint { font-size: 11px; color: var(--amber, #f59e0b); }
.isoSubline { font-size: 11px; color: var(--text-muted); }
.muted { color: var(--text-muted); }
.strategyPill,
.outcomePill {
display: inline-block;
padding: 2px 8px;
border-radius: 3px;
font-size: 11px;
background: var(--bg-inset);
}
/* outcome status colors */
.outcome-STOPPED { color: var(--text-muted); }
.outcome-DEGRADED {
background: var(--amber-bg, rgba(245, 158, 11, 0.18));
color: var(--amber, #f59e0b);
}
.chevron { color: var(--text-muted); font-size: 14px; text-align: right; }
.showOlderBtn {
width: 100%;
padding: 10px;
background: transparent;
border: 0;
color: var(--text-muted);
cursor: pointer;
font-size: 12px;
}
.showOlderBtn:hover {
background: var(--bg-inset);
color: var(--text-primary);
}