# TripTalley — Mobile UI Design

Design reference for the thin client (native SwiftUI target; the HTML prototype
in `prototype/` mirrors these screens 1:1 and is demoable in-container). The
client renders and captures input only — all money math is server-side.

## Design language
- **Platform feel:** iOS-native. Large titles, grouped inset lists, SF-style
  type, bottom tab bar, sheet modals for creation flows.
- **Palette:** calm travel tone — teal/indigo primary (`#0F766E` / `#4F46E5`),
  warm accent for "you're owed" (green `#16A34A`) vs "you owe" (amber/red
  `#DC2626`). Neutral greys for chrome.
- **Money is the hero.** Every balance is big, signed, and color-coded. Amounts
  always show currency. Never show a raw number without its currency.
- **Offline is normal.** A subtle "Saved locally · will sync" state, not an
  error. Sync status lives in the trip header.

## Navigation model
Bottom tab bar with 3 tabs → **Trips**, **Groups**, **Profile**.
Creation flows (new trip, add expense, invite) are **modal sheets** over the
current tab. Add-expense is reachable from a prominent FAB on the trip screen.

## Screen inventory

1. **Welcome / Auth**
   - Sign up, Log in. Deep-link entry when opened from an invite link →
     pre-fills the group, shows signup, drops the user straight into the group.

2. **Trips (home tab)**
   - Sections per group. Each trip row: name, date range, member avatars, and a
     signed net-balance pill (your position across that trip).
   - Top summary: your overall net across all active trips.
   - `+` → New Trip sheet (name, group, dates, settlement currency).

3. **Trip detail**
   - Header: trip name, dates, member avatars, sync status chip.
   - Big balance card: "You're owed **£42.10**" / "You owe **£12.00**".
   - Segmented control: **Expenses** | **Balances**.
   - Expenses feed: each row = icon, title/note, payer ("Alex paid"),
     original amount + currency, your share, date. Tap → expense detail.
   - Sticky FAB **＋ Add expense**. Bottom bar action **Settle up →**.

4. **Add expense (sheet)**
   - Amount entry with big numeric display.
   - **Currency chip** pre-filled from GPS suggestion, tappable to override
     (shows "suggested from location" hint; sets `currency_overridden`).
   - Payer selector (defaults to me).
   - Split type selector: **Equal · Custom · %**. Below it a live participant
     list with per-person computed shares (equal), editable amounts (custom),
     or sliders/inputs (percentage) — always showing the running total vs the
     expense total so it must reconcile.
   - Date (defaults today), optional note/category. Save works offline.

5. **Settle up / Final tally**
   - "Who pays whom" list: `Ben → Alex  £24.00`, minimized transfers.
   - **Display-currency toggle** (defaults to your home currency); shows the
     canonical settlement amount + your converted view.
   - Expandable FX breakdown: which historical rate/date each conversion used.
   - Per-person detail on tap.

6. **Groups tab**
   - List of groups → members, trips in the group. Invite via shareable link
     (sheet with copy/share). Manage membership.

7. **Profile tab**
   - Name, email, **home currency** (drives display conversion), sign out.

## Key flows
- **Add an expense abroad:** open trip → FAB → type amount → currency already
  suggested from GPS (accept or override) → pick split → save (offline OK).
- **Join via invite:** tap link → signup → land inside the group → see its
  trips.
- **End of trip:** trip → Settle up → read the minimal "who pays whom" in your
  own currency → each debtor pays and it's done.

## Prototype
`prototype/index.html` — self-contained, phone-framed, click-through of the
screens above with sample data. No build step; served statically for the live
demo. It is a **design artifact**, not the product client.