Make calls playable in the same window

drb-frontend/components/CallRow.tsx

@@ -32,7 +32,7 @@ export function CallRow({ call, systemName, isAdmin }: Props) {
   const [saving, setSaving] = useState(false);
   const [saveError, setSaveError] = useState<string | null>(null);
   const isActive = call.status === "active";
-  const hasDetails = call.transcript || call.transcript_corrected || (call.tags && call.tags.length > 0) || call.incident_id;
+  const hasDetails = call.transcript || call.transcript_corrected || (call.tags && call.tags.length > 0) || call.incident_id || call.audio_url;
   const displayTranscript = (!showOriginal && call.transcript_corrected) ? call.transcript_corrected : call.transcript;
   const hasBoth = !!(call.transcript && call.transcript_corrected);
   const hasSegments = call.segments && call.segments.length > 1;
@@ -82,19 +82,11 @@ export function CallRow({ call, systemName, isAdmin }: Props) {
             <span className="text-gray-500">{duration(call.started_at, call.ended_at)}</span>
           )}
         </td>
-        <td className="px-4 py-2">
+        <td className="px-4 py-2 text-xs">
           {call.audio_url ? (
-            <a
-              href={call.audio_url}
-              target="_blank"
-              rel="noopener noreferrer"
-              onClick={(e) => e.stopPropagation()}
-              className="text-blue-400 hover:text-blue-300 text-xs"
-            >
-              audio
-            </a>
+            <span className="text-blue-400">▶</span>
           ) : (
-            <span className="text-gray-700 text-xs">—</span>
+            <span className="text-gray-700">—</span>
           )}
         </td>
         <td className="px-4 py-2 text-gray-600 text-xs">
@@ -105,6 +97,16 @@ export function CallRow({ call, systemName, isAdmin }: Props) {
       {expanded && hasDetails && (
         <tr className="bg-gray-900/60 border-b border-gray-800">
           <td colSpan={7} className="px-6 py-3 space-y-2">
+            {/* Audio player */}
+            {call.audio_url && (
+              <audio
+                controls
+                src={call.audio_url}
+                className="w-full max-w-sm h-8"
+                onClick={(e) => e.stopPropagation()}
+              />
+            )}
+
             {/* Tags */}
             {call.tags && call.tags.length > 0 && (
               <div className="flex flex-wrap gap-1">