valknar/audio-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove A/E buttons, make automation always expanded, add bottom border

Browse Source 
Fixed all three issues:
1. Removed automation (A) and effects (E) toggle buttons from TrackControls
2. Made automation bar always expanded and non-collapsible
3. Added bottom border to effects bar (border-b)

Changes:
- TrackControls.tsx: Removed entire Row 2 (A/E buttons section)
- TrackList.tsx: Removed click handler and chevron from automation header
- TrackList.tsx: Automation lane always visible (no conditional rendering)
- TrackList.tsx: Added border-b to effects bar container
- TrackList.tsx: Added border-b to automation bar for visual consistency

Bars are now permanent, always-visible UI elements at the bottom of tracks.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2025-11-19 12:16:17 +01:00
parent 235fc3913c
commit 35a6ee35d0
2 changed files with 7 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/tracks/TrackControls.tsx
View File

@@ -143,41 +143,6 @@ export function TrackControls({
M
</button>
</div>
{/* Control Buttons Row 2: A/E */}
<div className="flex items-center gap-0.5 w-full justify-center">
{/* Automation Toggle */}
{onAutomationToggle && (
<button
onClick={onAutomationToggle}
className={cn(
'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
showAutomation
? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
: 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
)}
title="Toggle automation"
>
A
</button>
)}
{/* Effects Button */}
{onEffectsClick && (
<button
onClick={onEffectsClick}
className={cn(
'h-5 w-5 rounded-md flex items-center justify-center transition-all text-[9px] font-bold',
showEffects
? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
: 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
)}
title={showEffects ? 'Hide effects' : 'Show effects'}
>
E
</button>
)}
</div>
</div>
</div>
);

34
components/tracks/TrackList.tsx
View File

@@ -295,7 +295,7 @@ export function TrackList({
{/* 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">
<div className="absolute bottom-0 left-0 right-0 z-10 pointer-events-auto bg-card/90 backdrop-blur-sm border-t border-b border-border">
{/* Effects Header - Collapsible */}
<div
className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors"
@@ -369,45 +369,25 @@ export function TrackList({
</div>
)}
{/* Automation Bar - Always visible above effects bar at bottom */}
{/* Automation Bar - Always visible and expanded 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"
className="absolute left-0 right-0 z-10 pointer-events-auto bg-card/90 backdrop-blur-sm border-t border-b 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
);
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 },
});
}
}}
>
{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" />
)}
{/* Automation Header - Not clickable */}
<div className="flex items-center gap-2 px-3 py-1.5">
<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 */}
{/* Automation Lane Content - Always visible */}
{track.automation.lanes
.filter((lane) => lane.parameterId === track.automation.selectedParameterId && lane.visible)
.filter((lane) => lane.parameterId === track.automation.selectedParameterId)
.map((lane) => (
<div key={lane.id} className="h-32 border-t border-border">
<AutomationLane