feat(electron): recording popups (#11016)

Added a recording popup UI for the audio recording feature in the desktop app, improving the user experience when capturing audio from applications.

### What changed?

- Created a new popup window system for displaying recording controls
- Added a dedicated recording UI with start/stop controls and status indicators
- Moved audio encoding logic from the main app to a dedicated module
- Implemented smooth animations for popup appearance/disappearance
- Updated the recording workflow to show visual feedback during recording process
- Added internationalization support for recording-related text
- Modified the recording status flow to include new states: new, recording, stopped, ready

fix AF-2340

packages/frontend/apps/electron/src/main/application-menu/create.ts

@@ -8,13 +8,14 @@ import {
   addTab,
   initAndShowMainWindow,
   reloadView,
-  showDevTools,
   showMainWindow,
   switchTab,
   switchToNextTab,
   switchToPreviousTab,
   undoCloseTab,
+  WebContentViewsManager,
 } from '../windows-manager';
+import { popupManager } from '../windows-manager/popup';
 import { WorkerManager } from '../worker/pool';
 import { applicationMenuSubjects } from './subject';
 
@@ -111,21 +112,55 @@ export function createApplicationMenu() {
           label: 'Open devtools',
           accelerator: isMac ? 'Cmd+Option+I' : 'Ctrl+Shift+I',
           click: () => {
-            showDevTools();
-          },
-        },
-        {
-          label: 'Open worker devtools',
-          click: () => {
+            const workerContents = Array.from(
+              WorkerManager.instance.workers.values()
+            ).map(
+              worker => [worker.key, worker.browserWindow.webContents] as const
+            );
+
+            const tabs = Array.from(
+              WebContentViewsManager.instance.tabViewsMap
+            ).map(view => {
+              const isActive = WebContentViewsManager.instance.isActiveTab(
+                view[0]
+              );
+              return [
+                view[0] + (isActive ? ' (active)' : ''),
+                view[1].webContents,
+              ] as const;
+            });
+
+            const popups = Array.from(popupManager.popupWindows$.value.values())
+              .filter(popup => popup.browserWindow)
+              .map(popup => {
+                // oxlint-disable-next-line no-non-null-assertion
+                return [popup.type, popup.browserWindow!.webContents] as const;
+              });
+
+            const allWebContents = [
+              ['tabs', tabs],
+              ['workers', workerContents],
+              ['popups', popups],
+            ] as const;
+
             Menu.buildFromTemplate(
-              Array.from(WorkerManager.instance.workers.values()).map(item => ({
-                label: `${item.key}`,
-                click: () => {
-                  item.browserWindow.webContents.openDevTools({
-                    mode: 'undocked',
-                  });
-                },
-              }))
+              allWebContents.flatMap(([type, contents]) => {
+                return [
+                  {
+                    label: type,
+                    enabled: false,
+                  },
+                  ...contents.map(([id, webContents]) => ({
+                    label: id,
+                    click: () => {
+                      webContents.openDevTools({
+                        mode: 'undocked',
+                      });
+                    },
+                  })),
+                  { type: 'separator' },
+                ];
+              })
             ).popup();
           },
         },