diff --git a/ROADMAP.md b/ROADMAP.md index ad83248..3e47293 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -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 diff --git a/WORKLOAD.md b/WORKLOAD.md index 38899fb..6318cc5 100644 --- a/WORKLOAD.md +++ b/WORKLOAD.md @@ -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 ---