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 */}
{!track.collapsed && track.showEffects && (
<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 ? (
<div className="text-center py-8 text-sm text-muted-foreground flex-1 flex items-center justify-center">
No effects on this track
<div className="flex flex-col flex-1">
<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 className="flex gap-3 overflow-x-auto overflow-y-auto custom-scrollbar flex-1">
{track.effectChain.effects.map((effect) => (
<EffectDevice
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 className="flex flex-col flex-1">
<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="flex gap-3 overflow-x-auto overflow-y-auto custom-scrollbar flex-1">
{track.effectChain.effects.map((effect) => (
<EffectDevice
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>
)}