Adressen: Slug und Version im Pfad statt Parameter

Seite: /<slug>[/v<N>][/lauf|/buch|/lesen][/<Abschnitt>], Zurück-Taste je
Abschnitt. API: /api/themen/<slug>/v<N>/… mit Version als Pflichtteil des
Pfads; /api/topics entfällt. Slugs stehen in thema.json und werden beim
Start nachgetragen. Unbekannte API-Pfade liefern 404 statt der Seite.

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

frontend/src/App.vue

@@ -4,11 +4,32 @@ import { api } from './api.js'
 import Lauf from './components/Lauf.vue'
 import Guide from './components/Guide.vue'
 
-const params = new URLSearchParams(location.search)
+// Adresse: /<slug>[/v<N>][/lauf|/buch|/lesen][/<Abschnitt>]  – ohne Version gilt die neueste
+const TABS = ['lauf', 'buch', 'lesen']
+function routeLesen() {
+  const t = location.pathname.split('/').filter(Boolean).map(decodeURIComponent)
+  const r = { slug: t[0] || '', v: null, tab: 'lauf', nr: '' }
+  let i = 1
+  if (/^v\d+$/.test(t[i] || '')) { r.v = Number(t[i].slice(1)); i++ }
+  if (TABS.includes(t[i] || '')) { r.tab = t[i]; i++ }
+  r.nr = t[i] || ''
+  return r
+}
+function pfadVon(r) {
+  if (!r.slug) return '/'
+  let p = '/' + encodeURIComponent(r.slug)
+  if (r.v) p += '/v' + r.v
+  p += '/' + r.tab
+  if (r.tab !== 'lauf' && r.nr) p += '/' + encodeURIComponent(r.nr)
+  return p
+}
+
+const start = routeLesen()
 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 slug = ref(start.slug || localStorage.getItem('slug') || '')
+const version = ref(start.v)          // null = neueste Version
+const tab = ref(start.tab)
+const nr = ref(start.nr)              // Abschnitt im Buch, z. B. 3.4 oder „vorwort“
 const theme = ref(localStorage.getItem('theme') || 'papier')
 const state = ref(null)
 const fehler = ref('')
@@ -27,38 +48,37 @@ watch(theme, themeAnwenden)
 media.addEventListener('change', themeAnwenden)
 themeAnwenden()
 
-// URL spiegelt Thema und Tab; beim Themenwechsel fällt der Deep-Link (#a…/#k…) weg
-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 : ''))
+// Navigation: pushState für Klicks (Zurück-Taste funktioniert), replaceState beim Scrollen
+function geheZu(r, ersetzen = false) {
+  const ziel = { slug: slug.value, v: version.value, tab: tab.value, nr: nr.value, ...r }
+  if (ziel.tab === 'lauf') ziel.nr = ''
+  const pfad = pfadVon(ziel)
+  if (pfad !== location.pathname) history[ersetzen ? 'replaceState' : 'pushState'](null, '', pfad)
+  slug.value = ziel.slug; version.value = ziel.v; tab.value = ziel.tab; nr.value = ziel.nr
 }
-watch(topic, (t) => { localStorage.setItem('topic', t); urlSchreiben(false) })
-watch(version, () => urlSchreiben(false))
-watch(tab, (t) => { localStorage.setItem('tab', t); urlSchreiben(true) })
+function popstate() { const r = routeLesen(); slug.value = r.slug; version.value = r.v; tab.value = r.tab; nr.value = r.nr }
+watch(slug, (sl) => { if (sl) localStorage.setItem('slug', sl) })
 
-const aktuell = computed(() => topics.value.find((t) => t.name === topic.value))
+const aktuell = computed(() => topics.value.find((t) => t.slug === slug.value))
 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'
+  if (t === 'lauf') 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 }
+function themaWaehlen(sl) { geheZu({ slug: sl, v: null, tab: 'lauf' }); navAuf.value = false }
+function versionWaehlen(sl, v) { geheZu({ slug: sl, v, tab: 'buch', nr: '' }); navAuf.value = false }
 const laeuft = computed(() => state.value?.status === 'laeuft')
 const fortschritt = computed(() => (state.value?.stufen || []).reduce((n, s) => n + (s.fertig || 0), 0))
 
 async function topicsLaden() {
   try {
-    topics.value = await api.topics()
+    topics.value = await api.themen()
     fehler.value = ''
-    if (topic.value && !topics.value.some((t) => t.name === topic.value)) topic.value = ''
+    if (slug.value && !topics.value.some((t) => t.slug === slug.value)) slug.value = ''
+    if (!slug.value && topics.value.length) geheZu({ slug: topics.value[0].slug, v: null, tab: 'lauf' }, true)
     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
     fehler.value = 'Server nicht erreichbar — versuche es weiter …'
@@ -66,53 +86,55 @@ async function topicsLaden() {
   }
 }
 async function stateLaden() {
-  if (!topic.value) { state.value = null; return }
-  try { state.value = await api.state(topic.value, version.value) } catch (e) { fehler.value = String(e.message || e) }
+  if (!slug.value || !versionAktiv.value) { state.value = null; return }
+  try { state.value = await api.state(slug.value, versionAktiv.value) } catch (e) { fehler.value = String(e.message || e) }
 }
 function pollen() {
   clearInterval(timer)
   timer = setInterval(async () => {
-    if (!topic.value) return
+    if (!slug.value) return
     await stateLaden()
     if (!laeuft.value) { clearInterval(timer); timer = null; await topicsLaden() }
   }, 2000)
 }
-watch([topic, version], async () => { await stateLaden(); if (laeuft.value) pollen() })
+watch([slug, versionAktiv], async () => { await stateLaden(); if (laeuft.value) pollen() })
 watch(laeuft, (l) => { if (l && !timer) pollen() })
 
 async function anlegen() {
   const name = neuName.value.trim()
   if (!name) return
   try {
-    await api.anlegen(name, neuHinweise.value.trim())
+    const t = await api.anlegen(name, neuHinweise.value.trim())
     neuName.value = ''
     neuHinweise.value = ''
     await topicsLaden()
-    themaWaehlen(name)
+    themaWaehlen(t.slug)
   } 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)
+    const r = await api.versionAnlegen(slug.value)
     await topicsLaden()
-    version.value = r.v
-    tab.value = 'lauf'
-    await aktion(() => api.start(topic.value, r.v))
+    geheZu({ v: r.v, tab: 'lauf' })
+    await aktion(() => api.start(slug.value, r.v))
   } catch (e) { fehler.value = String(e.message || e) }
 }
 async function aktion(fn) {
   try { await fn(); await stateLaden(); await topicsLaden(); if (laeuft.value) pollen() }
   catch (e) { fehler.value = String(e.message || e) }
 }
-async function loeschen(name) {
-  if (!confirm(`Thema „${name}“ löschen?`)) return
-  await aktion(() => api.loeschen(name))
+async function loeschen(t) {
+  if (!confirm(`Thema „${t.titel}“ löschen?`)) return
+  await aktion(() => api.loeschen(t.slug))
 }
 
 function esc(e) { if (e.key === 'Escape') navAuf.value = false }
-onMounted(async () => { window.addEventListener('keydown', esc); urlSchreiben(true); await topicsLaden(); await stateLaden(); if (laeuft.value) pollen() })
-onUnmounted(() => { clearInterval(timer); window.removeEventListener('keydown', esc) })
+onMounted(async () => {
+  window.addEventListener('keydown', esc); window.addEventListener('popstate', popstate)
+  await topicsLaden(); await stateLaden(); if (laeuft.value) pollen()
+})
+onUnmounted(() => { clearInterval(timer); window.removeEventListener('keydown', esc); window.removeEventListener('popstate', popstate) })
 
 const statusBadge = computed(() => {
   const s = state.value?.status
@@ -121,24 +143,23 @@ const statusBadge = computed(() => {
 })
 function tokens(n) { return n >= 1e6 ? (n / 1e6).toFixed(1) + 'M' : n >= 1e3 ? Math.round(n / 1e3) + 'k' : String(n || 0) }
 </script>
-
 <template>
-  <div class="app" :class="{ 'tab-buch': tab === 'buch' }">
+  <div class="app" :class="{ 'tab-buch': tab !== 'lauf' }">
     <a class="skip" href="#inhalt">Zum Inhalt springen</a>
     <div v-if="navAuf" class="backdrop" @click="navAuf = false"></div>
     <aside class="sidebar" :class="{ offen: navAuf }">
       <button class="schliessen sekundaer klein" @click="navAuf = false">✕ Schließen</button>
       <div class="topics">
-        <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)">
+        <template v-for="t in topics" :key="t.slug">
+          <div class="topic-eintrag" :class="{ aktiv: t.slug === slug && (t.versionen.length === 1 || tab === 'lauf') }"
+               @click="themaWaehlen(t.slug)">
             <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>
+            <button v-if="t.versionen.length === 1 && t.status !== 'fertig'" class="klein sekundaer" title="Löschen" @click.stop="loeschen(t)">✕</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)">
+                 :class="{ aktiv: t.slug === slug && tab !== 'lauf' && x.v === versionAktiv }" @click="versionWaehlen(t.slug, 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>
@@ -158,8 +179,8 @@ function tokens(n) { return n >= 1e6 ? (n / 1e6).toFixed(1) + 'M' : n >= 1e3 ? M
         <button class="burger sekundaer klein" title="Themen" @click="navAuf = !navAuf">☰</button>
         <span class="titel">{{ aktuell?.titel || '' }}</span>
         <div class="tabs">
-          <button :class="{ aktiv: tab === 'lauf' }" @click="tab = 'lauf'">Lauf</button>
-          <button :class="{ aktiv: tab === 'buch' }" @click="tab = 'buch'">Buch</button>
+          <button :class="{ aktiv: tab === 'lauf' }" @click="geheZu({ tab: 'lauf' })">Lauf</button>
+          <button :class="{ aktiv: tab !== 'lauf' }" @click="geheZu({ tab: 'buch' })">Buch</button>
         </div>
         <span v-if="state" class="badge" :class="statusBadge[0]">{{ statusBadge[1] }}</span>
         <span v-if="tab === 'lauf' && state?.tokens" class="badge">{{ (state.kosten_usd || 0).toFixed(2) }} $ · {{ tokens(state.tokens) }} Tokens</span>
@@ -174,11 +195,13 @@ 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, version))"
-              @pause="aktion(() => api.pause(topic, version))"
-              @reset="aktion(() => api.reset(topic, version))"
+              @start="aktion(() => api.start(slug, versionAktiv))"
+              @pause="aktion(() => api.pause(slug, versionAktiv))"
+              @reset="aktion(() => api.reset(slug, versionAktiv))"
               @neue-version="neueVersion" />
-        <Guide v-else-if="tab === 'buch' && topic" :topic="topic" :version="version" :laeuft="laeuft" :fortschritt="fortschritt" />
+        <Guide v-else-if="tab !== 'lauf' && slug && versionAktiv" :slug="slug" :version="versionAktiv" :tab="tab" :nr="nr"
+               :laeuft="laeuft" :fortschritt="fortschritt"
+               @tab="(t) => geheZu({ tab: t })" @nr="(e) => geheZu({ tab: 'buch', nr: e.nr }, !e.push)" />
         <div v-else style="padding: 24px; color: var(--dim)">Thema links anlegen oder wählen.</div>
       </main>
     </div>