Improve recordings list sorting and live show-page status updates.

Add sortable columns with a fixed status width, and keep the show page in sync via Echo, polling, and Alpine hydrate while transcription runs.

app/Livewire/Recordings/Show.php

@@ -7,6 +7,7 @@ use Flux\Flux;
 use Illuminate\Contracts\View\View;
 use Illuminate\Support\Facades\Gate;
 use Livewire\Attributes\Layout;
+use Livewire\Attributes\On;
 use Livewire\Component;
 
 #[Layout('layouts.app')]
@@ -14,6 +15,8 @@ class Show extends Component
 {
     public Recording $recording;
 
+    public int $userId;
+
     public function mount(Recording $recording): void
     {
         Gate::authorize('view', $recording);
@@ -22,6 +25,22 @@ class Show extends Component
         $recording->refresh();
 
         $this->recording = $recording;
+        $this->userId = (int) $recording->user_id;
+    }
+
+    /**
+     * Re-render when this recording broadcasts a status change (same channel as the index).
+     *
+     * @param  array<string, mixed>  $event
+     */
+    #[On('echo-private:user.{userId}.recordings,.RecordingTranscriptionUpdated')]
+    public function onTranscriptionUpdated(array $event = []): void
+    {
+        if (isset($event['id']) && (int) $event['id'] !== (int) $this->recording->id) {
+            return;
+        }
+
+        $this->recording->refresh();
     }
 
     public function startTranscription(): void
@@ -64,6 +83,10 @@ class Show extends Component
 
     public function render(): View
     {
+        if ($this->recording->isTranscribing()) {
+            $this->recording->refresh();
+        }
+
         return view('livewire.recordings.show')
             ->title($this->recording->title);
     }