feat(soccer-app): add country filter to team sidebar

[ayushtr-aws]

Summary

Implements TG-5: Add country filter from the "improve soccer team browsing filters" epic.

• Adds an accessible country dropdown (<select> with an associated <label htmlFor>) to the soccer team sidebar.
• Includes an "All countries" option (default) represented by the shared ALL_COUNTRIES sentinel.
• Derives the available countries from the team data via a new getCountries() helper (de-duplicated, alphabetically sorted).
• Combines the country filter with the existing search and sort behavior — queryTeams() now accepts an optional country argument and applies matchesSearch + matchesCountry before sorting.
• Updates the empty-state message to be accurate when no results come from filters rather than only the search query.

Files changed

• soccer-app/src/utils/teamQuery.ts — added ALL_COUNTRIES, getCountries(), matchesCountry(), and an optional country parameter to queryTeams().
• soccer-app/src/App.tsx — added country state, rendered the labeled country <select>, wired it into queryTeams.
• soccer-app/src/App.css — styling for .filter-controls, .filter-label, .country-filter matching the existing sidebar look.

Accessibility

• The <select> has an explicit id linked to a <label htmlFor="country-filter">, so it is announced correctly by screen readers.
• A native <select> is used, which is keyboard-operable and accessible by default.

Build & test results

Dependencies were installed with npm install (the soccer-app node_modules were not present).

• mise run build → PASS (tsc -b && vite build, built in ~113ms, no type errors).
• mise run lint → PASS (oxlint, no warnings/errors).

The repo has no automated test suite; changes were validated via the type-checked build and lint.

Decisions made

• Used a native <select> dropdown (rather than a custom button group like the sort control) for accessibility and to scale gracefully as more countries are added.
• Kept the shared naming from the orchestration context by using an explicit ALL_COUNTRIES sentinel and an "All countries" label; queryTeams's new country parameter is optional and defaults to all countries, preserving backward compatibility with existing callers.

Agent notes

• What went well: The existing teamQuery.ts utility already cleanly separated matching/sorting logic, so extending it for country filtering was straightforward and testable.
• What was difficult: The initial mise run build/mise run lint failed because soccer-app/node_modules was not installed (tsc/oxlint not found); running npm install in soccer-app resolved it.
• Conventions discovered: Conventional commits scoped to soccer-app; styling uses a dark slate palette (#0f172a, #334155, #3b82f6 accents); query/filter logic lives in src/utils/teamQuery.ts.
• Suggestions: Consider adding unit tests for teamQuery.ts (pure functions, easy to cover) and enabling pipeline.buildCommand/pipeline.lintCommand in the blueprint so build/lint gating is active.

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of the project license.

🤖 Generated with Claude Code

[ayushtr-aws]

Follow-up changes (commit 5fcb41e)

Addressed the requested follow-ups on the country filter work:

Compact active-filter summary

• Added an .active-filters bar below the sidebar controls that appears only when a search and/or country filter is active.
• Shows a live result count (e.g. "3 teams" / "1 team") with role="status" + aria-live="polite" so screen readers are notified.
• Renders removable chips for the active country and search filters (each with an accessible label and a × clear button), plus a Clear all button.

Improved keyboard accessibility for the country filter

• Added an explicit aria-label="Filter teams by country" on the <select> (in addition to the existing linked <label>).
• Pressing Escape while the dropdown is focused resets it to "All countries".
• Added visible :focus-visible rings on the country select, chip remove buttons, and the "Clear all" button.

README

• Rewrote soccer-app/README.md to document the app, the search/country/sort filters, the active-filter summary, keyboard accessibility, and the teamQuery.ts helper API.

Build & test results

• mise run build → PASS (tsc -b && vite build, built in ~150ms, no type errors). soccer-app/node_modules had to be reinstalled via npm install first (tsc/oxlint were not present).
• mise run lint → PASS (oxlint, no warnings/errors).
• The repo has no automated test suite; validation was via the type-checked build and lint.

No open review comment threads were present on the PR, so there were no individual threads to reply to.

[ayushtr-aws]

Background agent — COMPLETED

Field	Value
Task	01KZP3HT7ZZW1G3XTV6BTFFCJW
Repo	ayushtr-aws/abca-testing
Status	COMPLETED
Last event	task_completed @ 2026-08-10T15:12:37.509Z
Pull request	link
Duration	118.3s
Cost	$0.5762