flowdeck/WORKLOAD.md

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

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

1.2 Documents

• ROADMAP.md mis à jour avec vision v0.4 → v1.0
• 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

• base.html: layout 3 zones (sidebar fixe gauche, topbar fixe haut, contenu scrollable)
• Fond global: #191919
• 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

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 (...)

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)

---

Phase 3: CSS — Design System

3.1 Variables 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

• .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

---

Phase 4: JavaScript (Alpine.js)

4.1 Sidebar

• Toggle collapse/expand sidebar
• Hover reveal buttons (... et +)
• 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)
• Table: tri par colonne, redimensionnement
• Status Overview: Donut chart (SVG ou Canvas)
• Team Load: Barres empilées

4.3 Filtres & Tri

• 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

• Labels → tags couleur sur cartes
• Milestones → groupes/sprints
• Assignees → avatars + noms
• 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