48 lines
2.3 KiB
Markdown
48 lines
2.3 KiB
Markdown
# ADR-0009 · No redundant titles in UI
|
|
|
|
**Status**: accepted
|
|
**Date**: 2026-05
|
|
|
|
## Context
|
|
|
|
Earlier mockups had four layers of identification on each panel:
|
|
|
|
1. Active pill in the left rail (e.g., `98 · HEALTH`).
|
|
2. Title strip in the topbar (`HEALTH` + sysid line).
|
|
3. Panel `<h2>` (`▸ HEALTH & DIAGNOSTICS`).
|
|
4. Sub-description (`single-pane self-check · drill into failures · launch related panels`).
|
|
|
|
Three of those four were repeating the same name ("HEALTH"), and the fourth was descriptive prose explaining what the operator already knew (they navigated here on purpose).
|
|
|
|
The redundancy added visual noise, pushed actual content lower on screen, and trained operators to skip the panel header entirely (which then meant they missed legitimate context information).
|
|
|
|
## Decision
|
|
|
|
Three layers, each with a distinct function:
|
|
|
|
1. **Rail (left)** — *navigation*. Selector primario, refleja jerarquía del producto, siempre visible.
|
|
2. **Title strip (topbar)** — *identidad de modo*. Cambia el color del chrome cuando el dominio cambia (cam yellow al entrar a CAMS, iot mauve a FRIGATE, etc.). Refuerza visualmente el dominio sin tener que leerlo.
|
|
3. **`ctx-strip` (panel root)** — *contexto operacional*. Solo dato dinámico que cambia con el tiempo: estado, IP del endpoint, branch git, sha aplicado, conteos, alertas. **Sin repetir el nombre de la vista**.
|
|
|
|
Concretely: the panel-level `<h2>` and descriptive `<div class="sub">` elements were removed from views. They were replaced with a compact `ctx-strip` that contains only:
|
|
|
|
- A single context badge with dynamic info (e.g., `router + cell · auto-test every 5min`, `5 AI · LIVE`, `hai-config / main`).
|
|
- Optionally, a small sub-line with truly informational data (not descriptive prose).
|
|
|
|
Forensic and other multi-zone views keep `<h3>` headers within zones, because zones coexist on screen and need their own identity.
|
|
|
|
## Consequences
|
|
|
|
**Good**:
|
|
- More vertical space for actual content.
|
|
- The three layers each do something distinct, so they're not redundant.
|
|
- Dynamic context info (the only thing that changes between visits) is now what the operator notices.
|
|
|
|
**Bad / trade-offs**:
|
|
- Operators who learned the old layout had to adjust.
|
|
- Some demo viewers asked "what's this view called again?" once or twice — the title strip answers, but it took a moment to look up.
|
|
|
|
## See also
|
|
|
|
- `docs/03-design/ui-patterns.md`
|