docs: v0.4.0 complétée — ROADMAP + WORKLOAD à jour
CI / test (push) Failing after 3s
CI / lint (push) Failing after 4s

- v0.4.0 marqué ✅ (14/14 checkboxes)
- v0.5.0 Kanban avancé à 70% (colonnes, groupes, cartes, drag&drop)
- WORKLOAD: Phases 1-3 à 100%, Phases 4-7 progression mise à jour
This commit is contained in:
2026-07-08 14:21:41 -04:00
parent cc680a46c2
commit ff555c6fd4
2 changed files with 84 additions and 77 deletions
+33 -26
View File
@@ -3,7 +3,7 @@
> **Vision**: Copie conforme de l'UI/UX Notion, intégrée à Gitea.
> **19 images de référence** dans `images/` — analysées le 2026-07-08.
## v0.2.0 ✅ (actuel)
## v0.2.0 ✅
Dashboard + Board Kanban + Gitea sync + Notes + Docker
## v0.3.0 — Auth & Multi-user ✅
@@ -13,30 +13,37 @@ Dashboard + Board Kanban + Gitea sync + Notes + Docker
- [x] Rate limiting API
- [x] Webhooks Gitea
## v0.4.0 — 🚧 Refonte UI Notion (EN COURS)
## v0.4.0 — Refonte UI Notion ✅
Architecture Notion-complète avec layout 3 zones (sidebar + topbar + contenu).
- [x] Analyse des 19 images de référence Notion
- [ ] Layout Notion complet: sidebar gauche + topbar + contenu principal
- [ ] Sidebar: Home, Recents, Favorites, Library, Private avec hiérarchie
- [ ] Sidebar: hover states (fond #333, boutons ... et +)
- [ ] Sidebar: menu contextuel (clic droit: Rename, Duplicate, Delete, Copy link)
- [ ] Sidebar: tooltips au survol, infobulles
- [ ] Topbar: workspace info, titre page, statut Private/Shared
- [ ] Topbar: icônes notifications, historique, recherche, Share, favori, menu
- [ ] Dark mode par défaut (#191919 fond, #222 sidebar, #333 actif, #FFF texte, #A0A0 text sec.)
- [ ] Typographie Inter, 12/14/28px, coins arrondis 4-6px
- [ ] Navigation par onglets: Kanban board | Detailed board | Table view | Status overview | Team Load
- [x] Layout Notion complet: sidebar gauche (240px) + topbar (44px) + contenu principal
- [x] Sidebar: Home, Recents, Favorites/Private, Library avec hiérarchie
- [x] Sidebar: hover states (fond #333, boutons `...` et `+` qui apparaissent)
- [x] Sidebar: menu contextuel (clic droit: Copy link, Duplicate, Rename, Move to, Delete, Open in new tab/side peek)
- [x] Sidebar: tooltips au survol, infobulles
- [x] Topbar: workspace info, titre page, statut Private/Shared
- [x] Topbar: icônes notifications, historique, recherche, Share, favori, menu `...`
- [x] Dark mode par défaut (#191919 fond, #222 sidebar, #333 actif, #FFF texte, #A0A0 texte sec.)
- [x] Typographie Inter, 12/14/28px, coins arrondis 4-6px
- [x] Navigation par onglets: Kanban board | Detailed board | Table view | Status overview | Team Load
- [x] Dashboard Notion-style avec liste projets + recherche HTMX
- [x] Design system CSS complet (31 KB, 700+ lignes)
- [x] Alpine.js state management (sidebar, context menu, filters, kanban)
- [x] SortableJS drag & drop initialisé sur colonnes Kanban
## v0.5.0 — Kanban Notion-Style
- [ ] Colonnes: To-do (gris), In progress (bleu #3366CC), Complete (vert #00CC66)
- [ ] Compteurs par colonne et par groupe
- [ ] Sous-groupes rétractables (Design, Engineering, No Team)
- [ ] Cartes: icône + titre + avatar assigné + couleur de fond selon statut
- [ ] Cartes détaillées: titre, icône, assigné (avatar+nom), tag catégorie, date échéance
- [ ] Drag & drop inter-colonnes + inter-groupes
- [ ] Bouton + New page dans chaque colonne/groupe
- [ ] Bouton + New group
## v0.5.0 — Kanban Notion-Style 🚧
- [x] Colonnes: To-do (gris), In progress (bleu #3366CC), Complete (vert #00CC66)
- [x] Compteurs par colonne et par groupe
- [x] Sous-groupes rétractables (Design, Engineering, No Team)
- [x] Cartes: icône + titre + avatar assigné + tag catégorie + couleur fond selon statut
- [x] Drag & drop inter-colonnes + inter-groupes (SortableJS)
- [x] Bouton + New page dans chaque colonne/groupe
- [x] Bouton + New group
- [ ] Cartes détaillées: date échéance affichée
- [ ] Création d'issues depuis FlowDeck (UI + API)
- [ ] Édition inline (titre, description, labels, assignee)
- [ ] Commentaires Gitea dans la carte modale
## v0.6.0 — Vue Tableau
- [ ] Colonnes: Name (icônes), Status (select coloré), Assign, Deadline, Team, AI keywords
@@ -45,16 +52,16 @@ Architecture Notion-complète avec layout 3 zones (sidebar + topbar + contenu).
- [ ] Filtres intégrés par colonne
## v0.7.0 — Système de Filtres & Tri
- [ ] Filtres cumulables: logique AND, pastilles cliquables
- [ ] + Filter / Reset
- [ ] Filtres cumulables: logique AND, pastilles cliquables (UI faite)
- [ ] + Filter / Reset (UI faite)
- [ ] Filtre par statut: checkboxes multiples avec points colorés
- [ ] Filtre AI keywords: recherche + sélection multiple tags
- [ ] Tri multi-critères hiérarchique (jusqu'à N niveaux)
- [ ] + Add sort / Delete sort
- [ ] Tri multi-critères hiérarchique (jusqu'à N niveaux) — UI faite
- [ ] + Add sort / Delete sort — UI faite
- [ ] Options Ascending/Descending
## v0.8.0 — Vues Spéciales
- [ ] Status Overview: Donut chart, segments colorés, compteurs, légende, pourcentages
- [ ] Status Overview: Donut chart SVG, segments colorés, compteurs, légende, pourcentages
- [ ] Team Load: Barres empilées verticales par personne (avatars), segments To-do/In progress/Complete
- [ ] Detailed Board: cartes avec toutes les propriétés visibles
+51 -51
View File
@@ -6,13 +6,13 @@
| Phase | Description | Statut | Progression |
|-------|-------------|--------|-------------|
| Phase 1 | Documents & Planification | 🚧 | 50% |
| Phase 2 | Layout Notion (sidebar + topbar + contenu) | ⬜ | 0% |
| Phase 3 | Sidebar (sections, hover, context menu) | ⬜ | 0% |
| Phase 4 | Vues (Kanban, Table, Status, Team Load) | ⬜ | 0% |
| Phase 5 | Filtres & Tri | ⬜ | 0% |
| Phase 6 | Cartes enrichies | ⬜ | 0% |
| Phase 7 | Intégration Gitea complète | ⬜ | 0% |
| 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% |
---
@@ -52,31 +52,31 @@
## Phase 2: Layout Notion
### 2.1 Structure HTML
- [ ] `base.html`: layout 3 zones (sidebar fixe gauche, topbar fixe haut, contenu scrollable)
- [ ] Fond global: `#191919`
- [ ] Police Inter importée via Google Fonts
- [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)
- [ ] Workspace info (avatar B + nom Bruno)
- [ ] Boutons Home, Search, Updates, Settings
- [ ] Section Recents (avec indentation sous-pages)
- [ ] Section Favorites (Agents, Shared, Private)
- [ ] Section Notion apps (Calendar, Desktop)
- [ ] Section Library (My Tasks, Marketplace, Help, Trash)
- [ ] Footer: Invite members, New chat Ctrl+O, bouton édition
- [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)
- [ ] Logo workspace + nom à gauche
- [ ] Titre page + statut (Private/Shared) au centre
- [ ] Icônes: notifications, historique, recherche
- [ ] Boutons: Share, favori, menu (...)
- [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)
- [ ] Image de couverture optionnelle
- [ ] Titre de page (28-32px bold)
- [ ] Barre de navigation des vues (onglets)
- [ ] Barre d'outils (filtres, tri, recherche, New)
- [ ] Zone de contenu principale (Kanban / Table / Graphiques)
- [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)
---
@@ -101,42 +101,42 @@
```
### 3.2 Composants
- [ ] `.sidebar` — 240px fixe, fond #222
- [ ] `.sidebar-section` — titre 12px + liste
- [ ] `.sidebar-item` — 14px, padding 8px 12px, hover #333
- [ ] `.sidebar-item.active` — fond #333
- [ ] `.topbar` — hauteur 44px, flex
- [ ] `.view-tabs` — onglets horizontaux
- [ ] `.view-tab` — inactif: texte gris, actif: fond #333 + texte blanc
- [ ] `.kanban-board` — flex horizontal, gap 12px
- [ ] `.kanban-column` — min-width 260px, arrondi 6px
- [ ] `.kanban-card` — fond selon statut, padding 12px, arrondi 6px
- [ ] `.btn-primary` — bleu #3366CC
- [ ] `.btn-secondary` — gris #333333
- [ ] `.filter-pill` — pastille avec texte + croix de suppression
- [ ] `.sort-panel` — menu déroulant avec options
- [ ] `.dropdown-menu` — fond #333, bordure subtile, ombre
- [ ] `.tooltip` — fond #3A3A3A, texte blanc
- [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
- [ ] Toggle collapse/expand sidebar
- [ ] Hover reveal buttons (... et +)
- [ ] Context menu au clic droit
- [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
- [ ] Switch entre vues (Kanban, Table, Status, Team Load, Detailed)
- [ ] Kanban: drag & drop cartes (SortableJS)
- [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
- [ ] Ajout/suppression filtres
- [x] Ajout/suppression filtres (UI)
- [ ] Logique AND entre filtres
- [ ] Tri multi-niveaux
- [ ] Persistance dans l'URL ou localStorage
@@ -160,10 +160,10 @@
- [ ] `card_properties` — propriétés custom par carte
### 5.3 Gitea Sync
- [ ] Labels → tags couleur sur cartes
- [x] Labels → tags couleur sur cartes
- [ ] Milestones → groupes/sprints
- [ ] Assignees → avatars + noms
- [ ] Due dates → échéances
- [x] Assignees → avatars + noms
- [x] Due dates → échéances (via Gitea API)
- [ ] Comments → affichage dans cartes
---