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/dialogs/BrowserCompatDialog.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import * as React from 'react';
+import { AlertTriangle, XCircle, Info, X } from 'lucide-react';
+import { Modal } from '@/components/ui/Modal';
+import { Button } from '@/components/ui/Button';
+import { getBrowserInfo } from '@/lib/utils/browser-compat';
+
+interface BrowserCompatDialogProps {
+  open: boolean;
+  missingFeatures: string[];
+  warnings: string[];
+  onClose: () => void;
+}
+
+export function BrowserCompatDialog({
+  open,
+  missingFeatures,
+  warnings,
+  onClose,
+}: BrowserCompatDialogProps) {
+  const [browserInfo, setBrowserInfo] = React.useState({ name: 'Unknown', version: 'Unknown' });
+  const hasErrors = missingFeatures.length > 0;
+
+  // Get browser info only on client side
+  React.useEffect(() => {
+    setBrowserInfo(getBrowserInfo());
+  }, []);
+
+  if (!open) return null;
+
+  return (
+    <Modal open={open} onClose={onClose} title="">
+      <div className="p-6 max-w-md">
+        {/* Header */}
+        <div className="flex items-start justify-between mb-4">
+          <div className="flex items-center gap-2">
+            {hasErrors ? (
+              <>
+                <XCircle className="h-5 w-5 text-destructive" />
+                <h2 className="text-lg font-semibold">Browser Not Supported</h2>
+              </>
+            ) : (
+              <>
+                <AlertTriangle className="h-5 w-5 text-yellow-500" />
+                <h2 className="text-lg font-semibold">Browser Warnings</h2>
+              </>
+            )}
+          </div>
+          <button onClick={onClose} className="text-muted-foreground hover:text-foreground">
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <p className="text-sm text-muted-foreground mb-4">
+          {hasErrors ? (
+            <>Your browser is missing required features to run this audio editor.</>
+          ) : (
+            <>Some features may not work as expected in your browser.</>
+          )}
+        </p>
+
+        <div className="space-y-4">
+          {/* Browser Info */}
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Info className="h-4 w-4" />
+            <span>
+              {browserInfo.name} {browserInfo.version}
+            </span>
+          </div>
+
+          {/* Missing Features */}
+          {missingFeatures.length > 0 && (
+            <div className="space-y-2">
+              <h3 className="text-sm font-semibold text-destructive flex items-center gap-2">
+                <XCircle className="h-4 w-4" />
+                Missing Required Features:
+              </h3>
+              <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground">
+                {missingFeatures.map((feature) => (
+                  <li key={feature}>{feature}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {/* Warnings */}
+          {warnings.length > 0 && (
+            <div className="space-y-2">
+              <h3 className="text-sm font-semibold text-yellow-600 dark:text-yellow-500 flex items-center gap-2">
+                <AlertTriangle className="h-4 w-4" />
+                Warnings:
+              </h3>
+              <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground">
+                {warnings.map((warning) => (
+                  <li key={warning}>{warning}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {/* Recommendations */}
+          {hasErrors && (
+            <div className="bg-muted/50 border border-border rounded-md p-3 space-y-2">
+              <h3 className="text-sm font-semibold">Recommended Browsers:</h3>
+              <ul className="text-sm text-muted-foreground space-y-1">
+                <li>• Chrome 90+ or Edge 90+</li>
+                <li>• Firefox 88+</li>
+                <li>• Safari 14+</li>
+              </ul>
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex justify-end gap-2">
+            {hasErrors ? (
+              <Button onClick={onClose} variant="destructive">
+                Close
+              </Button>
+            ) : (
+              <Button onClick={onClose}>
+                Continue Anyway
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+}

components/dialogs/KeyboardShortcutsDialog.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import * as React from 'react';
+import { Keyboard, X } from 'lucide-react';
+import { Modal } from '@/components/ui/Modal';
+import { Button } from '@/components/ui/Button';
+import { cn } from '@/lib/utils/cn';
+
+export interface KeyboardShortcutsDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+interface ShortcutCategory {
+  name: string;
+  shortcuts: Array<{
+    keys: string[];
+    description: string;
+  }>;
+}
+
+const SHORTCUTS: ShortcutCategory[] = [
+  {
+    name: 'Playback',
+    shortcuts: [
+      { keys: ['Space'], description: 'Play / Pause' },
+      { keys: ['Home'], description: 'Go to Start' },
+      { keys: ['End'], description: 'Go to End' },
+      { keys: ['←'], description: 'Seek Backward' },
+      { keys: ['→'], description: 'Seek Forward' },
+      { keys: ['Ctrl', '←'], description: 'Seek Backward 5s' },
+      { keys: ['Ctrl', '→'], description: 'Seek Forward 5s' },
+    ],
+  },
+  {
+    name: 'Edit',
+    shortcuts: [
+      { keys: ['Ctrl', 'Z'], description: 'Undo' },
+      { keys: ['Ctrl', 'Shift', 'Z'], description: 'Redo' },
+      { keys: ['Ctrl', 'X'], description: 'Cut' },
+      { keys: ['Ctrl', 'C'], description: 'Copy' },
+      { keys: ['Ctrl', 'V'], description: 'Paste' },
+      { keys: ['Delete'], description: 'Delete Selection' },
+      { keys: ['Ctrl', 'D'], description: 'Duplicate' },
+      { keys: ['Ctrl', 'A'], description: 'Select All' },
+    ],
+  },
+  {
+    name: 'View',
+    shortcuts: [
+      { keys: ['Ctrl', '+'], description: 'Zoom In' },
+      { keys: ['Ctrl', '-'], description: 'Zoom Out' },
+      { keys: ['Ctrl', '0'], description: 'Fit to View' },
+    ],
+  },
+  {
+    name: 'File',
+    shortcuts: [
+      { keys: ['Ctrl', 'S'], description: 'Save Project' },
+      { keys: ['Ctrl', 'K'], description: 'Open Command Palette' },
+    ],
+  },
+];
+
+function KeyboardKey({ keyName }: { keyName: string }) {
+  return (
+    <kbd className="px-2 py-1 text-xs font-semibold bg-muted border border-border rounded shadow-sm min-w-[2rem] text-center inline-block">
+      {keyName}
+    </kbd>
+  );
+}
+
+export function KeyboardShortcutsDialog({ open, onClose }: KeyboardShortcutsDialogProps) {
+  if (!open) return null;
+
+  return (
+    <Modal open={open} onClose={onClose} title="">
+      <div className="p-6 max-w-2xl">
+        {/* Header */}
+        <div className="flex items-start justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <Keyboard className="h-6 w-6 text-primary" />
+            <h2 className="text-xl font-semibold">Keyboard Shortcuts</h2>
+          </div>
+          <button onClick={onClose} className="text-muted-foreground hover:text-foreground">
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Shortcuts Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {SHORTCUTS.map((category) => (
+            <div key={category.name} className="space-y-3">
+              <h3 className="text-sm font-semibold text-primary border-b border-border pb-2">
+                {category.name}
+              </h3>
+              <div className="space-y-2">
+                {category.shortcuts.map((shortcut, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center justify-between gap-4 py-1.5"
+                  >
+                    <span className="text-sm text-foreground flex-1">
+                      {shortcut.description}
+                    </span>
+                    <div className="flex items-center gap-1 flex-shrink-0">
+                      {shortcut.keys.map((key, keyIndex) => (
+                        <React.Fragment key={keyIndex}>
+                          {keyIndex > 0 && (
+                            <span className="text-muted-foreground text-xs mx-0.5">+</span>
+                          )}
+                          <KeyboardKey keyName={key} />
+                        </React.Fragment>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Footer */}
+        <div className="mt-6 pt-4 border-t border-border">
+          <p className="text-xs text-muted-foreground text-center">
+            Press <KeyboardKey keyName="Ctrl" /> + <KeyboardKey keyName="K" /> to open the
+            command palette and search for more actions
+          </p>
+        </div>
+
+        {/* Close Button */}
+        <div className="mt-6 flex justify-end">
+          <Button onClick={onClose} variant="default">
+            Close
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}

components/dialogs/MemoryWarningDialog.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import * as React from 'react';
+import { AlertTriangle, Info, X } from 'lucide-react';
+import { Modal } from '@/components/ui/Modal';
+import { Button } from '@/components/ui/Button';
+import { formatMemorySize } from '@/lib/utils/memory-limits';
+
+interface MemoryWarningDialogProps {
+  open: boolean;
+  estimatedMemoryMB: number;
+  availableMemoryMB?: number;
+  warning: string;
+  fileName?: string;
+  onContinue: () => void;
+  onCancel: () => void;
+}
+
+export function MemoryWarningDialog({
+  open,
+  estimatedMemoryMB,
+  availableMemoryMB,
+  warning,
+  fileName,
+  onContinue,
+  onCancel,
+}: MemoryWarningDialogProps) {
+  if (!open) return null;
+
+  const estimatedBytes = estimatedMemoryMB * 1024 * 1024;
+  const availableBytes = availableMemoryMB ? availableMemoryMB * 1024 * 1024 : undefined;
+
+  return (
+    <Modal open={open} onClose={onCancel} title="">
+      <div className="p-6 max-w-md">
+        {/* Header */}
+        <div className="flex items-start justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <AlertTriangle className="h-5 w-5 text-yellow-500" />
+            <h2 className="text-lg font-semibold">Memory Warning</h2>
+          </div>
+          <button onClick={onCancel} className="text-muted-foreground hover:text-foreground">
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <p className="text-sm text-muted-foreground mb-4">
+          {warning}
+        </p>
+
+        <div className="space-y-4">
+          {/* File Info */}
+          {fileName && (
+            <div className="flex items-center gap-2 text-sm">
+              <Info className="h-4 w-4 text-muted-foreground" />
+              <span className="font-medium">File:</span>
+              <span className="text-muted-foreground truncate">{fileName}</span>
+            </div>
+          )}
+
+          {/* Memory Details */}
+          <div className="bg-muted/50 border border-border rounded-md p-3 space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">Estimated Memory:</span>
+              <span className="font-medium">{formatMemorySize(estimatedBytes)}</span>
+            </div>
+            {availableBytes && (
+              <div className="flex justify-between text-sm">
+                <span className="text-muted-foreground">Available Memory:</span>
+                <span className="font-medium">{formatMemorySize(availableBytes)}</span>
+              </div>
+            )}
+          </div>
+
+          {/* Warning Message */}
+          <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-md p-3">
+            <p className="text-sm text-yellow-700 dark:text-yellow-400">
+              <strong>Note:</strong> Loading large files may cause performance issues or browser crashes,
+              especially on devices with limited memory. Consider:
+            </p>
+            <ul className="mt-2 text-sm text-yellow-700 dark:text-yellow-400 space-y-1 list-disc list-inside">
+              <li>Closing other browser tabs</li>
+              <li>Using a shorter audio file</li>
+              <li>Splitting large files into smaller segments</li>
+            </ul>
+          </div>
+
+          {/* Actions */}
+          <div className="flex justify-end gap-2">
+            <Button onClick={onCancel} variant="outline">
+              Cancel
+            </Button>
+            <Button onClick={onContinue} variant="default">
+              Continue Anyway
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+}

components/dialogs/UnsupportedFormatDialog.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import * as React from 'react';
+import { AlertCircle, FileQuestion, X } from 'lucide-react';
+import { Modal } from '@/components/ui/Modal';
+import { Button } from '@/components/ui/Button';
+
+export interface UnsupportedFormatDialogProps {
+  open: boolean;
+  fileName: string;
+  fileType: string;
+  onClose: () => void;
+}
+
+const SUPPORTED_FORMATS = [
+  { extension: 'WAV', mimeType: 'audio/wav', description: 'Lossless, widely supported' },
+  { extension: 'MP3', mimeType: 'audio/mpeg', description: 'Compressed, universal support' },
+  { extension: 'OGG', mimeType: 'audio/ogg', description: 'Free, open format' },
+  { extension: 'FLAC', mimeType: 'audio/flac', description: 'Lossless compression' },
+  { extension: 'M4A/AAC', mimeType: 'audio/aac', description: 'Apple audio format' },
+  { extension: 'AIFF', mimeType: 'audio/aiff', description: 'Apple lossless format' },
+  { extension: 'WebM', mimeType: 'audio/webm', description: 'Modern web format' },
+];
+
+export function UnsupportedFormatDialog({
+  open,
+  fileName,
+  fileType,
+  onClose,
+}: UnsupportedFormatDialogProps) {
+  if (!open) return null;
+
+  return (
+    <Modal open={open} onClose={onClose} title="">
+      <div className="p-6 max-w-lg">
+        {/* Header */}
+        <div className="flex items-start justify-between mb-4">
+          <div className="flex items-center gap-3">
+            <FileQuestion className="h-6 w-6 text-yellow-500" />
+            <h2 className="text-lg font-semibold">Unsupported File Format</h2>
+          </div>
+          <button onClick={onClose} className="text-muted-foreground hover:text-foreground">
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        {/* Error Message */}
+        <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-md p-4 mb-4">
+          <div className="flex items-start gap-2">
+            <AlertCircle className="h-4 w-4 text-yellow-600 dark:text-yellow-400 mt-0.5 flex-shrink-0" />
+            <div className="flex-1">
+              <p className="text-sm text-yellow-800 dark:text-yellow-200 font-medium mb-1">
+                Cannot open this file
+              </p>
+              <p className="text-sm text-yellow-700 dark:text-yellow-300">
+                <strong>{fileName}</strong>
+                {fileType && (
+                  <span className="text-muted-foreground"> ({fileType})</span>
+                )}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Supported Formats */}
+        <div className="mb-6">
+          <h3 className="text-sm font-semibold mb-3">Supported Audio Formats:</h3>
+          <div className="grid grid-cols-1 gap-2">
+            {SUPPORTED_FORMATS.map((format) => (
+              <div
+                key={format.extension}
+                className="flex items-center justify-between gap-4 p-2 rounded bg-muted/30 border border-border/50"
+              >
+                <div className="flex items-center gap-3">
+                  <span className="text-sm font-mono font-semibold text-primary min-w-[80px]">
+                    {format.extension}
+                  </span>
+                  <span className="text-xs text-muted-foreground">
+                    {format.description}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Recommendations */}
+        <div className="bg-muted/50 border border-border rounded-md p-4 mb-4">
+          <h4 className="text-sm font-semibold mb-2">How to fix this:</h4>
+          <ul className="text-sm text-muted-foreground space-y-2 list-disc list-inside">
+            <li>Convert your audio file to a supported format (WAV or MP3 recommended)</li>
+            <li>Use a free audio converter like Audacity, FFmpeg, or online converters</li>
+            <li>Check that the file isn't corrupted or incomplete</li>
+          </ul>
+        </div>
+
+        {/* Close Button */}
+        <div className="flex justify-end">
+          <Button onClick={onClose} variant="default">
+            Got it
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}