Changeset 3a3a882 in Klonkt for src/views/partials

Timestamp:

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

Author:

Robin <roboburr@…>

Branches:

main

Children:

8c91ed3

Parents:

70dbef4

Message:

Lezen staat in de cirkel zichtbaar maar dood, in plaats van weg

De knop verdween daar helemaal, met het argument dat een knop die niets
doet erger is dan geen knop. In de praktijk pakte dat andersom uit: de
pil werd smaller op de cirkel en breder op solo, en die sprong leest als
'er is hier iets weg' -- terwijl juist NIET duidelijk werd dat Lezen
bestaat en er alleen hier niet kan. Nu staat hij er grijs bij, met een
titel die zegt waarom, en is Grid zichtbaar de enige mogelijkheid.

Wat daarmee vervalt: de aparte cirkel-voorkeur ('pcms-cirkel-view').
Die kon nog maar een waarde hebben. De solo-keuze blijft onaangeroerd --
op de cirkel schrijven we niets meer naar localStorage, dus je komt thuis
in de weergave die je achterliet.

Drie plekken rekenden erop dat de knop er niet was en zijn meegegaan: de
terugval 'is dit de enige knop, dan brengt hij je naar de standaard' (er
zijn er nu twee, en op de cirkel hoort Grid juist de enige te blijven),
de aria-sync (een dode knop kan nooit de actieve zijn) en de klik-
afhandeling (expliciet op sw.disabled, niet vertrouwen op dat een
disabled button geen click vuurt -- deze listener hangt op document).

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

Location:

src/views/partials

Files:

• shared-styles.ejs (modified) (1 diff)
• view-switcher.ejs (modified) (3 diffs)

src/views/partials/shared-styles.ejs

@@ -40 +40 @@
    feed pages syncAria sets aria-selected=false → both grey. */
 .view-switch-btn[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
+/* Lezen in de cirkel: zichtbaar maar dood. Niet weggelaten, want dan springt de
+   pil van breedte tussen Solo en Cirkel, en juist DAT verbergt dat er een
+   tweede weergave bestaat. Grijs + not-allowed zegt "bestaat, kan hier niet". */
+.view-switch-btn[disabled] { opacity: .38; cursor: not-allowed; }
+.view-switch-btn[disabled]:hover { color: var(--ink-muted, var(--ink-soft)); background: transparent; }
 
 /* Agenda = its OWN pill (separate from Timeline/Grid, so the feed-toggle is never

src/views/partials/view-switcher.ejs

@@ -12 +12 @@
   // Lezen bestaat alleen waar een leessectie is, en dat is de eigen feed. De
   // cirkel toont berichten van ANDEREN, opgehaald van hun servers -- daar is
-  // "het hele stuk" niet iets wat wij in handen hebben. Dus daar geen knop:
-  // een knop die niets doet is erger dan een knop die er niet is.
-  var _leesbaar = _bc.indexOf('on-cirkel') < 0;
+  // "het hele stuk" niet iets wat wij in handen hebben.
+  //
+  // De knop verdween daar eerst helemaal, met het argument dat een knop die
+  // niets doet erger is dan geen knop. In de praktijk pakte dat andersom uit:
+  // de pil werd smaller op de cirkel en breder op solo, en die sprong leest als
+  // "er is hier iets weg" -- terwijl juist NIET duidelijk werd dat Lezen
+  // bestaat en hier alleen niet kan. Hij staat er nu dood bij: zichtbaar, grijs
+  // en niet aan te klikken. Dan is er maar een mogelijkheid, Grid, en je ziet
+  // meteen dat dat geen toeval is maar de enige.
+  var _leesUit = _bc.indexOf('on-cirkel') >= 0;
+  var _gridStandaard = (typeof site !== 'undefined' && site && site.feed_view_default === 'grid');
 %>
 <div class="view-switcher-wrap">
@@ -40 +48 @@
     <% } %>
     <div class="view-switcher" role="tablist" aria-label="Weergave">
-      <% if (_leesbaar) { %>
+
       <%# Lezen is de standaardweergave sinds Tijdlijn weg is: hele berichten,
           één per scherm. De chronologische lijst bestaat nog wel als opmaak
@@ -46 +54 @@
           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' %>">
+              <%- _leesUit ? 'disabled aria-disabled="true" tabindex="-1" title="' + t('switch.reader_solo_only') + '"' : '' %>
+              aria-selected="<%= (!_leesUit && !_neutral && !_gridStandaard) ? '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"><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' %>">
+              aria-selected="<%= (!_neutral && (_leesUit || _gridStandaard)) ? '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"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
         <span><%= t('switch.grid') %></span>