Skip to content

feat(THI-53): modernize glossary + compare - #24

Merged
tdody merged 1 commit into
mainfrom
thibaultdody/thi-53-glossary-compare-a-z-index-search-side-by-side-table
Apr 19, 2026
Merged

feat(THI-53): modernize glossary + compare#24
tdody merged 1 commit into
mainfrom
thibaultdody/thi-53-glossary-compare-a-z-index-search-side-by-side-table

Conversation

@tdody

@tdody tdody commented Apr 19, 2026

Copy link
Copy Markdown
Owner

Summary

Modernizes the two remaining standalone pages around the THI-45/46 design system.

Glossary (pages/GlossaryPage.tsx)

  • Editorial header: caps label + serif 44px "Every term, defined." title + search input (live filter across term / definition / formula)
  • Category filter: <Segmented> with All / Metrics / Revenue / Expenses / Financing / Tax
  • A–Z index: 26 JetBrains Mono buttons, border-rule-strong with hover accent when entries exist, disabled opacity-40 cursor-not-allowed when empty. Click scrolls to the letter section.
  • Sections grid: 80px serif letter column (text-[48px] leading-none) + entry list on the right
  • Entry layout: serif 22px term, caps category pill, ink-2 body, optional Formula box (border + mono value + caps label), optional Related row (caps label + accent buttons that smooth-scroll and briefly ring-accent the target)
  • No-match state: dashed 2px border EmptyState pattern matching THI-47

Compare (components/Comparison/ComparisonView.tsx)

  • Breadcrumb "← All properties" replacing the old indigo back button
  • Caps label "Compare · N" + serif 44px "Side by side" title
  • Full-width table with fixed 220px metric label column + per-property columns (serif name, ink-3 city · scenario subtitle)
  • Best-value highlighting now adds a caps "Best" pill (border-accent text-accent) next to the winning cell in addition to accent-coloring the value. Non-best cells are text-ink.
  • Verdict row uses caps labels with accent / warn / negative tones (Strong / Marginal / Negative)

Preserved behavior

  • ComparePage.tsx wrapper unchanged — still parses ?ids=… and hands to ComparisonView
  • getBestIndex / getVerdict logic identical
  • Glossary data source unchanged (data/glossary.ts, 72 entries, 5 categories)
  • Scroll-to-letter + ring-highlight on related-term click preserved

Test plan

  • npm run lint — clean
  • npm run build — passes, CSS 48.26 kB (-3 kB), 118 modules
  • Dev run, Glossary: typing in search narrows visible entries; Segmented filter swaps the shown category; A–Z buttons disable for letters with zero entries after filtering; clicking an enabled letter scrolls to that section; related-term links scroll + ring the target
  • Dev run, Compare: visit /compare?ids=a,b,c, best-value pill appears next to winning cell per row, verdict row renders tones correctly
  • Dark mode: both pages use tokens throughout

🤖 Generated with Claude Code

Glossary (pages/GlossaryPage.tsx)
- Editorial header: caps label + serif 44px "Every term, defined." title
  + search input on the right (live filter over term / definition / formula)
- Category <Segmented> (All / Metrics / Revenue / Expenses / Financing /
  Tax) filters the visible entries
- A–Z index row: 26 JetBrains Mono buttons, border-rule-strong when
  entries exist for that letter, disabled + opacity-40 + cursor-not-allowed
  when empty. Clicking scrolls to the letter section.
- Sections grid: 80px serif letter column (48px leading-none) + entry
  list on the right
- Entry layout: serif 22px term, caps category pill, ink-2 body, optional
  Formula box (border + mono value + caps "Formula" label), optional
  Related row (caps "Related" + accent buttons that smooth-scroll and
  briefly ring-accent the target)
- No-match state uses the dashed-border EmptyState pattern from
  THI-47

Compare (components/Comparison/ComparisonView.tsx)
- Breadcrumb "← All properties" replacing the old indigo back button
- Caps label "Compare · N" + serif 44px "Side by side" title
- Full-width table with fixed 220px metric label column + per-property
  columns (serif name, ink-3 city · scenario subtitle)
- Best-value highlighting now adds a caps "Best" pill (border-accent +
  text-accent) next to the winning cell in addition to accent-coloring
  the value. Non-best cells are text-ink.
- Verdict row uses caps labels with accent / warn / negative tones
  (Strong / Marginal / Negative)
- All indigo / sky / emerald / red / slate classes replaced with tokens

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@tdody
tdody merged commit 078e8bd into main Apr 19, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant