feat: enhance mobile responsiveness with collapsible controls and automation/effects bars

Added comprehensive mobile support for Phase 15 (Polish & Optimization):

**Mobile Layout Enhancements:**
- Track controls now collapsible on mobile with two states:
  - Collapsed: minimal controls with expand chevron, R/M/S buttons, horizontal level meter
  - Expanded: full height fader, pan control, all buttons
- Track collapse buttons added to mobile view (left chevron for track collapse, right chevron for control collapse)
- Master controls collapse button hidden on desktop (lg:hidden)
- Automation and effects bars now available on mobile layout
- Both bars collapsible with eye/eye-off icons, horizontally scrollable when zoomed
- Mobile vertical stacking: controls → waveform → automation → effects per track

**Bug Fixes:**
- Fixed track controls and waveform container height matching on desktop
- Fixed Modal component prop: isOpen → open in all dialog components
- Fixed TypeScript null check for audioBuffer.duration
- Fixed keyboard shortcut category: 'help' → 'view'

**Technical Improvements:**
- Consistent height calculation using trackHeight variable
- Proper responsive breakpoints with Tailwind (sm:640px, lg:1024px)
- Progressive disclosure pattern for mobile controls

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

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

components/tracks/TrackControls.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Circle, Headphones, MoreHorizontal, ChevronRight, ChevronDown } from 'lucide-react';
+import { Circle, Headphones, MoreHorizontal, ChevronRight, ChevronDown, ChevronUp } from 'lucide-react';
 import { CircularKnob } from '@/components/ui/CircularKnob';
 import { TrackFader } from './TrackFader';
 import { cn } from '@/lib/utils/cn';
@@ -20,6 +20,7 @@ export interface TrackControlsProps {
   showAutomation?: boolean;
   showEffects?: boolean;
   isRecording?: boolean;
+  mobileCollapsed?: boolean; // For mobile view collapsible controls
   onNameChange: (name: string) => void;
   onToggleCollapse: () => void;
   onVolumeChange: (volume: number) => void;
@@ -33,6 +34,7 @@ export interface TrackControlsProps {
   onVolumeTouchEnd?: () => void;
   onPanTouchStart?: () => void;
   onPanTouchEnd?: () => void;
+  onToggleMobileCollapse?: () => void;
   className?: string;
 }
 
@@ -50,6 +52,7 @@ export function TrackControls({
   showAutomation = false,
   showEffects = false,
   isRecording = false,
+  mobileCollapsed = false,
   onNameChange,
   onToggleCollapse,
   onVolumeChange,
@@ -63,6 +66,7 @@ export function TrackControls({
   onVolumeTouchEnd,
   onPanTouchStart,
   onPanTouchEnd,
+  onToggleMobileCollapse,
   className,
 }: TrackControlsProps) {
   const [isEditingName, setIsEditingName] = React.useState(false);
@@ -91,11 +95,238 @@ export function TrackControls({
     }
   };
 
-  return (
+  // Mobile collapsed view - minimal controls (like master controls)
+  if (mobileCollapsed) {
+    return (
+      <div className={cn(
+        'flex flex-col items-center gap-2 px-3 py-2 bg-card/50 border border-accent/50 rounded-lg w-full sm:hidden',
+        className
+      )}>
+        <div className="flex items-center justify-between w-full">
+          <div className="flex items-center gap-1 flex-1">
+            <button
+              onClick={onToggleCollapse}
+              className="p-0.5 hover:bg-accent/20 rounded transition-colors flex-shrink-0"
+              title={collapsed ? 'Expand track' : 'Collapse track'}
+            >
+              {collapsed ? (
+                <ChevronRight className="h-3 w-3 text-muted-foreground" />
+              ) : (
+                <ChevronDown className="h-3 w-3 text-muted-foreground" />
+              )}
+            </button>
+            <div
+              className="text-xs font-bold uppercase tracking-wider"
+              style={{ color: trackColor }}
+            >
+              {trackName}
+            </div>
+          </div>
+          {onToggleMobileCollapse && (
+            <button
+              onClick={onToggleMobileCollapse}
+              className="p-1 hover:bg-accent/20 rounded transition-colors"
+              title="Expand track controls"
+            >
+              <ChevronDown className="h-3 w-3 text-muted-foreground" />
+            </button>
+          )}
+        </div>
+        <div className="flex items-center gap-1 w-full justify-center">
+          {onRecordToggle && (
+            <button
+              onClick={onRecordToggle}
+              className={cn(
+                'h-7 w-7 rounded-full flex items-center justify-center transition-all',
+                isRecordEnabled
+                  ? isRecording
+                    ? 'bg-red-500 shadow-lg shadow-red-500/50 animate-pulse'
+                    : 'bg-red-500 shadow-md shadow-red-500/30'
+                  : 'bg-card hover:bg-accent border border-border/50'
+              )}
+              title={isRecordEnabled ? 'Record Armed' : 'Arm for Recording'}
+            >
+              <Circle className={cn('h-3.5 w-3.5', isRecordEnabled ? 'fill-white text-white' : 'text-muted-foreground')} />
+            </button>
+          )}
+          <button
+            onClick={onMuteToggle}
+            className={cn(
+              'h-7 w-7 rounded-md flex items-center justify-center transition-all text-xs font-bold',
+              isMuted
+                ? 'bg-blue-500 text-white shadow-md shadow-blue-500/30'
+                : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
+            )}
+            title={isMuted ? 'Unmute' : 'Mute'}
+          >
+            M
+          </button>
+          {onSoloToggle && (
+            <button
+              onClick={onSoloToggle}
+              className={cn(
+                'h-7 w-7 rounded-md flex items-center justify-center transition-all text-xs font-bold',
+                isSolo
+                  ? 'bg-yellow-500 text-white shadow-md shadow-yellow-500/30'
+                  : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
+              )}
+              title={isSolo ? 'Unsolo' : 'Solo'}
+            >
+              S
+            </button>
+          )}
+          <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
+            <div
+              className={cn(
+                'h-full transition-all',
+                peakLevel > 0.95 ? 'bg-red-500' : peakLevel > 0.8 ? 'bg-yellow-500' : 'bg-green-500'
+              )}
+              style={{ width: `${peakLevel * 100}%` }}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Mobile expanded view - full controls (like master controls)
+  const mobileExpandedView = (
     <div className={cn(
-      'flex flex-col items-center gap-3 px-4 py-3 bg-card/50 border-2 border-accent/50 rounded-lg',
+      'flex flex-col items-center gap-3 px-3 py-3 bg-card/50 border border-accent/50 rounded-lg w-full sm:hidden',
       className
     )}>
+      {/* Header with collapse button */}
+      <div className="flex items-center justify-between w-full">
+        <button
+          onClick={onToggleCollapse}
+          className="p-0.5 hover:bg-accent/20 rounded transition-colors flex-shrink-0"
+          title={collapsed ? 'Expand track' : 'Collapse track'}
+        >
+          {collapsed ? (
+            <ChevronRight className="h-3 w-3 text-muted-foreground" />
+          ) : (
+            <ChevronDown className="h-3 w-3 text-muted-foreground" />
+          )}
+        </button>
+        <div
+          className="text-xs font-bold uppercase tracking-wider flex-1 text-center"
+          style={{ color: trackColor }}
+        >
+          {trackName}
+        </div>
+        {onToggleMobileCollapse && (
+          <button
+            onClick={onToggleMobileCollapse}
+            className="p-0.5 hover:bg-accent/20 rounded transition-colors flex-shrink-0"
+            title="Collapse track controls"
+          >
+            <ChevronUp className="h-3 w-3 text-muted-foreground" />
+          </button>
+        )}
+      </div>
+
+      {/* Pan Control */}
+      <CircularKnob
+        value={pan}
+        onChange={onPanChange}
+        onTouchStart={onPanTouchStart}
+        onTouchEnd={onPanTouchEnd}
+        min={-1}
+        max={1}
+        step={0.01}
+        label="PAN"
+        size={48}
+        formatValue={(value: number) => {
+          if (Math.abs(value) < 0.01) return 'C';
+          if (value < 0) return `${Math.abs(value * 100).toFixed(0)}L`;
+          return `${(value * 100).toFixed(0)}R`;
+        }}
+      />
+
+      {/* Volume Fader - Full height, not compressed */}
+      <div className="flex-1 flex justify-center items-center w-full min-h-[160px]">
+        <TrackFader
+          value={volume}
+          peakLevel={peakLevel}
+          rmsLevel={rmsLevel}
+          onChange={onVolumeChange}
+          onTouchStart={onVolumeTouchStart}
+          onTouchEnd={onVolumeTouchEnd}
+        />
+      </div>
+
+      {/* Control buttons */}
+      <div className="flex items-center gap-1 w-full justify-center">
+        {onRecordToggle && (
+          <button
+            onClick={onRecordToggle}
+            className={cn(
+              'h-8 w-8 rounded-full flex items-center justify-center transition-all',
+              isRecordEnabled
+                ? isRecording
+                  ? 'bg-red-500 shadow-lg shadow-red-500/50 animate-pulse'
+                  : 'bg-red-500 shadow-md shadow-red-500/30'
+                : 'bg-card hover:bg-accent border border-border/50'
+            )}
+            title={isRecordEnabled ? 'Record Armed' : 'Arm for Recording'}
+          >
+            <Circle className={cn('h-3.5 w-3.5', isRecordEnabled ? 'fill-white text-white' : 'text-muted-foreground')} />
+          </button>
+        )}
+        <button
+          onClick={onMuteToggle}
+          className={cn(
+            'h-8 w-8 rounded-md flex items-center justify-center transition-all text-xs font-bold',
+            isMuted
+              ? 'bg-blue-500 text-white shadow-md shadow-blue-500/30'
+              : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
+          )}
+          title={isMuted ? 'Unmute' : 'Mute'}
+        >
+          M
+        </button>
+        {onSoloToggle && (
+          <button
+            onClick={onSoloToggle}
+            className={cn(
+              'h-8 w-8 rounded-md flex items-center justify-center transition-all text-xs font-bold',
+              isSolo
+                ? 'bg-yellow-500 text-white shadow-md shadow-yellow-500/30'
+                : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
+            )}
+            title={isSolo ? 'Unsolo' : 'Solo'}
+          >
+            S
+          </button>
+        )}
+        {onEffectsClick && (
+          <button
+            onClick={onEffectsClick}
+            className={cn(
+              'h-8 w-8 rounded-md flex items-center justify-center transition-all text-xs font-bold',
+              showEffects
+                ? 'bg-purple-500 text-white shadow-md shadow-purple-500/30'
+                : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
+            )}
+            title="Effects"
+          >
+            FX
+          </button>
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      {/* Mobile view - Show expanded or collapsed */}
+      {!mobileCollapsed && mobileExpandedView}
+
+      {/* Desktop/tablet view - hidden on mobile */}
+      <div className={cn(
+        'flex flex-col items-center gap-3 px-4 py-3 bg-card/50 border border-accent/50 rounded-lg hidden sm:flex',
+        className
+      )}>
       {/* Track Name Header with Collapse Chevron */}
       <div className="flex items-center gap-1 w-full">
         <button
@@ -220,6 +451,7 @@ export function TrackControls({
           )}
         </div>
       </div>
-    </div>
+      </div>
+    </>
   );
 }