diff --git a/DESIGN_SYSTEM.md b/DESIGN_SYSTEM.md index 74635ef..aac4ff3 100644 --- a/DESIGN_SYSTEM.md +++ b/DESIGN_SYSTEM.md @@ -159,6 +159,8 @@ Regles : Les heroes de la page d'accueil et des pages jeux utilisent le meme style via `.hero` et `.game-hero`. +Sur la page d'accueil, le hero conserve deux colonnes en fenêtre large. Jusqu'à `1024px`, le groupe des deux statistiques passe sous le texte et les actions, aligné à gauche. Les deux cartes restent côte à côte tant que leur largeur le permet. + Caracteristiques : - fond commun nebula sombre ; @@ -205,7 +207,7 @@ Style courant : - l'engrenage Configuration ouvre un panneau pleine largeur sous l'en-tête, nommé par `aria-controls` / `aria-expanded`. Il regroupe conditionnellement Espace, Guide, réglages propres à l'outil et Données (import/export) ; ouvrir l'ajout ferme Configuration et réciproquement ; - dans Configuration, Espace et Données partagent la première ligne en deux colonnes. Espace affiche directement le sélecteur compact dont le placeholder décrit l'action. Les réglages propres à l'outil et la liaison Guide occupent toute la largeur en dessous ; si Espace est absent, Données utilise toute la première ligne ; - le panneau Configuration reste une surface intégrée à l'outil : un seul contour discret, des sous-sections sans effet de carte imbriquée, séparées uniquement par des filets légers, avec libellés et contrôles compacts ; -- sur mobile, l'en-tête se répartit sur deux lignes compactes et les sections/champs de Configuration passent en une colonne, dans l'ordre Espace, Données puis réglages spécifiques. +- en fenêtre compacte, l'en-tête se répartit sur deux lignes et les sections/champs de Configuration passent en une colonne, dans l'ordre Espace, Données puis réglages spécifiques. Le mot visible cote utilisateur est **outil**, pas **module**. Le terme module reste acceptable uniquement dans le code. @@ -339,7 +341,7 @@ Regles UI : - les actions de nœud utilisent des boutons icônes : ajout, repli, suppression, déplacement ; - le bouton de déplacement doit rester clairement visible sur les cards compactes, notamment les nœuds `Texte` et `Checklist` ; - la progression d'un parent doit rester agrégée et lisible sans afficher une formule détaillée dans la carte ; -- en panneau latéral ou mobile, l'arbre passe en une colonne sans scroll horizontal. +- en panneau latéral ou fenêtre compacte, l'arbre passe en une colonne sans scroll horizontal. ### Combos @@ -389,7 +391,7 @@ Regles UI : - la creation de mémo est masquee par defaut et s'ouvre via le bouton `+` du header d'outil ; - réorganisation des cartes par poignée de drag & drop compacte ; - bande deroulante visible uniquement quand elle est active et qu'au moins un mémo ou une alerte de planificateur existe ; elle affiche tous les mémos dans l'outil, peut intégrer les tâches non effectuées proches du reset depuis un ou tous les planificateurs de la même toolbox, et reste fixée en bas des pages complètes de cette toolbox ainsi que des pages du jeu qui lui est associé ; -- la bande fixe laisse le contenu verticalement accessible, suit la largeur disponible et remonte au-dessus de la navigation mobile. +- la bande fixe laisse le contenu verticalement accessible et suit la largeur disponible entre la sidebar et le bord droit. ### Calque De Dessin @@ -456,12 +458,13 @@ Regles : - la categorie active commence par un mini-hero descriptif, sans compteur decoratif ; - chaque fiche commence par le titre, l'icone, le badge de categorie et une description directe de l'outil ; - l'exemple interactif reste visible en permanence et centre horizontalement ; -- les reperes de boutons propres a l'outil sont places a gauche de l'exemple, puis empiles au-dessus sur mobile ; +- les reperes de boutons propres a l'outil sont places a gauche de l'exemple, puis empiles au-dessus dans la disposition compacte jusqu'a `1024px` ; - les reperes sont groupes par categorie de controles de l'outil, avec apercu visuel du bouton et label court ; - les descriptions de reperes sont reservees aux comportements non evidents, par exemple un bouton qui agit sur toute la ligne ou une action de drag & drop ; - les fonctionnalites detaillees et formats d'import texte sont presentes sous l'exemple dans un panneau repliable pour ne pas alourdir la lecture avant manipulation ; - les controles propres au catalogue, comme la reinitialisation d'une demo, ne sont pas documentes comme fonctionnalites de l'outil ; -- sur mobile, le sommaire devient un bloc normal place avant les fiches, sans position sticky. +- en fenêtre compacte jusqu'a `1024px`, le sommaire devient un bloc normal place avant les fiches, sans position sticky ; +- sur l'accueil, cette même disposition masque l'illustration de la section « Origine du nom » et sa séparation verticale pour privilégier le dialogue. ## 11. Boutons @@ -590,7 +593,7 @@ Filtres : - les options directes avec libellé suivent la largeur naturelle de leur contenu ; lorsqu’elles passent en icône seule, elles retrouvent une largeur compacte commune ; - la recherche des barres horizontales est plafonnée à `260px` afin de ne pas étirer inutilement les filtres ; - `nds-active-filters` forme une seconde section compacte dans la barre principale, séparée sur toute la largeur par un trait doré semi-transparent sans ombre ; la section haute conserve les 10 px de padding vertical de la barre, tandis que la section basse se limite à 4 px ; elle affiche un badge fermable par recherche ou critère actif, dont le bouton retire uniquement le filtre correspondant ; -- les barres sont sticky sous la topbar sur desktop, reviennent à la ligne et redeviennent statiques sur mobile ; +- les barres sont sticky sous la topbar en fenêtre large, reviennent à la ligne et redeviennent statiques en fenêtre compacte ; - reset avec bouton icône `rubber`. Tableaux : @@ -616,7 +619,7 @@ Outil Tableau : - La barre d'espaces se place entre le hero de la toolbox et les contrôles de disposition, dans la page complète comme dans le drawer lié à un jeu. - Quand seul l'espace par défaut existe, son onglet est masqué et le bouton `Nouvel espace` reste aligné à droite. À partir de deux espaces, la liste devient un `tablist` horizontal scrollable et l'ajout prend la forme d'un bouton `+` placé immédiatement après le dernier onglet. - L'espace actif reprend les surfaces et focus des radio-button groups. Les onglets ciblés par un outil affichent un soulignement doré ; les espaces secondaires disposent d'une poignée de réordonnancement distincte avec un retrait à gauche. -- Le réordonnancement des onglets reprend l'indicateur d'insertion doré des outils, positionné à gauche ou à droite selon la destination. Les actions de renommage et suppression restent groupées à droite et passent sous les onglets sur mobile. +- Le réordonnancement des onglets reprend l'indicateur d'insertion doré des outils, positionné à gauche ou à droite selon la destination. Les actions de renommage et suppression restent groupées à droite et passent sous les onglets en fenêtre étroite. Les toolboxes sont locales et stockees dans le navigateur. @@ -656,13 +659,19 @@ Modales : Drawer toolbox : - le bouton de topbar associe icone et texte visible : « Afficher la toolbox » quand le drawer est ferme, puis « Masquer la toolbox » lorsqu'il est ouvert ; -- panneau lateral ancre a droite, ouvert a `700px` et redimensionnable uniquement vers une largeur superieure ; -- le shell reserve toujours `700px` au panneau : toute largeur supplementaire recouvre la partie droite de la page sans la reduire davantage ; +- à partir de `1440px`, le panneau lateral est ancre a droite, ouvert a `700px` et redimensionnable uniquement vers une largeur superieure ; +- à partir de `1440px`, le shell reserve toujours `700px` au panneau : toute largeur supplementaire recouvre la partie droite de la page sans la reduire davantage ; - la page reste visible et interactive, sans backdrop bloquant ni fermeture au clic exterieur ; -- sous `700px`, le panneau occupe `100vw`, ne reserve plus d'espace lateral et masque sa poignee de redimensionnement ; +- sous `1440px`, la topbar propose une bascule « Guide / Toolbox » à la taille standard des groupes de boutons ; chaque vue occupe toute la zone de contenu et la poignée de redimensionnement est masquée ; +- le guide et la toolbox restent montés après leur première ouverture en mode compact afin de conserver filtres, saisies et positions de défilement ; la vue masquée est retirée du parcours clavier et de l'arbre d'accessibilité ; +- la sidebar mesure `72px` jusqu'à `1024px`, puis `248px` jusqu'au passage en panneau latéral ; - la largeur revient a `700px` a chaque ouverture et n'est pas persistee ; - les actions internes ne doivent pas fermer le drawer sauf action explicite. +La cible responsive est une fenêtre d'ordinateur de second écran. Les parcours sont validés à partir de `768px`. Il n'existe pas de navigation dédiée au téléphone ; sous la largeur validée, l'application reste accessible sans garantie de confort. + +Quand la zone utile d'une page toolbox passe sous `900px`, les outils sont forcés sur une seule colonne et le sélecteur une/deux colonnes est masqué. La préférence de disposition reste enregistrée et redevient applicable lorsque la largeur le permet. + Notifications internes : - pas d'alerte navigateur ; @@ -882,7 +891,7 @@ conserve un marqueur d'état lorsque la liste est associée et expose `aria-expa et `aria-controls`. Le bouton NDS « Associer à la page » / « Dissocier » expose `aria-pressed` ; activer une liste dissocie la précédente. Le switch « Masquer les cochés » est désactivé sur les listes -non associées. Les commandes sont centrées et reviennent à la ligne sur mobile ; +non associées. Les commandes sont centrées et reviennent à la ligne en fenêtre étroite ; le nombre de correspondances figure dessous. Une liste active devenue incompatible garde ses commandes avec un message explicite. Un encart compact placé en haut à droite du header du guide expose un sélecteur dès diff --git a/docs/AUDIT_UX_2026-10-05.md b/docs/AUDIT_UX_2026-10-05.md new file mode 100644 index 0000000..31942fe --- /dev/null +++ b/docs/AUDIT_UX_2026-10-05.md @@ -0,0 +1,191 @@ + +# Audit d'ergonomie de Sokko G + +Date : 5 octobre 2026. + +## Diagnostic + +Sokko G possède une identité visuelle cohérente et une vraie utilité : rassembler les informations personnelles d'une session et les consulter à côté de guides de jeu. Ses 17 outils couvrent déjà de nombreux usages. Le principal axe d'amélioration est de rendre le premier usage évident, puis de raccourcir l'accès aux contenus personnels. + +Aujourd'hui, l'interface expose assez tôt ses possibilités d'organisation, ses réglages et sa gestion des données. Elle explique moins directement quelle action choisir pour répondre à un besoin simple : noter une information, préparer une liste, retrouver sa session ou suivre les éléments d'un guide. + +Les problèmes fonctionnels ci-dessous sont observés ou établis dans le code. Les conséquences sur la compréhension et les bénéfices attendus restent des hypothèses ergonomiques à valider avec des utilisateurs. + +## Périmètre et méthode + +- Lecture des routes, contenus JSON, composants de navigation, accueil, catalogue, toolboxes, modales, sauvegardes, intégration des guides et styles responsive. +- Parcours Chromium dans un profil temporaire : accueil, liste vide des toolboxes, création, ouverture d'une toolbox, choix d'un outil, catalogue, liste des jeux, accueil Aniimo et ouverture de son panneau toolbox. +- Inspection à 1440 × 1000 et 390 × 844, avec captures et mesures de mise en page. +- Contrôle ponctuel du focus et de la touche Échap dans « Ajouter un outil ». +- Aucune erreur JavaScript remontée par `pageerror` pendant ces parcours. Aucun débordement horizontal du document détecté dans les vues capturées. + +Limites : vérification sur Vite en développement, sans session avec de vrais utilisateurs, sans audit exhaustif d'accessibilité, sans mesure de performance et sans validation complète des 17 outils. Les filtres détaillés des jeux ont été examinés dans le code, pas exercés dans le navigateur. L'observation initiale à 390 px a permis de retirer une interface téléphone qui ne correspondait pas à la cible produit ; la cible retenue est désormais une fenêtre d'ordinateur à partir de 768 px. + +Le mode développement conserve la prise en main sur l'accueil, même après création. En production, le code la masque dès qu'une toolbox existe. L'entrée « Design system » visible pendant l'audit est également propre au développement : ce n'est pas un défaut de navigation en production. + +## Points à conserver + +- Identité Nebula, palette sombre et composants visuels communs : la base est reconnaissable et cohérente. +- Navigation principale courte sur ordinateur. +- Création d'une toolbox avec un seul champ obligatoire. +- Prise en main existante, exemples interactifs et documentation par outil. +- Organisation du catalogue en cinq familles : notes et suivi, références, calcul et données, temps et routines, builds et commandes. +- Possibilité d'associer une toolbox à un jeu et d'utiliser les résultats d'un guide pour créer une checklist. +- Stockage local, exports et sauvegarde automatique déjà prévus. +- Confirmations existantes pour retirer un outil ou supprimer une toolbox : il faut les conserver, pas ajouter des confirmations partout. + +## Priorités proposées + +Les efforts sont relatifs, pas des engagements de délai : faible = changement local ; moyen = plusieurs composants ou états ; élevé = nouvelle logique et validation de données. + +| Priorité | Amélioration | Observation ou justification | Effort | +| --- | --- | --- | --- | +| P1 | Recentrer la navigation sur le second écran | La navigation téléphone ne correspond pas à la cible d'utilisation. | Faible | +| P1 | Harmoniser les libellés de navigation | Conserver les mêmes destinations dans la sidebar large et compacte. | Faible | +| P1 | Fiabiliser les modales au clavier | Dans l'ajout d'outil, le focus reste derrière la fenêtre et Échap ne la ferme pas. | Moyen | +| P1 | Donner une explication à chaque outil | 17 choix sans description ; plusieurs noms tronqués sur ordinateur. | Moyen | +| P1 | Faire de la création la première action | L'accueil propose surtout « Voir les toolboxes » ; le bouton de création guidée est plus bas. | Faible à moyen | +| P1 | Placer les toolboxes avant les réglages | En fenêtre compacte, sauvegardes et préférences précèdent la première toolbox et la repoussent sous le premier écran. | Moyen | +| P2 | Proposer quelques modèles par usage | Une nouvelle toolbox contient surtout un mémo de bienvenue et un lien vers le catalogue. | Moyen | +| P2 | Donner une suite à la démonstration | Le catalogue permet d'essayer les outils, sans action directe pour ajouter l'exemple à sa toolbox. | Moyen | +| P2 | Rendre visible la création de checklist depuis un guide | L'action est portée par une petite icône de copie. | Faible à moyen | +| P2 | Clarifier enregistrement local et sauvegarde externe | « IndexedDB », export, import et budget de stockage occupent beaucoup de place dans le parcours courant. | Moyen | +| P2 | Alléger les barres d'actions et notifications | Beaucoup d'icônes simultanées ; durée par défaut des notifications de 120 secondes dans le code. | Moyen | +| P3 | Accueil de reprise, recherche et favoris | L'accueil ne propose pas de raccourci vers une toolbox récente ; la liste n'a pas de recherche. | Moyen à élevé | + +## Recommandations détaillées + +### 1. Une navigation stable en fenêtre large ou compacte + +**Constat vérifié.** L'ancienne barre mobile ne correspondait ni au second écran ni à la fenêtre demi-écran visés par Sokko G. Elle a été retirée au profit d'une sidebar compacte conservée à partir de 768 px. + +**Proposition.** Utiliser des destinations stables dans la sidebar et identifier chaque icône par une infobulle au survol et au focus. Garder la création dans les pages concernées. + +**Validation attendue.** De 768 à 1920 px, toutes les destinations sont identifiables et aucun contrôle fixe ne recouvre le contenu. Sous 768 px, l'application reste accessible sans promesse de confort. + +### 2. Montrer immédiatement ce que l'on peut faire + +**Constat.** L'accueil définit une toolbox dans la prise en main, mais son premier bloc utilise une promesse assez générale. Le bouton « Créer ma première toolbox » est placé après les quatre étapes. À 1440 × 1000, il se situe sous la zone initialement visible. + +**Proposition de texte.** « Vos notes, listes et outils de jeu, réunis au même endroit. Créez une toolbox pour préparer votre prochaine session. Vos données restent dans ce navigateur. » + +**Actions proposées.** Mettre « Créer ma première toolbox » dans le premier bloc, puis « Essayer les outils » en action secondaire. Les guides restent accessibles dans la navigation. Après une première utilisation, remplacer ce bloc par « Reprendre ma session » avec les dernières toolboxes ouvertes. + +Réduire les compteurs « 0 toolbox / 17 outils » à une information secondaire. Déplacer l'histoire du nom vers « C'est quoi Sokko G ? », avec un lien discret depuis l'accueil. Conserver les illustrations comme repères visuels. + +### 3. Rendre le choix d'un outil compréhensible + +**Constat vérifié.** La fenêtre d'ajout présente une grille de 17 icônes et noms. « Planificateur de tâches » et « Planificateur d'équipements » sont tous deux tronqués en « Planificateur … ». Dans une fenêtre très étroite, les outils sont empilés en une longue colonne. + +**Proposition.** Réutiliser les cinq familles du catalogue, afficher les noms complets et une phrase d'usage. Ajouter une recherche par nom et intention, par exemple « noter », « loot », « temps ». Mettre trois choix de démarrage en évidence sans masquer les autres. + +| Outil | Description proposée | +| --- | --- | +| Mémos | Garder une information courte sous les yeux. | +| Bloc-notes | Rédiger un guide personnel ou des notes détaillées. | +| Checklist | Cocher des objectifs et suivre des quantités. | +| Planificateur de tâches | Suivre des tâches quotidiennes ou hebdomadaires. | +| Compteurs | Compter des essais, victoires ou ressources. | +| Arbre d'objectifs | Décomposer un objectif en étapes et ressources. | + +Ces distinctions sont particulièrement utiles pour les outils dont les usages se recoupent. Un lien « Voir un exemple » peut ouvrir la bonne section du catalogue. + +### 4. Donner un résultat utile dès la création + +**Constat.** La création standard ajoute des Mémos et des Liens. La visite guidée est demandée par le bouton dédié de l'accueil, mais pas par toutes les entrées « Nouvelle toolbox ». Le tutoriel commence par changer l'icône et renommer, avant d'ajouter un outil. + +**Proposition.** Proposer une option facultative de modèle, sans transformer la création en long formulaire : + +- « Notes de session » : bloc-notes et liens. +- « Collecte et progression » : checklist et compteurs. +- « Routine quotidienne » : planificateur et minuteur. +- « Préparer un build » : équipements, notes et références. +- « Personnaliser moi-même » : départ libre. + +Guider d'abord vers une action utile : ajouter une note ou cocher un objectif. Montrer ensuite les possibilités de personnalisation. Proposer de relancer l'aide depuis la toolbox. + +Les modèles sont une piste de conception à tester. Leur implémentation doit respecter le stockage et les formats d'export existants. + +### 5. Mettre les contenus personnels au premier plan + +**Constat vérifié.** La page Toolboxes affiche successivement une présentation, cinq actions, les préférences d'alertes et une grande carte d'explication du stockage avant la première toolbox en fenêtre compacte. + +**Proposition.** Afficher un titre court, « Nouvelle toolbox », puis les toolboxes. Déplacer le positionnement des alertes dans les préférences et regrouper les actions de données dans « Sauvegardes ». Conserver un résumé visible et rassurant : « Enregistré sur cet appareil » avec un accès aux détails. + +Ajouter recherche et favoris lorsque la collection grandit. Un tri « Dernière ouverture » nécessite un suivi local dédié ; la date de modification existante n'est pas un historique de consultation. + +### 6. Relier découverte et utilisation + +**Catalogue.** Les exemples interactifs constituent un bon support d'apprentissage. Ajouter « Ajouter cet outil à une toolbox » à proximité de chaque exemple, avec le choix « Vide » ou « Avec cet exemple ». Expliquer localement que les essais de la démo ne sont pas conservés dans les toolboxes. + +**Guides de jeu.** Remplacer ou accompagner l'icône de copie des résultats par « Créer une checklist ». Montrer le nombre d'éléments concernés et la destination. Si aucune toolbox n'est associée, proposer de la choisir ou d'en créer une dans le même parcours. La fonctionnalité existe déjà en partie : l'enjeu est de rendre son accès et ses prérequis visibles. + +**Panneau latéral.** Afficher le nom de la toolbox liée dans le déclencheur ou à proximité. En fenêtre compacte, la bascule « Guide / Toolbox » évite de perdre le contexte dans un panneau couvrant la page. + +### 7. Clarifier la conservation des données + +**Constat.** Le site explique déjà que les données restent locales et propose des exports ainsi qu'une sauvegarde automatique. Le vocabulaire technique et les détails de fonctionnement sont cependant très présents. + +**Proposition.** Distinguer deux informations : + +- « Enregistré dans ce navigateur » : persistance courante des modifications, à afficher après confirmation effective de l'écriture. +- « Dernière sauvegarde en fichier : … » : copie récupérable hors de ce navigateur. + +Employer « Télécharger une sauvegarde » et « Restaurer une sauvegarde » aux endroits appropriés, tout en explicitant si l'import ajoute, fusionne ou remplace des données. Garder les détails IndexedDB et quota dans une rubrique secondaire. La jauge de 250 Mio correspond à un budget recommandé, pas au quota réel du navigateur : éviter un affichage qui suggérerait une limite technique ferme. + +Dans la fenêtre de sauvegarde automatique, mettre d'abord l'état, le dossier et l'action suivante ; replier les explications longues sous « Comment ça fonctionne ». + +### 8. Réduire l'effort de lecture pendant une session + +**Constat visuel.** Les en-têtes d'outils cumulent déplacement, défilement, ajout, réglages, suppression et repli. Le mémo de bienvenue est également visible dans des bandes déroulantes. Les cartes, contours et accents occupent une place importante dans la hiérarchie. + +**Proposition.** Garder visibles l'ajout et les actions fréquentes ; regrouper les actions rares dans « Plus ». Ajouter un libellé aux actions essentielles dans les fenêtres compactes. Envisager un mode « Organiser » explicite pour les déplacements et changements de disposition, après test pour préserver l'efficacité des utilisateurs habitués. + +Réserver l'accent le plus fort à l'action principale du bloc. Rendre les bandes de mémos facultatives au démarrage. Réduire la durée des notifications de succès courantes ; conserver les alertes qui demandent une action jusqu'à leur traitement. Les 120 secondes sont un comportement établi dans le code, pas un délai mesuré pendant cet audit. + +### 9. Corriger les interactions clavier des fenêtres + +**Constat vérifié.** À l'ouverture de « Ajouter un outil », le focus reste sur le bouton déclencheur hors de la modale. Échap ne ferme pas la fenêtre. Le composant ne prévoit pas de confinement du focus. Plusieurs autres modales utilisent un fonctionnement similaire, à contrôler individuellement. + +**Proposition.** Standardiser l'ouverture avec focus dans la fenêtre, la navigation Tab à l'intérieur, la fermeture par Échap et le retour au déclencheur. Rendre l'arrière-plan inactif pendant la modale. Compléter la navigation avec l'indication programmatique de la page courante et un accès direct au contenu principal. + +Le contrôle des contrastes, des cibles tactiles et des lecteurs d'écran reste à réaliser ; cet audit ne conclut pas à une conformité globale d'accessibilité. + +## Ordre de réalisation conseillé + +1. Corriger les défauts vérifiés : navigation de second écran, noms tronqués, focus et fermeture des modales. +2. Simplifier le premier parcours : bouton de création immédiat, catalogue d'ajout descriptif, contenus personnels avant les réglages. +3. Améliorer les passerelles : exemples vers toolbox et résultats de guide vers checklist. +4. Tester les évolutions plus structurantes : modèles, accueil de reprise, favoris, mode d'organisation. + +Éviter d'ajouter d'abord de nouveaux outils : les fonctions actuelles offrent déjà suffisamment de matière pour améliorer la découverte et l'usage quotidien. + +## Comment vérifier les progrès + +Organiser une courte séance avec, par exemple, cinq personnes découvrant le site. Ce petit groupe sert à repérer des obstacles, pas à établir des statistiques représentatives. Leur donner les mêmes objectifs avant et après les changements : + +1. Expliquer à quoi sert le site et où les données sont conservées. +2. Créer un espace pour une session et y noter une information. +3. Choisir entre checklist et tâches récurrentes pour deux besoins distincts. +4. Utiliser un guide pour constituer une checklist personnelle. +5. Retrouver la toolbox après rechargement. +6. Télécharger une sauvegarde et expliquer comment la restaurer. + +Relever la réussite sans aide, les hésitations, les retours arrière et le temps jusqu'au premier contenu utile. Fixer les objectifs chiffrés après cette première mesure. Inclure un parcours au clavier et des fenêtres réelles de 768 et 960 px. + +## Références dans le dépôt + +- [Accueil et différence développement/production](../website/src/pages/HomePage.jsx) +- [Prise en main](../website/src/pages/HomeOnboardingSection.jsx) +- [Libellés éditoriaux](../website/public/data/site.json) +- [Navigation globale](../website/src/components/Shell.jsx) +- [Règles responsive des fenêtres compactes](../website/src/styles/_responsive.scss) +- [Pages, tutoriel et panneau toolbox](../website/src/features/toolboxes/ToolboxPages.jsx) +- [Sélection d'outils](../website/src/features/toolboxes/modules/AddToolControls.jsx) +- [Registre des 17 outils et familles](../website/src/features/toolboxes/toolboxModuleRegistry.js) +- [Catalogue et exemples](../website/src/pages/LibraryPage.jsx) +- [Résultats de guides vers checklist](../website/src/features/games/CopyChecklistItemsButton.jsx) +- [Modales et sauvegarde automatique](../website/src/components/ToolboxModals.jsx) +- [Durée des notifications](../website/src/main.jsx) + +Le recentrage responsive issu de cet audit est implémenté ; les autres recommandations restent des pistes de travail hors de ce chantier. diff --git a/docs/FEATURE_CHECKLIST.md b/docs/FEATURE_CHECKLIST.md index e40af7c..3c9decb 100644 --- a/docs/FEATURE_CHECKLIST.md +++ b/docs/FEATURE_CHECKLIST.md @@ -21,10 +21,10 @@ Checklist à suivre lors de l'ajout ou de la modification d'un outil, d'une page - Si l'outil porte un état de progression, vérifier que l'import texte repart de l'état initial attendu. - Vérifier l'affichage dans la page toolbox complète. - Vérifier l'affichage dans le panneau latéral. -- Vérifier l'ordre compact du header en une et deux colonnes et sur mobile : déplacement, icône, titre, scroll éventuel, ajout éventuel, Configuration, suppression, chevron. Le panneau Configuration doit prendre toute la largeur, placer Espace et Données sur deux colonnes puis les réglages spécifiques sur toute la ligne, et empiler ces sections dans cet ordre sur mobile. +- Vérifier l'ordre compact du header en une et deux colonnes et dans une fenêtre étroite : déplacement, icône, titre, scroll éventuel, ajout éventuel, Configuration, suppression, chevron. Le panneau Configuration doit prendre toute la largeur, placer Espace et Données sur deux colonnes puis les réglages spécifiques sur toute la ligne, et empiler ces sections sous la largeur prévue. - Vérifier que Configuration et ajout se ferment mutuellement, qu'Échap ferme Configuration et qu'un outil replié peut l'ouvrir sans afficher son contenu métier. - Pour le tutoriel toolbox, vérifier le démarrage unique, la fermeture et le changement de toolbox en cours de visite ; une autre toolbox doit démarrer à la première étape et ne pas consommer les indicateurs de la précédente. -- Pour le Bloc Note, vérifier la sélection, l'ajout, le renommage et la suppression de pages en page complète, panneau latéral et mobile. +- Pour le Bloc Note, vérifier la sélection, l'ajout, le renommage et la suppression de pages en page complète, panneau latéral et fenêtre compacte. - Vérifier qu'un changement de page avec le focus actif remplace immédiatement le contenu de l'éditeur ; une mise à jour externe de la même page attend le blur sans déplacer la sélection pendant la saisie ni reprendre le focus ensuite. - Pour les dessins temporaires et l'historique du simulateur de chance, vérifier l'isolation par clé de session lors des changements de page/outil et après rechargement ; une navigation seule ne doit pas écraser les données de l'autre clé. - Pour le simulateur de chance, vérifier que les brouillons suivent le taux et l'outil actifs, restent intacts lors d'un rendu sans rapport et se valident au blur selon le champ. @@ -81,9 +81,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 mobile et desktop 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. - 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 desktop/mobile : fonds, + 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 et faces MHW. Ils ne créent pas de snapshots visuels et ne remplacent pas les parcours des pages réelles. @@ -91,7 +91,7 @@ Checklist à suivre lors de l'ajout ou de la modification d'un outil, d'une page complètent cette couverture : tailles et états NDS, panneaux, feedbacks, modales/drawers/toasts, scrollbars, mouvement réduit, états des outils et masques d'icônes décodables. Les layouts home/À propos/librairie sont aussi - vérifiés sur les pages réelles en desktop, tablette et mobile. + vérifiés sur les pages réelles en fenêtre large et demi-écran. - `tests/static-styles.test.mjs` conserve les frontières d'architecture, les conventions publiques et les limites de taille des fichiers, pas des preuves de rendu basées sur la présence d'un nom de classe ou de mixin dans le Sass. diff --git a/e2e/deferred-media.spec.js b/e2e/deferred-media.spec.js index 6d8352f..cb230c8 100644 --- a/e2e/deferred-media.spec.js +++ b/e2e/deferred-media.spec.js @@ -138,7 +138,7 @@ test("opening and editing one toolbox only reads its media and reuses it on retu test("the game drawer loads only the linked toolbox media", async ({ page }) => { const seeded = await setup(page); await page.goto("/#/games/mhwilds"); - await page.getByRole("button", { name: "Afficher la toolbox", exact: true }).click(); + await page.getByRole("tab", { name: "Toolbox", exact: true }).click(); const drawer = page.locator("#toolbox-drawer .drawer-panel"); await expect(drawer.locator('.image-preview img')).toHaveAttribute("src", seeded.modules["a:images"].images[0].dataUrl); await expect(drawer.locator(".annotation-marker")).toHaveCount(1); diff --git a/e2e/guide-checklist.spec.js b/e2e/guide-checklist.spec.js index 318bd6a..1b30782 100644 --- a/e2e/guide-checklist.spec.js +++ b/e2e/guide-checklist.spec.js @@ -89,7 +89,11 @@ async function copyVisibleResults(page) { async function openDrawer(page) { const drawer = page.locator("#toolbox-drawer"); - if (!await drawer.locator(".drawer-panel").isVisible()) await page.locator(".topbar-actions button").click(); + if (!await drawer.locator(".drawer-panel").isVisible()) { + const compactTrigger = page.getByRole("tab", { name: "Toolbox", exact: true }); + if (await compactTrigger.isVisible()) await compactTrigger.click(); + else await page.getByRole("button", { name: "Afficher la toolbox", exact: true }).click(); + } await expect(drawer.locator(".drawer-panel")).toBeVisible(); return drawer; } @@ -190,7 +194,7 @@ test("filtered results create a checklist in the linked active space without rep expect(await page.evaluate((key) => globalThis.localStorage.getItem(key), storageKey)).toBe(associationBefore); }); -for (const width of [1280, 390]) { +for (const width of [1280, 768]) { test(`drawer linking, page controls and persistent restoration at ${width}px`, async ({ page }) => { test.setTimeout(60000); await page.setViewportSize({ width, height: 900 }); @@ -241,7 +245,7 @@ for (const width of [1280, 390]) { const headingActionsBounds = await page.locator(".game-heading-actions").boundingBox(); expect(pageControlsBounds.y).toBeGreaterThanOrEqual(pageHeadingBounds.y); expect(pageControlsBounds.y + pageControlsBounds.height).toBeLessThanOrEqual(pageHeadingBounds.y + pageHeadingBounds.height); - if (width > 760) { + if (width > 1024) { expect(headingActionsBounds.height).toBeCloseTo(pageHeadingBounds.height, 0); expect(pageControlsBounds.y).toBeCloseTo(pageHeadingBounds.y, 0); } diff --git a/e2e/nds-patterns.spec.js b/e2e/nds-patterns.spec.js index 1324b13..33d06d8 100644 --- a/e2e/nds-patterns.spec.js +++ b/e2e/nds-patterns.spec.js @@ -69,7 +69,7 @@ test("badges, notices, progress and chips expose meaningful visual states", asyn await expect(chip.locator("img")).toHaveCSS("height", "16px"); }); -for (const width of [1280, 390]) { +for (const width of [1440, 1280, 768]) { test(`overlays fit, scroll internally and preserve stacking at ${width}px`, async ({ page }) => { await page.setViewportSize({ width, height: 800 }); await mountStyles(page, `
@@ -88,17 +88,17 @@ for (const width of [1280, 390]) { await page.locator("body").evaluate((element) => element.classList.add("is-modal-open")); await expect(page.locator("body")).toHaveCSS("overflow", "hidden"); - await mountStyles(page, `
+ await mountStyles(page, `
Drawer
`); const drawer = page.locator(".drawer-panel"); await expectFits(drawer); - await expect(drawer).toHaveCSS("top", width <= 760 ? "110px" : "68px"); + await expect(drawer).toHaveCSS("top", "68px"); await expect(drawer).toHaveCSS("position", "fixed"); await expect(drawer).toHaveCSS("overflow-y", "auto"); await expect(drawer).toHaveCSS("backdrop-filter", "blur(10px)"); - await expect(drawer).toHaveCSS("width", width < 700 ? `${width}px` : "700px"); - await expect(page.locator(".drawer-resize-handle")).toHaveCSS("display", width < 700 ? "none" : "block"); + await expect(drawer).toHaveCSS("width", width < 1440 ? `${width - (width <= 1024 ? 72 : 248)}px` : "700px"); + await expect(page.locator(".drawer-resize-handle")).toHaveCSS("display", width < 1440 ? "none" : "block"); await page.locator(".drawer").evaluate((element) => element.setAttribute("aria-hidden", "true")); await expect(drawer).toBeHidden(); diff --git a/e2e/style-layouts.spec.js b/e2e/style-layouts.spec.js index d687f75..b7771e1 100644 --- a/e2e/style-layouts.spec.js +++ b/e2e/style-layouts.spec.js @@ -35,29 +35,60 @@ test("calculator layout follows the tool width rather than its location", async await expect(tool.locator(".calculator-result")).toHaveCSS("min-height", "72px"); }); -for (const width of [1280, 900, 390]) { +test("toolbox columns follow the toolbox content width", async ({ page }) => { + await page.setViewportSize({ width: 1280, height: 720 }); + await mountStyles(page, `
+
Layout
+
A
B
+
`); + const toolbox = page.locator(".toolbox-page"); + const modules = toolbox.locator(".modules"); + await columns(modules, 2); + await expect(toolbox.locator(".modules-toolbar")).toBeVisible(); + await toolbox.evaluate((element) => { element.style.width = "899px"; }); + await columns(modules, 1); + await expect(toolbox.locator(".modules-toolbar")).toBeHidden(); + await expect(toolbox.locator(".module-column").first()).toHaveCSS("display", "contents"); +}); + +for (const width of [1920, 1280, 1025, 1024, 960, 768]) { test(`home, about and library retain their responsive layout at ${width}px`, async ({ page }) => { await page.setViewportSize({ width, height: 900 }); await page.goto("/"); const onboarding = page.locator(".home-onboarding"); await expectFits(onboarding); - await columns(page.locator(".home-onboarding-layout"), width <= 760 ? 1 : 2); + const hero = page.locator(".hero"); + const heroContent = hero.locator(":scope > div").first(); + const heroStats = hero.locator(".hero-stats"); + await columns(hero, width <= 1024 ? 1 : 2); + const [heroContentBounds, heroStatsBounds] = await Promise.all([heroContent.boundingBox(), heroStats.boundingBox()]); + if (width <= 1024) { + expect(heroStatsBounds.y).toBeGreaterThanOrEqual(heroContentBounds.y + heroContentBounds.height); + expect(heroStatsBounds.x).toBeCloseTo(heroContentBounds.x, 0); + } else { + expect(heroStatsBounds.x).toBeGreaterThan(heroContentBounds.x + heroContentBounds.width); + } + await columns(page.locator(".home-onboarding-layout"), width <= 1024 ? 1 : 2); await expect(page.locator(".home-onboarding-slider figcaption")).toHaveCSS("position", "absolute"); await expect(page.locator(".home-onboarding-dots")).toHaveCSS("display", "flex"); await expect(page.locator(".home-onboarding-slider img")).toHaveCSS("object-fit", "cover"); + await expect(page.locator(".home-visual")).toHaveCSS("display", width <= 1024 ? "none" : "grid"); + await expect(page.locator(".origin-copy")).toHaveCSS("border-right-width", width <= 1024 ? "0px" : "2px"); + await columns(page.locator(".origin-section"), width <= 1024 ? 1 : 2); const side = page.locator(".sidebar"); - await expect(side).toHaveCSS("display", width <= 760 ? "none" : "flex"); - if (width > 760) { + await expect(side).toHaveCSS("display", "flex"); + { const responsiveCompact = width <= 1024; - await expect(side).not.toHaveAttribute("data-variant"); + if (responsiveCompact) await expect(side).toHaveAttribute("data-variant", "compact"); + else await expect(side).not.toHaveAttribute("data-variant"); await expect(side).toHaveCSS("width", responsiveCompact ? "72px" : "248px"); await expect(page.locator(".sidebar-mascot")).toHaveCSS("display", responsiveCompact ? "none" : "block"); const secondaryLinks = page.locator(".sidebar-secondary-links"); await expect(secondaryLinks).toHaveCSS("display", "grid"); await expect(page.locator(".sidebar-about-link")).toHaveCount(3); await expect(page.locator(".sidebar-about-link strong").first()).toHaveCSS("display", responsiveCompact ? "none" : "block"); - await expect(page.locator(".sidebar-note")).toHaveCSS("display", responsiveCompact ? "none" : "block"); - await expect(page.locator(".sidebar-storage-actions")).toHaveCSS("flex-direction", "row"); + await expect(page.locator(".sidebar-note")).toHaveCSS("display", "block"); + await expect(page.locator(".sidebar-storage-actions")).toHaveCSS("flex-direction", responsiveCompact ? "column" : "row"); await expect(page.locator(".sidebar-action-button")).toHaveCount(2); await expect(page.locator(".nav-item")).toHaveCount(3); await expect(page.locator(".nav-item strong").first()).toHaveCSS("display", responsiveCompact ? "none" : "block"); @@ -83,12 +114,26 @@ for (const width of [1280, 900, 390]) { await expect(page.locator(".about-tool-item .module-icon").first()).toHaveCSS("width", "34px"); await page.goto("/#/library"); await expectFits(page.locator(".library-page")); - await columns(page.locator(".library-doc-layout"), width <= 760 ? 1 : 2); + await columns(page.locator(".library-doc-layout"), width <= 1024 ? 1 : 2); + await columns(page.locator(".library-example-layout.has-legend").first(), width <= 1024 ? 1 : 2); expect(await page.locator("body").evaluate((element) => element.scrollWidth)).toBeLessThanOrEqual(width); }); } -for (const width of [1280, 390]) { +for (const width of [640, 390]) { + test(`below the validated width the compact sidebar remains available without phone navigation at ${width}px`, async ({ page }) => { + await page.setViewportSize({ width, height: 720 }); + await page.goto("/#/games/aniimo/catalog"); + await expect(page.locator(".sidebar")).toBeVisible(); + await expect(page.locator(".sidebar")).toHaveCSS("width", "72px"); + await expect(page.locator(".mobile-nav")).toHaveCount(0); + await expect(page.locator(".route-content-view")).toBeVisible(); + await expect(page.locator(".compact-game-view-switch")).toBeVisible(); + expect(await page.evaluate(() => globalThis.document.documentElement.scrollWidth)).toBeLessThanOrEqual(width); + }); +} + +for (const width of [1280, 768]) { test(`game grids and toolbox columns adapt without horizontal overflow at ${width}px`, async ({ page }) => { await page.setViewportSize({ width, height: 900 }); await mountStyles(page, `
diff --git a/e2e/toolbox-cover.spec.js b/e2e/toolbox-cover.spec.js index 86ee94b..70506c9 100644 --- a/e2e/toolbox-cover.spec.js +++ b/e2e/toolbox-cover.spec.js @@ -97,7 +97,7 @@ test("cancelled and unreadable replacements preserve the cover and allow selecti test("game association takes precedence without discarding the custom cover", async ({ page }) => { await page.goto("/#/games/mhwilds"); - await page.getByRole("button", { name: "Afficher la toolbox", exact: true }).click(); + await page.getByRole("tab", { name: "Toolbox", exact: true }).click(); const drawer = page.locator("#toolbox-drawer .drawer-panel"); await importToolbox(page, "Linked cover", drawer); await expect(drawer.getByRole("heading", { name: "Linked cover" })).toBeVisible(); @@ -111,7 +111,7 @@ test("game association takes precedence without discarding the custom cover", as await expect(page.locator(".toolbox-game-icon img")).toHaveAttribute("src", gameCover); await expect(picker(page)).toHaveCount(0); await page.goto("/#/games/mhwilds"); - await page.getByRole("button", { name: "Afficher la toolbox", exact: true }).click(); + await page.getByRole("tab", { name: "Toolbox", exact: true }).click(); await drawer.getByRole("button", { name: "Lier une toolbox", exact: true }).click(); const dialog = page.getByRole("dialog", { name: "Lier une toolbox", exact: true }); await dialog.getByLabel("Toolbox associée").selectOption(""); diff --git a/e2e/toolbox-drawer-layout.spec.js b/e2e/toolbox-drawer-layout.spec.js index 5fbd50d..dc6ee0a 100644 --- a/e2e/toolbox-drawer-layout.spec.js +++ b/e2e/toolbox-drawer-layout.spec.js @@ -1,11 +1,16 @@ -// Rôle : vérifie la réservation hybride, le redimensionnement et le mode mobile du drawer toolbox. +// Rôle : vérifie le panneau large et la bascule guide/toolbox en fenêtre compacte. import { test, expect } from "@playwright/test"; async function openDrawer(page) { - const trigger = page.getByRole("button", { name: "Afficher la toolbox", exact: true }); + await page.locator(".topbar-actions").waitFor(); + const compactTrigger = page.getByRole("tab", { name: "Toolbox", exact: true }); + const trigger = await compactTrigger.isVisible() + ? compactTrigger + : page.getByRole("button", { name: "Afficher la toolbox", exact: true }); await expect(trigger).toBeVisible(); await trigger.click(); - await expect(page.getByRole("button", { name: "Masquer la toolbox", exact: true })).toHaveAttribute("aria-pressed", "true"); + if (await compactTrigger.isVisible()) await expect(compactTrigger).toHaveAttribute("aria-selected", "true"); + else await expect(page.getByRole("button", { name: "Masquer la toolbox", exact: true })).toHaveAttribute("aria-pressed", "true"); const drawer = page.locator("#toolbox-drawer"); await expect(drawer.locator(".drawer-panel")).toBeVisible(); return drawer; @@ -20,8 +25,8 @@ async function resizeDrawer(page, deltaX) { await page.mouse.up(); } -test("drawer reserves 700px while additional width overlays the page", async ({ page }) => { - await page.setViewportSize({ width: 1280, height: 900 }); +test("wide drawer reserves 700px while additional width overlays the page", async ({ page }) => { + await page.setViewportSize({ width: 1440, height: 900 }); await page.goto("/#/games/mhwilds/monsters"); const drawer = await openDrawer(page); @@ -41,7 +46,7 @@ test("drawer reserves 700px while additional width overlays the page", async ({ const topbarBounds = await page.locator(".topbar").boundingBox(); expect(initialPanelBounds.width).toBeCloseTo(700, 0); expect(initialPanelBounds.x).toBeCloseTo(contentBounds.x + contentBounds.width - 700, 0); - expect(topbarBounds.x + topbarBounds.width).toBeCloseTo(1280, 0); + expect(topbarBounds.x + topbarBounds.width).toBeCloseTo(1440, 0); const search = page.locator(".nds-filter-search input").first(); await search.fill("rath"); @@ -55,7 +60,7 @@ test("drawer reserves 700px while additional width overlays the page", async ({ expect(expandedPanelBounds.x).toBeCloseTo(initialPanelBounds.x - 100, 0); expect(expandedMainBounds.x).toBeCloseTo(initialMainBounds.x, 0); expect(expandedMainBounds.width).toBeCloseTo(initialMainBounds.width, 0); - expect(await page.evaluate(() => globalThis.document.documentElement.scrollWidth)).toBeLessThanOrEqual(1280); + expect(await page.evaluate(() => globalThis.document.documentElement.scrollWidth)).toBeLessThanOrEqual(1440); await resizeDrawer(page, 300); await expect.poll(async () => (await panel.boundingBox()).width).toBeCloseTo(700, 0); @@ -71,15 +76,55 @@ test("drawer reserves 700px while additional width overlays the page", async ({ await expect.poll(async () => (await reopenedDrawer.locator(".drawer-panel").boundingBox()).width).toBeCloseTo(700, 0); }); -test("drawer becomes a non-resizable full-width overlay below 700px", async ({ page }) => { - await page.setViewportSize({ width: 390, height: 900 }); +test("compact game view switches between mounted guide and toolbox", async ({ page }) => { + await page.setViewportSize({ width: 960, height: 720 }); await page.goto("/#/games/mhwilds/monsters"); + const guide = page.locator(".route-content-view"); + const search = page.locator(".nds-filter-search input").first(); + await search.fill("rath"); + await page.evaluate(() => globalThis.window.scrollTo(0, 240)); + const guideScroll = await page.evaluate(() => globalThis.window.scrollY); + const viewSwitch = page.locator(".compact-game-view-switch"); + const guideTab = page.getByRole("tab", { name: "Guide" }); + const toolboxTab = page.getByRole("tab", { name: "Toolbox", exact: true }); + await expect(guideTab).toHaveAttribute("aria-selected", "true"); + await expect(viewSwitch).toHaveCSS("min-width", "184px"); + await expect(guideTab).toHaveCSS("min-height", "34px"); + await expect(toolboxTab).toHaveCSS("padding-left", "10px"); + const [guideBounds, toolboxBounds] = await Promise.all([guideTab.boundingBox(), toolboxTab.boundingBox()]); + expect(guideBounds.width).toBeCloseTo(toolboxBounds.width, 0); + await expect(guide).toBeVisible(); const drawer = await openDrawer(page); const panel = drawer.locator(".drawer-panel"); const bounds = await panel.boundingBox(); - expect(bounds.x).toBeCloseTo(0, 0); - expect(bounds.width).toBeCloseTo(390, 0); + expect(bounds.x).toBeCloseTo(72, 0); + expect(bounds.width).toBeCloseTo(888, 0); await expect(drawer.locator(".drawer-resize-handle")).toHaveCSS("display", "none"); - expect(await page.evaluate(() => globalThis.document.documentElement.scrollWidth)).toBeLessThanOrEqual(390); + await expect(toolboxTab).toHaveAttribute("aria-selected", "true"); + await expect(guide).toBeHidden(); + await guideTab.click(); + await expect(guide).toBeVisible(); + await expect(drawer).toBeHidden(); + await expect(drawer).toHaveCount(1); + await expect(search).toHaveValue("rath"); + await expect.poll(() => page.evaluate(() => globalThis.window.scrollY)).toBe(guideScroll); + expect(await page.evaluate(() => globalThis.document.documentElement.scrollWidth)).toBeLessThanOrEqual(960); +}); + +test("compact toolbox intent survives the 1440px transition", async ({ page }) => { + await page.setViewportSize({ width: 1439, height: 720 }); + await page.goto("/#/games/mhwilds/monsters"); + await openDrawer(page); + await page.setViewportSize({ width: 1440, height: 720 }); + const drawer = page.locator("#toolbox-drawer"); + await expect(drawer.locator(".drawer-panel")).toBeVisible(); + await expect(drawer.locator(".drawer-panel")).toHaveCSS("width", "700px"); + await expect(page.locator(".app-shell")).toHaveClass(/toolbox-drawer-open/); + await expect(page.getByRole("button", { name: "Masquer la toolbox", exact: true })).toBeFocused(); + + await page.setViewportSize({ width: 1439, height: 720 }); + await page.getByRole("tab", { name: "Guide" }).click(); + await page.setViewportSize({ width: 1440, height: 720 }); + await expect(drawer).toHaveCount(0); }); diff --git a/e2e/toolbox-spaces.spec.js b/e2e/toolbox-spaces.spec.js index 7395c3c..b6aa451 100644 --- a/e2e/toolbox-spaces.spec.js +++ b/e2e/toolbox-spaces.spec.js @@ -193,13 +193,13 @@ test("the linked game drawer shares the persisted active space", async ({ page } }, { mhwilds: "drawer-spaces" }); await page.goto("/#/games/mhwilds"); - await page.getByRole("button", { name: "Afficher la toolbox", exact: true }).click(); + await page.getByRole("tab", { name: "Toolbox", exact: true }).click(); const drawer = page.locator("#toolbox-drawer"); await expect(drawer.getByRole("tab", { name: "Boss" })).toHaveAttribute("aria-selected", "true"); await expect(drawer.locator("[data-module-id='a']")).toBeVisible(); await drawer.getByRole("tab", { name: "Défaut" }).click(); await expect(drawer.locator("[data-module-id='a']")).toHaveCount(0); await page.reload(); - await page.getByRole("button", { name: "Afficher la toolbox", exact: true }).click(); + await page.getByRole("tab", { name: "Toolbox", exact: true }).click(); await expect(page.locator("#toolbox-drawer").getByRole("tab", { name: "Défaut" })).toHaveAttribute("aria-selected", "true"); }); diff --git a/e2e/toolbox.spec.js b/e2e/toolbox.spec.js index acd6ff1..1ceae4a 100644 --- a/e2e/toolbox.spec.js +++ b/e2e/toolbox.spec.js @@ -204,7 +204,7 @@ test("loads randomizer tabs after module split", async ({ page }) => { test("creates a game-linked toolbox from the drawer", async ({ page }) => { await page.goto("/#/games/mhwilds"); await expect(page.getByRole("heading", { name: /Monster Hunter.*Wilds/ })).toBeVisible(); - await page.getByRole("button", { name: "Afficher la toolbox", exact: true }).click(); + await page.getByRole("tab", { name: "Toolbox", exact: true }).click(); const drawer = page.locator("#toolbox-drawer .drawer-panel"); await expect(drawer).toBeVisible(); @@ -216,13 +216,13 @@ test("creates a game-linked toolbox from the drawer", async ({ page }) => { await expect(drawer.getByRole("heading", { name: /Monster Hunter.*Wilds/ })).toBeVisible(); await expect(drawer.locator("[data-module-type='memos']")).toBeVisible(); await expect(drawer.locator("[data-module-type='links']")).toBeVisible(); - await expect(page.getByRole("button", { name: "Masquer la toolbox", exact: true })).toBeVisible(); + await expect(page.getByRole("tab", { name: "Toolbox", exact: true })).toHaveAttribute("aria-selected", "true"); }); test("links an available toolbox directly from the empty game drawer", async ({ page }) => { await createToolbox(page, "Toolbox déjà liée"); await page.goto("/#/games/mhwilds"); - await page.getByRole("button", { name: "Afficher la toolbox", exact: true }).click(); + await page.getByRole("tab", { name: "Toolbox", exact: true }).click(); const drawer = page.locator("#toolbox-drawer .drawer-panel"); await expect(drawer.getByRole("heading", { name: "Ou associer une toolbox déjà existante" })).toBeVisible(); @@ -232,7 +232,7 @@ test("links an available toolbox directly from the empty game drawer", async ({ await createToolbox(page, "Toolbox libre"); await page.goto("/#/games/diablo4"); - await page.getByRole("button", { name: "Afficher la toolbox", exact: true }).click(); + await page.getByRole("tab", { name: "Toolbox", exact: true }).click(); await expect(drawer.getByLabel("Toolbox disponible").getByRole("option", { name: "Toolbox déjà liée" })).toHaveCount(0); await drawer.getByLabel("Toolbox disponible").selectOption({ label: "Toolbox libre" }); diff --git a/tests/helpers/data-validation.mjs b/tests/helpers/data-validation.mjs index 7476926..3c94f8a 100644 --- a/tests/helpers/data-validation.mjs +++ b/tests/helpers/data-validation.mjs @@ -76,14 +76,15 @@ export function validateSiteContent(site) { "navigation.games", "navigation.library", "navigation.about", - "navigation.mobileLibrary", - "navigation.mobileGames", "sidebar.badge", "sidebar.note", "topbar.dashboard", "topbar.toolbox", "topbar.library", "topbar.games", + "topbar.gameViewLabel", + "topbar.guideView", + "topbar.toolboxView", "gamesPage.eyebrow", "gamesPage.title", "gamesPage.description", diff --git a/tests/static-app.test.mjs b/tests/static-app.test.mjs index 3eaae0c..3be6f4d 100644 --- a/tests/static-app.test.mjs +++ b/tests/static-app.test.mjs @@ -34,7 +34,9 @@ test("vite entrypoint and app shell are wired", async () => { assert.match(shell, /dragon-sidebar\.png/); assert.match(shell, /ImportButton/); assert.match(shell, /compactSidebar/); - assert.match(shell, /compactSidebar = Boolean\(drawerGameId\)/); + assert.match(shell, /reducedSidebar/); + assert.match(shell, /compact-game-view-switch/); + assert.doesNotMatch(shell, /mobile-nav/); assert.doesNotMatch(shell, /import\.meta\.env\.DEV \|\| Boolean\(drawerGameId\)/); assert.match(shell, /data-variant=\{compactSidebar \? "compact"/); assert.match(shell, /toolbox-drawer-open/); diff --git a/tests/toolbox-alert-visibility.test.mjs b/tests/toolbox-alert-visibility.test.mjs new file mode 100644 index 0000000..3f6ab85 --- /dev/null +++ b/tests/toolbox-alert-visibility.test.mjs @@ -0,0 +1,14 @@ +// Rôle : vérifie que les alertes visibles suivent la vue toolbox réellement affichée. +import test from "node:test"; +import assert from "node:assert/strict"; +import { getVisibleToolboxIds } from "../website/src/hooks/useToolboxAlerts.js"; + +test("a mounted compact drawer is visible only while its toolbox view is selected", () => { + const links = { mhwilds: "linked" }; + assert.deepEqual([...getVisibleToolboxIds("/games/mhwilds/monsters", "", links)], []); + assert.deepEqual([...getVisibleToolboxIds("/games/mhwilds/monsters", "mhwilds", links)], ["linked"]); +}); + +test("a full toolbox page remains visible independently of the game drawer", () => { + assert.deepEqual([...getVisibleToolboxIds("/toolbox/personal", "", {})], ["personal"]); +}); diff --git a/website/public/data/site.json b/website/public/data/site.json index 29dc17c..8f7b75d 100644 --- a/website/public/data/site.json +++ b/website/public/data/site.json @@ -8,9 +8,7 @@ "toolboxes": "Toolboxes", "games": "Jeux", "library": "Librairie", - "about": "C'est quoi Sokko G ?", - "mobileLibrary": "Lib.", - "mobileGames": "Infos" + "about": "C'est quoi Sokko G ?" }, "sidebar": { "badge": "Local only", @@ -20,7 +18,10 @@ "dashboard": "Dashboard", "toolbox": "Toolboxes", "library": "Librairie", - "games": "Informations jeu" + "games": "Informations jeu", + "gameViewLabel": "Vue de la page jeu", + "guideView": "Guide", + "toolboxView": "Toolbox" }, "gamesPage": { "eyebrow": "Pages informatives", diff --git a/website/src/components/Shell.jsx b/website/src/components/Shell.jsx index 30adc47..4c70372 100644 --- a/website/src/components/Shell.jsx +++ b/website/src/components/Shell.jsx @@ -1,18 +1,48 @@ // Rôle : structure le layout global avec sidebar, topbar, navigation et contenu. +import { useEffect, useRef } from "react"; import { Icon } from "./Icon.jsx"; import { ImportButton } from "./ImportButton.jsx"; import { Tooltip } from "./Tooltip.jsx"; -export function Shell({ route, content, games, drawerGameId = "", actions, children }) { +export function Shell({ route, content, games, drawerGameId = "", drawerVisible = false, compactGameLayout = false, reducedSidebar = false, actions, children }) { const gameId = route.split("/")[1] === "games" ? route.split("/")[2] || "" : ""; const game = games.find((item) => item.id === gameId); const topbarLabel = route === "/design-system" && import.meta.env.DEV ? "Design system" : route.startsWith("/toolbox") ? content.topbar.toolbox : route.startsWith("/games") ? content.topbar.games : route === "/library" ? content.topbar.library : content.topbar.dashboard; - const toolboxOpen = Boolean(game && drawerGameId === game.id); + const toolboxOpen = Boolean(game && drawerGameId === game.id && drawerVisible); const toolboxLabel = toolboxOpen ? "Masquer la toolbox" : "Afficher la toolbox"; - const compactSidebar = Boolean(drawerGameId); + const compactSidebar = Boolean(reducedSidebar || (!compactGameLayout && toolboxOpen)); + const compactToolboxVisible = Boolean(compactGameLayout && toolboxOpen); + const guideTabRef = useRef(null); + const toolboxTabRef = useRef(null); + const wideToolboxButtonRef = useRef(null); + const focusedViewControlRef = useRef(""); + const previousCompactLayoutRef = useRef(compactGameLayout); + + useEffect(() => { + const trackFocus = (event) => { + if (event.target.closest?.(".compact-game-view-switch")) focusedViewControlRef.current = "compact"; + else if (event.target.closest?.(".toolbox-button")) focusedViewControlRef.current = "wide"; + else focusedViewControlRef.current = ""; + }; + document.addEventListener("focusin", trackFocus); + return () => document.removeEventListener("focusin", trackFocus); + }, []); + + useEffect(() => { + const activeElement = document.activeElement; + const layoutChanged = previousCompactLayoutRef.current !== compactGameLayout; + previousCompactLayoutRef.current = compactGameLayout; + if (layoutChanged && compactGameLayout && focusedViewControlRef.current === "wide") { + (compactToolboxVisible ? toolboxTabRef.current : guideTabRef.current)?.focus(); + } else if (compactGameLayout && !compactToolboxVisible && activeElement?.closest?.("#toolbox-drawer")) { + guideTabRef.current?.focus(); + } else if (layoutChanged && !compactGameLayout && focusedViewControlRef.current === "compact") { + wideToolboxButtonRef.current?.focus(); + } + }, [compactGameLayout, compactToolboxVisible]); return ( -
+
)}
{children}
-
); } diff --git a/website/src/features/toolboxes/ToolboxPages.jsx b/website/src/features/toolboxes/ToolboxPages.jsx index 374d81e..2f78496 100644 --- a/website/src/features/toolboxes/ToolboxPages.jsx +++ b/website/src/features/toolboxes/ToolboxPages.jsx @@ -442,7 +442,7 @@ function ToolboxView({ siteContent, toolbox, toolboxGame, embedded, actions, sto ); } -export function ToolboxDrawer({ gameId, game, siteContent, toolboxes, links, actions, storageUsage, storageReady = true, getModuleData, updateToolbox, updateModuleData, addImageFiles }) { +export function ToolboxDrawer({ gameId, game, siteContent, toolboxes, links, actions, storageUsage, storageReady = true, getModuleData, updateToolbox, updateModuleData, addImageFiles, visible = true, compact = false }) { const checklist = useGuideChecklist(); const guideChecklist = checklist.available && checklist.guideId.split("/")[0] === gameId ? checklist : undefined; const selectedId = links[gameId] || ""; @@ -483,7 +483,7 @@ export function ToolboxDrawer({ gameId, game, siteContent, toolboxes, links, act } return ( -