fix: hide backoffice navbar-toggler when there's nothing to collapse

The toggler button was always rendered, but its collapse target
(#navbarSupportedContent) only existed for authenticated users. On
the login page, tapping the menu button on a narrow screen did
nothing because the target it pointed at wasn't in the DOM.

.githooks/pre-commit

@@ -12,7 +12,12 @@ while IFS= read -r file; do
     [[ -n "$file" ]] && STAGED_TWIG+=("$file")
 done < <(git diff --cached --name-only --diff-filter=ACMR | grep -E '\.twig$' || true)
 
-if [[ ${#STAGED_PHP[@]} -eq 0 && ${#STAGED_TWIG[@]} -eq 0 ]]; then
+STAGED_TS=()
+while IFS= read -r file; do
+    [[ -n "$file" ]] && STAGED_TS+=("$file")
+done < <(git diff --cached --name-only --diff-filter=ACMR | grep -E '\.ts$' || true)
+
+if [[ ${#STAGED_PHP[@]} -eq 0 && ${#STAGED_TWIG[@]} -eq 0 && ${#STAGED_TS[@]} -eq 0 ]]; then
     exit 0
 fi
 
@@ -46,3 +51,18 @@ if [[ ${#STAGED_TWIG[@]} -gt 0 ]]; then
     "${DOCKER_CMD[@]}" vendor/bin/twig-cs-fixer fix "${STAGED_TWIG[@]}"
     git add "${STAGED_TWIG[@]}"
 fi
+
+if [[ ${#STAGED_TS[@]} -gt 0 ]]; then
+    echo "TypeScript (${#STAGED_TS[@]} file(s)): Deno fmt → lint → check"
+
+    echo "  → Deno fmt"
+    "${DOCKER_CMD[@]}" deno fmt "${STAGED_TS[@]}"
+    git add "${STAGED_TS[@]}"
+
+    echo "  → Deno lint"
+    "${DOCKER_CMD[@]}" deno lint --fix "${STAGED_TS[@]}"
+    git add "${STAGED_TS[@]}"
+
+    echo "  → Deno check"
+    "${DOCKER_CMD[@]}" deno check "${STAGED_TS[@]}"
+fi

.github/workflows/ci.yml

@@ -104,6 +104,22 @@ jobs:
             echo "::error::Translations are out of date. Run 'just translations' and commit the changes."
             exit 1
           fi
+      - name: TypeScript Formatting
+        id: ts_fmt
+        continue-on-error: true
+        run: docker compose exec -T php deno fmt --check assets/
+      - name: TypeScript Lint
+        id: ts_lint
+        continue-on-error: true
+        run: docker compose exec -T php deno lint assets/
+      - name: TypeScript Type Check
+        id: ts_check
+        continue-on-error: true
+        run: docker compose exec -T php deno check assets/*.ts assets/controllers/*.ts assets/controllers/bo/*.ts
+      - name: TypeScript Tests
+        id: ts_test
+        continue-on-error: true
+        run: docker compose exec -T php deno test assets/
       - name: Check HTTP reachability
         run: curl -v --fail-with-body http://localhost
       - name: Assert all checks passed
@@ -123,6 +139,10 @@ jobs:
           check "PHPStan"          "${{ steps.phpstan.outcome }}"
           check "Rector"           "${{ steps.rector.outcome }}"
           check "Translations"     "${{ steps.translations.outcome }}"
+          check "TypeScript Formatting" "${{ steps.ts_fmt.outcome }}"
+          check "TypeScript Lint"       "${{ steps.ts_lint.outcome }}"
+          check "TypeScript Type Check" "${{ steps.ts_check.outcome }}"
+          check "TypeScript Tests"      "${{ steps.ts_test.outcome }}"
           exit $failed
 
   tests:
@@ -156,6 +176,8 @@ jobs:
         run: docker compose up php database --wait --no-build
       - name: Build SCSS
         run: docker compose exec -T php bin/console sass:build
+      - name: Build TypeScript
+        run: docker compose exec -T php bin/console typescript:build
       - name: Create test database
         run: docker compose exec -T php bin/console -e test doctrine:database:create
       - name: Run migrations

CLAUDE.md

@@ -23,7 +23,7 @@ Tech Stack:
 - **ORM**: Doctrine
 - **Server**: FrankenPHP with Caddy
 - **Container**: Docker Compose
-- **Frontend**: Twig templates with SASS (via asset mapper)
+- **Frontend**: Twig templates with SASS and TypeScript (via asset mapper)
 - **Testing**: PHPUnit 13 with DAMA Doctrine test bundle
 
 ## Build & Development Commands
@@ -252,7 +252,8 @@ question counts as covered more than once).
 
 - **Write the failing test first.** When fixing any PHP-reachable bug, write a PHPUnit test that reproduces the failure
   before touching the production code. Fix the code until the test passes.
-- Only skip a test if the bug is purely in JavaScript/frontend where PHPUnit cannot reach it.
+- For bugs in `assets/*.ts` logic, write a `deno test` first instead — same TDD rule, different runner. Only skip a
+  test if the bug is in markup/DOM wiring that isn't worth a test per the rule below.
 - Don't write tests for trivial presentational markup (e.g. asserting a tooltip/popover attribute or a CSS class exists
   in a template). Tests cover behavior: routing, forms, persistence, authorization.
 - Follow the pattern in `tests/Controller/Backoffice/` for controller/integration tests: log in, GET for CSRF token,
@@ -276,6 +277,11 @@ question counts as covered more than once).
 - **Twig-CS-Fixer**: Template style enforcement
 - **Safe functions**: Use `thecodingmachine/safe` wrappers for standard PHP functions that return `false` on failure —
   they throw exceptions instead
+- **TypeScript (`assets/`)**: Compiled via `sensiolabs/typescript-bundle` (standalone SWC binary, no Node/npm).
+  Formatting, linting, type-checking, and tests use **Deno** (`deno fmt` / `deno lint` / `deno check` / `deno test`) —
+  a single standalone binary, kept dev-only (installed in the `frankenphp_dev` Docker stage, not prod), consistent
+  with the project's no-Node-anywhere approach. See `deno.json` for config; run via `just fix-ts` / `just check-ts` /
+  `just test-ts`. Tests live alongside their source as `*_test.ts` files
 
 ### Environment Configuration
 

Dockerfile

@@ -62,11 +62,18 @@ ENV APP_ENV=dev XDEBUG_MODE=off
 # hadolint ignore=DL3008
 RUN apt-get update && apt-get install -y --no-install-recommends \
 	bash-completion \
+	unzip \
 	&& rm -rf /var/lib/apt/lists/*
 
 COPY --link frankenphp/console-complete.bash /usr/share/bash-completion/completions/console
 COPY --link frankenphp/composer-complete.bash /usr/share/bash-completion/completions/composer
 
+# Deno: standalone binary (no Node/npm) used for TypeScript lint/format/type-check/test,
+# dev-only tooling so it's not installed in the prod stage.
+ENV DENO_INSTALL=/usr/local
+# hadolint ignore=DL4006
+RUN curl -fsSL https://deno.land/install.sh | sh -s v2.9.2
+
 RUN mv "$PHP_INI_DIR/php.ini-development" "$PHP_INI_DIR/php.ini"
 
 RUN set -eux; \

Justfile

@@ -112,6 +112,16 @@ phpstan *args:
 test *args:
     docker compose exec php vendor/bin/phpunit {{ args }}
 
+fix-ts:
+    docker compose exec php deno fmt assets/
+    docker compose exec php deno lint --fix assets/
+
+check-ts:
+    docker compose exec php deno check assets/*.ts assets/controllers/*.ts assets/controllers/bo/*.ts
+
+test-ts *args:
+    docker compose exec php deno test assets/ {{ args }}
+
 [confirm]
 clean:
     docker compose down -v --remove-orphans

assets/backoffice.ts

@@ -2,12 +2,15 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap-icons/font/bootstrap-icons.min.css';
 import './styles/backoffice.scss';
 import '@hotwired/turbo';
-import './stimulus.js';
-import './bootstrap.js';
+import './stimulus.ts';
+import './bootstrap.ts';
 import * as Sentry from '@sentry/browser';
 
-const dsn = document.querySelector('meta[name="sentry-dsn"]')?.content ?? '';
-const userEmail = document.querySelector('meta[name="user-email"]')?.content ?? '';
+const dsn = document.querySelector<HTMLMetaElement>('meta[name="sentry-dsn"]')
+    ?.content ?? '';
+const userEmail =
+    document.querySelector<HTMLMetaElement>('meta[name="user-email"]')
+        ?.content ?? '';
 
 // When no real DSN is configured, route to the local Spotlight sidecar so
 // nothing reaches Sentry. A syntactically valid DSN is still required for the

assets/bootstrap.js

@@ -1 +0,0 @@
-import * as bootstrap from 'bootstrap'

assets/bootstrap.ts

@@ -0,0 +1 @@
+import 'bootstrap';

assets/controllers/bo/form_collection_controller.js

@@ -1,136 +0,0 @@
-import {Controller} from '@hotwired/stimulus';
-
-export default class extends Controller {
-  static targets = ['collection'];
-  static values = {prototype: String};
-
-  connect() {
-    this.index = this.collectionTarget.children.length;
-    this._syncOrdering();
-
-    if (this.index === 0) {
-      this.addItem();
-    }
-
-    // `submit` fires on the ancestor <form>, which is outside this controller's
-    // subtree. Stimulus data-action only works within the controller element, so
-    // addEventListener on the form is the only option here.
-    this._form = this.element.closest('form');
-    if (this._form) {
-      this._submitHandler = () => {
-        [...this.collectionTarget.children].forEach(item => {
-          const input = item.querySelector('input[type="text"]');
-          if (input && input.value.trim() === '') item.remove();
-        });
-      };
-      this._form.addEventListener('submit', this._submitHandler);
-    }
-  }
-
-  disconnect() {
-    if (this._form && this._submitHandler) {
-      this._form.removeEventListener('submit', this._submitHandler);
-    }
-  }
-
-  addItem() {
-    const item = document.createElement('div');
-    item.innerHTML = this.prototypeValue.replace(/__name__/g, this.index);
-    const el = item.firstElementChild;
-    this.collectionTarget.appendChild(el);
-    this.index++;
-    this._syncOrdering();
-  }
-
-  removeItem(event) {
-    event.target.closest('[data-collection-item]').remove();
-    this._notifyChange();
-  }
-
-  sortAlphabetically() {
-    const items = [...this.collectionTarget.children];
-    items.sort((a, b) => {
-      const textA = (a.querySelector('input[type="text"]')?.value ?? '').toLowerCase();
-      const textB = (b.querySelector('input[type="text"]')?.value ?? '').toLowerCase();
-      return textA.localeCompare(textB);
-    });
-    items.forEach(item => this.collectionTarget.appendChild(item));
-    this._syncOrdering();
-    this._notifyChange();
-  }
-
-  randomize() {
-    const items = [...this.collectionTarget.children];
-    for (let i = items.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      [items[i], items[j]] = [items[j], items[i]];
-    }
-    items.forEach(item => this.collectionTarget.appendChild(item));
-    this._syncOrdering();
-    this._notifyChange();
-  }
-
-  autoExpand(event) {
-    if (event.target.type !== 'text') return;
-    const item = event.target.closest('[data-collection-item]');
-    const last = [...this.collectionTarget.children].at(-1);
-    if (item && item === last && event.target.value.trim() !== '') {
-      this.addItem();
-    }
-  }
-
-  // — drag-and-drop —
-
-  dragStart(event) {
-    this._dragging = event.currentTarget.closest('[data-collection-item]');
-    this._dragging.classList.add('opacity-50');
-    event.dataTransfer.effectAllowed = 'move';
-  }
-
-  dragEnd(event) {
-    event.currentTarget.closest('[data-collection-item]').classList.remove('opacity-50');
-    this._dragging = null;
-    this.collectionTarget.querySelectorAll('[data-collection-item]').forEach(i =>
-      i.classList.remove('border-top', 'border-bottom', 'border-primary'),
-    );
-  }
-
-  dragOver(event) {
-    event.preventDefault();
-    const el = event.currentTarget;
-    if (!this._dragging || this._dragging === el) return;
-    event.dataTransfer.dropEffect = 'move';
-    const rect = el.getBoundingClientRect();
-    const isBottom = event.clientY > rect.top + rect.height / 2;
-    el.classList.toggle('border-top', !isBottom);
-    el.classList.toggle('border-bottom', isBottom);
-    el.classList.add('border-primary');
-  }
-
-  dragLeave(event) {
-    event.currentTarget.classList.remove('border-top', 'border-bottom', 'border-primary');
-  }
-
-  drop(event) {
-    event.preventDefault();
-    const el = event.currentTarget;
-    el.classList.remove('border-top', 'border-bottom', 'border-primary');
-    if (!this._dragging || this._dragging === el) return;
-    const rect = el.getBoundingClientRect();
-    const isBottom = event.clientY > rect.top + rect.height / 2;
-    this.collectionTarget.insertBefore(this._dragging, isBottom ? el.nextSibling : el);
-    this._syncOrdering();
-    this._notifyChange();
-  }
-
-  _notifyChange() {
-    this.element.dispatchEvent(new Event('change', {bubbles: true}));
-  }
-
-  _syncOrdering() {
-    [...this.collectionTarget.children].forEach((el, i) => {
-      const input = el.querySelector('input[name*="[ordering]"]');
-      if (input) input.value = i;
-    });
-  }
-}

assets/controllers/bo/form_collection_controller.ts

@@ -0,0 +1,172 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = ['collection'];
+    static values = { prototype: String };
+
+    declare readonly collectionTarget: HTMLElement;
+    declare readonly prototypeValue: string;
+
+    index = 0;
+    _dragging: Element | null = null;
+    _form: HTMLFormElement | null = null;
+    _submitHandler: (() => void) | null = null;
+
+    connect(): void {
+        this.index = this.collectionTarget.children.length;
+        this._syncOrdering();
+
+        if (this.index === 0) {
+            this.addItem();
+        }
+
+        // `submit` fires on the ancestor <form>, which is outside this controller's
+        // subtree. Stimulus data-action only works within the controller element, so
+        // addEventListener on the form is the only option here.
+        this._form = this.element.closest('form');
+        if (this._form) {
+            this._submitHandler = () => {
+                [...this.collectionTarget.children].forEach((item) => {
+                    const input = item.querySelector<HTMLInputElement>(
+                        'input[type="text"]',
+                    );
+                    if (input && input.value.trim() === '') item.remove();
+                });
+            };
+            this._form.addEventListener('submit', this._submitHandler);
+        }
+    }
+
+    disconnect(): void {
+        if (this._form && this._submitHandler) {
+            this._form.removeEventListener('submit', this._submitHandler);
+        }
+    }
+
+    addItem(): void {
+        const item = document.createElement('div');
+        item.innerHTML = this.prototypeValue.replace(
+            /__name__/g,
+            String(this.index),
+        );
+        const el = item.firstElementChild;
+        if (el) this.collectionTarget.appendChild(el);
+        this.index++;
+        this._syncOrdering();
+    }
+
+    removeItem(event: Event): void {
+        (event.target as HTMLElement).closest('[data-collection-item]')
+            ?.remove();
+        this._notifyChange();
+    }
+
+    sortAlphabetically(): void {
+        const items = [...this.collectionTarget.children];
+        items.sort((a, b) => {
+            const textA =
+                (a.querySelector<HTMLInputElement>('input[type="text"]')
+                    ?.value ?? '').toLowerCase();
+            const textB =
+                (b.querySelector<HTMLInputElement>('input[type="text"]')
+                    ?.value ?? '').toLowerCase();
+            return textA.localeCompare(textB);
+        });
+        items.forEach((item) => this.collectionTarget.appendChild(item));
+        this._syncOrdering();
+        this._notifyChange();
+    }
+
+    randomize(): void {
+        const items = [...this.collectionTarget.children];
+        for (let i = items.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [items[i], items[j]] = [items[j], items[i]];
+        }
+        items.forEach((item) => this.collectionTarget.appendChild(item));
+        this._syncOrdering();
+        this._notifyChange();
+    }
+
+    autoExpand(event: Event): void {
+        const target = event.target as HTMLInputElement;
+        if (target.type !== 'text') return;
+        const item = target.closest('[data-collection-item]');
+        const last = [...this.collectionTarget.children].at(-1);
+        if (item && item === last && target.value.trim() !== '') {
+            this.addItem();
+        }
+    }
+
+    // — drag-and-drop —
+
+    dragStart(event: DragEvent): void {
+        this._dragging = (event.currentTarget as HTMLElement).closest(
+            '[data-collection-item]',
+        );
+        this._dragging?.classList.add('opacity-50');
+        event.dataTransfer!.effectAllowed = 'move';
+    }
+
+    dragEnd(event: DragEvent): void {
+        (event.currentTarget as HTMLElement).closest('[data-collection-item]')
+            ?.classList.remove('opacity-50');
+        this._dragging = null;
+        this.collectionTarget.querySelectorAll('[data-collection-item]')
+            .forEach((i) =>
+                i.classList.remove(
+                    'border-top',
+                    'border-bottom',
+                    'border-primary',
+                )
+            );
+    }
+
+    dragOver(event: DragEvent): void {
+        event.preventDefault();
+        const el = event.currentTarget as HTMLElement;
+        if (!this._dragging || this._dragging === el) return;
+        event.dataTransfer!.dropEffect = 'move';
+        const rect = el.getBoundingClientRect();
+        const isBottom = event.clientY > rect.top + rect.height / 2;
+        el.classList.toggle('border-top', !isBottom);
+        el.classList.toggle('border-bottom', isBottom);
+        el.classList.add('border-primary');
+    }
+
+    dragLeave(event: DragEvent): void {
+        (event.currentTarget as HTMLElement).classList.remove(
+            'border-top',
+            'border-bottom',
+            'border-primary',
+        );
+    }
+
+    drop(event: DragEvent): void {
+        event.preventDefault();
+        const el = event.currentTarget as HTMLElement;
+        el.classList.remove('border-top', 'border-bottom', 'border-primary');
+        if (!this._dragging || this._dragging === el) return;
+        const rect = el.getBoundingClientRect();
+        const isBottom = event.clientY > rect.top + rect.height / 2;
+        this.collectionTarget.insertBefore(
+            this._dragging,
+            isBottom ? el.nextSibling : el,
+        );
+        this._syncOrdering();
+        this._notifyChange();
+    }
+
+    _notifyChange(): void {
+        this.element.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+
+    _syncOrdering(): void {
+        [...this.collectionTarget.children].forEach((el, i) => {
+            const input = el.querySelector<HTMLInputElement>(
+                'input[name*="[ordering]"]',
+            );
+            if (input) input.value = String(i);
+        });
+    }
+}

assets/controllers/bo/form_collection_controller_test.ts

@@ -0,0 +1,114 @@
+import { assertEquals } from '@std/assert';
+
+// Stimulus's Controller base class constructor only does `this.context = context`,
+// and target getters are normally installed by Application.register — since we
+// construct the controller directly (no real Stimulus app), collectionTarget/element
+// are assigned here as plain writable properties, backed by a minimal fake DOM
+// container that supports the one operation these methods actually rely on:
+// appendChild() moving an existing child to the end (real DOM semantics).
+class FakeInput {
+    value: string;
+    constructor(value = '') {
+        this.value = value;
+    }
+}
+
+class FakeItem {
+    textInput: FakeInput;
+    orderingInput = new FakeInput();
+
+    constructor(text: string) {
+        this.textInput = new FakeInput(text);
+    }
+
+    querySelector<T>(selector: string): T | null {
+        if (selector.includes('type="text"')) {
+            return this.textInput as unknown as T;
+        }
+        if (selector.includes('ordering')) {
+            return this.orderingInput as unknown as T;
+        }
+        return null;
+    }
+}
+
+class FakeCollection {
+    children: FakeItem[] = [];
+
+    appendChild(item: FakeItem) {
+        const idx = this.children.indexOf(item);
+        if (idx !== -1) this.children.splice(idx, 1);
+        this.children.push(item);
+    }
+}
+
+const { default: FormCollectionController } = await import(
+    './form_collection_controller.ts'
+);
+
+// deno-lint-ignore no-explicit-any
+function makeController(items: FakeItem[]): any {
+    const collectionTarget = new FakeCollection();
+    collectionTarget.children = items;
+    // `element` is a read-only getter on Controller (delegates to `this.scope.element`),
+    // so the fake element is supplied via the constructor context rather than assigned.
+    const controller = new FormCollectionController({
+        scope: { element: { dispatchEvent: () => true } },
+    } as never);
+    return Object.assign(controller, { collectionTarget });
+}
+
+Deno.test("_syncOrdering writes the current index into each item's ordering input", () => {
+    const items = [new FakeItem('c'), new FakeItem('a'), new FakeItem('b')];
+    const controller = makeController(items);
+
+    controller._syncOrdering();
+
+    assertEquals(items.map((i) => i.orderingInput.value), ['0', '1', '2']);
+});
+
+Deno.test('sortAlphabetically reorders items by their text input value, case-insensitively', () => {
+    const c = new FakeItem('Charlie');
+    const a = new FakeItem('alice');
+    const b = new FakeItem('Bob');
+    const controller = makeController([c, a, b]);
+
+    controller.sortAlphabetically();
+
+    assertEquals(
+        controller.collectionTarget.children.map((i: FakeItem) =>
+            i.textInput.value
+        ),
+        ['alice', 'Bob', 'Charlie'],
+    );
+    // _syncOrdering must run after the reorder, against the new order
+    assertEquals(
+        controller.collectionTarget.children.map((i: FakeItem) =>
+            i.orderingInput.value
+        ),
+        ['0', '1', '2'],
+    );
+});
+
+Deno.test('randomize keeps the same set of items and resyncs ordering', () => {
+    const items = [
+        new FakeItem('1'),
+        new FakeItem('2'),
+        new FakeItem('3'),
+        new FakeItem('4'),
+    ];
+    const controller = makeController([...items]);
+
+    controller.randomize();
+
+    const resultValues = controller.collectionTarget.children.map((
+        i: FakeItem,
+    ) => i.textInput.value);
+    assertEquals(resultValues.slice().sort(), ['1', '2', '3', '4']);
+    assertEquals(
+        controller.collectionTarget.children.map((i: FakeItem) =>
+            i.orderingInput.value
+        ),
+        ['0', '1', '2', '3'],
+    );
+});

assets/controllers/bo/modal_controller.js

@@ -1,49 +0,0 @@
-import {Controller} from '@hotwired/stimulus';
-import {Modal} from 'bootstrap';
-import {visit} from '@hotwired/turbo';
-
-export default class extends Controller {
-  static targets = ['modal', 'frame'];
-
-  open(event) {
-    event.preventDefault();
-    const {src, modalTitle} = event.currentTarget.dataset;
-    if (modalTitle) {
-      const titleEl = this.modalTarget.querySelector('.modal-title');
-      if (titleEl) titleEl.textContent = modalTitle;
-    }
-    this.resetDirty();
-    this.frameTarget.innerHTML = '<div class="modal-body text-center py-4"><div class="spinner-border" role="status"></div></div>';
-    this.frameTarget.removeAttribute('src');
-    this.frameTarget.setAttribute('src', src);
-    Modal.getOrCreateInstance(this.modalTarget).show();
-  }
-
-  frameSubmitEnd(event) {
-    if (event.detail.success) {
-      Modal.getOrCreateInstance(this.modalTarget).hide();
-      visit(window.location.href);
-    }
-  }
-
-  markDirty() {
-    if (this._dirty) return;
-    this._dirty = true;
-    // Using _config instead of preventDefault on hide.bs.modal because we need
-    // to block only user-triggered dismissal (backdrop click, Escape key) while
-    // keeping programmatic hide() working — frameSubmitEnd() calls hide() after
-    // a successful save and must not be blocked. _config.backdrop/keyboard is
-    // the correct primitive for that distinction and has been stable across all
-    // Bootstrap 5.x releases.
-    const modal = Modal.getOrCreateInstance(this.modalTarget);
-    modal._config.backdrop = 'static';
-    modal._config.keyboard = false;
-  }
-
-  resetDirty() {
-    this._dirty = false;
-    const modal = Modal.getOrCreateInstance(this.modalTarget);
-    modal._config.backdrop = true;
-    modal._config.keyboard = true;
-  }
-}

assets/controllers/bo/modal_controller.ts

@@ -0,0 +1,66 @@
+import { Controller } from '@hotwired/stimulus';
+import { Modal } from 'bootstrap';
+import { visit } from '@hotwired/turbo';
+
+// Bootstrap's public Modal type doesn't expose `_config` (an internal, but stable, field
+// across all 5.x releases) — extend it locally rather than casting to `any` everywhere.
+interface ModalWithConfig extends Modal {
+    _config: { backdrop: boolean | 'static'; keyboard: boolean };
+}
+
+export default class extends Controller {
+    static targets = ['modal', 'frame'];
+
+    declare readonly modalTarget: HTMLElement;
+    declare readonly frameTarget: HTMLElement;
+
+    _dirty = false;
+
+    open(event: MouseEvent): void {
+        event.preventDefault();
+        const { src, modalTitle } =
+            (event.currentTarget as HTMLElement).dataset;
+        if (modalTitle) {
+            const titleEl = this.modalTarget.querySelector('.modal-title');
+            if (titleEl) titleEl.textContent = modalTitle;
+        }
+        this.resetDirty();
+        this.frameTarget.innerHTML =
+            '<div class="modal-body text-center py-4"><div class="spinner-border" role="status"></div></div>';
+        this.frameTarget.removeAttribute('src');
+        if (src) this.frameTarget.setAttribute('src', src);
+        Modal.getOrCreateInstance(this.modalTarget).show();
+    }
+
+    frameSubmitEnd(event: CustomEvent<{ success: boolean }>): void {
+        if (event.detail.success) {
+            Modal.getOrCreateInstance(this.modalTarget).hide();
+            visit(window.location.href);
+        }
+    }
+
+    markDirty(): void {
+        if (this._dirty) return;
+        this._dirty = true;
+        // Using _config instead of preventDefault on hide.bs.modal because we need
+        // to block only user-triggered dismissal (backdrop click, Escape key) while
+        // keeping programmatic hide() working — frameSubmitEnd() calls hide() after
+        // a successful save and must not be blocked. _config.backdrop/keyboard is
+        // the correct primitive for that distinction and has been stable across all
+        // Bootstrap 5.x releases.
+        const modal = Modal.getOrCreateInstance(
+            this.modalTarget,
+        ) as ModalWithConfig;
+        modal._config.backdrop = 'static';
+        modal._config.keyboard = false;
+    }
+
+    resetDirty(): void {
+        this._dirty = false;
+        const modal = Modal.getOrCreateInstance(
+            this.modalTarget,
+        ) as ModalWithConfig;
+        modal._config.backdrop = true;
+        modal._config.keyboard = true;
+    }
+}

assets/controllers/bo/popover_controller.js

@@ -1,13 +0,0 @@
-import {Controller} from '@hotwired/stimulus';
-import {Popover} from 'bootstrap';
-
-export default class extends Controller {
-  connect() {
-    this.popovers = [...this.element.querySelectorAll('[data-bs-toggle="popover"]')]
-      .map(popoverTriggerEl => Popover.getOrCreateInstance(popoverTriggerEl));
-  }
-
-  disconnect() {
-    this.popovers.forEach(popover => popover.dispose());
-  }
-}

assets/controllers/bo/popover_controller.ts

@@ -0,0 +1,19 @@
+import { Controller } from '@hotwired/stimulus';
+import { Popover } from 'bootstrap';
+
+export default class extends Controller {
+    popovers: Popover[] = [];
+
+    connect(): void {
+        this.popovers = [
+            ...this.element.querySelectorAll('[data-bs-toggle="popover"]'),
+        ]
+            .map((popoverTriggerEl) =>
+                Popover.getOrCreateInstance(popoverTriggerEl)
+            );
+    }
+
+    disconnect(): void {
+        this.popovers.forEach((popover) => popover.dispose());
+    }
+}

assets/controllers/bo/question_list_controller.js

@@ -1,123 +0,0 @@
-import {Controller} from '@hotwired/stimulus';
-
-export default class extends Controller {
-  static targets = ['list', 'item', 'status'];
-  static values = {
-    reorderUrl: String,
-    csrf: String,
-    savedLabel: String,
-    errorLabel: String,
-    errorHint: String,
-  };
-
-  connect() {
-    this._locked = false;
-  }
-
-  dragStart(event) {
-    const item = event.currentTarget.closest('[data-bo--question-list-target="item"]');
-    this._dragging = item;
-    event.dataTransfer.effectAllowed = 'move';
-    setTimeout(() => item.classList.add('opacity-50'), 0);
-  }
-
-  dragEnd(event) {
-    const item = event.currentTarget.closest('[data-bo--question-list-target="item"]');
-    item.classList.remove('opacity-50');
-    this._dragging = null;
-    this._removePlaceholder();
-  }
-
-  dragOver(event) {
-    event.preventDefault();
-    if (!this._dragging) return;
-    event.dataTransfer.dropEffect = 'move';
-
-    const target = event.target.closest('[data-bo--question-list-target="item"]');
-    if (!target || target === this._dragging) return;
-
-    const rect = target.getBoundingClientRect();
-    const insertBefore = event.clientY > rect.top + rect.height / 2 ? target.nextSibling : target;
-
-    if (!this._placeholder) {
-      this._placeholder = document.createElement('div');
-      this._placeholder.className = 'bg-primary rounded mb-2';
-      this._placeholder.style.height = '3px';
-    }
-
-    if (this._placeholder.nextSibling !== insertBefore) {
-      this.listTarget.insertBefore(this._placeholder, insertBefore);
-    }
-  }
-
-  dragLeave(event) {
-    if (!event.relatedTarget || !this.listTarget.contains(event.relatedTarget)) {
-      this._removePlaceholder();
-    }
-  }
-
-  async drop(event) {
-    event.preventDefault();
-    if (!this._dragging || !this._placeholder || this._locked) return;
-    this.listTarget.insertBefore(this._dragging, this._placeholder);
-    this._removePlaceholder();
-    await this._persistOrder();
-  }
-
-  _removePlaceholder() {
-    if (this._placeholder) {
-      this._placeholder.remove();
-      this._placeholder = null;
-    }
-  }
-
-  _setStatus(state) {
-    if (!this.hasStatusTarget) return;
-    const el = this.statusTarget;
-    el.classList.remove('d-none', 'text-bg-success', 'text-bg-danger', 'text-bg-warning');
-    if (state === 'saving') {
-      el.classList.add('text-bg-warning');
-      el.textContent = '…';
-    } else if (state === 'saved') {
-      el.classList.add('text-bg-success');
-      el.textContent = this.savedLabelValue || 'Saved';
-    } else if (state === 'error') {
-      el.classList.add('text-bg-danger');
-      el.textContent = this.errorLabelValue || 'Error';
-    }
-  }
-
-  async _persistOrder() {
-    this._setStatus('saving');
-
-    const params = new URLSearchParams();
-    params.append('_token', this.csrfValue);
-    this.itemTargets.forEach((el, i) => {
-      params.append('ordering[]', el.dataset.questionId);
-      const numberEl = el.querySelector('[data-question-number]');
-      if (numberEl) numberEl.textContent = String(i + 1);
-    });
-
-    for (let attempt = 0; attempt < 2; attempt++) {
-      try {
-        const res = await fetch(this.reorderUrlValue, {method: 'POST', body: params});
-        if (res.ok) {
-          this._setStatus('saved');
-          return;
-        }
-      } catch {
-        // network error — retry on first attempt
-      }
-    }
-
-    this._locked = true;
-    this._setStatus('error');
-
-    const alert = document.createElement('div');
-    alert.className = 'alert alert-danger alert-dismissible mt-3';
-    alert.setAttribute('role', 'alert');
-    const hint = this.errorHintValue || 'Refresh the page to try again.';
-    alert.innerHTML = `${this.errorLabelValue || 'Error saving order'} &mdash; ${hint} <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>`;
-    this.listTarget.after(alert);
-  }
-}

assets/controllers/bo/question_list_controller.ts

@@ -0,0 +1,161 @@
+import { Controller } from '@hotwired/stimulus';
+
+type Status = 'saving' | 'saved' | 'error';
+
+export default class extends Controller {
+    static targets = ['list', 'item', 'status'];
+    static values = {
+        reorderUrl: String,
+        csrf: String,
+        savedLabel: String,
+        errorLabel: String,
+        errorHint: String,
+    };
+
+    declare readonly listTarget: HTMLElement;
+    declare readonly itemTargets: HTMLElement[];
+    declare readonly statusTarget: HTMLElement;
+    declare readonly hasStatusTarget: boolean;
+
+    declare readonly reorderUrlValue: string;
+    declare readonly csrfValue: string;
+    declare readonly savedLabelValue: string;
+    declare readonly errorLabelValue: string;
+    declare readonly errorHintValue: string;
+
+    _locked = false;
+    _dragging: HTMLElement | null = null;
+    _placeholder: HTMLDivElement | null = null;
+
+    connect(): void {
+        this._locked = false;
+    }
+
+    dragStart(event: DragEvent): void {
+        const item = (event.currentTarget as HTMLElement).closest<HTMLElement>(
+            '[data-bo--question-list-target="item"]',
+        );
+        this._dragging = item;
+        event.dataTransfer!.effectAllowed = 'move';
+        setTimeout(() => item?.classList.add('opacity-50'), 0);
+    }
+
+    dragEnd(event: DragEvent): void {
+        const item = (event.currentTarget as HTMLElement).closest<HTMLElement>(
+            '[data-bo--question-list-target="item"]',
+        );
+        item?.classList.remove('opacity-50');
+        this._dragging = null;
+        this._removePlaceholder();
+    }
+
+    dragOver(event: DragEvent): void {
+        event.preventDefault();
+        if (!this._dragging) return;
+        event.dataTransfer!.dropEffect = 'move';
+
+        const target = (event.target as HTMLElement).closest<HTMLElement>(
+            '[data-bo--question-list-target="item"]',
+        );
+        if (!target || target === this._dragging) return;
+
+        const rect = target.getBoundingClientRect();
+        const insertBefore = event.clientY > rect.top + rect.height / 2
+            ? target.nextSibling
+            : target;
+
+        if (!this._placeholder) {
+            this._placeholder = document.createElement('div');
+            this._placeholder.className = 'bg-primary rounded mb-2';
+            this._placeholder.style.height = '3px';
+        }
+
+        if (this._placeholder.nextSibling !== insertBefore) {
+            this.listTarget.insertBefore(this._placeholder, insertBefore);
+        }
+    }
+
+    dragLeave(event: DragEvent): void {
+        if (
+            !event.relatedTarget ||
+            !this.listTarget.contains(event.relatedTarget as Node)
+        ) {
+            this._removePlaceholder();
+        }
+    }
+
+    async drop(event: DragEvent): Promise<void> {
+        event.preventDefault();
+        if (!this._dragging || !this._placeholder || this._locked) return;
+        this.listTarget.insertBefore(this._dragging, this._placeholder);
+        this._removePlaceholder();
+        await this._persistOrder();
+    }
+
+    _removePlaceholder(): void {
+        if (this._placeholder) {
+            this._placeholder.remove();
+            this._placeholder = null;
+        }
+    }
+
+    _setStatus(state: Status): void {
+        if (!this.hasStatusTarget) return;
+        const el = this.statusTarget;
+        el.classList.remove(
+            'd-none',
+            'text-bg-success',
+            'text-bg-danger',
+            'text-bg-warning',
+        );
+        if (state === 'saving') {
+            el.classList.add('text-bg-warning');
+            el.textContent = '…';
+        } else if (state === 'saved') {
+            el.classList.add('text-bg-success');
+            el.textContent = this.savedLabelValue || 'Saved';
+        } else if (state === 'error') {
+            el.classList.add('text-bg-danger');
+            el.textContent = this.errorLabelValue || 'Error';
+        }
+    }
+
+    async _persistOrder(): Promise<void> {
+        this._setStatus('saving');
+
+        const params = new URLSearchParams();
+        params.append('_token', this.csrfValue);
+        this.itemTargets.forEach((el, i) => {
+            params.append('ordering[]', el.dataset.questionId ?? '');
+            const numberEl = el.querySelector('[data-question-number]');
+            if (numberEl) numberEl.textContent = String(i + 1);
+        });
+
+        for (let attempt = 0; attempt < 2; attempt++) {
+            try {
+                const res = await fetch(this.reorderUrlValue, {
+                    method: 'POST',
+                    body: params,
+                });
+                if (res.ok) {
+                    this._setStatus('saved');
+                    return;
+                }
+            } catch {
+                // network error — retry on first attempt
+            }
+        }
+
+        this._locked = true;
+        this._setStatus('error');
+
+        const alert = document.createElement('div');
+        alert.className = 'alert alert-danger alert-dismissible mt-3';
+        alert.setAttribute('role', 'alert');
+        const hint = this.errorHintValue || 'Refresh the page to try again.';
+        alert.innerHTML = `${
+            this.errorLabelValue || 'Error saving order'
+        } &mdash; ${hint} <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>`;
+        this.listTarget.after(alert);
+    }
+}

assets/controllers/bo/question_list_controller_test.ts

@@ -0,0 +1,140 @@
+import { assertEquals } from '@std/assert';
+
+// Stimulus's Controller base class constructor only does `this.context = context`,
+// and target/value getters (listTarget, csrfValue, ...) are normally installed by
+// Application.register — since we construct the controller directly (no real
+// Stimulus app), they're assigned here as plain writable properties instead.
+class FakeClassList {
+    classes = new Set<string>();
+    add(...names: string[]) {
+        names.forEach((n) => this.classes.add(n));
+    }
+    remove(...names: string[]) {
+        names.forEach((n) => this.classes.delete(n));
+    }
+    contains(name: string) {
+        return this.classes.has(name);
+    }
+}
+
+function fakeElement() {
+    return {
+        classList: new FakeClassList(),
+        textContent: '',
+        after: () => {},
+        setAttribute: () => {},
+    };
+}
+
+// deno-lint-ignore no-explicit-any
+(globalThis as any).document = {
+    createElement: () => ({
+        ...fakeElement(),
+        innerHTML: '',
+    }),
+};
+
+const { default: QuestionListController } = await import(
+    './question_list_controller.ts'
+);
+
+// deno-lint-ignore no-explicit-any
+function makeController(overrides: Record<string, unknown> = {}): any {
+    const controller = new QuestionListController({} as never);
+    return Object.assign(controller, {
+        listTarget: fakeElement(),
+        itemTargets: [],
+        hasStatusTarget: true,
+        statusTarget: fakeElement(),
+        csrfValue: 'csrf-token',
+        reorderUrlValue: '/reorder',
+        savedLabelValue: 'Saved',
+        errorLabelValue: 'Error',
+        errorHintValue: 'Refresh the page.',
+        ...overrides,
+    });
+}
+
+Deno.test('_setStatus renders the saving state', () => {
+    const controller = makeController();
+    controller._setStatus('saving');
+    assertEquals(
+        controller.statusTarget.classList.contains('text-bg-warning'),
+        true,
+    );
+    assertEquals(controller.statusTarget.textContent, '…');
+});
+
+Deno.test('_setStatus renders the saved state with the configured label', () => {
+    const controller = makeController();
+    controller._setStatus('saved');
+    assertEquals(
+        controller.statusTarget.classList.contains('text-bg-success'),
+        true,
+    );
+    assertEquals(controller.statusTarget.textContent, 'Saved');
+});
+
+Deno.test('_setStatus is a no-op when there is no status target', () => {
+    const controller = makeController({ hasStatusTarget: false });
+    controller._setStatus('saving');
+    assertEquals(controller.statusTarget.textContent, '');
+});
+
+Deno.test('_persistOrder posts the item ordering and reports success', async () => {
+    const numberEl = { textContent: '' };
+    const item = {
+        dataset: { questionId: '42' },
+        querySelector: () => numberEl,
+    };
+    const controller = makeController({ itemTargets: [item] });
+
+    let requestBody: URLSearchParams | undefined;
+    globalThis.fetch = ((_url: string, init: RequestInit) => {
+        requestBody = init.body as URLSearchParams;
+        return Promise.resolve({ ok: true } as Response);
+    }) as typeof fetch;
+
+    await controller._persistOrder();
+
+    assertEquals(controller._locked, false);
+    assertEquals(
+        controller.statusTarget.classList.contains('text-bg-success'),
+        true,
+    );
+    assertEquals(numberEl.textContent, '1');
+    assertEquals(requestBody?.get('_token'), 'csrf-token');
+    assertEquals(requestBody?.get('ordering[]'), '42');
+});
+
+Deno.test('_persistOrder retries once, then locks and shows an error after repeated failure', async () => {
+    const controller = makeController();
+    let calls = 0;
+    globalThis.fetch = (() => {
+        calls++;
+        return Promise.resolve({ ok: false } as Response);
+    }) as typeof fetch;
+
+    await controller._persistOrder();
+
+    assertEquals(calls, 2);
+    assertEquals(controller._locked, true);
+    assertEquals(
+        controller.statusTarget.classList.contains('text-bg-danger'),
+        true,
+    );
+});
+
+Deno.test('_persistOrder treats a network error the same as a failed response', async () => {
+    const controller = makeController();
+    globalThis.fetch =
+        (() => Promise.reject(new Error('network down'))) as typeof fetch;
+
+    await controller._persistOrder();
+
+    assertEquals(controller._locked, true);
+    assertEquals(
+        controller.statusTarget.classList.contains('text-bg-danger'),
+        true,
+    );
+});

assets/controllers/bo/quiz_controller.js

@@ -1,28 +0,0 @@
-import {Controller} from '@hotwired/stimulus';
-import {Tooltip, Modal} from 'bootstrap';
-
-export default class extends Controller {
-  static targets = ['clearModal', 'deleteModal'];
-
-  connect() {
-    this.tooltips = [];
-    const tooltipTriggerList = this.element.querySelectorAll('[data-bs-toggle="tooltip"]');
-    [...tooltipTriggerList].forEach(tooltipTriggerEl => {
-      this.tooltips.push(Tooltip.getOrCreateInstance(tooltipTriggerEl));
-    });
-  }
-
-  disconnect() {
-    this.tooltips.forEach(tooltip => tooltip.dispose());
-  }
-
-  clearQuiz() {
-    const modal = Modal.getOrCreateInstance(this.clearModalTarget);
-    modal.show();
-  }
-
-  deleteQuiz() {
-    const modal = Modal.getOrCreateInstance(this.deleteModalTarget);
-    modal.show();
-  }
-}

assets/controllers/bo/quiz_controller.ts

@@ -0,0 +1,35 @@
+import { Controller } from '@hotwired/stimulus';
+import { Modal, Tooltip } from 'bootstrap';
+
+export default class extends Controller {
+    static targets = ['clearModal', 'deleteModal'];
+
+    declare readonly clearModalTarget: HTMLElement;
+    declare readonly deleteModalTarget: HTMLElement;
+
+    tooltips: Tooltip[] = [];
+
+    connect(): void {
+        this.tooltips = [];
+        const tooltipTriggerList = this.element.querySelectorAll(
+            '[data-bs-toggle="tooltip"]',
+        );
+        [...tooltipTriggerList].forEach((tooltipTriggerEl) => {
+            this.tooltips.push(Tooltip.getOrCreateInstance(tooltipTriggerEl));
+        });
+    }
+
+    disconnect(): void {
+        this.tooltips.forEach((tooltip) => tooltip.dispose());
+    }
+
+    clearQuiz(): void {
+        const modal = Modal.getOrCreateInstance(this.clearModalTarget);
+        modal.show();
+    }
+
+    deleteQuiz(): void {
+        const modal = Modal.getOrCreateInstance(this.deleteModalTarget);
+        modal.show();
+    }
+}

assets/controllers/csrf_protection_controller.js

@@ -1,81 +0,0 @@
-const nameCheck = /^[-_a-zA-Z0-9]{4,22}$/;
-const tokenCheck = /^[-_/+a-zA-Z0-9]{24,}$/;
-
-// Generate and double-submit a CSRF token in a form field and a cookie, as defined by Symfony's SameOriginCsrfTokenManager
-// Use `form.requestSubmit()` to ensure that the submit event is triggered. Using `form.submit()` will not trigger the event
-// and thus this event-listener will not be executed.
-document.addEventListener('submit', function (event) {
-    generateCsrfToken(event.target);
-}, true);
-
-// When @hotwired/turbo handles form submissions, send the CSRF token in a header in addition to a cookie
-// The `framework.csrf_protection.check_header` config option needs to be enabled for the header to be checked
-document.addEventListener('turbo:submit-start', function (event) {
-    const h = generateCsrfHeaders(event.detail.formSubmission.formElement);
-    Object.keys(h).map(function (k) {
-        event.detail.formSubmission.fetchRequest.headers[k] = h[k];
-    });
-});
-
-// When @hotwired/turbo handles form submissions, remove the CSRF cookie once a form has been submitted
-document.addEventListener('turbo:submit-end', function (event) {
-    removeCsrfToken(event.detail.formSubmission.formElement);
-});
-
-export function generateCsrfToken (formElement) {
-    const csrfField = formElement.querySelector('input[data-controller="csrf-protection"], input[name="_csrf_token"]');
-
-    if (!csrfField) {
-        return;
-    }
-
-    let csrfCookie = csrfField.getAttribute('data-csrf-protection-cookie-value');
-    let csrfToken = csrfField.value;
-
-    if (!csrfCookie && nameCheck.test(csrfToken)) {
-        csrfField.setAttribute('data-csrf-protection-cookie-value', csrfCookie = csrfToken);
-        csrfField.defaultValue = csrfToken = btoa(String.fromCharCode.apply(null, (window.crypto || window.msCrypto).getRandomValues(new Uint8Array(18))));
-    }
-    csrfField.dispatchEvent(new Event('change', { bubbles: true }));
-
-    if (csrfCookie && tokenCheck.test(csrfToken)) {
-        const cookie = csrfCookie + '_' + csrfToken + '=' + csrfCookie + '; path=/; samesite=strict';
-        document.cookie = window.location.protocol === 'https:' ? '__Host-' + cookie + '; secure' : cookie;
-    }
-}
-
-export function generateCsrfHeaders (formElement) {
-    const headers = {};
-    const csrfField = formElement.querySelector('input[data-controller="csrf-protection"], input[name="_csrf_token"]');
-
-    if (!csrfField) {
-        return headers;
-    }
-
-    const csrfCookie = csrfField.getAttribute('data-csrf-protection-cookie-value');
-
-    if (tokenCheck.test(csrfField.value) && nameCheck.test(csrfCookie)) {
-        headers[csrfCookie] = csrfField.value;
-    }
-
-    return headers;
-}
-
-export function removeCsrfToken (formElement) {
-    const csrfField = formElement.querySelector('input[data-controller="csrf-protection"], input[name="_csrf_token"]');
-
-    if (!csrfField) {
-        return;
-    }
-
-    const csrfCookie = csrfField.getAttribute('data-csrf-protection-cookie-value');
-
-    if (tokenCheck.test(csrfField.value) && nameCheck.test(csrfCookie)) {
-        const cookie = csrfCookie + '_' + csrfField.value + '=0; path=/; samesite=strict; max-age=0';
-
-        document.cookie = window.location.protocol === 'https:' ? '__Host-' + cookie + '; secure' : cookie;
-    }
-}
-
-/* stimulusFetch: 'lazy' */
-export default 'csrf-protection-controller';

assets/controllers/csrf_protection_controller.ts

@@ -0,0 +1,129 @@
+const nameCheck = /^[-_a-zA-Z0-9]{4,22}$/;
+const tokenCheck = /^[-_/+a-zA-Z0-9]{24,}$/;
+
+interface TurboSubmitEventDetail {
+    formSubmission: {
+        formElement: HTMLFormElement;
+        fetchRequest: { headers: Record<string, string> };
+    };
+}
+
+const CSRF_FIELD_SELECTOR =
+    'input[data-controller="csrf-protection"], input[name="_csrf_token"]';
+
+// Generate and double-submit a CSRF token in a form field and a cookie, as defined by Symfony's SameOriginCsrfTokenManager
+// Use `form.requestSubmit()` to ensure that the submit event is triggered. Using `form.submit()` will not trigger the event
+// and thus this event-listener will not be executed.
+document.addEventListener('submit', function (event) {
+    generateCsrfToken(event.target as HTMLFormElement);
+}, true);
+
+// When @hotwired/turbo handles form submissions, send the CSRF token in a header in addition to a cookie
+// The `framework.csrf_protection.check_header` config option needs to be enabled for the header to be checked
+document.addEventListener('turbo:submit-start', function (event) {
+    const detail = (event as CustomEvent<TurboSubmitEventDetail>).detail;
+    const h = generateCsrfHeaders(detail.formSubmission.formElement);
+    Object.keys(h).forEach(function (k) {
+        detail.formSubmission.fetchRequest.headers[k] = h[k];
+    });
+});
+
+// When @hotwired/turbo handles form submissions, remove the CSRF cookie once a form has been submitted
+document.addEventListener('turbo:submit-end', function (event) {
+    const detail = (event as CustomEvent<TurboSubmitEventDetail>).detail;
+    removeCsrfToken(detail.formSubmission.formElement);
+});
+
+export function generateCsrfToken(formElement: HTMLFormElement): void {
+    const csrfField = formElement.querySelector<HTMLInputElement>(
+        CSRF_FIELD_SELECTOR,
+    );
+
+    if (!csrfField) {
+        return;
+    }
+
+    let csrfCookie = csrfField.getAttribute(
+        'data-csrf-protection-cookie-value',
+    );
+    let csrfToken = csrfField.value;
+
+    if (!csrfCookie && nameCheck.test(csrfToken)) {
+        csrfField.setAttribute(
+            'data-csrf-protection-cookie-value',
+            csrfCookie = csrfToken,
+        );
+        csrfField.defaultValue = csrfToken = btoa(
+            String.fromCharCode.apply(
+                null,
+                Array.from(
+                    (window.crypto ||
+                        (window as unknown as { msCrypto: Crypto }).msCrypto)
+                        .getRandomValues(new Uint8Array(18)),
+                ),
+            ),
+        );
+    }
+    csrfField.dispatchEvent(new Event('change', { bubbles: true }));
+
+    if (csrfCookie && tokenCheck.test(csrfToken)) {
+        const cookie = csrfCookie + '_' + csrfToken + '=' + csrfCookie +
+            '; path=/; samesite=strict';
+        document.cookie = window.location.protocol === 'https:'
+            ? '__Host-' + cookie + '; secure'
+            : cookie;
+    }
+}
+
+export function generateCsrfHeaders(
+    formElement: HTMLFormElement,
+): Record<string, string> {
+    const headers: Record<string, string> = {};
+    const csrfField = formElement.querySelector<HTMLInputElement>(
+        CSRF_FIELD_SELECTOR,
+    );
+
+    if (!csrfField) {
+        return headers;
+    }
+
+    const csrfCookie = csrfField.getAttribute(
+        'data-csrf-protection-cookie-value',
+    );
+
+    if (
+        tokenCheck.test(csrfField.value) && nameCheck.test(String(csrfCookie))
+    ) {
+        headers[String(csrfCookie)] = csrfField.value;
+    }
+
+    return headers;
+}
+
+export function removeCsrfToken(formElement: HTMLFormElement): void {
+    const csrfField = formElement.querySelector<HTMLInputElement>(
+        CSRF_FIELD_SELECTOR,
+    );
+
+    if (!csrfField) {
+        return;
+    }
+
+    const csrfCookie = csrfField.getAttribute(
+        'data-csrf-protection-cookie-value',
+    );
+
+    if (
+        tokenCheck.test(csrfField.value) && nameCheck.test(String(csrfCookie))
+    ) {
+        const cookie = String(csrfCookie) + '_' + csrfField.value +
+            '=0; path=/; samesite=strict; max-age=0';
+
+        document.cookie = window.location.protocol === 'https:'
+            ? '__Host-' + cookie + '; secure'
+            : cookie;
+    }
+}
+
+/* stimulusFetch: 'lazy' */
+export default 'csrf-protection-controller';

assets/controllers/csrf_protection_controller_test.ts

@@ -0,0 +1,119 @@
+import { assertEquals, assertMatch } from '@std/assert';
+
+// The module under test registers `document.addEventListener(...)` calls at
+// import time and reads `window.location`/`window.crypto`, so a minimal
+// `document`/`window` stub must exist in the global scope *before* the module
+// is imported. Deno has no browser DOM, and the actual surface these
+// functions touch on a form/input is narrow (getAttribute/setAttribute/value/
+// dispatchEvent), so hand-built fakes are used instead of a full DOM polyfill.
+let cookieJar = '';
+// deno-lint-ignore no-explicit-any
+(globalThis as any).document = {
+    addEventListener: () => {},
+    get cookie() {
+        return cookieJar;
+    },
+    set cookie(value: string) {
+        cookieJar += (cookieJar ? '; ' : '') + value;
+    },
+};
+// deno-lint-ignore no-explicit-any
+(globalThis as any).window = {
+    location: { protocol: 'http:' },
+    crypto: globalThis.crypto,
+};
+
+const { generateCsrfHeaders, generateCsrfToken, removeCsrfToken } =
+    await import(
+        './csrf_protection_controller.ts'
+    );
+
+function fakeField(attributes: Record<string, string> = {}, value = '') {
+    const store = new Map(Object.entries(attributes));
+    return {
+        getAttribute: (name: string) => store.get(name) ?? null,
+        setAttribute: (name: string, val: string) => {
+            store.set(name, val);
+        },
+        value,
+        defaultValue: value,
+        dispatchEvent: () => true,
+    };
+}
+
+// deno-lint-ignore no-explicit-any
+function fakeForm(field: ReturnType<typeof fakeField> | null): any {
+    return { querySelector: () => field };
+}
+
+Deno.test('generateCsrfToken does nothing when the form has no csrf field', () => {
+    cookieJar = '';
+    generateCsrfToken(fakeForm(null));
+    assertEquals(cookieJar, '');
+});
+
+Deno.test('generateCsrfToken generates a token and cookie on first use', () => {
+    cookieJar = '';
+    const field = fakeField({}, 'my_field_name');
+
+    generateCsrfToken(fakeForm(field));
+
+    assertEquals(
+        field.getAttribute('data-csrf-protection-cookie-value'),
+        'my_field_name',
+    );
+    assertMatch(field.defaultValue, /^[-_/+a-zA-Z0-9]{24,}$/);
+    assertMatch(cookieJar, /my_field_name_[-_/+a-zA-Z0-9]{24,}=my_field_name/);
+});
+
+Deno.test('generateCsrfToken keeps an existing valid token/cookie pair unchanged', () => {
+    cookieJar = '';
+    const token = 'a'.repeat(24);
+    const field = fakeField({
+        'data-csrf-protection-cookie-value': 'existing_name',
+    }, token);
+
+    generateCsrfToken(fakeForm(field));
+
+    assertEquals(field.value, token);
+    assertMatch(cookieJar, new RegExp(`existing_name_${token}=existing_name`));
+});
+
+Deno.test('generateCsrfHeaders returns empty headers without a csrf field', () => {
+    assertEquals(generateCsrfHeaders(fakeForm(null)), {});
+});
+
+Deno.test('generateCsrfHeaders returns the cookie-name/token header when both are valid', () => {
+    const token = 'b'.repeat(24);
+    const field = fakeField({
+        'data-csrf-protection-cookie-value': 'field_name',
+    }, token);
+
+    assertEquals(generateCsrfHeaders(fakeForm(field)), { field_name: token });
+});
+
+Deno.test('generateCsrfHeaders omits the header when the token is too short', () => {
+    const field = fakeField({
+        'data-csrf-protection-cookie-value': 'field_name',
+    }, 'too-short');
+
+    assertEquals(generateCsrfHeaders(fakeForm(field)), {});
+});
+
+Deno.test('removeCsrfToken expires the cookie for a valid token/cookie pair', () => {
+    cookieJar = '';
+    const token = 'c'.repeat(24);
+    const field = fakeField({
+        'data-csrf-protection-cookie-value': 'field_name',
+    }, token);
+
+    removeCsrfToken(fakeForm(field));
+
+    assertMatch(cookieJar, new RegExp(`field_name_${token}=0`));
+});
+
+Deno.test('removeCsrfToken does nothing without a csrf field', () => {
+    cookieJar = '';
+    removeCsrfToken(fakeForm(null));
+    assertEquals(cookieJar, '');
+});

assets/controllers/elimination_controller.js

@@ -1,14 +0,0 @@
-import {Controller} from '@hotwired/stimulus';
-
-export default class extends Controller {
-  next() {
-    const currentUrl = new URL(window.location.href);
-    const pathParts = currentUrl.pathname.split('/');
-    // Remove the last segment
-    pathParts.pop();
-    // Update the pathname
-    currentUrl.pathname = pathParts.join('/');
-    // Navigate
-    window.location.href = currentUrl.href;
-  }
-}

assets/controllers/elimination_controller.ts

@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    next(): void {
+        const currentUrl = new URL(window.location.href);
+        const pathParts = currentUrl.pathname.split('/');
+        // Remove the last segment
+        pathParts.pop();
+        // Update the pathname
+        currentUrl.pathname = pathParts.join('/');
+        // Navigate
+        window.location.href = currentUrl.href;
+    }
+}

assets/controllers/fullscreen_controller.js

@@ -1,40 +0,0 @@
-import {Controller} from '@hotwired/stimulus';
-
-const STORAGE_KEY = 'tvdt-fullscreen';
-
-export default class extends Controller {
-  connect() {
-    this.onFullscreenChange = this.onFullscreenChange.bind(this);
-    document.addEventListener('fullscreenchange', this.onFullscreenChange);
-    this.syncState();
-
-    if (sessionStorage.getItem(STORAGE_KEY) === '1' && !document.fullscreenElement) {
-      this.request();
-    }
-  }
-
-  disconnect() {
-    document.removeEventListener('fullscreenchange', this.onFullscreenChange);
-  }
-
-  toggle() {
-    if (document.fullscreenElement) {
-      document.exitFullscreen();
-    } else {
-      this.request();
-    }
-  }
-
-  request() {
-    document.documentElement.requestFullscreen().catch(() => {});
-  }
-
-  onFullscreenChange() {
-    sessionStorage.setItem(STORAGE_KEY, document.fullscreenElement ? '1' : '0');
-    this.syncState();
-  }
-
-  syncState() {
-    document.documentElement.classList.toggle('is-fullscreen', Boolean(document.fullscreenElement));
-  }
-}

assets/controllers/fullscreen_controller.ts

@@ -0,0 +1,51 @@
+import { Controller } from '@hotwired/stimulus';
+
+const STORAGE_KEY = 'tvdt-fullscreen';
+
+export default class extends Controller {
+    connect(): void {
+        document.addEventListener('fullscreenchange', this.onFullscreenChange);
+        this.syncState();
+
+        if (
+            sessionStorage.getItem(STORAGE_KEY) === '1' &&
+            !document.fullscreenElement
+        ) {
+            this.request();
+        }
+    }
+
+    disconnect(): void {
+        document.removeEventListener(
+            'fullscreenchange',
+            this.onFullscreenChange,
+        );
+    }
+
+    toggle(): void {
+        if (document.fullscreenElement) {
+            document.exitFullscreen();
+        } else {
+            this.request();
+        }
+    }
+
+    request(): void {
+        document.documentElement.requestFullscreen().catch(() => {});
+    }
+
+    onFullscreenChange = (): void => {
+        sessionStorage.setItem(
+            STORAGE_KEY,
+            document.fullscreenElement ? '1' : '0',
+        );
+        this.syncState();
+    };
+
+    syncState(): void {
+        document.documentElement.classList.toggle(
+            'is-fullscreen',
+            Boolean(document.fullscreenElement),
+        );
+    }
+}

assets/controllers/fullscreen_controller_test.ts

@@ -0,0 +1,75 @@
+import { assertEquals } from '@std/assert';
+
+// Stimulus's Controller base class constructor only does `this.context = context`
+// (see @hotwired/stimulus dist/stimulus.js), and none of this controller's methods
+// touch Stimulus-specific getters (element/scope/targets), so a plain `{}` context
+// is enough to construct a real instance. `document`/`sessionStorage` are stubbed
+// since Deno has no browser DOM.
+class FakeClassList {
+    classes = new Set<string>();
+    toggle(name: string, force?: boolean) {
+        const shouldAdd = force ?? !this.classes.has(name);
+        if (shouldAdd) this.classes.add(name);
+        else this.classes.delete(name);
+    }
+    contains(name: string) {
+        return this.classes.has(name);
+    }
+}
+
+const classList = new FakeClassList();
+let fullscreenElement: unknown = null;
+const sessionStore = new Map<string, string>();
+
+// deno-lint-ignore no-explicit-any
+(globalThis as any).document = {
+    documentElement: { classList },
+    get fullscreenElement() {
+        return fullscreenElement;
+    },
+    addEventListener: () => {},
+    removeEventListener: () => {},
+};
+// Deno defines a native `sessionStorage` accessor on globalThis (get/set pair), so a
+// plain assignment would just call through to it instead of replacing it — redefine
+// the property outright.
+Object.defineProperty(globalThis, 'sessionStorage', {
+    value: {
+        getItem: (key: string) => sessionStore.get(key) ?? null,
+        setItem: (key: string, value: string) => sessionStore.set(key, value),
+    },
+    configurable: true,
+});
+
+const { default: FullscreenController } = await import(
+    './fullscreen_controller.ts'
+);
+
+// deno-lint-ignore no-explicit-any
+function makeController(): any {
+    return new FullscreenController({} as never);
+}
+
+Deno.test('syncState adds is-fullscreen when a fullscreen element is set', () => {
+    fullscreenElement = { tagName: 'HTML' };
+    makeController().syncState();
+    assertEquals(classList.contains('is-fullscreen'), true);
+});
+
+Deno.test('syncState removes is-fullscreen when there is no fullscreen element', () => {
+    fullscreenElement = null;
+    makeController().syncState();
+    assertEquals(classList.contains('is-fullscreen'), false);
+});
+
+Deno.test('onFullscreenChange persists the fullscreen state and syncs classes', () => {
+    fullscreenElement = { tagName: 'HTML' };
+    makeController().onFullscreenChange();
+    assertEquals(sessionStore.get('tvdt-fullscreen'), '1');
+    assertEquals(classList.contains('is-fullscreen'), true);
+
+    fullscreenElement = null;
+    makeController().onFullscreenChange();
+    assertEquals(sessionStore.get('tvdt-fullscreen'), '0');
+    assertEquals(classList.contains('is-fullscreen'), false);
+});

assets/quiz.ts

@@ -1,4 +1,4 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './styles/quiz.scss';
-import './stimulus.js';
-import './bootstrap.js';
+import './stimulus.ts';
+import './bootstrap.ts';

assets/stimulus.ts

@@ -1,3 +1,3 @@
 import { startStimulusApp } from '@symfony/stimulus-bundle';
 
-const app = startStimulusApp();
+startStimulusApp();

assets/types/global.d.ts

@@ -0,0 +1,11 @@
+// Ambient declarations for the parts of the AssetMapper toolchain that Deno's
+// module resolution doesn't otherwise understand: CSS/SCSS side-effect imports
+// (handled by AssetMapper at build time, not a JS module) and the Symfony
+// stimulus-bundle loader (a local vendor/ file, not an npm package).
+
+declare module '*.css';
+declare module '*.scss';
+
+declare module '@symfony/stimulus-bundle' {
+    export function startStimulusApp(): unknown;
+}

composer.json

@@ -17,6 +17,7 @@
         "phpdocumentor/reflection-docblock": "^6.0.3",
         "phpoffice/phpspreadsheet": "^5.5",
         "phpstan/phpdoc-parser": "^2.3.2",
+        "sensiolabs/typescript-bundle": "^0.2.2",
         "sentry/sentry-symfony": "^5.9.0",
         "stof/doctrine-extensions-bundle": "^1.15.3",
         "symfony/asset": "8.1.*",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "ccae654dd9c952e8920d9cb9c0f35ff5",
+    "content-hash": "cca03585c291226d36bbeabf57a08bec",
     "packages": [
         {
             "name": "composer/pcre",
@@ -2751,6 +2751,62 @@
             },
             "time": "2019-03-08T08:55:37+00:00"
         },
+        {
+            "name": "sensiolabs/typescript-bundle",
+            "version": "v0.2.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sensiolabs/AssetMapperTypeScriptBundle.git",
+                "reference": "b4a498a2b1dd699fd4ea95ae9dfa30ebe77cc8ce"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sensiolabs/AssetMapperTypeScriptBundle/zipball/b4a498a2b1dd699fd4ea95ae9dfa30ebe77cc8ce",
+                "reference": "b4a498a2b1dd699fd4ea95ae9dfa30ebe77cc8ce",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "symfony/asset-mapper": "^6.3|^7.0|^8.0",
+                "symfony/console": "^6.3|^7.0|^8.0",
+                "symfony/http-client": "^6.3|^7.0|^8.0",
+                "symfony/process": "^6.3|^7.0|^8.0"
+            },
+            "require-dev": {
+                "phpstan/phpstan": "^1",
+                "phpstan/phpstan-symfony": "^1.3",
+                "phpunit/phpunit": "^10.5",
+                "symfony/filesystem": "^6.3|^7.0|^8.0",
+                "symfony/framework-bundle": "^6.3|^7.0|^8.0"
+            },
+            "type": "symfony-bundle",
+            "autoload": {
+                "psr-4": {
+                    "Sensiolabs\\TypeScriptBundle\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Maelan LE BORGNE",
+                    "homepage": "https://github.com/maelanleborgne"
+                }
+            ],
+            "description": "TypeScript support for Symfony + AssetMapper",
+            "homepage": "https://github.com/sensiolabs/AssetMapperTypeScriptBundle",
+            "keywords": [
+                "asset-mapper",
+                "typescript"
+            ],
+            "support": {
+                "issues": "https://github.com/sensiolabs/AssetMapperTypeScriptBundle/issues",
+                "source": "https://github.com/sensiolabs/AssetMapperTypeScriptBundle/tree/v0.2.2"
+            },
+            "time": "2025-08-28T10:10:44+00:00"
+        },
         {
             "name": "sentry/sentry",
             "version": "4.29.0",

config/bundles.php

@@ -6,6 +6,7 @@ use DAMA\DoctrineTestBundle\DAMADoctrineTestBundle;
 use Doctrine\Bundle\DoctrineBundle\DoctrineBundle;
 use Doctrine\Bundle\FixturesBundle\DoctrineFixturesBundle;
 use Doctrine\Bundle\MigrationsBundle\DoctrineMigrationsBundle;
+use Sensiolabs\TypeScriptBundle\SensiolabsTypeScriptBundle;
 use Sentry\SentryBundle\SentryBundle;
 use Stof\DoctrineExtensionsBundle\StofDoctrineExtensionsBundle;
 use Symfony\Bundle\FrameworkBundle\FrameworkBundle;
@@ -38,4 +39,5 @@ return [
     DAMADoctrineTestBundle::class => ['test' => true],
     StofDoctrineExtensionsBundle::class => ['all' => true],
     SymfonyCastsResetPasswordBundle::class => ['all' => true],
+    SensiolabsTypeScriptBundle::class => ['all' => true],
 ];

config/packages/asset_mapper.yaml

@@ -6,8 +6,12 @@ framework:
         excluded_patterns:
             - '*/assets/styles/_*.scss'
             - '*/assets/styles/**/_*.scss'
+            - '*/assets/**/*_test.ts'
+            - '*/assets/types/*.d.ts'
         missing_import_mode: strict
 
+sensiolabs_typescript:
+    source_dir: ['%kernel.project_dir%/assets']
 
 when@prod:
     framework:

config/reference.php

@@ -1496,6 +1496,13 @@ use Symfony\Component\Config\Loader\ParamConfigurator as Param;
  *     throttle_limit?: int|Param, // Another password reset cannot be made faster than this throttle time in seconds. // Default: 3600
  *     enable_garbage_collection?: bool|Param, // Enable/Disable automatic garbage collection. // Default: true
  * }
+ * @psalm-type SensiolabsTypescriptConfig = array{
+ *     source_dir?: list<scalar|Param|null>,
+ *     binary_download_dir?: scalar|Param|null, // The directory where the SWC binary will be downloaded // Default: "%kernel.project_dir%/var"
+ *     swc_binary?: scalar|Param|null, // The SWC binary to use // Default: null
+ *     swc_config_file?: scalar|Param|null, // Path to .swcrc configuration file to use // Default: "%kernel.project_dir%/.swcrc"
+ *     swc_version?: scalar|Param|null, // The SWC version to use // Default: "v1.3.92"
+ * }
  * @psalm-type ConfigType = array{
  *     imports?: ImportsConfig,
  *     parameters?: ParametersConfig,
@@ -1512,6 +1519,7 @@ use Symfony\Component\Config\Loader\ParamConfigurator as Param;
  *     turbo?: TurboConfig,
  *     stof_doctrine_extensions?: StofDoctrineExtensionsConfig,
  *     symfonycasts_reset_password?: SymfonycastsResetPasswordConfig,
+ *     sensiolabs_typescript?: SensiolabsTypescriptConfig,
  *     "when@dev"?: array{
  *         imports?: ImportsConfig,
  *         parameters?: ParametersConfig,
@@ -1531,6 +1539,7 @@ use Symfony\Component\Config\Loader\ParamConfigurator as Param;
  *         turbo?: TurboConfig,
  *         stof_doctrine_extensions?: StofDoctrineExtensionsConfig,
  *         symfonycasts_reset_password?: SymfonycastsResetPasswordConfig,
+ *         sensiolabs_typescript?: SensiolabsTypescriptConfig,
  *     },
  *     "when@prod"?: array{
  *         imports?: ImportsConfig,
@@ -1549,6 +1558,7 @@ use Symfony\Component\Config\Loader\ParamConfigurator as Param;
  *         turbo?: TurboConfig,
  *         stof_doctrine_extensions?: StofDoctrineExtensionsConfig,
  *         symfonycasts_reset_password?: SymfonycastsResetPasswordConfig,
+ *         sensiolabs_typescript?: SensiolabsTypescriptConfig,
  *     },
  *     "when@test"?: array{
  *         imports?: ImportsConfig,
@@ -1568,6 +1578,7 @@ use Symfony\Component\Config\Loader\ParamConfigurator as Param;
  *         dama_doctrine_test?: DamaDoctrineTestConfig,
  *         stof_doctrine_extensions?: StofDoctrineExtensionsConfig,
  *         symfonycasts_reset_password?: SymfonycastsResetPasswordConfig,
+ *         sensiolabs_typescript?: SensiolabsTypescriptConfig,
  *     },
  *     ...<string, ExtensionType|array{ // extra keys must follow the when@%env% pattern or match an extension alias
  *         imports?: ImportsConfig,

deno.json

@@ -0,0 +1,32 @@
+{
+    "compilerOptions": {
+        "lib": ["deno.window", "dom", "dom.iterable"],
+        "strict": true,
+        "noImplicitOverride": false,
+        "types": ["./assets/types/global.d.ts"]
+    },
+    "imports": {
+        "@hotwired/stimulus": "npm:@hotwired/stimulus@^3.2.2",
+        "@hotwired/turbo": "npm:@hotwired/turbo@^8.0.23",
+        "bootstrap": "npm:bootstrap@^5.3.8",
+        "@sentry/browser": "npm:@sentry/browser@^10.63.0",
+        "@std/assert": "jsr:@std/assert@^1.0.19"
+    },
+    "fmt": {
+        "include": ["assets/"],
+        "exclude": ["assets/vendor/", "assets/styles/", "assets/img/"],
+        "singleQuote": true,
+        "indentWidth": 4
+    },
+    "lint": {
+        "include": ["assets/"],
+        "exclude": ["assets/vendor/"],
+        "rules": {
+            "exclude": ["no-window", "no-window-prefix"]
+        }
+    },
+    "test": {
+        "include": ["assets/"],
+        "exclude": ["assets/vendor/"]
+    }
+}

deno.lock

@@ -0,0 +1,96 @@
+{
+  "version": "5",
+  "specifiers": {
+    "jsr:@std/assert@*": "1.0.19",
+    "jsr:@std/assert@^1.0.19": "1.0.19",
+    "jsr:@std/internal@^1.0.12": "1.0.14",
+    "npm:@hotwired/stimulus@^3.2.2": "3.2.2",
+    "npm:@hotwired/turbo@^8.0.23": "8.0.23",
+    "npm:@sentry/browser@^10.63.0": "10.65.0",
+    "npm:bootstrap@^5.3.8": "5.3.8_@popperjs+core@2.11.8"
+  },
+  "jsr": {
+    "@std/assert@1.0.19": {
+      "integrity": "eaada96ee120cb980bc47e040f82814d786fe8162ecc53c91d8df60b8755991e",
+      "dependencies": [
+        "jsr:@std/internal"
+      ]
+    },
+    "@std/internal@1.0.14": {
+      "integrity": "291516b3d4c35024d6ffbc0a9df5bf4c64116e05b50012cf846710152d2ffdf7"
+    }
+  },
+  "npm": {
+    "@hotwired/stimulus@3.2.2": {
+      "integrity": "sha512-eGeIqNOQpXoPAIP7tC1+1Yc1yl1xnwYqg+3mzqxyrbE5pg5YFBZcA6YoTiByJB6DKAEsiWtl6tjTJS4IYtbB7A=="
+    },
+    "@hotwired/turbo@8.0.23": {
+      "integrity": "sha512-GZ7cijxEZ6Ig71u7rD6LHaRv/wcE/hNsc+nEfiWOkLNqUgLOwo5MNGWOy5ZV9ZUDSiQx1no7YxjTNnT4O6//cQ=="
+    },
+    "@popperjs/core@2.11.8": {
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
+    },
+    "@sentry/browser-utils@10.65.0": {
+      "integrity": "sha512-4J0mkfNJAGUOkpg1ZggizyftFTn9N20b+Jl87UnWsDUkNG0Ic1l/FIzMPTVxXrAnhBGu0ULO0TFWMoQ5s3QtZw==",
+      "dependencies": [
+        "@sentry/conventions",
+        "@sentry/core"
+      ]
+    },
+    "@sentry/browser@10.65.0": {
+      "integrity": "sha512-XUDDsx0qxzeIlcOu1fDEqTcDl0eiOqghsgV+ReuuNP4jYjZ9kUQxE3rXWM5mlT1pBi4VaQ4FHqvQZZrRXy+oDw==",
+      "dependencies": [
+        "@sentry/browser-utils",
+        "@sentry/conventions",
+        "@sentry/core",
+        "@sentry/feedback",
+        "@sentry/replay",
+        "@sentry/replay-canvas"
+      ]
+    },
+    "@sentry/conventions@0.15.1": {
+      "integrity": "sha512-ZLP8bRdMON3prWE2tJyImuYscCxdcJeIPIhrOs/rgyFm3C1nCh1B6gdvPj3AZ5zW08oSFFCsq7T+tYEW3h8MNA=="
+    },
+    "@sentry/core@10.65.0": {
+      "integrity": "sha512-3aqtmM5NgNGo45BNaaBzi0LPQZAw//NEL4HKS5fXm12pJMa4KEkze8DEKnkTEIrGnWaOJKamecHKlnNg/Mqf/Q==",
+      "dependencies": [
+        "@sentry/conventions"
+      ]
+    },
+    "@sentry/feedback@10.65.0": {
+      "integrity": "sha512-ck8h7wgd3F3bYNk0v1OgohmyLBeXcKxqlfBJRtQq4k6KZUq+pXimOG7ckNguVMYjCo3PEfuG+ckKc21yqotKug==",
+      "dependencies": [
+        "@sentry/core"
+      ]
+    },
+    "@sentry/replay-canvas@10.65.0": {
+      "integrity": "sha512-A7X3RVk1Gk+knK8Ip/2EjejckNCLgCfRZo6eGlsy6qyz904KBpYmys1a0o7QkzFRjhIndjHAfcVxwt6jSLJlrQ==",
+      "dependencies": [
+        "@sentry/core",
+        "@sentry/replay"
+      ]
+    },
+    "@sentry/replay@10.65.0": {
+      "integrity": "sha512-aW988CcQBNArbOMzOFOziipHz6uQyXSa4i5CPWsu+nhVPTJHafosi5Lv9n6NM/icDX5e23VdnX6mZd8SyJuo8A==",
+      "dependencies": [
+        "@sentry/browser-utils",
+        "@sentry/core"
+      ]
+    },
+    "bootstrap@5.3.8_@popperjs+core@2.11.8": {
+      "integrity": "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==",
+      "dependencies": [
+        "@popperjs/core"
+      ]
+    }
+  },
+  "workspace": {
+    "dependencies": [
+      "jsr:@std/assert@^1.0.19",
+      "npm:@hotwired/stimulus@^3.2.2",
+      "npm:@hotwired/turbo@^8.0.23",
+      "npm:@sentry/browser@^10.63.0",
+      "npm:bootstrap@^5.3.8"
+    ]
+  }
+}

importmap.php

@@ -25,8 +25,8 @@ declare(strict_types=1);
  * }>
  */
 return [
-    'quiz' => ['path' => './assets/quiz.js', 'entrypoint' => true],
-    'backoffice' => ['path' => './assets/backoffice.js', 'entrypoint' => true],
+    'quiz' => ['path' => './assets/quiz.ts', 'entrypoint' => true],
+    'backoffice' => ['path' => './assets/backoffice.ts', 'entrypoint' => true],
     '@symfony/stimulus-bundle' => ['path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js'],
     'bootstrap' => ['version' => '5.3.8'],
     '@popperjs/core' => ['version' => '2.11.8'],

src/Service/DataExportService.php

@@ -223,7 +223,7 @@ class DataExportService
         }
     }
 
-    /** Raw crosstab: one row per candidate, one column per question, cell = the answer text they gave (bold when correct). */
+    /** Raw crosstab: one row per candidate, one column per question, cell = the answer text they gave. */
     private function fillRawAnswersSheet(Worksheet $sheet, Quiz $quiz): void
     {
         /** @var list<Question> $questions */
@@ -240,14 +240,11 @@ class DataExportService
 
         /** @var array<string, array<string, string>> $answersByCandidateAndQuestion */
         $answersByCandidateAndQuestion = [];
-        /** @var array<string, array<string, bool>> $correctnessByCandidateAndQuestion */
-        $correctnessByCandidateAndQuestion = [];
         foreach ($questions as $question) {
             foreach ($question->answers as $answer) {
                 foreach ($answer->givenAnswers as $givenAnswer) {
                     $candidateId = $givenAnswer->candidate->id->toString();
                     $answersByCandidateAndQuestion[$candidateId][$question->id->toString()] = $answer->text;
-                    $correctnessByCandidateAndQuestion[$candidateId][$question->id->toString()] = $answer->isRightAnswer;
                 }
             }
         }
@@ -255,22 +252,13 @@ class DataExportService
         $row = 2;
         foreach ($quiz->candidateData as $quizCandidate) {
             $candidate = $quizCandidate->candidate;
-            $candidateId = $candidate->id->toString();
 
             $line = [$candidate->name];
             foreach ($questions as $question) {
-                $line[] = $answersByCandidateAndQuestion[$candidateId][$question->id->toString()] ?? '';
+                $line[] = $answersByCandidateAndQuestion[$candidate->id->toString()][$question->id->toString()] ?? '';
             }
 
             $sheet->fromArray($line, null, 'A'.$row);
-
-            foreach ($questions as $columnIndex => $question) {
-                if ($correctnessByCandidateAndQuestion[$candidateId][$question->id->toString()] ?? false) {
-                    $column = Coordinate::stringFromColumnIndex(2 + $columnIndex);
-                    $sheet->getStyle($column.$row)->getFont()->setBold(true);
-                }
-            }
-
             ++$row;
         }
 

symfony.lock

@@ -98,6 +98,9 @@
             "tests/bootstrap.php"
         ]
     },
+    "sensiolabs/typescript-bundle": {
+        "version": "v0.2.2"
+    },
     "sentry/sentry-symfony": {
         "version": "5.8",
         "recipe": {

templates/backoffice/nav.html.twig

@@ -1,16 +1,16 @@
 <nav class="navbar navbar-expand-lg bg-body-tertiary">
     <div class="container-fluid">
         <a class="navbar-brand" href="{{ path('tvdt_backoffice_index') }}">Tijd voor de test</a>
-        <button class="navbar-toggler"
-                type="button"
-                data-bs-toggle="collapse"
-                data-bs-target="#navbarSupportedContent"
-                aria-controls="navbarSupportedContent"
-                aria-expanded="false"
-                aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
         {% if is_granted('IS_AUTHENTICATED') %}
+            <button class="navbar-toggler"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#navbarSupportedContent"
+                    aria-controls="navbarSupportedContent"
+                    aria-expanded="false"
+                    aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
                 <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                     <li class="nav-item">

tests/Controller/LoginControllerTest.php

@@ -19,6 +19,24 @@ final class LoginControllerTest extends AbstractControllerWebTestCase
         self::assertSelectorExists('form');
     }
 
+    public function testNavbarTogglerHasNoDeadTargetWhenNotAuthenticated(): void
+    {
+        $this->client->request(Request::METHOD_GET, '/login');
+
+        $crawler = $this->client->getCrawler();
+        $toggler = $crawler->filter('.navbar-toggler');
+
+        if (0 === $toggler->count()) {
+            self::assertSelectorNotExists('#navbarSupportedContent');
+
+            return;
+        }
+
+        $target = $toggler->attr('data-bs-target');
+        $this->assertNotNull($target);
+        self::assertSelectorExists($target);
+    }
+
     public function testLoginRedirectsToBackofficeWhenAlreadyAuthenticated(): void
     {
         $this->loginAs('test@example.org');

tests/Service/DataExportServiceTest.php

@@ -4,7 +4,6 @@ declare(strict_types=1);
 
 namespace Tvdt\Tests\Service;
 
-use PhpOffice\PhpSpreadsheet\Cell\Coordinate;
 use PhpOffice\PhpSpreadsheet\Reader;
 use PhpOffice\PhpSpreadsheet\Worksheet\Worksheet;
 use PHPUnit\Framework\Attributes\CoversClass;
@@ -202,50 +201,6 @@ final class DataExportServiceTest extends DatabaseTestCase
         $this->assertSame('Man', $claudiaRow[$questionColumnIndex]);
     }
 
-    public function testRawAnswersSheetBoldsCorrectAnswersOnly(): void
-    {
-        $season = $this->getSeasonByCode('krtek');
-        $quiz = $this->entityManager->getRepository(Quiz::class)->findOneBy(['name' => 'Quiz 1', 'season' => $season]);
-        $this->assertInstanceOf(Quiz::class, $quiz);
-
-        /** @var Question $firstQuestion */
-        $firstQuestion = $quiz->questions->first();
-        $correctAnswer = $firstQuestion->answers->filter(static fn (Answer $answer): bool => $answer->isRightAnswer)->first();
-        $wrongAnswer = $firstQuestion->answers->filter(static fn (Answer $answer): bool => !$answer->isRightAnswer)->first();
-        $this->assertInstanceOf(Answer::class, $correctAnswer);
-        $this->assertInstanceOf(Answer::class, $wrongAnswer);
-
-        $candidateWithCorrectAnswer = $this->getCandidateBySeasonAndName($season, 'Claudia');
-        $candidateWithWrongAnswer = $this->getCandidateBySeasonAndName($season, 'Eelco');
-
-        $this->quizCandidateRepository->createIfNotExist($quiz, $candidateWithCorrectAnswer);
-        $this->quizCandidateRepository->createIfNotExist($quiz, $candidateWithWrongAnswer);
-
-        $this->entityManager->persist(new GivenAnswer($candidateWithCorrectAnswer, $quiz, $correctAnswer));
-        $this->entityManager->persist(new GivenAnswer($candidateWithWrongAnswer, $quiz, $wrongAnswer));
-        $this->entityManager->flush();
-
-        $zip = $this->openZip($this->getUserByEmail('user2@example.org'));
-        $quizContent = $zip->getFromName('krtek-Krtek-Weekend/Quiz-1.xlsx');
-        $this->assertIsString($quizContent);
-        $zip->close();
-
-        $sheet = $this->loadSheet($quizContent, 'Raw answers');
-        $rows = $sheet->toArray();
-        $header = $rows[0];
-
-        $questionColumnIndex = array_search($firstQuestion->question, $header, true);
-        $this->assertIsInt($questionColumnIndex);
-        $column = Coordinate::stringFromColumnIndex($questionColumnIndex + 1);
-
-        $candidateNames = array_column(\array_slice($rows, 1), 0);
-        $correctRowNumber = 2 + array_search('Claudia', $candidateNames, true);
-        $wrongRowNumber = 2 + array_search('Eelco', $candidateNames, true);
-
-        $this->assertTrue($sheet->getStyle($column.$correctRowNumber)->getFont()->getBold(), 'Expected the correct answer to be bold');
-        $this->assertFalse($sheet->getStyle($column.$wrongRowNumber)->getFont()->getBold(), 'Expected the wrong answer to not be bold');
-    }
-
     public function testQuizInfoSheetShowsDropoutsFinalizationAndDisabledQuestions(): void
     {
         $season = $this->getSeasonByCode('krtek');