Give the sidebar groups, and tidy the tables, disclosures and tab bar

The desktop sidebar is now grouped: Queue, On-call, Alerts and Stats; Team
and Admin; then Account at the foot, shown as the signed-in person with an
avatar and their name. The active item has a bar as well as a tint. The
queue's row of team chips is gone: the team selector is the one place the
team is chosen, and the chips offered the same choice a second time.

Tables get 16px between columns, so a right-aligned count no longer touches
the text beside it. An empty SSO group reads "Not configured" instead of a
dash, and the main action on each of those pages (New source, New switch,
Add member, Assign, and the admin Add, Create invite and Create) is a filled
button, with Edit and Cancel staying secondary. The bare triangles on
"Grouped by" and the label lists are real disclosure buttons: a chevron
that turns and a 44px target on a touch screen.

On a phone the More tab was a <button> that kept the browser's grey box, so
it looked highlighted next to four plain links. It now matches them, the
labels are 12px and the open tab's icon is filled.

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

internal/web/static/js/queue.js

@@ -2,8 +2,8 @@
 
 import * as api from './api.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 { ago, until, isFuture, severityClass, labelSummary } from './format.js';
+import { state, myID, onTeamChange } from './state.js';
 import * as onboarding from './onboarding.js';
 import { navigate } from './app.js';
 
@@ -132,36 +132,9 @@ function renderChips() {
     }, 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
-  // chips appears only when there is more than one. The default is all of
-  // them: the combined queue is the point.
-  if (state.teams.length > 1) {
-    chips.push(h('span', { class: 'chip-sep' }));
-    chips.push(h('button', {
-      class: 'chip',
-      type: 'button',
-      role: 'tab',
-      'aria-selected': String(state.selectedTeamID == null),
-      onclick: () => setSelectedTeam(null),
-    }, h('span', { class: 'team-dot' }), ' All teams'));
-    for (const team of state.teams) {
-      chips.push(h('button', {
-        class: 'chip',
-        type: 'button',
-        role: 'tab',
-        'aria-selected': String(team.id === state.selectedTeamID),
-        onclick: () => setSelectedTeam(team.id),
-      },
-        h('span', { class: `team-dot ${teamColorClass(team.id)}` }),
-        ' ' + team.name,
-      ));
-    }
-  }
-
-  // A scroll hint for the phone-width row, where the chips can run off the
-  // right edge with nothing to suggest there's more; the desktop sidebar
-  // wraps instead of scrolling (see .pane-list .chips), so this fades out
-  // there via CSS rather than being left out here.
+  // There are no team chips here: the team selector in the sidebar (and in the
+  // phone's top bar) is the one place the team is chosen, and chips for it
+  // would be the same choice offered twice.
   chips.push(h('span', { class: 'chips-fade', 'aria-hidden': 'true' }));
 
   clear(el, chips);