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

refactor: improve effects panel layout

Browse Source 
Effects panel improvements:
- Removed track name label header
- Moved "Add Effect" button to top left corner
- Button now uses self-start alignment for left positioning
- Cleaner, more minimal design

Layout changes:
- Button appears consistently in top left whether effects exist or not
- More space for effect devices
- Better visual hierarchy

🤖 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-18 19:00:59 +01:00
parent 623284e8b5
commit 30ebd52b4c
1 changed files with 42 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
components/tracks/Track.tsx
View File

@@ -915,44 +915,51 @@ export function Track({
{/* Per-Track Effects Panel */} {/* Per-Track Effects Panel */}
{!track.collapsed && track.showEffects && ( {!track.collapsed && track.showEffects && (
<div className="bg-background/30 border-t border-border/50 p-3 h-[280px] flex flex-col"> <div className="bg-background/30 border-t border-border/50 p-3 h-[280px] flex flex-col">
<div className="flex items-center justify-between mb-2 flex-shrink-0">
<span className="text-xs font-medium text-foreground">
{track.name} - Effects
</span>
<Button
variant="ghost"
size="sm"
onClick={() => setEffectBrowserOpen(true)}
className="h-7 px-2 text-xs"
>
<Sparkles className="h-3 w-3 mr-1" />
Add Effect
</Button>
</div>
{track.effectChain.effects.length === 0 ? ( {track.effectChain.effects.length === 0 ? (
<div className="text-center py-8 text-sm text-muted-foreground flex-1 flex items-center justify-center"> <div className="flex flex-col flex-1">
No effects on this track <Button
variant="ghost"
size="sm"
onClick={() => setEffectBrowserOpen(true)}
className="h-7 px-2 text-xs self-start mb-2"
>
<Sparkles className="h-3 w-3 mr-1" />
Add Effect
</Button>
<div className="text-center text-sm text-muted-foreground flex-1 flex items-center justify-center">
No effects on this track
</div>
</div> </div>
) : ( ) : (
<div className="flex gap-3 overflow-x-auto overflow-y-auto custom-scrollbar flex-1"> <div className="flex flex-col flex-1">
{track.effectChain.effects.map((effect) => ( <Button
<EffectDevice variant="ghost"
key={effect.id} size="sm"
effect={effect} onClick={() => setEffectBrowserOpen(true)}
onToggleEnabled={() => onToggleEffect?.(effect.id)} className="h-7 px-2 text-xs self-start mb-2"
onRemove={() => onRemoveEffect?.(effect.id)} >
onUpdateParameters={(params) => onUpdateEffect?.(effect.id, params)} <Sparkles className="h-3 w-3 mr-1" />
onToggleExpanded={() => { Add Effect
const updatedEffects = track.effectChain.effects.map((e) => </Button>
e.id === effect.id ? { ...e, expanded: !e.expanded } : e <div className="flex gap-3 overflow-x-auto overflow-y-auto custom-scrollbar flex-1">
); {track.effectChain.effects.map((effect) => (
onUpdateTrack(track.id, { <EffectDevice
effectChain: { ...track.effectChain, effects: updatedEffects }, key={effect.id}
}); effect={effect}
}} onToggleEnabled={() => onToggleEffect?.(effect.id)}
/> onRemove={() => onRemoveEffect?.(effect.id)}
))} onUpdateParameters={(params) => onUpdateEffect?.(effect.id, params)}
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>
)} )}