Versionen je Thema

Ein Thema hat Versionen storage/<Thema>/v<N>/ mit eigenem Lauf, Buch und
Leseposition; bestehende Ablagen wandern beim Start nach v1/. Intern ist
„Thema/vN“ der Schlüssel aller Zustandsfunktionen. API: ?v=N an allen
Themen-Endpunkten, POST /version, DELETE ?v=N. Oberfläche: Versionsliste
unter dem Thema (Klick auf Thema → Lauf der neuesten, auf Version → Buch),
Knopf „Neue Version“ mit gleichen Eingaben. make loeschen kennt V=<Nr>.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

frontend/src/App.vue

@@ -7,6 +7,7 @@ import Guide from './components/Guide.vue'
 const params = new URLSearchParams(location.search)
 const topics = ref([])
 const topic = ref(params.get('topic') || localStorage.getItem('topic') || '')
+const version = ref(Number(params.get('v')) || null)   // null = neueste Version
 const tab = ref((params.get('tab') || localStorage.getItem('tab')) === 'buch' ? 'buch' : 'lauf')
 const theme = ref(localStorage.getItem('theme') || 'papier')
 const state = ref(null)
@@ -30,14 +31,24 @@ themeAnwenden()
 function urlSchreiben(hashBehalten) {
   const p = new URLSearchParams()
   if (topic.value) p.set('topic', topic.value)
+  if (version.value) p.set('v', version.value)
   p.set('tab', tab.value)
   history.replaceState(null, '', location.pathname + '?' + p + (hashBehalten ? location.hash : ''))
 }
 watch(topic, (t) => { localStorage.setItem('topic', t); urlSchreiben(false) })
+watch(version, () => urlSchreiben(false))
 watch(tab, (t) => { localStorage.setItem('tab', t); urlSchreiben(true) })
 
 const aktuell = computed(() => topics.value.find((t) => t.name === topic.value))
-watch([aktuell, tab], ([a, t]) => { if (t !== 'buch') document.title = a ? `${a.titel} – buchwerk` : 'buchwerk' }, { immediate: true })
+const versionen = computed(() => aktuell.value?.versionen || [])
+const neueste = computed(() => versionen.value.length ? versionen.value[versionen.value.length - 1].v : null)
+const versionAktiv = computed(() => version.value || neueste.value)
+watch([aktuell, tab, versionAktiv], ([a, t, v]) => {
+  if (t !== 'buch') document.title = a ? `${a.titel}${versionen.value.length > 1 ? ' v' + v : ''} – buchwerk` : 'buchwerk'
+}, { immediate: true })
+function datum(iso) { return iso ? new Date(iso).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: '2-digit' }) : '' }
+function themaWaehlen(name) { topic.value = name; version.value = null; tab.value = 'lauf'; navAuf.value = false }
+function versionWaehlen(name, v) { topic.value = name; version.value = v; tab.value = 'buch'; navAuf.value = false }
 const laeuft = computed(() => state.value?.status === 'laeuft')
 const fortschritt = computed(() => (state.value?.stufen || []).reduce((n, s) => n + (s.fertig || 0), 0))
 
@@ -46,6 +57,7 @@ async function topicsLaden() {
     topics.value = await api.topics()
     fehler.value = ''
     if (topic.value && !topics.value.some((t) => t.name === topic.value)) topic.value = ''
+    if (version.value && !versionen.value.some((x) => x.v === version.value)) version.value = null
     if (!topic.value && topics.value.length) topic.value = topics.value[0].name
   } catch (e) {
     // Server gerade nicht erreichbar (z. B. Neustart): alle 3 s erneut versuchen, bis er antwortet
@@ -55,7 +67,7 @@ async function topicsLaden() {
 }
 async function stateLaden() {
   if (!topic.value) { state.value = null; return }
-  try { state.value = await api.state(topic.value) } catch (e) { fehler.value = String(e.message || e) }
+  try { state.value = await api.state(topic.value, version.value) } catch (e) { fehler.value = String(e.message || e) }
 }
 function pollen() {
   clearInterval(timer)
@@ -65,7 +77,7 @@ function pollen() {
     if (!laeuft.value) { clearInterval(timer); timer = null; await topicsLaden() }
   }, 2000)
 }
-watch(topic, async () => { await stateLaden(); if (laeuft.value) pollen() })
+watch([topic, version], async () => { await stateLaden(); if (laeuft.value) pollen() })
 watch(laeuft, (l) => { if (l && !timer) pollen() })
 
 async function anlegen() {
@@ -76,8 +88,17 @@ async function anlegen() {
     neuName.value = ''
     neuHinweise.value = ''
     await topicsLaden()
-    topic.value = name
+    themaWaehlen(name)
+  } catch (e) { fehler.value = String(e.message || e) }
+}
+// Neue Version: gleiche Eingaben, frischer Lauf; die alte Version bleibt samt Leseposition erhalten.
+async function neueVersion() {
+  try {
+    const r = await api.versionAnlegen(topic.value)
+    await topicsLaden()
+    version.value = r.v
     tab.value = 'lauf'
+    await aktion(() => api.start(topic.value, r.v))
   } catch (e) { fehler.value = String(e.message || e) }
 }
 async function aktion(fn) {
@@ -85,7 +106,7 @@ async function aktion(fn) {
   catch (e) { fehler.value = String(e.message || e) }
 }
 async function loeschen(name) {
-  if (!confirm(`Thema „${name}“ samt Buch löschen?`)) return
+  if (!confirm(`Thema „${name}“ löschen?`)) return
   await aktion(() => api.loeschen(name))
 }
 
@@ -108,12 +129,21 @@ function tokens(n) { return n >= 1e6 ? (n / 1e6).toFixed(1) + 'M' : n >= 1e3 ? M
     <aside class="sidebar" :class="{ offen: navAuf }">
       <button class="schliessen sekundaer klein" @click="navAuf = false">✕ Schließen</button>
       <div class="topics">
-        <div v-for="t in topics" :key="t.name" class="topic-eintrag" :class="{ aktiv: t.name === topic }"
-             @click="topic = t.name; navAuf = false">
-          <span class="punkt" :class="t.laeuft ? 'laeuft' : t.status"></span>
-          <span style="flex: 1">{{ t.titel }}</span>
-          <button v-if="t.status !== 'fertig'" class="klein sekundaer" title="Löschen" @click.stop="loeschen(t.name)">✕</button>
-        </div>
+        <template v-for="t in topics" :key="t.name">
+          <div class="topic-eintrag" :class="{ aktiv: t.name === topic && (t.versionen.length === 1 || tab === 'lauf') }"
+               @click="themaWaehlen(t.name)">
+            <span class="punkt" :class="t.laeuft ? 'laeuft' : t.status"></span>
+            <span style="flex: 1">{{ t.titel }}</span>
+            <button v-if="t.versionen.length === 1 && t.status !== 'fertig'" class="klein sekundaer" title="Löschen" @click.stop="loeschen(t.name)">✕</button>
+          </div>
+          <div v-if="t.versionen.length > 1" class="versionen">
+            <div v-for="x in t.versionen" :key="x.v" class="topic-eintrag version"
+                 :class="{ aktiv: t.name === topic && tab === 'buch' && x.v === versionAktiv }" @click="versionWaehlen(t.name, x.v)">
+              <span class="punkt" :class="x.laeuft ? 'laeuft' : x.status"></span>
+              <span style="flex: 1">v{{ x.v }} <span class="dim">· {{ datum(x.angelegt) }}</span></span>
+            </div>
+          </div>
+        </template>
         <div v-if="!topics.length" style="color: var(--dim); padding: 8px">Noch kein Thema.</div>
       </div>
       <div class="neu">
@@ -144,10 +174,11 @@ function tokens(n) { return n >= 1e6 ? (n / 1e6).toFixed(1) + 'M' : n >= 1e3 ? M
       <div v-if="fehler" class="fehler" @click="fehler = ''">{{ fehler }} — klicken zum Schließen</div>
       <main class="inhalt" id="inhalt" tabindex="-1">
         <Lauf v-if="tab === 'lauf' && state" :state="state"
-              @start="aktion(() => api.start(topic))"
-              @pause="aktion(() => api.pause(topic))"
-              @reset="aktion(() => api.reset(topic))" />
-        <Guide v-else-if="tab === 'buch' && topic" :topic="topic" :laeuft="laeuft" :fortschritt="fortschritt" />
+              @start="aktion(() => api.start(topic, version))"
+              @pause="aktion(() => api.pause(topic, version))"
+              @reset="aktion(() => api.reset(topic, version))"
+              @neue-version="neueVersion" />
+        <Guide v-else-if="tab === 'buch' && topic" :topic="topic" :version="version" :laeuft="laeuft" :fortschritt="fortschritt" />
         <div v-else style="padding: 24px; color: var(--dim)">Thema links anlegen oder wählen.</div>
       </main>
     </div>

frontend/src/api.js

@@ -14,17 +14,19 @@ async function req(pfad, opts = {}) {
 }
 
 const e = encodeURIComponent
+const q = (v) => (v ? `?v=${v}` : '')   // Version; ohne Angabe die neueste
 export const api = {
   topics: () => req('/topics'),
   anlegen: (name, hinweise = '') => req('/topics', { method: 'POST', body: { name, hinweise } }),
-  loeschen: (t) => req(`/topics/${e(t)}`, { method: 'DELETE' }),
-  start: (t) => req(`/topics/${e(t)}/start`, { method: 'POST' }),
-  pause: (t) => req(`/topics/${e(t)}/pause`, { method: 'POST' }),
-  reset: (t) => req(`/topics/${e(t)}/reset`, { method: 'POST' }),
-  state: (t) => req(`/topics/${e(t)}/state`),
-  guide: (t) => req(`/topics/${e(t)}/guide`),
-  position: (t) => req(`/topics/${e(t)}/position`),
-  positionSetzen: (t, daten) => req(`/topics/${e(t)}/position`, { method: 'PUT', body: daten }),
-  guideMdUrl: (t) => `/api/topics/${e(t)}/guide.md`,
-  pdfUrl: (t) => `/api/topics/${e(t)}/buch.pdf`,
+  versionAnlegen: (t) => req(`/topics/${e(t)}/version`, { method: 'POST' }),
+  loeschen: (t, v) => req(`/topics/${e(t)}${q(v)}`, { method: 'DELETE' }),
+  start: (t, v) => req(`/topics/${e(t)}/start${q(v)}`, { method: 'POST' }),
+  pause: (t, v) => req(`/topics/${e(t)}/pause${q(v)}`, { method: 'POST' }),
+  reset: (t, v) => req(`/topics/${e(t)}/reset${q(v)}`, { method: 'POST' }),
+  state: (t, v) => req(`/topics/${e(t)}/state${q(v)}`),
+  guide: (t, v) => req(`/topics/${e(t)}/guide${q(v)}`),
+  position: (t, v) => req(`/topics/${e(t)}/position${q(v)}`),
+  positionSetzen: (t, daten, v) => req(`/topics/${e(t)}/position${q(v)}`, { method: 'PUT', body: daten }),
+  guideMdUrl: (t, v) => `/api/topics/${e(t)}/guide.md${q(v)}`,
+  pdfUrl: (t, v) => `/api/topics/${e(t)}/buch.pdf${q(v)}`,
 }

frontend/src/components/Guide.vue

@@ -4,7 +4,7 @@ import { api } from '../api.js'
 import { render, zeit } from '../markdown.js'
 import Lesemodus from './Lesemodus.vue'
 
-const props = defineProps({ topic: String, laeuft: Boolean, fortschritt: Number })
+const props = defineProps({ topic: String, version: Number, laeuft: Boolean, fortschritt: Number })
 const daten = ref(null)
 const lesemodus = ref(false)
 // Vollbild nur aus der Klickgeste heraus (Browser-Vorgabe); iOS-Safari kennt die API nicht.
@@ -39,7 +39,7 @@ let ladeSeq = 0
 let merkTimer = null
 function merken(id) {
   clearTimeout(merkTimer)
-  merkTimer = setTimeout(() => api.positionSetzen(props.topic, { abschnitt: id }).catch(() => {}), 1500)
+  merkTimer = setTimeout(() => api.positionSetzen(props.topic, { abschnitt: id }, props.version).catch(() => {}), 1500)
 }
 const cache = new Map()   // Schlüssel: Abschnitt + Textlänge → unveränderte Abschnitte werden nicht neu gerendert
 
@@ -48,7 +48,7 @@ onUnmounted(() => { beobachter?.disconnect() })
 async function laden() {
   if (!props.topic) { daten.value = null; return }
   const seq = ++ladeSeq
-  const [d, pos] = await Promise.all([api.guide(props.topic), api.position(props.topic).catch(() => ({}))])
+  const [d, pos] = await Promise.all([api.guide(props.topic, props.version), api.position(props.topic, props.version).catch(() => ({}))])
   if (seq !== ladeSeq) return
   daten.value = d
   await nextTick()
@@ -57,7 +57,7 @@ async function laden() {
   const ziel = location.hash.slice(1) || pos.abschnitt
   if (ziel && !aktiv.value) document.getElementById(ziel)?.scrollIntoView({ block: 'start' })
 }
-watch(() => props.topic, () => { aktiv.value = ''; cache.clear(); laden() }, { immediate: true })
+watch(() => [props.topic, props.version], () => { aktiv.value = ''; cache.clear(); laden() }, { immediate: true })
 watch(() => props.laeuft, (l, alt) => { if (alt && !l) laden() })
 // Während eines Laufs nur nachladen, wenn sich der Fortschritt geändert hat
 watch(() => props.fortschritt, (n, alt) => { if (props.laeuft && n !== alt) laden() })
@@ -116,8 +116,8 @@ onUnmounted(() => window.removeEventListener('keydown', taste))
       <button class="schliessen sekundaer klein" @click="navAuf = false">✕ Schließen</button>
       <div class="werkzeuge">
         <button class="klein" title="Lesemodus: Abschnitt für Abschnitt" @click="lesemodusStart" :disabled="!abschnitte.length">Lesen ▶</button>
-        <a class="knopf klein sekundaer" title="Als Markdown-Datei herunterladen" :href="api.guideMdUrl(topic)" download>MD</a>
-        <a v-if="daten?.pdf" class="knopf klein sekundaer" title="Als PDF herunterladen" :href="api.pdfUrl(topic)" download>PDF</a>
+        <a class="knopf klein sekundaer" title="Als Markdown-Datei herunterladen" :href="api.guideMdUrl(topic, version)" download>MD</a>
+        <a v-if="daten?.pdf" class="knopf klein sekundaer" title="Als PDF herunterladen" :href="api.pdfUrl(topic, version)" download>PDF</a>
       </div>
       <template v-if="daten">
         <div class="meta">
@@ -142,8 +142,8 @@ onUnmounted(() => window.removeEventListener('keydown', taste))
       <div class="mobil-leiste">
         <button class="sekundaer klein" @click="navAuf = !navAuf">☰ Inhalt</button>
         <button class="klein" @click="lesemodusStart" :disabled="!abschnitte.length">Lesen ▶</button>
-        <a class="knopf klein sekundaer" :href="api.guideMdUrl(topic)" download>MD</a>
-        <a v-if="daten?.pdf" class="knopf klein sekundaer" :href="api.pdfUrl(topic)" download>PDF</a>
+        <a class="knopf klein sekundaer" :href="api.guideMdUrl(topic, version)" download>MD</a>
+        <a v-if="daten?.pdf" class="knopf klein sekundaer" :href="api.pdfUrl(topic, version)" download>PDF</a>
       </div>
       <article v-if="daten" class="buch">
         <h1>{{ daten.titel }}</h1>
@@ -190,6 +190,6 @@ onUnmounted(() => window.removeEventListener('keydown', taste))
       </article>
     </div>
 
-    <Lesemodus v-if="lesemodus && daten" :daten="daten" :topic="topic" @schliessen="lesemodusEnde" />
+    <Lesemodus v-if="lesemodus && daten" :daten="daten" :topic="topic" :version="version" @schliessen="lesemodusEnde" />
   </div>
 </template>

frontend/src/components/Lauf.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import { render } from '../markdown.js'
 
 const props = defineProps({ state: Object })
-const emit = defineEmits(['start', 'pause', 'reset'])
+const emit = defineEmits(['start', 'pause', 'reset', 'neue-version'])
 
 const laeuft = computed(() => props.state?.status === 'laeuft')
 const fertig = computed(() => props.state?.status === 'fertig')
@@ -36,6 +36,7 @@ const gruppen = computed(() => {
 const ereignisse = computed(() => (props.state?.ereignisse || []).slice(-100).reverse())
 
 function reset() { if (confirm('Lauf zurücksetzen? Alles außer dem Thema wird gelöscht.')) emit('reset') }
+function neueVersion() { if (confirm('Neue Version erzeugen? Gleiche Eingaben, kompletter neuer Lauf. Die bisherige Version bleibt erhalten.')) emit('neue-version') }
 </script>
 
 <template>
@@ -44,6 +45,7 @@ function reset() { if (confirm('Lauf zurücksetzen? Alles außer dem Thema wird
       <button v-if="!laeuft && !fertig" @click="emit('start')">{{ begonnen ? 'Fortsetzen' : 'Buch erzeugen' }}</button>
       <button v-if="laeuft" class="sekundaer" @click="emit('pause')">Pause</button>
       <button v-if="!laeuft && begonnen && !fertig" class="sekundaer" @click="reset">Zurücksetzen</button>
+      <button v-if="!laeuft && begonnen" class="sekundaer" title="Gleiches Thema, gleiche Hinweise, neuer Lauf" @click="neueVersion">Neue Version</button>
       <span class="spacer"></span>
       <span class="badge" :class="statusFarbe[state.status]">{{ statusText[state.status] || state.status }}<template v-if="state.stufe && laeuft"> · {{ state.stufe }}</template></span>
       <span class="badge">{{ usd(state.kosten_usd) }}</span>

frontend/src/components/Lesemodus.vue

@@ -3,7 +3,7 @@ import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { render, zeit } from '../markdown.js'
 import { api } from '../api.js'
 
-const props = defineProps({ daten: Object, topic: String })
+const props = defineProps({ daten: Object, topic: String, version: Number })
 const emit = defineEmits(['schliessen'])
 const buehne = ref(null)
 const pos = ref(0)
@@ -53,7 +53,7 @@ watch(pos, (p) => {
   buehne.value?.scrollTo({ top: 0 })
   clearTimeout(merkTimer)
   const key = screens.value[p]?.key
-  if (key) merkTimer = setTimeout(() => api.positionSetzen(props.topic, { lesemodus: key }).catch(() => {}), 1500)
+  if (key) merkTimer = setTimeout(() => api.positionSetzen(props.topic, { lesemodus: key }, props.version).catch(() => {}), 1500)
 })
 
 function taste(e) {
@@ -82,7 +82,7 @@ function wischEnde(e) {
 }
 onMounted(async () => {
   window.addEventListener('keydown', taste)
-  const merk = (await api.position(props.topic).catch(() => ({}))).lesemodus
+  const merk = (await api.position(props.topic, props.version).catch(() => ({}))).lesemodus
   // Alte Positionen waren ein Index, neue sind ein key.
   const i = typeof merk === 'string' ? screens.value.findIndex((s) => s.key === merk) : Number(merk || 0)
   pos.value = Math.min(Math.max(i, 0), screens.value.length - 1)

frontend/src/style.css

@@ -38,6 +38,9 @@ a.knopf { display: inline-block; text-decoration: none; line-height: normal; }
 .topic-eintrag { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; color: var(--dim); }
 .topic-eintrag.aktiv { background: var(--karte); color: var(--text); }
 .topic-eintrag .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; }
+.versionen { margin: -2px 0 4px 18px; border-left: 1px solid var(--rand); }
+.topic-eintrag.version { padding: 5px 10px; font-size: 13px; }
+.topic-eintrag .dim { color: var(--dim); font-size: 12px; }
 .topic-eintrag .punkt.fertig { background: var(--gruen); }
 .topic-eintrag .punkt.laeuft { background: var(--akzent); animation: puls 1.2s infinite; }
 .topic-eintrag .punkt.pausiert { background: var(--gelb); }