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

fix: improve overlay visibility with header controls and lighter backdrop

Browse Source 
Changes to automation and effects overlays:
- Reduced backdrop opacity from bg-black/60 to bg-black/30 (less dark)
- Added header to automation overlay with parameter name display
- Added close button to automation overlay (ChevronDown icon)
- Wrapped automation lane in rounded card with border and shadow
- Both overlays now have consistent visual styling
- Added ChevronDown import to TrackList

This makes the overlays less obtrusive and adds proper controls for closing
the automation view, matching the effects overlay pattern.

🤖 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 11:56:59 +01:00
parent b57ac5912a
commit 8c779ccd88
1 changed files with 87 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
components/tracks/TrackList.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
import { Plus, Upload } from 'lucide-react';
import { Plus, Upload, ChevronDown } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Track } from './Track';
import { TrackExtensions } from './TrackExtensions';
@@ -294,73 +294,98 @@ export function TrackList({
{/* Automation Lane Overlay */}
{!track.collapsed && track.automation?.showAutomation && (
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm pointer-events-auto z-10">
<div className="h-full p-4">
{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 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>
</div>
</div>
)}
{/* Effects Overlay */}
{!track.collapsed && track.showEffects && (
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm pointer-events-auto z-10">
<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}