Add market sort/pagination, frontend CI updates, and visual regression tests

[samsonmark0998-tech]

Summary

Add market sort/pagination, frontend CI updates, and visual regression tests

What was solved

#1282 — F-64: Sort options for market list

Add sort options (fight date, pool size, newest) to the market list by introducing a URL-synced sort dropdown in MarketFilterBar and threading the selected sort through useMarkets into the API query params.

Addressed:

• Changed: frontend/components/MarketFilterBar.tsx, hooks/useMarkets.ts
• Add a sort dropdown to frontend/components/MarketFilterBar.tsx with options for fight date, pool size, and newest
• Sync the selected sort value to the URL (query param) so it persists and is shareable
• Pass the sort value through hooks/useMarkets.ts into the API query params

#1283 — F-65: Paginate / infinite-scroll the market list

Add pagination/infinite scroll to the frontend market list so MarketList no longer renders every market at once. Implement IntersectionObserver-based 'load more' in MarketList, extend useMarkets to support paged fetching that respects active filters and sort, and show a bottom loading indicator.

Addressed:

• Changed: frontend/components/MarketList.tsx, hooks/useMarkets.ts
• Load more markets via IntersectionObserver when the sentinel at the bottom of the list enters the viewport
• Pagination must work correctly with existing filters and sort options (reset to first page when filters/sort change)
• Show a loading indicator at the bottom of the list while fetching the next page

#1297 — F-79: Frontend CI: run on main, add lint and Storybook build

Update the frontend CI workflow so it also triggers on pushes to main, runs the frontend lint script, builds Storybook, and caches npm dependencies keyed on the lockfile. This is a focused CI configuration change limited to .github/workflows/frontend-ci.yml.

Addressed:

• Changed: .github/workflows/frontend-ci.yml
• Add a push trigger for the main branch to the workflow's on: block (keep existing triggers such as pull_request).
• Add a step running npm run lint in the frontend job.
• Add a step running the Storybook build (e.g. npm run build-storybook).

#1298 — F-80: Visual regression tests for core components

Add visual regression coverage for the core frontend components (MarketCard, BettingInterface, FighterCard) by setting up Storybook test-runner/Chromatic, providing light and dark snapshots for each component, and documenting the snapshot update workflow.

Addressed:

• Changed: frontend/package.json, README.md
• Set up Storybook test-runner or Chromatic for visual regression testing
• Provide light and dark snapshots for each core component: MarketCard, BettingInterface, FighterCard
• Document the snapshot update workflow

Changes

• frontend/components/MarketFilterBar.tsx (modify)
• hooks/useMarkets.ts (create)
• frontend/components/MarketList.tsx (modify)
• .github/workflows/frontend-ci.yml (modify)
• frontend/package.json (modify)
• README.md (modify)

Approach

1. F-64: Sort options for market list #1282 — F-64: Sort options for market list (Changed: frontend/components/MarketFilterBar.tsx, hooks/useMarkets.ts)
2. F-65: Paginate / infinite-scroll the market list #1283 — F-65: Paginate / infinite-scroll the market list (Changed: frontend/components/MarketList.tsx, hooks/useMarkets.ts)
3. F-79: Frontend CI: run on main, add lint and Storybook build #1297 — F-79: Frontend CI: run on main, add lint and Storybook build (Changed: .github/workflows/frontend-ci.yml)
4. F-80: Visual regression tests for core components #1298 — F-80: Visual regression tests for core components (Changed: frontend/package.json, README.md)

Issues

Closes #1282
Closes #1283
Closes #1297
Closes #1298