source: Klonkt/src/views/partials/view-switcher.ejs

<%# View switcher partial — Tijdlijn / Grid + grid-cols picker.
    Mounted in shell.ejs once, visible on every non-admin page. Click
    handlers are wired in shell.ejs via event-delegation on document so
    HTMX-swapped content keeps working without rebinding. %>
<%
  var _bc = (typeof bodyClass === 'string') ? bodyClass : '';
  var _onShows = _bc.indexOf('on-shows') >= 0;
  // Pagina's zonder actieve feed-weergave → niets in de pill is 'actief' (Solo/Cirkel
  // + Tijdlijn/Grid grijs). Alleen Agenda krijgt z'n eigen is-active op de agenda.
  var _neutral = ['on-shows','on-downloads','on-post','on-epk','on-linkbio','on-newsletter','on-archive']
                   .some(function(c){ return _bc.indexOf(c) >= 0; });
  // 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.
  //
  // 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');
  // Welke tweede weergave biedt deze site aan? Bij 'auto' tekenen we ZE ALLEBEI
  // en laat de CSS er per viewport een zien -- Lezen op mobiel, Tijdlijn op
  // desktop. Dat scheelt een resize-afhandeling en een knop die van naam
  // verspringt terwijl je kijkt.
  var _alt = (typeof site !== 'undefined' && site && site.feed_alt_view) || 'reader';
  if (['reader', 'timeline', 'auto'].indexOf(_alt) < 0) _alt = 'reader';
  var _tweede = _alt === 'auto' ? ['reader', 'timeline'] : [_alt];
  // De tijdlijn WERKT wel in de cirkel -- dat is er zelfs de natuurlijke vorm.
  // Alleen Lezen kan daar niet, want dat zijn berichten van anderen.
  var _dood = function (v) { return v === 'reader' && _leesUit; };
  // Staat er GEEN levende tweede knop, dan is Grid het enige dat overblijft en
  // hoort die aan te staan. Bij een tijdlijn-site is dat in de cirkel niet zo:
  // daar werkt de tijdlijn gewoon.
  var _alleenGrid = _tweede.every(_dood);
  var _icoon = {
    reader: '<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"/>',
    timeline: '<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"/>',
  };
%>
<div class="view-switcher-wrap">
  <div class="container">
    <% if (typeof premiumUnlocked !== 'undefined' && premiumUnlocked && typeof agendaEnabled !== 'undefined' && agendaEnabled) {
         var _sbA = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
    %>
    <div class="agenda-pill">
      <a class="vs-agenda<%= _onShows ? ' is-active' : '' %>" href="<%= _sbA %>/shows" aria-label="Agenda — evenementen">
        <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="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
        <span><%= t('switch.agenda') %></span>
      </a>
    </div>
    <% } %>
    <% if (typeof hasCirkel !== 'undefined' && hasCirkel) {
         var _onCirkel = (typeof bodyClass === 'string' && bodyClass.indexOf('on-cirkel') >= 0);
         var _sb = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
    %>
    <div class="feed-scope" role="tablist" aria-label="Solo of cirkel">
      <a class="feed-scope-btn<%= (!_neutral && !_onCirkel) ? ' is-active' : '' %>" href="<%= _sb %>/"
         role="tab" aria-selected="<%= (!_neutral && !_onCirkel) ? 'true' : 'false' %>"><%= t('switch.solo') %></a>
      <a class="feed-scope-btn<%= (!_neutral && _onCirkel) ? ' is-active' : '' %>" href="<%= _sb %>/cirkel"
         role="tab" aria-selected="<%= (!_neutral && _onCirkel) ? 'true' : 'false' %>"><%= t('switch.circle') %></a>
    </div>
    <% } %>
    <div class="view-switcher" role="tablist" aria-label="Weergave">

      <%# De tweede weergave naast Grid. Welke dat is, staat in de instellingen
          van de site (feed_alt_view). Bij 'auto' staan ze er allebei en kiest
          een mediaquery; vandaar de klasse vs-alleen-*. %>
      <% _tweede.forEach(function (v) { %>
      <button type="button" class="view-switch-btn<%= _alt === 'auto' ? ' vs-alleen-' + (v === 'reader' ? 'mobiel' : 'desktop') : '' %>"
              data-view="<%= v %>" role="tab"
              <%- _dood(v) ? 'disabled aria-disabled="true" tabindex="-1" title="' + t('switch.reader_solo_only') + '"' : '' %>
              aria-selected="<%= (!_dood(v) && !_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"><%- _icoon[v] %></svg>
        <span><%= t('switch.' + v) %></span>
      </button>
      <% }); %>
      <button type="button" class="view-switch-btn" data-view="grid" role="tab"
              aria-selected="<%= (!_neutral && (_alleenGrid || _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>
      </button>
    </div>
    <% if (!_neutral) { %>
    <div class="grid-cols-picker" aria-label="Aantal kolommen">
      <button type="button" class="grid-cols-btn" data-cols="2" title="2 kolommen">2</button>
      <button type="button" class="grid-cols-btn" data-cols="3" title="3 kolommen">3</button>
      <button type="button" class="grid-cols-btn" data-cols="4" title="4 kolommen">4</button>
    </div>
    <% } %>
  </div>
</div>