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:
@@ -414,6 +414,60 @@ div[data-testid="stContainer"][data-border="true"] {
|
||||
border: 1px solid var(--border) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* ---------- Stats overview ---------- */
|
||||
/* 4-card grid shown above the per-file findings on the home page,
|
||||
summarizing the most recent analysis run. Numeric values use the
|
||||
"Display number" row from geist_spec.md §4 — Geist 28px / 600 /
|
||||
-0.03em — and the severity-tinted variants pick up ``--warn`` /
|
||||
``--info`` from theme.py. */
|
||||
.dt-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
margin: 8px 0 20px;
|
||||
}
|
||||
.dt-stat {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-lg);
|
||||
padding: 16px 18px;
|
||||
box-shadow: 0 1px 2px rgba(28,25,23,0.03);
|
||||
}
|
||||
.dt-stat-label {
|
||||
font-size: 11.5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--ink-tertiary);
|
||||
font-weight: 500;
|
||||
margin-bottom: 6px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.dt-stat-value {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1;
|
||||
color: var(--ink);
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
}
|
||||
.dt-stat-unit {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--ink-tertiary);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.dt-stat.is-warn .dt-stat-value { color: var(--warn); }
|
||||
.dt-stat.is-info .dt-stat-value { color: var(--info); }
|
||||
.dt-stat.is-success .dt-stat-value { color: var(--success); }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.dt-stats { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
</style>
|
||||
"""
|
||||
|
||||
|
||||
Reference in New Issue
Block a user