feat(electron): recording popup ux (#11403)

fix AF-2444, AF-2443

packages/frontend/apps/electron-renderer/src/popup/recording/styles.css.ts

@@ -9,6 +9,7 @@ export const root = style({
   display: 'flex',
   gap: 4,
   alignItems: 'center',
+  ['WebkitAppRegion' as string]: 'drag',
 });
 
 export const affineIcon = style({

packages/frontend/apps/electron/src/main/windows-manager/popup.ts

@@ -70,13 +70,11 @@ abstract class PopupWindow {
 
   async build(): Promise<BrowserWindow> {
     const browserWindow = new BrowserWindow({
-      ...this.windowOptions,
       resizable: false,
       minimizable: false,
       maximizable: false,
       closable: false,
       alwaysOnTop: true,
-      focusable: false,
       hiddenInMissionControl: true,
       movable: false,
       titleBarStyle: 'hidden',
@@ -84,6 +82,7 @@ abstract class PopupWindow {
       backgroundColor: 'transparent',
       visualEffectState: 'active',
       vibrancy: 'under-window',
+      ...this.windowOptions,
       webPreferences: {
         ...this.windowOptions.webPreferences,
         webgl: true,
@@ -99,6 +98,9 @@ abstract class PopupWindow {
 
     // required to make the window transparent
     browserWindow.setBackgroundColor('#00000000');
+    browserWindow.setVisibleOnAllWorkspaces(true, {
+      visibleOnFullScreen: true,
+    });
 
     browserWindow.loadURL(popupViewUrl).catch(err => logger.error(err));
     browserWindow.on('ready-to-show', () => {
@@ -199,6 +201,7 @@ class RecordingPopupWindow extends PopupWindow {
   windowOptions: Partial<BrowserWindowConstructorOptions> = {
     width: RECORDING_SIZE[0],
     height: RECORDING_SIZE[1],
+    movable: true,
   };
 }
 

packages/frontend/apps/electron/src/main/windows-manager/tab-views.ts

@@ -756,7 +756,7 @@ export class WebContentViewsManager {
       }, 100);
     };
 
-    app.on('browser-window-focus', () => {
+    this.mainWindow?.on('focus', () => {
       focusActiveView();
     });
 

packages/frontend/component/src/ui/lottie/animated-play-icon.tsx

@@ -25,6 +25,14 @@ const PlayAndPauseIcon = ({
   const lottieRef: LottieRef = useRef(null);
   const prevStateRef = useRef(state);
 
+  useEffect(() => {
+    if (!lottieRef.current) return;
+    const lottie = lottieRef.current;
+    if (prevStateRef.current === 'pause') {
+      lottie.goToAndStop(100, true);
+    }
+  }, []);
+
   useEffect(() => {
     if (!lottieRef.current) return;
     const lottie = lottieRef.current;