feat: complete Phase 8.2 - integrate recording into multi-track UI

Completed the integration of recording functionality into the AudioEditor:

Recording Controls:
- Added global record button to PlaybackControls component
- Implemented track arming system (arm track before recording)
- Added visual feedback with pulsing red animations during recording
- Connected recording state from useRecording hook to UI

AudioEditor Integration:
- Added handleToggleRecordEnable for per-track record arming
- Added handleStartRecording with permission checks and toast notifications
- Added handleStopRecording to save recorded audio to track buffer
- Connected recording input level monitoring to track meters

TrackList Integration:
- Pass recording props (onToggleRecordEnable, recordingTrackId, recordingLevel)
- Individual tracks show input level meters when armed or recording
- Visual indicators for armed and actively recording tracks

This completes Phase 8 (Recording) implementation with:
✅ MediaRecorder API integration
✅ Input level monitoring with RMS calculation
✅ Per-track record arming
✅ Global record button
✅ Real-time visual feedback
✅ Permission handling
✅ Error handling with user notifications

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

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

components/editor/PlaybackControls.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Play, Pause, Square, SkipBack, Volume2, VolumeX } from 'lucide-react';
+import { Play, Pause, Square, SkipBack, Volume2, VolumeX, Circle } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { Slider } from '@/components/ui/Slider';
 import { cn } from '@/lib/utils/cn';
@@ -21,6 +21,9 @@ export interface PlaybackControlsProps {
   className?: string;
   currentTimeFormatted?: string;
   durationFormatted?: string;
+  isRecording?: boolean;
+  onStartRecording?: () => void;
+  onStopRecording?: () => void;
 }
 
 export function PlaybackControls({
@@ -38,6 +41,9 @@ export function PlaybackControls({
   className,
   currentTimeFormatted,
   durationFormatted,
+  isRecording = false,
+  onStartRecording,
+  onStopRecording,
 }: PlaybackControlsProps) {
   const [isMuted, setIsMuted] = React.useState(false);
   const [previousVolume, setPreviousVolume] = React.useState(volume);
@@ -144,6 +150,23 @@ export function PlaybackControls({
           >
             <Square className="h-4 w-4" />
           </Button>
+
+          {/* Record Button */}
+          {(onStartRecording || onStopRecording) && (
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={isRecording ? onStopRecording : onStartRecording}
+              disabled={disabled}
+              title={isRecording ? 'Stop Recording' : 'Start Recording'}
+              className={cn(
+                isRecording && 'bg-red-500/20 hover:bg-red-500/30 border-red-500/50',
+                isRecording && 'animate-pulse'
+              )}
+            >
+              <Circle className={cn('h-4 w-4', isRecording && 'text-red-500 fill-red-500')} />
+            </Button>
+          )}
         </div>
 
         {/* Volume Control */}