feat(electron): create recording through tray (#10526)

- added tray menu for controlling recording status
- recording watcher for monitoring system audio input events

packages/frontend/media-capture-playground/web/components/global-record-button.tsx

@@ -0,0 +1,70 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { socket } from '../utils';
+
+export function GlobalRecordButton() {
+  const [isRecording, setIsRecording] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    function handleRecordingStatus(data: {
+      recordings: Array<{ processId: number }>;
+    }) {
+      // Global recording uses processId -1
+      setIsRecording(data.recordings.some(r => r.processId === -1));
+    }
+
+    socket.on('apps:recording', handleRecordingStatus);
+    return () => {
+      socket.off('apps:recording', handleRecordingStatus);
+    };
+  }, []);
+
+  const handleClick = useCallback(() => {
+    setIsLoading(true);
+    const endpoint = isRecording ? '/api/global/stop' : '/api/global/record';
+    fetch(endpoint, { method: 'POST' })
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Failed to toggle global recording');
+        }
+      })
+      .catch(error => {
+        console.error('Error toggling global recording:', error);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, [isRecording]);
+
+  return (
+    <button
+      onClick={handleClick}
+      disabled={isLoading}
+      className={`
+        px-4 py-2 rounded-lg font-medium text-sm
+        transition-colors duration-200
+        ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}
+        ${
+          isRecording
+            ? 'bg-red-100 text-red-700 hover:bg-red-200'
+            : 'bg-blue-100 text-blue-700 hover:bg-blue-200'
+        }
+      `}
+    >
+      <div className="flex items-center gap-2">
+        {isRecording ? (
+          <>
+            <div className="w-2 h-2 rounded-full bg-red-500 animate-pulse" />
+            Stop Global Recording
+          </>
+        ) : (
+          <>
+            <div className="w-2 h-2 rounded-full bg-blue-500" />
+            Record System Audio
+          </>
+        )}
+      </div>
+    </button>
+  );
+}

packages/frontend/media-capture-playground/web/components/saved-recording-item.tsx

@@ -378,11 +378,12 @@ function RecordingHeader({
   transcriptionError: string | null;
 }): ReactElement {
   const [imgError, setImgError] = React.useState(false);
+  const isGlobalRecording = metadata?.isGlobal;
 
   return (
     <div className="flex items-start space-x-4 p-4 bg-gray-50/30">
       <div className="relative w-12 h-12 flex-shrink-0">
-        {!imgError ? (
+        {!imgError && !isGlobalRecording ? (
           <img
             src={`/api/recordings/${fileName}/icon.png`}
             alt={metadata?.appName || 'Unknown Application'}
@@ -401,7 +402,12 @@ function RecordingHeader({
             <span className="text-gray-900 font-semibold text-base truncate">
               {metadata?.appName || 'Unknown Application'}
             </span>
-            <span className="text-xs px-2 py-0.5 bg-blue-50 rounded-full text-blue-600 font-medium border border-blue-100">
+            {isGlobalRecording && (
+              <span className="text-xs px-2 py-0.5 bg-blue-50 rounded-full text-blue-600 font-medium border border-blue-100">
+                System Audio
+              </span>
+            )}
+            <span className="text-xs px-2 py-0.5 bg-gray-50 rounded-full text-gray-600 font-medium border border-gray-100">
               {duration}
             </span>
           </div>