Web 0.13.6: Lektionskopf oben fixiert, Zurück/Weiter im Kopf (#203)

Claude-Session: https://claude.ai/code/session_01Ugz28Ubj699xQDaZLZwKcC

Co-authored-by: Claude <noreply@anthropic.com>

Author: code4teaching

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is loosely inspired by Keep a Changelog.
 
 ### Added
 
+- **Web 0.13.6, lesson header pinned at the top:** in a lesson step the header (← Alle Lektionen, lesson title, step numbers, step title) stays at the top of the lesson column with its own ← Zurück / Weiter → buttons next to „Alle Lektionen“; only the step content below scrolls. The buttons at the end of the step stay as well.
 - **Web 0.13.4, Pseudocode switch in the toolbar and simulation of pseudocode:** the checkbox „Pseudocode“ now sits in the toolbar left of ⇄ (before it was only in the code window). For a diagram marked as pseudocode (e.g. „Tee kochen“ in Lektion 1) the simulation no longer runs the boxes as Java: it only highlights them one after another, and for a condition („Regnet es?“), a loop or a Fallauswahl it asks for the answer (true/false or ja/nein, case name). Programmieren shows no Java errors for pseudocode. Lektion 1 now mentions spaghetti code right where it says a Struktogramm has no jumps.
 - **Web 0.13.3, Struktogramm and Elemente in the code block colours:** the Struktogramm uses the same soft colours as the blocks in Programmieren: statements yellow like the method, loops (for, while, do-until, endless) pink, Verzweigung and Fallauswahl blue; elements inside a loop or branch take its colour, so code and diagram side by side show the matching blocks at a glance. The boxes in „Elemente“ get the same colours. The setting is now called „Blöcke farbig“ and switches code, diagram and Elemente together; a colour stored in the file still wins, and exports stay white. Lesson 1 uses the same colours (statements yellow, branch blue, loop pink; the sequence itself has no colour, it is the row of statements).
 - **Web 0.13.1, divider between Struktogramm and Programmieren always draggable:** with four open columns (lessons, Struktogramm, Programmieren, „mBot2 live“) the diagram sat at its minimum width and the divider barely moved. Dragging it now first uses the space of the two columns next to it, then takes width from „mBot2 live“, then from the lessons and files columns (down to their minimum widths). Works in both orders after ⇄; all widths are remembered.

web/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "visustruct-web",
   "private": true,
-  "version": "0.13.4",
+  "version": "0.13.6",
   "type": "module",
   "scripts": {
     "dev": "vite",

web/package.json

@@ -259,13 +259,18 @@ export class LearnPanel {
         return b
       }),
     )
+    // Kopf mit Zurück/Weiter bleibt oben stehen, nur der Inhalt darunter scrollt.
     this.body.append(
-      back,
-      h('p', { class: 'learn-kicker' }, `${t('web_learn_lesson_fmt', lesson.number)} · ${lesson.section}${lesson.robot ? ' · 🤖 VisuBot' : ''}`),
-      // Dieselbe Nummer wie in der Liste, gut sichtbar neben dem Titel.
-      h('h2', { class: 'learn-title' }, h('span', { class: 'learn-num', 'aria-hidden': 'true' }, String(lesson.number)), lesson.title),
-      bar,
-      h('h3', { class: 'learn-step-title' }, `${index + 1}. ${step.title}`),
+      h(
+        'div',
+        { class: 'learn-lesson-head' },
+        h('div', { class: 'learn-head-row' }, back, this.stepNav(lesson, index, p.done, 'learn-nav learn-nav-top')),
+        h('p', { class: 'learn-kicker' }, `${t('web_learn_lesson_fmt', lesson.number)} · ${lesson.section}${lesson.robot ? ' · 🤖 VisuBot' : ''}`),
+        // Dieselbe Nummer wie in der Liste, gut sichtbar neben dem Titel.
+        h('h2', { class: 'learn-title' }, h('span', { class: 'learn-num', 'aria-hidden': 'true' }, String(lesson.number)), lesson.title),
+        bar,
+        h('h3', { class: 'learn-step-title' }, `${index + 1}. ${step.title}`),
+      ),
     )
     const ret = this.returnTo?.lesson === lesson.id && this.returnTo.step !== index ? this.returnTo : undefined
     const backToChecklist = () => {
@@ -284,7 +289,13 @@ export class LearnPanel {
     this.openNeededColumns(step.blocks)
     markTerms(this.body, glossary)
 
-    const nav = h('div', { class: 'learn-nav' })
+    this.body.append(this.stepNav(lesson, index, p.done, 'learn-nav'))
+    if (ret) this.body.append(backToChecklist())
+  }
+
+  /** Zurück/Weiter (im letzten Schritt „Fertig“): oben im Kopf und unten nach dem Text. */
+  private stepNav(lesson: Lesson, index: number, done: boolean | undefined, class_: string) {
+    const nav = h('div', { class: class_ })
     const prev = h('button', {}, `← ${t('web_learn_back')}`) as HTMLButtonElement
     prev.disabled = index === 0
     prev.addEventListener('click', () => this.goToStep(lesson, index - 1))
@@ -294,16 +305,15 @@ export class LearnPanel {
       next.addEventListener('click', () => this.goToStep(lesson, index + 1))
       nav.append(next)
     } else {
-      const finish = h('button', { class: 'primary' }, p.done ? `✓ ${t('web_learn_done')}` : t('web_learn_finish'))
+      const finish = h('button', { class: 'primary' }, done ? `✓ ${t('web_learn_done')}` : t('web_learn_finish'))
       finish.addEventListener('click', () => {
         progress.updateLesson(lesson.id, { done: true })
         const following = lessons.find((l) => l.number === lesson.number + 1)
         this.openLesson(following?.id)
       })
       nav.append(finish)
     }
-    this.body.append(nav)
-    if (ret) this.body.append(backToChecklist())
+    return nav
   }
 
   private goToStep(lesson: Lesson, step: number) {

web/src/ui/learnPanel.ts

@@ -1509,6 +1509,38 @@ button.danger-text:not(:disabled) {
   padding: 0;
   text-align: start;
 }
+/* Lektionskopf bleibt oben stehen, nur der Schritt darunter scrollt. */
+.learn-lesson-head {
+  position: sticky;
+  top: -4px;
+  z-index: 3;
+  margin: -4px -16px 10px;
+  padding: 4px 16px 8px;
+  background: var(--panel);
+  border-bottom: 1px solid var(--border);
+}
+.learn-lesson-head .learn-progress {
+  margin-bottom: 8px;
+}
+.learn-lesson-head .learn-step-title {
+  margin: 0;
+}
+.learn-head-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.learn-nav.learn-nav-top {
+  margin-top: 0;
+  gap: 6px;
+}
+.learn-nav-top button {
+  padding: 3px 10px;
+  min-height: 0;
+  font-size: 13px;
+}
 .learn-kicker {
   margin: 4px 0 0;
   color: var(--muted);