update: hide rehersal icon when accepted or rejected, drop down for calendar

public/calendar.html

@@ -33,6 +33,10 @@
   <div id="rehearsals-section" style="display:none">
     <h2 style="margin:1.5rem 0 0.5rem">Répétitions proposées</h2>
     <div class="panel" id="rehearsals-list"></div>
+    <details class="rehearsal-voted-section" id="rehearsals-voted-section" style="display:none">
+      <summary id="rehearsals-voted-summary">Répétitions traitées</summary>
+      <div class="panel" id="rehearsals-voted-list"></div>
+    </details>
   </div>
 
   <div class="calendar-layout">

public/css/style.css

@@ -513,6 +513,39 @@ h3 { font-size: 1rem; margin: 0 0 0.5rem; }
   .pill-link.spotify { border-color: #205934; }
 }
 
+.calendar-menu { position: relative; display: inline-block; }
+
+.calendar-menu > summary {
+  list-style: none;
+  cursor: pointer;
+}
+
+.calendar-menu > summary::-webkit-details-marker { display: none; }
+
+.calendar-menu-options {
+  position: absolute;
+  top: calc(100% + 0.3rem);
+  left: 0;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  min-width: 9rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+}
+
+.calendar-menu-options a {
+  padding: 0.45rem 0.75rem;
+  font-size: 0.85rem;
+  color: var(--text);
+  text-decoration: none;
+}
+
+.calendar-menu-options a:hover { background: var(--surface-alt); }
+
 /* ---------- Tags (tutorials / instruments) ---------- */
 
 .tag-list {
@@ -1482,6 +1515,22 @@ a.back-link:hover { color: var(--accent); }
 .vote-badge.accept { border-left: 3px solid var(--success); }
 .vote-badge.reject { border-left: 3px solid var(--danger); }
 
+.rehearsal-voted-section { margin-top: 0.75rem; }
+
+.rehearsal-voted-section > summary {
+  color: var(--muted);
+  font-size: 0.85rem;
+  cursor: pointer;
+  list-style: none;
+  padding: 0.3rem 0;
+}
+
+.rehearsal-voted-section > summary::-webkit-details-marker { display: none; }
+.rehearsal-voted-section > summary::before { content: '▸ '; }
+.rehearsal-voted-section[open] > summary::before { content: '▾ '; }
+
+.rehearsal-voted-section .panel { margin-top: 0.4rem; opacity: 0.85; }
+
 .cell-badges {
   position: absolute;
   top: 0.3rem;

public/js/calendar.js

@@ -55,9 +55,7 @@ function concertLinksHtml(concert) {
       <div class="modal-section-title">Concert${concert.name ? ' : ' + escapeHtml(concert.name) : ''}</div>
       <p class="note" style="margin:0.25rem 0 0.5rem">${concert.venue ? escapeHtml(concert.venue) + ' · ' : ''}${formatTime(startISO)} – ${formatTime(endISO)}</p>
       <div class="rehearsal-actions">
-        <a class="pill-link" href="${googleCalendarLink(linkArgs)}" target="_blank" rel="noopener">+ Google</a>
-        <a class="pill-link" href="${outlookCalendarLink(linkArgs)}" target="_blank" rel="noopener">+ Outlook</a>
-        <a class="pill-link" href="${icsDataUrl(linkArgs)}" download="concert.ics">+ Apple / autre</a>
+        ${calendarLinksMenuHtml(linkArgs, 'concert.ics')}
       </div>
     </div>
   `;
@@ -432,24 +430,14 @@ function rehearsalRowTemplate(r) {
       </div>
       <div class="rehearsal-actions">
         ${rehearsalVoteActionsHtml(r)}
-        <a class="pill-link" href="${googleCalendarLink(linkArgs)}" target="_blank" rel="noopener">+ Google</a>
-        <a class="pill-link" href="${outlookCalendarLink(linkArgs)}" target="_blank" rel="noopener">+ Outlook</a>
-        <a class="pill-link" href="${icsDataUrl(linkArgs)}" download="repetition.ics">+ Apple / autre</a>
+        ${calendarLinksMenuHtml(linkArgs, 'repetition.ics')}
         ${canRemove ? `<button type="button" class="danger icon-btn remove-rehearsal-btn" data-rehearsal-id="${r.id}">Retirer</button>` : ''}
       </div>
     </div>
   `;
 }
 
-function renderRehearsals() {
-  const section = document.getElementById('rehearsals-section');
-  const container = document.getElementById('rehearsals-list');
-  if (!state.rehearsals.length) {
-    section.style.display = 'none';
-    return;
-  }
-  section.style.display = '';
-  container.innerHTML = state.rehearsals.map(rehearsalRowTemplate).join('');
+function wireRehearsalActions(container) {
   container.querySelectorAll('.remove-rehearsal-btn').forEach((btn) => {
     btn.addEventListener('click', () => onRemoveRehearsal(parseInt(btn.dataset.rehearsalId, 10)));
   });
@@ -464,6 +452,40 @@ function renderRehearsals() {
   });
 }
 
+function renderRehearsals() {
+  const section = document.getElementById('rehearsals-section');
+  const container = document.getElementById('rehearsals-list');
+  const votedSection = document.getElementById('rehearsals-voted-section');
+  const votedSummary = document.getElementById('rehearsals-voted-summary');
+  const votedContainer = document.getElementById('rehearsals-voted-list');
+
+  if (!state.rehearsals.length) {
+    section.style.display = 'none';
+    return;
+  }
+  section.style.display = '';
+
+  const pending = state.rehearsals.filter(
+    (r) => !me || !r.votes.some((v) => v.userId === me.id)
+  );
+  const voted = state.rehearsals.filter(
+    (r) => me && r.votes.some((v) => v.userId === me.id)
+  );
+
+  container.innerHTML = pending.map(rehearsalRowTemplate).join('');
+  wireRehearsalActions(container);
+
+  if (voted.length) {
+    votedSection.style.display = '';
+    votedSummary.textContent = `Répétitions traitées (${voted.length})`;
+    votedContainer.innerHTML = voted.map(rehearsalRowTemplate).join('');
+    wireRehearsalActions(votedContainer);
+  } else {
+    votedSection.style.display = 'none';
+    votedContainer.innerHTML = '';
+  }
+}
+
 async function onProposeRehearsal() {
   if (!currentModalDate) return;
   const { slot } = currentModalDate;

public/js/render.js

@@ -118,3 +118,26 @@ function icsDataUrl({ uid, title, startISO, endISO, location }) {
   lines.push('END:VEVENT', 'END:VCALENDAR');
   return `data:text/calendar;charset=utf-8,${encodeURIComponent(lines.join('\r\n'))}`;
 }
+
+// Single "+ Calendrier" control that reveals the 3 provider links on click,
+// instead of showing all 3 pills side by side.
+function calendarLinksMenuHtml(linkArgs, icsFilename) {
+  return `
+    <details class="calendar-menu">
+      <summary class="pill-link">+ Calendrier</summary>
+      <div class="calendar-menu-options">
+        <a href="${googleCalendarLink(linkArgs)}" target="_blank" rel="noopener">Google</a>
+        <a href="${outlookCalendarLink(linkArgs)}" target="_blank" rel="noopener">Outlook</a>
+        <a href="${icsDataUrl(linkArgs)}" download="${escapeHtml(icsFilename)}">Apple / autre (.ics)</a>
+      </div>
+    </details>
+  `;
+}
+
+// Close any open "+ Calendrier" menu when picking a link inside it or
+// clicking anywhere else on the page.
+document.addEventListener('click', (e) => {
+  document.querySelectorAll('details.calendar-menu[open]').forEach((menu) => {
+    if (!menu.contains(e.target) || e.target.closest('a')) menu.open = false;
+  });
+});

public/js/setlistEditor.js

@@ -54,9 +54,7 @@ function createSetlistEditor({
     };
     return `
       <div class="rehearsal-actions" style="margin-top:0.5rem">
-        <a class="pill-link" href="${googleCalendarLink(linkArgs)}" target="_blank" rel="noopener">+ Google</a>
-        <a class="pill-link" href="${outlookCalendarLink(linkArgs)}" target="_blank" rel="noopener">+ Outlook</a>
-        <a class="pill-link" href="${icsDataUrl(linkArgs)}" download="concert.ics">+ Apple / autre</a>
+        ${calendarLinksMenuHtml(linkArgs, 'concert.ics')}
       </div>
     `;
   }