# 🗺️ MAP PAGE - REDESIGN CORRECT (selon DESIGN_SYSTEM_GUIDE.md)

## ❌ PROBLÈMES ACTUELS

### 1. Design System non respecté
- ❌ Pas de classes `.card`, `.card-gradient`, etc.
- ❌ Styles custom au lieu des tokens
- ❌ Trop d'effets custom (metric-pill, sidebar-card, etc.)
- ❌ Pas cohérent avec Dashboard/Profile

### 2. Expérience utilisateur
- ❌ Trop d'overlays qui cachent la carte
- ❌ Sidebar prend trop de place (300px)
- ❌ Contrôles dispersés
- ❌ Pas de hiérarchie claire
- ❌ Interactions confuses

---

## ✅ SOLUTION - Design System + UX Pensée

### Principes
1. **Utiliser les vraies classes** du DESIGN_SYSTEM_GUIDE.md
2. **Carte = Hero** - Maximum de place pour la map
3. **Overlays minimalistes** - Ne pas cacher la carte
4. **Glass panels** - Pour transparence sur la map
5. **Hiérarchie claire** - 1 CTA principal visible

### Layout Simplifié

```
┌─────────────────────────────────────────────────────┐
│  [Search (glass-accent)]           [Actions]        │ ← Topbar compact
├─────────────────────────────────────────────────────┤
│                                                     │
│                    CARTE FULLSCREEN                 │ ← Hero
│                                                     │
│  [Card mini]                        [Controls]      │ ← Overlays discrets
│                                                     │
│                                                     │
│           [Bottom card si tracking]                 │ ← Conditionnel
└─────────────────────────────────────────────────────┘
```

### Composants avec VRAIES classes

#### 1. Topbar (glass-accent)
```vue
<header class="map-topbar glass-accent">
  <SearchBar class="map-search" />
  <div class="topbar-actions">
    <q-btn flat round icon="brightness_6" />
    <q-btn class="button-accent" icon="auto_fix_high" label="Optimiser" />
  </div>
</header>

<style>
.map-topbar {
  /* Utilise .glass-accent du design system */
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 100;
  display: flex;
  gap: 12px;
  padding: 12px;
}
</style>
```

#### 2. Route Info Card (card-gradient + hover-lift)
```vue
<aside class="route-info-card card-gradient hover-lift">
  <div class="card-header">
    <h3 class="text-accent-primary">Itinéraire</h3>
    <q-chip v-if="optimized" color="positive" dense>
      <q-icon name="trending_down" />
      -15min
    </q-chip>
  </div>
  
  <div class="route-stats">
    <div class="stat-item">
      <q-icon name="route" />
      <span>{{ distance }}</span>
    </div>
    <div class="stat-item">
      <q-icon name="schedule" />
      <span>{{ duration }}</span>
    </div>
  </div>
  
  <q-btn class="btn-gradient hover-glow" icon="auto_fix_high" label="Optimiser" />
</aside>

<style>
.route-info-card {
  /* Utilise .card-gradient du design system */
  position: absolute;
  bottom: 80px;
  left: 16px;
  z-index: 90;
  width: 280px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>
```

#### 3. Controls Group (glass-accent)
```vue
<div class="map-controls-group glass-accent">
  <q-btn flat round icon="add" @click="zoomIn" />
  <q-btn flat round icon="remove" @click="zoomOut" />
  <q-separator />
  <q-btn flat round icon="my_location" @click="centerMe" />
  <q-btn 
    flat 
    round 
    :icon="tracking ? 'stop' : 'play_arrow'" 
    :color="tracking ? 'negative' : 'positive'"
    @click="toggleTracking" 
  />
</div>

<style>
.map-controls-group {
  /* Utilise .glass-accent du design system */
  position: absolute;
  top: 90px;
  right: 16px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}
</style>
```

#### 4. Tracking Bar (card-gradient + glow-accent)
```vue
<footer v-if="isTracking" class="tracking-bar card-gradient glow-accent">
  <div class="tracking-status">
    <div class="status-dot glow-accent-pulse"></div>
    <span>Suivi actif</span>
  </div>
  
  <div class="tracking-metrics">
    <span>{{ speed }} km/h</span>
    <span>{{ elapsed }}</span>
    <span>{{ remaining }}</span>
  </div>
  
  <q-btn flat color="negative" icon="stop" label="Terminer" @click="stopTracking" />
</footer>

<style>
.tracking-bar {
  /* Utilise .card-gradient + .glow-accent du design system */
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
}

.status-dot {
  /* Utilise .glow-accent-pulse du design system */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--positive);
}
</style>
```

---

## 🎯 EXPÉRIENCE UTILISATEUR

### User Flow Principal
1. **Arrivée** → Carte fullscreen visible immédiatement
2. **Recherche** → Topbar glass pour chercher POI
3. **Planification** → Card flottante pour voir infos route
4. **Optimisation** → 1 bouton CTA clair
5. **Navigation** → Tracking bar apparaît si activé

### Interactions
- **Click carte** → Sélectionne POI/étape
- **Hover controls** → Tooltips clairs
- **Click "Optimiser"** → Preview delta dans card
- **Click "Appliquer"** → Route mise à jour
- **Toggle tracking** → Bar apparaît en bas

### Principes UX
- ✅ **1 action principale visible** (Optimiser)
- ✅ **Carte = priorité** (90% de l'écran)
- ✅ **Overlays discrets** (glass transparent)
- ✅ **Feedback visuel** (glow, pulse)
- ✅ **Mobile-first** (même flow sur mobile)

---

## 📦 CODE STRUCTURE

```vue
<template>
  <q-page class="map-page">
    <!-- Carte fullscreen -->
    <div class="map-container">
      <MapView />
    </div>

    <!-- Topbar search -->
    <header class="map-topbar glass-accent">
      <SearchBar />
      <q-btn class="button-accent" icon="auto_fix_high" label="Optimiser" />
    </header>

    <!-- Route info card -->
    <aside class="route-card card-gradient hover-lift">
      <h3 class="text-accent-primary">Itinéraire</h3>
      <div class="route-stats">...</div>
      <q-btn class="btn-gradient hover-glow">Optimiser</q-btn>
    </aside>

    <!-- Controls -->
    <div class="map-controls glass-accent">
      <q-btn flat round icon="add" />
      <q-btn flat round icon="remove" />
      <q-btn flat round icon="my_location" />
    </div>

    <!-- Tracking bar (conditional) -->
    <footer v-if="tracking" class="tracking-bar card-gradient glow-accent">
      <div class="status-dot glow-accent-pulse"></div>
      <span>Suivi actif</span>
      <q-btn flat color="negative" icon="stop" />
    </footer>
  </q-page>
</template>

<style scoped>
.map-page {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.map-container {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Tous les overlays utilisent les classes du design system */
/* .glass-accent, .card-gradient, .hover-lift, .btn-gradient, etc. */
</style>
```

---

## 🎨 CLASSES UTILISÉES (Design System)

| Élément | Classes | Justification |
|---------|---------|---------------|
| Topbar | `.glass-accent` | Transparent sur carte |
| Route Card | `.card-gradient .hover-lift` | Important mais pas MEGA |
| Controls | `.glass-accent` | Transparent, discret |
| Tracking Bar | `.card-gradient .glow-accent` | Important quand actif |
| Status Dot | `.glow-accent-pulse` | Feedback visuel animé |
| CTA Optimiser | `.btn-gradient .hover-glow` | Action principale |
| Boutons secondaires | `.button-accent` | Actions normales |

### Pas de classes MEGA !
- ❌ Pas de `.card-gradient-mega`
- ❌ Pas de `.btn-gradient-mega`
- ❌ Pas de `.text-gradient-mega`

**Raison:** MapPage = outil, pas landing page. Carte = hero.

---

## 📱 RESPONSIVE

### Desktop (> 768px)
```
- Topbar full width
- Route card left bottom
- Controls right top
- Tracking bar centered bottom
```

### Mobile (< 768px)
```
- Topbar compact (search only)
- Route card = bottom sheet (swipe up)
- Controls = floating FAB
- Tracking bar = full width top
```

---

## 🚀 MIGRATION PLAN

1. **Restaurer ancien fichier** (MapPage.web.OLD.vue)
2. **Appliquer design system** (classes réelles)
3. **Simplifier overlays** (max 3 éléments visibles)
4. **Tester UX** (flow complet)
5. **Build + validate**

---

## ✅ CHECKLIST FINAL

### Design System
- [ ] Utilise `.glass-accent` pour overlays
- [ ] Utilise `.card-gradient` pour cards importantes
- [ ] Utilise `.btn-gradient` pour CTA principal
- [ ] Utilise `.hover-lift` sur éléments cliquables
- [ ] Utilise `.glow-accent-pulse` pour feedback
- [ ] Pas de classes MEGA
- [ ] Maximum 1-2 éléments avec effet fort

### UX
- [ ] Carte visible à 90%+
- [ ] 1 action principale claire (Optimiser)
- [ ] Overlays transparents (glass)
- [ ] Hiérarchie visuelle claire
- [ ] Flow utilisateur testé
- [ ] Mobile-friendly

### Technique
- [ ] Build passe
- [ ] Type-check OK
- [ ] Cohérent avec Dashboard/Profile
- [ ] Animations fluides
- [ ] Performance OK

---

## 💬 FEEDBACK ATTENDU

**User:** "Ah enfin ! C'est cohérent avec le reste, la carte respire, et je comprends directement quoi faire. Simple et efficace."

**vs ancien feedback:** "C'est pas cohérent avec tout + DESIGN_SYSTEM_GUIDE.md. Et d'un point de vue expérience utilisateur c'est pas encore ca"
