sh0.dev possède plus de 180 endpoints API, 10 crates Rust, une orchestration Docker, des moteurs de sauvegarde, une intégration serveur MCP, et un système de chat IA. Le backlog est infini. Il y a toujours une autre fonctionnalité à construire.
Aujourd'hui, nous avons passé une session entière à uniformiser les barres latérales.
Ce qui n'allait pas
Rien n'était cassé. Le tableau de bord fonctionnait. Chaque page faisait son travail. Mais si vous naviguiez de Settings à AI Chat puis à API Docs, vous voyiez trois langages visuels différents :
- Settings avait une barre latérale carte blanche avec
rounded-2xl, des bordures propres et une ombre. - AI Chat avait une barre latérale sombre
bg-dark-900avecborder-white/5-- mode sombre uniquement, pas de support mode clair. - API Docs avait un simple
<aside>sans aucun style de carte. - Deploy avait des pastilles de filtre horizontales mais pas de barre latérale.
- Stacks n'avait aucun mécanisme de filtrage.
Chaque page avait été construite dans une session différente, parfois à des semaines d'intervalle. Chacune résolvait son problème immédiat. Aucune ne regardait les autres.
C'est ainsi que la dette visuelle s'accumule. Pas par de mauvaises décisions, mais par de bonnes décisions isolées.
Le modèle que nous avons établi
Nous avons défini un modèle unique de barre latérale et l'avons appliqué partout où c'était pertinent :
bg-white dark:bg-dark-900 rounded-2xl border border-gray-200 dark:border-dark-700 shadow-sm p-3Éléments actifs :
``
bg-sh0-500/10 text-sh0-600 dark:text-sh0-400
``
État de survol :
``
hover:bg-gray-50 dark:hover:bg-dark-700
``
Sept propriétés. Appliquées à Settings, AI Chat, Deploy et API Docs. Le résultat : vous pouvez naviguer dans tout le tableau de bord sans que votre cerveau n'enregistre un changement de contexte. La barre latérale est toujours au même endroit, a toujours la même apparence, se comporte toujours de la même manière.
Ce que nous avons réellement modifié
AI Chat -- La plus grande refonte
La page de chat IA avait le plus de problèmes. Elle avait été construite en priorité sombre avec du texte français codé en dur, un en-tête surdimensionné qui mangeait l'espace vertical, et un champ de saisie de chat avec des styles inline au lieu de classes Tailwind.
Nous avons :
- Supprimé entièrement l'en-tête de page et l'en-tête de chat -- la liste de conversations et le champ de saisie sont l'interface, pas des en-têtes décoratifs
- Déplacé le lien du portefeuille vers la barre supérieure globale (visible sur chaque page)
- Restylé les bulles de l'assistant du mode sombre uniquement (bg-dark-700/50) vers de vraies cartes blanches avec des styles prose clair/sombre
- Remplacé le texte codé en dur « L'IA peut se tromper » par une clé i18n dans 5 langues
- Donné au champ de saisie une bordure rounded-2xl avec anneau de focus
Deploy -- Barre latérale par catégorie
La page de déploiement avait 237 éléments filtrés par des pastilles horizontales (All, Source Types, Frameworks, Databases, Apps). Nous les avons déplacés dans une carte de barre latérale gauche avec des sous-catégories qui apparaissent quand vous sélectionnez une catégorie principale. La zone de contenu a récupéré toute la largeur que les pastilles occupaient.
Stacks -- Recherche et filtres de statut
La page Stacks n'avait pas besoin d'une barre latérale (et nous avons délibérément choisi de ne pas en ajouter une -- c'est une histoire à part). À la place, nous avons ajouté une barre de recherche qui filtre par nom de stack, description ou noms d'applications, plus des pastilles de filtre par statut : Running, Partial, Stopped, Building, Error. Chaque pastille affiche son compte et n'apparaît que si des stacks avec ce statut existent.
Mise en page rétractable
La touche finale : une icône hamburger dans l'en-tête supérieur qui rétracte tout -- la barre de navigation principale et toutes les barres latérales contextuelles de page. Un clic, contenu pleine largeur. L'état est persisté dans localStorage.
C'est particulièrement important pour le chat IA, où vous voulez un maximum d'espace pour la conversation. Mais cela aide aussi sur les écrans de portables plus petits où les 80 px de navigation + 224 px de barre latérale contextuelle mangent un tiers de votre viewport.
Pourquoi ne pas simplement livrer des fonctionnalités ?
Trois raisons.
1. L'incohérence érode la confiance
sh0 gère des déploiements de production. Quand un utilisateur voit trois styles visuels différents sur trois pages, il se demande inconsciemment : « Si l'interface est incohérente, le moteur de déploiement est-il cohérent ? » La question est injuste -- le backend Rust est solide comme un roc indépendamment de l'apparence de la barre latérale. Mais la perception est la réalité pour un produit qui vous demande de lui confier votre infrastructure.
2. Le peaufinage se compose
Chaque future page que nous construisons hérite désormais du modèle établi. La page de monitoring, la page de gestion d'équipe, quoi qu'il vienne ensuite -- le développeur (moi) a un modèle clair à suivre. Les 2 heures que nous avons passées aujourd'hui économisent 30 minutes sur chaque page construite à partir de maintenant. Après 4 pages, l'investissement est amorti.
3. Nous étions sur le point de faire une démo
sh0 approche du point où de vrais utilisateurs interagissent avec. Un tableau de bord peaufiné au moment de la démo n'est pas de la vanité -- c'est la différence entre « ça ressemble à un produit » et « ça ressemble à un prototype ». Les premières impressions se forment en secondes, et elles se forment par la cohérence visuelle, pas par le nombre de fonctionnalités.
Ce que nous n'avons délibérément pas fait
- Pas de bibliothèque de design system. Nous n'avons pas besoin de Storybook ou d'une bibliothèque de composants pour un tableau de bord de 12 pages. Le modèle est documenté par l'exemple dans la page Settings.
- Pas de refactorisation CSS. Nous n'avons pas extrait les classes communes en directives
@applyni créé de composants utilitaires. Les classes Tailwind sont explicites et lisibles en ligne. - Pas de barre latérale sur chaque page. La page Stacks n'en a pas parce que les stacks sont le contenu. La cohérence signifie appliquer la même solution au même problème, pas la même solution à chaque problème.
- Plus de mode sombre uniquement. Chaque nouveau style utilise des paires
bg-white dark:bg-dark-800. L'ère du tableau de bord en mode sombre uniquement est révolue.
Les chiffres
Une session. 16 fichiers modifiés. 887 insertions, 462 suppressions. 5 pages restylées. 1 nouveau store partagé. 5 fichiers de traduction mis à jour. 0 fonctionnalité supprimée. 0 régression.
Le tableau de bord ressemble maintenant à un seul produit, pas à cinq prototypes cousus ensemble.
La leçon
Il y a un moment précis dans la vie d'un produit où le peaufinage devient le travail à plus fort effet de levier que vous puissiez faire. Ce n'est pas au début (quand l'architecture n'est pas stabilisée), et ce n'est pas à la fin (quand les utilisateurs ont déjà formé leurs opinions). C'est juste avant que les vrais utilisateurs n'arrivent.
Nous en sommes à ce moment. Et passer une session à uniformiser chaque barre latérale n'est pas du temps perdu -- c'est la dernière chose que vous faites avant d'ouvrir la porte.
Cet article documente le sprint UI/UX du tableau de bord sh0.dev du 25 mars 2026. Toutes les modifications ont été livrées en un seul commit dans zerosuite-inc/sh0-core.