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>
This commit is contained in:
@@ -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,143 +292,206 @@ 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="h-full p-4 flex flex-col">
|
||||
<div className="bg-card/95 rounded-lg border border-border shadow-2xl flex flex-col h-full">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-border bg-muted/50">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">Automation</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{track.automation.selectedParameterId || 'Volume'}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => onUpdateTrack(track.id, {
|
||||
automation: { ...track.automation, showAutomation: false }
|
||||
})}
|
||||
title="Close automation"
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Automation Lane */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
{track.automation.lanes
|
||||
.filter((lane) => lane.parameterId === track.automation.selectedParameterId)
|
||||
.map((lane) => (
|
||||
<AutomationLane
|
||||
key={lane.id}
|
||||
lane={lane}
|
||||
trackId={track.id}
|
||||
zoom={zoom}
|
||||
currentTime={currentTime}
|
||||
duration={duration}
|
||||
isPlaying={isPlaying}
|
||||
onAddPoint={(time, value) => {
|
||||
const newPoint = createAutomationPoint(time, value);
|
||||
const updatedLanes = track.automation.lanes.map((l) =>
|
||||
l.id === lane.id
|
||||
? { ...l, points: [...l.points, newPoint].sort((a, b) => a.time - b.time) }
|
||||
: l
|
||||
);
|
||||
onUpdateTrack(track.id, {
|
||||
automation: { ...track.automation, lanes: updatedLanes },
|
||||
});
|
||||
}}
|
||||
onUpdatePoint={(pointId, updates) => {
|
||||
const updatedLanes = track.automation.lanes.map((l) =>
|
||||
l.id === lane.id
|
||||
? {
|
||||
...l,
|
||||
points: l.points.map((p) =>
|
||||
p.id === pointId ? { ...p, ...updates } : p
|
||||
),
|
||||
}
|
||||
: l
|
||||
);
|
||||
onUpdateTrack(track.id, {
|
||||
automation: { ...track.automation, lanes: updatedLanes },
|
||||
});
|
||||
}}
|
||||
onRemovePoint={(pointId) => {
|
||||
const updatedLanes = track.automation.lanes.map((l) =>
|
||||
l.id === lane.id
|
||||
? { ...l, points: l.points.filter((p) => p.id !== pointId) }
|
||||
: l
|
||||
);
|
||||
onUpdateTrack(track.id, {
|
||||
automation: { ...track.automation, lanes: updatedLanes },
|
||||
});
|
||||
}}
|
||||
onUpdateLane={(updates) => {
|
||||
const updatedLanes = track.automation.lanes.map((l) =>
|
||||
l.id === lane.id ? { ...l, ...updates } : l
|
||||
);
|
||||
onUpdateTrack(track.id, {
|
||||
automation: { ...track.automation, lanes: updatedLanes },
|
||||
});
|
||||
}}
|
||||
onSeek={onSeek}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="absolute top-0 left-0 right-0 z-10 pointer-events-auto bg-card/90 backdrop-blur-sm border-b border-border">
|
||||
{/* Automation 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={() => {
|
||||
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">
|
||||
{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>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onUpdateTrack(track.id, {
|
||||
automation: { ...track.automation, showAutomation: false }
|
||||
});
|
||||
}}
|
||||
title="Close automation"
|
||||
className="h-5 w-5"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Automation Lane Content - Collapsible */}
|
||||
{track.automation.lanes
|
||||
.filter((lane) => lane.parameterId === track.automation.selectedParameterId && lane.visible)
|
||||
.map((lane) => (
|
||||
<div key={lane.id} className="h-32">
|
||||
<AutomationLane
|
||||
lane={lane}
|
||||
trackId={track.id}
|
||||
zoom={zoom}
|
||||
currentTime={currentTime}
|
||||
duration={duration}
|
||||
isPlaying={isPlaying}
|
||||
onAddPoint={(time, value) => {
|
||||
const newPoint = createAutomationPoint(time, value);
|
||||
const updatedLanes = track.automation.lanes.map((l) =>
|
||||
l.id === lane.id
|
||||
? { ...l, points: [...l.points, newPoint].sort((a, b) => a.time - b.time) }
|
||||
: l
|
||||
);
|
||||
onUpdateTrack(track.id, {
|
||||
automation: { ...track.automation, lanes: updatedLanes },
|
||||
});
|
||||
}}
|
||||
onUpdatePoint={(pointId, updates) => {
|
||||
const updatedLanes = track.automation.lanes.map((l) =>
|
||||
l.id === lane.id
|
||||
? {
|
||||
...l,
|
||||
points: l.points.map((p) =>
|
||||
p.id === pointId ? { ...p, ...updates } : p
|
||||
),
|
||||
}
|
||||
: l
|
||||
);
|
||||
onUpdateTrack(track.id, {
|
||||
automation: { ...track.automation, lanes: updatedLanes },
|
||||
});
|
||||
}}
|
||||
onRemovePoint={(pointId) => {
|
||||
const updatedLanes = track.automation.lanes.map((l) =>
|
||||
l.id === lane.id
|
||||
? { ...l, points: l.points.filter((p) => p.id !== pointId) }
|
||||
: l
|
||||
);
|
||||
onUpdateTrack(track.id, {
|
||||
automation: { ...track.automation, lanes: updatedLanes },
|
||||
});
|
||||
}}
|
||||
onUpdateLane={(updates) => {
|
||||
const updatedLanes = track.automation.lanes.map((l) =>
|
||||
l.id === lane.id ? { ...l, ...updates } : l
|
||||
);
|
||||
onUpdateTrack(track.id, {
|
||||
automation: { ...track.automation, lanes: updatedLanes },
|
||||
});
|
||||
}}
|
||||
onSeek={onSeek}
|
||||
/>
|
||||
</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 className="h-full p-4">
|
||||
<TrackExtensions
|
||||
track={track}
|
||||
onUpdateTrack={onUpdateTrack}
|
||||
asOverlay={true}
|
||||
onToggleEffect={(effectId) => {
|
||||
const updatedChain = {
|
||||
...track.effectChain,
|
||||
effects: track.effectChain.effects.map((e) =>
|
||||
e.id === effectId ? { ...e, enabled: !e.enabled } : e
|
||||
),
|
||||
};
|
||||
onUpdateTrack(track.id, { effectChain: updatedChain });
|
||||
<div
|
||||
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 });
|
||||
}}
|
||||
onRemoveEffect={(effectId) => {
|
||||
const updatedChain = {
|
||||
...track.effectChain,
|
||||
effects: track.effectChain.effects.filter((e) => e.id !== effectId),
|
||||
};
|
||||
onUpdateTrack(track.id, { effectChain: updatedChain });
|
||||
}}
|
||||
onUpdateEffect={(effectId, parameters) => {
|
||||
const updatedChain = {
|
||||
...track.effectChain,
|
||||
effects: track.effectChain.effects.map((e) =>
|
||||
e.id === effectId ? { ...e, parameters } : e
|
||||
),
|
||||
};
|
||||
onUpdateTrack(track.id, { effectChain: updatedChain });
|
||||
}}
|
||||
onAddEffect={(effectType) => {
|
||||
const newEffect = createEffect(
|
||||
effectType,
|
||||
EFFECT_NAMES[effectType]
|
||||
);
|
||||
const updatedChain = {
|
||||
...track.effectChain,
|
||||
effects: [...track.effectChain.effects, newEffect],
|
||||
};
|
||||
onUpdateTrack(track.id, { effectChain: updatedChain });
|
||||
}}
|
||||
/>
|
||||
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}
|
||||
asOverlay={true}
|
||||
onToggleEffect={(effectId) => {
|
||||
const updatedChain = {
|
||||
...track.effectChain,
|
||||
effects: track.effectChain.effects.map((e) =>
|
||||
e.id === effectId ? { ...e, enabled: !e.enabled } : e
|
||||
),
|
||||
};
|
||||
onUpdateTrack(track.id, { effectChain: updatedChain });
|
||||
}}
|
||||
onRemoveEffect={(effectId) => {
|
||||
const updatedChain = {
|
||||
...track.effectChain,
|
||||
effects: track.effectChain.effects.filter((e) => e.id !== effectId),
|
||||
};
|
||||
onUpdateTrack(track.id, { effectChain: updatedChain });
|
||||
}}
|
||||
onUpdateEffect={(effectId, parameters) => {
|
||||
const updatedChain = {
|
||||
...track.effectChain,
|
||||
effects: track.effectChain.effects.map((e) =>
|
||||
e.id === effectId ? { ...e, parameters } : e
|
||||
),
|
||||
};
|
||||
onUpdateTrack(track.id, { effectChain: updatedChain });
|
||||
}}
|
||||
onAddEffect={(effectType) => {
|
||||
const newEffect = createEffect(
|
||||
effectType,
|
||||
EFFECT_NAMES[effectType]
|
||||
);
|
||||
const updatedChain = {
|
||||
...track.effectChain,
|
||||
effects: [...track.effectChain.effects, newEffect],
|
||||
};
|
||||
onUpdateTrack(track.id, { effectChain: updatedChain });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user