refactor(front): factorise le code dupliqué du front (nav, utils, mixins SCSS)#8
Merged
Merged
Conversation
…s de détail Les 4 pages de détail (SOLID, Design Patterns, Claude Code, phases de revue) dupliquaient le même bloc de navigation précédent/suivant (template + ~70 lignes de SCSS chacune, identiques au préfixe BEM près). Extraction d'un composant présentationnel `app-sequential-nav` piloté par `prev`/`next`/`routeBase`/ `navLabel`. Comportement, routes et rendu inchangés. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
La lecture/écriture d'un Set d'ids cochés dans le localStorage (avec try/catch et sérialisation Array) était dupliquée entre la checklist Code Review et les phases de revue. Extraction de `loadCheckedSet`/`persistCheckedSet` dans core/utils, la clé restant fournie par chaque composant. Comportement et clés localStorage inchangés. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Les 4 pages de détail répétaient la même arithmétique d'index (indexOf, garde -1, voisin à delta) pour résoudre le slug précédent/suivant. Extraction de `neighborSlug` dans core/utils ; chaque composant ne garde que la résolution du libellé propre à ses données. Comportement inchangé. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…agés Les blocs SCSS identiques des 3 pages de détail (.code, socle .example + légende, section de contenu, liste à puces) sont déplacés dans des mixins `shared/styles/_detail.scss`, inclus sous le bloc BEM local de chaque feature. Les variantes propres (--avoid/--prefer, bord coloré) restent locales. CSS émis et rendu inchangés. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Le bloc `.badge` + variantes de rôle, identique entre l'aperçu des bonnes pratiques et la page-support des phases, est déplacé dans un mixin `shared/styles/_badge.scss` inclus dans les deux composants. CSS et rendu inchangés (texte + teinte, jamais la couleur seule). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Le bloc `.practice` (icône + titre + accroche + pourquoi), quasi identique entre l'aperçu des bonnes pratiques et la page-support des phases, est déplacé dans un mixin `shared/styles/_practice-card.scss`. Le modificateur `--done` (titre barré) reste local à la page-support. CSS et rendu inchangés. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Refactor à comportement constant (aucun changement d'URL, de slug, de clé localStorage ni de rendu visuel) pour réduire la duplication dans
frontend/src/app/. Issu d'un audit ; chaque extraction est un commit isolé,npm run check(lint + build) vert après chacune.Extractions
SequentialNavComponent(shared/components/sequential-nav/) : nav précédent/suivant des 4 pages de détail (template + ~70 lignes SCSS ×4) → 1 composant présentationnel.core/utils/checklist-storage.ts:loadCheckedSet/persistCheckedSet(localStorage + try/catch) factorisés depuis code-review + phase-guide.core/utils/sequential-nav.ts:neighborSlug(arithmétique d'index) factorisé depuis les 4neighbor().shared/styles/_detail.scss: mixins.code, socle.example, section de contenu, liste pour les 3 pages de détail.shared/styles/_badge.scss: mixin badge de rôle (best-practices + phase-guide).shared/styles/_practice-card.scss: mixin carte.practice(best-practices + phase-guide).Premier système de mixins SCSS partagés du dépôt : inclus sous le bloc BEM local → le mixin se ré-expanse dans le scope de chaque composant, CSS émis et rendu identiques, scoping préservé. Variantes spécifiques laissées locales.
Hors périmètre
.hero, header, grille) est différé : il porte sur les mêmes fichiers qu'une feature « confettis » en cours (branchefeat/confetti-festif) et le.heron'y est plus identique d'un hub à l'autre. À reprendre sur un arbre propre.Traçabilité
Décisions journalisées dans
DECISIONS.md(deux entrées datées : factorisation des pages de détail, et introduction des mixins SCSS).🤖 Generated with Claude Code