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 { AutomationLane } from '@/components/automation/AutomationLane';
|
||||||
import type { AutomationPoint as AutomationPointType } from '@/types/automation';
|
import type { AutomationPoint as AutomationPointType } from '@/types/automation';
|
||||||
import { createAutomationPoint } from '@/lib/audio/automation/utils';
|
import { createAutomationPoint } from '@/lib/audio/automation/utils';
|
||||||
|
import { EffectDevice } from '@/components/effects/EffectDevice';
|
||||||
|
|
||||||
export interface TrackListProps {
|
export interface TrackListProps {
|
||||||
tracks: TrackType[];
|
tracks: TrackType[];
|
||||||
@@ -292,12 +293,93 @@ export function TrackList({
|
|||||||
renderWaveformOnly={true}
|
renderWaveformOnly={true}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Automation Bar - Integrated at top */}
|
{/* Effects Bar - Always visible at bottom */}
|
||||||
{!track.collapsed && track.automation?.showAutomation && (
|
{!track.collapsed && (
|
||||||
<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="absolute bottom-0 left-0 right-0 z-10 pointer-events-auto bg-card/90 backdrop-blur-sm border-t border-border">
|
||||||
{/* Automation Header - Always visible */}
|
{/* Effects Header - Collapsible */}
|
||||||
<div
|
<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={() => {
|
onClick={() => {
|
||||||
const currentLane = track.automation.lanes.find(
|
const currentLane = track.automation.lanes.find(
|
||||||
l => l.parameterId === track.automation.selectedParameterId
|
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 ? (
|
||||||
{track.automation.lanes.find(l => l.parameterId === track.automation.selectedParameterId)?.visible ? (
|
<ChevronDown className="h-3 w-3 text-muted-foreground" />
|
||||||
<ChevronDown className="h-3 w-3 text-muted-foreground" />
|
) : (
|
||||||
) : (
|
<ChevronRight 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 font-medium">Automation</span>
|
<span className="text-xs text-muted-foreground">
|
||||||
<span className="text-xs text-muted-foreground">
|
{track.automation.selectedParameterId || 'Volume'}
|
||||||
{track.automation.selectedParameterId || 'Volume'}
|
</span>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
{/* Automation Lane Content - Collapsible */}
|
{/* Automation Lane Content - Collapsible */}
|
||||||
{track.automation.lanes
|
{track.automation.lanes
|
||||||
.filter((lane) => lane.parameterId === track.automation.selectedParameterId && lane.visible)
|
.filter((lane) => lane.parameterId === track.automation.selectedParameterId && lane.visible)
|
||||||
.map((lane) => (
|
.map((lane) => (
|
||||||
<div key={lane.id} className="h-32">
|
<div key={lane.id} className="h-32 border-t border-border">
|
||||||
<AutomationLane
|
<AutomationLane
|
||||||
lane={lane}
|
lane={lane}
|
||||||
trackId={track.id}
|
trackId={track.id}
|
||||||
@@ -401,99 +467,6 @@ export function TrackList({
|
|||||||
))}
|
))}
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
))}
|
))}
|
||||||
|
|||||||
Reference in New Issue
Block a user