Comprendre la stack

Un contrôleur par rubrique, quelques lignes chacun. Les paramètres d’URL arrivent par #[MapQueryParameter] (un paramètre non scalaire répond 400), le filtrage vit dans le domaine (MissionFilter, enum MissionStatus) et les données passent par l’interface WorkspaceRepository, servie ici par des fixtures en mémoire.

#[Route('', name: 'index', methods: ['GET'])]
public function index(
    #[MapQueryParameter(validationFailedStatusCode: 400)] string $q = '',
    #[MapQueryParameter(validationFailedStatusCode: 400)] string $status = '',
): Response {
    $filter = new MissionFilter($q, MissionStatus::tryFrom($status));

    return $this->render('mission/index.html.twig', [
        'missions' => $this->workspace->findMissions($filter),
    ]);
}

Toutes les pages héritent de base.html.twig. Les primitives Ui:* et les composants métier Mission:*, Document:* sont des composants anonymes : des props déclarées par {% props %}, un bloc content et fusionnent les attributs avec attributes.defaults() : un data-action Stimulus ou une classe passés par l’appelant sont conservés. La rosette Ui:Guilloche est une classe PHP qui calcule ses courbes ; le gabarit les lit via computed pour ne les calculer qu’une fois par rendu.

<twig:Ui:Button href="{{ path('app_document_index') }}" intent="secondary">
  Ouvrir les documents
</twig:Ui:Button>

<twig:Ui:Guilloche :seed="mission.id" :progress="mission.progress" :size="44" />

Turbo Drive charge les pages ; la balise view-transition lui laisse animer le passage d’une page à l’autre avec l’API View Transitions, le rail restant immobile. Les Frames mission-results et document-results ne remplacent que la liste et la fiche après un filtre GET.

<meta name="view-transition" content="same-origin">
<turbo-frame id="mission-results" data-turbo-action="advance">
  <!-- Liste et fiche rendues par Twig -->
</turbo-frame>

filtered_results_controller.js gère chargement, erreur et focus de la région filtrée de Missions et de Documents, branché dans Twig par stimulus_controller() et stimulus_action(). Le skeleton n’apparaît qu’après 140 ms de requête, jamais pour une réponse rapide. theme_controller.js révèle le thème depuis le bouton. Chaque minuteur est nettoyé à la déconnexion et avant la mise en cache Turbo.

export default class extends Controller {
    static targets = ['skeleton', 'content'];
    start(event) {
        this.skeletonTimer = setTimeout(() => this.showSkeleton(), SKELETON_DELAY);
    }
    disconnect() { this.stopLoading(); }
}

Les styles sont des modules @use rangés par couche : settings (primitives de marque, rôles sémantiques, points de rupture), base, components (un partiel par composant Ui), layout, domain, pages et motion. Les composants ne lisent que des propriétés CSS sémantiques : le thème sombre redéfinit les rôles, pas les composants. Les listes s’adaptent à leur conteneur avec des container queries.

// settings/_tokens.scss
:root { --action: #{brand.$green}; --copper: #8c4810; }
[data-theme='dark'] { --action: #8fcfa2; }

// components/_status.scss
.ui-status--amber { --_ink: var(--copper); }