feat(ui): Material icons in sidebar + stats overview on home

Two pieces of the mockup 2 layout that hadn't landed yet:

1. Sidebar nav icons — emoji glyphs (🧹 ✂️ 🔍 …) swapped for
   Streamlit's ``:material/<name>:`` syntax, picking the outline
   Material Symbol that best matches each mockup SVG:

       Home               → :material/home:
       Fix Missing Values → :material/help_outline:
       Find Unusual Vals  → :material/insights:
       Clean Text         → :material/text_format:
       Standardize Fmts   → :material/format_list_bulleted:
       Find Duplicates    → :material/search:
       Quality Check      → :material/check_circle:
       Map Columns        → :material/view_column:
       Combine Files      → :material/account_tree:
       Auto Workflows     → :material/auto_awesome:
       Activate           → :material/key:
       Close              → :material/close:

   Streamlit injects the icon name as a literal ligature inside a
   first-child ``<span>`` of the nav anchor, expected to render
   through the Material Symbols font. theme.py's base rule was
   forcing Geist on every span under ``stSidebarNav``, turning the
   ligatures back into plain text labels — added a structural
   exception that targets ``[data-testid="stSidebarNavLink"] >
   span:first-child`` (and any descendant), restoring the Material
   font family, neutralizing the inherited ``ss01/cv01/cv11``
   feature settings, and sizing to 18px.

   Also stripped the leading emojis from every page title in the
   en/es i18n packs (``home.title``, ``close_page.title``,
   ``activation.title``, ``tools.*.page_title``) — the icons live
   in the sidebar now, the page H1 no longer needs to carry one.

2. Stats overview on home — new ``_render_stats_overview`` in
   _home.py emits a 4-card grid above the per-file findings panels:
   Files analyzed, Total findings, Warnings (severity ``warn`` ∪
   ``error``), Info (severity ``info``). Card layout follows the
   mockup §stats verbatim — Geist 28px / 600 / -0.03em for the
   numeric value (the "Display number" row in spec §4), tiny
   uppercase tracked label, paper-surface card with the standard
   warm border + faint shadow. The Warnings / Info cards tint the
   number with ``--warn`` / ``--info`` when the count is non-zero.

CSS for ``.dt-stats / .dt-stat / .dt-stat-label / .dt-stat-value /
.dt-stat-unit`` added to ``_DESIGN_TOKENS_CSS``; falls to a
2-column grid below 900px viewport, matching the mockup's media
query.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-19 00:31:40 +00:00
parent 2501119ac2
commit da7d86f457
7 changed files with 174 additions and 36 deletions

View File

@@ -5,7 +5,7 @@
},
"home": {
"page_title": "DataTools — Maestría en limpieza de datos",
"title": "🧹 DataTools — Maestría en limpieza de datos",
"title": "DataTools — Maestría en limpieza de datos",
"caption": "Conjunto de 9 herramientas para limpiar, estandarizar y validar datos tabulares. Se ejecuta 100% en local.",
"findings_badge_one": "{n} hallazgo",
"findings_badge_other": "{n} hallazgos"
@@ -57,14 +57,14 @@
},
"close_page": {
"page_title": "DataTools — Cerrar",
"title": "🛑 Cerrar DataTools",
"title": "Cerrar DataTools",
"caption": "Detén la aplicación local y libera la terminal.",
"body": "Al pulsar el botón de abajo se cerrará el servidor de DataTools. Cualquier trabajo sin guardar en otras herramientas se perderá. Una vez cerrada la app, puedes cerrar esta ventana.",
"button": "Cerrar la app"
},
"activation": {
"page_title": "DataTools — Activar",
"title": "🔑 Activar DataTools",
"title": "Activar DataTools",
"intro": "DataTools debe activarse antes de desbloquear cualquier herramienta. Introduce el nombre y correo asociados a tu compra, y luego pega el código de licencia del correo de entrega.",
"name_label": "Nombre completo",
"name_help": "Debe coincidir con el nombre en el recibo de compra.",
@@ -107,55 +107,55 @@
"01_deduplicator": {
"name": "Buscar duplicados",
"description": "Coincidencia difusa, normalización, selección de superviviente y revisión interactiva.",
"page_title": "🔍 Buscar duplicados",
"page_title": "Buscar duplicados",
"page_caption": "Encuentra y elimina filas duplicadas en archivos CSV, texto delimitado y Excel."
},
"02_text_cleaner": {
"name": "Limpiar texto",
"description": "Recorte de espacios, colapso de espacios múltiples, normalización Unicode, manejo de BOM y de finales de línea.",
"page_title": "✂️ Limpiar texto",
"page_title": "Limpiar texto",
"page_caption": "Recorta espacios, normaliza comillas tipográficas, elimina caracteres invisibles y unifica saltos de línea. Se ejecuta localmente — tus datos nunca salen de este equipo."
},
"03_format_standardizer": {
"name": "Estandarizar formatos",
"description": "Estandariza fechas, monedas, nombres, números de teléfono y direcciones.",
"page_title": "📐 Estandarizar formatos",
"page_title": "Estandarizar formatos",
"page_caption": "Canoniza fechas, números de teléfono, monedas, nombres, direcciones y booleanos columna por columna. Se ejecuta localmente — tus datos nunca salen de este equipo."
},
"04_missing_handler": {
"name": "Corregir valores faltantes",
"description": "Detecta nulos disfrazados, analiza la ausencia de datos y aplica estrategias de imputación.",
"page_title": "🕳️ Corregir valores faltantes",
"page_title": "Corregir valores faltantes",
"page_caption": "Detecta nulos disfrazados, perfila la ausencia de datos y aplica imputación o estrategias de descarte. Se ejecuta localmente — tus datos nunca salen de este equipo."
},
"05_column_mapper": {
"name": "Mapear columnas",
"description": "Renombra columnas, aplica un esquema objetivo y fuerza tipos de datos.",
"page_title": "🗂️ Mapear columnas",
"page_title": "Mapear columnas",
"page_caption": "Renombra columnas, aplica un esquema objetivo y fuerza tipos. Se ejecuta localmente — tus datos nunca salen de este equipo."
},
"06_outlier_detector": {
"name": "Detectar valores atípicos",
"description": "Detección por Z-score, IQR y MAD con reglas de dominio y winsorización.",
"page_title": "📊 Detectar valores atípicos",
"page_title": "Detectar valores atípicos",
"page_caption": "Detecta y trata valores atípicos en columnas numéricas."
},
"07_multi_file_merger": {
"name": "Combinar archivos",
"description": "Combina varios archivos CSV/Excel alineando sus esquemas.",
"page_title": "📎 Combinar archivos",
"page_title": "Combinar archivos",
"page_caption": "Combina varios archivos CSV y Excel en un único conjunto de datos."
},
"08_validator_reporter": {
"name": "Verificación de calidad",
"description": "Valida contra reglas y genera informes de calidad en PDF/Excel.",
"page_title": "Verificación de calidad",
"page_title": "Verificación de calidad",
"page_caption": "Valida datos contra reglas y genera informes de calidad."
},
"09_pipeline_runner": {
"name": "Flujos automatizados",
"description": "Encadena herramientas en el orden recomendado y pasa la salida entre pasos.",
"page_title": "⚙️ Flujos automatizados",
"page_title": "Flujos automatizados",
"page_caption": "Encadena pasos de limpieza de DataTools en un flujo repetible. La canalización recomienda un orden; tú mantienes el control."
}
},