refactor: single automation lane with parameter dropdown and fixed-height effects panel

Phase 9 Automation Improvements: - Replaced multiple automation lanes with single lane + parameter selector - Added dropdown in automation header to switch between parameters: - Track parameters: Volume, Pan - Effect parameters: Dynamically generated from effect chain - Lanes are created on-demand when parameter is selected - Effects panel now has fixed height (280px) with scroll - Panel no longer resizes when effects are expanded - Maintains consistent UI layout Technical changes: - Track.automation.selectedParameterId: Tracks current parameter - AutomationHeader: Added parameter dropdown props - AutomationLane: Passes parameter selection to header - Track.tsx: Single lane rendering with IIFE for parameter list - Effects panel: h-[280px] with flex layout and overflow-y-auto 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-18 18:49:44 +01:00
parent d2709b8fc2
commit eb445bfa3a
4 changed files with 114 additions and 21 deletions
--- a/components/automation/AutomationHeader.tsx
+++ b/components/automation/AutomationHeader.tsx
@@ -17,6 +17,10 @@ export interface AutomationHeaderProps {
  onHeightChange?: (delta: number) => void;
  className?: string;
  formatter?: (value: number) => string;
+  // Parameter selection
+  availableParameters?: Array<{ id: string; name: string }>;
+  selectedParameterId?: string;
+  onParameterChange?: (parameterId: string) => void;
 }

 const MODE_LABELS: Record<AutomationMode, string> = {
@@ -44,6 +48,9 @@ export function AutomationHeader({
  onHeightChange,
  className,
  formatter,
+  availableParameters,
+  selectedParameterId,
+  onParameterChange,
 }: AutomationHeaderProps) {
  const modes: AutomationMode[] = ['read', 'write', 'touch', 'latch'];
  const currentModeIndex = modes.indexOf(mode);
@@ -74,10 +81,24 @@ export function AutomationHeader({
        />
      )}

-      {/* Parameter name */}
-      <span className="text-xs font-medium text-foreground flex-1 min-w-0 truncate">
-        {parameterName}
-      </span>
+      {/* Parameter name / selector */}
+      {availableParameters && availableParameters.length > 1 ? (
+        <select
+          value={selectedParameterId}
+          onChange={(e) => onParameterChange?.(e.target.value)}
+          className="text-xs font-medium text-foreground flex-1 min-w-0 bg-background/50 border border-border/30 rounded px-1.5 py-0.5 hover:bg-background/80 focus:outline-none focus:ring-1 focus:ring-primary"
+        >
+          {availableParameters.map((param) => (
+            <option key={param.id} value={param.id}>
+              {param.name}
+            </option>
+          ))}
+        </select>
+      ) : (
+        <span className="text-xs font-medium text-foreground flex-1 min-w-0 truncate">
+          {parameterName}
+        </span>
+      )}

      {/* Current value display */}
      {currentValue !== undefined && (
--- a/components/automation/AutomationLane.tsx
+++ b/components/automation/AutomationLane.tsx
@@ -16,6 +16,10 @@ export interface AutomationLaneProps {
  onUpdatePoint?: (pointId: string, updates: Partial<AutomationPointType>) => void;
  onRemovePoint?: (pointId: string) => void;
  className?: string;
+  // Parameter selection
+  availableParameters?: Array<{ id: string; name: string }>;
+  selectedParameterId?: string;
+  onParameterChange?: (parameterId: string) => void;
 }

 export function AutomationLane({
@@ -28,6 +32,9 @@ export function AutomationLane({
  onUpdatePoint,
  onRemovePoint,
  className,
+  availableParameters,
+  selectedParameterId,
+  onParameterChange,
 }: AutomationLaneProps) {
  const canvasRef = React.useRef<HTMLCanvasElement>(null);
  const containerRef = React.useRef<HTMLDivElement>(null);
@@ -302,6 +309,9 @@ export function AutomationLane({
          onUpdateLane?.({ height: newHeight });
        }}
        formatter={lane.valueRange.formatter}
+        availableParameters={availableParameters}
+        selectedParameterId={selectedParameterId}
+        onParameterChange={onParameterChange}
      />

      {/* Lane canvas area */}
--- a/components/tracks/Track.tsx
+++ b/components/tracks/Track.tsx
@@ -13,6 +13,7 @@ import { CircularKnob } from '@/components/ui/CircularKnob';
 import { AutomationLane } from '@/components/automation/AutomationLane';
 import type { AutomationLane as AutomationLaneType, AutomationPoint as AutomationPointType } from '@/types/automation';
 import { createAutomationPoint } from '@/lib/audio/automation/utils';
+import { createAutomationLane } from '@/lib/audio/automation-utils';
 import { EffectDevice } from '@/components/effects/EffectDevice';
 import { EffectBrowser } from '@/components/effects/EffectBrowser';

@@ -709,19 +710,79 @@ export function Track({
      </div>
      </div>

-      {/* Automation Lanes */}
-      {!track.collapsed && track.automation?.showAutomation && (
-        <div className="bg-background/30">
-          {track.automation.lanes.map((lane) => (
+      {/* Automation Lane */}
+      {!track.collapsed && track.automation?.showAutomation && (() => {
+        // Build list of available parameters from track and effects
+        const availableParameters: Array<{ id: string; name: string }> = [
+          { id: 'volume', name: 'Volume' },
+          { id: 'pan', name: 'Pan' },
+        ];
+
+        // Add effect parameters
+        track.effectChain.effects.forEach((effect) => {
+          if (effect.parameters) {
+            Object.keys(effect.parameters).forEach((paramKey) => {
+              const parameterId = `effect.${effect.id}.${paramKey}`;
+              const paramName = `${effect.name} - ${paramKey.charAt(0).toUpperCase() + paramKey.slice(1)}`;
+              availableParameters.push({ id: parameterId, name: paramName });
+            });
+          }
+        });
+
+        // Get selected parameter ID (default to volume if not set)
+        const selectedParameterId = track.automation.selectedParameterId || 'volume';
+
+        // Find or create lane for selected parameter
+        let selectedLane = track.automation.lanes.find(lane => lane.parameterId === selectedParameterId);
+
+        // If lane doesn't exist yet, create it
+        if (!selectedLane) {
+          const paramInfo = availableParameters.find(p => p.id === selectedParameterId);
+          if (paramInfo) {
+            selectedLane = createAutomationLane(
+              track.id,
+              selectedParameterId,
+              paramInfo.name,
+              {
+                min: 0,
+                max: 1,
+                unit: selectedParameterId === 'volume' ? 'dB' : '',
+                formatter: selectedParameterId === 'pan' ? (value: number) => {
+                  if (value === 0.5) return 'C';
+                  if (value < 0.5) return `${Math.abs((0.5 - value) * 200).toFixed(0)}L`;
+                  return `${((value - 0.5) * 200).toFixed(0)}R`;
+                } : undefined,
+              }
+            );
+            // Add the new lane to the track
+            onUpdateTrack(track.id, {
+              automation: {
+                ...track.automation,
+                lanes: [...track.automation.lanes, selectedLane],
+                selectedParameterId,
+              },
+            });
+          }
+        }
+
+        return selectedLane ? (
+          <div className="bg-background/30">
            <AutomationLane
-              key={lane.id}
-              lane={lane}
+              key={selectedLane.id}
+              lane={selectedLane}
              duration={duration}
              zoom={zoom}
              currentTime={currentTime}
+              availableParameters={availableParameters}
+              selectedParameterId={selectedParameterId}
+              onParameterChange={(parameterId) => {
+                onUpdateTrack(track.id, {
+                  automation: { ...track.automation, selectedParameterId: parameterId },
+                });
+              }}
              onUpdateLane={(updates) => {
                const updatedLanes = track.automation.lanes.map((l) =>
-                  l.id === lane.id ? { ...l, ...updates } : l
+                  l.id === selectedLane.id ? { ...l, ...updates } : l
                );
                onUpdateTrack(track.id, {
                  automation: { ...track.automation, lanes: updatedLanes },
@@ -734,7 +795,7 @@ export function Track({
                  curve: 'linear',
                });
                const updatedLanes = track.automation.lanes.map((l) =>
-                  l.id === lane.id
+                  l.id === selectedLane.id
                    ? { ...l, points: [...l.points, newPoint] }
                    : l
                );
@@ -744,7 +805,7 @@ export function Track({
              }}
              onUpdatePoint={(pointId, updates) => {
                const updatedLanes = track.automation.lanes.map((l) =>
-                  l.id === lane.id
+                  l.id === selectedLane.id
                    ? {
                        ...l,
                        points: l.points.map((p) =>
@@ -759,7 +820,7 @@ export function Track({
              }}
              onRemovePoint={(pointId) => {
                const updatedLanes = track.automation.lanes.map((l) =>
-                  l.id === lane.id
+                  l.id === selectedLane.id
                    ? { ...l, points: l.points.filter((p) => p.id !== pointId) }
                    : l
                );
@@ -768,14 +829,14 @@ export function Track({
                });
              }}
            />
-          ))}
-        </div>
-      )}
+          </div>
+        ) : null;
+      })()}

      {/* Per-Track Effects Panel */}
      {!track.collapsed && track.showEffects && (
-        <div className="bg-background/30 border-t border-border/50 p-3">
-          <div className="flex items-center justify-between mb-2">
+        <div className="bg-background/30 border-t border-border/50 p-3 h-[280px] flex flex-col">
+          <div className="flex items-center justify-between mb-2 flex-shrink-0">
            <span className="text-xs font-medium text-foreground">
              {track.name} - Effects
            </span>
@@ -791,11 +852,11 @@ export function Track({
          </div>

          {track.effectChain.effects.length === 0 ? (
-            <div className="text-center py-8 text-sm text-muted-foreground">
+            <div className="text-center py-8 text-sm text-muted-foreground flex-1 flex items-center justify-center">
              No effects on this track
            </div>
          ) : (
-            <div className="flex gap-3 overflow-x-auto custom-scrollbar">
+            <div className="flex gap-3 overflow-x-auto overflow-y-auto custom-scrollbar flex-1">
              {track.effectChain.effects.map((effect) => (
                <EffectDevice
                  key={effect.id}
--- a/types/track.ts
+++ b/types/track.ts
@@ -27,6 +27,7 @@ export interface Track {
  automation: {
    lanes: AutomationLane[];
    showAutomation: boolean; // Master show/hide toggle
+    selectedParameterId?: string; // Currently selected parameter to display
  };

  // UI state