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

33
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,8 +294,31 @@ 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">
<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) => (
@@ -356,11 +379,13 @@ export function TrackList({
))}
</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}