Index: src/assets/css/guardian.css =================================================================== --- src/assets/css/guardian.css (revision 318d0c2548c03158eca4abe63ba513685acf84f0) +++ src/assets/css/guardian.css (revision 318d0c2548c03158eca4abe63ba513685acf84f0) @@ -0,0 +1,67 @@ +/* Guardian PWA (FEP-633c): its own calm, dark surface; the buoy orange is + the accent. Standalone: this page never inherits the site theme. */ +:root { + --bg: #141a24; + --card: #1e2632; + --ink: #e8ecf2; + --sub: #93a0b4; + --accent: #ff6b35; + --ok: #4caf7d; +} +* { box-sizing: border-box; } +body { + margin: 0; + background: var(--bg); + color: var(--ink); + font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; + padding-bottom: 40px; +} +.g-head { + display: flex; + align-items: center; + gap: 10px; + padding: 14px 16px; + background: var(--card); + position: sticky; + top: 0; +} +.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; } +#site-picker { + background: var(--bg); color: var(--ink); + border: 1px solid #33405233; 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); } +.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.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; } + +#adopt-form { display: flex; gap: 8px; margin-bottom: 8px; } +#adopt-form input { + flex: 1; + background: var(--card); color: var(--ink); + border: 1px solid #33405255; border-radius: 10px; padding: 10px 12px; +} +button { + background: var(--accent); color: #fff; border: 0; + border-radius: 10px; padding: 10px 16px; font-weight: 600; cursor: pointer; +} +button.quiet { background: #33405255; color: var(--ink); font-weight: 500; } Index: src/assets/js/guardian.js =================================================================== --- src/assets/js/guardian.js (revision 318d0c2548c03158eca4abe63ba513685acf84f0) +++ src/assets/js/guardian.js (revision 318d0c2548c03158eca4abe63ba513685acf84f0) @@ -0,0 +1,162 @@ +/* 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). */ +(function () { + 'use strict'; + var state = JSON.parse(document.getElementById('guardian-state').textContent || '{}'); + + function el(tag, cls, text) { + var n = document.createElement(tag); + if (cls) n.className = cls; + if (text != null) n.textContent = text; + return n; + } + function handleOf(uri, cached) { + if (cached) return cached; + try { var u = new URL(uri); return '@' + u.pathname.split('/').filter(Boolean).pop() + '@' + u.host; } + catch (e) { return uri; } + } + function when(s) { + return String(s || '').slice(0, 16).replace('T', ' '); + } + + // ── Message centre: help requests ────────────────────────────────────── + function renderHelp() { + var list = document.getElementById('help-list'); + list.textContent = ''; + (state.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); + card.appendChild(row); + var body = el('div', 'body'); + 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); + } + list.appendChild(card); + }); + document.getElementById('help-empty').hidden = (state.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); + }); + 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; + } + + 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(); } }); + } + + // ── Adopt ────────────────────────────────────────────────────────────── + document.getElementById('adopt-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 = '…'; + fetch('/guardian/adopt', { + method: 'POST', headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ handle: handle, site: state.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 || '?'); } + }) + .catch(function () { msg.classList.add('err'); msg.textContent = state.strings.network; }); + }); + + // ── Site picker ──────────────────────────────────────────────────────── + var picker = document.getElementById('site-picker'); + if (picker) picker.addEventListener('change', function () { + location.href = '/guardian?site=' + encodeURIComponent(picker.value); + }); + + // ── Push: the guardian channel (help + guardian alerts) ──────────────── + var toggle = document.getElementById('push-toggle'); + var pmsg = document.getElementById('push-msg'); + function pushState() { + if (!('serviceWorker' in navigator) || !('PushManager' in window)) { toggle.disabled = true; return; } + navigator.serviceWorker.register('/sw.js').catch(function () {}); + navigator.serviceWorker.ready + .then(function (reg) { return reg.pushManager.getSubscription(); }) + .then(function (sub) { + toggle.textContent = sub ? toggle.dataset.onLabel : toggle.dataset.offLabel; + toggle.dataset.subscribed = sub ? '1' : ''; + }); + } + function urlB64(base64) { + var pad = '='.repeat((4 - (base64.length % 4)) % 4); + var b = (base64 + pad).replace(/-/g, '+').replace(/_/g, '/'); + var raw = atob(b); var arr = new Uint8Array(raw.length); + for (var i = 0; i < raw.length; i++) arr[i] = raw.charCodeAt(i); + return arr; + } + toggle.addEventListener('click', function () { + pmsg.hidden = true; + navigator.serviceWorker.ready.then(function (reg) { + if (toggle.dataset.subscribed) { + reg.pushManager.getSubscription().then(function (sub) { + if (!sub) return; + fetch('/push/unsubscribe', { + method: 'POST', headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ endpoint: sub.endpoint }), + }).then(function () { return sub.unsubscribe(); }).then(pushState); + }); + return; + } + fetch('/push/vapid').then(function (r) { return r.json(); }).then(function (v) { + if (!v.publicKey) throw new Error('no key'); + return reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlB64(v.publicKey) }); + }).then(function (sub) { + return fetch('/push/subscribe', { + method: 'POST', headers: { 'Content-Type': 'application/json' }, + 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', + }), + }); + }).then(pushState).catch(function (e) { + pmsg.hidden = false; pmsg.classList.add('err'); + pmsg.textContent = 'Push niet beschikbaar: ' + e.message; + }); + }); + }); + + renderHelp(); renderWards(); pushState(); + // Live-ish: poll the state every 45s while the PWA is open. + setInterval(refresh, 45000); +})(); Index: src/routes/admin-sites.js =================================================================== --- src/routes/admin-sites.js (revision e61c289a40c106afec8f8271727dce91faf8c645) +++ src/routes/admin-sites.js (revision 318d0c2548c03158eca4abe63ba513685acf84f0) @@ -101,4 +101,5 @@ 'forum', 'tag', 'user', 'users', 'artiesten', 'leden', 'feed.xml', 'atom.xml', 'sitemap.xml', 'manifest.webmanifest', 'sw.js', 'favicon.ico', 'favicon.svg', 'assets', + 'paid', 'push', 'guardian', ]); Index: src/routes/guardian.js =================================================================== --- src/routes/guardian.js (revision 318d0c2548c03158eca4abe63ba513685acf84f0) +++ src/routes/guardian.js (revision 318d0c2548c03158eca4abe63ba513685acf84f0) @@ -0,0 +1,139 @@ +/** + * The Guardian PWA (FEP-633c): a separate, installable corner of Klonkt for + * guardians. One place to add and manage wards, a message centre for + * incoming help requests and adoption traffic, and its own push channel + * (alert types 'help' and 'guardian', web-push slice reused). + * + * Everything is scoped to a site the logged-in user OWNS: the guardian acts + * as one of their own actors (?site=slug picks one when they own several). + * Views carry no inline scripts (CSP): logic lives in /assets/js/guardian.js. + */ +import express from 'express'; +import db from '../config/database.js'; +import { requireAuth } from '../middleware/auth.js'; +import AP from '../services/ActivityPubService.js'; +import * as Guardianship from '../services/guardianship/index.js'; +import { t as i18nT, resolveLang } from '../services/i18n.js'; + +const router = express.Router(); + +/** The acting site: ?site=slug when owned, else the user's first site. */ +function siteForUser(req) { + const userId = req.session.user.id; + const want = String(req.query.site || req.body?.site || '').trim(); + if (want) { + const s = db.prepare('SELECT * FROM sites WHERE slug = ? AND owner_id = ?').get(want, userId); + if (s) return s; + } + return db.prepare('SELECT * FROM sites WHERE owner_id = ? ORDER BY id LIMIT 1').get(userId); +} + +/** Everything the dashboard shows, one shape for page and API. */ +function uiStrings(L) { + const keys = ['sent', 'failed', 'network', 'pending', 'retract', 'release']; + return Object.fromEntries(keys.map((k) => [k, i18nT(L, `guardian.${k}`)])); +} + +function dashboardState(site, L) { + const wards = Guardianship.listWards(site.slug); + const help = db.prepare( + `SELECT object_uri, note_url, actor_uri, actor_name, actor_handle, actor_icon, content, published, created_at + FROM ap_mentions WHERE slug = ? AND help_request = 1 ORDER BY created_at DESC LIMIT 50` + ).all(site.slug); + return { + site: site.slug, + wards: wards.filter((w) => w.status === 'accepted'), + pendingOffers: wards.filter((w) => w.status === 'offered'), + help, + strings: uiStrings(L), + }; +} + +// ── The PWA page ───────────────────────────────────────────────────────── +router.get('/', requireAuth, (req, res) => { + const site = siteForUser(req); + const L = resolveLang(req); + if (!site) return res.status(404).send('No site for this account.'); + const sites = db.prepare('SELECT slug, title FROM sites WHERE owner_id = ? ORDER BY id').all(req.session.user.id); + res.render('pages/guardian', { + state: dashboardState(site, L), + sites, + lang: L, + t: (k, v) => i18nT(L, k, v), + cspNonce: res.locals.cspNonce, + }); +}); + +// ── JSON state for refreshes ───────────────────────────────────────────── +router.get('/api/state', requireAuth, (req, res) => { + const site = siteForUser(req); + if (!site) return res.status(404).json({ error: 'no_site' }); + res.json(dashboardState(site, resolveLang(req))); +}); + +// ── Adopt a ward: handle → resolve → C2S Offer through the same pipeline +// the Shaer apps use (one path, one behavior). +router.post('/adopt', requireAuth, express.json({ limit: '4kb' }), async (req, res) => { + const site = siteForUser(req); + if (!site) return res.status(404).json({ error: 'no_site' }); + const handle = String(req.body?.handle || '').trim(); + if (!handle) return res.status(400).json({ error: 'empty_handle' }); + const wardUri = /^https?:\/\//i.test(handle) ? handle : await AP.webfingerResolve(handle).catch(() => null); + if (!wardUri) return res.status(404).json({ error: 'not_found' }); + const base = (process.env.PUBLIC_BASE_URL || '').replace(/\/+$/, ''); + const me = AP.actorId(base, site.slug); + const r = await AP.ingestOutboxActivity(site, req.session.user, { + type: 'Offer', + object: { type: 'Relationship', subject: wardUri, relationship: 'shaer:Guardian', object: me }, + }); + if (!r || r.status >= 400) return res.status(r?.status || 500).json({ error: r?.error || 'offer_failed' }); + res.json({ ok: true, ward: wardUri }); +}); + +// ── Manage: retract a pending offer / release a ward ───────────────────── +router.post('/wards/remove', requireAuth, express.json({ limit: '4kb' }), (req, res) => { + const site = siteForUser(req); + if (!site) return res.status(404).json({ error: 'no_site' }); + const uri = String(req.body?.uri || '').trim(); + if (!uri) return res.status(400).json({ error: 'empty_uri' }); + Guardianship.removeRelation(site.slug, 'guardian', uri); + res.json({ ok: true }); +}); + +// ── The installable identity: own scope so the Guardian corner installs as +// its own app next to the site PWA. +router.get('/manifest.webmanifest', (req, res) => { + const site = res.locals.site; + res.set('Cache-Control', 'no-cache'); + res.json({ + id: `klonkt-guardian-${site?.slug || 'guardian'}`, + name: 'Klonkt Guardian', + short_name: 'Guardian', + description: 'Ward management and help requests for guardians.', + scope: '/guardian/', + start_url: '/guardian?source=pwa', + display: 'standalone', + display_override: ['standalone', 'minimal-ui'], + orientation: 'any', + background_color: '#141a24', + theme_color: '#ff6b35', + lang: site?.language || 'nl', + icons: [ + { src: '/guardian/icon.svg', sizes: 'any', type: 'image/svg+xml' }, + ], + }); +}); + +// The buoy mark, in the guardian accent (mirrors the site favicon pattern). +router.get('/icon.svg', (req, res) => { + const svg = ` + + + 🛟 +`; + res.set('Content-Type', 'image/svg+xml'); + res.set('Cache-Control', 'public, max-age=86400'); + res.send(svg); +}); + +export default router; Index: src/routes/posts.js =================================================================== --- src/routes/posts.js (revision e61c289a40c106afec8f8271727dce91faf8c645) +++ src/routes/posts.js (revision 318d0c2548c03158eca4abe63ba513685acf84f0) @@ -152,5 +152,5 @@ 'manifest.webmanifest', 'sw.js', 'favicon.ico', 'favicon.svg', 'assets', 'authorize_interaction', 'fediverse', 'news', 'following', 'notifications', 'blocking', - 'paid', 'push', + 'paid', 'push', 'guardian', ]); Index: src/server.js =================================================================== --- src/server.js (revision e61c289a40c106afec8f8271727dce91faf8c645) +++ src/server.js (revision 318d0c2548c03158eca4abe63ba513685acf84f0) @@ -49,4 +49,5 @@ import adminPushRoutes from './routes/admin-push.js'; import pushRoutes from './routes/push.js'; +import guardianRoutes from './routes/guardian.js'; import adminMediaRoutes from './routes/admin-media.js'; import circleRoutes from './routes/circle.js'; @@ -406,4 +407,5 @@ app.use('/paid', paidRoutes); // paid-posts patron/passkey flow (before the /:slug catch-all) app.use('/push', pushRoutes); // web-push subscribe/test (before the /:slug catch-all) +app.use('/guardian', guardianRoutes); // the Guardian PWA (FEP-633c, before the /:slug catch-all) app.use('/', postsRoutes); Index: src/views/pages/guardian.ejs =================================================================== --- src/views/pages/guardian.ejs (revision 318d0c2548c03158eca4abe63ba513685acf84f0) +++ src/views/pages/guardian.ejs (revision 318d0c2548c03158eca4abe63ba513685acf84f0) @@ -0,0 +1,60 @@ + + + + + + Klonkt Guardian + + + + + + +
+ 🛟 +

Guardian

+ <% if (sites.length > 1) { %> + + <% } else { %> + @<%= state.site %> + <% } %> +
+ +
+ +
+

<%= t('guardian.help_title') %>

+
+ +
+ +
+

<%= t('guardian.wards_title') %>

+
+ + +
+ +
+
+ +
+ +
+

<%= t('guardian.push_title') %>

+

<%= t('guardian.push_sub') %>

+ + +
+
+ + + + +