Make the web UI easier to read, and add a theme toggle

Secondary text was too dim to read: --faint sat at about 4.0:1 in the dark
theme and 3.3:1 in the light one, and it carries row ages, hints and labels.
It now clears 4.5:1 in both. The dark surfaces and borders are a step
further apart so cards stand out from the page, and the light borders a
touch stronger.

Account has an Appearance section with System, Light and Dark. System is
the old behaviour. The choice is per browser, kept in localStorage, and is
applied by a small js/theme.js loaded from <head> so there is no flash of
the other theme; the CSP allows no inline script, hence a file of its own.

On-call is redesigned: a hero card for who is on call now, with when the
shift ends for the selected team, and the week as seven day cells instead of
grouped rows. Today is marked with a neutral tint and a bar rather than the
accent colour, which now means only things you can act on; your own days are
marked by the "you" badge, not a fill. On a wide screen the hero and week sit
beside your shifts under a page title. The page stays read-only: shifts are
still edited in the TUI.

Smaller fixes: the team switcher no longer appears in the phone's bottom bar
as well as the top bar (a shared rule overrode the one that hides it); the
Team and Admin tab strips fade at the edge and scroll the open section into
view, so "Sources" is no longer cut off; and "All clear" is a green status
badge with a check instead of a grey pill that looked like a button.

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

internal/web/static/js/account.js

@@ -28,6 +28,9 @@ function render() {
 
     ...passwordSection(user, hasPassword),
 
+    h('div', { class: 'page-head' }, h('h2', { text: 'Appearance' })),
+    themePicker(),
+
     h('div', { class: 'only-desktop' },
       h('div', { class: 'page-head' }, h('h2', { text: 'Keyboard' })),
       h('div', { class: 'card' }, shortcuts())),
@@ -39,6 +42,23 @@ function render() {
   );
 }
 
+// System / Light / Dark. Per browser, not per account: it lives in
+// localStorage (see js/theme.js), the same place the selected team does.
+const THEMES = [['system', 'System'], ['light', 'Light'], ['dark', 'Dark']];
+
+function themePicker() {
+  const theme = window.terdutTheme;
+  const buttons = THEMES.map(([value, text]) => h('button', {
+    class: 'chip', type: 'button', role: 'radio', text,
+    onclick: () => { theme.set(value); sync(); },
+  }));
+  const sync = () => buttons.forEach((b, i) => b.setAttribute('aria-checked', String(THEMES[i][0] === theme.get())));
+  sync();
+  return h('div', { class: 'card card-pad' },
+    h('div', { class: 'chips theme-picker', role: 'radiogroup', 'aria-label': 'Theme' }, ...buttons),
+    h('p', { class: 'muted small', text: 'System follows your device. This applies to this browser only.' }));
+}
+
 // Where this user's pages go. The onboarding checklist's first step sends
 // people here for it, and until now there was nothing here to send them to:
 // the topic could only be set with curl or by an administrator.

internal/web/static/js/admin.js

@@ -102,13 +102,18 @@ function section() {
 // buttons, because these are four URLs: app.js intercepts the click, the
 // browser's Back walks them, and a reload lands where you were.
 function subnav() {
-  return h('nav', { class: 'subnav', 'aria-label': 'Administration' },
+  const nav = h('nav', { class: 'subnav', 'aria-label': 'Administration' },
     TABS.map((t) => h('a', {
       class: 'subnav-link',
       href: t.path,
       text: t.label,
       'aria-current': t.tab === tab ? 'page' : null,
     })));
+  // On a phone the strip overflows; bring the open section into view so a
+  // tab past the edge (Sources, Switches) is never the one that is hidden.
+  requestAnimationFrame(() => nav.querySelector('[aria-current]')
+    ?.scrollIntoView({ inline: 'center', block: 'nearest' }));
+  return nav;
 }
 
 // --- overview --------------------------------------------------------------

internal/web/static/js/app.js

@@ -202,7 +202,8 @@ function updateBadges() {
 
   const pill = $('open-pill');
   pill.hidden = false;
-  pill.textContent = open ? `${open} open` : 'All clear';
+  pill.replaceChildren(...(open ? [`${open} open`] : [ui.icon('checkCircle'), 'All clear']));
+  pill.classList.toggle('all-clear', open === 0);
   pill.classList.toggle('has-triggered', triggered > 0);
   pill.classList.toggle('all-acked', open > 0 && triggered === 0);
 

internal/web/static/js/oncall.js

@@ -1,5 +1,6 @@
 // On-call: who is on duty now, the week around it, and your own next shifts.
-// Read-only for now; the TUI edits the schedule.
+// Read-only for now; the TUI edits the schedule, so there is no add or swap
+// button here.
 //
 // One team's rota at a time — the viewer's first team, since a viewer in one
 // team has nothing to choose between. "On call now" is the exception and shows
@@ -59,11 +60,17 @@ function render() {
     clear(view(), error ? h('div', { class: 'load-error', text: error }) : spinner());
     return;
   }
+  const team = currentTeam();
   clear(view(),
+    // The top bar carries the title on a phone; the desktop has none.
+    h('div', { class: 'only-desktop oncall-title' },
+      h('h1', { text: 'On-call' }),
+      team && h('p', { class: 'muted', text: `${team.name} · who is on call, the week ahead and your shifts` })),
     error && h('div', { class: 'load-error', text: `Showing older data: ${error}` }),
-    nowCard(),
-    weekCard(),
-    myShifts(),
+    h('div', { class: 'oncall-grid' },
+      h('div', { class: 'oncall-main' }, nowCard(), weekCard()),
+      h('div', { class: 'oncall-side' }, myShifts()),
+    ),
   );
 }
 
@@ -78,75 +85,73 @@ function nowCard() {
   const entries = data.now || [];
   const showTeam = entries.length > 1;
   if (entries.length === 0) {
-    return h('div', { class: 'card now-card' },
-      h('div', { class: 'avatar none', text: '–' }),
-      h('div', {},
-        h('div', { class: 'now-label', text: 'On call now' }),
-        h('div', { class: 'now-name', text: 'Nobody' }),
-      ),
-    );
+    return h('div', { class: 'card hero' },
+      h('div', { class: 'hero-label', text: 'On call now' }),
+      h('div', { class: 'hero-top' },
+        h('div', { class: 'avatar hero-avatar none', text: '–' }),
+        h('div', { class: 'hero-name', text: 'Nobody' })));
   }
-  return h('div', {}, ...entries.map((n) =>
-    h('div', { class: 'card now-card' },
-      h('div', { class: 'avatar', text: initial(n.username) }),
-      h('div', {},
-        h('div', {
-          class: 'now-label',
-          text: showTeam ? `On call now · ${n.team_name}` : 'On call now',
-        }),
-        h('div', { class: 'now-name' }, n.username, you(n.user_id)),
-      ),
-    )));
+  return h('div', { class: 'hero-list' }, ...entries.map((n) => {
+    const until = shiftEnd(n);
+    return h('div', { class: 'card hero' },
+      h('div', { class: 'hero-label', text: showTeam ? `On call now · ${n.team_name}` : 'On call now' }),
+      h('div', { class: 'hero-top' },
+        h('div', { class: 'avatar hero-avatar', text: initial(n.username) }),
+        h('div', {},
+          h('div', { class: 'hero-name' }, n.username, you(n.user_id)),
+          until && h('div', { class: 'hero-until', text: until }))));
+  }));
 }
 
-// Groups the week's 7 days into runs held by the same person (or the same
-// empty slot) — the week's own version of the consecutive-day grouping
-// myShifts does for a single person's own dates, below. Seven identical rows
-// for one person all week collapses to the one bar this way.
-function weekRuns(byDate) {
-  const runs = [];
-  for (let i = 0; i < 7; i++) {
-    const date = isoDate(addDays(weekStart, i));
-    const e = byDate.get(date) || null;
-    const uid = e ? e.user_id : null;
-    const last = runs[runs.length - 1];
-    if (last && last.uid === uid) last.to = date;
-    else runs.push({ uid, entry: e, from: date, to: date });
-  }
-  return runs;
+// "until Mon 12 Oct · ends in 3d 20h", for the current team only: the shift's
+// end is read off the rota (the run of consecutive days from today held by the
+// same person), and that is only loaded for one team. The same midnight
+// boundary the "Current shift" row below uses.
+function shiftEnd(n) {
+  const team = currentTeam();
+  if (!team || n.team_id !== team.id) return null;
+  const mine = new Map(data.upcoming.map((e) => [e.date, e.user_id]));
+  let day = new Date();
+  if (mine.get(isoDate(day)) !== n.user_id) return null;
+  while (mine.get(isoDate(addDays(day, 1))) === n.user_id) day = addDays(day, 1);
+  // Still holding the last day loaded: the shift may run on past it.
+  if (isoDate(day) >= data.upcoming.reduce((m, e) => (e.date > m ? e.date : m), '')) return null;
+  const end = addDays(parse(isoDate(day)), 1);
+  return `until ${dayName.format(end)} ${dayDate.format(end)} · ends in ${duration(end - Date.now())}`;
 }
 
+// A stable colour per person from the six-colour rcN palette. The week page
+// has no member list to take an index from (team.js does), so the id decides.
+const personClass = (userID) => `rc${(userID % 6) + 1}`;
+
+// The week as seven cells, Monday to Sunday, each showing who holds that day.
+// A hand-over in the middle of the week is visible without reading anything.
 function weekCard() {
   const byDate = new Map(data.week.map((e) => [e.date, e]));
   const today = isoDate(new Date());
   const mine = myID();
-  const days = weekRuns(byDate).map((r) => {
-    const single = r.from === r.to;
-    const cls = [
-      'day',
-      single ? '' : 'range',
-      r.from <= today && today <= r.to ? 'today' : '',
-      r.to < today ? 'past' : '',
-      r.uid === mine ? 'mine' : '',
-    ].filter(Boolean).join(' ');
-    const label = single
-      ? [h('span', { class: 'day-name', text: dayName.format(parse(r.from)) }),
-        h('span', { class: 'day-date', text: dayDate.format(parse(r.from)) })]
-      : [h('span', {
-        class: 'day-range',
-        text: `${dayName.format(parse(r.from))} ${dayDate.format(parse(r.from))} – ${dayName.format(parse(r.to))} ${dayDate.format(parse(r.to))}`,
-      })];
-    return h('li', { class: cls },
-      ...label,
-      h('span', { class: `day-who ${r.entry ? '' : 'nobody'}` }, r.entry ? r.entry.username : 'nobody', r.entry && you(r.entry.user_id)),
-    );
-  });
+  const seen = new Map();
+  const cells = [];
+  for (let i = 0; i < 7; i++) {
+    const d = addDays(weekStart, i);
+    const date = isoDate(d);
+    const e = byDate.get(date) || null;
+    if (e) seen.set(e.user_id, e.username);
+    cells.push(h('li', {
+      class: ['strip-day', date === today && 'today', date < today && 'past'].filter(Boolean).join(' '),
+      'aria-current': date === today ? 'date' : null,
+    },
+    h('span', { class: 'strip-name', text: dayName.format(d) }),
+    h('span', { class: 'strip-date', text: String(d.getDate()) }),
+    h('span', { class: `avatar strip-avatar ${e ? personClass(e.user_id) : 'none'}`, text: e ? initial(e.username) : '–' }),
+    h('span', { class: `strip-who${e ? '' : ' nobody'}`, text: e ? (e.user_id === mine ? 'You' : e.username) : 'nobody' })));
+  }
   const thisWeek = isoDate(weekStart) === isoDate(mondayOf(new Date()));
-  return [
-    h('div', { class: 'page-head' },
+  return h('div', { class: 'card week-card' },
+    h('div', { class: 'week-head' },
       h('h2', { text: thisWeek ? 'This week' : 'Week' }),
       h('div', { class: 'week-nav' },
-        h('button', { class: 'btn btn-ghost btn-icon', type: 'button', 'aria-label': 'Previous week', onclick: () => shiftWeek(-1) },
+        h('button', { class: 'btn btn-icon week-arrow', type: 'button', 'aria-label': 'Previous week', onclick: () => shiftWeek(-1) },
           icon('chevronLeft')),
         h('button', {
           class: 'btn btn-ghost week-label',
@@ -155,12 +160,13 @@ function weekCard() {
           onclick: () => { weekStart = mondayOf(new Date()); refresh(); },
           text: `${dayDate.format(weekStart)} – ${dayDate.format(addDays(weekStart, 6))}`,
         }, h('small', { text: ` Week ${isoWeek(weekStart)}` })),
-        h('button', { class: 'btn btn-ghost btn-icon', type: 'button', 'aria-label': 'Next week', onclick: () => shiftWeek(1) },
-          icon('chevronRight')),
-      ),
-    ),
-    h('ul', { class: 'card days' }, days),
-  ];
+        h('button', { class: 'btn btn-icon week-arrow', type: 'button', 'aria-label': 'Next week', onclick: () => shiftWeek(1) },
+          icon('chevronRight')))),
+    h('ul', { class: 'strip' }, cells),
+    seen.size > 0 && h('div', { class: 'strip-legend' },
+      [...seen].map(([id, name]) => h('span', {},
+        h('i', { class: `strip-dot ${personClass(id)}` }),
+        id === mine ? `${name} (you)` : name))));
 }
 
 // myShifts groups your upcoming dates into runs of consecutive days, then

internal/web/static/js/team.js

@@ -168,13 +168,18 @@ function section() {
 // buttons, because these are six URLs: app.js intercepts the click, the
 // browser's Back walks them, and a reload lands where you were.
 function subnav() {
-  return h('nav', { class: 'subnav', 'aria-label': 'Team' },
+  const nav = h('nav', { class: 'subnav', 'aria-label': 'Team' },
     TABS.map((t) => h('a', {
       class: 'subnav-link',
       href: t.path,
       text: t.label,
       'aria-current': t.tab === tab ? 'page' : null,
     })));
+  // On a phone the strip overflows; bring the open section into view so a
+  // tab past the edge (Sources, Switches) is never the one that is hidden.
+  requestAnimationFrame(() => nav.querySelector('[aria-current]')
+    ?.scrollIntoView({ inline: 'center', block: 'nearest' }));
+  return nav;
 }
 
 // Names which team's settings the six sections below belong to. It used to be

internal/web/static/js/theme.js

@@ -0,0 +1,45 @@
+// Theme override: System (no attribute, the OS decides), Light or Dark.
+//
+// A classic script loaded from <head>, not a module, so the saved choice is on
+// <html> before the first paint and a Dark user on a light OS never sees a
+// flash. The CSP allows no inline script, hence a file of its own. Account
+// (account.js) reads and writes the choice through window.terdutTheme.
+(function () {
+  var KEY = 'terdut.theme';
+  var COLORS = { light: '#f5f6f8', dark: '#0f1115' };
+
+  function get() {
+    try {
+      var v = localStorage.getItem(KEY);
+      return v === 'light' || v === 'dark' ? v : 'system';
+    } catch (e) {
+      return 'system'; // storage unavailable
+    }
+  }
+
+  // The browser chrome colour follows the choice too; the two <meta>s are
+  // media-keyed to the OS, so a forced theme sets both to the same colour.
+  function apply(theme) {
+    var root = document.documentElement;
+    if (theme === 'system') root.removeAttribute('data-theme');
+    else root.setAttribute('data-theme', theme);
+    var metas = document.querySelectorAll('meta[name="theme-color"]');
+    for (var i = 0; i < metas.length; i++) {
+      var scheme = /dark/.test(metas[i].media) ? 'dark' : 'light';
+      metas[i].content = COLORS[theme === 'system' ? scheme : theme];
+    }
+  }
+
+  function set(theme) {
+    try {
+      if (theme === 'system') localStorage.removeItem(KEY);
+      else localStorage.setItem(KEY, theme);
+    } catch (e) {
+      /* storage unavailable: applies for this page view only */
+    }
+    apply(theme);
+  }
+
+  window.terdutTheme = { get: get, set: set };
+  apply(get());
+})();