bruno
cc680a46c2
- Layout 3 zones (sidebar 240px + topbar 44px + contenu) - Sidebar: sections hiérarchiques, hover states, menu contextuel - CSS design system Notion: #191919/#222/#333, Inter, coins 4-6px - Vues: Kanban (groupes+colonnes), Dashboard Notion-style - Templates: base.html refondu, card.html partial, board.html v2 - Backend: données sidebar + board Notion (groups/cards) - Docs: ROADMAP v0.4→v1.0, WORKLOAD.md, README - Backward compatible: conserve _issue_column pour api.py - Images de référence + resized (analyse 2026-07-08)
178 lines
6.4 KiB
Markdown
178 lines
6.4 KiB
Markdown
# 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 | 🚧 | 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 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
|
|
- [ ] `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
|
|
```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
|
|
- [ ] 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
|
|
- [ ] 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
|