# SPRINT 10.6 — EMAIL READER UI

## METADATA
- Execution: Hodina 6
- Prerekvizity: Sprint 10.5 COMPLETE (Inbox funguje)
- Deliverables: EmailReader.tsx, reply/forward UI
- Estimated time: 45-55 min
- Output folder: Modifikace v existujícím React projektu

## OBJECTIVES
Vytvořit kompletní Email Reader stránku:
1. Zobrazení kompletního emailu (from, to, subject, date, body)
2. HTML email rendering (safe iframe/sanitized)
3. Reply/Forward tlačítka
4. Delete, Move to folder, Mark unread akce
5. Back to inbox navigace
6. Keyboard shortcuts (j/k pro prev/next, r pro reply, Backspace pro zpět)

## STEP-BY-STEP INSTRUCTIONS

### Krok 1: Nahradit placeholder EmailReader.tsx
**Soubor:** `src/pages/EmailReader.tsx`

Layout:
```
┌──────────────────────────────────────┐
│ ← Back  │  Reply  Forward  │ 🗑 ⋯  │  ← Toolbar
├──────────────────────────────────────┤
│ Subject: Re: Project Update          │
│ From: john@example.com    Mar 28     │
│ To: me@skymailbox.net                │
├──────────────────────────────────────┤
│                                      │
│ Email body here...                   │
│ Supports HTML rendering              │
│                                      │
│                                      │
└──────────────────────────────────────┘
```

**Toolbar:**
- Back button (← ikona, naviguje na /inbox)
- Reply button → navigate to /compose?reply=<email_id>
- Forward button → navigate to /compose?forward=<email_id>
- Delete button → deleteEmail() → navigate back
- More menu (...): Move to TRASH, Mark as unread, Print

**Header section:**
- Subject (velký, bold, font-size 18px)
- From: jméno + email v závorce
- To: seznam příjemců
- Date: plný formát ("Wednesday, March 28, 2026 at 14:35")
- Labels/tags (pokud existují)

**Body:**
- Pokud html_body existuje → render v sandboxed způsobem (dangerouslySetInnerHTML s DOMPurify sanitizací, nebo iframe)
- Pokud jen plain text body → render s white-space: pre-wrap
- Instalovat DOMPurify: `npm install dompurify @types/dompurify`

**Loading state:**
- Skeleton pro header + body

### Krok 2: Email navigation
Přidat prev/next email navigaci:
- Vzít email list z emailStore
- Najít index aktuálního emailu
- Prev/Next tlačítka v toolbaru
- Keyboard: j = next, k = prev

### Krok 3: Inline reply (optional stretch goal)
Pokud čas zbývá — přidat inline reply box dole:
- Textarea s "Reply to john@example.com..."
- Send button
- Minimalistický design

### Krok 4: Testovat
1. Navigovat z inbox na email detail
2. Ověřit, že se email načte a zobrazí
3. Ověřit HTML rendering
4. Test reply → navigate to compose
5. Test delete → redirect na inbox
6. Test keyboard shortcuts

## COMPLETION CHECKLIST
- [ ] Email detail se zobrazuje správně
- [ ] From, To, Subject, Date formátovány
- [ ] HTML body renderuje bezpečně
- [ ] Plain text body renderuje s proper whitespace
- [ ] Reply naviguje na /compose?reply=id
- [ ] Forward naviguje na /compose?forward=id
- [ ] Delete funguje + redirect
- [ ] Back button funguje
- [ ] Loading state
- [ ] Build prochází

## DELIVERABLES LIST
1. `src/pages/EmailReader.tsx` (updated)
2. DOMPurify dependency (package.json updated)
3. `SPRINT_10.6_COMPLETE.md`

## COMPLETION REPORT TEMPLATE
```markdown
# ✅ SPRINT 10.6 — EMAIL READER — COMPLETE

## Timestamp
[ISO datetime]

## Components Modified
- EmailReader.tsx: rewritten

## Features
- HTML rendering: OK/ISSUE
- Reply/Forward: OK/ISSUE
- Delete: OK/ISSUE
- Keyboard nav: OK/ISSUE

## Next Sprint
SPRINT_10.7_COMPOSE_UI
```