Update Browse Breweries

[chrisjm]

Updating the Browse Breweries page to incorporate By Country and also improve some UI stuff.

From PLAN.md file

Objective

Update the browsing URLs for the "By State" and "By Type" sections on the /breweries/browse page to follow the correct dynamic route formats, fix general pagination state preservation, optimize layout alignment, and introduce high-fidelity frontend filter control tags with proper spacing.

Completed Steps

1. Analyze Route Structure: Identified that clean directory-style routes exist for countries (/breweries/[country]) and states (/breweries/[country]/[state]).
2. State-to-Country Mapping: Created a robust, static mapping under src/lib/data/state-country-mapping.json for all 188 state/provinces to support /breweries/[country]/[state] links on the browse page.
3. By Type URL Design Decision: Determined that global types (e.g., beergarden, micro, brewpub) should remain global rather than scoped to the US, so they route to the main /breweries?by_type=[type] endpoint. This allows users to browse these types across all countries.
4. Implementation: Updated both src/routes/breweries/browse/+page.ts (to load and attach country names to each state object using the static JSON mapping) and src/routes/breweries/browse/+page.svelte (to construct the updated, correct link URLs for states and types).
5. Pagination Bug Fix: Solved a bug in @/home/chris/projects/openbrewerydb-sveltekit/src/routes/breweries/+page.svelte where changing pages on filtered listings (like /breweries?by_type=brewpub) dropped the filter search parameters. Imported Svelte 5 page state from $app/state and preserved all existing search params on page changes.
6. Alignment Tuning: Right-aligned the pagination bars on @/home/chris/projects/openbrewerydb-sveltekit/src/routes/breweries/+page.svelte (both top and bottom sections) on desktop view and kept them centered on mobile. This delivers a consistent, polished layout across all directory-style pages in the app.
7. Elite Frontend Design Spacing & Badges: Improved layout density and aesthetics on @/home/chris/projects/openbrewerydb-sveltekit/src/routes/breweries/+page.svelte:
   • Added interactive Active Filter Badges (Query, State, Type) under the search bar that allow users to view active filters and close/remove them individually in real-time.
   • Removed redundant nested max-w-7xl mx-auto px-4 wrappers on the active filters row since the main page's SvelteKit layout is already enclosed in a max-w-7xl mx-auto px-4 container. This completely resolves the horizontal alignment offset, making the badge row align perfectly with the table's left border.
   • Refactored the results summary on the top bar to show for all listings (e.g., by_type or by_state filtering) instead of only textual search query, which balances the top pagination row beautifully with symmetrical text on the left and buttons on the right.
   • Restructured top-level element spacing (mb-8 and mb-6 margins) to add professional vertical breathing room.
8. Validation: Built the SvelteKit application and ran typescript checks successfully with zero errors. All targets have been verified.

[cloudflare-workers-and-pages]

Deploying openbrewerydb-sveltekit with    Cloudflare Pages

Latest commit:	28f4399
Status:	✅  Deploy successful!
Preview URL:	https://6ec33517.openbrewerydb-sveltekit.pages.dev
Branch Preview URL:	https://update-browse.openbrewerydb-sveltekit.pages.dev

View logs