niklas/terdut-server
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 35 Wiki Activity

Give the Admin tab sub-sections of its own

Browse Source 
Administration was one scrolling page with three cards on it: the teams,
the people, and the settings. There was no way to link somebody to the
settings, no way back to the top of the user list but scrolling, and the
poll loop refetched all three endpoints every tick however little of the
page you were looking at.

Each is now a route -- /admin/teams, /admin/users, /admin/settings --
reached from a strip across the top, with /admin an overview that says
how many of each there are. The three cards themselves are untouched;
they are simply rendered one at a time, so a tab fetches only what it
shows. The Users page is the exception and fetches the teams too, since
its invite form has to offer a team to invite somebody into.

The strip is ordinary links rather than chips. Chips filter what a page
already shows, here and in the queue, and these four go somewhere: the
browser's Back walks them, a reload lands where you were, and the click
is intercepted by the same handler every other link in the app uses.
The current one is marked with aria-current="page", the convention the
tab bar has used since it existed, so the state lives on the attribute
and not in a class.

admin.js owns the table of the four routes, because it also builds the
strip that links to them; app.js parses against that table rather than
keeping a second list to drift from it. Adding a fifth sub-section is
one line.

The bottom tab bar still has six items. 56b8191 made it count-agnostic
when Admin arriving pushed it past four, and the note there records that
six at 420px already leaves 55-65px each -- so the sub-sections went
inside the Admin page rather than beside it.

A person's page keeps its own route at /admin/users/{id}; its back link
now returns to the user list rather than to the top of everything.

Nobody has looked at this in a browser, the same caveat ac9af8e carried.
What is checked is the wiring: the module graph evaluates at every admin
URL, all four tabs render against live server responses with one
aria-current each and the fetches the table above describes, the
non-administrator branch still refuses without fetching, and the server
serves index.html for each new path so a reload survives. The strip's
appearance at phone and desktop width is not checked.

Claude-Session: https://claude.ai/code/session_01RHPj4ggeFdEjKKfm4SHbD7
This commit is contained in:
Niklas Ye
2026-09-21 21:11:08 +02:00
parent 7b9a337d25
commit 07914d5cdb
5 changed files with 161 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/static/js/admin.js
+97 -13
View File
@@ -1,6 +1,12 @@
// Administration: the teams on this server, the people who can sign in, and
// the settings that change how the server behaves.
//
// Each of those three is a route of its own, reached from a strip across the
// top, with /admin itself an overview. They used to be three cards stacked on
// one page, which meant no way to link to the settings, no way back to the top
// of the user list but scrolling, and a poll that refetched all three endpoints
// however little of the page you were looking at.
//
// Only rendered for a system administrator. The server enforces that on every
// endpoint regardless — hiding a section is a courtesy to the reader, not a
// permission — so this view simply says so rather than pretending to be a
@@ -12,12 +18,34 @@ import { state, myID } from './state.js';
const view = () => document.getElementById('view-admin');
let data = null; // { teams, users, settings }
// The sub-sections, in the order the strip shows them. The overview is /admin
// itself, so it has no tab of its own. This table is the only place the four
// routes are written down: app.js parses against it and the strip is built
// from it, so adding a fifth is one line here.
export const TABS = [
{ tab: null, path: '/admin', label: 'Overview' },
{ tab: 'teams', path: '/admin/teams', label: 'Teams' },
{ tab: 'users', path: '/admin/users', label: 'Users' },
{ tab: 'settings', path: '/admin/settings', label: 'Settings' },
];
// Which sub-section is open. Remembered rather than passed, because the poll
// loop calls refresh() with no route — the same reason adminuser.js keeps its
// user ID in the module.
let tab = null;
let data = null; // whatever the current tab needs; the shape varies by tab
let error = null;
let busy = false;
export function show() {
if (!data) clear(view(), spinner());
export function show(route) {
const next = route?.tab ?? null;
// A different sub-section wants different data, so the old answer goes
// rather than being shown under the new heading until the fetch lands.
if (next !== tab) {
tab = next;
data = null;
}
if (!data) clear(view(), subnav(), spinner());
refresh();
}
@@ -28,12 +56,7 @@ export async function refresh() {
return;
}
try {
const [teams, users, settings] = await Promise.all([
api.adminTeams(),
api.users(),
api.adminSettings(),
]);
data = { teams, users, settings };
data = await load();
error = null;
} catch (err) {
error = err.message;
@@ -41,6 +64,16 @@ export async function refresh() {
render();
}
// Only what the open sub-section shows. Users is the one that needs two: its
// invite form has to offer a team to invite somebody into, and the overview
// counts both.
async function load() {
if (tab === 'teams') return { teams: await api.adminTeams() };
if (tab === 'settings') return { settings: await api.adminSettings() };
const [teams, users] = await Promise.all([api.adminTeams(), api.users()]);
return { teams, users };
}
function render() {
if (!state.me?.user?.is_admin) {
clear(view(), h('div', { class: 'card' },
@@ -48,14 +81,65 @@ function render() {
return;
}
if (!data) {
clear(view(), error ? h('div', { class: 'load-error', text: error }) : spinner());
clear(view(), subnav(), error ? h('div', { class: 'load-error', text: error }) : spinner());
return;
}
clear(view(),
subnav(),
error && h('div', { class: 'load-error', text: `Showing older data: ${error}` }),
teamsCard(),
usersCard(),
settingsCard(),
section(),
);
}
function section() {
if (tab === 'teams') return teamsCard();
if (tab === 'users') return usersCard();
if (tab === 'settings') return settingsCard();
return overview();
}
// The strip across the top of every admin page. Ordinary links rather than
// 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' },
TABS.map((t) => h('a', {
class: 'subnav-link',
href: t.path,
text: t.label,
'aria-current': t.tab === tab ? 'page' : null,
})));
}
// --- overview --------------------------------------------------------------
// /admin itself. The strip already links to the three, so this earns its place
// by saying how much of each there is — the one thing a menu cannot.
function overview() {
const admins = data.users.filter((u) => u.is_admin).length;
const disabled = data.users.filter((u) => u.disabled_at).length;
const open = data.teams.reduce((n, t) => n + t.open_incidents, 0);
const people = [`${admins} ${admins === 1 ? 'administrator' : 'administrators'}`];
if (disabled > 0) people.push(`${disabled} disabled`);
return h('div', { class: 'admin-menu' },
menuItem('/admin/teams', 'Teams', data.teams.length,
open > 0
? `${open} open ${open === 1 ? 'incident' : 'incidents'} between them.`
: 'Nothing open anywhere.'),
menuItem('/admin/users', 'Users', data.users.length, `${people.join(', ')}.`),
menuItem('/admin/settings', 'Settings', null,
'How the server behaves, and where it is plugged in.'),
);
}
function menuItem(href, label, count, note) {
return h('a', { class: 'card admin-menu-item', href },
h('div', { class: 'admin-menu-head' },
h('strong', { text: label }),
count != null && h('span', { class: 'admin-menu-count', text: String(count) })),
h('p', { class: 'muted small', text: note }),
);
}