Patrick Toal
108c042921
fix(edge-fn): use user.id instead of claims.sub; fixes 500s and false cert_required fix(migrations): drop broad reservations SELECT policy; add reservation_slots view with security_invoker=false fix(tests): correct weekSlot() keys from start/end to start_time/end_time fix(tests): spread overlap test slots across separate ISO weeks fix(tests): update e2e assertion to match actual authenticated home text fix(app): hide IonMenu before user is authenticated feat(dx): add test:all script running unit, integration, and e2e in sequence docs(claude-md): document SELinux fix, Edge Function auth pattern, security_invoker behaviour
74 lines
5.2 KiB
Markdown
74 lines
5.2 KiB
Markdown
# Session Handoff: Home Page Content + E2E Fixes
|
|
**Date:** 2026-04-20
|
|
**Session Duration:** ~1.5 hours
|
|
**Session Focus:** Build authenticated home page; fix E2E test issues from prior session
|
|
**Context Usage at Handoff:** Low
|
|
|
|
## What Was Accomplished
|
|
|
|
1. **Playwright E2E: fixed selector issues** — `IonButton router-link` renders as role=`link` not `button`; `IonInput` label not associated via `for`/`id`, use `getByPlaceholder` instead
|
|
2. **Playwright E2E: fixed magic link redirect** — `supabase/config.toml` had wrong `site_url` (`127.0.0.1` → `localhost`) and missing `/auth/callback` in `additional_redirect_urls`; also added server-side redirect follow via `fetch(magicLink, { redirect: 'manual' })` to avoid browser connecting to Supabase local port
|
|
3. **E2E tests passing: 2/2** — splash→login→magic link→home flow + protected route redirect
|
|
4. **Home page built** → `app/pages/index.vue` — Welcome heading, upcoming reservations card, Create Reservation button, inline PrimeVue DatePicker calendar
|
|
5. **WeatherWidget component created** → `app/components/WeatherWidget.vue` — Open-Meteo (free, no key), shows temp/conditions/wind in knots; 10-minute `localStorage` cache to avoid API overload
|
|
6. **Marina coordinates set**: `43.4412629, -79.6696725` (Oakville/Bronte Harbour)
|
|
7. **`IonSplitPane` added** to `app/app.vue` — sidebar open by default on desktop (≥992px); user reverted `auto-hide="false"` on `IonMenuButton` in `index.vue` — desktop sidebar toggle behavior is OPEN
|
|
|
|
## Exact State of Work in Progress
|
|
|
|
- Desktop sidebar toggle: `IonSplitPane` is in `app.vue` but `auto-hide="false"` was reverted from `index.vue`; sidebar opens on desktop but hamburger icon hides — revisit next session if needed
|
|
- `/reservations/create` route: wired up as `router-link` on Create Reservation button but page does not exist yet
|
|
|
|
## Decisions Made This Session
|
|
|
|
- **Open-Meteo for weather** BECAUSE free, no API key, client-side CORS allowed, updates every 15 min — STATUS: confirmed
|
|
- **10-minute `localStorage` cache for weather** BECAUSE Open-Meteo updates every 15 min; survives page refresh — STATUS: confirmed
|
|
- **Server-side redirect follow for E2E magic link** BECAUSE Playwright Chromium headless shell cannot reach `127.0.0.1:54321` (Supabase local auth); Node.js `fetch` can — STATUS: confirmed
|
|
|
|
## Key Numbers Generated or Discovered This Session
|
|
|
|
- Weather cache TTL: 10 minutes (`600_000` ms)
|
|
- Open-Meteo wind unit: knots (`wind_speed_unit=kn`)
|
|
- Marina coordinates: `43.4412629, -79.6696725`
|
|
- `IonSplitPane` desktop breakpoint: `lg` = 992px (Ionic default)
|
|
- E2E tests: 2/2 passing
|
|
|
|
## Files Created or Modified
|
|
|
|
| File Path | Action | Description |
|
|
|-----------|--------|-------------|
|
|
| `app/pages/index.vue` | Modified | Full home content: welcome, reservations card, create button, calendar |
|
|
| `app/components/WeatherWidget.vue` | Created | Open-Meteo weather card with localStorage cache |
|
|
| `app/app.vue` | Modified | Added `IonSplitPane` wrapping menu + router outlet |
|
|
| `supabase/config.toml` | Modified | `site_url` → `http://localhost:3000`; added `/auth/callback` to `additional_redirect_urls` |
|
|
| `tests/e2e/auth.spec.ts` | Modified | Fixed selectors; added server-side redirect follow for magic link |
|
|
| `docs/summaries/handoff-2026-04-19-playwright-e2e-setup.md` | Created | Prior session handoff (Playwright setup) |
|
|
|
|
## What the NEXT Session Should Do
|
|
|
|
1. **Build `app/pages/reservations/create.vue`** — reservation creation form
|
|
- Fields needed: boat selection, date/time (start + end), reason, passengers (member_ids)
|
|
- Schema ref: `app/types/supabase.ts` → `reservations` table Insert type
|
|
- On submit: `supabase.from('reservations').insert(...)` with `user_id = user.value.id`, default `status = 'pending'`
|
|
- On success: navigate to `/` or a reservation detail page
|
|
2. Read `app/types/supabase.ts` for boats + reservations schema before writing the form
|
|
3. Read `app/stores/auth.ts` for `user` ref and `member` data (member_ids on the reservation)
|
|
|
|
## Open Questions Requiring User Input
|
|
|
|
- [ ] **Desktop hamburger behaviour** — `IonSplitPane` is active but user reverted `auto-hide="false"`; should the hamburger be visible on desktop to allow closing the sidebar, or hidden when sidebar is open? Impacts `IonMenuButton` props on every page
|
|
- [ ] **Reservation form: boat selection** — should the user pick from all `booking_available = true` boats, or filtered by their certifications (`member.certifications` vs `boat.required_certs`)? Impacts query in create form
|
|
- [ ] **Reservation form: time selection** — free-form time pickers, or constrained to `interval_templates`? Impacts form UI significantly
|
|
- [ ] **After reservation created** — navigate to reservation detail, home page, or show confirmation inline?
|
|
|
|
## Assumptions That Need Validation
|
|
|
|
- ASSUMED: `supabase stop && supabase start` was run after `config.toml` change — E2E tests pass so this is confirmed
|
|
- ASSUMED: PrimeVue `DatePicker` inline renders correctly in Ionic card on mobile — not manually tested in browser since session end
|
|
|
|
## Files to Load Next Session
|
|
|
|
- `app/types/supabase.ts` — boats + reservations schema for form fields
|
|
- `app/stores/auth.ts` — user/member refs for form submission
|
|
- `app/pages/index.vue` — reference for page structure pattern
|