feat: paginate mobile Human Gate history (Closes #1444)
This commit is contained in:
timmy committed
1 parent
57c7373079
commit
0f1cac0e25
21 files changed
+325
-51
No files matched your search
@@ -1625,6 +1625,6 @@ textarea { resize: vertical; min-height: 120px; }
|
||||
|
||||
.human-gates{position:fixed;inset:0;z-index:72;background:var(--bg);overflow:auto;padding:18px max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
|
||||
.human-gates[hidden]{display:none}.human-gates-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;max-width:760px;margin:0 auto 14px}.human-gates-header h3{margin:0}.human-gates-list,.human-gate-detail-host{display:grid;gap:10px;max-width:760px;margin:0 auto 14px}.human-gate-card{display:grid;grid-template-columns:1fr auto;text-align:left;gap:6px 12px;min-height:58px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--panel)}.human-gate-card span{grid-column:1/-1;color:var(--muted)}.human-gate-detail{display:grid;gap:12px;padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--panel)}.human-gate-detail h3,.human-gate-detail h4,.human-gate-detail p{margin:0}.human-gate-detail label{display:grid;gap:6px}.human-gate-detail label:has(input[type=checkbox]){grid-template-columns:auto 1fr;align-items:center}.human-gate-detail textarea{min-height:78px}.human-gate-decision-tray{display:grid;gap:10px}.human-gate-decision-state{display:grid;gap:4px}.human-gate-decision-state [data-gate-error]{color:var(--danger,#fb7185)}.human-gate-decision-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.human-gate-decision-actions button{min-height:44px}.human-gates-zero{display:grid;gap:6px;text-align:center;padding:32px 16px;border:1px dashed var(--border);border-radius:16px}.human-gates-launcher span{display:inline-grid;place-items:center;min-width:22px;border-radius:999px;background:var(--accent);color:#06101f}
|
||||
.human-gate-views{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:760px;margin:0 auto 14px}.human-gate-views button{min-height:44px}.human-gate-views button[aria-pressed="true"]{border-color:var(--accent);background:rgba(96,165,250,.14)}.human-gate-history-card time{font-size:.78rem;color:var(--muted)}.human-gate-state{font-weight:700}.human-gate-state-released{color:#86efac}.human-gate-state-held{color:#fbbf24}.human-gate-state-superseded{color:#cbd5e1}.human-gate-receipt{padding-bottom:16px}
|
||||
.human-gate-views{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:760px;margin:0 auto 14px}.human-gate-views button{min-height:44px}.human-gate-views button[aria-pressed="true"]{border-color:var(--accent);background:rgba(96,165,250,.14)}.human-gate-history-card time{font-size:.78rem;color:var(--muted)}.human-gate-history-more{min-height:44px;width:100%;padding:max(10px,env(safe-area-inset-bottom)) 12px}.human-gate-state{font-weight:700}.human-gate-state-released{color:#86efac}.human-gate-state-held{color:#fbbf24}.human-gate-state-superseded{color:#cbd5e1}.human-gate-receipt{padding-bottom:16px}
|
||||
@media(max-width:600px){.human-gate-detail{padding-bottom:calc(124px + env(safe-area-inset-bottom))}.human-gate-decision-tray{position:sticky;bottom:calc(-1 * max(24px,env(safe-area-inset-bottom)));z-index:4;margin:0 -16px calc(-124px - env(safe-area-inset-bottom));padding:12px 16px;padding-bottom:max(16px,env(safe-area-inset-bottom));border-top:1px solid var(--border);background:rgba(11,21,38,.97);box-shadow:0 -12px 24px rgba(0,0,0,.32);backdrop-filter:blur(10px)}}
|
||||
@media(min-width:761px){.human-gates{inset:8% max(8%,80px);border:1px solid var(--border);border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.4)}}
|
||||
+48
-7
@@ -16,6 +16,9 @@ function createHumanGates(options = {}) {
|
||||
let openFlight = null;
|
||||
let onChange = options.onChange;
|
||||
let historyItems = [];
|
||||
let historyNextCursor = null;
|
||||
let historyLoadedMore = false;
|
||||
let historyLoadError = '';
|
||||
|
||||
const escape = value => String(value ?? '').replace(/[&<>"']/g, character => ({
|
||||
'&': '&', '<': '<', '>': '>', '"': '"', "'": ''',
|
||||
@@ -106,9 +109,15 @@ function createHumanGates(options = {}) {
|
||||
nodes.historyTab?.setAttribute?.('aria-pressed', view === 'history' ? 'true' : 'false');
|
||||
}
|
||||
|
||||
function renderHistory() {
|
||||
function renderHistory(preserveDetail = false) {
|
||||
setView('history');
|
||||
setText(nodes.status, historyItems.length + (historyItems.length === 1 ? ' past Human Gate decision.' : ' past Human Gate decisions.'));
|
||||
if (historyNextCursor) {
|
||||
setText(nodes.status, historyItems.length + ' Human Gate decisions loaded. Older decisions are available.');
|
||||
} else if (historyLoadedMore) {
|
||||
setText(nodes.status, 'All ' + historyItems.length + ' Human Gate decisions loaded.');
|
||||
} else {
|
||||
setText(nodes.status, historyItems.length + (historyItems.length === 1 ? ' past Human Gate decision.' : ' past Human Gate decisions.'));
|
||||
}
|
||||
if (!historyItems.length) {
|
||||
setHtml(nodes.list, '<div class="human-gates-zero"><strong>No decision history</strong><span>Released and held candidates will appear here.</span></div>');
|
||||
setHtml(nodes.detail, '');
|
||||
@@ -119,25 +128,57 @@ function createHumanGates(options = {}) {
|
||||
'<strong>' + escape(item.title) + '</strong><span class="human-gate-state human-gate-state-' + escape(item.state) + '">' +
|
||||
escape(item.state.charAt(0).toUpperCase() + item.state.slice(1)) + '</span>' +
|
||||
'<code>' + escape(item.candidate_hash) + '</code><time>' + escape(new Date(Number(item.updated_at) * 1000).toLocaleString()) + '</time></button>'
|
||||
).join(''));
|
||||
).join('') + (historyNextCursor ? '<button class="human-gate-history-more" type="button" data-human-gate-history-more>' +
|
||||
(historyLoadError ? 'Retry older decisions' : 'Load older decisions') + '</button>' : ''));
|
||||
Array.from(nodes.list?.querySelectorAll?.('[data-human-gate-history-id]') || []).forEach(card => {
|
||||
card.addEventListener('click', () => selectHistory(card.dataset.humanGateHistoryId).catch(error => {
|
||||
setText(nodes.status, error.message || 'Human Gate history is unavailable.');
|
||||
}));
|
||||
});
|
||||
setHtml(nodes.detail, '<div class="human-gates-zero"><strong>Decision history</strong><span>Open a candidate to review its durable receipt.</span></div>');
|
||||
nodes.list?.querySelector?.('[data-human-gate-history-more]')?.addEventListener?.('click', () => {
|
||||
loadMoreHistory().catch(error => setText(nodes.status, error.message || 'Older Human Gate decisions are unavailable.'));
|
||||
});
|
||||
if (!preserveDetail) setHtml(nodes.detail, '<div class="human-gates-zero"><strong>Decision history</strong><span>Open a candidate to review its durable receipt.</span></div>');
|
||||
}
|
||||
|
||||
async function showHistory() {
|
||||
if (!isOnline()) throw new Error('Human Gate history requires an online connection.');
|
||||
if (!String(getLogin() || '').trim()) throw new Error('Authenticated account identity is required.');
|
||||
const result = validSnapshot(await fetchJson('api/v1/human-gates?state=all'));
|
||||
const result = validSnapshot(await fetchJson('api/v1/human-gates?state=history&limit=20'));
|
||||
if (!result) throw new Error('Human Gate history response is invalid.');
|
||||
historyItems = result.items.filter(item => item.state !== 'pending');
|
||||
historyItems = result.items;
|
||||
historyNextCursor = result.next_cursor || null;
|
||||
historyLoadedMore = false;
|
||||
historyLoadError = '';
|
||||
renderHistory();
|
||||
return JSON.parse(JSON.stringify(historyItems));
|
||||
}
|
||||
|
||||
async function loadMoreHistory() {
|
||||
if (!historyNextCursor) return JSON.parse(JSON.stringify(historyItems));
|
||||
if (!isOnline()) throw new Error('Human Gate history requires an online connection.');
|
||||
const cursor = historyNextCursor;
|
||||
let result;
|
||||
try {
|
||||
result = validSnapshot(await fetchJson(
|
||||
'api/v1/human-gates?state=history&limit=20&cursor=' + encodeURIComponent(cursor)
|
||||
));
|
||||
if (!result) throw new Error('Human Gate history response is invalid.');
|
||||
} catch (error) {
|
||||
historyLoadError = error?.message || 'Older Human Gate decisions are unavailable.';
|
||||
renderHistory(true);
|
||||
setText(nodes.status, historyLoadError + ' Loaded decisions are still available.');
|
||||
throw error;
|
||||
}
|
||||
const known = new Set(historyItems.map(item => item.id));
|
||||
historyItems.push(...result.items.filter(item => !known.has(item.id)));
|
||||
historyNextCursor = result.next_cursor || null;
|
||||
historyLoadedMore = true;
|
||||
historyLoadError = '';
|
||||
renderHistory(true);
|
||||
return JSON.parse(JSON.stringify(historyItems));
|
||||
}
|
||||
|
||||
async function selectHistory(gateId) {
|
||||
const summary = historyItems.find(item => item.id === gateId);
|
||||
if (!summary) throw new Error('Gate is not in the current history.');
|
||||
@@ -383,7 +424,7 @@ function createHumanGates(options = {}) {
|
||||
}
|
||||
|
||||
return {
|
||||
load, open, reviewNext, select, showHistory, selectHistory, showPending,
|
||||
load, open, reviewNext, select, showHistory, loadMoreHistory, selectHistory, showPending,
|
||||
decideAndNext, submitDecision, current, saveProgress,
|
||||
setOnChange(callback) { onChange = callback; },
|
||||
restoreCached: restore,
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
const BASE = new URL('./', self.location.href).pathname;
|
||||
importScripts(BASE + 'static/private-data-registry.js');
|
||||
importScripts(BASE + 'static/background-issue-sync.js');
|
||||
const CACHE = 'stackchain-dashboard-shell-v148';
|
||||
const CACHE = 'stackchain-dashboard-shell-v149';
|
||||
const OFFLINE_LEASE_URL = new URL(BASE + '__offline-session-lease', self.location.origin).href;
|
||||
const OUTAGE_STATUSES = new Set([500, 502, 503, 504]);
|
||||
const NAVIGATION_TIMEOUT_MS = self.__STACKCHAIN_NAVIGATION_TIMEOUT_MS || 4000;
|
||||
|
||||
Reference in new issue
Block a user