fix: position bars at bottom, always visible, no inner containers
Major improvements to automation and effects bars: - Both bars now positioned at bottom of waveform (not top) - Bars are always visible when track is expanded (no show/hide buttons) - Effects bar at absolute bottom - Automation bar above effects, dynamically positioned based on effects state - Removed inner container from effects - direct rendering with EffectDevice - Removed close buttons (X icons) - bars are permanent - Effects render directly with gap-3 padding, no TrackExtensions wrapper - Automation controls preserved (AutomationLane unchanged) This creates a cleaner, always-accessible interface where users can quickly expand/collapse automation or effects without toggling visibility. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -11,6 +11,7 @@ import { createEffect, type EffectType, EFFECT_NAMES } from '@/lib/audio/effects
|
||||
import { AutomationLane } from '@/components/automation/AutomationLane';
|
||||
import type { AutomationPoint as AutomationPointType } from '@/types/automation';
|
||||
import { createAutomationPoint } from '@/lib/audio/automation/utils';
|
||||
import { EffectDevice } from '@/components/effects/EffectDevice';
|
||||
|
||||
export interface TrackListProps {
|
||||
tracks: TrackType[];
|
||||
@@ -292,12 +293,93 @@ export function TrackList({
|
||||
renderWaveformOnly={true}
|
||||
/>
|
||||
|
||||
{/* Automation Bar - Integrated at top */}
|
||||
{!track.collapsed && track.automation?.showAutomation && (
|
||||
<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 */}
|
||||
{/* Effects Bar - Always visible at bottom */}
|
||||
{!track.collapsed && (
|
||||
<div className="absolute bottom-0 left-0 right-0 z-10 pointer-events-auto bg-card/90 backdrop-blur-sm border-t border-border">
|
||||
{/* Effects Header - Collapsible */}
|
||||
<div
|
||||
className="flex items-center justify-between px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors border-b border-border"
|
||||
className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors"
|
||||
onClick={() => {
|
||||
onUpdateTrack(track.id, { effectsExpanded: !track.effectsExpanded });
|
||||
}}
|
||||
>
|
||||
{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>
|
||||
|
||||
{/* Effects Content - Collapsible, no inner container */}
|
||||
{track.effectsExpanded && (
|
||||
<div className="h-48 overflow-x-auto custom-scrollbar bg-muted/70 border-t border-border">
|
||||
<div className="flex h-full gap-3 p-3">
|
||||
{track.effectChain.effects.length === 0 ? (
|
||||
<div className="text-xs text-muted-foreground text-center py-8 w-full">
|
||||
No effects. Click + to add an effect.
|
||||
</div>
|
||||
) : (
|
||||
track.effectChain.effects.map((effect) => (
|
||||
<EffectDevice
|
||||
key={effect.id}
|
||||
effect={effect}
|
||||
onToggleEnabled={() => {
|
||||
const updatedChain = {
|
||||
...track.effectChain,
|
||||
effects: track.effectChain.effects.map((e) =>
|
||||
e.id === effect.id ? { ...e, enabled: !e.enabled } : e
|
||||
),
|
||||
};
|
||||
onUpdateTrack(track.id, { effectChain: updatedChain });
|
||||
}}
|
||||
onRemove={() => {
|
||||
const updatedChain = {
|
||||
...track.effectChain,
|
||||
effects: track.effectChain.effects.filter((e) => e.id !== effect.id),
|
||||
};
|
||||
onUpdateTrack(track.id, { effectChain: updatedChain });
|
||||
}}
|
||||
onUpdateParameters={(params) => {
|
||||
const updatedChain = {
|
||||
...track.effectChain,
|
||||
effects: track.effectChain.effects.map((e) =>
|
||||
e.id === effect.id ? { ...e, parameters: params } : e
|
||||
),
|
||||
};
|
||||
onUpdateTrack(track.id, { effectChain: updatedChain });
|
||||
}}
|
||||
onToggleExpanded={() => {
|
||||
const updatedEffects = track.effectChain.effects.map((e) =>
|
||||
e.id === effect.id ? { ...e, expanded: !e.expanded } : e
|
||||
);
|
||||
onUpdateTrack(track.id, {
|
||||
effectChain: { ...track.effectChain, effects: updatedEffects },
|
||||
});
|
||||
}}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Automation Bar - Always visible above effects bar at bottom */}
|
||||
{!track.collapsed && (
|
||||
<div
|
||||
className="absolute left-0 right-0 z-10 pointer-events-auto bg-card/90 backdrop-blur-sm border-t border-border"
|
||||
style={{
|
||||
bottom: track.effectsExpanded ? '232px' : '32px' // 32px effects header, or 232px if expanded
|
||||
}}
|
||||
>
|
||||
{/* Automation Header - Collapsible */}
|
||||
<div
|
||||
className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors"
|
||||
onClick={() => {
|
||||
const currentLane = track.automation.lanes.find(
|
||||
l => l.parameterId === track.automation.selectedParameterId
|
||||
@@ -312,38 +394,22 @@ export function TrackList({
|
||||
}
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
{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>
|
||||
|
||||
{/* 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">
|
||||
<div key={lane.id} className="h-32 border-t border-border">
|
||||
<AutomationLane
|
||||
lane={lane}
|
||||
trackId={track.id}
|
||||
@@ -401,99 +467,6 @@ export function TrackList({
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Effects Bar - Integrated below automation or at top */}
|
||||
{!track.collapsed && track.showEffects && (
|
||||
<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 });
|
||||
}}
|
||||
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>
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user