sepehr
3c4b9d6176
- Added multi-provider AI infrastructure (OpenAI/Ollama) - Implemented real-time tag suggestions with debounced analysis - Created AI diagnostics and database maintenance tools in Settings - Added automated garbage collection for orphan labels - Refined UX with deterministic color hashing and interactive ghost tags
58 lines
2.4 KiB
Markdown
58 lines
2.4 KiB
Markdown
# Story 1.1: Mise en place de l'infrastructure Muuri
|
|
|
|
Status: ready-for-dev
|
|
|
|
## Story
|
|
|
|
As a user,
|
|
I want my notes to be displayed in a high-performance Masonry grid,
|
|
so that my dashboard is visually organized without unnecessary gaps.
|
|
|
|
## Acceptance Criteria
|
|
|
|
1. **Given** that the `muuri` and `web-animations-js` libraries are installed.
|
|
2. **When** I load the main page.
|
|
3. **Then** existing notes automatically organize themselves into a Muuri Masonry grid.
|
|
4. **And** the layout dynamically adapts to window resizing.
|
|
|
|
## Tasks / Subtasks
|
|
|
|
- [ ] Installation des dépendances (AC: 1)
|
|
- [ ] `npm install muuri web-animations-js`
|
|
- [ ] Création du composant Client `MasonryGrid` (AC: 2, 3)
|
|
- [ ] Initialiser l'instance Muuri dans un `useEffect`
|
|
- [ ] Gérer le cycle de vie de l'instance (destroy sur unmount)
|
|
- [ ] Configurer Muuri pour utiliser `web-animations-js` pour les transitions
|
|
- [ ] Intégration du Layout dans la page principale (AC: 2, 3)
|
|
- [ ] Remplacer l'actuel layout CSS Columns par le nouveau composant `MasonryGrid`
|
|
- [ ] S'assurer que les notes existantes sont rendues comme éléments Muuri
|
|
- [ ] Gestion du Redimensionnement (AC: 4)
|
|
- [ ] S'assurer que Muuri recalcule le layout lors du resize de la fenêtre
|
|
|
|
## Dev Notes
|
|
|
|
- **Architecture Pattern :** Utiliser un composant client (`"use client"`) pour `MasonryGrid` car Muuri manipule directement le DOM.
|
|
- **Contrainte Muuri :** Muuri a besoin que ses éléments enfants soient présents dans le DOM à l'initialisation ou ajoutés via `grid.add()`. Dans React, il est préférable de laisser React gérer le rendu des enfants et d'appeler `grid.refreshItems().layout()` après les mises à jour de l'état.
|
|
- **Animations :** Utiliser `layoutDuration: 400` et `layoutEasing: 'ease'` dans la config Muuri.
|
|
- **Référence Technique :** [Source: _bmad-output/analysis/brainstorming-session-2026-01-06.md#Idea Organization and Prioritization]
|
|
|
|
### Project Structure Notes
|
|
|
|
- Le composant `MasonryGrid` doit être placé dans `keep-notes/components/`.
|
|
- Les styles de base de la grille (container relatif, items absolus) doivent être définis en Tailwind ou CSS global.
|
|
|
|
### References
|
|
|
|
- [PRD Requirements: _bmad-output/planning-artifacts/prd.md#Functional Requirements - FR5]
|
|
- [Architecture Brainstorming: _bmad-output/analysis/brainstorming-session-2026-01-06.md]
|
|
|
|
## Dev Agent Record
|
|
|
|
### Agent Model Used
|
|
|
|
### Debug Log References
|
|
|
|
### Completion Notes List
|
|
|
|
### File List
|