# WORKLOAD — FlowDeck Notion Clone

> **Début**: 2026-07-08 | **Objectif**: Clone Notion intégré Gitea

## Avancement Global

| Phase | Description | Statut | Progression |
|-------|-------------|--------|-------------|
| Phase 1 | Documents & Planification | ✅ | 100% |
| Phase 2 | Layout Notion (sidebar + topbar + contenu) | ✅ | 100% |
| Phase 3 | Sidebar (sections, hover, context menu) | ✅ | 100% |
| Phase 4 | Vues (Kanban, Table, Status, Team Load) | 🚧 | 40% |
| Phase 5 | Filtres & Tri | 🚧 | 25% |
| Phase 6 | Cartes enrichies | 🚧 | 30% |
| Phase 7 | Intégration Gitea complète | 🚧 | 15% |
| Phase 8 | Polish & Tests | ⬜ | 0% |

---

## Phase 1: Documents & Planification

### 1.1 Analyse des images Notion
- [x] Pull des 19 images de référence
- [x] Analyse du layout complet Notion (~1400px, dark mode)
- [x] Analyse Kanban board 1 (colonnes + cartes + groupes Design/Engineering)
- [x] Analyse Detailed board (cartes avec propriétés visibles)
- [x] Analyse Table view (colonnes Name, Status, Assign, Deadline, Team, AI keywords)
- [x] Analyse Search & Filter (barre de recherche, panneau filtres)
- [x] Analyse Panel Filter (liste des propriétés filtrables)
- [x] Analyse Status Panel Filter (checkboxes multiples + Clear selection)
- [x] Analyse Sort Panel 1 (simple: propriété + ascendant/descendant)
- [x] Analyse Sort Panel 2 (multi-critères: 3 sorts hiérarchiques)
- [x] Analyse Filters Cumulables (AND, pastilles, + Filter, Reset)
- [x] Analyse AI Keywords Filter (recherche + tags colorés)
- [x] Analyse Status Overview (donut chart 18 total, segments, légende)
- [x] Analyse Team Load (barres empilées par avatar)
- [x] Analyse Sidebar Layout (sections: Home, Recents, Favorites, Library)
- [x] Analyse Sidebar Context Menu (right-click: Copy link, Duplicate, Rename, Move to Trash...)
- [x] Analyse Sidebar Mouse Over Elements (hover: fond #333, boutons ... et +)
- [x] Analyse Sidebar Mouse Over Section (tooltip "Open in Library", icônes)
- [x] Analyse Kanban Board 2 (structure groupes + colonnes)

### 1.2 Documents
- [x] ROADMAP.md mis à jour avec vision v0.4 → v1.0
- [x] WORKLOAD.md créé
- [ ] README.md mis à jour
- [ ] ARCHITECTURE.md mis à jour
- [ ] CHANGELOG.md (après premier commit de code)

---

## Phase 2: Layout Notion

### 2.1 Structure HTML
- [x] `base.html`: layout 3 zones (sidebar fixe gauche, topbar fixe haut, contenu scrollable)
- [x] Fond global: `#191919`
- [x] Police Inter importée via Google Fonts

### 2.2 Sidebar (gauche, ~240px, fond #222)
- [x] Workspace info (avatar B + nom Bruno)
- [x] Boutons Home, Search, Updates, Settings
- [x] Section Recents (avec indentation sous-pages)
- [x] Section Favorites (Agents, Shared, Private)
- [x] Section Notion apps (Calendar, Desktop)
- [x] Section Library (My Tasks, Marketplace, Help, Trash)
- [x] Footer: Invite members, New chat Ctrl+O, bouton édition

### 2.3 Topbar (haut, fond #191919)
- [x] Logo workspace + nom à gauche
- [x] Titre page + statut (Private/Shared) au centre
- [x] Icônes: notifications, historique, recherche
- [x] Boutons: Share, favori, menu (...)

### 2.4 Content Area (fond #191919)
- [x] Image de couverture optionnelle
- [x] Titre de page (28-32px bold)
- [x] Barre de navigation des vues (onglets)
- [x] Barre d'outils (filtres, tri, recherche, New)
- [x] Zone de contenu principale (Kanban / Table / Graphiques)

---

## Phase 3: CSS — Design System

### 3.1 Variables CSS
```css
:root {
  --bg-primary: #191919;
  --bg-secondary: #222222;
  --bg-tertiary: #333333;
  --bg-hover: #2F2E2E;
  --text-primary: #FFFFFF;
  --text-secondary: #A0A0A0;
  --color-blue: #3366CC;
  --color-green: #00CC66;
  --color-yellow: #FFD700;
  --font-sans: 'Inter', sans-serif;
  --radius-sm: 4px;
  --radius-md: 6px;
}
```

### 3.2 Composants
- [x] `.sidebar` — 240px fixe, fond #222
- [x] `.sidebar-section` — titre 12px + liste
- [x] `.sidebar-item` — 14px, padding 8px 12px, hover #333
- [x] `.sidebar-item.active` — fond #333
- [x] `.topbar` — hauteur 44px, flex
- [x] `.view-tabs` — onglets horizontaux
- [x] `.view-tab` — inactif: texte gris, actif: fond #333 + texte blanc
- [x] `.kanban-board` — flex horizontal, gap 12px
- [x] `.kanban-column` — min-width 260px, arrondi 6px
- [x] `.kanban-card` — fond selon statut, padding 12px, arrondi 6px
- [x] `.btn-primary` — bleu #3366CC
- [x] `.btn-secondary` — gris #333333
- [x] `.filter-pill` — pastille avec texte + croix de suppression
- [x] `.sort-panel` — menu déroulant avec options
- [x] `.dropdown-menu` — fond #333, bordure subtile, ombre
- [x] `.tooltip` — fond #3A3A3A, texte blanc

---

## Phase 4: JavaScript (Alpine.js)

### 4.1 Sidebar
- [x] Toggle collapse/expand sidebar
- [x] Hover reveal buttons (... et +)
- [x] Context menu au clic droit
- [ ] Drag & drop pour réorganiser les favoris

### 4.2 Vues
- [x] Switch entre vues (Kanban, Table, Status, Team Load, Detailed)
- [x] Kanban: drag & drop cartes (SortableJS)
- [ ] Table: tri par colonne, redimensionnement
- [ ] Status Overview: Donut chart (SVG ou Canvas)
- [ ] Team Load: Barres empilées

### 4.3 Filtres & Tri
- [x] Ajout/suppression filtres (UI)
- [ ] Logique AND entre filtres
- [ ] Tri multi-niveaux
- [ ] Persistance dans l'URL ou localStorage

---

## Phase 5: Backend (FastAPI)

### 5.1 Nouvelles routes API
- [ ] `GET /api/views/{owner}/{repo}` — config des vues
- [ ] `POST /api/filters` — appliquer filtres
- [ ] `POST /api/sorts` — appliquer tris
- [ ] `GET /api/status-overview/{owner}/{repo}` — données donut chart
- [ ] `GET /api/team-load/{owner}/{repo}` — données barres empilées
- [ ] `GET /api/table-view/{owner}/{repo}` — données format tableau

### 5.2 Base de données (nouvelles tables)
- [ ] `view_config` — configuration par vue
- [ ] `filters` — filtres sauvegardés par utilisateur
- [ ] `sorts` — tris sauvegardés
- [ ] `card_properties` — propriétés custom par carte

### 5.3 Gitea Sync
- [x] Labels → tags couleur sur cartes
- [ ] Milestones → groupes/sprints
- [x] Assignees → avatars + noms
- [x] Due dates → échéances (via Gitea API)
- [ ] Comments → affichage dans cartes

---

## Notes

- **Couleurs exactes** extraites des analyses: fond `#191919`, sidebar `#222222`, actif `#333333`, hover `#2F2E2E`, texte `#FFFFFF`, secondaire `#A0A0A0`
- **Police**: Inter (Google Fonts), tailles: 12px (petit), 14px (normal), 28-32px (titres)
- **Coins arrondis**: 4px (boutons/cartes), 6px (colonnes)
- **Espacements**: padding 8-12px, gap 8-12px
- **Icônes**: utiliser des émojis ou SVG inline pour éviter dépendance externe