source: Klonkt/src/views/pages/guardian2.ejs@ 28267519

main
Last change on this file since 28267519 was 28267519, checked in by Robin <roboburr@…>, 7 weeks ago

Guardian 2: meekijken met je wards (interop-hoofdroute, FEP-633c §5)

Een guardian volgt z'n wards, dus hun posts (ook followers-only) worden bezorgd
in de inbox -> timeline. Volgen is het mechanisme, geen nieuwe fetch, werkt
cross-instance en respecteert zichtbaarheid. Bij eerste contact backfillen we de
recente PUBLIEKE posts als cold start zodat de hoek niet leeg is. Read-only: een
guardian kijkt, publiceert niet.

Klonkt accepteert vandaag elke Follow automatisch, dus een gecommitte guardian
komt er direct in; de expliciete 5.3-gating (auto-accept alleen voor guardians)
is de volgende fase. Authorized-fetch komt als Klonkt-onderlinge verfijning erna.

Changed files:
src/routes/guardian2.js

  • ensureWardConnections(): volg + backfill per ward, alleen eerste keer
  • GET /api/feed: getTimeline gefilterd op je wards, read-only shape

src/views/pages/guardian2.ejs

  • wards-corner sectie bovenaan

src/assets/js/guardian2.js

  • renderFeed/loadFeed; CW ingeklapt; server-gesanitizede HTML

src/assets/css/guardian2.css

  • feed-kaart-styling

src/services/i18n.js

  • guardian2 feed_title/feed_sub (nl/en/de)

remarks: npm test 164/164; feed-api auth-gated. v1 /guardian onaangeraakt.

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>
  • Property mode set to 100644
File size: 3.7 KB
Line 
1<!DOCTYPE html>
2<html lang="<%= lang %>">
3<head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title><%= t('guardian.app_name') %> 2</title>
7 <link rel="manifest" href="/guardian2/manifest.webmanifest">
8 <link rel="icon" href="/guardian2/icon.svg" type="image/svg+xml">
9 <meta name="theme-color" content="#ff6b35">
10 <link rel="stylesheet" href="/guardian2/app.css">
11</head>
12<body>
13 <header class="g-head">
14 <span class="g-buoy">🛟</span>
15 <div class="g-head-txt">
16 <h1><%= t('guardian.app_name') %></h1>
17 <p class="g-sub"><%= t('guardian.tagline') %></p>
18 </div>
19 <% if (sites.length > 1) { %>
20 <select id="site-picker" aria-label="<%= t('guardian.acting_as') %>">
21 <% for (const s of sites) { %>
22 <option value="<%= s.slug %>" <%= s.slug === state.site ? 'selected' : '' %>>@<%= s.slug %></option>
23 <% } %>
24 </select>
25 <% } else { %>
26 <span class="g-me" title="<%= t('guardian.acting_as') %>">@<%= state.site %></span>
27 <% } %>
28 <form method="post" action="/guardian2/invite" style="display:inline">
29 <button class="quiet small" type="submit">Invite a guardian</button>
30 </form>
31</header>
32
33 <main>
34 <!-- 0. Wards' corner: meelezen met je wards (read-only). -->
35 <section id="feed-section" hidden>
36 <div class="g-sec-head"><h2><%= t('guardian2.feed_title') %></h2></div>
37 <p class="g-sec-sub"><%= t('guardian2.feed_sub') %></p>
38 <div id="feed-list" class="g-list"></div>
39 </section>
40
41 <!-- 1. Berichtencentrum: hulpverzoeken. Dat is waar dit voor bestaat. -->
42 <section id="help-section">
43 <div class="g-sec-head">
44 <h2><%= t('guardian.help_title') %></h2>
45 <span id="help-count" class="g-badge" hidden></span>
46 </div>
47 <p class="g-sec-sub"><%= t('guardian.help_sub') %></p>
48 <div id="help-list" class="g-list"></div>
49 <p id="help-empty" class="g-empty"><%= t('guardian.help_empty') %></p>
50 </section>
51
52 <!-- 2. Nieuwe ward adopteren. -->
53 <section id="adopt-section">
54 <div class="g-sec-head"><h2><%= t('guardian.adopt_title') %></h2></div>
55 <p class="g-sec-sub"><%= t('guardian.adopt_sub') %></p>
56 <form id="adopt-form" autocomplete="off">
57 <input id="adopt-handle" type="text" inputmode="email" autocomplete="off"
58 placeholder="@kind@server.eu" aria-label="<%= t('guardian.adopt_label') %>">
59 <button type="submit" id="adopt-btn"><%= t('guardian.adopt_btn') %></button>
60 </form>
61 <p id="adopt-msg" class="g-msg" hidden></p>
62 </section>
63
64 <!-- 3. Verzonden aanvragen (nog niet beantwoord). -->
65 <section id="pending-section" hidden>
66 <div class="g-sec-head"><h2><%= t('guardian.pending_title') %></h2></div>
67 <p class="g-sec-sub"><%= t('guardian.pending_sub') %></p>
68 <div id="pending-list" class="g-list"></div>
69 </section>
70
71 <!-- 4. Mijn wards (geaccepteerd). -->
72 <section id="wards-section">
73 <div class="g-sec-head"><h2><%= t('guardian.wards_title') %></h2></div>
74 <div id="wards-list" class="g-list"></div>
75 <p id="wards-empty" class="g-empty"><%= t('guardian.wards_empty') %></p>
76 </section>
77
78 <!-- 5. Meldingen. -->
79 <section id="push-section">
80 <div class="g-sec-head"><h2><%= t('guardian.push_title') %></h2></div>
81 <p class="g-sec-sub"><%= t('guardian.push_sub') %></p>
82 <button id="push-toggle" class="quiet" data-on-label="<%= t('guardian.push_off') %>"
83 data-off-label="<%= t('guardian.push_on') %>"><%= t('guardian.push_on') %></button>
84 <p id="push-msg" class="g-msg" hidden></p>
85 </section>
86 </main>
87
88 <script type="application/json" id="guardian-state"><%- JSON.stringify(state) %></script>
89 <script src="/guardian2/app.js" defer></script>
90</body>
91</html>
Note: See TracBrowser for help on using the repository browser.