From fec391d7f3f09f269e7553685ec115fd1ab61c83 Mon Sep 17 00:00:00 2001
From: etienne-delvarre <contact@etienne-delvarre.net>
Date: Sun, 31 May 2026 12:26:47 +0000
Subject: [PATCH] feat: ajout systeme de likes E/M sur les fiches de la frise

---
 public/index.html | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 280711e..b4a8e67 100644
--- a/public/index.html
+++ b/public/index.html
@@ -165,8 +165,13 @@ window.dispatchEvent(new Event('tiptap-loaded'));
   .card.sortable-chosen { box-shadow: 0 6px 20px var(--shadow-hover); }
   .card-title { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
   .card-summary { font-size: 15px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
-  .card-meta { display: flex; gap: 6px; flex-wrap: wrap; }
+  .card-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
   .card-badge { font-size: 13px; padding: 4px 10px; border-radius: 8px; font-weight: 500; }
+  .card-likes { display: flex; gap: 4px; margin-left: auto; }
+  .like-btn { background: none; border: none; cursor: pointer; padding: 3px 6px; border-radius: 6px; font-size: 14px; color: var(--text-light); transition: color 0.15s, transform 0.15s; display: flex; align-items: center; gap: 2px; }
+  .like-btn:hover { color: var(--accent); transform: scale(1.15); }
+  .like-btn.liked { color: var(--terra); }
+  .like-btn .like-who { font-size: 10px; font-weight: 700; letter-spacing: 0.3px; }
 
   /* Acte colors on card top border */
   .card[data-acte="Avant l'histoire"] { border-top-color: var(--blue-grey); }
@@ -743,6 +748,9 @@ function makeCard(r) {
     `<span class="card-badge badge-perso">${esc(p.trim())}</span>`
   ).join('') : '';
 
+  const likeE = r.LikeE ? 'liked' : '';
+  const likeM = r.LikeM ? 'liked' : '';
+
   card.innerHTML = `
     <div class="card-title">${esc(r.Title || '')}</div>
     ${r['Résumé'] ? `<div class="card-summary">${esc(r['Résumé'])}</div>` : ''}
@@ -750,11 +758,30 @@ function makeCard(r) {
       ${r.Statut ? `<span class="card-badge ${statusClass(r.Statut)}">${esc(r.Statut)}</span>` : ''}
       ${r.Type ? `<span class="card-badge badge-perso">${esc(r.Type)}</span>` : ''}
       ${persos}
+      <span class="card-likes">
+        <button class="like-btn ${likeE}" onclick="toggleLike(event,${r.Id},'E')" title="Etienne"><span class="like-who">E</span>&thinsp;&#9829;</button>
+        <button class="like-btn ${likeM}" onclick="toggleLike(event,${r.Id},'M')" title="Myriam"><span class="like-who">M</span>&thinsp;&#9829;</button>
+      </span>
     </div>
   `;
   return card;
 }
 
+async function toggleLike(e, id, who) {
+  e.stopPropagation();
+  const r = records.find(r => r.Id === id);
+  if (!r) return;
+  const field = who === 'E' ? 'LikeE' : 'LikeM';
+  const newVal = r[field] ? 0 : 1;
+  r[field] = newVal;
+  renderFrise();
+  await fetch(`/api/records/${id}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ [field]: newVal }),
+  });
+}
+
 function renderFrise() {
   const area = document.getElementById('timeline-area');
   area.innerHTML = '';