# tryst-profile-preview.screen

Rendered "as a Tryst client sees it" preview. Implements [surface-tryst.brief.md §3](./surface-tryst.brief.md). The canonical "what does my listing look like right now" surface. Reached from tryst-profile-editor.screen.md "Preview" CTA, from chat-home when Cocotte proposes profile updates, or directly via surfaces-settings.screen.md. Voice: working (UI scaffolding around the rendered preview; the preview content itself is in Quinn's Tryst-audience voice per §13).

## Layout (full-screen, rendered to roughly match tryst.link's layout)

```
┌─────────────────────────────────────────────────┐
│ ◄ Editor                       Approve & push   │ 56pt
├─────────────────────────────────────────────────┤
│  Preview · what clients see                     │   label
│  [ Live ▼ ]  [ Proposed ▼ ]   [ Side-by-side ]  │   variant picker
├─────────────────────────────────────────────────┤
│                                                 │
│  ╔═══════════════════════════════════════════╗  │   simulated Tryst frame
│  ║ [ Hero photo ]                            ║  │
│  ║ @transquinnftw  · TLC  · ✓ verified       ║  │
│  ║ San Francisco · available now             ║  │
│  ║                                           ║  │
│  ║ About                                      ║  │
│  ║ Independent escort based in the Bay      ║  │
│  ║ Area. Trans, femme, real, no rush.       ║  │
│  ║                                           ║  │
│  ║ Rates                                      ║  │
│  ║ Incall  1h $400 / 2h $700                 ║  │
│  ║ Outcall 1h $500 / 2h $850                 ║  │
│  ║ Overnight $2,500                           ║  │
│  ║                                           ║  │
│  ║ Services                                   ║  │
│  ║ GFE · Companionship · Tours · Multi-hour  ║  │
│  ║                                           ║  │
│  ║ Hours · Mon 10–02 · Wed 12–22 · …          ║  │
│  ║                                           ║  │
│  ║ Touring                                    ║  │
│  ║ Berlin (Oct 3–7)                           ║  │
│  ║                                           ║  │
│  ║ Photos · 8 in gallery                      ║  │
│  ║ [ thumbnails row ]                         ║  │
│  ║                                           ║  │
│  ║ ★ 4.8 (32 reviews)                          ║  │
│  ╚═══════════════════════════════════════════╝  │
│                                                 │
│  ⓘ Cocotte's render — actual Tryst layout         │
│    may differ slightly.                          │
│                                                 │
└─────────────────────────────────────────────────┘
```

## Components

| Component | Notes |
|---|---|
| Top bar | Back + Approve-and-push (commits proposed state to Tryst via adapter). |
| Variant picker | "Live" (what Tryst is currently showing), "Proposed" (what's about to ship if approved), "Side-by-side" (compare). |
| Simulated frame | Best-effort visual match of tryst.link's profile page layout. Uses real photo data when connected; placeholder otherwise. |
| Disclaimer chip | "Cocotte's render — actual Tryst layout may differ slightly." Honest about preview fidelity. |

## States

1. **Live mode** (default if no pending changes) — shows current Tryst-fetched state. Approve disabled.
2. **Proposed mode** — shows about-to-ship state. Approve enabled.
3. **Side-by-side** — split-screen; live on left, proposed on right (or stacked on iPhone narrow).
4. **Diff highlighted** — in any mode, changed fields pulse softly with a chip "changed."
5. **Fetching live** — banner + skeleton on the live variant.
6. **Live unavailable** (Tryst session expired or rate-limited) — banner: "Couldn't fetch live state. Showing last-cached from {time}. [Refresh]"
7. **Approval mid-flight** — banner: "Pushing to Tryst…" 1–5s.
8. **Approved** — sheet dismisses; receipt as per editor.
9. **Approval failed** — banner with retry.
10. **VoiceOver** — frame contents read top-to-bottom as a structured profile.

## Interactions

- **Tap "Approve & push"** → high-stakes confirmation (per brief M §M3 if anything brand-sensitive changed): "Pushing N changes to your Tryst profile. 3 things changing: rates, about-me, hero photo. Push?"
- **Tap variant picker** → switch between Live / Proposed / Side-by-side.
- **Pinch-zoom on frame** → larger render.
- **Tap a field in the frame** → opens the editor scoped to that field.
- **Tap a photo thumbnail** → opens [tryst-photo-manager.screen.md](./tryst-photo-manager.screen.md).

## Edge cases

- **Live mode requested but Tryst session expired** — fall back to cached live; chip explains. Re-auth route available.
- **Proposed mode with no pending changes** — banner: "Nothing changed. Live and proposed are identical."
- **Photos changed but new photos not yet uploaded to Tryst** (upload pending) — chip on each unmigrated photo: "uploading…"
- **Listing archived (per surface-tryst §12)** — top banner: "Your listing is archived. Approving will re-activate it. Confirm?"
- **K2 phrase still present in proposed** — Approve disabled until resolved.
- **Reviews count or rating changed** (Tryst ingested new review) — chip: "1 new review since you last opened the editor."

## *Generalization callout*

Per-surface preview screens follow this exact pattern — simulated frame in the surface's native layout + Live/Proposed/Side-by-side picker + disclaimer + Approve-and-push. The frame's *visual schema* differs per surface but the meta-UX (picker, diff-pulse, approve-flow) reuses.

## Related

- [surface-tryst.brief.md §3](./surface-tryst.brief.md) — parent.
- [tryst-profile-editor.screen.md](./tryst-profile-editor.screen.md) — editor entry.
- [tryst-photo-manager.screen.md](./tryst-photo-manager.screen.md) — photo thumbnail target.
- [Brief M §M3](./M-error-degraded-modes.brief.md) — high-stakes confirmation pattern.
- [Brief I](./I-audit-trust-replay.brief.md) — push action = audit row.
- [Brief H §H4 multi-surface card](./H-recurring-chores.brief.md) — parent for the approve-and-push fanout.

## Out of scope

- Pixel-perfect Tryst clone (the disclaimer chip is the safety hedge — close-enough render).
- Editing from within preview (preview is read-only-with-jump-to-editor; never an editor).
- Cross-surface preview comparison (defer).