domma-cms 1.8.32 → 1.8.34

package/plugins/garage/admin/views/garage.js

@@ -0,0 +1,581 @@
+/**
+ * Garage - admin screen.
+ *
+ * Look up a UK vehicle with the DVLA (the plate box at the top), save it to My
+ * Garage, and see its MOT and road tax at a glance - the ones coming due or run
+ * out first, and on the sidebar badge. History keeps every lookup.
+ *
+ * Built on the Tool upgrade path: domma-reactive state bound with
+ * M.applyBindings; rows with a context menu (right-click, ⋮, Shift+F10) and a
+ * click for details; settings (the DVLA API key) in a slideover from the
+ * banner's cog; help popovers; a sidebar badge (countUrl /count); viewLifetime
+ * teardown. The admin's helpers are imported at run time - a plugin must not
+ * import admin/ statically, since the updater replaces it wholesale.
+ *
+ * The API key is a secret: the settings form asks before a typed key is thrown
+ * away, but is never kept as a draft.
+ */
+import {arrangeVehicles, displayReg, isoDay, normaliseReg, settingsWithKey, shortDay, vehicleAlert, vehicleRow} from '../lib/garage.js';
+import {fmtDateTime} from '../../../_lib/admin/ui/dates.js';
+
+const API = '/plugins/garage';
+const ROUTE = /^#\/plugins\/garage\b/;
+const SIDEBAR_URL = '#/plugins/garage';
+const DVLA_PORTAL = 'https://developer-portal.driver-vehicle-licensing.api.gov.uk';
+
+const ROW = `
+<div class="gx-row" data-id="{{id}}" tabindex="0" data-bind-class="rowCls">
+    <span class="gx-plate">{{reg}}</span>
+    <span class="gx-main"><strong>{{title}}</strong><small data-bind-text="meta"></small></span>
+    <span class="gx-chips">
+        <span class="gx-chip" data-bind-class="motTone" data-bind-text="motText"></span>
+        <span class="gx-chip" data-bind-class="taxTone" data-bind-text="taxText"></span>
+        <span class="gx-chip is-saved" data-bind-hidden="!savedChip">In My Garage</span>
+    </span>
+    <button type="button" class="gx-kebab" aria-label="Actions for {{reg}}" title="Actions">⋮</button>
+</div>`;
+
+/** Filled by loadKit() on first mount. */
+let apiRequest, addBannerAction, helpPopovers, onceClosed, openMenuAt, viewLifetime, sidebarCount, showLoading, SHAPES;
+let lifetime;
+
+async function loadKit() {
+    if (lifetime) return;
+    const [api, chrome, help, kit, loading] = await Promise.all([
+        import('/admin/js/api.js'),
+        import('/admin/js/lib/plugin-chrome.js').catch(() => ({})),
+        import('/admin/js/lib/help-popover.js').catch(() => ({})),
+        import('/admin/js/lib/tool-kit.js'),
+        import('/admin/js/lib/loading.js').catch(() => ({}))
+    ]);
+    ({apiRequest} = api);
+    addBannerAction = chrome.addBannerAction || null;
+    helpPopovers = help.helpPopovers || (() => () => {});
+    ({onceClosed, openMenuAt, viewLifetime} = kit);
+    sidebarCount = kit.sidebarCount || ((url) => {
+        try { window.dispatchEvent(new CustomEvent('dm:sidebar-count', {detail: {url}})); } catch { /* no sidebar */ }
+    });
+    // An older core without loading.js: the slots show their "Loading…" text.
+    showLoading = loading.showLoading || (() => ({done: () => Promise.resolve()}));
+    SHAPES = loading.SHAPES || {};
+    lifetime = viewLifetime(ROUTE);
+}
+
+/** E.confirm / E.prompt / a slideover title render HTML: user text goes in escaped. */
+const esc = (s) => String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+const refreshBadge = () => sidebarCount(SIDEBAR_URL);
+
+function fragment(html) {
+    const t = document.createElement('template');
+    t.innerHTML = html.trim();
+    return t.content.firstElementChild;
+}
+
+const fmtDay = (d) => (d ? shortDay(d) : '-');
+
+export const garageView = {
+    templateUrl: '/plugins/garage/admin/templates/garage.html',
+
+    async onMount($container) {
+        await loadKit();
+        if (!ROUTE.test(location.hash)) return;
+        lifetime.reset();
+        const root = $container.get(0).querySelector('.gx') || $container.get(0);
+        const here = () => ROUTE.test(location.hash) && root.isConnected;
+        const scope = (d) => { lifetime.add(d); return d; };
+
+        // ---- State ----
+        const today = M.observable(isoDay());
+        const vehicles = M.observable([]);            // the whole history, newest first (saved ones included)
+        const loading = M.observable(true);
+        const loadError = M.observable('');
+        const reg = M.observable('');
+        const looking = M.observable(false);
+        const lookupError = M.observable('');
+        const rateNote = M.observable('');
+        const resultId = M.observable('');
+        const filter = M.observable('all');
+        const garageQuery = M.observable('');
+        const historyQuery = M.observable('');
+        const settingsLoaded = M.observable(false);
+        const hasKey = M.observable(false);
+        // Can this person change the site's key? Reading the plugin settings needs
+        // plugins.read and saving them plugins.update; a user with only the Garage
+        // permission gets a settings panel that says so rather than one that fails.
+        const canConfigure = M.observable(true);
+        // One save request per vehicle at a time. Observable, so every way in (the
+        // result's button, the details panel, the menu) greys out while it runs.
+        const toggling = M.observable([]);
+
+        const saved = M.computed(() => vehicles.value.filter(v => v.isSaved));
+        const history = vehicles;
+        const byId = (id) => vehicles.peek().find(v => v.id === id);
+        const result = M.computed(() => vehicles.value.find(v => v.id === resultId.value) || null);
+        const blank = {reg: '', title: '', meta: '', motText: '', motTone: '', taxText: '', taxTone: '', saved: false};
+        const resultRow = M.computed(() => (result.value ? vehicleRow(result.value, today.value) : blank));
+
+        const garageRows = M.observable([]);
+        const historyRows = M.observable([]);
+        scope(M.effect(() => {
+            const t = today.value;
+            garageRows.value = arrangeVehicles(saved.value, {today: t, filter: filter.value, query: garageQuery.value})
+                .map(v => ({...vehicleRow(v, t), savedChip: false}));
+            historyRows.value = arrangeVehicles(vehicles.value, {today: t, query: historyQuery.value, order: 'recent'})
+                .map(v => {
+                    const r = vehicleRow(v, t);
+                    return {...r, savedChip: r.saved, meta: [`checked ${v.lookupDate ? D(v.lookupDate).fromNow() : 'earlier'}`, r.meta].filter(Boolean).join(' · ')};
+                });
+        }));
+
+        const data = {
+            vehicles, saved, history, loading, loadError, reg, looking, lookupError, rateNote, result, resultRow,
+            filter, garageQuery, historyQuery, settingsLoaded, hasKey, garageRows, historyRows,
+            hasBanner: false,
+            attentionCount: M.computed(() => saved.value.filter(v => vehicleAlert(v, today.value).needsAttention).length),
+            unsavedCount: M.computed(() => vehicles.value.filter(v => !v.isSaved).length),
+            resultSaving: M.computed(() => Boolean(resultId.value) && toggling.value.includes(resultId.value)),
+            cannotLookUp: M.computed(() => looking.value || !normaliseReg(reg.value)),
+            lookupText: M.computed(() => (looking.value ? 'Looking up…' : 'Look up')),
+            garageEmpty: M.computed(() => (saved.value.length
+                ? (filter.value === 'attention' ? 'Nothing due - every saved vehicle is taxed and has a valid MOT.' : 'No vehicles match.')
+                : 'No saved vehicles yet - look one up and save it to My Garage.')),
+            historyEmpty: M.computed(() => (vehicles.value.length ? 'No lookups match.' : 'No lookups yet.'))
+        };
+
+        // A day boundary passes while the screen is open: "due tomorrow" becomes "due today".
+        const tick = setInterval(() => { const d = isoDay(); if (d !== today.peek()) today.value = d; }, 60_000);
+        scope(() => clearInterval(tick));
+
+        // ---- Server ----
+        /**
+         * The whole list. The first load draws a skeleton in each list's slot (the
+         * one on screen - History is a closed tab at first); a reload keeps the rows
+         * on screen and swaps them when the answer is in.
+         */
+        async function load({first = false} = {}) {
+            const sk = first ? showLoading([...root.querySelectorAll('.gx-loading')], SHAPES.rows) : null;
+            try {
+                const list = await apiRequest(`${API}/history`, {method: 'GET'});
+                await sk?.done();
+                if (!here()) return;
+                vehicles.value = Array.isArray(list) ? list : [];
+                loadError.value = '';
+            } catch (err) {
+                await sk?.done();
+                if (!here()) return;
+                loadError.value = `Could not load your vehicles: ${err.message || err}`;
+            } finally {
+                if (here()) loading.value = false;
+            }
+        }
+
+        /** The stored settings for this plugin (secrets come back masked), or throws. */
+        async function readSettings() {
+            const plugins = await apiRequest('/plugins', {method: 'GET'});
+            const mine = (Array.isArray(plugins) ? plugins : []).find(p => p.name === 'garage');
+            if (!mine) throw new Error('Garage is not in the plugin list');
+            return mine.settings || {};
+        }
+
+        async function loadSettings() {
+            try {
+                const stored = await readSettings();
+                if (!here()) return;
+                hasKey.value = Boolean(stored.dvlaApiKey);
+                canConfigure.value = true;
+            } catch (err) {
+                if (!here()) return;
+                // No right to read plugin settings: say nothing rather than claim there is no key.
+                hasKey.value = true;
+                if (err?.status === 403) canConfigure.value = false;
+            } finally {
+                if (here()) settingsLoaded.value = true;
+            }
+        }
+
+        /** Put one vehicle (as the server returned it) in place, or add it at the top. */
+        function upsert(v) {
+            const list = vehicles.peek();
+            const i = list.findIndex(x => x.id === v.id);
+            vehicles.value = i >= 0 ? list.map(x => (x.id === v.id ? v : x)) : [v, ...list];
+        }
+
+        async function lookup(regNumber = reg.peek()) {
+            const r = normaliseReg(regNumber);
+            if (!r || looking.peek()) return;
+            looking.value = true;
+            lookupError.value = '';
+            rateNote.value = '';
+            try {
+                const v = await apiRequest(`${API}/lookup`, {method: 'POST', body: JSON.stringify({registrationNumber: r})});
+                if (!here() || !v) return null;
+                upsert(v);
+                resultId.value = v.id;
+                refreshBadge();
+                return v;
+            } catch (err) {
+                if (!here()) return null;
+                const msg = err.message || String(err);
+                if (/rate limit/i.test(msg)) rateNote.value = msg;
+                else lookupError.value = msg;
+                return null;
+            } finally {
+                if (here()) looking.value = false;
+            }
+        }
+
+        const isToggling = (id) => toggling.peek().includes(id);
+        async function toggleSaved(v) {
+            if (isToggling(v.id)) return null;
+            toggling.value = [...toggling.peek(), v.id];
+            try {
+                // Sent as the state wanted, not a toggle: if another tab changed it meanwhile, this still does what was asked.
+                const updated = await apiRequest(`${API}/vehicles/${encodeURIComponent(v.id)}/save`, {method: 'PATCH', body: JSON.stringify({isSaved: !v.isSaved})});
+                refreshBadge();
+                if (!here() || !updated) return null;
+                upsert(updated);
+                E.toast(updated.isSaved ? `${displayReg(updated.registrationNumber)} saved to My Garage.` : `${displayReg(updated.registrationNumber)} taken out of My Garage.`, {type: 'success'});
+                return updated;
+            } catch (err) {
+                if (here()) E.toast(`Not changed: ${err.message || err}`, {type: 'error'});
+                return null;
+            } finally {
+                toggling.value = toggling.peek().filter(x => x !== v.id);
+            }
+        }
+
+        async function remove(v) {
+            const what = v.isSaved ? 'from My Garage and your history' : 'from your history';
+            if (!await E.confirm(`Delete ${esc(displayReg(v.registrationNumber))} ${what}? Looking it up again brings it back.`)) return false;
+            // Left while asked: leaving is not a yes.
+            if (!here()) return false;
+            try {
+                await apiRequest(`${API}/vehicles/${encodeURIComponent(v.id)}`, {method: 'DELETE'});
+                refreshBadge();
+                if (!here()) return false;
+                vehicles.value = vehicles.peek().filter(x => x.id !== v.id);
+                if (resultId.peek() === v.id) resultId.value = '';
+                E.toast(`Deleted ${displayReg(v.registrationNumber)}.`, {type: 'success'});
+                return true;
+            } catch (err) {
+                if (here()) E.toast(`Not deleted: ${err.message || err}`, {type: 'error'});
+                return false;
+            }
+        }
+
+        async function clearUnsaved() {
+            const unsaved = vehicles.peek().filter(v => !v.isSaved);
+            if (!unsaved.length) return;
+            if (!await E.confirm(`Delete ${unsaved.length} lookup${unsaved.length === 1 ? '' : 's'} you have not saved? Vehicles in My Garage are kept.`)) return;
+            if (!here()) return;
+            let done = 0;
+            for (const v of unsaved) {
+                try { await apiRequest(`${API}/vehicles/${encodeURIComponent(v.id)}`, {method: 'DELETE'}); done++; } catch { /* keep going */ }
+            }
+            if (!here()) return;
+            await load();
+            if (!here()) return;
+            E.toast(`Cleared ${done} lookup${done === 1 ? '' : 's'}.`, {type: done === unsaved.length ? 'success' : 'warning'});
+        }
+
+        async function copyReg(v) {
+            const text = normaliseReg(v.registrationNumber);
+            try { await navigator.clipboard.writeText(text); E.toast(`Copied ${text}.`, {type: 'success'}); } catch { E.toast(text, {type: 'info'}); }
+        }
+
+        // ---- Slideovers ----
+        const panels = new Set();
+        const claims = new Map();   // once-only claims: 'settings' / 'details:<id>' -> its slideover
+        let dirtyForm = null;       // the settings form's dirty() while it is open
+
+        /**
+         * A slideover. `claim` makes it once-only: asking again while it is open
+         * brings nothing new up. The claim is released when it closes - or at once
+         * if building it throws, or it could never open again until a reload.
+         * `busy()` true (a save on its way) refuses a close outright.
+         */
+        function panel(title, build, {size = 'md', claim = '', dirty = null, busy = null, cleanup = () => {}} = {}) {
+            if (claim && claims.has(claim)) return null;
+            if (claim) claims.set(claim, true);
+            let so;
+            try {
+                so = E.slideover({title, size, position: 'right'});
+                const body = build(so);
+                so.element.appendChild(body);
+                const disposeHelp = helpPopovers(body);
+                onceClosed(so, () => { try { cleanup(); } finally { disposeHelp(); panels.delete(so); if (claim) claims.delete(claim); } });
+                // Asks once before throwing typed work away; onceClosed's later destroy()
+                // calls close() again, argument-less, and must go straight through.
+                // Wrapped AFTER onceClosed, so a "no" never reaches its cleanup.
+                const close = so.close.bind(so);
+                let closed = false;
+                let asking = false;
+                so.close = async (force) => {
+                    if (!closed && force !== true) {
+                        if (busy?.()) return undefined;
+                        if (dirty?.()) {
+                            if (asking) return undefined;
+                            asking = true;
+                            const ok = await E.confirm('Discard what you have typed?');
+                            asking = false;
+                            if (!ok) return undefined;
+                        }
+                    }
+                    closed = true;
+                    return close();
+                };
+                panels.add(so);
+                if (claim) claims.set(claim, so);
+                I.scan(body);
+                so.open();
+                return so;
+            } catch (err) {
+                if (claim) claims.delete(claim);
+                // What the build started (a details panel's effect) stops with it.
+                try { cleanup(); } catch { /* half-built */ }
+                try { so?.destroy?.(); so?.element?.remove(); } catch { /* half-built */ }
+                throw err;
+            }
+        }
+
+        /**
+         * A vehicle's full DVLA record. Built with textContent - nothing here is
+         * markup - and kept in step with the list: saving it from the menu, a fresh
+         * lookup or a delete elsewhere shows here at once (a deleted one closes).
+         */
+        function details(id) {
+            if (!byId(id)) return;
+            let stop = null;
+            let so = null;
+            so = panel(esc(displayReg(byId(id).registrationNumber)), () => {
+                const body = fragment(`
+                <div class="gx-panel">
+                    <div class="gx-result-head"><span class="gx-plate is-big"></span><strong class="gx-d-title"></strong></div>
+                    <div class="gx-chips gx-chips-start"><span class="gx-chip gx-d-mot"></span><span class="gx-chip gx-d-tax"></span><span class="gx-chip is-saved gx-d-saved">In My Garage</span></div>
+                    <dl class="gx-facts"></dl>
+                    <small class="gx-hint">As the DVLA had it when last looked up. Look it up again for fresh details.</small>
+                    <div class="gx-panel-actions">
+                        <button type="button" class="btn btn-sm btn-ghost text-danger gx-d-del"><span data-icon="trash" data-icon-size="13"></span> Delete</button>
+                        <span class="gx-spacer"></span>
+                        <button type="button" class="btn btn-sm btn-outline gx-d-again"><span data-icon="refresh-cw" data-icon-size="13"></span> <span class="gx-d-again-text">Look up again</span></button>
+                        <button type="button" class="btn btn-sm gx-d-save"></button>
+                    </div>
+                </div>`);
+                const set = (sel, text) => { body.querySelector(sel).textContent = text; };
+                const fill = (v, t) => {
+                    const a = vehicleAlert(v, t);
+                    set('.gx-plate', displayReg(v.registrationNumber));
+                    set('.gx-d-title', [v.make, v.yearOfManufacture].filter(Boolean).join(' · '));
+                    const mot = body.querySelector('.gx-d-mot'); mot.textContent = a.mot.text; mot.className = `gx-chip gx-d-mot is-${a.mot.tone}`;
+                    const tax = body.querySelector('.gx-d-tax'); tax.textContent = a.tax.text; tax.className = `gx-chip gx-d-tax is-${a.tax.tone}`;
+                    body.querySelector('.gx-d-saved').hidden = !v.isSaved;
+                    const dl = body.querySelector('.gx-facts');
+                    dl.replaceChildren();
+                    for (const [k, val] of [
+                        ['Make', v.make], ['Year', v.yearOfManufacture], ['Colour', v.colour], ['Fuel', v.fuelType],
+                        ['Engine', v.engineCapacity ? `${v.engineCapacity} cc` : ''], ['CO₂', v.co2Emissions ? `${v.co2Emissions} g/km` : ''],
+                        ['MOT', v.motStatus], ['MOT expires', v.motExpiryDate ? fmtDay(v.motExpiryDate) : ''],
+                        ['Road tax', v.taxStatus], ['Tax due', v.taxDueDate ? fmtDay(v.taxDueDate) : ''],
+                        ['Last looked up', v.lookupDate ? fmtDateTime(v.lookupDate) : '']
+                    ]) {
+                        if (val === null || val === undefined || val === '') continue;
+                        // One <div> per pair (valid in a <dl>) so each label stays with its value in the grid.
+                        const pair = document.createElement('div');
+                        const dt = document.createElement('dt'); dt.textContent = k;
+                        const dd = document.createElement('dd'); dd.textContent = String(val);
+                        pair.append(dt, dd);
+                        dl.appendChild(pair);
+                    }
+                    const saveBtn = body.querySelector('.gx-d-save');
+                    saveBtn.className = `btn btn-sm ${v.isSaved ? 'btn-outline' : 'btn-success'} gx-d-save`;
+                    saveBtn.textContent = v.isSaved ? 'Remove from My Garage' : 'Save to My Garage';
+                };
+                let first = true;
+                stop = M.effect(() => {
+                    const v = vehicles.value.find(x => x.id === id);
+                    const t = today.value;
+                    const busy = looking.value;
+                    const saving = toggling.value.includes(id);
+                    if (!v) { if (!first) queueMicrotask(() => so?.close(true)); return; }
+                    fill(v, t);
+                    body.querySelector('.gx-d-again').disabled = busy;
+                    body.querySelector('.gx-d-save').disabled = saving;
+                    body.querySelector('.gx-d-again-text').textContent = busy ? 'Looking up…' : 'Look up again';
+                    first = false;
+                });
+                // Each button acts on the vehicle as it is NOW, not as it was when the panel opened.
+                body.querySelector('.gx-d-save').addEventListener('click', () => { const v = byId(id); if (v) toggleSaved(v); });
+                body.querySelector('.gx-d-again').addEventListener('click', () => { const v = byId(id); if (v) lookup(v.registrationNumber); });
+                body.querySelector('.gx-d-del').addEventListener('click', async () => {
+                    const v = byId(id);
+                    if (v && await remove(v)) so?.close(true);
+                });
+                return body;
+            }, {claim: `details:${id}`, cleanup: () => stop?.()});
+            if (!so) claims.get(`details:${id}`)?.element?.querySelector('.gx-d-save')?.focus();
+        }
+
+        function openSettings() {
+            if (claims.has('settings')) return;
+            const m = {key: M.observable(''), saving: M.observable(false), hasKey, canConfigure, settingsLoaded};
+            m.cannot = M.computed(() => !m.key.value.trim() || m.saving.value || !m.canConfigure.value);
+            m.saveText = M.computed(() => (m.saving.value ? 'Saving…' : 'Save key'));
+            const dirty = () => Boolean(m.key.peek().trim());
+            let handle = null;
+            let body = null;
+            let so = null;
+            async function save() {
+                if (m.cannot.peek()) return;
+                const key = m.key.peek().trim();
+                m.saving.value = true;
+                // The panel closes after saving, so nothing may be typed while it saves
+                // (it would be thrown away with it): the form is locked until the answer.
+                body.inert = true;
+                try {
+                    // Merged onto the settings as stored NOW - not as they were when the
+                    // screen opened, or a failed or slow first read would PUT a bare
+                    // {dvlaApiKey} over everything else saved for the plugin.
+                    const stored = await readSettings();
+                    await apiRequest('/plugins/garage', {method: 'PUT', body: JSON.stringify({settings: settingsWithKey(stored, key)})});
+                    if (!here()) return;
+                    hasKey.value = true;
+                    m.key.value = '';
+                    E.toast('DVLA API key saved.', {type: 'success'});
+                    m.saving.value = false;
+                    so.close(true);
+                } catch (err) {
+                    if (!here()) return;
+                    if (err?.status === 403) canConfigure.value = false;
+                    E.toast(`Not saved: ${err.message || err}`, {type: 'error'});
+                } finally {
+                    m.saving.value = false;
+                    if (body) body.inert = false;
+                }
+            }
+            so = panel('Garage settings', () => {
+                body = fragment(`
+                <div class="gx-panel">
+                    <p class="gx-note">Lookups need a key for the DVLA's Vehicle Enquiry Service. Get one from the
+                        <a href="${DVLA_PORTAL}" target="_blank" rel="noopener">DVLA developer portal</a>.</p>
+                    <div class="gx-chips gx-chips-start">
+                        <span class="gx-chip" data-bind-hidden="settingsLoaded.value">Checking…</span>
+                        <span class="gx-chip is-ok" data-bind-hidden="!settingsLoaded.value || !hasKey.value || !canConfigure.value">A key is saved</span>
+                        <span class="gx-chip is-warn" data-bind-hidden="!settingsLoaded.value || hasKey.value">No key yet - lookups fail</span>
+                    </div>
+                    <p class="gx-alert" data-bind-hidden="canConfigure.value">
+                        <span data-icon="lock" data-icon-size="16"></span>
+                        Only someone who can manage plugins can change the site's DVLA key.</p>
+                    <div>
+                        <label class="form-label" for="gx-key">DVLA API key
+                            <span data-help-title="DVLA API key" data-help="Saved in this site's plugin settings (config/plugins.json) and sent only to the DVLA. It is never shown again here - type a new one to replace it. The DVLA_API_KEY environment variable, when set, is used instead. Being a secret, it is never kept as a draft: leave the screen and a typed key is gone."></span></label>
+                        <input id="gx-key" type="password" class="form-input" autocomplete="off" placeholder="Paste your DVLA API key"
+                               data-model="key.value" data-bind-disabled="!canConfigure.value">
+                    </div>
+                    <div class="gx-panel-actions">
+                        <small class="gx-hint">Enter saves.</small>
+                        <span class="gx-spacer"></span>
+                        <button type="button" class="btn btn-sm btn-ghost" data-on-click="cancel">Cancel</button>
+                        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="cannot.value">
+                            <span data-icon="save" data-icon-size="13"></span> <span data-bind-text="saveText.value">Save key</span></button>
+                    </div>
+                </div>`);
+                handle = M.applyBindings(m, body, {methods: {save, cancel: () => so?.close()}});
+                body.querySelector('#gx-key').addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); save(); } });
+                return body;
+            }, {size: 'sm', claim: 'settings', dirty, busy: () => m.saving.peek(),
+                cleanup: () => { handle?.dispose(); if (dirtyForm === dirty) dirtyForm = null; }});
+            if (!so) return;
+            dirtyForm = dirty;
+            body.querySelector('#gx-key').focus();
+        }
+
+        // ---- Context menu ----
+        function items(id) {
+            const v = byId(id);
+            if (!v) return [];
+            return [
+                {header: displayReg(v.registrationNumber)},
+                {label: 'Details…', icon: 'eye', action: () => details(id)},
+                {label: 'Look up again', icon: 'refresh-cw', disabled: looking.peek(), action: () => lookup(v.registrationNumber)},
+                v.isSaved
+                    ? {label: 'Remove from My Garage', icon: 'minus-circle', disabled: isToggling(id), action: () => toggleSaved(v)}
+                    : {label: 'Save to My Garage', icon: 'plus-circle', disabled: isToggling(id), action: () => toggleSaved(v)},
+                {label: 'Copy registration', icon: 'copy', action: () => copyReg(v)},
+                {type: 'divider'},
+                {label: 'Delete…', icon: 'trash', danger: true, action: () => remove(v)}
+            ];
+        }
+
+        function wireList(list) {
+            const menu = E.contextMenu(list, {cursor: 'glyph', match: '.gx-row', inherit: false, density: 'compact',
+                items: (row) => items(row.dataset.id)});
+            scope(() => menu?.destroy?.());
+            const onClick = (e) => {
+                const row = e.target.closest('.gx-row');
+                if (!row) return;
+                const kebab = e.target.closest('.gx-kebab');
+                if (kebab) { openMenuAt(kebab); return; }
+                details(row.dataset.id);
+            };
+            const onKey = (e) => {
+                const row = e.target.closest('.gx-row');
+                if (!row) return;
+                if (e.key === 'F10' && e.shiftKey) { e.preventDefault(); openMenuAt(row); }
+                else if (e.key === 'Enter' && e.target === row) details(row.dataset.id);
+                else if (e.key === 'Delete' && e.target === row) { const v = byId(row.dataset.id); if (v) remove(v); }
+            };
+            list.addEventListener('click', onClick);
+            list.addEventListener('keydown', onKey);
+            scope(() => { list.removeEventListener('click', onClick); list.removeEventListener('keydown', onKey); });
+        }
+
+        // ---- Bindings ----
+        root.querySelector('.gx-garage').innerHTML = ROW;
+        root.querySelector('.gx-history').innerHTML = ROW;
+        const hasBanner = typeof addBannerAction === 'function';
+        data.hasBanner = hasBanner;
+        E.tabs(root.querySelector('.gx-tabs'), {tabSelector: '.tab-item', panelSelector: '.tab-panel'});
+        const bindings = M.applyBindings(data, root, {
+            methods: {
+                lookup: () => lookup(),
+                toggleResultSaved: () => { const v = result.peek(); if (v) toggleSaved(v); },
+                resultDetails: () => { if (resultId.peek()) details(resultId.peek()); },
+                showAll: () => { filter.value = 'all'; },
+                showAttention: () => { filter.value = 'attention'; },
+                clearUnsaved,
+                openSettings
+            }
+        });
+        scope(() => bindings.dispose());
+        scope(helpPopovers(root, {position: 'bottom'}));
+        wireList(root.querySelector('.gx-garage'));
+        wireList(root.querySelector('.gx-history'));
+
+        // The plate box: capitals as you type, Enter looks it up.
+        const plateInput = root.querySelector('.gx-plate-input');
+        const onPlateKey = (e) => { if (e.key === 'Enter') { e.preventDefault(); lookup(); } };
+        const onPlateInput = () => {
+            const pos = plateInput.selectionStart;
+            const up = plateInput.value.toUpperCase();
+            if (up !== plateInput.value) { plateInput.value = up; plateInput.setSelectionRange(pos, pos); reg.value = up; }
+        };
+        plateInput.addEventListener('keydown', onPlateKey);
+        plateInput.addEventListener('input', onPlateInput);
+        scope(() => { plateInput.removeEventListener('keydown', onPlateKey); plateInput.removeEventListener('input', onPlateInput); });
+
+        if (hasBanner) addBannerAction($container, {id: 'garage-settings', icon: 'settings', title: 'Garage settings', onClick: openSettings});
+
+        // ---- Leaving ----
+        const onUnload = (e) => { if (dirtyForm?.()) { e.preventDefault(); e.returnValue = ''; } };
+        window.addEventListener('beforeunload', onUnload);
+        scope(() => window.removeEventListener('beforeunload', onUnload));
+        // Panels close with the screen. The settings key is a secret: it is not kept as a draft.
+        scope(() => [...panels].forEach(so => { try { so.close(true); } catch { /* gone */ } }));
+
+        I.scan(root);
+        await Promise.all([load({first: true}), loadSettings()]);
+        if (!here()) return;
+        plateInput.focus();
+    }
+};