sh0.dev tiene más de 180 endpoints de API, 10 crates de Rust, orquestación Docker, motores de respaldo, integración de servidor MCP y un sistema de chat con IA. El backlog es infinito. Siempre hay otra funcionalidad por construir.
Hoy pasamos una sesión entera haciendo que las barras laterales se vean consistentes.
Lo que estaba mal
Nada estaba roto. El dashboard funcionaba. Cada página hacía su trabajo. Pero si navegabas de Settings a AI Chat a API Docs, verías tres lenguajes visuales diferentes:
- Settings tenía una barra lateral con tarjeta blanca limpia con
rounded-2xl, bordes adecuados y una sombra. - AI Chat tenía una barra lateral oscura
bg-dark-900conborder-white/5-- solo modo oscuro, sin soporte para modo claro. - API Docs tenía un
<aside>simple sin estilo de tarjeta. - Deploy tenía píldoras de filtro horizontales pero sin barra lateral.
- Stacks no tenía mecanismo de filtrado.
Cada página fue construida en una sesión diferente, a veces con semanas de diferencia. Cada una resolvió su problema inmediato. Ninguna miró las demás.
Así es como se acumula la deuda visual. No a través de malas decisiones, sino de buenas decisiones aisladas.
El patrón que establecimos
Definimos un patrón de barra lateral y lo aplicamos donde tenía sentido:
bg-white dark:bg-dark-900 rounded-2xl border border-gray-200 dark:border-dark-700 shadow-sm p-3Elementos activos:
``
bg-sh0-500/10 text-sh0-600 dark:text-sh0-400
``
Estado hover:
``
hover:bg-gray-50 dark:hover:bg-dark-700
``
Siete propiedades. Aplicadas a Settings, AI Chat, Deploy y API Docs. El resultado: puedes navegar todo el dashboard sin que tu cerebro registre un cambio de contexto. La barra lateral siempre está en el mismo lugar, siempre se ve igual, siempre se comporta igual.
Lo que realmente cambiamos
AI Chat -- La mayor renovación
La página de chat con IA tenía la mayor cantidad de problemas. Fue construida con enfoque oscuro primero, con texto en francés codificado, un encabezado sobredimensionado que consumía espacio vertical, y una entrada de chat con estilos inline en lugar de clases Tailwind.
Nosotros:
- Eliminamos el encabezado de página y el encabezado del chat por completo -- la lista de conversaciones y la entrada del chat son la UI, no encabezados decorativos
- Movimos el enlace del monedero a la barra superior global (visible en cada página)
- Cambiamos el estilo de las burbujas del asistente de solo oscuro (bg-dark-700/50) a tarjetas blancas apropiadas con estilos de prosa claro/oscuro
- Reemplazamos el texto codificado "L'IA peut se tromper" con una clave i18n en 5 idiomas
- Dimos a la entrada del chat un borde rounded-2xl adecuado con anillo de enfoque
Deploy -- Barra lateral de categorías
La página de deploy tenía 237 elementos filtrados por píldoras horizontales (All, Source Types, Frameworks, Databases, Apps). Los movimos a una tarjeta de barra lateral izquierda con subcategorías que aparecen cuando seleccionas una categoría principal. El área de contenido ganó todo el ancho que las píldoras ocupaban.
Stacks -- Búsqueda y filtros de estado
La página de pilas no necesitaba una barra lateral (y deliberadamente elegimos no agregar una -- esa es una historia separada). En su lugar, agregamos una barra de búsqueda que filtra por nombre de pila, descripción o nombres de aplicaciones, más píldoras de filtro de estado: Running, Partial, Stopped, Building, Error. Cada píldora muestra su conteo y solo aparece si existen pilas con ese estado.
Diseño colapsable
La pieza final: un ícono de hamburguesa en el encabezado superior que colapsa todo -- la barra lateral de navegación principal y todas las barras laterales de contexto de página. Un clic, contenido a ancho completo. El estado se persiste en localStorage.
Esto importa especialmente para el chat con IA, donde quieres máximo espacio para la conversación. Pero también ayuda en pantallas de laptop más pequeñas donde la navegación de 80px + la barra lateral de contexto de 224px consumen un tercio de tu viewport.
¿Por qué no simplemente entregar funcionalidades?
Tres razones.
1. La inconsistencia erosiona la confianza
sh0 gestiona despliegues de producción. Cuando un usuario ve tres estilos visuales diferentes en tres páginas, subconscientemente se pregunta: "Si la UI es inconsistente, ¿el motor de despliegue es consistente?" La pregunta es injusta -- el backend en Rust es sólido como una roca independientemente de cómo se vea la barra lateral. Pero la percepción es la realidad para un producto que te pide confiarle tu infraestructura.
2. El pulido se acumula
Cada página futura que construyamos ahora hereda el patrón establecido. La página de monitoreo, la página de gestión de equipo, lo que venga después -- el desarrollador (yo) tiene una plantilla clara a seguir. Las 2 horas que invertimos hoy ahorran 30 minutos en cada página construida de ahora en adelante. Después de 4 páginas, ya se pagó solo.
3. Estábamos a punto de hacer una demo
sh0 se acerca al punto donde usuarios reales interactúan con él. Un dashboard pulido en el momento de la demo no es vanidad -- es la diferencia entre "esto parece un producto" y "esto parece un prototipo." Las primeras impresiones se forman en segundos, y se forman por consistencia visual, no por cantidad de funcionalidades.
Lo que deliberadamente no hicimos
- Sin biblioteca de sistema de diseño. No necesitamos Storybook o una biblioteca de componentes para un dashboard con 12 páginas. El patrón está documentado por ejemplo en la página de configuración.
- Sin refactorización de CSS. No extrajimos clases comunes en directivas
@applyni creamos componentes utilitarios. Las clases de Tailwind son explícitas y legibles inline. - Sin barra lateral en cada página. La página de pilas no tiene una porque las pilas son el contenido. Consistencia significa aplicar la misma solución al mismo problema, no la misma solución a cada problema.
- Sin solo modo oscuro. Cada nuevo estilo usa pares
bg-white dark:bg-dark-800. La era de solo modo oscuro del dashboard terminó.
Los números
Una sesión. 16 archivos cambiados. 887 inserciones, 462 eliminaciones. 5 páginas restilizadas. 1 nuevo store compartido. 5 archivos de traducción actualizados. 0 funcionalidades eliminadas. 0 regresiones.
El dashboard ahora parece un solo producto, no cinco prototipos cosidos juntos.
La lección
Hay un momento específico en la vida de un producto cuando el pulido se convierte en el trabajo de mayor apalancamiento que puedes hacer. No es al principio (cuando la arquitectura no está asentada), y no es al final (cuando los usuarios ya se formaron opiniones). Es justo antes de que lleguen los usuarios reales.
Estamos en ese momento. Y pasar una sesión haciendo que cada barra lateral coincida no es tiempo perdido -- es lo último que haces antes de abrir la puerta.
Este artículo documenta el sprint de UI/UX del dashboard de sh0.dev del 25 de marzo de 2026. Todos los cambios se enviaron en un solo commit a zerosuite-inc/sh0-core.