Changeset 70e9147 in Klonkt for src/views

Timestamp:

08/19/2026 06:15:33 PM (3 weeks ago)

Author:

Bart <bart@…>

Branches:

main

Children:

70dbef4

Parents:

8501ee8

git-author:

Bart <bart@…> (08/19/2026 05:39:25 PM)

git-committer:

Bart <bart@…> (08/19/2026 06:15:33 PM)

Message:

Lezen vervangt Tijdlijn: twee keuzes solo, één in de cirkel

De chronologische lijst was de standaardweergave en Lezen de nieuwkomer; nu
andersom, en Tijdlijn verdwijnt als KEUZE. De opmaak zelf blijft bestaan
(.feed-timeline draagt nog het archief, de cirkel en de postpagina) -- alleen
kies je er niet meer voor, want voor hele berichten was Lezen de betere vorm.

Solo: Lezen | Grid. Cirkel: alleen Grid, want Lezen bestaat daar niet (dat zijn
berichten van anderen, van hun servers).

TWEE DINGEN DIE STIL KAPOT WAREN GEGAAN als ik alleen de knop had weggehaald:

• Wie hier eerder was heeft 'timeline' in zijn localStorage staan. Zonder vertaling houdt die bezoeker een weergave waar geen knop meer bij hoort: de pil helemaal grijs en een feed die niet is wat hij ooit koos. 'timeline' leest nu als 'reader'. Hetzelfde geldt voor sites met feed_view_default='timeline' in de database -- die worden bij het lezen naar reader vertaald, zonder migratie: alles wat geen 'grid' is, is lezen.

• Op de cirkel is Grid nu de ENIGE knop, en een knop die al actief is doet normaal niets. Dan zit je in Grid zonder weg terug. Is er één knop en staat hij aan, dan brengt hij je nu terug naar de standaard -- daar is dat de gewone lijst.

Nagelopen in de browser: solo toont Lezen|Grid met Lezen actief, een site die
nog 'timeline' opgeslagen heeft rendert als reader, en de cirkelknop gaat aan,
uit, aan.

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

Location:

src/views

Files:

• pages/admin-site-edit.ejs (modified) (1 diff)
• partials/shared-styles.ejs (modified) (1 diff)
• partials/view-switcher.ejs (modified) (2 diffs)
• shell.ejs (modified) (4 diffs)

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

@@ -199 +199 @@
         <span><%= t('asite.feed_default') %></span>
         <select name="feed_view_default">
-          <option value="timeline" <%= (site.feed_view_default || 'timeline') === 'timeline' ? 'selected' : '' %>><%= t('asite.feed_timeline') %></option>
+          <option value="reader" <%= site.feed_view_default !== 'grid' ? 'selected' : '' %>><%= t('asite.feed_reader') %></option>
           <option value="grid"     <%= site.feed_view_default === 'grid' ? 'selected' : '' %>><%= t('asite.feed_grid') %></option>
         </select>

src/views/partials/shared-styles.ejs

@@ -98 +98 @@
    (the click-handler then navigates to the feed in that view). The
    body-class switches client-side on HTMX-nav, so this works without a reload too. */
-body.on-post[data-feed-view="timeline"] .view-switch-btn[data-view="timeline"],
+body.on-post[data-feed-view="reader"] .view-switch-btn[data-view="reader"],
 body.on-post[data-feed-view="grid"] .view-switch-btn[data-view="grid"],
 body.on-post[data-grid-cols="2"] .grid-cols-btn[data-cols="2"],

src/views/partials/view-switcher.ejs

@@ -40 +40 @@
     <% } %>
     <div class="view-switcher" role="tablist" aria-label="Weergave">
-      <button type="button" class="view-switch-btn" data-view="timeline" role="tab"
+      <% if (_leesbaar) { %>
+      <%# Lezen is de standaardweergave sinds Tijdlijn weg is: hele berichten,
+          één per scherm. De chronologische lijst bestaat nog wel als opmaak
+          (.feed-timeline, ook op de cirkel en het archief), maar is geen KEUZE
+          meer -- daar was Lezen de betere vorm van. %>
+      <button type="button" class="view-switch-btn" data-view="reader" role="tab"
               aria-selected="<%= (!_neutral && !(typeof site !== 'undefined' && site && site.feed_view_default === 'grid')) ? 'true' : 'false' %>">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
-        <span><%= t('switch.timeline') %></span>
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
+        <span><%= t('switch.reader') %></span>
       </button>
+      <% } %>
       <button type="button" class="view-switch-btn" data-view="grid" role="tab"
               aria-selected="<%= (!_neutral && (typeof site !== 'undefined' && site && site.feed_view_default === 'grid')) ? 'true' : 'false' %>">
@@ -50 +56 @@
         <span><%= t('switch.grid') %></span>
       </button>
-      <% if (_leesbaar) { %>
-      <%# Lezen is een gewone derde weergave: dezelfde berichten, andere vorm.
-          Dus een <button> met data-view, net als de andere twee -- dan doen de
-          gedelegeerde klik, localStorage en syncAria in shell.ejs hun werk al. %>
-      <button type="button" class="view-switch-btn" data-view="reader" role="tab"
-              aria-selected="false">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
-        <span><%= t('switch.reader') %></span>
-      </button>
-      <% } %>
     </div>
     <% if (!_neutral) { %>

src/views/shell.ejs

@@ -345 +345 @@
 </head>
 
-<body class="<%= bodyClass || 'on-home' %> has-bottom-tab" data-js="chrome<%= (typeof pageJs !== 'undefined' && pageJs) ? ' ' + pageJs : '' %>" data-feed-view="<%- _e(safeSite.feed_view_default || 'timeline') %>" data-grid-cols="3" data-site-base="<%- _e((typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '') %>">
+<body class="<%= bodyClass || 'on-home' %> has-bottom-tab" data-js="chrome<%= (typeof pageJs !== 'undefined' && pageJs) ? ' ' + pageJs : '' %>" data-feed-view="<%- _e(safeSite.feed_view_default === 'grid' ? 'grid' : 'reader') %>" data-grid-cols="3" data-site-base="<%- _e((typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '') %>">
 
 <% if (typeof isViewer !== 'undefined' && isViewer) { %>
@@ -550 +550 @@
   try {
     var v = localStorage.getItem('pcms-feed-view');
-    if (v === 'timeline' || v === 'grid' || v === 'reader') body.dataset.feedView = v;
+    // 'timeline' bestaat niet meer als keuze, maar staat nog in de localStorage
+    // van iedereen die hier eerder was. Zonder deze vertaling zou zo iemand een
+    // weergave houden die nergens meer een knop heeft: de pil helemaal grijs, en
+    // een feed die niet is wat hij koos. Lezen is waar Tijdlijn in opging.
+    if (v === 'timeline') v = 'reader';
+    if (v === 'grid' || v === 'reader') body.dataset.feedView = v;
     var c = parseInt(localStorage.getItem('pcms-grid-cols'), 10);
     if (c === 2 || c === 3 || c === 4) body.dataset.gridCols = String(c);
@@ -567 +572 @@
     // is -- de lezer ziet nergens meer waar hij is. De VOORKEUR blijft staan:
     // terug op de eigen feed is Lezen weer actief.
-    var _view = String(body.dataset.feedView || 'timeline');
-    if (!/^[a-z]+$/.test(_view)) _view = 'timeline';
-    if (!document.querySelector('.view-switch-btn[data-view="' + _view + '"]')) _view = 'timeline';
+    var _view = String(body.dataset.feedView || 'reader');
+    if (!/^[a-z]+$/.test(_view)) _view = 'reader';
+    if (!document.querySelector('.view-switch-btn[data-view="' + _view + '"]')) _view = 'reader';
     document.querySelectorAll('.view-switch-btn').forEach(function(b) {
       b.setAttribute('aria-selected', (_onFeed && b.dataset.view === _view) ? 'true' : 'false');
@@ -606 +611 @@
     if (sw) {
       var view = sw.dataset.view;
+      // EEN KEUZE MOET TERUG KUNNEN. Op de cirkel is Grid de enige knop (Lezen
+      // bestaat daar niet, want dat zijn berichten van anderen), en een knop die
+      // al actief is doet normaal niets -- dan zit je in Grid zonder weg terug.
+      // Is dit de enige knop op deze pagina en staat hij al aan, dan brengt hij
+      // je terug naar de standaard, en dat is daar de gewone lijst.
+      if (document.querySelectorAll('.view-switch-btn').length === 1
+          && sw.getAttribute('aria-selected') === 'true') {
+        view = 'reader';
+      }
       body.dataset.feedView = view;
       try { localStorage.setItem('pcms-feed-view', view); } catch(_) {}