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 — Data Cleaning Mastery",
"title": "🧹 DataTools — Data Cleaning Mastery",
"title": "DataTools — Data Cleaning Mastery",
"caption": "A 9-tool suite for cleaning, standardizing, and validating tabular data. Runs 100% locally.",
"findings_badge_one": "{n} finding",
"findings_badge_other": "{n} findings"
@@ -57,14 +57,14 @@
},
"close_page": {
"page_title": "DataTools — Close",
"title": "🛑 Close DataTools",
"title": "Close DataTools",
"caption": "Shut down the local app and free the terminal.",
"body": "Clicking the button below will terminate the DataTools server. Any unsaved work in other tools will be lost. Once the app shuts down you can close this window.",
"button": "Close the app"
},
"activation": {
"page_title": "DataTools — Activate",
"title": "🔑 Activate DataTools",
"title": "Activate DataTools",
"intro": "DataTools needs to be activated before any tools unlock. Enter the name and email tied to your purchase, then paste the license blob from your delivery email.",
"name_label": "Full name",
"name_help": "Must match the name on your purchase receipt.",
@@ -107,55 +107,55 @@
"01_deduplicator": {
"name": "Find Duplicates",
"description": "Fuzzy matching, normalization, survivor selection, and interactive review.",
"page_title": "🔍 Find Duplicates",
"page_title": "Find Duplicates",
"page_caption": "Find and remove duplicate rows in CSV, delimited text, and Excel files."
},
"02_text_cleaner": {
"name": "Clean Text",
"description": "Whitespace trim, multi-space collapse, Unicode normalization, BOM and line-ending handling.",
"page_title": "✂️ Clean Text",
"page_title": "Clean Text",
"page_caption": "Trim whitespace, fold smart quotes, strip invisible characters, and normalize line endings. Runs locally — your data never leaves this computer."
},
"03_format_standardizer": {
"name": "Standardize Formats",
"description": "Standardize dates, currencies, names, phone numbers, and addresses.",
"page_title": "📐 Standardize Formats",
"page_title": "Standardize Formats",
"page_caption": "Canonicalize dates, phone numbers, currency, names, addresses, and booleans on a per-column basis. Runs locally — your data never leaves this computer."
},
"04_missing_handler": {
"name": "Fix Missing Values",
"description": "Detect disguised nulls, missingness analysis, and imputation strategies.",
"page_title": "🕳️ Fix Missing Values",
"page_title": "Fix Missing Values",
"page_caption": "Detect disguised nulls, profile missingness, and apply imputation or drop strategies. Runs locally — your data never leaves this computer."
},
"05_column_mapper": {
"name": "Map Columns",
"description": "Rename columns, enforce a target schema, and coerce types.",
"page_title": "🗂️ Map Columns",
"page_title": "Map Columns",
"page_caption": "Rename columns, enforce a target schema, and coerce types. Runs locally — your data never leaves this computer."
},
"06_outlier_detector": {
"name": "Find Unusual Values",
"description": "Z-score, IQR, and MAD detection with domain-rule violations and winsorization.",
"page_title": "📊 Find Unusual Values",
"page_title": "Find Unusual Values",
"page_caption": "Detect and handle outliers in numeric columns."
},
"07_multi_file_merger": {
"name": "Combine Files",
"description": "Combine multiple CSV/Excel files with schema alignment.",
"page_title": "📎 Combine Files",
"page_title": "Combine Files",
"page_caption": "Combine multiple CSV and Excel files into one dataset."
},
"08_validator_reporter": {
"name": "Quality Check",
"description": "Validate against rules and generate PDF/Excel quality reports.",
"page_title": "Quality Check",
"page_title": "Quality Check",
"page_caption": "Validate data against rules and generate quality reports."
},
"09_pipeline_runner": {
"name": "Automated Workflows",
"description": "Chain tools in recommended order and pass output between steps.",
"page_title": "⚙️ Automated Workflows",
"page_title": "Automated Workflows",
"page_caption": "Chain DataTools cleaning steps into one repeatable workflow. The pipeline recommends an order; you stay in control."
}
},