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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user