Add BMAD framework, authentication, and new features

_bmad-output/analysis/brainstorming-session-2026-01-06.md

@@ -0,0 +1,85 @@
+---
+stepsCompleted: [1, 2, 3, 4]
+session_continued: true
+continuation_date: 2026-01-06
+inputDocuments: []
+session_topic: 'Migration du Layout et Drag-and-Drop vers Muuri'
+session_goals: 'Remplacer la solution actuelle (CSS Columns + Native DnD) par Muuri pour un layout Masonry robuste et un DnD fluide'
+selected_approach: 'ai-recommended'
+techniques_used: ['Constraint Mapping', 'Morphological Analysis', 'Chaos Engineering']
+ideas_generated: [12]
+technique_execution_complete: true
+session_active: false
+workflow_completed: true
+facilitation_notes: 'Architecture validée et plan d'action détaillé généré pour la migration Muuri.'
+context_file: 'COMPLETED-FEATURES.md'
+---
+
+# Brainstorming Session Results
+
+**Facilitator:** Ramez
+**Date:** 2026-01-06
+
+## Session Overview
+
+**Topic:** Migration du Layout et Drag-and-Drop vers Muuri
+**Goals:** Remplacer la solution actuelle (CSS Columns + Native DnD) par Muuri pour un layout Masonry robuste et un DnD fluide
+
+### Context Guidance
+
+Le projet utilise actuellement une approche CSS Columns pour le Masonry et le DnD HTML5 natif. Cela pose des limitations pour un réarrangement fluide et précis. L'objectif est d'intégrer **Muuri** (https://github.com/haltu/muuri), une librairie JS de layout, dans l'écosystème React/Next.js 16 existant.
+
+## Technique Selection
+
+**Approach:** AI-Recommended Techniques
+**Analysis Context:** Migration du Layout et Drag-and-Drop vers Muuri with focus on Remplacer la solution actuelle (CSS Columns + Native DnD) par Muuri pour un layout Masonry robuste et un DnD fluide
+
+**Recommended Techniques:**
+
+- **Constraint Mapping:** Identifier les frictions techniques entre React/Next.js (Virtual DOM, SSR) et Muuri (Direct DOM manipulation).
+- **Morphological Analysis:** Définir l'architecture technique en explorant les combinaisons de solutions pour chaque composant du problème (Sync, Events, State).
+- **Chaos Engineering:** Stress-tester mentalement l'architecture proposée contre des scénarios limites (resize, network lag, user spam).
+
+## Technique Execution Results
+
+**Constraint Mapping:**
+- **Focus:** Conflit React (Virtual DOM) vs Muuri (Direct DOM).
+- **Breakthrough:** Utilisation de `ResizeObserver` pour notifier Muuri des changements de taille des cartes sans passer par l'état React.
+
+**Morphological Analysis:**
+- **Stack:** Muuri v0.9.5 + web-animations-js.
+- **Architecture:** Composant maître `MasonryGrid` gérant l'instance Muuri et synchronisant l'ordre via Server Actions.
+
+**Chaos Engineering:**
+- **Scénarios:** Chargement d'images asynchrone et filtrage rapide.
+- **Validation:** Le `ResizeObserver` assure la robustesse du layout face aux changements de hauteur dynamiques.
+
+## Idea Organization and Prioritization
+
+**Thematic Organization:**
+- **Infrastructure:** Mise en place de Muuri et des polyfills nécessaires.
+- **Layout Engine:** Création du composant client `MasonryGrid`.
+- **Synchronisation:** Bridge via `ResizeObserver` pour une grille sans chevauchement.
+- **Persistance:** Sync de l'ordre en base de données après chaque déplacement.
+
+**Prioritization Results:**
+- **Top Priority:** Développement du composant `MasonryGrid` et son cycle de vie React.
+- **Quick Win:** Installation de `muuri` et création du hook utilitaire `useResizeObserver`.
+- **Breakthrough:** L'approche "ResizeObserver Bridge" qui découple le layout de la logique de rendu React.
+
+**Action Planning:**
+1. **Setup:** Installer `muuri` et `web-animations-js`.
+2. **Hook:** Créer `useResizeObserver.ts` pour surveiller la taille des notes.
+3. **Core:** Implémenter `MasonryGrid.tsx` (Client Component).
+4. **Integration:** Adapter `NoteCard.tsx` pour Muuri (refs, suppression DnD natif).
+5. **Persistence:** Connecter l'événement `dragEnd` à l'action `updateNoteOrder`.
+
+## Session Summary and Insights
+
+**Key Achievements:**
+- Architecture technique complète et validée pour atteindre l'expérience "Google Keep".
+- Plan d'implémentation découpé en phases actionnables.
+- Identification et résolution préventive des conflits de layout.
+
+**Session Reflections:**
+Cette session a permis de transformer un défi d'interface complexe en une série de tâches techniques précises. L'utilisation du `ResizeObserver` est la clé pour faire cohabiter Muuri et React 19 de manière fluide.

_bmad-output/analysis/brainstorming-session-2026-01-07.md

@@ -0,0 +1,15 @@
+---
+stepsCompleted: []
+inputDocuments: []
+session_topic: ''
+session_goals: ''
+selected_approach: ''
+techniques_used: []
+ideas_generated: []
+context_file: ''
+---
+
+# Brainstorming Session Results
+
+**Facilitator:** Ramez
+**Date:** 2026-01-07

_bmad-output/analysis/brainstorming-session-2026-01-08.md

@@ -0,0 +1,15 @@
+---
+stepsCompleted: []
+inputDocuments: []
+session_topic: ''
+session_goals: ''
+selected_approach: ''
+techniques_used: []
+ideas_generated: []
+context_file: ''
+---
+
+# Brainstorming Session Results
+
+**Facilitator:** Ramez
+**Date:** 2026-01-08