Pipeline de stades : 3 sections (À revoir / À garder / À étudier) + renommage Notes + zone collapsible

public/app.js

@@ -1,4 +1,11 @@
 const ACTES_FRISE = ["Prologue", "Acte 1", "Acte 2", "Acte 3", "Épilogue"];
+const STATUT_TAGS = ['À revoir', 'À garder', 'À étudier'];
+
+function getStatutTag(r) {
+  const tags = (r.Tags || '').split(',').map(s => s.trim());
+  return STATUT_TAGS.find(s => tags.includes(s)) || 'À étudier';
+}
+
 let records = [];
 let columns = {};
 let editingId = null;
@@ -316,16 +323,24 @@ function renderFrise() {
 
   area.appendChild(container);
 
-  // Waiting zone
+  // Waiting zone — pipeline de stades
-  const waitingCards = document.getElementById('waiting-cards');
+  const waitingRecords = records.filter(r => !r.Acte || r.Acte === 'En attente');
-  waitingCards.innerHTML = '';
+
-  const waitingRecords = records
+  STATUT_TAGS.forEach(statut => {
-    .filter(r => !r.Acte || r.Acte === 'En attente')
+    const slug = statut === 'À revoir' ? 'a-revoir' : statut === 'À garder' ? 'a-garder' : 'a-etudier';
+    const container = document.getElementById(`cards-${slug}`);
+    const counter = document.getElementById(`count-${slug}`);
+    if (!container) return;
+    container.innerHTML = '';
+
+    const forStatut = waitingRecords
+      .filter(r => getStatutTag(r) === statut)
       .sort((a, b) => sortRecords(a, b, sortMode));
 
-  waitingRecords.forEach(r => waitingCards.appendChild(makeCard(r)));
+    forStatut.forEach(r => container.appendChild(makeCard(r)));
+    if (counter) counter.textContent = forStatut.length || '';
 
-  new Sortable(waitingCards, {
+    new Sortable(container, {
       group: 'frise',
       animation: 200,
       direction: 'horizontal',
@@ -333,6 +348,7 @@ function renderFrise() {
       chosenClass: 'sortable-chosen',
       onEnd: handleDrop,
     });
+  });
 }
 
 async function handleDrop(evt) {
@@ -649,6 +665,21 @@ document.addEventListener('keydown', e => {
   }
 });
 
+// Zone En attente — toggles collapsibles par section
+(function initWaitingToggles() {
+  ['a-revoir', 'a-garder', 'a-etudier'].forEach(slug => {
+    const toggle = document.getElementById(`toggle-${slug}`);
+    const section = document.getElementById(`section-${slug}`);
+    if (!toggle || !section) return;
+    const key = `tdb-${slug}-collapsed`;
+    try { if (localStorage.getItem(key) === '1') section.classList.add('collapsed'); } catch(e) {}
+    toggle.addEventListener('click', () => {
+      section.classList.toggle('collapsed');
+      try { localStorage.setItem(key, section.classList.contains('collapsed') ? '1' : '0'); } catch(e) {}
+    });
+  });
+})();
+
 loadData();
 
 // ══════════════════════════════════════
@@ -1897,7 +1928,7 @@ function buildFichePanel(scene) {
     { label: 'Intérêt narratif', value: scene['Intérêt narratif'] },
     { label: 'Implications', value: scene.Implications },
     { label: 'Origine', value: scene.Origine },
-    { label: 'Lien rédaction', value: scene['Lien rédaction'] },
+    { label: 'Notes', value: scene['Lien rédaction'] },
   ];
 
   let hasContent = false;

public/index.html

@@ -95,8 +95,30 @@ window.dispatchEvent(new Event('tiptap-loaded'));
           <div class="loading" id="loading">Chargement...</div>
         </div>
         <div class="waiting-zone">
-          <div class="waiting-header">En attente — glisser sur la frise</div>
+          <div class="waiting-section" id="section-a-revoir">
-          <div class="waiting-cards" id="waiting-cards"></div>
+            <div class="waiting-header" id="toggle-a-revoir">
+              <span>À revoir</span>
+              <span class="waiting-count" id="count-a-revoir"></span>
+              <span class="waiting-arrow">▼</span>
+            </div>
+            <div class="waiting-cards" id="cards-a-revoir" data-acte="En attente"></div>
+          </div>
+          <div class="waiting-section" id="section-a-garder">
+            <div class="waiting-header" id="toggle-a-garder">
+              <span>À garder</span>
+              <span class="waiting-count" id="count-a-garder"></span>
+              <span class="waiting-arrow">▼</span>
+            </div>
+            <div class="waiting-cards" id="cards-a-garder" data-acte="En attente"></div>
+          </div>
+          <div class="waiting-section" id="section-a-etudier">
+            <div class="waiting-header" id="toggle-a-etudier">
+              <span>À étudier</span>
+              <span class="waiting-count" id="count-a-etudier"></span>
+              <span class="waiting-arrow">▼</span>
+            </div>
+            <div class="waiting-cards" id="cards-a-etudier" data-acte="En attente"></div>
+          </div>
         </div>
       </div>
     </div>
@@ -289,8 +311,8 @@ window.dispatchEvent(new Event('tiptap-loaded'));
         <textarea id="f-origine" placeholder="D'ou vient cette idee..."></textarea>
       </div>
       <div class="field">
-        <label>Lien redaction</label>
+        <label>Notes</label>
-        <textarea id="f-lien" placeholder="Notes pour la redaction..."></textarea>
+        <textarea id="f-lien" placeholder="Notes, réflexions..."></textarea>
       </div>
       <div class="modal-comments" id="card-comments-section" style="display:none;">
         <h4>Commentaires</h4>

public/styles.css

@@ -205,7 +205,14 @@
 
   /* ── Waiting zone (bottom) ── */
   .waiting-zone { border-top: 2px dashed var(--border); padding: 14px 24px; background: var(--bg-alt); flex-shrink: 0; }
-  .waiting-header { font-size: 13px; color: var(--text-hint); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; font-weight: 600; }
+  .waiting-header { font-size: 13px; color: var(--text-hint); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; user-select: none; }
+  .waiting-header:hover { color: var(--text); }
+  .waiting-count { background: var(--border); color: var(--text-hint); border-radius: 10px; padding: 1px 7px; font-size: 11px; font-weight: 700; }
+  .waiting-arrow { margin-left: auto; transition: transform 0.2s ease; display: inline-block; }
+  .waiting-section { margin-bottom: 12px; }
+  .waiting-section:last-child { margin-bottom: 0; }
+  .waiting-section.collapsed .waiting-arrow { transform: rotate(-90deg); }
+  .waiting-section.collapsed .waiting-cards { display: none; }
   .waiting-cards { display: flex; gap: 12px; overflow-x: auto; min-height: 100px; padding: 4px 0; align-items: flex-start; }
   .waiting-cards .card { border-style: dashed; border-top: 4px dashed var(--border); }