From 8c779ccd88826be87f0b8b38e9de1ed002ec2bec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 11:56:59 +0100
Subject: [PATCH] fix: improve overlay visibility with header controls and
 lighter backdrop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 components/tracks/TrackList.tsx | 149 +++++++++++++++++++-------------
 1 file changed, 87 insertions(+), 62 deletions(-)

diff --git a/components/tracks/TrackList.tsx b/components/tracks/TrackList.tsx
index 0f27c81..931f247 100644
--- a/components/tracks/TrackList.tsx
+++ b/components/tracks/TrackList.tsx
@@ -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}