Bruno Charest
5280dc7a50
Add extensive project documentation including analysis review, image rendering changelog and guide, contributing guidelines, hidden files configuration guide, PWA documentation suite, roadmap, and dashboard specification.
162 lines
5.0 KiB
Markdown
162 lines
5.0 KiB
Markdown
# SPEC: Widget "Derniers fichiers ouverts" sur la page principale
|
|
|
|
## 1. Objectif
|
|
|
|
Remplacer le message d'accueil actuel (`#welcome`) par un widget dashboard professionnel affichant les **XX derniers fichiers ouverts**. Le nombre de fichiers affichés sera configurable via les paramètres existants (`cfg-recent-limit`).
|
|
|
|
## 2. Architecture du composant
|
|
|
|
```mermaid
|
|
graph TD
|
|
A["#content-area"] --> B["#dashboard-home"]
|
|
B --> C["En-tête: Logo + Titre"]
|
|
B --> D["Sélecteur vault filter"]
|
|
B --> E["#dashboard-recent-grid"]
|
|
B --> F["#dashboard-recent-empty"]
|
|
|
|
E --> G["Carte 1: fichier récent"]
|
|
E --> H["Carte 2: fichier récent"]
|
|
E --> I["..."]
|
|
|
|
G --> G1["Icône fichier"]
|
|
G --> G2["Titre"]
|
|
G --> G3["Chemin breadcrumb"]
|
|
G --> G4["Tags"]
|
|
G --> G5["Horodatage"]
|
|
```
|
|
|
|
## 3. Design UI/UX
|
|
|
|
### 3.1 Structure HTML (dans `#content-area`)
|
|
|
|
```html
|
|
<div id="dashboard-home" class="dashboard-home">
|
|
<div class="dashboard-header">
|
|
<div class="dashboard-title-row">
|
|
<i data-lucide="clock" class="dashboard-icon"></i>
|
|
<h2>Derniers fichiers ouverts</h2>
|
|
</div>
|
|
<div class="dashboard-filter-row">
|
|
<select id="dashboard-vault-filter">
|
|
<option value="">Tous les vaults</option>
|
|
</select>
|
|
<span class="dashboard-count" id="dashboard-count"></span>
|
|
</div>
|
|
</div>
|
|
<div id="dashboard-recent-grid" class="dashboard-recent-grid"></div>
|
|
<div id="dashboard-recent-empty" class="dashboard-recent-empty hidden">
|
|
<i data-lucide="inbox"></i>
|
|
<span>Aucun fichier récent</span>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### 3.2 Layout Grid
|
|
|
|
- **Desktop (>1024px)**: Grid 3 colonnes
|
|
- **Tablet (768-1024px)**: Grid 2 colonnes
|
|
- **Mobile (<768px)**: Grid 1 colonne
|
|
|
|
### 3.3 Style des cartes (`.dashboard-card`)
|
|
|
|
| Élément | Style |
|
|
|---------|-------|
|
|
| Container | `border-radius: 12px`, `padding: 16px`, fond `var(--bg-secondary)` |
|
|
| Hover | Légère élévation avec `box-shadow`, bordure accent |
|
|
| Icône | 32x32px, couleur accent |
|
|
| Titre | `font-weight: 600`, `font-size: 14px`, truncation avec ellipsis |
|
|
| Chemin | `font-size: 11px`, `color: var(--text-muted)` |
|
|
| Tags | Pills compacts, même style que sidebar |
|
|
| Horodatage | Badge discret avec icône clock |
|
|
| Badge vault | Position absolute en haut-droit |
|
|
|
|
### 3.4 États
|
|
|
|
| État | Description |
|
|
|------|-------------|
|
|
| **Chargement** | Skeleton cards animées (pulse) |
|
|
| **Données** | Grid de cartes |
|
|
| **Vide** | Icône + message centré |
|
|
| **Erreur** | Toast notification |
|
|
|
|
## 4. Interactions
|
|
|
|
| Action | Comportement |
|
|
|--------|--------------|
|
|
| **Clic sur carte** | Ouvre le fichier (`openFile(vault, path)`) |
|
|
| **Changement filter vault** | Recharge les données avec filtre |
|
|
| **Hover carte** | Élévation visuelle, curseur pointer |
|
|
| **Fermeture fichier** | Affiche le dashboard (si plus de fichier ouvert) |
|
|
|
|
## 5. Intégration JavaScript
|
|
|
|
### 5.1 Nouveau module `DashboardRecentWidget`
|
|
|
|
```javascript
|
|
const DashboardRecentWidget = {
|
|
async load(vaultFilter) { /* Charge via /api/recent */ },
|
|
render(files) { /* Génère le HTML des cartes */ },
|
|
showEmpty() { /* Affiche état vide */ },
|
|
showLoading() { /* Affiche skeletons */ },
|
|
init() { /* Bind events, charge initial */ }
|
|
};
|
|
```
|
|
|
|
### 5.2 Points d'intégration
|
|
|
|
- **Au démarrage**: `DashboardRecentWidget.init()` dans `DOMContentLoaded`
|
|
- **Ouverture fichier**: Dashboard masqué automatiquement
|
|
- **Fermeture fichier**: Dashboard affiché si `activeEditor === null`
|
|
- **Filtre vault**: Recharge via `loadRecentFiles` de la sidebar (partage du cache)
|
|
|
|
### 5.3 Partage avec sidebar "Recent"
|
|
|
|
Le widget réutilisera `_recentFilesCache` et `renderRecentList` mais avec un **template de carte différent** pour le dashboard.
|
|
|
|
## 6. Fichiers à modifier
|
|
|
|
| Fichier | Modification |
|
|
|---------|--------------|
|
|
| `frontend/index.html` | Remplacer `#welcome` par `#dashboard-home` |
|
|
| `frontend/style.css` | Ajouter `.dashboard-home`, `.dashboard-card`, skeleton, animations |
|
|
| `frontend/app.js` | Ajouter `DashboardRecentWidget`, modifier `showWelcome()`, intégration hooks |
|
|
|
|
## 7. Paramètres configurables
|
|
|
|
| Paramètre | Source | Description |
|
|
|-----------|--------|-------------|
|
|
| `recent_files_limit` | Backend config | Nombre max de fichiers (5-100, défaut: 20) |
|
|
|
|
## 8. Accessibilité
|
|
|
|
- Rôles ARIA appropriés (`role="region"`, `aria-label`)
|
|
- Navigation clavier fonctionnelle
|
|
- Contraste des couleurs conforme WCAG 2.1 AA
|
|
- Support screen reader pour les états vides/chargement
|
|
|
|
## 9. Responsive breakpoints
|
|
|
|
```css
|
|
.dashboard-recent-grid {
|
|
display: grid;
|
|
gap: 16px;
|
|
/* Mobile first */
|
|
grid-template-columns: 1fr;
|
|
}
|
|
@media (min-width: 768px) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
@media (min-width: 1024px) {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
```
|
|
|
|
## 10. Animations
|
|
|
|
| Événement | Animation |
|
|
|-----------|-----------|
|
|
| Entrée cartes | Fade-in + slide-up staggeré (50ms entre cartes) |
|
|
| Hover carte | Scale 1.02 + shadow |
|
|
| Skeleton loading | Pulse animation |
|
|
| Transition vault filter | Fade out/in des cartes |
|