docs: v0.4.0 complétée — ROADMAP + WORKLOAD à jour
- 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:
+33
-26
@@ -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
@@ -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
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user