fix: improve devices section UX

- Remove border separator above Devices section for cleaner look
- Add "+" button next to Devices header to add new effects
- Button placement matches Ableton/Bitwig pattern
- TODO: Implement effect browser dialog when + is clicked

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-18 07:51:51 +01:00
parent f3f5b65e1e
commit 4547446ced

View File

@@ -385,18 +385,32 @@ export function Track({
</div>
{/* Devices/Effects Section */}
<div className="pt-2 border-t border-border">
<button
onClick={() => setShowDevices(!showDevices)}
className="flex items-center justify-between w-full text-xs font-medium text-foreground hover:text-primary transition-colors mb-2"
>
<span>Devices ({track.effectChain.effects.length})</span>
{showDevices ? (
<ChevronDown className="h-3.5 w-3.5" />
) : (
<ChevronRight className="h-3.5 w-3.5" />
)}
</button>
<div className="pt-2">
<div className="flex items-center justify-between mb-2">
<button
onClick={() => setShowDevices(!showDevices)}
className="flex items-center gap-1 text-xs font-medium text-foreground hover:text-primary transition-colors"
>
<span>Devices ({track.effectChain.effects.length})</span>
{showDevices ? (
<ChevronDown className="h-3.5 w-3.5" />
) : (
<ChevronRight className="h-3.5 w-3.5" />
)}
</button>
<Button
variant="ghost"
size="icon-sm"
onClick={() => {
// TODO: Open effect browser/selector dialog
console.log('Add effect clicked for track:', track.id);
}}
title="Add effect"
className="h-5 w-5"
>
<Plus className="h-3 w-3" />
</Button>
</div>
{showDevices && (
<div className="space-y-1">