refactor: split concepts.page into 6 sections, fix dead highlighting (RD-24)

The page held six teaching sections and a 142-line `styles:` block, at 471 effective lines against a limit of 250. It is now 36 lines of composition. Angular scopes a component's CSS to markup that component rendered, so the split had to move each rule to its owner. `concept-card` owns the card vocabulary and renders it. `.app-code`, `.app-lead`, `.app-cols` and `.app-note` become globals, because their targets are projected or arrive through `[innerHTML]`. That constraint exposed a live bug. The syntax-highlighting rules compiled to `pre[_ngcontent-%COMP%] .k[_ngcontent-%COMP%]`, but `highlight-ts` injects the `.k`/`.s`/`.c` spans through `[innerHTML]`, so they carry no scope attribute and the rule never matched. Keywords, strings and comments have always rendered in the plain foreground colour. The rules are global now, on five new `--app-code-*` tokens. Widen the colour guard while here: it scanned only `*.component.ts`, so every `*.page.ts`, `*.section.ts` and `*.step.ts` was invisible to it. That is how this page collected 21 hardcoded colours. One other file needed a fix. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-04 23:44:01 +02:00
parent d5a7a25a78
commit 630d68045f
13 changed files with 908 additions and 488 deletions
@@ -0,0 +1,87 @@
+import { Component } from '@angular/core';
+import { HeadingComponent } from '@shared/ui/heading/heading.component';
+import { HerregistratieWizardComponent } from '@herregistratie/ui/herregistratie-wizard/herregistratie-wizard.component';
+import { ConceptCardComponent } from './concept-card.component';
+import { SNIPPETS } from './snippets.generated';
+import { highlightTs } from './highlight-ts';
+
+/** Section 4: form as a state machine, shown as a live state diagram. One tagged union
+    drives the UI — the marked state below is the wizard's current one. Composition-only. */
+@Component({
+  selector: 'app-concepts-form-machine-section',
+  imports: [HeadingComponent, HerregistratieWizardComponent, ConceptCardComponent],
+  styles: [
+    `
+      .machine {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        margin: 0 0 1rem;
+      }
+      .node {
+        padding: 0.4rem 0.8rem;
+        border-radius: 999px;
+        border: 1px solid var(--rhc-color-grijs-300);
+        font-size: 0.82rem;
+        color: var(--rhc-color-grijs-700);
+        transition: all 0.15s;
+      }
+      .node.on {
+        background: var(--rhc-color-hemelblauw-100);
+        border-color: var(--rhc-color-hemelblauw-500);
+        color: var(--rhc-color-hemelblauw-700);
+        font-weight: 700;
+        /* teaching motion: the active state pops as the wizard transitions (the .node
+           transition above animates it; reduced-motion is handled globally). */
+        transform: scale(1.06);
+      }
+    `,
+  ],
+  template: `
+    <section class="app-section">
+      <app-heading [level]="2">4 · Form als state machine</app-heading>
+      <p class="app-lead">
+        Eén tagged union stuurt de UI. Speel met de wizard — de gemarkeerde toestand is de huidige.
+      </p>
+      <div class="app-cols">
+        <app-concept-card variant="bad" tag="Fout — losse booleans" [code]="code['machineBad']">
+          <p class="app-note">
+            Niets verhindert"submitting" mét validatiefouten of een successcherm met errors.
+          </p>
+        </app-concept-card>
+        <app-concept-card
+          variant="good"
+          tag="Goed — één tagged union"
+          [code]="code['machine']"
+          [src]="src['machine']"
+        >
+          <div class="machine">
+            @for (n of ['Editing', 'Submitting', 'Submitted', 'Failed']; track n) {
+              <span class="node" [class.on]="w.state().tag === n">{{ n }}</span>
+            }
+          </div>
+          <app-herregistratie-wizard #w />
+        </app-concept-card>
+      </div>
+    </section>
+  `,
+})
+export class FormMachineSection {
+  // Deliberately-wrong illustration (no real source to link — it shows the anti-pattern).
+  private readonly machineBad = `submitting = signal(false);
+submitted  = signal(false);
+errors     = signal<...>({});
+// submitting === true && errors.size > 0 ? 🤷`;
+
+  /** Highlighted HTML per snippet: `machine` comes from SNIPPETS (extracted from source by
+      gen:snippets — it can't drift), `machineBad` is authored above. */
+  protected readonly code: Record<string, string> = {
+    machineBad: highlightTs(this.machineBad),
+    machine: highlightTs(SNIPPETS['machine']),
+  };
+
+  /** The real file the linked snippet is extracted from (shown as a caption). */
+  protected readonly src: Record<string, string> = {
+    machine: 'registratie/domain/change-request.machine.ts',
+  };
+}