El sidebar del doctor ya está retintado y ya habla en minúscula. Lo que chirría no es el color — es la forma. Tres cosas concretas, todas heredadas del kit y ninguna de la doctrina:
Ni pill, ni circular, ni una sola voz
- «Crear» no es de la familia. Rectángulo redondeado con un círculo blanco embebido y un kbd adentro — tres capas para una acción. La doctrina dice: la acción es pill, petroleo sólido, Parkinsans 600, y punto.
- La ayuda habla otro idioma. Cuadrado fantasma con borde, pegado al pill sólido: dos pesos y dos radios compitiendo en 240px. El canon del topbar es el icon-button circular.
- Densidad de fábrica. Filas h-8 con el padding generoso de shadcn, grupos al mismo peso que los ítems, el logo con 64px de cabecera. Linear mete lo mismo en dos tercios del alto.
Linear no es una estética: es una disciplina de calma. Un panel que se usa ocho horas no puede pedir atención — la nav es densa, los controles son quietos (borde hairline, fondo blanco, sombra mínima), y el color aparece solo donde hay estado. Eso es exactamente el temperamento «blanco clínico» que el contrato ya le asignó al consultorio.
La disciplina
- Densidad — filas de 28–30px, iconos de 14–15px, tipografía 12.5px. Más agenda visible, menos scroll.
- Controles quietos — la acción de crear como control bordeado discreto, no como el botón más pesado de la pantalla.
- Un solo acento — gris para lo inactivo; petroleo únicamente en el ítem activo y en lo que está pasando ahora.
- Teclado visible — el kbd «C» se queda, pero discreto: gris sobre blanco, no blanco sobre oscuro.
Lo que contradice el contrato
- El panel oscuro — la noche es del admin. El consultorio es luminoso: quien vive en la pantalla no necesita un panel oscuro mirándolo.
- Mover la navegación — los grupos, los ítems, las rutas y las i18n keys quedan idénticos. Esto es forma, no arquitectura.
- Su tipografía — Parkinsans manda e Inter lee; la venda degradada sigue reservada a sus cuatro sitios.
Las tres comparten la ley: activo petroleo-soft, iconos grises que solo se tiñen al activarse, badge del chat en menta (algo está pasando), beta en outline mudo, sentence case. Se diferencian en quién vive arriba, dónde vive «Crear» y cuánta densidad.
A · El contrato, afinado. La corrección mínima que arregla lo raro: misma
anatomía de hoy (logo arriba, tres grupos, widget, acciones al pie) pero cada botón entra a su familia —
«Crear» se vuelve la pill petroleo de la doctrina (Parkinsans 600, kbd discreto adentro), la ayuda
se vuelve el icon-button circular del canon del topbar, y el activo gana el rail inset de 3px del
contrato. El usuario sigue viviendo en el topbar. Toca: doctor-sidebar-create-button.tsx,
doctor-sidebar-help-button.tsx y sus gemelos de secretaría.
B · Linear clínico. La referencia entera, en blanco: la doctora arriba como
ancla del espacio de trabajo (avatar degradado + chevrons, abre el menú de usuario), «Nueva cita» como
control quieto — borde hairline, fondo blanco, el + en petroleo — con la búsqueda al lado, nav
densa de filas de 28px con grupos colapsables, y el activo sin rail: solo el soft. El wordmark baja al
pie como firma muda y el widget de próxima cita se retira (la agenda ya la muestra). Toca además:
doctor-desktop-shell.tsx, doctor-topbar-content.tsx (el user menu migra al
sidebar) y la densidad en las primitivas de sidebar.tsx.
C · Híbrido clínico. La marca arriba, la referencia en la forma: logo como hoy,
«Crear» promovida bajo el header como control quieto petroleo-soft (deja de competir con el
contenido pero queda a un golpe de vista), densidad intermedia, rail del contrato, y el pie adopta la
user card del contrato tres-apps (Dra. Valentina Rivas · Medicina interna) con la ayuda como icono
mudo al lado. El topbar queda para el contexto de la página. Toca además:
doctor-desktop-shell.tsx y el user menu.
| Eje | A · contrato afinado | B · linear clínico | C · híbrido clínico |
|---|---|---|---|
| Qué vive arriba | El logo (como hoy) | La doctora — switcher estilo Linear | El logo |
| Dónde vive «Crear» | Al pie, pill petroleo sólida | Bajo el switcher, control quieto blanco | Bajo el header, control quieto petroleo-soft |
| Densidad de fila | 32px (la de hoy) | 28px + grupos colapsables | 30px |
| El activo | Soft + rail 3px (contrato) | Solo soft (Linear) | Soft + rail 3px (contrato) |
| El usuario | Topbar (como hoy) | Header del sidebar | User card al pie (contrato) |
| Próxima cita | Widget se queda | Se retira | Widget se queda |
| Fidelidad al contrato | Alta | Media — propone enmienda | Alta |
| Alcance de código | 2 archivos × 2 roles | Shell + topbar + primitivas | Shell + user menu |
Los ejes son independientes: la densidad de B cabe en C, el «Crear» quieto de C cabe en A. La única pareja que no se mezcla es usuario arriba + user card abajo — el usuario vive en un solo sitio. Si hay duda, el camino seguro es C con la densidad de B: contrato intacto, referencia sentida, y el pie deja de tener dos lenguajes.
Las tres propuestas conservan rutas, grupos, ítems, i18n keys y el colapso a iconos tal cual. El
trabajo es de forma: los dos botones del pie se redibujan con la doctrina de componentes (pill /
icon-button circular / control quieto), la densidad se ajusta en las primitivas compartidas de
packages/ui/src/components/sidebar.tsx vía cva (no con overrides por app), y el rail
del activo ya existe en los tokens de la familia 13 — es --sidebar-accent +
--sidebar-ring, sin !important.
| Archivo | Qué cambia |
|---|---|
doctor-sidebar-create-button.tsx · secretary-* |
El botón entra a su familia según la propuesta elegida: pill petroleo (A) o control quieto (B/C). Muere el círculo embebido. |
doctor-sidebar-help-button.tsx · secretary-* |
Icon-button circular hairline (A) o icono mudo integrado al pie (B/C). |
packages/ui · sidebar.tsx |
Densidad de SidebarMenuButton y peso de SidebarGroupLabel vía variantes cva — sirven a doctor y secretaria a la vez. |
doctor-desktop-shell.tsx · secretary-desktop-shell.tsx |
Solo B y C: recomponer los slots header/footer de AppSidebar (ya son slots — cero cambios en el primitivo compartido). |
doctor-topbar-content.tsx |
Solo B (user menu migra al header del sidebar) y C (user card al pie). |
Los dos shells del consultorio consumen las mismas primitivas y los mismos patrones de botón. La decisión que se tome aquí se aplica a doctor y secretaria en el mismo PR — la sala de espera no puede quedar hablando el lenguaje viejo mientras la agenda estrena el nuevo.
El mueble más usado del consultorio, afinado.
El sidebar no es una pantalla: es el mueble que la doctora tiene al lado las ocho horas. Las tres propuestas lo aquietan con la misma ley — densidad con propósito, controles de una sola voz, y el petroleo solo donde hay estado. Falta una decisión, no un rediseño.
Elegir A, B, C — o una mezcla por ejes (la tabla 04 las hace conmutables).
Aplicar a los shells de doctor y secretaria en un PR, QA visual contra esta página.
tres-apps #app-consultorio (temperamento) y componentes-ui (familias de forma).