Créer un tableau de bord de style Sonara avec les organisations Clerk et le transfert par TTS

L’édition précédente portait sur l’authentification et la persistance – des infrastructures que personne ne regarde vraiment. Ce chapitre traite de l’écran que les utilisateurs voient réellement après s’être connectés : le tableau de bord. L’objectif est de faire en sorte que cet espace d’accueil ressemble à un produit et non à une simple structure temporaire.

La barre latérale

La navigation se trouve dans une barre latérale rétractable. Elle peut se réduire à des icônes lorsque l’espace est limité, liste les destinations principales (Tableau de bord, Découvrir des voix, Texte à la parole, Clonage de voix) et place en haut le sélecteur d’organisation de Clerk.

Ce sélecteur joue un rôle essentiel ici. Chaque compte appartient à une organisation – il n’existe pas d’espaces de travail personnels isolés – donc le passage d’une équipe à l’autre s’effectue via ce contrôle situé dans la barre latérale, et non via une page de paramètres cachée. Il doit donc figurer dans la navigation principale.

Le pied de barre du panneau latéral contient le menu utilisateur, avec un petit bloc « Autres » en haut pour les Paramètres et l’aide. Les Paramètres n’ouvrent pas une page personnalisée ; ils lancent plutôt le panneau du profil organisationnel de Clerk. Récréer cette interface apporte peu d’avantages lorsque le fournisseur en propose déjà une solide.

L’état ouvert ou plié est enregistré dans un cookie afin qu’un renouvellement de page ne fasse pas apparaître brièvement la barre large avant qu’elle ne se referme. De tels détails de persistance permettent de distinguer une interface bien conçue d’un simple amas de composants.

Le fond

Derrière le contenu principal, une vague animée douce se déplace lentement. Elle est dessinée sur un canevas à l’aide de bruit simplex plutôt qu’avec une image bitmap en boucle, de sorte que le motif ne se répète pas visiblement. Les choix de palette restent dans des teintes de vert et de bleu ternes à faible opacité. L’interface desktop conserve cet effet ; sur mobile, il est masqué car les pixels comptent davantage que l’atmosphère.

<WavyBackground
  colors={["#2DD4BF", "#22D3EE", "#38BDF8", "#818CF8"]}
  blur={3}
  speed="slow"
  waveOpacity={0.1}
/>

La retenue est intentionnelle. Le mouvement se trouve derrière l’interface, avec une opacité faible et une vitesse lente — ce qui donne plutôt l’impression d’un travail soigné que celle d’une décoration à observer de près.

Le champ de texte

Le tableau de bord met en avant un champ de texte destiné à être copié puis transformé en parole. Il se trouve dans une carte dotée d’un bordure à dégradé doux (du rose au cyan). Pour que cette bordure paraisse comme un trait continu, il a fallu ajouter plusieurs couches ; le résultat doit ressembler à un seul bord plutôt qu’à une boîte plate.

Sous le champ, le compteur de caractères en temps réel ainsi que l’estimation du coût s’actualisent au fur et à mesure que l’utilisateur tape, en utilisant un tarif fixe par caractère. Le prix reste visible dès le départ, plutôt que d’apparaître uniquement sur une écran de confirmation ultérieur.

${(text.length * COST_PER_UNIT).toFixed(4)} estimated

Quelqu’un qui s’apprête à synthétiser des milliers de caractères voit le coût approximatif avant d’appuyer sur « générer », et non après.

À ce stade, le contrôle de génération n’appelle pas encore le modèle. Il redirige vers la page texte-voix en incluant le texte provisoire dans un paramètre de requête. La synthèse réelle n’a lieu qu’une fois que une voix et un modèle sont disponibles. La tâche du tableau de bord est de capturer le texte et de le transmettre.

Actions rapides

Sous le champ, une série de cartes d’exemples illustre l’utilisation du service pour raconter une histoire, enregistrer une publicité, diriger une scène de film, donner la voix à un personnage de jeu, présenter un podcast ou guider une méditation. Chaque carte propose un exemple court adapté à un cas d’usage spécifique. En l’activant, le texte-voix s’ouvre avec cet exemple déjà inséré.

{
  title: "Voice a Game Character",
  description: "Build immersive worlds with dynamic character voices",
  href: "/text-to-speech?text=Listen up, adventurer. The realm of Ashenvale is crumbling...",
}

Des exemples prêts à l’emploi valent mieux qu’une case vide accompagnée d’un tutoriel. Les utilisateurs curieux peuvent écouter un exemple de personnage de jeu sans avoir à créer eux-mêmes une instruction préalable — un simple clic suffit pour entendre du son.

Assemblage

Le en-tête, l’arrière-plan, les champs de saisie et les actions rapides composent la page du tableau de bord. Sur mobile, on trouve un en-tête simplifié (icône de menu et titre). Sur ordinateur, une salutation affichant le nom de la personne accompagnée de quelques liens de retour est visible.

Aucun de ces éléments n’est particulièrement original : une barre latérale, un arrière-plan, une zone de texte et des cartes d’exemples. Ensemble, ils créent la première impression après connexion et déterminent si l’utilisateur reste suffisamment longtemps pour générer de l’audio.

Le chapitre suivant traite de la page de synthèse vocale elle-même. Les modifications apportées dans ce chapitre sont regroupées en un seul commit pour la barre latérale du tableau de bord, le layout et la page d’accueil.