My Training Sessions

All templates. Tap a card → edit (same form, prefilled).

• Tap card → edit template (Create Session form, edit mode)
• Header "+" → create new session
• Non-impactful edits (name, price, max): apply silently
• Impactful edits (time, days, location): scope picker + participant warning

My Training Sessions

All templates. Pencil icon → edit (same form, prefilled).

• Pencil → edit template (Create Session form, edit mode)
• FAB "+" → create new
• Non-impactful edits (name, price, max): apply silently
• Impactful edits (time, days, location): scope picker + participant warning

Training Locations

Three location types + two usage modes.

• In-person: pin icon + name + address + "Default" badge
• Online: video icon (colored per platform) + masked link
• Home Visit: toggle on/off + travel buffer (15/30/45/60 min). Visual timeline shows total blocked time.
• Swipe left to delete (in-person/online)

Settings mode: tap card → edit details
Select mode: tap → select + pop back

Travel buffer: added before AND after each home visit session. Backend uses blocked_start = event_start - buffer, blocked_end = event_end + buffer for overlap checks.

Add In-person

Search-first approach with smart suggestions.

• Search: Google Places autocomplete
• Gyms Near You: pre-fetched from Google Places API (type=gym) sorted by distance
• Tap result → Location Details form with map preview
• Use current location: reverse geocode user's position
• Pick on map: opens fullscreen map for manual pin drop

When user types → "Gyms Near You" replaced by autocomplete results.

Pick on Map

Fullscreen map with two modes. Tap the pill to toggle.

• Locked (default) — "Pin is locked - Tap to adjust". Map scrollable but pin stays. Safe for reviewing.
• Unlocked — "Drag to set location - Tap to lock". Pin follows map center. Address updates live.
• Search bar at top — tap opens search screen
• My location button — centers map on user
• Bottom card: reverse geocoded address
• "Confirm Location" → Location Details form

Why locked by default: prevents accidental pin movement when user opens from Location Details to verify position.

Location Details

Used for both create and edit location.

• Map preview (top) — tap opens Pick on Map for pin adjustment
• Address card — "Change" → back to search (new address)
• Location name / Description / Default toggle
• Trash icon (header, edit mode only) → delete confirmation sheet
• Delete sheet: warns if location used in templates — "This location is used in 3 training templates. They will need a new location assigned."
• "Save Location" → POST (create) or PUT (edit)

Create vs Edit: same screen. Edit prefills all fields + shows trash icon. Create hides trash icon.

Home Visit

Settings for home visit training type.

• Info banner: explains concept — coach travels to athlete
• Travel buffer: 15/30/45/60 min chips. Applied before AND after session
• Visual timeline: shows buffer + training + buffer = total blocked
• Service area: optional max distance (km). Athletes outside won't see home visit

Backend: location_type='home_visit', travel_buffer_minutes, service_area_km (optional). At booking: athlete's address + distance check against service area.

Add Online Location

Form for virtual meeting location.

• Platform: Zoom / Google Meet / Teams / Custom link
• Meeting link: URL input
• Display name: optional
• Description: optional

Backend needed: location_type enum + meeting_link field. Make lat/lon optional.

Settings

Coach: Profile, Coaching, Payments, Account.

• set-card: icon + title + sub + chevron
• Calendar Sync, Training Sessions, Locations all accessible from here
• Log out: no confirmation — tap → toast "Signed out" → (in production: clears session, navigates to sign-in). Reversible action, no data loss, friction-free per HIG precedent (Apple Fitness, Strava).

Calendar Sync

Connected: account cards with details. Zero: provider cards with Connect CTAs.

• Zero: two provider cards (Google + Apple) with full-width Connect buttons
• Connected: account cards + dashed "Add" + Apple with inline Connect

Google Calendar Detail

Dedicated screen per account. 4 states via toggle.

• Selectable rows with Google calendar colors
• "321 Fit" calendar NOT shown (auto-created)
• Save in footer, trash icon for disconnect

Apple Calendar Connect

CalDAV connection. Apple ID + app-specific password.

• Info banner explains CalDAV requirement
• Steps always visible (not expandable)
• "Open Apple ID Settings" → Safari
• Password: eye toggle inside input
• Validation: empty → red border, backend error → toast

Apple Calendar Detail

Apple-specific error states differ from Google.

• Normal: calendars (iCloud colors), Save + Disconnect
• Revoked: password changed → "Create New Password"
• 2FA Issue: yellow warning + "Open Apple ID Settings"
• Sync Error: Retry button, calendars stale but usable

Personal Data

Edit profile from Settings.

• Avatar (initials fallback) — tap anywhere on circle or pencil → pd-avatar-sheet with 3 actions: Take photo / Choose from library / Remove photo (Medium destructive, tinted red 15%). Remove is hidden when no photo is set (initials-only).
• Name: first + last
• About me: 3-line clamp, tap → full-screen editor
• Dropdowns: Time Zone / Home Country / Languages — all full-screen push, device-detected values pre-filled at onboarding
• Body metrics: gender chips; weight (kg) + height (cm) — metric only for MVP. Weight 20-300 kg, height 50-250 cm — out-of-range = red outline + inline tip on blur. inputmode="decimal" (weight) / numeric" (height) for mobile keypad.
• DOB: 3-wheel sheet (Day/Month/Year), year list capped at currentYear − 13; strict ≥ 13y validation on Set — inline red banner in sheet on fail. Prod = UIDatePicker .compact (iOS) / MaterialDatePicker (Android)

About Me Editor

Full-screen text editor. Cancel/Save header. Reusable for About Me and Notes fields.

Sport types

Push screen opened from Sport types set-card in Settings. Closed list of 33 sports across 8 sections — no custom sports (discovery, search, filter, matching all depend on canonical sport ID).

• Sticky search filters live across all sections; empty sections auto-hide; "No matches" if zero results
• 2-column card grid per section with non-sticky section headers (Fitness & Strength, Racket, Team & court, Combat, Endurance, Mind & body, Recovery & therapy, Other)
• Multi-select: .sp-card.selected only — teal border + gradient; no hardcoded tick SVGs per card (CSS-driven from class)
• Sticky footer Save disabled until selection differs from seed AND at least 1 picked; shows "(N selected)"
• Back → discard-sheet if dirty; Discard reverts to seed + goes to Settings
• On Save: Settings "Sport types" subtitle shows up to 3 names, then "+N more"

Recovery & therapy section exists because home-visit location type makes massage/physio a significant offering. Deferred from v1: Surfing / Kitesurfing / SUP / Equestrian — added on geo expansion.

Icons = draft adapted Tabler/Material style. Formal 33-icon set goes to design-tokens/assets/icons/sport/ as Phase 3 task (stable IDs, Style Dictionary pipeline).

Languages

Full-screen push from Personal Data. Multi-select — tap toggles row, Save commits all changes.

• Row: native · English (e.g. "Polski · Polish") — users search in either
• Sticky footer Save — enabled only when selection differs from initial AND at least 1 is selected; shows "(N selected)" count
• Back button: if dirty → Discard changes? sheet (Discard = Medium destructive tinted red, Keep editing = text)
• On Save: Personal Data input shows first 2 languages or "Polski +N more"
• Seed captured on screen load + re-captured after each Save to reset dirty state

Prototype = 30 common languages. Production pulls full BCP-47 list.

Home Country

Full-screen push from Personal Data. Same pattern as Time Zone — single-select, auto-dismiss.

• Leading slot: flag emoji 24×18 (prod: SVG flag set from country code)
• Row = flag + country name; alphabetical
• Current country detected from device at account creation — pre-selected
• Used for tax/currency derivation on backend, not shown elsewhere in UI

Prototype uses ~35 countries covering major markets. Production pulls full ISO 3166-1 list.

Time Zone

Full-screen push from Personal Data. Single-select — tap row auto-dismisses back to Personal Data with the new value.

• Sticky search under header — live filters list by city/region/GMT
• Row pattern: cal-select-row — 56px, teal accent on .selected, trailing checkmark toggled by class (no hardcoded SVG state)
• Default: current TZ detected from device at account creation — shown scrolled into view + checkmarked
• Empty state: "No matches" when filter returns zero
• Reusable pattern for Country and Languages selectors

Prototype uses ~20 representative TZs. Production pulls full IANA zone list from device.

Available Hours

Coach's weekly schedule — when athletes can book training sessions. Applies indefinitely until edited. New accounts are seeded with Mon–Sun 07:00–22:00 so the screen opens populated rather than empty.

• One row per day (Mon–Sun); checkbox toggles active/inactive
• Active day → 1+ time intervals (start · to · end) for split schedule (morning/evening with a break)
• + on first interval appends another below; − removes an additional interval
• Tap time input → time picker bottom sheet (wheel UI, 15-min snap)
• Timezone is read-only — set at account creation / Settings
• Footer Save availability (primary brand filled — follows feedback_footer_patterns.md, not a header icon)

Validation (live per-interval):

• End ≤ start — inline error + red outline on both inputs
• Interval < 30 min — inline error + red outline
• Intervals overlap on same day — red outline + "Overlaps with another interval"
• Save is disabled while any error exists

Non-blocking warning banners:

• No active days — amber banner, Save still allowed (temp "vacation")
• Existing bookings outside new hours — info banner + "View sessions" → bottom sheet list. Bookings stay; only new requests are affected.

Time picker (platform-native in production):

• iOS: UIDatePicker with .compact style — tap chip expands inline wheels
• Android: MaterialTimePicker dialog, dial mode
• Prototype: HTML/CSS wheel for consistent cross-platform mock
• Snap: 15-min increments; min interval length: 30 min

Flow states:

• Loading — 5 skeleton rows mimic day layout; footer hidden during fetch
• Saving — Save button shows inline spinner + cursor:wait; content still interactive (prevents accidental edit)
• Save error — red banner above footer with inline Retry; Save stays tappable as secondary retry
• Saved — snackbar "Availability updated" (1.4s) + resets to default

Back button behavior: opens Discard changes? bottom sheet. Discard = Medium destructive (tinted red), Keep editing = text button. In production, the sheet only opens when there are unsaved changes.

HIG / a11y / theming:

• Day row min-height: 44px for tap target (checkbox + label)
• Time input 56px tall
• +/− buttons visually 32×32 (matches Figma) with invisible ::before hit-area expansion to 44×44 effective
• Dark + light themed end-to-end — skeleton shimmer, banners, wheel selection band, save-error banner, checkbox border all adapt

Scope decisions (v1): single availability for all locations · no copy-to-other-days · no quick presets · no vacation mode — see project_pending_spec_updates.md for deferred items.