---
id: "0046"
title: "Reemplazar raw ImGui en apps por primitivos del registry"
status: completado
type: refactor
domain:
  - cpp-stack
scope: multi-app
priority: media
depends: []
blocks: []
related: []
created: 2026-05-17
updated: 2026-05-17
tags: []
---
# 0046 — Reemplazar raw ImGui en apps por primitivos del registry

## Metadata

| Campo | Valor |
|-------|-------|
| **ID** | 0046 |
| **Estado** | pendiente |
| **Prioridad** | media |
| **Tipo** | refactor — `cpp/apps/*` y `projects/fn_monitoring/apps/registry_dashboard` |

## Dependencias

Bloquea-por: **0043** (apps con shell estandarizado, evita conflictos al refactor).

---

## Objetivo

Eliminar el uso innecesario de raw ImGui en las 4 apps GUI: tablas custom, `Selectable` con styling manual, modales propios y `BeginChild` con borde+padding repetido. Sustituir por primitivos del registry (`dashboard_grid`, `dashboard_panel`, `tree_view`/`select`, `modal_dialog`, `tokens`).

## Contexto

Auditoria conto:
- `registry_dashboard/views.cpp`: 33 raw calls — tablas con `BeginTable` + `PushStyleColor` repetido (l. 87, 143, 321), `BeginChild` con borde+padding (l. 122).
- `primitives_gallery/main.cpp`: sidebar con `Selectable` + `PushStyleColor` (l. 91-124).
- `shaders_lab/main.cpp`: modal save-as custom (l. 272-300) que reimplementa lo que hace `modal_dialog`.

## Arquitectura

```
projects/fn_monitoring/apps/registry_dashboard/views.cpp   # MOD — usar dashboard_panel/grid en lugar de BeginTable+styling
cpp/apps/primitives_gallery/main.cpp                       # MOD — sidebar via tree_view o select
cpp/apps/shaders_lab/main.cpp                              # MOD — save-as via modal_dialog + text_input
```

Posibles primitivos faltantes detectados (crear si no existen):
- **No crear** `tab_container` por ahora — `chart_demo` lo usa OK con tabs nativos. Solo extraer si se repite.

## Tareas

### Fase 1 — registry_dashboard/views.cpp

1.1 Sustituir `chart_panel_begin/end` (l. 105-127) por llamadas a `dashboard_panel` si encaja.
1.2 Cambiar `BeginTable("##chart_grid", 4, ...)` por `dashboard_grid` (4 cols stretchsame).
1.3 Mismo cambio en `BeginTable("##kpi_grid", 4, ...)` y `BeginTable("##proj_layout", 2, ...)`.
1.4 `BeginChild` en `draw_projects_list` (proj_tree, proj_detail) → usar `dashboard_panel` con `Borders=true`.
1.5 Al final del refactor: contar raw `ImGui::Begin*` en views.cpp. Meta: <10 (de 33).

### Fase 2 — primitives_gallery sidebar

2.1 Sustituir el bloque `for (...) { Selectable + PushStyleColor }` (l. 96-122) por `fn_ui::select(...)` con la lista de demos, o por `tree_view` agrupado por categoria si la API encaja.
2.2 Mantener visualmente equivalente (separadores por categoria, item activo coloreado).

### Fase 3 — shaders_lab save-as modal

3.1 Reemplazar el bloque `BeginPopupModal` (l. 272-300) por `fn_ui::modal_dialog_begin("Save layout as...", &g_show_save_as, ImVec2(360, 0)) + text_input(...) + buttons + modal_dialog_end()`.

### Fase 4 — Build cross

4.1 Build Linux y Windows de las 3 apps modificadas.
4.2 Run rapido en Linux para verificar que el comportamiento es identico (solo cambia la implementacion).

### Fase 5 — Reporte

5.1 Anadir al final del issue una tabla "antes/despues" con:
- LoC de cada main.cpp / views.cpp.
- Numero de raw `ImGui::*` calls antes/despues.

## Decisiones

- Mantener `ImGui::BeginTabBar/EndTabBar` para tabs simples (chart_demo, dashboard) — son delgaditos y no aportan valor envolverlos.
- No crear primitivos nuevos en este issue. Si en el camino aparece un patron repetido, abrir issue separado.

## Riesgos

- `select` puede no soportar grupos por categoria con encabezado — verificar API actual. Si no lo soporta, usar `tree_view`.
- Conflicto potencial con 0043 si ambos tocan los mismos `main.cpp`. Por eso 0046 depende de 0043.

## Validacion

- Las 3 apps se ven igual visualmente (mismo dark theme, mismas zonas).
- Build OK.
- Reduccion clara de raw calls (verificable con `grep -c "ImGui::Begin" archivo`).
