Improve compact desktop usability and action guidance
All checks were successful
Deploy Sokko G / deploy (push) Successful in 19s

This commit is contained in:
Shinuwa 2026-10-05 21:47:16 +02:00
parent 0ac1a0974e
commit 0fc18cd8b9
24 changed files with 325 additions and 90 deletions

View file

@ -2,6 +2,13 @@
Checklist à suivre lors de l'ajout ou de la modification d'un outil, d'une page jeu ou d'un format de données.
## Cible d'affichage
- Concevoir et valider les fonctionnalités pour une fenêtre d'ordinateur en plein écran ou en demi-écran, à partir de `768px`.
- Ne pas ajouter de navigation, de composant, de libellé ou de parcours réservé au téléphone.
- Sous `768px`, vérifier uniquement que le contenu reste accessible, que la sidebar demeure utilisable et qu'aucun débordement horizontal global n'est introduit.
- Conserver les adaptations internes nécessaires aux composants étroits, notamment les formulaires, tableaux et outils, sans en faire une interface mobile distincte.
## Outil Toolbox
- Ajouter ou modifier le composant dans `website/src/features/toolboxes/modules/`.
@ -10,6 +17,7 @@ Checklist à suivre lors de l'ajout ou de la modification d'un outil, d'une page
- Dans la Librairie, vérifier les liens directs vers un outil, les changements d'ancre et le retour navigateur ; une nouvelle sélection ou une sortie de page doit annuler les défilements différés précédents.
- Ajouter les textes nécessaires dans `website/public/data/site.json`.
- Mettre à jour la validation de `site.json` dans `tests/helpers/data-validation.mjs`.
- Pour chaque type du registre, fournir une description non vide dans `toolboxes.addToolDescriptions` et vérifier que la fenêtre « Ajouter un outil » affiche le nom complet et la courte phrase d'usage aux largeurs compactes validées. Vérifier sa largeur réelle jusqu'à `900px`, les cartes compactes avec icône à gauche du titre, les 4 et 5 colonnes selon la largeur, les cinq sections sans onglets, les couleurs et dimensions de `scrollbar-control`, ainsi que les infobulles de l'ajout rapide au survol comme au focus.
- Mettre à jour la normalisation et le stockage compact dans `website/src/features/toolboxes/storage/modules/<outil>.js`, puis vérifier l'export public dans `website/src/features/toolboxes/storage/toolboxStorage.js`.
- Mettre à jour `docs/STORAGE_SCHEMA.md`.
- Vérifier l'import et l'export si l'outil stocke des données.
@ -38,6 +46,7 @@ Checklist à suivre lors de l'ajout ou de la modification d'un outil, d'une page
- Pour Mémos, vérifier l'édition courte, les couleurs, la réorganisation et la bande déroulante ; vérifier aussi les liaisons Aucun / Tous / planificateur précis, les alertes de tâches proches du reset et le retour à Aucun après suppression du dernier planificateur lié.
- Les parcours `e2e/calculator.spec.js` vérifient la validation des formules, l'édition parent/enfant avec recalcul et persistance, la suppression d'une branche active, le retour à un calcul racine, la réinitialisation du brouillon sans effacer les résultats, la copie pour checklist et la persistance du défilement. La réorganisation des racines doit conserver leurs descendants et refuser de changer le parent d'un enfant.
- Vérifier qu'une notification ou une mise à jour sans rapport ne remplace pas un brouillon Mémos avant sa validation au blur.
- Vérifier que les confirmations ordinaires disparaissent après 6 secondes, que les durées explicites sont respectées et que les alertes Timer, Calendrier et sauvegarde restent présentes jusqu'à leur fermeture manuelle. La pile reste limitée à cinq alertes.
- Pour l'arbre d'objectifs, vérifier la sélection après suppression/import et le retour à Base quand le nœud sélectionné devient une étape sans onglet Contenu.
- Vérifier le mode une colonne et deux colonnes.
- Vérifier que l'ajout, la suppression et la réorganisation respectent les `moduleOrder.one` et `moduleOrder.two` de l'espace actif.
@ -55,13 +64,13 @@ Checklist à suivre lors de l'ajout ou de la modification d'un outil, d'une page
- Vérifier la page `/games`.
- Vérifier la page `/games/<gameId>`.
- Vérifier le chargement à la première visite, la conservation des données pendant la navigation et les erreurs réseau ; sous StrictMode, les requêtes abandonnées ne doivent pas remplacer les données actuelles ni afficher d'erreur d'annulation.
- Vérifier que le bouton texte « Afficher la toolbox » devient « Masquer la toolbox » avec le panneau latéral ouvert.
- Sous `1440px`, vérifier la bascule « Guide / Toolbox », la conservation des deux vues après leur première activation et la restauration de leur défilement. À partir de `1440px`, vérifier que le bouton « Afficher la toolbox » devient « Masquer la toolbox » avec le panneau latéral ouvert.
- Sans toolbox liée, vérifier la création ainsi que l'association directe d'une toolbox existante ; le sélecteur ne doit proposer que les toolboxes qui ne sont liées à aucun jeu.
- Vérifier le breadcrumb.
- Vérifier les textes avec retours à la ligne.
- Pour les guides à cartes, vérifier le toggle de lien à côté du « + » dans l'en-tête de chaque checklist compatible : il affiche les commandes, masquées par défaut. Vérifier l'association exclusive, le masquage désactivé sur les autres listes et la mise à jour immédiate depuis le panneau latéral. Refermer les commandes conserve l'association. La checkbox des cartes met à jour toutes les lignes exactes correspondantes, respecte les quantités cibles et ne retourne pas les cartes.
- Vérifier le changement de checklist, la dissociation, la restauration de session, la suppression d'un module et le changement de toolbox. La réinitialisation des filtres conserve la liaison ; une liste devenue sans correspondance reste sélectionnée avec un message.
- Pour les résultats filtrables Aniimo, MHW et Diablo, vérifier que l'action checklist ouvre une modale rappelant que seuls les éléments visibles sont utilisés. La copie reste disponible sans toolbox liée ; la création est alors désactivée avec une indication explicite. Avec une toolbox liée, la création ajoute une nouvelle checklist dans son espace actif sans remplacer l'association guide/checklist existante.
- Pour les résultats filtrables Aniimo, MHW et Diablo, vérifier que le bouton visible « Utiliser les résultats » conserve un libellé accessible contextuel et ouvre une modale rappelant que seuls les éléments visibles sont utilisés. Le groupe titre, compteur et action doit revenir à la ligne sans débordement dès 768 px. La copie reste disponible sans toolbox liée ; la création est alors désactivée avec une indication explicite. Avec une toolbox liée, la création ajoute une nouvelle checklist dans son espace actif sans remplacer l'association guide/checklist existante.
- Pour Aniimo, vérifier la copie et la création des espèces ou des formes selon l'affichage, les noms français/anglais, la priorité des formes et le masquage avant regroupement. Compteurs, copie et création doivent correspondre aux résultats affichés.
## Listes de jeu
@ -81,7 +90,9 @@ Checklist à suivre lors de l'ajout ou de la modification d'un outil, d'une page
- Vérifier les boutons icon, danger, primary et secondary.
- Vérifier les cartes, panels et scrollbars.
- Vérifier les états hover/focus.
- Vérifier les fenêtres de 768, 960, 1024, 1280, 1440 et 1920 px quand le changement touche la mise en page.
- Vérifier les fenêtres de 768, 960, 1024, 1280, 1440 et 1920 px quand le changement touche la mise en page, avec une hauteur de 720 px pour les parcours compacts.
- Effectuer seulement un contrôle minimal sous 768 px : accès au contenu, sidebar utilisable et absence de débordement horizontal global.
- Sur l'accueil vide, vérifier que l'action principale ouvre la création avec tutoriel ; avec au moins une toolbox, vérifier qu'elle devient « Voir mes toolboxes ». L'action « Voir les jeux » et le rappel de création en fin de prise en main restent disponibles.
- Les tests `e2e/card-surfaces.spec.js` compilent le Sass complet et vérifient les
styles calculés des cartes NDS, home jeux et MHW en fenêtre large/compacte : fonds,
bordures, séparateurs dorés, hover sans redimensionnement, focus clavier NDS