Primitives d'interface — Guide pratique
Si vous avez déjà regardé une application moderne en vous demandant « comment on appelle ce truc ? » — cette page est faite pour vous.
Chaque interface que vous utilisez est construite à partir d’un ensemble étonnamment restreint de briques réutilisables appelées primitives d’interface. Elles ont des noms. Des noms bizarres, parfois. Mais une fois que vous saisissez la métaphore, vous ne pouvez plus l’ignorer.
En Parlant~ utilise Mantine, une bibliothèque de composants React qui fournit toutes ces primitives clé en main. Voici votre guide pratique.
Celles qui ressemblent à du mobilier
Section intitulée « Celles qui ressemblent à du mobilier »Un toast est une petite notification qui surgit depuis le bord de l’écran, reste visible quelques secondes, puis disparaît en glissant. Comme un morceau de pain qui jaillit d’un grille-pain — sauf que la gravité fonctionne à l’envers et qu’il finit par y retourner.
Dans En Parlant~, les toasts apparaissent dans le coin inférieur droit (via @mantine/notifications de Mantine) pour des messages comme :
- « Base de données chargée avec succès » — pop
- « Voix TTS non configurée » — pop
- « Échec de connexion à Lichess » — pop, et vous êtes un peu triste
Vous ne les avez jamais demandés. Ils apparaissent, délivrent leur message et s’en vont. Ce sont les pigeons voyageurs du monde de l’interface.
Une card (carte) est un conteneur rectangulaire avec une bordure ou une ombre qui regroupe du contenu associé. Imaginez une fiche cartonnée posée sur un bureau — elle a des bords définis, elle contient une seule chose, et vous pouvez la saisir et la déplacer.
Dans En Parlant~, vous verrez des cartes pour :
- Les aperçus de parties dans le navigateur de bases de données (
GameCard) — noms des joueurs, résultat, date - L’éditeur de position (
EditingCard) — la carte que vous retournez pour configurer une position personnalisée - Les entrées de bases de données sur la page des bases — chaque base de données a sa propre carte dans une grille
Les cartes ont un cousin proche appelé Paper, qui est essentiellement une carte passée par l’école d’art. Même principe — un conteneur avec une bordure ou une ombre — mais avec moins de charge sémantique. Paper dit simplement « je suis une surface ». Il apparaît comme arrière-plan derrière les panneaux d’analyse et les affichages d’informations de bases de données.
Drawer / Sheet
Section intitulée « Drawer / Sheet »Non utilisé actuellement dans En Parlant~, mais bon à savoir : un drawer (tiroir) est un panneau qui coulisse depuis le bord de l’écran, comme un tiroir de bureau. (C’est tout. C’est toute la métaphore. Les designers d’interfaces étaient très littéraux ce jour-là.)
Celles qui vous barrent la route
Section intitulée « Celles qui vous barrent la route »Une modale est une boîte de dialogue qui exige votre attention. Elle grise l’arrière-plan et vous oblige à vous en occuper avant de faire quoi que ce soit d’autre. C’est le bambin des patterns d’interface — « REGARDE-MOI TOUT DE SUITE. »
En Parlant~ utilise des modales pour les moments qui nécessitent véritablement votre concentration :
- « Êtes-vous sûr de vouloir effacer toutes les données ? » (
ClearDataModal) — avec des cases à cocher pour choisir quelles données anéantir - « Une mise à jour est disponible » (
UpdateModal) — avec une barre de progression pendant le téléchargement - « Importer une partie » (
ImportModal) — collez un PGN, entrez un FEN, ou déposez un lien - « Créer un nouveau répertoire » (
CreateRepertoireModal) — nommez-le, configurez-le, c’est parti - « À propos d’En Parlant~ » (
About) — informations de version, crédits, le traditionnel tour des coulisses
Les modales disent : « C’est une conversation. On l’a maintenant. »
Un dialog est le cousin poli de la modale. Dans Mantine, ce sont essentiellement le même composant, mais en théorie du design d’interface, un dialog est plus petit et plus ciblé — une seule question et une réponse. « Enregistrer les modifications ? » Oui / Non. Terminé.
En Parlant~ utilise ConfirmModal pour ces moments rapides de oui ou non, comme confirmer que vous voulez abandonner les modifications non enregistrées.
Celles qui vont et viennent
Section intitulée « Celles qui vont et viennent »Un tooltip (infobulle) est une petite étiquette qui apparaît lorsque vous survolez quelque chose. C’est l’inconnu serviable qui vous souffle la réponse quand vous avez l’air perdu.
Les tooltips sont partout dans En Parlant~. Survolez pratiquement n’importe quel bouton icône et vous en obtiendrez un :
- Survolez le bouton ↻ → « Recharger »
- Survolez un chemin de fichier tronqué → le chemin complet apparaît
- Survolez un symbole d’annotation → ce que ce symbole signifie
- Survolez un coup dans le panneau d’analyse → un aperçu miniature de l’échiquier apparaît
Les tooltips sont le « pas besoin de manuel » original.
Un popover est un tooltip qui a fait des études supérieures. Au lieu d’afficher simplement un texte, il peut contenir n’importe quoi — des boutons, des images, voire un petit échiquier.
Dans En Parlant~, lorsque vous survolez un coup dans l’analyse du moteur, un popover affiche un aperçu de l’échiquier à cette position. C’est un tooltip, mais il a apporté des supports visuels.
Un menu est une liste d’actions qui apparaît lorsque vous cliquez (ou faites un clic droit) sur quelque chose. Vous les utilisez depuis l’aube de l’informatique — Fichier, Édition, Affichage. Vous connaissez la chanson.
En Parlant~ en propose deux variantes :
- Menus de la barre supérieure — la barre de menus classique Fichier / Édition / Affichage, construite avec le composant
Menude Mantine. Raccourcis clavier indiqués à droite. Un pattern de design si ancien qu’il est à la retraite. - Menus contextuels — faites un clic droit sur un coup dans l’arbre de la partie et vous obtenez des options comme Promouvoir la variante, Supprimer à partir d’ici et Copier la ligne. Ceux-ci utilisent la bibliothèque
mantine-contextmenupour un rendu soigné.
Les menus ont leur propre sous-vocabulaire : Menu.Target (l’élément sur lequel vous cliquez), Menu.Dropdown (la liste qui apparaît), Menu.Item (chaque option) et Menu.Divider (la fine ligne qui dit « nouvelle section »).
Celles qui organisent l’espace
Section intitulée « Celles qui organisent l’espace »Stack & Group
Section intitulée « Stack & Group »Ce sont le duo inséparable de la mise en page.
- Stack dispose les éléments verticalement — l’un au-dessus de l’autre. Comme empiler des livres.
- Group dispose les éléments horizontalement — côte à côte. Comme aligner des pièces d’échecs sur une étagère.
Ils apparaissent dans littéralement plus de 100 fichiers chacun. Ce sont les composants les plus courants de toute l’application. Chaque fois que les éléments sont soigneusement disposés, un Stack ou un Group en est responsable.
Flex est le couteau suisse cousin de Stack et Group. Quand les éléments doivent s’enrouler, s’étirer, se rétrécir, s’inverser ou autrement se comporter de manière inhabituelle, Flex intervient avec un contrôle total sur le modèle CSS Flexbox.
Utilisé dans la liste des coups du panneau d’analyse — ces séquences de coups qui s’enchaînent et coulent comme du texte ? C’est Flex qui fait le gros du travail.
Un Box est un <div> portant un haut-de-forme. Il ne fait rien tout seul — c’est juste un conteneur générique. Mais il accepte les props de style de Mantine, ce qui en fait un enveloppeur incroyablement pratique pour « j’ai besoin d’un truc autour de cet autre truc ».
Box apparaît dans plus de 150 fichiers. C’est le ruban adhésif de la bibliothèque de composants.
Fait exactement ce que son nom indique. Place quelque chose au centre. Horizontalement. Verticalement. Les deux. Point final.
Apparaît dans les états vides — quand aucun compte n’est lié, aucune base de données chargée, aucune donnée encore disponible. Une grande icône, un message, et Center qui s’assure que tout est parfaitement positionné. Personne n’aime un état vide décentré.
SimpleGrid
Section intitulée « SimpleGrid »Une grille toute simple. Vous lui indiquez le nombre de colonnes et elle dispose vos cartes dans une grille ordonnée qui se réorganise quand la fenêtre change de taille. La page des bases de données l’utilise pour disposer les cartes dans une grille responsive.
ScrollArea
Section intitulée « ScrollArea »Un conteneur qui défile quand son contenu déborde. On pourrait croire que c’est gratuit — et ça l’est presque, avec overflow: auto en CSS — mais ScrollArea ajoute des barres de défilement stylisées, un défilement avec inertie et la détection du débordement. Il enveloppe le panneau de l’arbre des coups, les lignes d’analyse, et partout où le contenu pourrait dépasser la hauteur de son conteneur.
AppShell
Section intitulée « AppShell »L’AppShell est la mise en page maîtresse — le squelette de l’application entière. Il définit où va l’en-tête, où va la barre latérale et où vit le contenu principal. Tout le reste s’imbrique dedans.
Vous ne l’utilisez qu’une seule fois. C’est la fondation de la maison.
Un Portal est un trou de ver magique. Il rend un composant en dehors de sa position normale dans l’arbre DOM et le place ailleurs — généralement à la racine du document. C’est ainsi que les popovers et les aperçus d’échiquier évitent d’être rognés par des conteneurs parents avec overflow: hidden.
Vous ne voyez jamais un Portal. Vous ne voyez que ses effets. C’est l’équipe technique des coulisses parmi les composants d’interface.
Celles avec lesquelles on interagit
Section intitulée « Celles avec lesquelles on interagit »Un rectangle cliquable avec du texte. Vous connaissez celui-ci. Dans Mantine, les boutons existent en plusieurs variantes :
- filled — couleur pleine, forte emphase. « Clique sur moi, je suis important. »
- outline — juste une bordure. « Je suis une option, mais sans pression. »
- subtle — à peine visible. « Je suis là si tu as besoin de moi. »
- default — un juste milieu neutre.
En Parlant~ les utilise tous dans plus de 150 fichiers. Le pattern le plus courant : un Group de boutons en bas d’une modale — « Annuler » (subtle) et « Confirmer » (filled). Un classique.
ActionIcon
Section intitulée « ActionIcon »Un ActionIcon est un bouton qui a abandonné son texte pour se consacrer entièrement au style icône. Il est compact, carré, et s’appuie sur son icône (plus un tooltip) pour communiquer sa fonction.
Boutons de barre d’outils, contrôles de panneaux, boutons de fermeture — tous des ActionIcons. C’est la manière la plus économe en espace de proposer une action.
Un Switch est un interrupteur qui ressemble à un petit interrupteur lumineux. Basculez-le à gauche, basculez-le à droite. Activé. Désactivé.
Dans les paramètres, les switches contrôlent les choix binaires :
- Son activé/désactivé
- Narration TTS activée/désactivée
- Mode sombre / mode clair
La métaphore physique est si réussie que même vos grands-parents la comprennent.
Un Slider est une piste avec une poignée que vous faites glisser d’avant en arrière pour sélectionner une valeur. Comme un bouton de volume qu’on aurait aplati.
En Parlant~ utilise des sliders pour :
- Taille de police — glissez pour ajuster
- Volume — glissez pour ajuster (évidemment)
- Cœurs CPU — combien de cœurs le moteur doit-il utiliser ?
- Mémoire hash — quelle quantité de RAM pour la table de hachage du moteur ?
Il existe aussi un RangeSlider avec deux poignées pour sélectionner un intervalle — utilisé pour filtrer les parties par classement Elo (par ex., 2000–2200) et par périodes.
SegmentedControl
Section intitulée « SegmentedControl »Une rangée de boutons où exactement un seul est sélectionné à la fois. C’est comme les présélections d’un autoradio — appuyez sur l’un, les autres se relâchent.
Utilisé pour basculer entre :
- Évaluation en centipions vs. pourcentages Victoire/Nulle/Défaite sur le graphique d’analyse
- Différents formats de notation des coups
- Nombre de lignes du moteur
Checkbox & Select
Section intitulée « Checkbox & Select »Vous les connaissez. Les cases à cocher pour « sélectionnez tout ce qui s’applique », les listes déroulantes Select pour « choisissez un élément dans cette liste ». Ils apparaissent dans les paramètres, les filtres et les formulaires à travers toute l’application. La modale d’effacement des données propose un ensemble de cases à cocher particulièrement satisfaisant où vous pouvez choisir votre propre destruction.
Autocomplete
Section intitulée « Autocomplete »Un champ de saisie qui suggère des complétions au fur et à mesure que vous tapez. La recherche de joueurs dans le navigateur de bases de données l’utilise — commencez à taper un nom et les joueurs correspondants apparaissent en dessous.
FileInput & DateInput
Section intitulée « FileInput & DateInput »FileInput ouvre un sélecteur de fichiers au clic — utilisé dans la modale d’importation pour charger des fichiers PGN. DateInput ouvre un calendrier pour sélectionner une date — utilisé pour filtrer les parties par date. Il existe aussi MonthPickerInput et YearPickerInput pour quand vous avez besoin de moins de précision (filtrage de la base Lichess par mois, filtrage de la base Masters par année).
Celles qui montrent la progression
Section intitulée « Celles qui montrent la progression »Barre de progression
Section intitulée « Barre de progression »Une barre horizontale qui se remplit de gauche à droite pour montrer l’avancement d’une opération. Utilisée lors des mises à jour de l’application (progression du téléchargement) et — plus créativement — pour afficher les probabilités Victoire/Nulle/Défaite dans le panneau d’analyse. Trois sections colorées (blanc, gris, noir) remplissent la barre proportionnellement. C’est un petit diagramme en barres déguisé en indicateur de progression.
Un Loader est une animation tournante qui dit « j’y travaille, donnez-moi une seconde ». Apparaît pendant le chargement des bases de données, la récupération des statistiques des joueurs, ou tout traitement asynchrone en cours.
Skeleton
Section intitulée « Skeleton »Un Skeleton est un espace réservé gris qui imite la forme du contenu qui n’est pas encore chargé. Au lieu d’un écran vide ou d’un spinner, vous voyez les contours fantômes des cartes et du texte qui seront là. C’est le plan architectural d’un état de chargement — « le vrai mobilier est en route. »
La page des bases de données utilise des skeletons pendant le chargement de la grille de cartes. Bien plus élégant qu’un simple spinner.
LoadingOverlay
Section intitulée « LoadingOverlay »Une couverture semi-transparente posée sur un composant pendant son chargement. Le graphique d’analyse l’utilise — vous pouvez encore voir le graphique derrière l’overlay, mais il est assombri, avec un spinner par-dessus. « Je suis toujours là, je me mets juste à jour. »
Celles qui étiquettent les choses
Section intitulée « Celles qui étiquettent les choses »Un Badge est une petite étiquette colorée — comme un badge nominatif lors d’une conférence. Dans En Parlant~, le composant SpeedBadge utilise des badges pour afficher les cadences de jeu avec un code couleur :
- 🩷 Rose — UltraBullet
- 🔴 Rouge — Bullet
- 🟠 Orange — Blitz
- 🟢 Vert — Rapid
- 🔵 Bleu — Classical
- 🟣 Violet — Correspondence
Chaque badge est minuscule, coloré et communique instantanément la cadence de la partie d’un seul coup d’œil.
Abréviation de keyboard (clavier). Affiche une touche de clavier avec ce style caractéristique de touche en relief. Utilisé dans les paramètres de raccourcis clavier pour afficher des combinaisons comme Ctrl + Z. C’est une recréation CSS d’une vraie touche physique de votre clavier. Délicieusement skeuomorphique.
Celles qui séparent et replient
Section intitulée « Celles qui séparent et replient »Une ligne horizontale qui sépare les sections. C’est tout. C’est une ligne. Mais c’est une ligne stylisée, et elle peut optionnellement comporter un texte au milieu — comme le séparateur « — OU — » dans la modale d’importation qui sépare « collez un PGN » de « entrez un FEN ».
Plus de trente fichiers utilisent Divider. Il s’avère que les choses ont souvent besoin d’être séparées.
Collapse
Section intitulée « Collapse »Un Collapse est une section qui se déplie et se replie avec une animation fluide. Cliquez pour révéler, cliquez pour masquer. Les options de filtrage de la base de données l’utilisent — vous n’avez pas toujours besoin de voir tous les filtres, ils se rangent donc derrière un Collapse jusqu’à ce que vous en ayez besoin.
Les primitives sophistiquées
Section intitulée « Les primitives sophistiquées »RichTextEditor
Section intitulée « RichTextEditor »Un éditeur de texte complet de type « tel écran, tel écrit », construit sur TipTap. Gras, italique, listes, tout y est. Utilisé pour rédiger des annotations de parties — ces notes de commentaire que vous ajoutez pour expliquer pourquoi un coup était brillant ou terrible.
C’est la seule primitive qui relève davantage de l’organisme composé que de la cellule isolée. Sous le capot, c’est TipTap + ProseMirror + le style Mantine. Mais du point de vue de l’utilisateur, c’est simplement un champ de texte où la mise en forme fonctionne.
AreaChart
Section intitulée « AreaChart »Issu de @mantine/charts (qui encapsule Recharts), l’AreaChart alimente le graphique d’évaluation — cette forme ondulante qui court le long du bas du panneau d’analyse. La zone blanche au-dessus de la ligne médiane signifie que les Blancs gagnent ; la zone noire en dessous signifie que les Noirs gagnent.
Vous pouvez cliquer sur n’importe quel point du graphique pour accéder directement à ce coup. La visualisation interactive de données rencontre l’analyse d’échecs. Il propose même des tooltips personnalisés et des lignes de référence marquant les phases de la partie (ouverture → milieu de partie → finale).
DataTable
Section intitulée « DataTable »Via la bibliothèque mantine-datatable — un tableau de données complet avec tri, pagination, sélection de lignes et filtrage. Alimente la liste de parties, la liste de joueurs et la liste de tournois du navigateur de bases de données. C’est un tableur qui sait qu’il est dans une application d’échecs.
Les primitives invisibles
Section intitulée « Les primitives invisibles »Certaines primitives n’affichent rien de visible par elles-mêmes, mais font fonctionner tout le reste :
- MantineProvider — enveloppe l’application entière et fournit le thème (couleurs, mode sombre, valeurs par défaut des composants)
- Portal — téléporte le contenu rendu vers une autre partie du DOM
- useHotkeys — un hook (pas un composant) qui connecte les raccourcis clavier
- useForm — gère l’état des formulaires, la validation et le traitement des erreurs
- useDebouncedValue — attend que vous arrêtiez de taper avant de lancer une recherche. Le hook poli.
L’inventaire complet
Section intitulée « L’inventaire complet »Pour référence, voici chaque famille de primitives utilisée dans En Parlant~, regroupée par fonction :
| Catégorie | Primitives |
|---|---|
| Mise en page | AppShell, Box, Center, Flex, Group, Stack, SimpleGrid, ScrollArea, Portal |
| Surfaces | Card, Paper |
| Superpositions | Modal, Tooltip, Popover, Menu, ContextMenu, LoadingOverlay |
| Notifications | Toast (via @mantine/notifications) |
| Boutons | Button, ActionIcon, CloseButton, ThemeIcon |
| Champs de saisie | TextInput, Textarea, NumberInput, Select, Autocomplete, Checkbox, Switch, Slider, RangeSlider, SegmentedControl, FileInput, DateInput, MonthPickerInput, YearPickerInput |
| Affichage de données | Table, DataTable, Badge, Code, Kbd, Rating, Image |
| Typographie | Text, Title, Anchor |
| Progression | Progress, Loader, Skeleton |
| Structure | Divider, Collapse |
| Contenu riche | RichTextEditor (TipTap), AreaChart (Recharts) |
| Thème | MantineProvider, createTheme, useColorScheme |
| Hooks | useForm, useHotkeys, useToggle, useDebouncedValue, useClickOutside, useElementSize |
Le tout provient de Mantine v8 et de ses packages écosystème : @mantine/core, @mantine/notifications, @mantine/dates, @mantine/charts, @mantine/form, @mantine/tiptap, mantine-datatable et mantine-contextmenu.
Maintenant vous savez
Section intitulée « Maintenant vous savez »La prochaine fois que vous verrez un petit message glisser depuis le coin de votre écran — c’est un toast. Le rectangle autour d’un aperçu de partie — c’est une card. Les formes grises qui scintillent avant le chargement du contenu — ce sont des skeletons.
Une fois que vous connaissez les noms, vous les voyez partout. Dans chaque application. Sur chaque site web. La même petite vingtaine de primitives, réarrangées de mille manières différentes.
Ce sont des Lego, jusqu’au bout.