From 3f72f152c76bb5151b596621d2ed3059390637b5 Mon Sep 17 00:00:00 2001 From: Shinuwa Date: Tue, 28 Jul 2026 10:39:05 +0200 Subject: [PATCH] update docs and agents --- AGENTS.md | 6 ++++ DESIGN_SYSTEM.md | 94 +++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 88 insertions(+), 12 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index cf59dc6..a9356d9 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -9,6 +9,10 @@ Avant de modifier un outil toolbox, le stockage IndexedDB, l'import/export ou le - `docs/STORAGE_SCHEMA.md` - `docs/FEATURE_CHECKLIST.md` +Avant de modifier le style, les composants UI, les layouts, les boutons, cards, panels, hovers, scrollbars ou notifications, lire : + +- `DESIGN_SYSTEM.md` + Après ce type de modification, mettre à jour ces documents si le format ou le workflow change. ## Contenu éditable @@ -48,6 +52,8 @@ Quand un outil est ajouté ou modifié : Le style est en Sass dans `website/src/styles/`. +`DESIGN_SYSTEM.md` est la référence visuelle du projet et doit rester synchronisé avec les patterns réellement utilisés. + Privilégier : - les tokens existants ; diff --git a/DESIGN_SYSTEM.md b/DESIGN_SYSTEM.md index a9e3538..77f3e05 100644 --- a/DESIGN_SYSTEM.md +++ b/DESIGN_SYSTEM.md @@ -139,7 +139,61 @@ Style courant : Le mot visible cote utilisateur est **outil**, pas **module**. Le terme module reste acceptable uniquement dans le code. -## 8. Panneaux De Section +### Outils En Deux Colonnes + +Les outils avec controles a gauche et resultats a droite doivent reutiliser les classes generiques `tool-split-*`. + +Exemples actuels : + +- calculateur ; +- timer. + +Regles : + +- ratio de base 35 / 65 entre controles et resultats ; +- panneau gauche compact, sans hauteur artificielle inutile ; +- panneau droit scrollable uniquement quand l'utilisateur active le switch dedie ; +- hauteur scrollable cible : environ 450 px ; +- boutons reset, copie, scroll et tri alignes en haut a droite du panneau de resultats ; +- edition inline des libelles plutot que boutons ou alertes navigateur ; +- styles specifiques autorises uniquement pour la logique propre a l'outil. + +### Timer + +Le timer combine chronometre a etapes et comptes a rebours multiples. + +Regles UI : + +- tabs compactes avec icones uniquement et tooltips ; +- chronometre avec centiemes visibles en plus petit dans le timer principal ; +- les temps sauvegardes gardent une taille uniforme ; +- compte a rebours sans centiemes ; +- types visibles : `Duree`, `Heure precise`, `Pattern horaire`, `Intervalle` ; +- les libelles au-dessus des champs `hh:mm:ss` restent accessibles en `sr-only`, mais ne sont pas visibles ; +- les boutons de controle utilisent les icones `play-circle`, `pause-circle`, `record-circle`, `stop-circle`, `refresh`, `sort-time`, `scrollable`. + +Alertes timer : + +- switch a 3 etats par compte a rebours : aucune alerte, alerte si la toolbox est visible, alerte globale site ; +- le garde-fou ne se base pas sur le temps restant, mais sur la frequence configuree ; +- le garde-fou bloque uniquement les comptes a rebours recurrents (`Pattern horaire`, `Intervalle`) si la repetition est inferieure a 5 minutes ; +- un `Pattern horaire` comme `X:24:X` cible `hh:24:00` et se repete toutes les heures. + +## 8. Tabs Et Switchs + +Tabs : + +- utiliser le composant commun quand un outil doit alterner entre plusieurs modes ; +- icones seules quand les labels sont evidents ou fournis en tooltip ; +- etat actif sobre : bordure doree, fond legerement dore/violet, pas de gros glow. + +Switchs : + +- les switchs binaires utilisent l'icone a gauche et le rail a droite quand ils controlent un mode technique comme `scrollable` ; +- les switchs a plusieurs etats doivent rester compacts, avec icones et tooltips ; +- les etats desactives doivent etre clairement attenues et sans etat actif dore. + +## 9. Panneaux De Section Les grandes sections non repetitives, comme le dialogue d'origine et les sections de presentation, utilisent `.nebula-panel`. @@ -151,7 +205,7 @@ Style courant : - pas de hover sur les panneaux de lecture ; - implementation via le mixin `gold-panel-frame` dans `website/src/styles/_mixins.scss`. -## 9. Boutons +## 10. Boutons ### Primary @@ -201,7 +255,7 @@ Les icones utilisent `currentColor` via `.ui-icon`. - hover danger : icone blanche + glow rouge discret ; - utiliser les SVG de `website/public/static/icons`. -## 10. Formulaires Et Checkbox +## 11. Formulaires Et Checkbox Inputs et textareas : @@ -219,7 +273,12 @@ Checkbox : - etat coche avec gradient dore/violet et coche blanche ; - spacing adapte dans les filtres. -## 11. Navigation +Accessibilite : + +- utiliser `.sr-only` pour conserver un label utile sans l'afficher ; +- ne pas retirer les labels accessibles au profit du visuel uniquement. + +## 12. Navigation Sidebar : @@ -230,7 +289,7 @@ Sidebar : Le nom de marque affiche `Sokko` en blanc et `G` en dore. Au hover, `Sokko` anime vers le dore de droite a gauche puis revient au hover out. -## 12. Filtres Et Tableaux +## 13. Filtres Et Tableaux Filtres : @@ -246,7 +305,7 @@ Tableaux : - bordures fines ; - lisibilite prioritaire sur la decoration. -## 13. Toolboxes +## 14. Toolboxes Les toolboxes sont locales et stockees dans le navigateur. @@ -261,7 +320,7 @@ Regles UI : Les cards toolbox doivent garder une taille compacte. L'image/icone de cover est cliquable. -## 14. Donnees Jeux +## 15. Donnees Jeux Le contenu editorial editable doit rester dans : @@ -271,7 +330,7 @@ Le contenu editorial editable doit rester dans : Les retours a la ligne `\n` du JSON doivent etre rendus correctement. Le JSX ne doit pas contenir de contenu editorial long si une entree JSON existe deja. -## 15. Modales Et Drawer +## 16. Modales, Drawer Et Notifications Modales : @@ -286,7 +345,18 @@ Drawer toolbox : - overlay floute leger ; - les actions internes ne doivent pas fermer le drawer sauf action explicite. -## 16. Scrollbars +Notifications internes : + +- pas d'alerte navigateur ; +- utiliser les toasts internes globaux ; +- position configurable gauche/droite via le switch de la page toolboxes ; +- une nouvelle alerte s'empile au-dessus des precedentes ; +- limite visible : 5 toasts ; +- a la 6e alerte, fermer la plus ancienne ; +- duree d'affichage cible : 2 minutes, fermeture manuelle possible ; +- style plus visible que les confirmations simples : bordure conique animee, pulse leger, arrivee depuis le cote configure. + +## 17. Scrollbars Les scrollbars reprennent l'ancien rendu : @@ -316,7 +386,7 @@ Les scrollbars reprennent l'ancien rendu : Ne pas ajouter de rail noir visible ni de double bordure pres des panneaux. -## 17. Images Et Assets +## 18. Images Et Assets Regles : @@ -329,7 +399,7 @@ Regles : - les categories de jeu utilisent des images representatives, entieres et bien cadrees ; - eviter les images trop grandes dans les cards. -## 18. Accessibilite +## 19. Accessibilite Minimum attendu : @@ -341,7 +411,7 @@ Minimum attendu : - modales avec `role="dialog"` et `aria-modal="true"` ; - ne pas transmettre une information uniquement par couleur. -## 19. A Eviter +## 20. A Eviter - accents dores partout ; - hover trop lumineux sur tous les elements ;