fix(native): split application & tappable application (#10491)

A listening tappable app's info should inherit from its group process's name/icon. However the group process may not be listed as a tappable application.

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

@@ -15,14 +15,14 @@ export function AppItem({ app, recordings }: AppItemProps) {
   const appName = app.rootApp.name || '';
   const bundleId = app.rootApp.bundleIdentifier || '';
   const firstLetter = appName.charAt(0).toUpperCase();
-  const isRunning = app.apps.some(a => a.running);
+  const isRunning = app.apps.some(a => a.isRunning);
 
   const recording = recordings?.find((r: RecordingStatus) =>
     app.apps.some(a => a.processId === r.processId)
   );
 
   const handleRecordClick = React.useCallback(() => {
-    const recordingApp = app.apps.find(a => a.running);
+    const recordingApp = app.apps.find(a => a.isRunning);
     if (!recordingApp) {
       return;
     }

packages/frontend/media-capture-playground/web/components/app-list.tsx

@@ -24,12 +24,13 @@ export function AppList() {
     });
     socket.on('apps:state-changed', data => {
       const index = apps.findIndex(a => a.processId === data.processId);
+      console.log('apps:state-changed', data, index);
       if (index !== -1) {
         next(
           null,
           apps.toSpliced(index, 1, {
             ...apps[index],
-            running: data.running,
+            isRunning: data.isRunning,
           })
         );
       }
@@ -83,10 +84,10 @@ export function AppList() {
   }, [apps]);
 
   const runningApps = (appGroups || []).filter(app =>
-    app.apps.some(a => a.running)
+    app.apps.some(a => a.isRunning)
   );
   const notRunningApps = (appGroups || []).filter(
-    app => !app.apps.some(a => a.running)
+    app => !app.apps.some(a => a.isRunning)
   );
 
   return (