Skip to content

Conversation

@kwiens
Copy link
Owner

@kwiens kwiens commented Jan 9, 2026

Summary

This PR refactors the bikemap codebase to improve maintainability and prepare for future multi-geography support. The changes reduce complexity in large components while preserving all existing functionality.

Key Changes

1. Centralized Configuration (src/config/map.config.ts)

  • Extracted all geography-specific settings (Mapbox credentials, default view, GBFS endpoints) into a single config file
  • Enables future support for multiple cities by swapping config files

2. Modularized Sidebar Components (src/components/sidebar/)

  • Extracted 9 components from MapLegend.tsx (710 → 240 lines):
    • BikeRoutes, MapLayers, AttractionsList, BikeResourcesList, BikeRentalList
    • SidebarHeader, InformationSection, Footer, ToggleSwitch
  • Added shared types in types.ts and barrel export in index.ts

3. Custom Hooks (src/hooks/)

  • useToast - Toast notifications with auto-dismiss and fade-out
  • useMapResize - Window and sidebar resize handling
  • useLocationTracking - GPS location tracking (extracted)

4. Utilities Consolidation

  • Renamed utils/utils.tsutils/map.ts for clarity

5. CSS Cleanup

  • Removed duplicate styles from globals.css (map container, location markers, pulse animation)
  • Single source of truth in map-legend.css

6. Bug Fix: Bidirectional Route Selection

  • Added event listener in MapLegend to sync sidebar selection when clicking routes on the map
  • Previously, map clicks would highlight routes visually but not update sidebar state

7. New Tests

  • map.config.test.ts - 7 tests for configuration
  • useToast.test.ts - 6 tests for toast hook
  • BikeRoutes.test.tsx - 6 tests for route selection component
  • Total: 57 tests (up from 45)

8. Documentation

  • Updated CLAUDE.md with project structure, event system details, and testing notes

Test Plan

  • All 57 unit tests pass (pnpm test:run)
  • Lint passes (pnpm lint)
  • Visual verification via Chrome DevTools MCP
  • Manual test: Click route on map → sidebar highlights corresponding route
  • Manual test: Click route in sidebar → map zooms and highlights route
  • Manual test: Toggle map layers (Attractions, Bike Resources, Bike Rentals)
  • Manual test: Verify mobile responsive behavior

kwiens and others added 4 commits January 8, 2026 10:43
- Create centralized geo config (src/config/map.config.ts) for future multi-geography support
- Extract 9 sidebar components from MapLegend.tsx (710 → 240 lines)
- Create useToast and useMapResize custom hooks
- Rename utils.ts → map.ts for clarity
- Remove duplicate CSS from globals.css
- Add 12 new tests (useToast, BikeRoutes, map.config)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add event listener in MapLegend to handle route-select events
dispatched from the map. Previously, clicking a route on the map
would highlight it visually but not update the sidebar selection.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add project structure overview with new directories
- Document centralized config for multi-geography support
- Expand event-driven communication with bidirectional sync details
- Add testing section with Mapbox limitations and browser testing tips
@vercel
Copy link

vercel bot commented Jan 9, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
bikemap Ready Ready Preview Jan 9, 2026 10:11pm

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.

2 participants