feat: add emoji reactions, light/dark themes and rollout observability
Add a set of guest-facing and operator-facing features that make the deployment-strategy demos (recreate, rolling, canary) more visual: - Emoji reactions (heart/tada/thumbsup/smile): visitors react without an account, a first-party cookie keeps counts honest, the tally streams live to every tab over SSE. Backed by a new reactions table with an idempotent upsert; whitelisted emoji so the endpoint can't be abused. - Light & dark themes: the wall follows the OS preference, visitors can toggle it (persisted locally), and a moderator can force a theme for everyone from the admin console, pushed live over SSE. - Per-replica request counter: a middleware tallies requests answered by each replica; surfaced in /healthz, /api/info and the admin replica table. Under load-balancing the counts diverge, and a rolling update resets them one container at a time — the rollout made visible. - Rolling-update wave in the Chaos lab: bounces replicas one at a time (via the crash endpoint) while polling the replica table, so a training session can watch each replica reset and rejoin — what a rolling update looks like from the inside. - Admin console: reactions tile, per-replica Requests column, reaction tallies in moderation, and a wall-theme setting. - Favicon + /favicon.ico redirect. Tests cover reactions (idempotency, tallies, whitelist) and the theme setting round-trip. Akili-Task: tsk_xgg6sfuzkzymyc6gstr4 Akili-Agent: goldfish
This commit is contained in:
Akili
+90
-3
@@ -219,6 +219,7 @@
|
||||
<div class="card tile"><div class="label">Replicas</div><div class="value" id="tReplicas">–</div></div>
|
||||
<div class="card tile"><div class="label">Signatures</div><div class="value" id="tTotal">–</div></div>
|
||||
<div class="card tile"><div class="label">Today</div><div class="value" id="tToday">–</div></div>
|
||||
<div class="card tile"><div class="label">Reactions</div><div class="value" id="tReacts">–</div></div>
|
||||
<div class="card tile"><div class="label">Pinned</div><div class="value" id="tPinned">–</div></div>
|
||||
<div class="card tile"><div class="label">Hidden</div><div class="value" id="tHidden">–</div></div>
|
||||
</div>
|
||||
@@ -232,7 +233,7 @@
|
||||
<h2>Replicas</h2>
|
||||
<p class="hint" id="replicaHint"></p>
|
||||
<table>
|
||||
<thead><tr><th>Host</th><th>Version</th><th>Clients</th><th>Seen</th></tr></thead>
|
||||
<thead><tr><th>Host</th><th>Version</th><th>Clients</th><th title="HTTP requests answered since this replica started — a rollout resets them one at a time">Requests</th><th>Seen</th></tr></thead>
|
||||
<tbody id="replicaRows"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -278,6 +279,15 @@
|
||||
<input id="banner" maxlength="200" placeholder="e.g. Welcome to the Miabi training 👋" />
|
||||
<button class="primary" type="submit">Save</button>
|
||||
</div>
|
||||
<label class="field" for="theme" style="margin-top:16px">Wall theme</label>
|
||||
<div class="field-row">
|
||||
<select id="theme">
|
||||
<option value="system">System — follow each visitor's preference</option>
|
||||
<option value="light">Force light</option>
|
||||
<option value="dark">Force dark</option>
|
||||
</select>
|
||||
</div>
|
||||
<p class="hint" style="margin:8px 0 0">Pushed live to every open tab. Visitors can toggle light/dark themselves unless you force one here.</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -348,6 +358,15 @@
|
||||
<div class="probe-bars" id="probeBars"></div>
|
||||
</div>
|
||||
|
||||
<div class="card pad" style="margin-bottom:16px">
|
||||
<h2>Rolling-update wave</h2>
|
||||
<p class="hint">Watch what Miabi does during a <b>rolling update</b>: this tool bounces <i>one replica at a time</i> with the chaos endpoint while polling the replica table. Each restarted replica comes back with its request counter reset and, during a canary, a new version. Needs debug endpoints; run it with Redis attached so every replica is listed.</p>
|
||||
<div class="toolbar" style="margin-bottom:0">
|
||||
<button class="primary" id="waveRun">Bounce each replica, one at a time</button>
|
||||
<span class="chip" id="waveStat" hidden></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card pad">
|
||||
<h2>Activity</h2>
|
||||
<div class="log" id="log"><div class="t">Actions and their responses appear here.</div></div>
|
||||
@@ -421,6 +440,7 @@
|
||||
if (!r.ok || !r.data) return;
|
||||
overview = r.data;
|
||||
const { stats, runtime: rt, replicas, online, debug } = overview;
|
||||
$('waveRun').disabled = !debug;
|
||||
$('servedBy').textContent = rt.host;
|
||||
$('appName').textContent = rt.app;
|
||||
setVersion(rt.version);
|
||||
@@ -428,18 +448,20 @@
|
||||
$('tReplicas').textContent = replicas.length;
|
||||
$('tTotal').textContent = stats.total;
|
||||
$('tToday').textContent = stats.today;
|
||||
$('tReacts').textContent = stats.reactions ?? 0;
|
||||
$('tPinned').textContent = stats.pinned;
|
||||
$('tHidden').textContent = stats.hidden;
|
||||
renderChart(stats.daily || []);
|
||||
|
||||
$('replicaHint').innerHTML = rt.broker === 'redis'
|
||||
? 'Presence is shared through Redis, so every replica is listed.'
|
||||
? 'Presence is shared through Redis, so every replica is listed. The requests counter grows per replica and resets when a rollout replaces it.'
|
||||
: 'In-process broker: only this replica is visible. Attach Redis (<code>REDIS_URL</code>) to share live updates across replicas.';
|
||||
$('replicaRows').innerHTML = replicas.map((r) => `
|
||||
<tr class="${r.host === rt.host ? 'me' : ''}">
|
||||
<td class="mono">${esc(r.host)}</td>
|
||||
<td><span class="ver" style="background:hsl(${hueFor(r.version)} 70% 52%);font-size:11px;padding:2px 8px">v${esc(r.version)}</span></td>
|
||||
<td>${r.online}</td>
|
||||
<td>${r.requests ?? '–'}</td>
|
||||
<td>${ago(r.seen)}</td>
|
||||
</tr>`).join('');
|
||||
|
||||
@@ -452,6 +474,7 @@
|
||||
['Live updates', rt.broker === 'redis' ? 'Redis pub/sub' : 'in-process'],
|
||||
['Redis', status(rt.redis)],
|
||||
['Uptime', uptime(rt.uptime_s)],
|
||||
['Requests served', rt.requests ?? 0],
|
||||
['Go', `${esc(rt.go)} · ${rt.cpus} CPU`],
|
||||
['Goroutines', rt.goroutines],
|
||||
['Heap / Sys', `${rt.heap_mb.toFixed(1)} / ${rt.sys_mb.toFixed(1)} MiB`],
|
||||
@@ -496,6 +519,8 @@
|
||||
function rowHTML(e) {
|
||||
const rep = e.replica ? `<span class="rep" title="Accepted by">${esc(e.replica)}</span>` : '';
|
||||
const ip = e.ip ? `<span class="ip" data-ip="${esc(e.ip)}" title="Submitter IP — click to filter">${esc(e.ip)}</span>` : '';
|
||||
const reacts = Object.entries(e.reactions || {}).map(([k, n]) => `${({ heart: '❤️', tada: '🎉', thumbsup: '👍', smile: '😄' })[k] || k} ${n}`).join(' · ');
|
||||
const reactsChip = reacts ? `<span class="rep" title="Reactions">${esc(reacts)}</span>` : '';
|
||||
return `<div class="card row ${e.hidden ? 'is-hidden' : ''} ${e.pinned ? 'is-pinned' : ''}" data-id="${e.id}">
|
||||
<div class="head">
|
||||
<span class="who">${esc(e.name)}</span>
|
||||
@@ -503,6 +528,7 @@
|
||||
<span class="id">#${e.id}</span>
|
||||
${e.pinned ? '<span class="badge pin">Pinned</span>' : ''}
|
||||
${e.hidden ? '<span class="badge hid">Hidden</span>' : ''}
|
||||
${reactsChip}
|
||||
${ip}
|
||||
${rep}
|
||||
</div>
|
||||
@@ -552,14 +578,16 @@
|
||||
if (!r.ok) return;
|
||||
$('paused').checked = !!r.data.signing_paused;
|
||||
$('banner').value = r.data.banner || '';
|
||||
$('theme').value = r.data.theme || 'system';
|
||||
$('bannerCount').textContent = $('banner').value.length + ' / 200';
|
||||
}
|
||||
async function saveSettings() {
|
||||
const r = await req('PUT', '/api/admin/settings', { signing_paused: $('paused').checked, banner: $('banner').value });
|
||||
const r = await req('PUT', '/api/admin/settings', { signing_paused: $('paused').checked, banner: $('banner').value, theme: $('theme').value });
|
||||
toast(r.ok ? 'Settings saved and broadcast' : ((r.data && r.data.error) || 'Could not save'), !r.ok);
|
||||
}
|
||||
$('banner').addEventListener('input', (e) => { $('bannerCount').textContent = e.target.value.length + ' / 200'; });
|
||||
$('paused').addEventListener('change', saveSettings);
|
||||
$('theme').addEventListener('change', saveSettings);
|
||||
$('settingsForm').addEventListener('submit', (e) => { e.preventDefault(); saveSettings(); });
|
||||
|
||||
// ---- chaos lab ---------------------------------------------------------
|
||||
@@ -615,6 +643,65 @@
|
||||
log('gave up watching after 120s', 'w');
|
||||
}
|
||||
|
||||
// ---- rolling-update wave -----------------------------------------------
|
||||
// Crashes replicas one at a time and waits for each to rejoin (its request
|
||||
// counter restarts from ~0), mimicking — and explaining — what the platform
|
||||
// does during a rolling update. Self-healing does the rest.
|
||||
function sleep(ms) { return new Promise((r) => setTimeout(r, ms)); }
|
||||
async function fetchOverviewQuiet() {
|
||||
try {
|
||||
const res = await fetch('/api/admin/overview', { cache: 'no-store' });
|
||||
return res.ok ? await res.json() : null;
|
||||
} catch { return null; }
|
||||
}
|
||||
$('waveRun').addEventListener('click', async () => {
|
||||
if (!overview || !overview.debug) return;
|
||||
if (!confirm('Restart every replica, one at a time, using the crash endpoint? The app self-heals — this is what a rolling update looks like from the inside.')) return;
|
||||
$('waveRun').disabled = true;
|
||||
$('waveStat').hidden = false;
|
||||
try {
|
||||
// Snapshot the fleet (in local mode this is just the answering replica).
|
||||
const first = await fetchOverviewQuiet();
|
||||
const targets = [...new Set((first ? first.replicas : []).map((r) => r.host))];
|
||||
if (!targets.length) targets.push((first && first.runtime.host) || '');
|
||||
let bounced = 0, hops = 0;
|
||||
while (bounced < targets.length && hops < targets.length * 3 + 3) {
|
||||
hops++;
|
||||
const ov = await fetchOverviewQuiet();
|
||||
if (!ov) { await sleep(1500); continue; }
|
||||
const host = ov.runtime.host;
|
||||
const idx = targets.indexOf(host);
|
||||
if (idx < 0) { // already-bounced or unknown replica answered: keep hunting
|
||||
$('waveStat').textContent = `looking for ${targets[bounced]}… (at ${host})`;
|
||||
await req('POST', '/api/debug/crash'); // bounce it too, then move on
|
||||
await sleep(4000);
|
||||
continue;
|
||||
}
|
||||
targets.splice(idx, 1);
|
||||
$('waveStat').textContent = `wave ${bounced + 1} → bouncing ${host}`;
|
||||
log(`wave ${bounced + 1}: crashing ${host} (served ${ov.runtime.requests ?? '?'} requests since boot)`, 'w');
|
||||
await req('POST', '/api/debug/crash');
|
||||
// Wait until a *different* replica (or the same name with a fresh
|
||||
// counter) answers again — that is the restart made visible.
|
||||
const deadline = Date.now() + 90000;
|
||||
let back = false;
|
||||
while (Date.now() < deadline) {
|
||||
await sleep(1500);
|
||||
const cur = await fetchOverviewQuiet();
|
||||
if (!cur) continue;
|
||||
if (cur.runtime.host !== host || (cur.runtime.requests ?? 0) < (ov.runtime.requests ?? 0)) { back = true; break; }
|
||||
}
|
||||
log(back ? `${host} is back (request counter reset)` : `${host} did not come back within 90s`, back ? 's' : 'e');
|
||||
bounced++;
|
||||
}
|
||||
$('waveStat').textContent = `wave done — ${bounced} replica${bounced === 1 ? '' : 's'} bounced`;
|
||||
log(`rolling wave finished: ${bounced} replica(s) bounced, app stayed up`, 's');
|
||||
} finally {
|
||||
$('waveRun').disabled = !(overview && overview.debug);
|
||||
loadOverview();
|
||||
}
|
||||
});
|
||||
|
||||
$('probeRun').addEventListener('click', async () => {
|
||||
const url = $('probeTarget').value;
|
||||
const n = Math.min(1000, Math.max(1, +$('probeN').value || 1));
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||
<defs>
|
||||
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#8b5cf6"/>
|
||||
<stop offset="1" stop-color="#a855f7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="64" height="64" rx="14" fill="url(#g)"/>
|
||||
<path d="M20 34h24v4a8 8 0 0 1-8 8h-8a8 8 0 0 1-8-8v-4z" fill="#fff" opacity=".92"/>
|
||||
<path d="M25 22c0-3 3-3 3-6m5 6c0-3 3-3 3-6" stroke="#fff" stroke-width="3.4" stroke-linecap="round" fill="none" opacity=".92"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 531 B |
+127
-5
@@ -5,8 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Miabi Guestbook</title>
|
||||
<meta name="description" content="A tiny Okapi + Postgres example app, deployed on Miabi." />
|
||||
<meta name="theme-color" content="#0b0a12" />
|
||||
<link rel="icon" href="/badges/icon.svg" type="image/svg+xml" />
|
||||
<style>
|
||||
:root {
|
||||
/* Dark is the default look; body.light switches to the light palette.
|
||||
The moderator can also force one for everyone (wall setting "theme"). */
|
||||
:root, body:not(.light) {
|
||||
color-scheme: dark;
|
||||
--bg: #0b0a12;
|
||||
--bg-2: #12101d;
|
||||
--card: rgba(255, 255, 255, 0.04);
|
||||
@@ -17,9 +22,31 @@
|
||||
--accent-2: #a855f7;
|
||||
--danger: #f43f5e;
|
||||
--online: #22c55e;
|
||||
--input-bg: rgba(0, 0, 0, 0.25);
|
||||
--via-bg: rgba(0, 0, 0, 0.2);
|
||||
--glow-a: rgba(139, 92, 246, 0.18);
|
||||
--glow-b: rgba(168, 85, 247, 0.14);
|
||||
--radius: 16px;
|
||||
--shadow: 0 20px 60px -20px rgba(139, 92, 246, 0.35);
|
||||
}
|
||||
body.light {
|
||||
color-scheme: light;
|
||||
--bg: #f4f2fb;
|
||||
--bg-2: #e9e5f7;
|
||||
--card: rgba(255, 255, 255, 0.72);
|
||||
--card-border: rgba(15, 10, 40, 0.1);
|
||||
--text: #221c3d;
|
||||
--muted: #645e7d;
|
||||
--accent: #7c3aed;
|
||||
--accent-2: #9333ea;
|
||||
--danger: #e11d48;
|
||||
--online: #16a34a;
|
||||
--input-bg: rgba(255, 255, 255, 0.8);
|
||||
--via-bg: rgba(124, 58, 237, 0.08);
|
||||
--glow-a: rgba(139, 92, 246, 0.22);
|
||||
--glow-b: rgba(168, 85, 247, 0.16);
|
||||
--shadow: 0 20px 50px -24px rgba(124, 58, 237, 0.35);
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
@@ -27,8 +54,8 @@
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(900px 500px at 15% -10%, rgba(139, 92, 246, 0.18), transparent 60%),
|
||||
radial-gradient(700px 500px at 110% 10%, rgba(168, 85, 247, 0.14), transparent 55%),
|
||||
radial-gradient(900px 500px at 15% -10%, var(--glow-a), transparent 60%),
|
||||
radial-gradient(700px 500px at 110% 10%, var(--glow-b), transparent 55%),
|
||||
linear-gradient(180deg, var(--bg), var(--bg-2));
|
||||
background-attachment: fixed;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -59,6 +86,14 @@
|
||||
background: var(--online); opacity: .5; animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite;
|
||||
}
|
||||
@keyframes ping { 0% { transform: scale(1); opacity: .5; } 75%, 100% { transform: scale(2.4); opacity: 0; } }
|
||||
.icon-btn {
|
||||
font: inherit; font-size: 14px; line-height: 1; cursor: pointer; color: var(--text);
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 30px; height: 30px; border-radius: 999px;
|
||||
background: var(--card); border: 1px solid var(--card-border);
|
||||
transition: border-color .15s, transform .15s;
|
||||
}
|
||||
.icon-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
|
||||
|
||||
header { text-align: center; margin-bottom: 26px; }
|
||||
h1 {
|
||||
@@ -100,7 +135,7 @@
|
||||
.row { display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
input, textarea {
|
||||
width: 100%; font: inherit; color: var(--text);
|
||||
background: rgba(0, 0, 0, 0.25); border: 1px solid var(--card-border);
|
||||
background: var(--input-bg); border: 1px solid var(--card-border);
|
||||
border-radius: 12px; padding: 13px 15px; outline: none; resize: vertical;
|
||||
transition: border-color .15s, box-shadow .15s;
|
||||
}
|
||||
@@ -145,7 +180,7 @@
|
||||
.entry .when { color: var(--muted); }
|
||||
.entry .via {
|
||||
margin-left: auto; font-size: 11.5px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
background: rgba(0,0,0,.2); border: 1px solid var(--card-border); padding: 2px 8px; border-radius: 999px;
|
||||
background: var(--via-bg); border: 1px solid var(--card-border); padding: 2px 8px; border-radius: 999px;
|
||||
max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
li.entry.pinned { border-color: rgba(139, 92, 246, 0.55); background: rgba(139, 92, 246, 0.08); }
|
||||
@@ -154,6 +189,21 @@
|
||||
text-transform: uppercase; color: var(--accent-2);
|
||||
}
|
||||
|
||||
.entry .reacts { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
|
||||
.react {
|
||||
font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--muted);
|
||||
display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
|
||||
background: var(--card); border: 1px solid var(--card-border);
|
||||
transition: border-color .15s, color .15s, transform .1s;
|
||||
}
|
||||
.react:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
|
||||
.react:active:not(:disabled) { transform: scale(.93); }
|
||||
.react.on { color: var(--accent-2); border-color: rgba(139, 92, 246, .55); background: rgba(139, 92, 246, .1); }
|
||||
.react:disabled { opacity: .45; cursor: not-allowed; }
|
||||
.react .n { font-variant-numeric: tabular-nums; }
|
||||
.react.bump .n { animation: bump .3s ease; }
|
||||
@keyframes bump { 40% { transform: scale(1.4); } }
|
||||
|
||||
.banner {
|
||||
display: flex; gap: 10px; align-items: flex-start; padding: 13px 18px; margin-bottom: 18px;
|
||||
border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.1); font-size: 14.5px; line-height: 1.5;
|
||||
@@ -208,6 +258,7 @@
|
||||
<span class="ver" id="ver" title="Serving version">v…</span>
|
||||
<span class="replicas" id="replicas" title="Running replicas" hidden></span>
|
||||
<span class="online"><span class="pulse"></span> <span id="online">0</span> online</span>
|
||||
<button class="icon-btn" id="themeBtn" title="Toggle light / dark theme" aria-label="Toggle light / dark theme">🌓</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -300,8 +351,12 @@
|
||||
settings: () => fetch('/api/settings').then(r => r.json()),
|
||||
list: (limit, offset) => fetch(`/api/entries?limit=${limit}&offset=${offset}`).then(r => r.json()),
|
||||
create: (body) => fetch('/api/entries', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }),
|
||||
react: (id, emoji) => fetch(`/api/entries/${id}/reactions?emoji=${emoji}`, { method: 'POST' }),
|
||||
unreact:(id, emoji) => fetch(`/api/entries/${id}/reactions?emoji=${emoji}`, { method: 'DELETE' }),
|
||||
};
|
||||
|
||||
const EMOJI = { heart: '❤️', tada: '🎉', thumbsup: '👍', smile: '😄' };
|
||||
|
||||
let total = 0; // total signatures (kept in sync via SSE)
|
||||
let allOffset = 0; // current offset on the "All" page
|
||||
|
||||
@@ -325,6 +380,23 @@
|
||||
clearTimeout(toastTimer); toastTimer = setTimeout(() => t.classList.remove('show'), 3200);
|
||||
}
|
||||
|
||||
// ---- appearance (light / dark) -----------------------------------------
|
||||
// Priority: moderator-forced theme > visitor's own choice > OS preference.
|
||||
let serverTheme = '';
|
||||
function applyTheme() {
|
||||
const local = localStorage.getItem('gb-theme');
|
||||
const mode = serverTheme || local || (matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
|
||||
document.body.classList.toggle('light', mode === 'light');
|
||||
}
|
||||
$('themeBtn').addEventListener('click', () => {
|
||||
const next = document.body.classList.contains('light') ? 'dark' : 'light';
|
||||
localStorage.setItem('gb-theme', next);
|
||||
if (!serverTheme) applyTheme();
|
||||
else toast(`The moderator forced the ${serverTheme} theme — your choice will apply when it's released`);
|
||||
});
|
||||
matchMedia('(prefers-color-scheme: light)').addEventListener('change', applyTheme);
|
||||
applyTheme();
|
||||
|
||||
function cardHTML(e) {
|
||||
const via = e.replica && e.replica !== 'seed'
|
||||
? `<span class="via" title="Accepted by replica ${esc(e.replica)}">via ${esc(e.replica)}</span>` : '';
|
||||
@@ -337,9 +409,56 @@
|
||||
<span class="when">· ${timeAgo(e.created_at)}</span>
|
||||
${via}
|
||||
</div>
|
||||
${reactsHTML(e)}
|
||||
</li>`;
|
||||
}
|
||||
|
||||
// ---- reactions ----------------------------------------------------------
|
||||
// One tap adds the browser's reaction, tapping again removes it. The own
|
||||
// choices are kept in localStorage; the authoritative tally comes from the
|
||||
// server (list payloads + live "reaction" SSE events).
|
||||
function myReactions() { try { return JSON.parse(localStorage.getItem('gb-reacts') || '{}'); } catch { return {}; } }
|
||||
function saveMyReaction(id, emoji, on) {
|
||||
const m = myReactions();
|
||||
if (on) m[id + ':' + emoji] = 1; else delete m[id + ':' + emoji];
|
||||
localStorage.setItem('gb-reacts', JSON.stringify(m));
|
||||
}
|
||||
function reactsHTML(e) {
|
||||
const mine = myReactions();
|
||||
const counts = e.reactions || {};
|
||||
const chips = Object.keys(EMOJI).map((k) => {
|
||||
const n = counts[k] || 0;
|
||||
const on = mine[e.id + ':' + k] ? ' on' : '';
|
||||
return `<button class="react${on}" data-emoji="${k}" title="React ${EMOJI[k]}">${EMOJI[k]} <span class="n">${n}</span></button>`;
|
||||
}).join('');
|
||||
return `<div class="reacts">${chips}</div>`;
|
||||
}
|
||||
function updateReaction(id, emoji, count) {
|
||||
document.querySelectorAll(`.entry[data-id="${id}"]`).forEach((li) => {
|
||||
const btn = li.querySelector(`.react[data-emoji="${emoji}"]`);
|
||||
if (!btn) return;
|
||||
btn.querySelector('.n').textContent = count;
|
||||
btn.classList.toggle('on', !!myReactions()[id + ':' + emoji]);
|
||||
btn.classList.remove('bump'); void btn.offsetWidth; btn.classList.add('bump');
|
||||
});
|
||||
}
|
||||
document.addEventListener('click', async (e) => {
|
||||
const btn = e.target.closest('.react');
|
||||
if (!btn || btn.disabled) return;
|
||||
const li = btn.closest('.entry'); if (!li) return;
|
||||
const id = li.dataset.id, emoji = btn.dataset.emoji;
|
||||
const adding = !btn.classList.contains('on');
|
||||
saveMyReaction(id, emoji, adding);
|
||||
btn.classList.toggle('on', adding); // instant feedback; SSE brings the tally
|
||||
btn.disabled = true;
|
||||
try {
|
||||
const res = adding ? await api.react(id, emoji) : await api.unreact(id, emoji);
|
||||
if (!res.ok) saveMyReaction(id, emoji, !adding); // revert on failure
|
||||
} catch { saveMyReaction(id, emoji, !adding); }
|
||||
btn.disabled = false;
|
||||
btn.classList.toggle('on', !!myReactions()[id + ':' + emoji]);
|
||||
});
|
||||
|
||||
function renderList(ul, loading, entries, emptyMsg) {
|
||||
loading.style.display = 'none';
|
||||
if (!entries.length) { ul.innerHTML = `<div class="empty">${emptyMsg}</div>`; return; }
|
||||
@@ -374,6 +493,8 @@
|
||||
const paused = !!(st && st.signing_paused);
|
||||
$('paused').hidden = !paused;
|
||||
$('form').hidden = paused;
|
||||
serverTheme = (st && st.theme) || '';
|
||||
applyTheme();
|
||||
}
|
||||
|
||||
// ---- views --------------------------------------------------------------
|
||||
@@ -469,6 +590,7 @@
|
||||
es.addEventListener('created', (e) => { const d = JSON.parse(e.data); if (d.entry && !d.entry.hidden) onCreated(d.entry); });
|
||||
es.addEventListener('updated', () => reloadView());
|
||||
es.addEventListener('deleted', (e) => { const d = JSON.parse(e.data); onDeleted(d.id); });
|
||||
es.addEventListener('reaction', (e) => { const d = JSON.parse(e.data); updateReaction(d.id, d.emoji, d.count); });
|
||||
es.addEventListener('settings', (e) => { const d = JSON.parse(e.data); applySettings(d.settings); });
|
||||
// Resync after a reconnect: events sent while disconnected were missed.
|
||||
es.addEventListener('open', () => { if (connectedOnce) { reloadView(); api.settings().then(applySettings).catch(() => {}); } connectedOnce = true; });
|
||||
|
||||
Reference in New Issue
Block a user