refactor: replace overlay cards with integrated collapsible bars

Changes automation and effects from card-based overlays to integrated bars:
- Automation bar positioned at absolute top with no margins/padding
- Effects bar positioned below automation or at top if automation hidden
- Both bars use bg-card/90 backdrop-blur-sm for subtle transparency
- Collapsible with ChevronDown/ChevronRight indicators
- Close button (X icon) on each bar
- Effects bar dynamically positions based on automation state
- Added effectsExpanded property to Track type
- Removed card container styling for cleaner integration

The bars now sit directly on the waveform as requested, making them feel
more integrated into the track view rather than floating overlays.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

components/tracks/TrackList.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Plus, Upload, ChevronDown } from 'lucide-react';
+import { Plus, Upload, ChevronDown, ChevronRight, X } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { Track } from './Track';
 import { TrackExtensions } from './TrackExtensions';
@@ -292,15 +292,33 @@ export function TrackList({
                     renderWaveformOnly={true}
                   />
 
-                  {/* Automation Lane Overlay */}
+                  {/* Automation Bar - Integrated at top */}
                   {!track.collapsed && track.automation?.showAutomation && (
-                    <div className="absolute inset-0 bg-black/30 backdrop-blur-sm pointer-events-auto z-10">
+                    <div className="absolute top-0 left-0 right-0 z-10 pointer-events-auto bg-card/90 backdrop-blur-sm border-b border-border">
-                      <div className="h-full p-4 flex flex-col">
+                      {/* Automation Header - Always visible */}
-                        <div className="bg-card/95 rounded-lg border border-border shadow-2xl flex flex-col h-full">
+                      <div
-                          {/* Header */}
+                        className="flex items-center justify-between px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors border-b border-border"
-                          <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-muted/50">
+                        onClick={() => {
+                          const currentLane = track.automation.lanes.find(
+                            l => l.parameterId === track.automation.selectedParameterId
+                          );
+                          if (currentLane) {
+                            const updatedLanes = track.automation.lanes.map((l) =>
+                              l.id === currentLane.id ? { ...l, visible: !l.visible } : l
+                            );
+                            onUpdateTrack(track.id, {
+                              automation: { ...track.automation, lanes: updatedLanes },
+                            });
+                          }
+                        }}
+                      >
                         <div className="flex items-center gap-2">
-                              <span className="text-sm font-medium">Automation</span>
+                          {track.automation.lanes.find(l => l.parameterId === track.automation.selectedParameterId)?.visible ? (
+                            <ChevronDown className="h-3 w-3 text-muted-foreground" />
+                          ) : (
+                            <ChevronRight className="h-3 w-3 text-muted-foreground" />
+                          )}
+                          <span className="text-xs font-medium">Automation</span>
                           <span className="text-xs text-muted-foreground">
                             {track.automation.selectedParameterId || 'Volume'}
                           </span>
@@ -308,22 +326,25 @@ export function TrackList({
                         <Button
                           variant="ghost"
                           size="icon-sm"
-                              onClick={() => onUpdateTrack(track.id, {
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onUpdateTrack(track.id, {
                               automation: { ...track.automation, showAutomation: false }
-                              })}
+                            });
+                          }}
                           title="Close automation"
+                          className="h-5 w-5"
                         >
-                              <ChevronDown className="h-4 w-4" />
+                          <X className="h-3 w-3" />
                         </Button>
                       </div>
 
-                          {/* Automation Lane */}
+                      {/* Automation Lane Content - Collapsible */}
-                          <div className="flex-1 overflow-hidden">
                       {track.automation.lanes
-                              .filter((lane) => lane.parameterId === track.automation.selectedParameterId)
+                        .filter((lane) => lane.parameterId === track.automation.selectedParameterId && lane.visible)
                         .map((lane) => (
+                          <div key={lane.id} className="h-32">
                             <AutomationLane
-                                  key={lane.id}
                               lane={lane}
                               trackId={track.id}
                               zoom={zoom}
@@ -376,17 +397,58 @@ export function TrackList({
                               }}
                               onSeek={onSeek}
                             />
+                          </div>
                         ))}
                     </div>
-                        </div>
-                      </div>
-                    </div>
                   )}
 
-                  {/* Effects Overlay */}
+                  {/* Effects Bar - Integrated below automation or at top */}
                   {!track.collapsed && track.showEffects && (
-                    <div className="absolute inset-0 bg-black/30 backdrop-blur-sm pointer-events-auto z-10">
+                    <div
-                      <div className="h-full p-4">
+                      className="absolute left-0 right-0 z-10 pointer-events-auto bg-card/90 backdrop-blur-sm border-b border-border"
+                      style={{
+                        top: track.automation?.showAutomation && track.automation.lanes.find(l => l.parameterId === track.automation.selectedParameterId)?.visible
+                          ? '164px' // 32px header + 132px automation lane
+                          : track.automation?.showAutomation
+                          ? '32px' // Just header
+                          : '0px'
+                      }}
+                    >
+                      {/* Effects Header - Always visible */}
+                      <div
+                        className="flex items-center justify-between px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors border-b border-border"
+                        onClick={() => {
+                          onUpdateTrack(track.id, { effectsExpanded: !track.effectsExpanded });
+                        }}
+                      >
+                        <div className="flex items-center gap-2">
+                          {track.effectsExpanded ? (
+                            <ChevronDown className="h-3 w-3 text-muted-foreground" />
+                          ) : (
+                            <ChevronRight className="h-3 w-3 text-muted-foreground" />
+                          )}
+                          <span className="text-xs font-medium">Effects</span>
+                          <span className="text-xs text-muted-foreground">
+                            ({track.effectChain.effects.length})
+                          </span>
+                        </div>
+                        <Button
+                          variant="ghost"
+                          size="icon-sm"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onUpdateTrack(track.id, { showEffects: false });
+                          }}
+                          title="Close effects"
+                          className="h-5 w-5"
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+
+                      {/* Effects Content - Collapsible */}
+                      {track.effectsExpanded && (
+                        <div className="h-48">
                           <TrackExtensions
                             track={track}
                             onUpdateTrack={onUpdateTrack}
@@ -429,6 +491,7 @@ export function TrackList({
                             }}
                           />
                         </div>
+                      )}
                     </div>
                   )}
                 </div>

types/track.ts

@@ -34,6 +34,7 @@ export interface Track {
   collapsed: boolean;
   selected: boolean;
   showEffects: boolean; // Show/hide per-track effects panel
+  effectsExpanded?: boolean; // Whether effects bar is expanded (when showEffects is true)
 
   // Selection (for editing operations)
   selection: Selection | null;