Changeset 439f095 in Klonkt

Timestamp:

07/28/2026 11:48:34 PM (6 weeks ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

88d7c8f

Parents:

0202104

Message:

De guardians-lijst verhuist van Berichten naar Connect

Connect is de pagina die vertelt met wie je verbonden bent, en een guardian is
precies de verbinding die een kind nooit zou moeten hoeven zoeken. In Berichten
stond hij boven een stroom meldingen, waar hij bij elk bezoek langsschuift; op
Connect staat hij bij de andere relaties, met een eigen kader omdat het geen
mensen zijn die je zelf gekozen hebt te volgen.

De stippen en de labels gaan mee zoals ze waren: beschikbaar, afwezig tot een
datum, offline. In Berichten blijft het guardianship-aanbod staan, want dat is
wel een bericht: er wordt iets aan je gevraagd.

Changed files:
src/routes/posts.js

• myGuardians van /messages naar /connect, met de handle-helper mee; de helper in /messages was daarmee dood en is weg

src/views/pages/messages.ejs

• het blok en zijn opmaak eruit

src/views/pages/connect.ejs

• de guardians-sectie bovenaan, met eigen opmaak

remarks: in de browser nagelopen, ook op 375px: drie guardians in drie staten
op Connect, Berichten houdt alleen nog het aanbod. 276 tests groen.

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

Location:

src

Files:

• routes/posts.js (modified) (2 diffs)
• views/pages/connect.ejs (modified) (2 diffs)
• views/pages/messages.ejs (modified) (2 diffs)

src/routes/posts.js

@@ -939 +939 @@
     ? Guardianship.offersCollection(`${gMe}/queues/offers`, site.slug, gMe).orderedItems
     : []).filter((o) => o['shaer:ward'] === gMe && o['shaer:needsMyAccept']);
-  // FEP-633c §2: who guards this account (committed). Shown so a ward can always
-  // see its guardians, not just pending offers. Derive a display @handle when the
-  // stored one is missing or is the escalation (inbox) handle rather than a @handle.
-  const guardianHandle = (uri, cached) => {
-    if (cached && cached.charAt(0) === '@') return cached;
-    try { const u = new URL(uri); return `@${u.pathname.split('/').filter(Boolean).pop()}@${u.host}`; }
-    catch { return uri; }
-  };
-  // With their availability (FEP-633c 3.6.1): the ward always sees the real
-  // size of its safety net, not just the names. Owner-only by construction:
-  // this page is the owner's.
-  const gStatus = site ? Object.fromEntries(
-    Guardianship.availability.statusesFor(site.slug, Guardianship.listGuardians(site.slug).map((g) => g.other_uri), Date.now())
-      .map((s) => [s.id, s]),
-  ) : {};
-  const myGuardians = (site ? Guardianship.listGuardians(site.slug) : [])
-    .map((g) => ({
-      uri: g.other_uri,
-      handle: guardianHandle(g.other_uri, g.other_handle),
-      availability: (gStatus[g.other_uri] || {})['shaer:availability'] || 'active',
-      awayUntil: (gStatus[g.other_uri] || {})['shaer:awayUntil'] || null,
-    }));
   renderPage(req, res, 'pages/messages', {
     pageTitleKey: 'msg.title', bodyClass: 'on-special', items, seenAt,
-    hasMore, nextOffset: offset + FEED_PAGE, moreBase, guardianOffers, myGuardians,
+    hasMore, nextOffset: offset + FEED_PAGE, moreBase, guardianOffers,
     success: req.query.success || null, error: req.query.error || null,
   });
@@ -1162 +1140 @@
   const site = res.locals.site;
   const connections = site ? ActivityPubService.listConnections(site.slug) : [];
+  // FEP-633c §2: the ward always sees who guards it, and §3.6 how available
+  // each of them is. Connect is where "who am I connected to" belongs; a
+  // guardian is the one connection a ward should never have to hunt for.
+  // Owner-only by construction: this page is the owner's.
+  const guardianHandle = (uri, cached) => {
+    if (cached && cached.charAt(0) === '@') return cached;
+    try { const u = new URL(uri); return `@${u.pathname.split('/').filter(Boolean).pop()}@${u.host}`; }
+    catch { return uri; }
+  };
+  const gStatus = site ? Object.fromEntries(
+    Guardianship.availability.statusesFor(site.slug, Guardianship.listGuardians(site.slug).map((g) => g.other_uri), Date.now())
+      .map((s) => [s.id, s]),
+  ) : {};
+  const myGuardians = (site ? Guardianship.listGuardians(site.slug) : [])
+    .map((g) => ({
+      uri: g.other_uri,
+      handle: guardianHandle(g.other_uri, g.other_handle),
+      availability: (gStatus[g.other_uri] || {})['shaer:availability'] || 'active',
+      awayUntil: (gStatus[g.other_uri] || {})['shaer:awayUntil'] || null,
+    }));
   renderPage(req, res, 'pages/connect', {
     pageTitle: 'Connect', bodyClass: 'on-special',
-    connections,
+    connections, myGuardians,
     success: req.query.success || null, error: req.query.error || null,
   });

src/views/pages/connect.ejs

@@ -4 +4 @@
   <% if (typeof success !== 'undefined' && success) { %><div class="alert alert-success"><%= success %></div><% } %>
   <% if (typeof error !== 'undefined' && error) { %><div class="alert alert-error"><%= error %></div><% } %>
+
+  <%# FEP-633c §2 + §3.6: who guards this account, and how available each of
+      them is. Connect is the "who am I connected to" page, and a guardian is
+      the one connection a ward should never have to hunt for. Availability in
+      buddy-list language on the responsibility axis; the labels are UI, the
+      wire keeps the spec terms. Never public: this page is the owner's. %>
+  <% if (typeof myGuardians !== 'undefined' && myGuardians.length) { %>
+    <section class="conn-guardians">
+      <h2 class="conn-gtitle">&#128737; <%= t('msg.guardians_label') %></h2>
+      <ul class="conn-glist">
+        <% myGuardians.forEach(function(g){
+             var _st = g.availability === 'away' ? 'away' : (g.availability === 'dormant' ? 'dormant' : 'active');
+             var _lbl = _st === 'away' ? t('msg.g_away', { date: g.awayUntil ? formatDate(g.awayUntil) : '?' })
+                      : (_st === 'dormant' ? t('msg.g_offline') : t('msg.g_available')); %>
+          <li class="conn-guardian">
+            <span class="conn-gdot conn-gdot--<%= _st %>" aria-hidden="true"></span>
+            <span class="conn-ghandle"><%= g.handle %></span>
+            <span class="conn-gstate"><%= _lbl %></span>
+          </li>
+        <% }); %>
+      </ul>
+    </section>
+  <% } %>
 
   <form method="post" action="/news/follow" class="tl-follow">
@@ -83 +106 @@
 
 <style>
+  /* Guardians (FEP-633c 3.6): the buddy-list dot on the responsibility axis.
+     Green available, yellow declared away with an end, grey observed dormant
+     (one answer restores). Set apart from the follow list on purpose: these
+     are not people you chose to follow, they are the ones looking after you. */
+  .conn-guardians { margin: 0 0 1.25rem; padding: .8rem 1rem; border-radius: 12px;
+    border: 1px solid color-mix(in srgb, var(--ink, #000) 10%, transparent);
+    background: color-mix(in srgb, var(--ink, #000) 2.5%, transparent);
+    border-left: 3px solid #35a2ff; }
+  .conn-gtitle { margin: 0 0 .5rem; font-size: .95rem; }
+  .conn-glist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
+  .conn-guardian { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
+  .conn-gdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
+  .conn-gdot--active { background: #4caf7d; }
+  .conn-gdot--away { background: #e0a83a; }
+  .conn-gdot--dormant { background: #8a93a3; }
+  .conn-ghandle { font-weight: 600; }
+  .conn-gstate { color: var(--ink-soft, #888); font-size: .82rem; }
   .tl-wrap { max-width: 640px; margin: 1rem auto; padding: 0 1rem; }
   .tl-title { margin: 0 0 .75rem; }

src/views/pages/messages.ejs

@@ -22 +22 @@
     </div>
     <% }); %>
-  <% } %>
-
-  <%# FEP-633c §2: the ward always sees who guards it (committed relations). %>
-  <% if (typeof myGuardians !== 'undefined' && myGuardians.length) { %>
-    <div class="alert" style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-left:3px solid #35a2ff;">
-      <span style="font-size:1.4em;">&#128737;</span>
-      <div style="flex:1;min-width:200px;">
-        <strong><%= t('msg.guardians_label') %></strong><br>
-        <%# Availability (FEP-633c 3.6): the ward sees the real size of its
-            safety net, in buddy-list language on the responsibility axis.
-            Labels are UI (Robins besluit); the wire keeps the spec terms.
-            Owner-only by construction: this page is the owner's. %>
-        <span class="msg-guardians">
-          <% myGuardians.forEach(function(g){
-               var _st = g.availability === 'away' ? 'away' : (g.availability === 'dormant' ? 'dormant' : 'active');
-               var _lbl = _st === 'away' ? t('msg.g_away', { date: g.awayUntil ? formatDate(g.awayUntil) : '?' })
-                        : (_st === 'dormant' ? t('msg.g_offline') : t('msg.g_available')); %>
-            <span class="msg-guardian">
-              <span class="msg-gdot msg-gdot-<%= _st %>" aria-hidden="true"></span>
-              <%= g.handle %>
-              <span class="msg-gstate"><%= _lbl %></span>
-            </span>
-          <% }); %>
-        </span>
-      </div>
-    </div>
   <% } %>
 
@@ -145 +119 @@
 
 <style>
-  /* Availability of the ward's guardians (FEP-633c 3.6): the buddy-list dot
-     on the responsibility axis. Green available, yellow declared away, grey
-     observed dormant (one answer restores). */
-  .msg-guardians { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
-  .msg-guardian { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
-  .msg-gdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
-  .msg-gdot-active { background: #4caf7d; }
-  .msg-gdot-away { background: #e0a83a; }
-  .msg-gdot-dormant { background: #8a93a3; }
-  .msg-gstate { color: var(--ink-soft, #888); font-size: .82rem; }
   .msg-wrap { max-width: 640px; margin: 1rem auto; padding: 0 1rem; }
   .msg-title { margin: 0 0 .9rem; }