F-028: Walkability & Transit Scores Display

Status: Done · Priority: P2 · Updated: Mar 6, 2026

Summary

All 76 neighborhoods have walkability_score and transit_score populated in the database but the data is never shown in the UI. Surface these scores as badges on neighborhood detail pages and listing cards.

Requirements

• [x] Score badges on neighborhood detail page (walkability + transit) — already existed
• [x] Score indicators on listing cards (from listing's neighborhood)
• [x] Score display on listing detail page
• [x] Color-coded: green (70+), yellow (50-69), dim (<50)
• [x] Bilingual labels (FR/EN)
• [ ] Optional: filter/sort by walkability or transit score on browse page

Design

Score Badge Component

Reusable ScoreBadge component with icon, label, and color coding:

• Walk icon + "Walkability: 85" (green)
• Transit icon + "Transit: 55" (yellow)

Integration Points

1. Neighborhood detail page — prominent badges in hero/stats section
2. Listing cards — small inline scores
3. Listing detail page — in location/neighborhood section

Discussion Notes

Mar 6, 2026 — Created. Data fully populated for all 76 neighborhoods. XS effort — pure UI work on existing data.

Implementation Notes

Changes Made

• API (services/api/src/routes/listings.ts): Added walkabilityScore and transitScore to browse, detail, and similar listing queries (neighborhoods table already joined)
• Types (services/web/lib/api.ts): Added fields to ListingSummary interface
• Listing card (services/web/components/listings/listing-card.tsx): Small color-coded badges with Footprints/Bus icons in metadata row
• Listing detail (services/web/components/listings/listing-detail.tsx): Larger badges in location section with labels
• Translations: Added walkability/transitScore keys to detail namespace (EN + FR)

Color Coding

• Walk scores: green (70+), amber (50-69), muted (<50)
• Transit scores: blue (70+), amber (50-69), muted (<50)
• Using distinct colors (green vs blue) to differentiate the two score types