From 01301eb20b18cb99a1a2304d1e88f2de05041595 Mon Sep 17 00:00:00 2001
From: skal <pascal.massimino@gmail.com>
Date: Wed, 11 Feb 2026 23:53:48 +0100
Subject: feat: timeline editor improvements - sticky ticks, grid, collapse

- Sticky time markers stay visible when scrolling
- Faint vertical grid lines aligned with ticks for better alignment
- Collapsible sequences via double-click (35px collapsed state)
- Updated all references from demo.seq to timeline.seq
- Consolidated and tightened documentation
- Fixed _collapsed initialization bug

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 tools/timeline_editor/index.html | 110 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 98 insertions(+), 12 deletions(-)

(limited to 'tools/timeline_editor/index.html')
diff --git a/tools/timeline_editor/index.html b/tools/timeline_editor/index.html
index db71beb..ccd2750 100644
--- a/tools/timeline_editor/index.html
+++ b/tools/timeline_editor/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Timeline Editor - demo.seq</title>
+    <title>Timeline Editor - timeline.seq</title>
     <style>
         * {
             margin: 0;
@@ -132,10 +132,13 @@
         }
 
         .time-markers {
-            position: relative;
+            position: sticky;
+            top: 0;
             height: 30px;
             margin-bottom: 10px;
             border-bottom: 1px solid #3c3c3c;
+            background: #252526;
+            z-index: 100;
         }
 
         .time-marker {
@@ -155,6 +158,17 @@
             background: #3c3c3c;
         }
 
+        .time-marker::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 30px;
+            width: 1px;
+            height: 10000px;
+            background: rgba(60, 60, 60, 0.2);
+            pointer-events: none;
+        }
+
         .sequence {
             position: absolute;
             background: #264f78;
@@ -190,6 +204,36 @@
             }
         }
 
+        .sequence-header {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            padding: 8px;
+            z-index: 5;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        .sequence-header-name {
+            font-size: 14px;
+            font-weight: bold;
+            color: #ffffff;
+        }
+
+        .sequence:not(.collapsed) .sequence-header-name {
+            display: none;
+        }
+
+        .sequence.collapsed {
+            overflow: hidden !important;
+            background: #1a3a4a !important;
+        }
+
+        .sequence.collapsed .sequence-name {
+            display: none !important;
+        }
+
         .sequence-name {
             position: absolute;
             top: 50%;
@@ -408,15 +452,15 @@
     <div class="container">
         <header>
             <h1>📊 Timeline Editor</h1>
-            <p>Interactive editor for demo.seq files</p>
+            <p>Interactive editor for timeline.seq files</p>
         </header>
 
         <div class="controls">
             <label class="file-label">
-                📂 Load demo.seq
+                📂 Load timeline.seq
                 <input type="file" id="fileInput" accept=".seq">
             </label>
-            <button id="saveBtn" disabled>💾 Save demo.seq</button>
+            <button id="saveBtn" disabled>💾 Save timeline.seq</button>
             <label class="file-label">
                 🎵 Load Audio (WAV)
                 <input type="file" id="audioInput" accept=".wav">
@@ -493,7 +537,7 @@
         const pixelsPerSecLabel = document.getElementById('pixelsPerSec');
         const stats = document.getElementById('stats');
 
-        // Parser: demo.seq → JavaScript objects
+        // Parser: timeline.seq → JavaScript objects
         // Format specification: doc/SEQUENCE.md
         function parseSeqFile(content) {
             const sequences = [];
@@ -551,7 +595,8 @@
                         startTime: parseTime(seqMatch[1]),
                         priority: parseInt(seqMatch[2]),
                         effects: [],
-                        name: seqMatch[3] || ''
+                        name: seqMatch[3] || '',
+                        _collapsed: false
                     };
                     sequences.push(currentSequence);
                     currentPriority = -1; // Reset effect priority for new sequence
@@ -587,7 +632,7 @@
             return { sequences, bpm };
         }
 
-        // Serializer: JavaScript objects → demo.seq
+        // Serializer: JavaScript objects → timeline.seq
         function serializeSeqFile(sequences) {
             let output = '# Demo Timeline\n';
             output += '# Generated by Timeline Editor\n';
@@ -786,20 +831,53 @@
 
                 const seqVisualWidth = seqVisualEnd - seqVisualStart;
 
+                // Initialize collapsed state if undefined
+                if (seq._collapsed === undefined) {
+                    seq._collapsed = false;
+                }
+
                 // Calculate sequence height based on number of effects (stacked vertically)
                 const numEffects = seq.effects.length;
                 const effectSpacing = 30;
-                const seqHeight = Math.max(70, 20 + numEffects * effectSpacing + 5);
+                const fullHeight = Math.max(70, 20 + numEffects * effectSpacing + 5);
+                const seqHeight = seq._collapsed ? 35 : fullHeight;
 
                 seqDiv.style.left = `${seqVisualStart * pixelsPerSecond}px`;
                 seqDiv.style.top = `${cumulativeY}px`;
                 seqDiv.style.width = `${seqVisualWidth * pixelsPerSecond}px`;
                 seqDiv.style.height = `${seqHeight}px`;
+                seqDiv.style.minHeight = `${seqHeight}px`;
+                seqDiv.style.maxHeight = `${seqHeight}px`;
 
                 // Store Y position for this sequence (used by effects and scroll)
                 seq._yPosition = cumulativeY;
                 cumulativeY += seqHeight + sequenceGap;
 
+                // Create sequence header (double-click to collapse)
+                const seqHeaderDiv = document.createElement('div');
+                seqHeaderDiv.className = 'sequence-header';
+
+                const headerName = document.createElement('span');
+                headerName.className = 'sequence-header-name';
+                headerName.textContent = seq.name || `Sequence ${seqIndex + 1}`;
+
+                seqHeaderDiv.appendChild(headerName);
+
+                // Prevent drag on header
+                seqHeaderDiv.addEventListener('mousedown', (e) => {
+                    e.stopPropagation();
+                });
+
+                // Double-click to toggle collapse
+                seqHeaderDiv.addEventListener('dblclick', (e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    seq._collapsed = !seq._collapsed;
+                    renderTimeline();
+                });
+
+                seqDiv.appendChild(seqHeaderDiv);
+
                 // Create sequence name overlay (large, centered, fades on hover)
                 const seqNameDiv = document.createElement('div');
                 seqNameDiv.className = 'sequence-name';
@@ -807,6 +885,11 @@
 
                 seqDiv.appendChild(seqNameDiv);
 
+                // Apply collapsed state
+                if (seq._collapsed) {
+                    seqDiv.classList.add('collapsed');
+                }
+
                 if (selectedItem && selectedItem.type === 'sequence' && selectedItem.index === seqIndex) {
                     seqDiv.classList.add('selected');
                 }
@@ -827,7 +910,8 @@
 
                 timeline.appendChild(seqDiv);
 
-                // Render effects within sequence
+                // Render effects within sequence (skip if collapsed)
+                if (!seq._collapsed) {
                 seq.effects.forEach((effect, effectIndex) => {
                     const effectDiv = document.createElement('div');
                     effectDiv.className = 'effect';
@@ -894,6 +978,7 @@
 
                     timeline.appendChild(effectDiv);
                 });
+                }
             });
 
             updateStats();
@@ -1172,7 +1257,7 @@
             const url = URL.createObjectURL(blob);
             const a = document.createElement('a');
             a.href = url;
-            a.download = currentFile || 'demo.seq';
+            a.download = currentFile || 'timeline.seq';
             a.click();
             URL.revokeObjectURL(url);
             showMessage('File saved', 'success');
@@ -1194,7 +1279,8 @@
                 type: 'sequence',
                 startTime: 0,
                 priority: 0,
-                effects: []
+                effects: [],
+                _collapsed: false
             });
             renderTimeline();
             showMessage('New sequence added', 'success');
-- 
cgit v1.2.3

