Wire location discovery on home page (GET /locations/nearby)

### Lineage `plan-mcd-tracker` → Phase 7a (Location Discovery + Navigation) ### Repo `forgejo_admin/mcd-tracker-app` ### User Story As a new user with zero saved locations I want to see nearby McDonald's when I open the home page So that I can browse, navigate to one, and start using the app immediately ### Context The home page currently shows only saved locations from GET /dashboard (empty for new users). The API already has GET /locations/nearby?lat=X&lng=Y which returns McDonald's from OpenStreetMap. The playground home.html design already has the layout. Wire the data: GPS on mount → fetch nearby → render location cards. ### File Targets Files to modify: - `src/routes/home/+page.svelte` — add onMount GPS → GET /locations/nearby, render results in a "Nearby" section above saved locations - `src/lib/api.js` — may need an unauthenticated fetch variant if /nearby should work pre-login (check if it does) Files NOT to touch: - `src/lib/keycloak.js` — auth is fine - `src/routes/+page.svelte` — landing page, unrelated - Any CSS — all styles are in app.css already ### Acceptance Criteria - [ ] Home page calls navigator.geolocation on mount - [ ] GPS coords → GET /locations/nearby?lat=X&lng=Y&radius=5000 - [ ] Nearby McDonald's render as location cards (reuse existing .loc-row pattern) - [ ] Each card shows name, address, distance - [ ] Tapping a card navigates to /locations/[id] (or a discover detail view) - [ ] "Guide me there" link on location detail: opens Apple Maps (iOS) or Google Maps (web) with directions - [ ] Works on phone via dev overlay (mcd-tracker-dev.tail5b443a.ts.net) ### Test Expectations - [ ] Open app on phone → see nearby McDonald's - [ ] Tap "Guide me there" → native maps opens with directions - Run command: `npm run dev -- --host` (test via dev overlay) ### Constraints - Reuse existing CSS classes from app.css (.loc-row, .loc-row-name, .loc-row-address, etc.) - GPS permission: handle denied gracefully (show message, not crash) - The /locations/nearby endpoint requires auth — user must be logged in - Distance display: convert meters to miles (US users) - Read the playground home.html @-comment spec for full state/interactivity mapping ### Checklist - [ ] PR opened - [ ] Works on phone - [ ] No unrelated changes ### Related - `mcd-tracker` — project - `plan-mcd-tracker` — Phase 7a - `phase-mcd-tracker-7a-location-discovery`

forgejo_admin commented

2026-03-17 07:55:29 +00:00

Contributor

Lineage

plan-mcd-tracker → Phase 7a (Location Discovery + Navigation)

Repo

forgejo_admin/mcd-tracker-app

User Story

As a new user with zero saved locations
I want to see nearby McDonald's when I open the home page
So that I can browse, navigate to one, and start using the app immediately

Context

The home page currently shows only saved locations from GET /dashboard (empty for new users). The API already has GET /locations/nearby?lat=X&lng=Y which returns McDonald's from OpenStreetMap. The playground home.html design already has the layout. Wire the data: GPS on mount → fetch nearby → render location cards.

File Targets

Files to modify:

src/routes/home/+page.svelte — add onMount GPS → GET /locations/nearby, render results in a "Nearby" section above saved locations
src/lib/api.js — may need an unauthenticated fetch variant if /nearby should work pre-login (check if it does)

Files NOT to touch:

src/lib/keycloak.js — auth is fine
src/routes/+page.svelte — landing page, unrelated
Any CSS — all styles are in app.css already

Acceptance Criteria

Home page calls navigator.geolocation on mount
GPS coords → GET /locations/nearby?lat=X&lng=Y&radius=5000
Nearby McDonald's render as location cards (reuse existing .loc-row pattern)
Each card shows name, address, distance
Tapping a card navigates to /locations/[id] (or a discover detail view)
"Guide me there" link on location detail: opens Apple Maps (iOS) or Google Maps (web) with directions
Works on phone via dev overlay (mcd-tracker-dev.tail5b443a.ts.net)

Test Expectations

Open app on phone → see nearby McDonald's
Tap "Guide me there" → native maps opens with directions
Run command: npm run dev -- --host (test via dev overlay)

Constraints

Reuse existing CSS classes from app.css (.loc-row, .loc-row-name, .loc-row-address, etc.)
GPS permission: handle denied gracefully (show message, not crash)
The /locations/nearby endpoint requires auth — user must be logged in
Distance display: convert meters to miles (US users)
Read the playground home.html @-comment spec for full state/interactivity mapping