feat: Timeline editor UI improvements

- Sequences start collapsed by default for better overview
- Move controls to header for vertical space savings
- Remove "Pixels per second" label (redundant with zoom %)
- Move properties panel to bottom left
- Update collapse arrows for vertical layout (▼/▲)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

1 files changed, 33 insertions, 34 deletions

diff --git a/tools/timeline_editor/index.html b/tools/timeline_editor/index.html
index ccd2750..15e92a6 100644
--- a/tools/timeline_editor/index.html
+++ b/tools/timeline_editor/index.html
@@ -33,11 +33,17 @@
             padding: 20px;
             border-radius: 8px;
             margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 20px;
+            flex-wrap: wrap;
         }
 
         h1 {
-            margin-bottom: 10px;
+            margin: 0;
             color: #4ec9b0;
+            white-space: nowrap;
         }
 
         .controls {
@@ -45,7 +51,6 @@
             gap: 10px;
             flex-wrap: wrap;
             align-items: center;
-            margin-bottom: 20px;
         }
 
         .checkbox-label {
@@ -327,8 +332,8 @@
 
         .properties-panel {
             position: fixed;
-            top: 80px;
-            right: 20px;
+            bottom: 20px;
+            left: 20px;
             width: 350px;
             max-height: 80vh;
             background: #252526;
@@ -341,7 +346,7 @@
         }
 
         .properties-panel.collapsed {
-            transform: translateX(370px);
+            transform: translateY(calc(100% + 40px));
         }
 
         .panel-header {
@@ -375,8 +380,8 @@
 
         .panel-collapse-btn {
             position: fixed;
-            top: 80px;
-            right: 20px;
+            bottom: 20px;
+            left: 20px;
             background: #252526;
             border: 1px solid #858585;
             color: #d4d4d4;
@@ -452,29 +457,26 @@
     <div class="container">
         <header>
             <h1>📊 Timeline Editor</h1>
-            <p>Interactive editor for timeline.seq files</p>
+            <div class="controls">
+                <label class="file-label">
+                    📂 Load timeline.seq
+                    <input type="file" id="fileInput" accept=".seq">
+                </label>
+                <button id="saveBtn" disabled>💾 Save timeline.seq</button>
+                <label class="file-label">
+                    🎵 Load Audio (WAV)
+                    <input type="file" id="audioInput" accept=".wav">
+                </label>
+                <button id="clearAudioBtn" disabled>✖ Clear Audio</button>
+                <button id="addSequenceBtn" disabled>➕ Add Sequence</button>
+                <button id="deleteBtn" disabled>🗑️ Delete Selected</button>
+                <button id="reorderBtn" disabled>🔄 Re-order by Time</button>
+            </div>
         </header>
 
-        <div class="controls">
-            <label class="file-label">
-                📂 Load timeline.seq
-                <input type="file" id="fileInput" accept=".seq">
-            </label>
-            <button id="saveBtn" disabled>💾 Save timeline.seq</button>
-            <label class="file-label">
-                🎵 Load Audio (WAV)
-                <input type="file" id="audioInput" accept=".wav">
-            </label>
-            <button id="clearAudioBtn" disabled>✖ Clear Audio</button>
-            <button id="addSequenceBtn" disabled>➕ Add Sequence</button>
-            <button id="deleteBtn" disabled>🗑️ Delete Selected</button>
-            <button id="reorderBtn" disabled>🔄 Re-order by Time</button>
-        </div>
-
         <div class="zoom-controls">
             <label>Zoom: <input type="range" id="zoomSlider" min="10" max="200" value="100" step="10"></label>
             <span id="zoomLevel">100%</span>
-            <label style="margin-left: 20px">Pixels per second: <span id="pixelsPerSec">100</span></label>
             <label class="checkbox-label" style="margin-left: 20px">
                 <input type="checkbox" id="showBeatsCheckbox">
                 Show Beats (BPM: <span id="currentBPM">120</span>)
@@ -489,12 +491,12 @@
             <div class="timeline" id="timeline"></div>
         </div>
 
-        <button class="panel-collapse-btn" id="panelCollapseBtn">◀ Properties</button>
+        <button class="panel-collapse-btn" id="panelCollapseBtn">▲ Properties</button>
 
         <div class="properties-panel" id="propertiesPanel" style="display: none;">
             <div class="panel-header">
                 <h2>Properties</h2>
-                <button class="panel-toggle" id="panelToggle">▶ Collapse</button>
+                <button class="panel-toggle" id="panelToggle">▼ Collapse</button>
             </div>
             <div id="propertiesContent"></div>
         </div>
@@ -534,7 +536,6 @@
         const messageArea = document.getElementById('messageArea');
         const zoomSlider = document.getElementById('zoomSlider');
         const zoomLevel = document.getElementById('zoomLevel');
-        const pixelsPerSecLabel = document.getElementById('pixelsPerSec');
         const stats = document.getElementById('stats');
 
         // Parser: timeline.seq → JavaScript objects
@@ -596,7 +597,7 @@
                         priority: parseInt(seqMatch[2]),
                         effects: [],
                         name: seqMatch[3] || '',
-                        _collapsed: false
+                        _collapsed: true
                     };
                     sequences.push(currentSequence);
                     currentPriority = -1; // Reset effect priority for new sequence
@@ -1280,7 +1281,7 @@
                 startTime: 0,
                 priority: 0,
                 effects: [],
-                _collapsed: false
+                _collapsed: true
             });
             renderTimeline();
             showMessage('New sequence added', 'success');
@@ -1331,7 +1332,6 @@
             const zoom = parseInt(e.target.value);
             pixelsPerSecond = zoom;
             zoomLevel.textContent = `${zoom}%`;
-            pixelsPerSecLabel.textContent = zoom;
             if (audioBuffer) {
                 renderWaveform(); // Re-render waveform at new zoom
             }
@@ -1352,13 +1352,13 @@
         panelToggle.addEventListener('click', () => {
             propertiesPanel.classList.add('collapsed');
             panelCollapseBtn.classList.add('visible');
-            panelToggle.textContent = '◀ Expand';
+            panelToggle.textContent = '▲ Expand';
         });
 
         panelCollapseBtn.addEventListener('click', () => {
             propertiesPanel.classList.remove('collapsed');
             panelCollapseBtn.classList.remove('visible');
-            panelToggle.textContent = '▶ Collapse';
+            panelToggle.textContent = '▼ Collapse';
         });
 
         // Click outside to deselect
@@ -1394,7 +1394,6 @@
                     // Update zoom slider and labels
                     zoomSlider.value = pixelsPerSecond;
                     zoomLevel.textContent = `${pixelsPerSecond}%`;
-                    pixelsPerSecLabel.textContent = pixelsPerSecond;
 
                     // Re-render waveform and timeline at new zoom
                     if (audioBuffer) {