From 46ee91279e1b91d3e4b8e03bed0b52b79f6f571d Mon Sep 17 00:00:00 2001
From: karim <karim@gabrielevarano.ch>
Date: Fri, 5 Jun 2026 21:16:30 +0200
Subject: [PATCH] =?UTF-8?q?feature(archiv):=20Umschalter=20Kategorie=20?=
 =?UTF-8?q?=E2=86=94=20Jahr?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Übersicht /archiv umschaltbar: nach Kategorie (Jahr hinter dem Beitrag, je
Rubrik die letzten 10 + 'alle →') oder nach Jahr (Kategorie hinter dem Beitrag,
alle). Clientseitig, merkt die Wahl in localStorage.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 assets/css/custom.css    | 15 +++++++
 layouts/archiv/list.html | 93 +++++++++++++++++++++++++++++-----------
 2 files changed, 83 insertions(+), 25 deletions(-)

diff --git a/assets/css/custom.css b/assets/css/custom.css
index 3fdf805..ee3b18b 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1135,6 +1135,21 @@ a.byline-author:hover, a.journal-author:hover { color: var(--accent); }
   margin: 0 0 var(--spacing-md);
 }
 
+/* Archiv-Umschalter (Kategorie ↔ Jahr) */
+.archiv-toggle { display: inline-flex; gap: 0.3em; margin: 0 0 var(--spacing-md); }
+.archiv-toggle button {
+  font: inherit; font-size: var(--font-size-small); cursor: pointer;
+  padding: 0.3em 0.95em; border-radius: 999px;
+  background: none; border: 1px solid var(--color-border); color: var(--color-text-muted);
+}
+.archiv-toggle button:hover { border-color: var(--section-color, var(--accent)); color: var(--color-text-primary); }
+.archiv-toggle button.is-active {
+  background: var(--section-color, var(--accent));
+  border-color: var(--section-color, var(--accent));
+  color: var(--color-text-primary); font-weight: 600;
+}
+.archiv-view[hidden] { display: none; }
+
 .time-list ul {
   list-style: none;
   margin-left: 0;
diff --git a/layouts/archiv/list.html b/layouts/archiv/list.html
index 52b9b1f..f9c2963 100644
--- a/layouts/archiv/list.html
+++ b/layouts/archiv/list.html
@@ -1,44 +1,86 @@
 {{ define "main" }}
   {{ if eq .Path "/archiv" }}
-      {{/* Archiv root: Titel + Intro + Atlas (je Kategorie die letzten 10) */}}
+      {{/* Archiv-Übersicht: Umschalter Kategorie ↔ Jahr */}}
       <div class="collection" style="--section-color: var(--palette-kusa)">
       <h1 class="collection-title">{{ .Title }}</h1>
       <div class="collection-inner">
       {{ .Content }}
-      <section class="atlas">
-        {{ range .Sections.ByWeight }}
-          {{ $section := path.Base .RelPermalink }}
-          <article class="atlas-section" data-section="{{ $section }}">
-            <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
-            {{ with .Params.description }}<p class="text-muted">{{ . }}</p>{{ end }}
+
+      <div class="archiv-toggle" role="group" aria-label="Sortierung">
+        <button type="button" data-mode="cat" class="is-active">nach Kategorie</button>
+        <button type="button" data-mode="year">nach Jahr</button>
+      </div>
+
+      {{/* Ansicht nach Kategorie — Jahr hinter dem Beitrag, je Rubrik die letzten 10 */}}
+      <div class="archiv-view" data-view="cat">
+        <section class="atlas">
+          {{ range .Sections.ByWeight }}
+            {{ $section := path.Base .RelPermalink }}
+            <article class="atlas-section" data-section="{{ $section }}">
+              <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+              {{ with .Params.description }}<p class="text-muted">{{ . }}</p>{{ end }}
+              <ul class="atlas-list">
+                {{ range first 10 .RegularPages.ByDate.Reverse }}
+                  <li>
+                    <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
+                    <span class="list-meta text-muted"> · {{ .Date.Format "2006" }}</span>
+                  </li>
+                {{ end }}
+              </ul>
+              {{ if gt (len .RegularPages) 10 }}
+                <p class="more"><a href="{{ .RelPermalink }}">alle in {{ .Title }} →</a></p>
+              {{ end }}
+            </article>
+          {{ end }}
+
+          {{ with site.Taxonomies.tags }}
+            <article class="atlas-tags">
+              <h2>Tags</h2>
+              <ul class="tag-cloud">
+                {{ range $name, $taxonomy := . }}
+                  <li><a href="/tags/{{ $name | urlize }}/">{{ $name }} <span class="text-muted">({{ len $taxonomy }})</span></a></li>
+                {{ end }}
+              </ul>
+            </article>
+          {{ end }}
+        </section>
+      </div>
+
+      {{/* Ansicht nach Jahr — Kategorie hinter dem Beitrag, alle Beiträge */}}
+      <div class="archiv-view" data-view="year" hidden>
+        {{ $all := where site.RegularPages "Section" "archiv" }}
+        {{ range $all.GroupByDate "2006" }}
+          <article class="atlas-section">
+            <h2>{{ .Key }}</h2>
             <ul class="atlas-list">
-              {{ range first 10 .RegularPages.ByDate.Reverse }}
+              {{ range .Pages }}
                 <li>
                   <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
-                  <span class="list-meta text-muted"> · {{ partial "date.html" .Date }}</span>
+                  {{ with .CurrentSection }}<span class="list-meta text-muted"> · {{ .LinkTitle }}</span>{{ end }}
                 </li>
               {{ end }}
             </ul>
-            {{ if gt (len .RegularPages) 10 }}
-              <p class="more"><a href="{{ .RelPermalink }}">alle in {{ .Title }} →</a></p>
-            {{ end }}
           </article>
         {{ end }}
+      </div>
 
-        {{/* Tag-Cloud */}}
-        {{ with site.Taxonomies.tags }}
-          <article class="atlas-tags">
-            <h2>Tags</h2>
-            <ul class="tag-cloud">
-              {{ range $name, $taxonomy := . }}
-                <li><a href="/tags/{{ $name | urlize }}/">{{ $name }} <span class="text-muted">({{ len $taxonomy }})</span></a></li>
-              {{ end }}
-            </ul>
-          </article>
-        {{ end }}
-      </section>
+      <script>
+        (function () {
+          var bar = document.querySelector('.archiv-toggle'); if (!bar) return;
+          var views = document.querySelectorAll('.archiv-view');
+          function set(mode) {
+            bar.querySelectorAll('button').forEach(function (b) { b.classList.toggle('is-active', b.dataset.mode === mode); });
+            views.forEach(function (v) { v.hidden = v.dataset.view !== mode; });
+            try { localStorage.setItem('ob_archiv_mode', mode); } catch (e) {}
+          }
+          bar.addEventListener('click', function (e) { var b = e.target.closest('button'); if (b) set(b.dataset.mode); });
+          var saved; try { saved = localStorage.getItem('ob_archiv_mode'); } catch (e) {}
+          if (saved === 'year') set('year');
+        })();
+      </script>
       </div>
       </div>
+
     {{ else if eq .Path "/archiv/software" }}
       {{/* Software: kuratierte Landing — Werkzeuge (mit externem Link) getrennt
            von Texten & Anleitungen. */}}
@@ -88,8 +130,9 @@
           </ul>
         </div>
       </section>
+
     {{ else }}
-      {{/* Library subsection: chronologisch */}}
+      {{/* Archiv-Unterseite (Rubrik): chronologisch */}}
       {{ $section := path.Base .RelPermalink }}
       <header class="section-header" data-section="{{ $section }}">
         <p class="section-rubric">Archiv</p>