Pad the settings cards, and make status and timeline readable at a glance

The Team settings cards (Escalation, Sources, Members, Switches, Single
sign-on) printed their text flush against the border with the button in the
corner: .card has never had padding and these never added any. A card with
a header row now pads itself, with the title left, the button right and a
divider before the content.

The incident page no longer carries the primary action twice. The copy up
by the status is gone and the sticky bar keeps it; Note is the timeline's
link, with Copy in the bar for a resolved incident, and the phone's More
sheet drops what the bar already shows. In the queue, a row's title wraps
to two lines so the namespace that tells rows apart is no longer cut off,
zero counts on the filter chips are dimmed, and a row omits the status the
filter already states and the team once the queue is narrowed to one.

Status colours failed 4.5:1 against their own fill in the light theme
(warning 3.6, info 4.1, critical 4.4, ok 4.45, snooze 4.49), so the light
tokens are darker; the dark theme already passed and is unchanged. Severity
badges now carry a shape as well as a colour, and each timeline event has an
icon. An escalation that ran out of levels, a failed notification and a
silent heartbeat stand out in amber or red.

Web UI only: no endpoint or JSON shape changed, so nothing to mirror in
terdut-tui.

internal/web/static/js/queue.js

@@ -1,7 +1,7 @@
 // The incident queue: filter chips and a list of incident rows.
 
 import * as api from './api.js';
-import { h, clear, badge, emptyState, spinner } from './ui.js';
+import { h, clear, badge, severityBadge, emptyState, spinner } from './ui.js';
 import { ago, until, isFuture, severityClass, labelSummary, teamColorClass } from './format.js';
 import { state, myID, setSelectedTeam, onTeamChange } from './state.js';
 import * as onboarding from './onboarding.js';
@@ -129,7 +129,7 @@ function renderChips() {
       'aria-selected': String(f.id === filter),
       onclick: () => setFilter(f.id),
       text: f.label,
-    }, count != null && h('span', { class: 'count', text: String(count) }));
+    }, count != null && h('span', { class: count === 0 ? 'count zero' : 'count', text: String(count) }));
   });
 
   // Somebody in one team has nothing to choose between, so the row of team
@@ -194,6 +194,10 @@ function row(inc, index) {
   const snoozed = isFuture(inc.snoozed_until);
   const resolved = inc.status === 'resolved';
 
+  // A filter that already says what the status is (Triggered, Resolved,
+  // Archived) would only have every row repeat it.
+  const impliedStatus = filter === 'triggered' || filter === 'resolved' || filter === 'archived';
+
   let status;
   if (resolved) status = badge('Resolved', 'st-resolved');
   else if (snoozed) status = badge(`Snoozed · ${until(inc.snoozed_until)}`, 'st-snoozed');
@@ -214,7 +218,9 @@ function row(inc, index) {
   // The team is shown only to somebody who is in more than one. For everybody
   // else it is the same word on every row, which is noise rather than
   // information.
-  const team = state.teams.length > 1 && inc.team_name
+  // ...and not when the queue is already narrowed to one team: that team is
+  // the same word on every row there too.
+  const team = state.teams.length > 1 && state.selectedTeamID == null && inc.team_name
     ? h('span', { class: 'row-team', text: inc.team_name })
     : null;
 
@@ -227,10 +233,10 @@ function row(inc, index) {
     h('div', { class: 'row-title', text: inc.title }),
     h('div', { class: 'row-age', title: inc.triggered_at, text: `Triggered ${ago(inc.triggered_at)}` }),
     h('div', { class: 'row-meta' },
-      status,
+      !impliedStatus && status,
       // The left-border colour alone doesn't say what it means; spell it out
       // too, same badge the incident detail page uses for severity.
-      inc.severity && badge(inc.severity, `plain ${severityClass(inc.severity)}`),
+      inc.severity && severityBadge(inc.severity),
       assignee,
       team,
       labels && h('span', { class: 'labels', text: labels }),