refactor(ux): consolidate BMAD skills, update design system, and clean up Prisma generated client

keep-notes/components/masonry-grid.css

@@ -1,6 +1,7 @@
 /**
- * Masonry Grid Styles — CSS columns natif (sans Muuri)
- * Layout responsive pur CSS, drag-and-drop via @dnd-kit
+ * Masonry Grid — Deux modes d'affichage :
+ * 1. Variable : CSS Grid avec tailles small/medium/large
+ * 2. Uniform : CSS Columns masonry (comme Google Keep)
  */
 
 /* ─── Container ──────────────────────────────────── */
@@ -9,13 +10,47 @@
   padding: 0 8px 40px 8px;
 }
 
-/* ─── CSS Grid Masonry ───────────────────────────── */
+/* ═══════════════════════════════════════════════════
+   MODE 1 : VARIABLE (CSS Grid avec tailles différentes)
+   ═══════════════════════════════════════════════════ */
+
 .masonry-css-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   grid-auto-rows: auto;
   gap: 12px;
   align-items: start;
+  grid-auto-flow: dense;
+}
+
+.masonry-sortable-item[data-size="medium"] {
+  grid-column: span 2;
+}
+
+.masonry-sortable-item[data-size="large"] {
+  grid-column: span 3;
+}
+
+/* ═══════════════════════════════════════════════════
+   MODE 2 : UNIFORM — CSS Columns masonry (Google Keep)
+   ═══════════════════════════════════════════════════ */
+
+.masonry-container[data-card-size-mode="uniform"] .masonry-css-grid {
+  display: block;
+  column-width: 240px;
+  column-gap: 12px;
+  orphans: 1;
+  widows: 1;
+}
+
+.masonry-container[data-card-size-mode="uniform"] .masonry-sortable-item,
+.masonry-container[data-card-size-mode="uniform"] .masonry-sortable-item[data-size="medium"],
+.masonry-container[data-card-size-mode="uniform"] .masonry-sortable-item[data-size="large"] {
+  break-inside: avoid;
+  margin-bottom: 12px;
+  display: inline-block;
+  width: 100%;
+  grid-column: unset;
 }
 
 /* ─── Sortable items ─────────────────────────────── */
@@ -23,15 +58,14 @@
   break-inside: avoid;
   box-sizing: border-box;
   will-change: transform;
+  transition: opacity 0.15s ease-out;
 }
 
-/* Notes "medium" et "large" occupent 2 colonnes si disponibles */
-.masonry-sortable-item[data-size="medium"] {
-  grid-column: span 2;
-}
-
-.masonry-sortable-item[data-size="large"] {
-  grid-column: span 2;
+/* ─── Note card base ─────────────────────────────── */
+.note-card {
+  width: 100% !important;
+  min-width: 0;
+  box-sizing: border-box;
 }
 
 /* ─── Drag overlay ───────────────────────────────── */
@@ -43,32 +77,7 @@
   pointer-events: none;
 }
 
-/* ─── Note card base ─────────────────────────────── */
-.note-card {
-  width: 100% !important;
-  min-width: 0;
-  box-sizing: border-box;
-}
-
-/* ─── Note size min-heights ──────────────────────── */
-.masonry-sortable-item[data-size="small"] .note-card {
-  min-height: 120px;
-}
-
-.masonry-sortable-item[data-size="medium"] .note-card {
-  min-height: 280px;
-}
-
-.masonry-sortable-item[data-size="large"] .note-card {
-  min-height: 440px;
-}
-
-/* ─── Transitions ────────────────────────────────── */
-.masonry-sortable-item {
-  transition: opacity 0.15s ease-out;
-}
-
-/* ─── Mobile (< 480px) : 1 colonne ──────────────── */
+/* ─── Mobile (< 480px) ───────────────────────────── */
 @media (max-width: 479px) {
   .masonry-css-grid {
     grid-template-columns: 1fr;
@@ -80,24 +89,33 @@
     grid-column: span 1;
   }
 
+  .masonry-container[data-card-size-mode="uniform"] .masonry-css-grid {
+    column-width: 100%;
+    column-gap: 10px;
+  }
+
   .masonry-container {
     padding: 0 4px 16px 4px;
   }
 }
 
-/* ─── Small tablet (480–767px) : 2 colonnes ─────── */
+/* ─── Small tablet (480–767px) ───────────────────── */
 @media (min-width: 480px) and (max-width: 767px) {
   .masonry-css-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 10px;
   }
 
+  .masonry-sortable-item[data-size="large"] {
+    grid-column: span 2;
+  }
+
   .masonry-container {
     padding: 0 8px 20px 8px;
   }
 }
 
-/* ─── Tablet (768–1023px) : 2–3 colonnes ────────── */
+/* ─── Tablet (768–1023px) ────────────────────────── */
 @media (min-width: 768px) and (max-width: 1023px) {
   .masonry-css-grid {
     grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
@@ -105,7 +123,7 @@
   }
 }
 
-/* ─── Desktop (1024–1279px) : 3–4 colonnes ──────── */
+/* ─── Desktop (1024–1279px) ─────────────────────── */
 @media (min-width: 1024px) and (max-width: 1279px) {
   .masonry-css-grid {
     grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
@@ -113,7 +131,7 @@
   }
 }
 
-/* ─── Large Desktop (1280px+): 4–5 colonnes ─────── */
+/* ─── Large Desktop (1280px+) ───────────────────── */
 @media (min-width: 1280px) {
   .masonry-css-grid {
     grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
@@ -140,4 +158,4 @@
   .masonry-sortable-item {
     transition: none;
   }
-}
+}