refactor: make effects section always visible with inline collapse toggle

- Removed "Devices" button from control panel
- Effects section now always present below each track
- Collapsible via chevron in the effects header itself
- Click header to expand/collapse the device rack
- "+" button in header to add effects (with stopPropagation)
- Each track has independent collapse state
- Hover effect on header for better UX

This matches the typical DAW layout where each track has its own
device section that can be individually collapsed/expanded.

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

Co-Authored-By: Claude <noreply@anthropic.com>

components/tracks/Track.tsx

@@ -390,27 +390,6 @@ export function Track({
                   : `R${Math.round(track.pan * 100)}`}
               </span>
             </div>
-
-            {/* Devices Toggle Button */}
-            {!track.collapsed && (
-              <div className="pt-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setShowEffects(!showEffects)}
-                  className="w-full"
-                >
-                  <span className="flex-1 text-left">
-                    Devices ({track.effectChain.effects.length})
-                  </span>
-                  {showEffects ? (
-                    <ChevronDown className="h-3.5 w-3.5" />
-                  ) : (
-                    <ChevronRight className="h-3.5 w-3.5" />
-                  )}
-                </Button>
-              </div>
-            )}
           </>
         )}
       </div>
@@ -460,36 +439,39 @@ export function Track({
       </div>
 
       {/* Bottom: Effects Section (Collapsible, Full Width) */}
-      {showEffects && !track.collapsed && (
+      {!track.collapsed && (
         <div className="bg-card border-b border-border">
           {/* Effects Header */}
-          <div className="flex items-center justify-between px-3 py-2 border-b border-border">
+          <div
-            <span className="text-xs font-medium text-muted-foreground uppercase">
+            className="flex items-center justify-between px-3 py-2 border-b border-border cursor-pointer hover:bg-accent/50 transition-colors"
+            onClick={() => setShowEffects(!showEffects)}
+          >
+            <div className="flex items-center gap-2">
+              {showEffects ? (
+                <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+              ) : (
+                <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+              )}
+              <span className="text-xs font-medium text-foreground">
                 Devices ({track.effectChain.effects.length})
               </span>
-            <div className="flex items-center gap-2">
+            </div>
             <Button
               variant="ghost"
               size="icon-sm"
-                onClick={() => setEffectBrowserOpen(true)}
+              onClick={(e) => {
+                e.stopPropagation();
+                setEffectBrowserOpen(true);
+              }}
               title="Add effect"
               className="h-6 w-6"
             >
               <Plus className="h-3.5 w-3.5" />
             </Button>
-              <Button
-                variant="ghost"
-                size="icon-sm"
-                onClick={() => setShowEffects(false)}
-                title="Close devices"
-                className="h-6 w-6"
-              >
-                <ChevronDown className="h-3.5 w-3.5" />
-              </Button>
-            </div>
           </div>
 
           {/* Horizontal scrolling device rack */}
+          {showEffects && (
             <div className="overflow-x-auto custom-scrollbar p-3">
               <div className="flex gap-2">
                 {track.effectChain.effects.length === 0 ? (
@@ -508,6 +490,7 @@ export function Track({
                 )}
               </div>
             </div>
+          )}
         </div>
       )}