Changeset c26cc18 in Klonkt for src/assets

Timestamp:

07/24/2026 06:04:03 PM (7 weeks ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

780a7c6

Parents:

1a2d8ac

Message:

Guardian-PWA: duidelijker + verstuurde offer altijd zichtbaar

Twee klachten opgelost.

"Ik zie niet dat ik verstuurd heb": de offer werd wél opgeslagen, maar als de
directe bezorging aan de remote ward faalde gaf de flow 502 en ververste de
PWA niet, dus de kaart verscheen niet. Nu: bezorging is async met retry (de
delivery-queue), de handshake geeft altijd 202 (opgeslagen) met een
delivered-vlag, en de PWA ververst altijd en toont de offer onder een eigen
sectie "Verzonden aanvragen · wacht op antwoord". Faalt de eerste bezorging,
dan meldt de UI dat we blijven proberen.

"Mag allemaal duidelijker": de pagina is herzien met vaste secties met kop en
uitleg: Hulpverzoeken (met teller), Ward adopteren (met uitleg wat er gebeurt),
Verzonden aanvragen, Mijn wards (actief-tag), Meldingen. Statussen als tags,
nette lege staten, alles via i18n (nl/en/de).

Changed files:
src/services/ActivityPubService.js

• deliverToActor: enqueue+retry+logging, geeft {delivered, inbox}

src/services/guardianship/handshake.js

• Offer/Accept/Reject: altijd 202 (opgeslagen) + delivered-vlag

src/routes/guardian.js

• /adopt niet meer hard falen op bezorg-hik; delivered terug; meer strings

src/views/pages/guardian.ejs

• herziene, duidelijke secties

src/assets/js/guardian.js

• aparte "Verzonden aanvragen"-sectie, altijd verversen na adopt

src/assets/css/guardian.css

• sectie-koppen, status-tags, nette lege staten

src/services/i18n.js

• uitgebreide guardian.*-teksten nl/en/de

remarks: als de offer "niet binnenkomt" bij de ward, moet diens Klonkt de
nieuwe code draaien (demo/beta/demohub zijn bij); een oude Klonkt of Mastodon
snapt de Offer-Relationship niet.

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>

Location:

src/assets

Files:

• css/guardian.css (modified) (2 diffs)
• js/guardian.js (modified) (6 diffs)

src/assets/css/guardian.css

@@ -6 +6 @@
   --ink: #e8ecf2;
   --sub: #93a0b4;
+  --line: #2c3646;
   --accent: #ff6b35;
   --ok: #4caf7d;
@@ -15 +16 @@
   color: var(--ink);
   font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  padding-bottom: 40px;
+  padding-bottom: 48px;
 }
 .g-head {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 14px 16px;
+  gap: 12px;
+  padding: 16px;
   background: var(--card);
+  border-bottom: 1px solid var(--line);
   position: sticky;
   top: 0;
+  z-index: 2;
 }
-.g-head h1 { font-size: 1.15rem; margin: 0; flex: 1; }
-.g-buoy { font-size: 1.5rem; }
-.g-me { color: var(--sub); font-size: .9rem; }
+.g-head-txt { flex: 1; }
+.g-head h1 { font-size: 1.15rem; margin: 0; }
+.g-head .g-sub { margin: 0; color: var(--sub); font-size: .78rem; }
+.g-buoy { font-size: 1.7rem; }
+.g-me { color: var(--sub); font-size: .85rem; }
 #site-picker {
   background: var(--bg); color: var(--ink);
-  border: 1px solid #33405233; border-radius: 8px; padding: 6px 8px;
+  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px;
 }
-main { max-width: 640px; margin: 0 auto; padding: 0 16px; }
-h2 { font-size: 1rem; margin: 26px 0 10px; }
-.g-sub { color: var(--sub); font-size: .85rem; margin: 0 0 10px; }
-.g-empty { color: var(--sub); font-size: .9rem; }
-.g-msg { font-size: .85rem; color: var(--ok); }
+main { max-width: 640px; margin: 0 auto; padding: 8px 16px; }
+
+section { padding: 18px 0; border-bottom: 1px solid var(--line); }
+section:last-child { border-bottom: 0; }
+.g-sec-head { display: flex; align-items: center; gap: 8px; }
+.g-sec-head h2 { font-size: 1.02rem; margin: 0; }
+.g-badge {
+  background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700;
+  min-width: 20px; text-align: center; border-radius: 10px; padding: 1px 7px;
+}
+.g-sec-sub { color: var(--sub); font-size: .84rem; margin: 4px 0 12px; }
+.g-empty { color: var(--sub); font-size: .9rem; margin: 6px 0 0; }
+.g-msg { font-size: .85rem; color: var(--ok); margin: 8px 0 0; }
 .g-msg.err { color: #ff7a7a; }
 .g-list { display: flex; flex-direction: column; gap: 8px; }
 
-.g-card {
-  background: var(--card);
-  border-radius: 12px;
-  padding: 12px 14px;
-}
+.g-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
 .g-card.help { border-left: 3px solid var(--accent); }
-.g-card .who { font-weight: 600; }
-.g-card .when { color: var(--sub); font-size: .78rem; }
-.g-card .body { margin-top: 6px; font-size: .92rem; overflow-wrap: anywhere; }
-.g-card .body img { max-width: 100%; border-radius: 8px; }
 .g-card .row { display: flex; align-items: center; gap: 10px; }
-.g-card .row .grow { flex: 1; }
-.g-card .pend { color: var(--sub); font-size: .8rem; }
+.g-card .row .grow { flex: 1; min-width: 0; }
+.g-card .who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.g-card .when { color: var(--sub); font-size: .76rem; white-space: nowrap; }
+.g-card .body { margin-top: 8px; font-size: .92rem; overflow-wrap: anywhere; }
+.g-card .body img { max-width: 100%; border-radius: 8px; margin-top: 6px; }
+.g-link { display: inline-block; margin-top: 8px; color: var(--accent); font-size: .82rem; text-decoration: none; }
 
-#adopt-form { display: flex; gap: 8px; margin-bottom: 8px; }
+.tag { font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
+.tag.wait { background: #3a2f1a; color: #e8b04b; }
+.tag.ok { background: #17301f; color: var(--ok); }
+
+#adopt-form { display: flex; gap: 8px; }
 #adopt-form input {
-  flex: 1;
-  background: var(--card); color: var(--ink);
-  border: 1px solid #33405255; border-radius: 10px; padding: 10px 12px;
+  flex: 1; min-width: 0;
+  background: var(--bg); color: var(--ink);
+  border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
 }
 button {
   background: var(--accent); color: #fff; border: 0;
-  border-radius: 10px; padding: 10px 16px; font-weight: 600; cursor: pointer;
+  border-radius: 10px; padding: 11px 18px; font-weight: 600; cursor: pointer;
 }
-button.quiet { background: #33405255; color: var(--ink); font-weight: 500; }
+button:disabled { opacity: .5; cursor: default; }
+button.quiet { background: transparent; color: var(--sub); border: 1px solid var(--line); font-weight: 500; }
+button.quiet.is-on { color: var(--ok); border-color: var(--ok); }
+button.small { padding: 6px 12px; font-size: .82rem; }

src/assets/js/guardian.js

@@ -1 @@
-/* Guardian PWA client (FEP-633c): renders the dashboard state, adopts wards,
-   and manages the guardian push channel (web-push slice reused: alert types
-   'help' + 'guardian'). No framework, no inline scripts (CSP). */
+/* Guardian PWA client (FEP-633c): renders the dashboard, adopts wards, and
+   manages the guardian push channel. No framework, no inline scripts (CSP).
+   All user-facing text comes from state.strings (server i18n). */
 (function () {
   'use strict';
-  var state = JSON.parse(document.getElementById('guardian-state').textContent || '{}');
+  var S = JSON.parse(document.getElementById('guardian-state').textContent || '{}');
+  var T = S.strings || {};
 
   function el(tag, cls, text) {
@@ -17 +18 @@
     catch (e) { return uri; }
   }
-  function when(s) {
-    return String(s || '').slice(0, 16).replace('T', ' ');
-  }
+  function when(s) { return String(s || '').slice(0, 16).replace('T', ' '); }
+  function show(id, on) { document.getElementById(id).hidden = !on; }
 
-  // ── Message centre: help requests ──────────────────────────────────────
+  // ── 1. Help requests ───────────────────────────────────────────────────
   function renderHelp() {
     var list = document.getElementById('help-list');
     list.textContent = '';
-    (state.help || []).forEach(function (h) {
+    var help = S.help || [];
+    help.forEach(function (h) {
       var card = el('div', 'g-card help');
       var row = el('div', 'row');
-      var who = el('span', 'who', h.actor_name || handleOf(h.actor_uri, h.actor_handle));
-      var at = el('span', 'when', when(h.published || h.created_at));
-      row.appendChild(who); row.appendChild(at);
+      row.appendChild(el('span', 'who grow', h.actor_name || handleOf(h.actor_uri, h.actor_handle)));
+      row.appendChild(el('span', 'when', when(h.published || h.created_at)));
       card.appendChild(row);
       var body = el('div', 'body');
-      body.innerHTML = h.content || '';           // sanitized server-side on ingest
+      body.innerHTML = h.content || '';          // sanitized server-side on ingest
       card.appendChild(body);
       if (h.note_url) {
-        var link = el('a', 'when', 'open');
-        link.href = h.note_url; link.target = '_blank'; link.rel = 'noopener';
-        card.appendChild(link);
+        var a = el('a', 'g-link', T.open || 'open');
+        a.href = h.note_url; a.target = '_blank'; a.rel = 'noopener';
+        card.appendChild(a);
       }
       list.appendChild(card);
     });
-    document.getElementById('help-empty').hidden = (state.help || []).length > 0;
+    var badge = document.getElementById('help-count');
+    badge.textContent = help.length; badge.hidden = help.length === 0;
+    show('help-empty', help.length === 0);
   }
 
-  // ── Wards + pending offers ─────────────────────────────────────────────
-  function wardCard(w, pending) {
-    var card = el('div', 'g-card');
-    var row = el('div', 'row');
-    var who = el('span', 'who grow', handleOf(w.other_uri, w.other_handle));
-    row.appendChild(who);
-    if (pending) row.appendChild(el('span', 'pend', state.strings.pending));
-    var btn = el('button', 'quiet', pending ? state.strings.retract : state.strings.release);
-    btn.addEventListener('click', function () {
-      fetch('/guardian/wards/remove', {
-        method: 'POST', headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ uri: w.other_uri, site: state.site }),
-      }).then(refresh);
+  // ── 3. Pending offers I sent ───────────────────────────────────────────
+  function renderPending() {
+    var list = document.getElementById('pending-list');
+    list.textContent = '';
+    var pend = S.pendingOffers || [];
+    pend.forEach(function (w) {
+      var card = el('div', 'g-card');
+      var row = el('div', 'row');
+      row.appendChild(el('span', 'who grow', handleOf(w.other_uri, w.other_handle)));
+      row.appendChild(el('span', 'tag wait', T.pending));
+      var btn = el('button', 'quiet small', T.retract);
+      btn.addEventListener('click', function () { remove(w.other_uri, btn); });
+      row.appendChild(btn);
+      card.appendChild(row);
+      list.appendChild(card);
     });
-    row.appendChild(btn);
-    card.appendChild(row);
-    return card;
-  }
-  function renderWards() {
-    var wl = document.getElementById('wards-list');
-    var ol = document.getElementById('offers-list');
-    wl.textContent = ''; ol.textContent = '';
-    (state.wards || []).forEach(function (w) { wl.appendChild(wardCard(w, false)); });
-    (state.pendingOffers || []).forEach(function (w) { ol.appendChild(wardCard(w, true)); });
-    document.getElementById('wards-empty').hidden =
-      (state.wards || []).length + (state.pendingOffers || []).length > 0;
+    show('pending-section', pend.length > 0);
   }
 
-  function refresh() {
-    fetch('/guardian/api/state?site=' + encodeURIComponent(state.site))
-      .then(function (r) { return r.json(); })
-      .then(function (s) { if (s && !s.error) { state = s; renderHelp(); renderWards(); } });
+  // ── 4. Accepted wards ──────────────────────────────────────────────────
+  function renderWards() {
+    var list = document.getElementById('wards-list');
+    list.textContent = '';
+    var wards = S.wards || [];
+    wards.forEach(function (w) {
+      var card = el('div', 'g-card');
+      var row = el('div', 'row');
+      row.appendChild(el('span', 'who grow', handleOf(w.other_uri, w.other_handle)));
+      row.appendChild(el('span', 'tag ok', T.active));
+      var btn = el('button', 'quiet small', T.release);
+      btn.addEventListener('click', function () { remove(w.other_uri, btn); });
+      row.appendChild(btn);
+      card.appendChild(row);
+      list.appendChild(card);
+    });
+    show('wards-empty', wards.length === 0);
   }
 
-  // ── Adopt ──────────────────────────────────────────────────────────────
-  document.getElementById('adopt-form').addEventListener('submit', function (ev) {
+  function remove(uri, btn) {
+    btn.disabled = true;
+    fetch('/guardian/wards/remove', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ uri: uri, site: S.site }),
+    }).then(refresh);
+  }
+
+  function renderAll() { renderHelp(); renderPending(); renderWards(); }
+
+  function refresh() {
+    return fetch('/guardian/api/state?site=' + encodeURIComponent(S.site))
+      .then(function (r) { return r.json(); })
+      .then(function (s) { if (s && !s.error) { S = s; T = s.strings || T; renderAll(); } });
+  }
+
+  // ── 2. Adopt ───────────────────────────────────────────────────────────
+  var form = document.getElementById('adopt-form');
+  var input = document.getElementById('adopt-handle');
+  var adoptBtn = document.getElementById('adopt-btn');
+  var msg = document.getElementById('adopt-msg');
+  function setMsg(text, isErr) { msg.hidden = false; msg.className = 'g-msg' + (isErr ? ' err' : ''); msg.textContent = text; }
+
+  form.addEventListener('submit', function (ev) {
     ev.preventDefault();
-    var input = document.getElementById('adopt-handle');
-    var msg = document.getElementById('adopt-msg');
     var handle = input.value.trim();
     if (!handle) return;
-    msg.hidden = false; msg.classList.remove('err'); msg.textContent = '…';
+    adoptBtn.disabled = true;
+    setMsg(T.sending || '…', false);
     fetch('/guardian/adopt', {
       method: 'POST', headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ handle: handle, site: state.site }),
+      body: JSON.stringify({ handle: handle, site: S.site }),
     }).then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); })
       .then(function (res) {
-        if (res.ok) { msg.textContent = state.strings.sent; input.value = ''; refresh(); }
-        else { msg.classList.add('err'); msg.textContent = state.strings.failed + ': ' + (res.j.error || '?'); }
+        adoptBtn.disabled = false;
+        if (res.ok) {
+          input.value = '';
+          // Always refresh: the offer is recorded even if delivery is still
+          // in flight. Show it under "Verzonden aanvragen".
+          setMsg(res.j.delivered === false ? T.sent_retry : T.sent, false);
+          refresh();
+        } else {
+          setMsg((res.j.error === 'not_found' ? T.not_found : T.failed) , true);
+        }
       })
-      .catch(function () { msg.classList.add('err'); msg.textContent = state.strings.network; });
+      .catch(function () { adoptBtn.disabled = false; setMsg(T.network, true); });
   });
 
@@ -104 +139 @@
   });
 
-  // ── Push: the guardian channel (help + guardian alerts) ────────────────
+  // ── 5. Push ────────────────────────────────────────────────────────────
   var toggle = document.getElementById('push-toggle');
   var pmsg = document.getElementById('push-msg');
@@ -115 +150 @@
         toggle.textContent = sub ? toggle.dataset.onLabel : toggle.dataset.offLabel;
         toggle.dataset.subscribed = sub ? '1' : '';
+        toggle.classList.toggle('is-on', !!sub);
       });
   }
@@ -145 +181 @@
           body: JSON.stringify({
             subscription: sub.toJSON(),
-            // The guardian channel: calls for help + adoption traffic.
             alerts: { help: 1, guardian: 1, dm: 1, follow: 0, reply: 0, like: 0, boost: 0 },
             uaLabel: 'Guardian PWA',
@@ -151 +186 @@
         });
       }).then(pushState).catch(function (e) {
-        pmsg.hidden = false; pmsg.classList.add('err');
-        pmsg.textContent = 'Push niet beschikbaar: ' + e.message;
+        pmsg.hidden = false; pmsg.className = 'g-msg err';
+        pmsg.textContent = (T.push_unavailable || 'Push unavailable') + ': ' + e.message;
       });
     });
   });
 
-  renderHelp(); renderWards(); pushState();
-  // Live-ish: poll the state every 45s while the PWA is open.
-  setInterval(refresh, 45000);
+  renderAll(); pushState();
+  setInterval(refresh, 45000);   // live-ish while open
 })();