refactor: improve effects panel layout

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>

components/tracks/Track.tsx

@@ -915,26 +915,32 @@ 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">
+          {track.effectChain.effects.length === 0 ? (
-            <span className="text-xs font-medium text-foreground">
+            <div className="flex flex-col flex-1">
-              {track.name} - Effects
-            </span>
               <Button
                 variant="ghost"
                 size="sm"
                 onClick={() => setEffectBrowserOpen(true)}
-              className="h-7 px-2 text-xs"
+                className="h-7 px-2 text-xs self-start mb-2"
               >
                 <Sparkles className="h-3 w-3 mr-1" />
                 Add Effect
               </Button>
-          </div>
+              <div className="text-center text-sm text-muted-foreground flex-1 flex items-center justify-center">
-
-          {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>
+            </div>
           ) : (
+            <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
@@ -954,6 +960,7 @@ export function Track({
                   />
                 ))}
               </div>
+            </div>
           )}
 
           {/* Effect Browser Dialog */}