{# View mode switcher - icon toolbar #}
<nav class="view-switcher" aria-label="View mode">
  <a href="{{ readerBaseUrl }}/channels"
     class="view-switcher__button{% if activeView === 'channels' %} view-switcher__button--active{% endif %}"
     title="Channels">
    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <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>
  </a>
  <a href="{{ readerBaseUrl }}/deck"
     class="view-switcher__button{% if activeView === 'deck' %} view-switcher__button--active{% endif %}"
     title="Deck">
    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <rect x="3" y="3" width="7" height="18" rx="1"/><rect x="14" y="3" width="7" height="18" rx="1"/>
    </svg>
  </a>
  <a href="{{ readerBaseUrl }}/timeline"
     class="view-switcher__button{% if activeView === 'timeline' %} view-switcher__button--active{% endif %}"
     title="Timeline">
    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <line x1="12" y1="2" x2="12" y2="22"/><polyline points="19 15 12 22 5 15"/>
    </svg>
  </a>
</nav>