feat: collapsible section and libraries, compact card layout

- Sample Library section now collapsible via header click
- Library cards collapsible via header click (toggle icon ▾)
- Collapse All button to batch-collapse all libraries
- Compact sample cards: 28px height, 10px font, 70px min grid column
- Tighter spacing throughout (8px lib gap, 4px sample grid gap)
- Play icon removed from cards (card itself is clickable)

web/ui/app.js

@@ -204,7 +204,6 @@ function renderSampleCards(samples) {
   return samples.map(s => `
     <div class="sample-card" data-action="play" data-wav="${esc(s.fullPath)}">
       <span class="sample-name" title="${esc(s.name)}">${esc(s.name)}</span>
-      <span class="sample-play-icon">▶</span>
     </div>
   `).join('');
 }
@@ -234,8 +233,8 @@ function renderLibraries(libs) {
     const sampleCount = Object.values(programs).reduce((sum, s) => sum + s.length, 0);
     return `
       <div class="library-card">
-        <div class="library-header">
-          <h3>${esc(cleanName(lib))}</h3>
+        <div class="library-header" onclick="this.parentNode.classList.toggle('collapsed')">
+          <h3>${esc(cleanName(lib))}<span class="lib-toggle">▾</span></h3>
           <span class="lib-meta">${progCount} programs · ${sampleCount} samples</span>
         </div>
         <div class="library-programs">
@@ -383,3 +382,17 @@ document.addEventListener('click', function(e) {
     playWav(btn.dataset.wav);
   }
 });
+
+// Section collapse toggle
+document.querySelectorAll('.section-toggle').forEach(h => {
+  h.addEventListener('click', function () {
+    this.classList.toggle('collapsed');
+    const target = document.getElementById(this.dataset.section);
+    target.style.display = target.style.display === 'none' ? '' : 'none';
+  });
+});
+
+// Collapse all libraries
+document.getElementById('wav-collapse-all').addEventListener('click', function () {
+  document.querySelectorAll('.library-card').forEach(c => c.classList.add('collapsed'));
+});