From 235fc3913ce7cfff46f766911ddd3e981f4ea6e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 12:12:26 +0100
Subject: [PATCH] fix: position bars at bottom, always visible, no inner
 containers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 components/tracks/TrackList.tsx | 221 ++++++++++++++------------------
 1 file changed, 97 insertions(+), 124 deletions(-)

diff --git a/components/tracks/TrackList.tsx b/components/tracks/TrackList.tsx
index f926307..879fbe2 100644
--- a/components/tracks/TrackList.tsx
+++ b/components/tracks/TrackList.tsx
@@ -11,6 +11,7 @@ import { createEffect, type EffectType, EFFECT_NAMES } from '@/lib/audio/effects
 import { AutomationLane } from '@/components/automation/AutomationLane';
 import type { AutomationPoint as AutomationPointType } from '@/types/automation';
 import { createAutomationPoint } from '@/lib/audio/automation/utils';
+import { EffectDevice } from '@/components/effects/EffectDevice';
 
 export interface TrackListProps {
   tracks: TrackType[];
@@ -292,12 +293,93 @@ export function TrackList({
                     renderWaveformOnly={true}
                   />
 
-                  {/* Automation Bar - Integrated at top */}
-                  {!track.collapsed && track.automation?.showAutomation && (
-                    <div className="absolute top-0 left-0 right-0 z-10 pointer-events-auto bg-card/90 backdrop-blur-sm border-b border-border">
-                      {/* Automation Header - Always visible */}
+                  {/* 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">
+                      {/* Effects Header - Collapsible */}
                       <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={() => {
                           const currentLane = track.automation.lanes.find(
                             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 ? (
-                            <ChevronDown 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 text-muted-foreground">
-                            {track.automation.selectedParameterId || 'Volume'}
-                          </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>
+                        {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" />
+                        )}
+                        <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 */}
                       {track.automation.lanes
                         .filter((lane) => lane.parameterId === track.automation.selectedParameterId && lane.visible)
                         .map((lane) => (
-                          <div key={lane.id} className="h-32">
+                          <div key={lane.id} className="h-32 border-t border-border">
                             <AutomationLane
                               lane={lane}
                               trackId={track.id}
@@ -401,99 +467,6 @@ export function TrackList({
                         ))}
                     </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>
               </React.Fragment>
             ))}