update

frontend/src/api.js

@@ -44,6 +44,20 @@ export function htmlUrl(id) {
   return `${BASE}/guides/${id}/html`
 }
 
+export async function fetchProgress(id) {
+  const res = await fetch(`${BASE}/guides/${id}/progress`)
+  return res.json()
+}
+
+export async function setProgress(id, chapter, done) {
+  const res = await fetch(`${BASE}/guides/${id}/progress`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ chapter, done }),
+  })
+  return res.json()
+}
+
 export async function chatGuide(id, { section, outline, messages }) {
   const res = await fetch(`${BASE}/guides/${id}/chat`, {
     method: 'POST',

frontend/src/components/TopicDetail.vue

@@ -2,7 +2,7 @@
 import { computed, ref, nextTick } from 'vue'
 import { marked } from 'marked'
 import DOMPurify from 'dompurify'
-import { htmlUrl, chatGuide } from '../api.js'
+import { htmlUrl, chatGuide, fetchProgress, setProgress } from '../api.js'
 
 marked.setOptions({ breaks: true, gfm: true })
 
@@ -19,25 +19,93 @@ const isLandscape = computed(() => LANDSCAPE_FORMATS.includes(props.previewGuide
 
 const frameEl = ref(null)
 
-function injectPadding(e) {
-  if (isLandscape.value) return
+// --- Kapitel-Fortschritt ---
+function onFrameLoad(e) {
   const doc = e.target.contentDocument
   if (!doc) return
+  injectStyles(doc)
+  setupProgress(doc)
+}
+
+function injectStyles(doc) {
   const style = doc.createElement('style')
+  const portrait = !isLandscape.value
+    ? `html { background: #f0f1f4; }
+       body {
+         zoom: 1.15;
+         max-width: 1000px;
+         margin: 0 auto;
+         padding: 2.5rem 3.5rem;
+         background: #fff;
+         box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
+       }`
+    : ''
   style.textContent = `@media screen {
-    html { background: #f0f1f4; }
-    body {
-      zoom: 1.15;
-      max-width: 1000px;
-      margin: 0 auto;
-      padding: 2.5rem 3.5rem;
-      background: #fff;
-      box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
+    ${portrait}
+    .ch-toggle {
+      display: block;
+      width: 100%;
+      margin: 2.5rem 0 0.5rem;
+      padding: 0.9rem 1rem;
+      border: 1.5px dashed #c7ccd6;
+      border-radius: 10px;
+      background: #f8f9fb;
+      color: #4b5563;
+      font: 600 0.95rem/1.2 -apple-system, "Segoe UI", Roboto, sans-serif;
+      text-align: center;
+      cursor: pointer;
+      transition: all 0.12s;
     }
+    .ch-toggle:hover { border-color: #6366f1; color: #4f46e5; background: #ede9fe; }
+    .ch-toggle.is-done {
+      border-style: solid;
+      border-color: #34d399;
+      background: #d1fae5;
+      color: #065f46;
+    }
+    section.chapter.ch-complete > :not(.ch-toggle) { opacity: 0.4; }
   }`
   doc.head?.appendChild(style)
 }
 
+async function setupProgress(doc) {
+  const guideId = props.previewGuide?.id
+  const chapters = Array.from(doc.querySelectorAll('section.chapter'))
+  if (!guideId || !chapters.length) return
+
+  let done = new Set()
+  try {
+    const res = await fetchProgress(guideId)
+    done = new Set(res.chapters || [])
+  } catch { /* offline → leer */ }
+
+  chapters.forEach((section, i) => {
+    if (section.querySelector(':scope > .ch-toggle')) return // Guard gegen Doppel-Inject
+    const numEl = section.querySelector('.chapter-num')
+    const key = (numEl?.textContent.match(/\d+/)?.[0]) || String(i + 1)
+
+    const toggle = doc.createElement('div')
+    toggle.className = 'ch-toggle'
+    const apply = (isDone) => {
+      toggle.classList.toggle('is-done', isDone)
+      section.classList.toggle('ch-complete', isDone)
+      toggle.textContent = isDone ? '✓ Erledigt – rückgängig' : 'Kapitel als erledigt markieren'
+    }
+    apply(done.has(key))
+
+    toggle.addEventListener('click', async () => {
+      const newState = !section.classList.contains('ch-complete')
+      apply(newState)
+      try {
+        await setProgress(guideId, key, newState)
+      } catch {
+        apply(!newState) // Rollback bei Fehler
+      }
+    })
+    section.appendChild(toggle)
+  })
+}
+
 // --- Chat ---
 const chatOpen = ref(false)
 const messages = ref([])
@@ -122,7 +190,7 @@ async function send() {
 <template>
   <div class="detail">
     <div class="preview" :class="{ landscape: isLandscape }" v-if="previewGuide">
-      <iframe ref="frameEl" :src="htmlUrl(previewGuide.id)" class="preview-frame" :class="{ landscape: isLandscape }" title="Guide-Vorschau" @load="injectPadding"></iframe>
+      <iframe ref="frameEl" :src="htmlUrl(previewGuide.id)" class="preview-frame" :class="{ landscape: isLandscape }" title="Guide-Vorschau" @load="onFrameLoad"></iframe>
     </div>
 
     <div class="empty-preview" v-else>