# SPRINT 10.7 — COMPOSE EMAIL UI

## METADATA
- Execution: Hodina 7
- Prerekvizity: Sprint 10.6 COMPLETE
- Deliverables: Compose.tsx, EmailComposer component
- Estimated time: 45-55 min
- Output folder: Modifikace v existujícím React projektu

## OBJECTIVES
Vytvořit kompletní Compose Email stránku:
1. To/CC/BCC input s email validací
2. Subject input
3. Rich text body editor (nebo quality textarea)
4. Send button s loading state
5. Discard draft
6. Reply/Forward pre-fill z query params
7. Attachment placeholder (UI only, backend later)

## STEP-BY-STEP INSTRUCTIONS

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

Layout:
```
┌────────────────────────────────────┐
│  ✏️ New Message          Discard   │
├────────────────────────────────────┤
│ To:    [email input chips]         │
│ CC:    [toggle visibility]         │
│ BCC:   [toggle visibility]         │
├────────────────────────────────────┤
│ Subject: [input]                   │
├────────────────────────────────────┤
│                                    │
│ [textarea / rich editor]           │
│                                    │
│                                    │
│                                    │
├────────────────────────────────────┤
│ 📎 Attach  │           [Send ▶]   │
└────────────────────────────────────┘
```

**To input:**
- Email validation on blur
- Multiple recipients: comma-separated → zobrazit jako "chips" (rounded badges)
- Autocomplete z předchozích kontaktů (nice to have)

**CC/BCC:**
- Skryté defaultně
- "Add CC/BCC" link pod To polem → toggle visibility

**Subject:**
- Simple text input
- Pokud reply: pre-fill "Re: [original subject]"
- Pokud forward: pre-fill "Fwd: [original subject]"

**Body editor:**
- Kvalitní textarea s min-height 300px
- Font: monospace pro text emails
- Pokud reply: pre-fill s quoted original:
  ```


  On [date], [from] wrote:
  > [original body, each line prefixed with >]
  ```
- Pokud forward: pre-fill s forwarded content:
  ```


  ---------- Forwarded message ----------
  From: [from]
  Date: [date]
  Subject: [subject]
  To: [to]

  [body]
  ```

**Send:**
- Volat emailStore.sendEmail(to, subject, body)
- Loading state na button
- Success → toast notification "Email sent!" + navigate to /inbox
- Error → zobrazit error message

**Discard:**
- Confirm dialog "Discard this draft?"
- Navigate to /inbox

### Krok 2: Reply/Forward pre-fill
Číst URL query params:
```ts
const [searchParams] = useSearchParams();
const replyTo = searchParams.get('reply');
const forwardId = searchParams.get('forward');
```

Pokud replyTo nebo forwardId existuje:
1. Načíst originální email z emailStore.loadEmail(id)
2. Pre-fill To (pro reply: original from)
3. Pre-fill Subject
4. Pre-fill Body s quoted text

### Krok 3: Email chip component
**Soubor:** `src/components/EmailChip.tsx`

Malá komponenta pro zobrazení email adresy jako "chip":
- Rounded badge s textem
- X button pro remove
- Zelená barva pokud validní email, červená pokud ne

### Krok 4: Toast notification
**Soubor:** `src/components/Toast.tsx`

Jednoduchý toast component:
- Slide in from top-right
- Auto-dismiss po 3s
- Varianty: success (green), error (red), info (blue)
- Použít pro "Email sent!", "Email deleted", errors

### Krok 5: Testovat
1. Navigovat na /compose
2. Vyplnit To, Subject, Body
3. Send → ověřit loading + redirect
4. Test reply: /compose?reply=<id> → pre-filled fields
5. Test forward: /compose?forward=<id> → pre-filled
6. Test discard

## COMPLETION CHECKLIST
- [ ] Compose form renderuje správně
- [ ] To/CC/BCC inputs s validací
- [ ] Subject input
- [ ] Body textarea/editor
- [ ] Send volá API a redirectuje
- [ ] Reply pre-fill funguje
- [ ] Forward pre-fill funguje
- [ ] Discard s confirm dialogem
- [ ] Toast notifications
- [ ] Build prochází

## DELIVERABLES LIST
1. `src/pages/Compose.tsx` (updated)
2. `src/components/EmailChip.tsx`
3. `src/components/Toast.tsx`
4. `SPRINT_10.7_COMPLETE.md`

## COMPLETION REPORT TEMPLATE
```markdown
# ✅ SPRINT 10.7 — COMPOSE EMAIL — COMPLETE

## Timestamp
[ISO datetime]

## Components
- Compose.tsx: OK
- EmailChip.tsx: OK
- Toast.tsx: OK

## Features
- Send email: OK/ISSUE
- Reply pre-fill: OK/ISSUE
- Forward pre-fill: OK/ISSUE
- CC/BCC toggle: OK/ISSUE

## Next Sprint
SPRINT_10.8_FOLDERS_SEARCH
```