Changeset 746d98a in Klonkt for src/views/pages


Ignore:
Timestamp:
09/30/2026 09:08:48 AM (4 hours ago)
Author:
Robin <roboburr@…>
Branches:
main
Parents:
31680c3
Message:

Wardmodus: een besloten Klonkt met alleen het profiel openbaar

Robin, 30-9: "Ward Profile mode gaat actief wanneer ward gekoppeld is, dus
wanneer de persoon guardian(s) heeft. Een besloten Klonkt met enkel het profiel
van de ward publiek. Wij denken dat dit het beste valt bij emancipation om de
functie weer naar normaal Klonkt te brengen."

AFGELEID, NIET OPGESLAGEN. Heeft de site geaccepteerde guardians, dan staat de
modus aan; is de set leeg, dan uit. listGuardians telt alleen geaccepteerde
guardianships, dus een voorstel zet niets dicht, en de set leegmaken is
emancipatie (FEP-633c 3.4) -- precies waar het ontwerp de weg terug legt. Een
schakelaar zou een tweede waarheid naast de guardianship zijn.

STANDAARD DICHT (middleware/ward-profile.js, in server.js direct na de
siteresolver en de schrijfpoort). Een bezoeker ziet op / het profiel en verder
niets: een pagina gaat terug naar het profiel, al het andere is 404, een POST
bereikt zijn handler niet, en een htmx-navigatie krijgt HX-Redirect in plaats
van een brokstuk. Wat niet op de lijst staat komt er niet langs, zodat een
nieuwe route niet vanzelf een kind openzet.

Open blijft: inloggen, account, beheer, het guardianpaneel, /lang, de bestanden
van de pagina zelf, en /audio/stream -- die bewaakt elk bestand zelf, en een
track die de ward op de fediverse opende moet daar speelbaar blijven. De
federatie (ActivityPub, WebFinger, OAuth voor Shaer, /media, /assets, /og) hangt
al VOOR de poort; de paden staan toch op de lijst, voor als de volgorde ooit
omgaat, want dan zou een ward stil van de fediverse verdwijnen.

Wie alles ziet: de ward zelf, en god, kijker en sitebeheer. Een andere
ingelogde gebruiker is gewoon een bezoeker.

DE PROFIELPAGINA (pages/ward-profile.ejs) mag verzorgd, want dit is alles wat
een bezoeker ziet: foto met een ring in de accentkleur, de naam groot, de
handle op een pil, de bio, de links als brede knoppen in hun merkkleur, een
volgknop die de bestaande fediverse-dialoog opent (een volgverzoek aan een ward
gaat eerst langs de guardians), en een neutrale regel dat berichten alleen
voor volgers zijn. Nergens "kind" of "ward": dat de account guardians heeft
staat al openbaar op de fediverse. Dezelfde bronnen als de profielkop, zodat
het profiel op geen twee plekken iets anders kan zeggen. De chrome biedt een
bezoeker niets aan wat dicht is: geen zoekknop, geen archief, geen
Lezen/Grid-schakelaar.

DE PROFIELLINKS verhuizen van Appearance naar het account (/account#links),
bij naam, bio en foto. Twee vallen onderweg, allebei getoetst:

  • Appearance schreef profile_links altijd, uit de formuliervelden. Met de velden weg zou elke keer opslaan daar de links wissen. Die pagina schrijft ze niet meer.
  • ownedSite haalde profile_links niet op, dus de accountpagina toonde nul links en opslaan wiste ze. Gevonden bij het bekijken, niet door een toets; nu wel.

buildProfileLinks staat in PlatformIcons.js, en de rijen-knoppen in een eigen
module (mod/profile-links.js).

Getoetst: gewone Klonkt zonder guardians, een voorstel zet niets dicht,
gekoppeld alleen het profiel, pagina's terug, 404 voor wat geen pagina is, geen
handler voor een POST, HX-Redirect, wat open moet blijft open, ward en beheer
zien alles, een andere ingelogde is een bezoeker, emancipatie maakt het weer
gewoon, de links bij het account en Appearance wist ze niet. Tegenproef per
zaak. Volledige suite 1325 groen.

Nagekeken in de browser op 375 en 1280 pixels: het profiel past op een
telefoonscherm, knoppen van 55 pixels, geen overloop, de volgknop opent de
dialoog; de accountpagina toont de bestaande links en voegt er een toe.

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

Location:
src/views/pages
Files:
1 added
2 edited

Legend:

Unmodified
Added
Removed

  • src/views/pages/account.ejs

    r31680c3 r746d98a  
    113113    </form>
    114114  </section>
     115  <% } %>
     116
     117  <%# ── PROFIELLINKS ───────────────────────────────────────────
     118      Sinds 30-9 hier, bij je profiel, en niet meer op de Appearance-pagina: ze
     119      horen bij je naam, bio en foto. In de wardmodus is dat profiel het enige
     120      dat een bezoeker van de site ziet. %>
     121  <% if (typeof editableSite !== 'undefined' && editableSite && canMutate) { %>
     122  <section class="ax-card" id="links">
     123    <div class="ax-card-title"><%= t('asite.links') %></div>
     124    <p class="form-hint"><%= t('asite.links_hint') %></p>
     125    <form action="/account/links" method="post" class="ax-form">
     126      <div id="profile-links-rows">
     127        <% (profileLinks || []).forEach(function (l) { %>
     128          <div class="profile-link-row">
     129            <select name="profile_link_platform[]" aria-label="<%= t('acct.link_platform') %>">
     130              <% platforms.forEach(function (p) { %>
     131                <option value="<%= p.key %>" <%= l.platform === p.key ? 'selected' : '' %>><%= p.label %></option>
     132              <% }); %>
     133            </select>
     134            <input type="text" name="profile_link_url[]" value="<%= l.url %>" placeholder="https://…" required aria-label="<%= t('acct.link_url') %>">
     135            <button type="button" class="ax-btn pl-remove" aria-label="<%= t('acct.link_remove') %>">×</button>
     136          </div>
     137        <% }); %>
     138      </div>
     139      <template id="profile-link-template">
     140        <div class="profile-link-row">
     141          <select name="profile_link_platform[]" aria-label="<%= t('acct.link_platform') %>">
     142            <% platforms.forEach(function (p) { %>
     143              <option value="<%= p.key %>"><%= p.label %></option>
     144            <% }); %>
     145          </select>
     146          <input type="text" name="profile_link_url[]" placeholder="https://…" required aria-label="<%= t('acct.link_url') %>">
     147          <button type="button" class="ax-btn pl-remove" aria-label="<%= t('acct.link_remove') %>">×</button>
     148        </div>
     149      </template>
     150      <div class="ax-form-actions">
     151        <button type="button" id="profile-link-add" class="ax-btn"><%= t('asite.link_add') %></button>
     152        <button type="submit" class="ax-btn ax-btn-primary"><%= t('acct.links_save') %></button>
     153      </div>
     154    </form>
     155  </section>
     156  <style>
     157    .profile-link-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin-bottom: .5rem; }
     158    .profile-link-row select { padding: .45rem .6rem; grid-column: 1 / -1; }
     159    .profile-link-row input { min-width: 0; }
     160    @media (min-width: 520px) {
     161      .profile-link-row { grid-template-columns: 160px 1fr auto; }
     162      .profile-link-row select { grid-column: auto; }
     163    }
     164  </style>
    115165  <% } %>
    116166

  • src/views/pages/admin-site-edit.ejs

    r31680c3 r746d98a  
    150150    </fieldset>
    151151
    152     <fieldset class="profile-links-fieldset">
    153       <legend><%= t('asite.links') %></legend>
    154       <p class="form-hint"><%= t('asite.links_hint') %></p>
    155 
    156       <div id="profile-links-rows">
    157         <% (parsedLinks || []).forEach(function(l) { %>
    158           <div class="profile-link-row">
    159             <select name="profile_link_platform[]">
    160               <% platforms.forEach(function(p) { %>
    161                 <option value="<%= p.key %>" <%= l.platform === p.key ? 'selected' : '' %>><%= p.label %></option>
    162               <% }); %>
    163             </select>
    164             <input type="text" name="profile_link_url[]" value="<%= l.url %>" placeholder="https://…" required>
    165             <button type="button" class="btn btn-danger pl-remove">×</button>
    166           </div>
    167         <% }); %>
    168       </div>
    169 
    170       <template id="profile-link-template">
    171         <div class="profile-link-row">
    172           <select name="profile_link_platform[]">
    173             <% platforms.forEach(function(p) { %>
    174               <option value="<%= p.key %>"><%= p.label %></option>
    175             <% }); %>
    176           </select>
    177           <input type="text" name="profile_link_url[]" placeholder="https://…" required>
    178           <button type="button" class="btn btn-danger pl-remove">×</button>
    179         </div>
    180       </template>
    181 
    182       <button type="button" id="profile-link-add" class="btn"><%= t('asite.link_add') %></button>
    183     </fieldset>
     152    <%# De profiellinks staan sinds 30-9 bij je profiel, naast je naam, bio en foto:
     153        dat is waar ze bij horen, en in de wardmodus is dat profiel het enige dat
     154        een bezoeker ziet. %>
     155    <p class="form-hint profile-links-moved"><%= t('asite.links_moved') %> <a href="/account#links"><%= t('asite.links_moved_link') %></a></p>
    184156
    185157    <%# Aliassen en verhuizen staan sinds 14-8 op /admin/migrate, bij elkaar met
    … …  
    477449   button below. Prevents horizontal overflow on phones (fixed 160px column +
    478450   non-shrinkable input together ~447px > screen width). */
    479 .profile-link-row {
    480   display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; margin-bottom: 0.5rem;
    481 }
    482 .profile-link-row select { padding: 0.45rem 0.6rem; grid-column: 1 / -1; }
    483 .profile-link-row input { min-width: 0; }
    484 @media (min-width: 520px) {
    485   .profile-link-row { grid-template-columns: 160px 1fr auto; }
    486   .profile-link-row select { grid-column: auto; }
    487 }
    488 .profile-links-fieldset details > label { margin-top: 0.4rem; }
    489451</style>
Note: See TracChangeset for help on using the changeset viewer.