# 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