Show highlights on timeline

index.html

@@ -69,6 +69,7 @@
     .legend span::before { content: ""; display: block; width: 14px; height: 6px; border-radius: 2px; }
     .legend .rec::before { background: var(--accent); }
     .legend .gap::before { background: #2a2a2a; border: 1px solid #444; }
+    .legend .highlight::before { background: #ffd43b; }
     .highlights { margin-top: 18px; background: var(--surface); border-radius: 8px; padding: 14px 16px; }
     .highlights h2 { font-size: 14px; font-weight: 500; margin-bottom: 10px; }
     .highlight-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@@ -164,7 +165,7 @@
       <canvas id="timeline"></canvas>
     </div>
     <div class="hours" id="hours"></div>
-    <div class="legend"><span class="rec">Recorded</span><span class="gap">No recording</span></div>
+    <div class="legend"><span class="rec">Recorded</span><span class="highlight">Highlight</span><span class="gap">No recording</span></div>
   </div>
 
   <section class="highlights">
@@ -201,6 +202,7 @@
   let initialOffset = 0;
   let zoom = 1;
   let focus = 43200;
+  let highlights = [];
   let highlightStart = null;
   let highlightEnd = null;
   let encodingWasRunning = false;
@@ -291,7 +293,9 @@
   }
   async function loadHighlights() {
     const response = await fetch("/api/highlights");
-    const items = (await response.json()).filter(item => item.date === dateSelect.value);
+    highlights = (await response.json()).filter(item => item.date === dateSelect.value);
+    const items = highlights;
+    drawTimeline();
     const list = document.querySelector("#highlight-list");
     list.replaceChildren();
     if (!items.length) {
@@ -393,6 +397,12 @@
       const r = ((i + 1) * 60 - winStart) / winSize * w;
       if (r > 0 && l < w) ctx.fillRect(Math.max(0, l), 0, Math.min(w, r) - Math.max(0, l), 56);
     });
+    ctx.fillStyle = "#ffd43b";
+    highlights.forEach(item => {
+      const l = (item.start - winStart) / winSize * w;
+      const r = (item.end - winStart) / winSize * w;
+      if (r > 0 && l < w) ctx.fillRect(Math.max(0, l), 0, Math.min(w, r) - Math.max(0, l), 56);
+    });
     // hour lines
     ctx.strokeStyle = "rgba(255,255,255,.08)";
     for (let h = Math.ceil(winStart / 3600); h < winEnd / 3600; h++) {