From 2b9895de70855bc0ab5791001fd00f900e1633bc Mon Sep 17 00:00:00 2001
From: Wurielle <noahfenghom@gmail.com>
Date: Sun, 12 Jan 2025 14:54:39 +0100
Subject: [PATCH] feat: add messenger reposition within overlay

---
 apps/app/src/electron/events/main.ts          |  42 +-
 apps/app/src/electron/events/renderer.ts      |  50 +-
 apps/app/src/electron/game-overlay.ts         |  24 +-
 apps/app/src/electron/renderer.ts             |   8 +
 .../messenger/components/NvMessenger.vue      |  84 +--
 .../messenger/electron/overlay-window.ts      |  12 +-
 .../src/teams/messenger/electron/window.ts    |  92 ++--
 .../electron-messenger-window/index.ts        | 482 +++++++++---------
 apps/app/src/teams/overlay/electron/window.ts |  14 +-
 .../teams/speech-worker/electron/window.ts    |  18 +-
 10 files changed, 447 insertions(+), 379 deletions(-)

diff --git a/apps/app/src/electron/events/main.ts b/apps/app/src/electron/events/main.ts
index 44063542e..5de93a31e 100644
--- a/apps/app/src/electron/events/main.ts
+++ b/apps/app/src/electron/events/main.ts
@@ -2,41 +2,45 @@ import { processes } from '@/types/electron'
 import { ipcMain } from 'electron-postman'
 
 export const onIPCProcessError = (callback: (error: Error, process: string) => any) => {
-    processes.forEach((process) => {
-        ipcMain.on(process, 'error', (payload: { name: string; message: string }) =>
-            callback(payload, process),
-        )
-    })
+  processes.forEach((process) => {
+    ipcMain.on(process, 'error', (payload: { name: string; message: string }) =>
+      callback(payload, process),
+    )
+  })
 }
 
 export const onIPCGameOverlayStartIntercept = (callback: () => any) => {
-    processes.forEach((process) => {
-        ipcMain.on(process, 'game-overlay-start-intercept', () =>
-            callback(),
-        )
-    })
+  processes.forEach((process) => {
+    ipcMain.on(process, 'game-overlay-start-intercept', () =>
+      callback(),
+    )
+  })
 }
 
 export const onIPCGameOverlayStopIntercept = (callback: () => any) => {
-    processes.forEach((process) => {
-        ipcMain.on(process, 'game-overlay-stop-intercept', () =>
-            callback(),
-        )
-    })
+  processes.forEach((process) => {
+    ipcMain.on(process, 'game-overlay-stop-intercept', () =>
+      callback(),
+    )
+  })
 }
 
 export const emitIPCCancelCurrentMessage = () => {
-    ipcMain.sendTo('speech-worker', 'cancel-current-message')
+  ipcMain.sendTo('speech-worker', 'cancel-current-message')
 }
 
 export const emitIPCCancelAllMessages = () => {
-    ipcMain.sendTo('speech-worker', 'cancel-all-messages')
+  ipcMain.sendTo('speech-worker', 'cancel-all-messages')
 }
 
 export const emitIPCOverlayInputCharacter = (character: string) => {
-    ipcMain.sendTo('overlay', 'overlay-input-character', character)
+  ipcMain.sendTo('overlay', 'overlay-input-character', character)
 }
 
 export const emitIPCOverlayInputCommand = (command: string, args: any[] = []) => {
-    ipcMain.sendTo('overlay', 'overlay-input-command', [command, ...args])
+  ipcMain.sendTo('overlay', 'overlay-input-command', [command, ...args])
+}
+
+export const emitIPCGameOverlayResize = (size: { width: number, height: number }) => {
+  ipcMain.sendTo('messenger-game-overlay', 'resize', size)
 }
diff --git a/apps/app/src/electron/events/renderer.ts b/apps/app/src/electron/events/renderer.ts
index 428c3026a..9bdf97db3 100644
--- a/apps/app/src/electron/events/renderer.ts
+++ b/apps/app/src/electron/events/renderer.ts
@@ -4,52 +4,58 @@ import { IzabelaMessage } from '@/modules/izabela/types'
 const { ipc } = window
 
 export const emitIPCProcessError = (payload: { name: string; message: string }) => {
-    processes.forEach((process) => {
-        ipc.sendTo(process, 'error', payload)
-    })
+  processes.forEach((process) => {
+    ipc.sendTo(process, 'error', payload)
+  })
 }
 
 export const emitIPCGameOverlayStartIntercept = () => {
-    ipc.sendTo(mainProcess, 'game-overlay-start-intercept')
+  ipc.sendTo(mainProcess, 'game-overlay-start-intercept')
 }
 
 export const emitIPCGameOverlayStopIntercept = () => {
-    ipc.sendTo(mainProcess, 'game-overlay-stop-intercept')
+  ipc.sendTo(mainProcess, 'game-overlay-stop-intercept')
 }
 
 type IPCSayPayload = string | IzabelaMessage
 
 export const onIPCSay = (callback: (payload: IPCSayPayload) => any) => {
-    processes.forEach((process) => {
-        ipc.on(process, 'say', callback)
-    })
+  processes.forEach((process) => {
+    ipc.on(process, 'say', callback)
+  })
 }
 
 export const emitIPCSay = (payload: IPCSayPayload) => {
-    console.log(ipc, payload)
-    ipc.sendTo('speech-worker', 'say', payload)
+  console.log(ipc, payload)
+  ipc.sendTo('speech-worker', 'say', payload)
 }
 
 export const onIPCCancelCurrentMessage = (callback: () => any) => {
-    processes.forEach((process) => {
-        ipc.on(process, 'cancel-current-message', callback)
-    })
+  processes.forEach((process) => {
+    ipc.on(process, 'cancel-current-message', callback)
+  })
 }
 
 export const onIPCCancelAllMessages = (callback: () => void) => {
-    processes.forEach((process) => {
-        ipc.on(process, 'cancel-all-messages', callback)
-    })
+  processes.forEach((process) => {
+    ipc.on(process, 'cancel-all-messages', callback)
+  })
 }
 
 export const onIPCOverlayInputCharacter = (callback: (key: any) => void) => {
-    processes.forEach((process) => {
-        ipc.on(process, 'overlay-input-character', callback)
-    })
+  processes.forEach((process) => {
+    ipc.on(process, 'overlay-input-character', callback)
+  })
 }
 
 export const onIPCOverlayInputCommand = (callback: (args: any[]) => void) => {
-    processes.forEach((process) => {
-        ipc.on(process, 'overlay-input-command', callback)
-    })
+  processes.forEach((process) => {
+    ipc.on(process, 'overlay-input-command', callback)
+  })
+}
+
+export const onIPCGameOverlayResize = (callback: (size: { width: number, height: number }) => void) => {
+  processes.forEach((process) => {
+    ipc.on(process, 'resize', callback)
+  })
 }
diff --git a/apps/app/src/electron/game-overlay.ts b/apps/app/src/electron/game-overlay.ts
index 351834852..820a955dc 100644
--- a/apps/app/src/electron/game-overlay.ts
+++ b/apps/app/src/electron/game-overlay.ts
@@ -1,5 +1,6 @@
 import { app, BrowserWindow, screen, shell } from 'electron'
 import {
+  emitIPCGameOverlayResize,
   onIPCGameOverlayStartIntercept,
   onIPCGameOverlayStopIntercept,
 } from '@/electron/events/main.ts'
@@ -46,12 +47,12 @@ class GameOverlay {
     ])
 
     this.Overlay!.setEventCallback((event: string, payload: any) => {
-      if (event === 'graphics.window.event.resize') {
-        const focusWin = this.windows.get('messenger-game-overlay')
-        if (focusWin) {
-          const { width, height } = payload
-          focusWin.setSize(width, height)
-        }
+      if (['graphics.window.event.resize', 'graphics.window'].includes(event)) {
+        const { width, height } = payload
+        emitIPCGameOverlayResize({
+          width,
+          height,
+        })
       }
       if (event === 'game.input') {
         const window = BrowserWindow.fromId(payload.windowId)
@@ -69,19 +70,17 @@ class GameOverlay {
       if (event === 'game.input.intercept' && payload.intercepting) {
         const focusWin = this.windows.get('messenger-game-overlay')
         if (focusWin) {
-          console.log(payload)
           focusWin.blurWebView()
           focusWin.focusOnWebView()
           const { top, left, right, bottom } = Window.getByPid(
             payload.pid,
           ).getDimensions()
-          const width = right - left
-          const height = bottom - top
-          // focusWin.setSize(width, height)
+          const width = right-left
+          const height = bottom-top
 
           mouse.getPosition().then(async (initialPosition) => {
             await mouse.setPosition(
-              new Point(left + width / 2, top + height / 2),
+              new Point(left+width / 2, top+height / 2),
             )
             await mouse.leftClick()
             await mouse.setPosition(initialPosition)
@@ -145,7 +144,6 @@ class GameOverlay {
     })
 
     window.on('resize', () => {
-      console.log(`${name} resizing`)
       this.Overlay!.sendWindowBounds(window.id, {
         rect: {
           x: window.getBounds().x,
@@ -224,7 +222,7 @@ class GameOverlay {
     for (const window of this.Overlay.getTopWindows()) {
       if (window.processId === pid) {
         console.log(
-          `--------------------\n injecting ${JSON.stringify(window)}`,
+          `--------------------\n injecting ${ JSON.stringify(window) }`,
         )
         this.Overlay.injectProcess(window)
       }
diff --git a/apps/app/src/electron/renderer.ts b/apps/app/src/electron/renderer.ts
index 3d03fe980..d9c45c0fa 100644
--- a/apps/app/src/electron/renderer.ts
+++ b/apps/app/src/electron/renderer.ts
@@ -1 +1,9 @@
 import '@/modules/electron-log/renderer'
+
+import { onIPCGameOverlayResize } from '@/electron/events/renderer.ts'
+
+onIPCGameOverlayResize(({ width, height }) => {
+  const appEl = document.getElementById('app')
+  appEl.style.width = width+'px'
+  appEl.style.height = height+'px'
+})
\ No newline at end of file
diff --git a/apps/app/src/teams/messenger/components/NvMessenger.vue b/apps/app/src/teams/messenger/components/NvMessenger.vue
index ac22f8dfc..748aaf586 100644
--- a/apps/app/src/teams/messenger/components/NvMessenger.vue
+++ b/apps/app/src/teams/messenger/components/NvMessenger.vue
@@ -58,16 +58,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import {
-  ComponentPublicInstance,
-  computed,
-  defineProps,
-  onMounted,
-  provide,
-  ref,
-  unref,
-  watch,
-} from 'vue'
+import { ComponentPublicInstance, computed, defineProps, onMounted, provide, ref, unref, watch } from 'vue'
 import Moveable from 'vue3-moveable'
 import { NvGroup } from '@packages/ui'
 import { RouteLocationRaw, useRouter } from 'vue-router'
@@ -120,7 +111,7 @@ const props = defineProps({
 const messenger = ref()
 
 const moveable = ref()
-const moveableTarget = ref()
+const moveableTarget = ref<ComponentPublicInstance>()
 
 const doc = document
 const settingsPopover = useRouterViewPopover({
@@ -151,20 +142,24 @@ provide('messenger', {
   navigateTo,
   isViewShown,
 })
+const isGameOverlay = new URLSearchParams(window.location.search).has('game-overlay')
+
 const { width: windowWidth, height: windowHeight } = useWindowSize()
+// TODO: refactor to use only app dimensions
+// Note: Game overlay can only be resized using body for now
+const { width: appWidth, height: appHeight } = useElementSize(ref(document.getElementById('app')))
 const viewport = computed(() => ({
-  width: Math.max(
+  width: isGameOverlay ? appWidth.value : Math.max(
     windowWidth.value,
     document.documentElement.clientWidth || 0,
     window.innerWidth || 0,
   ),
-  height: Math.max(
+  height: isGameOverlay ? appHeight.value : Math.max(
     windowHeight.value,
     document.documentElement.clientHeight || 0,
     window.innerHeight || 0,
   ),
 }))
-
 const savePosition = debounce((event: any) => {
   const { width, height, translate, transform } = event
 
@@ -181,7 +176,9 @@ const savePosition = debounce((event: any) => {
 const onDrag = (event: any) => {
   const { target, transform } = event
   target.style.transform = transform
-  savePosition(event)
+  if (!isGameOverlay) {
+    savePosition(event)
+  }
   settingsPopover.update()
 }
 // watch(() => messengerWindowStore.isShown, (isShown) => {
@@ -235,17 +232,17 @@ function convertScreenPosition() {
     const { x: currentXValue, y: currentYValue } = parseTransform(
       props.transform,
     )
-    const currentCenteredXValue = currentXValue + moveableTargetWidth.value / 2
-    const currentCenteredYValue = currentYValue + moveableTargetHeight.value / 2
+    const currentCenteredXValue = currentXValue+moveableTargetWidth.value / 2
+    const currentCenteredYValue = currentYValue+moveableTargetHeight.value / 2
     const previousCenteredXPercentage =
       currentCenteredXValue / previousWindowWidth
     const previousCenteredYPercentage =
       currentCenteredYValue / previousWindowHeight
     const newXValue =
-      currentWindowWidth * previousCenteredXPercentage -
+      currentWindowWidth * previousCenteredXPercentage-
       moveableTargetWidth.value / 2
     const newYValue =
-      currentWindowHeight * previousCenteredYPercentage -
+      currentWindowHeight * previousCenteredYPercentage-
       moveableTargetHeight.value / 2
     if (convertScreenPositionTimeout) clearTimeout(convertScreenPositionTimeout)
     convertScreenPositionTimeout = setTimeout(() => {
@@ -269,6 +266,29 @@ function convertScreenPosition() {
   }
 }
 
+let setGameOverlayMessengerPositionTimeout = null
+
+function setGameOverlayMessengerPosition() {
+  const currentWindowWidth = viewport.value.width
+  const currentWindowHeight = viewport.value.height
+  const newXValue = currentWindowWidth / 2-moveableTargetWidth.value / 2
+  const newYValue = currentWindowHeight-moveableTargetHeight.value
+  if (setGameOverlayMessengerPositionTimeout) clearTimeout(setGameOverlayMessengerPositionTimeout)
+  setGameOverlayMessengerPositionTimeout = setTimeout(() => {
+    if (moveable.value) {
+      moveable.value.request(
+        'draggable',
+        {
+          x: newXValue,
+          y: newYValue,
+        },
+        true,
+      )
+    }
+    setGameOverlayMessengerPositionTimeout = null
+  }, 1000)
+}
+
 useEventListener(
   'resize',
   throttle(() => {
@@ -276,21 +296,27 @@ useEventListener(
   }, 500),
 )
 
+watch([appWidth, appHeight], () => {
+  if (isGameOverlay) {
+    setGameOverlayMessengerPosition()
+  }
+})
+
 onMounted(() => {
   // gsap.set(messenger.value, {
   //   opacity: 0,
   // })
-  const moveableTargetEl = (moveableTarget.value as ComponentPublicInstance)
-    .$el as HTMLDivElement | null
+  const moveableTargetEl = moveableTarget.value
+    ?.$el as HTMLDivElement | null
   if (moveableTargetEl) {
-    if (props.width) moveableTargetEl.style.width = `${props.width}px`
-    if (props.minWidth) moveableTargetEl.style.minWidth = `${props.minWidth}px`
-    if (props.maxWidth) moveableTargetEl.style.maxWidth = `${props.maxWidth}px`
-    if (props.height) moveableTargetEl.style.height = `${props.height}px`
+    if (props.width) moveableTargetEl.style.width = `${ props.width }px`
+    if (props.minWidth) moveableTargetEl.style.minWidth = `${ props.minWidth }px`
+    if (props.maxWidth) moveableTargetEl.style.maxWidth = `${ props.maxWidth }px`
+    if (props.height) moveableTargetEl.style.height = `${ props.height }px`
     if (props.minHeight)
-      moveableTargetEl.style.minHeight = `${props.minHeight}px`
+      moveableTargetEl.style.minHeight = `${ props.minHeight }px`
     if (props.maxHeight)
-      moveableTargetEl.style.maxHeight = `${props.maxHeight}px`
+      moveableTargetEl.style.maxHeight = `${ props.maxHeight }px`
     if (props.transform) moveableTargetEl.style.transform = props.transform
   }
   moveable.value.updateTarget()
@@ -303,8 +329,8 @@ onMounted(() => {
       moveable.value.request(
         'draggable',
         {
-          x: viewport.value.width / 2 - width / 2,
-          y: viewport.value.height - height - 60,
+          x: viewport.value.width / 2-width / 2,
+          y: viewport.value.height-height-60,
         },
         true,
       )
diff --git a/apps/app/src/teams/messenger/electron/overlay-window.ts b/apps/app/src/teams/messenger/electron/overlay-window.ts
index cf44f47aa..7124cec6b 100644
--- a/apps/app/src/teams/messenger/electron/overlay-window.ts
+++ b/apps/app/src/teams/messenger/electron/overlay-window.ts
@@ -10,7 +10,7 @@ const createWindow = async (name: string): Promise<BrowserWindow> => {
   const url =
     (import.meta.env.VITE_DEV_SERVER_URL
       ? path.join(import.meta.env.VITE_DEV_SERVER_URL as string, filePath)
-      : `app://${filePath}`) + '?game-overlay'
+      : `app://${ filePath }`)+'?game-overlay'
   const overlayDebug = import.meta.env.DEV ? false : false
 
   window = gameOverlay.createWindow(name, {
@@ -37,10 +37,16 @@ const createWindow = async (name: string): Promise<BrowserWindow> => {
   window.webContents.setFrameRate(240)
   ipcMain.registerBrowserWindow(name, window)
 
+  window.webContents.once('did-finish-load', () => {
+    if (import.meta.env.DEV) {
+      setTimeout(() => {
+        window.webContents.openDevTools({ mode: 'detach' })
+      }, 300)
+    }
+  })
+
   if (import.meta.env.VITE_DEV_SERVER_URL) {
     await window.loadURL(url)
-    if (import.meta.env.DEV)
-      window.webContents.openDevTools({ mode: 'undocked' })
   } else {
     createProtocol('app')
     window.loadURL(url)
diff --git a/apps/app/src/teams/messenger/electron/window.ts b/apps/app/src/teams/messenger/electron/window.ts
index 14ea7392f..c7bcfe9de 100644
--- a/apps/app/src/teams/messenger/electron/window.ts
+++ b/apps/app/src/teams/messenger/electron/window.ts
@@ -6,52 +6,58 @@ import electronMessengerWindow from '@/teams/messenger/modules/electron-messenge
 
 let window: BrowserWindow
 const createWindow = async (name: string): Promise<BrowserWindow> => {
-    window = new BrowserWindow({
-        show: false,
-        fullscreen: true,
-        transparent: true,
-        frame: false,
-        resizable: false,
-        webPreferences: {
-            preload: path.join(__dirname, 'preload.js'),
-            nodeIntegration: Boolean(
-                Number(import.meta.env.VITE_ELECTRON_NODE_INTEGRATION),
-            ),
-            contextIsolation: !Number(import.meta.env.VITE_ELECTRON_NODE_INTEGRATION),
-            sandbox: false,
-        },
-    })
-
-    {
-        const primaryDisplay = screen.getPrimaryDisplay()
-        window.setBounds(primaryDisplay.bounds)
-
-        // https://github.com/electron/electron/issues/10078#issuecomment-331581160
-        window.setAlwaysOnTop(true, 'screen-saver', 1)
-        window.setVisibleOnAllWorkspaces(true)
-        window.setFullScreenable(false)
-        window.setMenu(null)
+  window = new BrowserWindow({
+    show: false,
+    fullscreen: true,
+    transparent: true,
+    frame: false,
+    resizable: false,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
+      nodeIntegration: Boolean(
+        Number(import.meta.env.VITE_ELECTRON_NODE_INTEGRATION),
+      ),
+      contextIsolation: !Number(import.meta.env.VITE_ELECTRON_NODE_INTEGRATION),
+      sandbox: false,
+    },
+  })
+
+  {
+    const primaryDisplay = screen.getPrimaryDisplay()
+    window.setBounds(primaryDisplay.bounds)
+
+    // https://github.com/electron/electron/issues/10078#issuecomment-331581160
+    window.setAlwaysOnTop(true, 'screen-saver', 1)
+    window.setVisibleOnAllWorkspaces(true)
+    window.setFullScreenable(false)
+    window.setMenu(null)
+  }
+
+  window.once('ready-to-show', () => {
+    electronMessengerWindow.start(window)
+  })
+
+  ipcMain.registerBrowserWindow(name, window)
+
+  const filePath = `./src/teams/${ name }/index.html`
+
+  window.webContents.once('did-finish-load', () => {
+    if (import.meta.env.DEV) {
+      setTimeout(() => {
+        window.webContents.openDevTools({ mode: 'detach' })
+      }, 300)
     }
+  })
 
-    window.once('ready-to-show', () => {
-        electronMessengerWindow.start(window)
-    })
+  const url = import.meta.env.VITE_DEV_SERVER_URL ? path.join(import.meta.env.VITE_DEV_SERVER_URL as string, filePath) : `app://${ filePath }`
+  if (import.meta.env.VITE_DEV_SERVER_URL) {
+    await window.loadURL(url)
+  } else {
+    createProtocol('app')
+    window.loadURL(url)
+  }
 
-    ipcMain.registerBrowserWindow(name, window)
-
-    const filePath = `./src/teams/${ name }/index.html`
-
-    const url = import.meta.env.VITE_DEV_SERVER_URL ? path.join(import.meta.env.VITE_DEV_SERVER_URL as string, filePath) : `app://${ filePath }`
-    if (import.meta.env.VITE_DEV_SERVER_URL) {
-        await window.loadURL(url)
-        if (import.meta.env.DEV)
-            window.webContents.openDevTools({ mode: 'undocked' })
-    } else {
-        createProtocol('app')
-        window.loadURL(url)
-    }
-
-    return window
+  return window
 }
 
 export default createWindow
diff --git a/apps/app/src/teams/messenger/modules/electron-messenger-window/index.ts b/apps/app/src/teams/messenger/modules/electron-messenger-window/index.ts
index 5f68290a9..d7b2c4616 100644
--- a/apps/app/src/teams/messenger/modules/electron-messenger-window/index.ts
+++ b/apps/app/src/teams/messenger/modules/electron-messenger-window/index.ts
@@ -11,162 +11,164 @@ import ffi from 'ffi-napi'
 import { getNativeWindowHandleInt } from '@/utils/electron-window'
 
 export const ElectronMessengerWindow = () => {
-    /* use isFocused as source of truth instead of window.isFocused() as in some instances
-     * window.isFocused() returns true when the window is actually blurred, preventing
-     * focus again.
-     *  */
-    let isFocused = false
-    // let lastKeypressTime = 0
-    // const doubleKeypressDelta = 500
-    let registeredWindow: BrowserWindow | null = null
-    let hitboxesStore: ReturnType<typeof useHitboxesStore> | undefined
-    let settingsStore: ReturnType<typeof useSettingsStore> | undefined
-    let messengerStore: ReturnType<typeof useMessengerStore> | undefined
-    let messengerWindowStore:
-        | ReturnType<typeof useMessengerWindowStore>
-        | undefined
-    const ready = Deferred<BrowserWindow>()
-    const isReady = () => ready.promise
-    let foregroundWindow: string | number | null = null
+  /* use isFocused as source of truth instead of window.isFocused() as in some instances
+   * window.isFocused() returns true when the window is actually blurred, preventing
+   * focus again.
+   *  */
+  let isFocused = false
+  // let lastKeypressTime = 0
+  // const doubleKeypressDelta = 500
+  let registeredWindow: BrowserWindow | null = null
+  let hitboxesStore: ReturnType<typeof useHitboxesStore> | undefined
+  let settingsStore: ReturnType<typeof useSettingsStore> | undefined
+  let messengerStore: ReturnType<typeof useMessengerStore> | undefined
+  let messengerWindowStore:
+    | ReturnType<typeof useMessengerWindowStore>
+    | undefined
+  const ready = Deferred<BrowserWindow>()
+  const isReady = () => ready.promise
+  let foregroundWindow: string | number | null = null
 
-    const kernel32 = new ffi.Library('Kernel32.dll', {
-        GetCurrentThreadId: ['int', []],
-    })
-
-    const user32 = new ffi.Library('user32', {
-        SetForegroundWindow: ['bool', ['long']],
-        GetForegroundWindow: ['long', []],
-        SetFocus: ['long', ['long']],
-        SetActiveWindow: ['long', ['long']],
-        AttachThreadInput: ['bool', ['int', 'long', 'bool']],
-        ShowWindow: ['bool', ['long', 'int']],
-        FindWindowA: ['long', ['string', 'string']],
-        GetTopWindow: ['long', ['long']],
-        BringWindowToTop: ['bool', ['long']],
-        SwitchToThisWindow: ['void', ['long', 'bool']],
-        GetWindowThreadProcessId: ['int', ['long', 'int']],
-        SetWindowPos: [
-            'bool',
-            ['long', 'long', 'int', 'int', 'int', 'int', 'uint'],
-        ],
-    })
+  const kernel32 = new ffi.Library('Kernel32.dll', {
+    GetCurrentThreadId: ['int', []],
+  })
 
-    const getWindow = () =>
-        registeredWindow ||
-        ElectronWindowManager.getInstanceByName('messenger')?.window
+  const user32 = new ffi.Library('user32', {
+    SetForegroundWindow: ['bool', ['long']],
+    GetForegroundWindow: ['long', []],
+    SetFocus: ['long', ['long']],
+    SetActiveWindow: ['long', ['long']],
+    AttachThreadInput: ['bool', ['int', 'long', 'bool']],
+    ShowWindow: ['bool', ['long', 'int']],
+    FindWindowA: ['long', ['string', 'string']],
+    GetTopWindow: ['long', ['long']],
+    BringWindowToTop: ['bool', ['long']],
+    SwitchToThisWindow: ['void', ['long', 'bool']],
+    GetWindowThreadProcessId: ['int', ['long', 'int']],
+    SetWindowPos: [
+      'bool',
+      ['long', 'long', 'int', 'int', 'int', 'int', 'uint'],
+    ],
+  })
 
-    const openDevTools = () =>
-        new Promise((resolve) => {
-            const instances = ElectronWindowManager.getInstances()
-            instances.forEach((instance) => {
-                const { window } = instance
-                if (
-                    window.webContents.devToolsWebContents &&
-                    window.webContents.isDevToolsOpened()
-                ) {
-                    window.webContents.devToolsWebContents.focus()
-                } else {
-                    window.webContents.openDevTools({ mode: 'undocked' })
-                }
-            })
-            resolve(true)
-        })
+  const getWindow = () =>
+    registeredWindow ||
+    ElectronWindowManager.getInstanceByName('messenger')?.window
 
-    const ensureNativeFocus = () => {
-        const window = getWindow()
-        if (window) {
-            const windowNativeHandle = getNativeWindowHandleInt(window)
-            user32.SetForegroundWindow(windowNativeHandle)
+  const openDevTools = () =>
+    new Promise((resolve) => {
+      const instances = ElectronWindowManager.getInstances()
+      instances.forEach((instance) => {
+        const { window } = instance
+        if (
+          window.webContents.devToolsWebContents &&
+          window.webContents.isDevToolsOpened()
+        ) {
+          window.webContents.devToolsWebContents.focus()
+        } else {
+          setTimeout(() => {
+            window.webContents.openDevTools({ mode: 'detach' })
+          }, 300)
         }
+      })
+      resolve(true)
+    })
+
+  const ensureNativeFocus = () => {
+    const window = getWindow()
+    if (window) {
+      const windowNativeHandle = getNativeWindowHandleInt(window)
+      user32.SetForegroundWindow(windowNativeHandle)
     }
+  }
 
-    const focus = (context: 'mouse' | 'keyboard') =>
-        new Promise((resolve, reject) => {
-            messengerWindowStore?.$patch({ focusContext: context })
-            const window = getWindow()
-            if (window) {
-                if (!isFocused) {
-                    foregroundWindow = user32.GetForegroundWindow()
-                    // to prevent shenanigans with some softwares (*coughs* League of Legends *coughs*)
-                    // this makes sure to blur first with ffi-napi for safe measures
-                    user32.SetForegroundWindow(0)
-                    isFocused = true
-                    // window.once('show', () => {
-                    //   /* The focus needs to be delayed after the show() to actually focus properly... */
-                    //   setTimeout(() => {
-                    //     isFocused = true
-                    //     window.focus() // Fixes issues with Chrome and input elements
-                    //     resolve(true)
-                    //   }, 250)
-                    // })
+  const focus = (context: 'mouse' | 'keyboard') =>
+    new Promise((resolve, reject) => {
+      messengerWindowStore?.$patch({ focusContext: context })
+      const window = getWindow()
+      if (window) {
+        if (!isFocused) {
+          foregroundWindow = user32.GetForegroundWindow()
+          // to prevent shenanigans with some softwares (*coughs* League of Legends *coughs*)
+          // this makes sure to blur first with ffi-napi for safe measures
+          user32.SetForegroundWindow(0)
+          isFocused = true
+          // window.once('show', () => {
+          //   /* The focus needs to be delayed after the show() to actually focus properly... */
+          //   setTimeout(() => {
+          //     isFocused = true
+          //     window.focus() // Fixes issues with Chrome and input elements
+          //     resolve(true)
+          //   }, 250)
+          // })
 
-                    /* order matters */
-                    window.setFocusable(true) // Fixes alwaysOnTop going in the background sometimes for some reasons
-                    window.setIgnoreMouseEvents(false)
-                    window.show() // Fixes focus properly with Hardware Acceleration for some reasons
-                    window.focus() // needed for immediate focus in case the window is already shown
+          /* order matters */
+          window.setFocusable(true) // Fixes alwaysOnTop going in the background sometimes for some reasons
+          window.setIgnoreMouseEvents(false)
+          window.show() // Fixes focus properly with Hardware Acceleration for some reasons
+          window.focus() // needed for immediate focus in case the window is already shown
 
-                    // In applications like League of Legends, the window doesn't always receive focus
-                    // but we can force it manually once we're sure the window is shown 100%.
-                    // Only possible with a timeout atm.
-                    setTimeout(() => {
-                        ensureNativeFocus()
-                    }, 100)
-                }
-            } else {
-                reject()
-            }
-        })
+          // In applications like League of Legends, the window doesn't always receive focus
+          // but we can force it manually once we're sure the window is shown 100%.
+          // Only possible with a timeout atm.
+          setTimeout(() => {
+            ensureNativeFocus()
+          }, 100)
+        }
+      } else {
+        reject()
+      }
+    })
 
-    const blur = (returnFocus = true) =>
-        new Promise((resolve, reject) => {
-            const window = getWindow()
-            if (window) {
-                if (isFocused) {
-                    const windowNativeHandle = getNativeWindowHandleInt(window)
-                    isFocused = false
-                    /* order matters */
-                    window.blur() // Fixes issues with Chrome and input elements
-                    window.setIgnoreMouseEvents(true)
-                    window.setFocusable(false) // Fixes alwaysOnTop going in the background sometimes for some reasons
-                    if (foregroundWindow) {
-                        if (foregroundWindow !== windowNativeHandle && returnFocus) {
-                            user32.SetForegroundWindow(foregroundWindow)
-                        }
-                        foregroundWindow = null
-                    }
-                }
-                resolve(true)
-            } else {
-                reject()
+  const blur = (returnFocus = true) =>
+    new Promise((resolve, reject) => {
+      const window = getWindow()
+      if (window) {
+        if (isFocused) {
+          const windowNativeHandle = getNativeWindowHandleInt(window)
+          isFocused = false
+          /* order matters */
+          window.blur() // Fixes issues with Chrome and input elements
+          window.setIgnoreMouseEvents(true)
+          window.setFocusable(false) // Fixes alwaysOnTop going in the background sometimes for some reasons
+          if (foregroundWindow) {
+            if (foregroundWindow !== windowNativeHandle && returnFocus) {
+              user32.SetForegroundWindow(foregroundWindow)
             }
-        })
+            foregroundWindow = null
+          }
+        }
+        resolve(true)
+      } else {
+        reject()
+      }
+    })
 
-    const hide = (returnFocus?: boolean) =>
-        new Promise((resolve, reject) => {
-            const window = getWindow()
-            if (window) {
-                blur(returnFocus)
-                    .then(() => {
-                        window.hide()
-                        resolve(true)
-                    })
-                    .catch(reject)
-            } else {
-                reject()
-            }
-        })
+  const hide = (returnFocus?: boolean) =>
+    new Promise((resolve, reject) => {
+      const window = getWindow()
+      if (window) {
+        blur(returnFocus)
+          .then(() => {
+            window.hide()
+            resolve(true)
+          })
+          .catch(reject)
+      } else {
+        reject()
+      }
+    })
 
-    const show = () =>
-        new Promise((resolve, reject) => {
-            const window = getWindow()
-            if (window) {
-                focus('mouse')
-                resolve(true)
-            } else {
-                reject()
-            }
-        })
+  const show = () =>
+    new Promise((resolve, reject) => {
+      const window = getWindow()
+      if (window) {
+        focus('mouse')
+        resolve(true)
+      } else {
+        reject()
+      }
+    })
 
   const onMouseMove = (mouseX = 0, mouseY = 0) => {
     if (!hitboxesStore) return
@@ -180,9 +182,9 @@ export const ElectronMessengerWindow = () => {
           .filter(({ w, h }) => w && h)
           .some(({ x, y, w, h }: Hitbox) => {
             const isWithinXHitbox =
-              mouseX >= windowX + x && mouseX <= windowX + x + w
+              mouseX >= windowX+x && mouseX <= windowX+x+w
             const isWithinYHitbox =
-              mouseY >= windowY + y && mouseY <= windowY + y + h
+              mouseY >= windowY+y && mouseY <= windowY+y+h
             return isWithinXHitbox && isWithinYHitbox
           })
         if (isWithinAnyHitboxes) {
@@ -194,112 +196,112 @@ export const ElectronMessengerWindow = () => {
     }
   }
 
-    const toggleWindow = throttle((context: 'mouse' | 'keyboard') => {
-        const window = getWindow()
-        if (window) {
-            if (window.isVisible()) {
-                hide()
-            } else {
-                focus(context)
-            }
-        }
-        return Promise.resolve()
-    }, 250)
-
-    const setDisplay = (id?: Electron.Display['id'] | null) => {
-        const window = getWindow()
-        if (window) {
-            const allDisplays = screen.getAllDisplays()
-            const primaryDisplay = screen.getPrimaryDisplay()
-            const display = allDisplays.find((d) => d.id === id) || primaryDisplay
-            window.setBounds(display.bounds)
-        }
-    }
-    const zoomIn = () => {
-        const window = getWindow()
-        if (!window) return
-        window.webContents.zoomLevel += 0.5
+  const toggleWindow = throttle((context: 'mouse' | 'keyboard') => {
+    const window = getWindow()
+    if (window) {
+      if (window.isVisible()) {
+        hide()
+      } else {
+        focus(context)
+      }
     }
+    return Promise.resolve()
+  }, 250)
 
-    const zoomOut = () => {
-        const window = getWindow()
-        if (!window) return
-        window.webContents.zoomLevel -= 0.5
+  const setDisplay = (id?: Electron.Display['id'] | null) => {
+    const window = getWindow()
+    if (window) {
+      const allDisplays = screen.getAllDisplays()
+      const primaryDisplay = screen.getPrimaryDisplay()
+      const display = allDisplays.find((d) => d.id === id) || primaryDisplay
+      window.setBounds(display.bounds)
     }
+  }
+  const zoomIn = () => {
+    const window = getWindow()
+    if (!window) return
+    window.webContents.zoomLevel += 0.5
+  }
 
-    const resetZoom = () => {
-        const window = getWindow()
-        if (!window) return
-        window.webContents.zoomLevel = 0
-    }
+  const zoomOut = () => {
+    const window = getWindow()
+    if (!window) return
+    window.webContents.zoomLevel -= 0.5
+  }
 
-    const addEventListeners = () => {
-        const window = getWindow()
-        mouse.on('move', throttle(onMouseMove, 150))
+  const resetZoom = () => {
+    const window = getWindow()
+    if (!window) return
+    window.webContents.zoomLevel = 0
+  }
 
-        if (window) {
-            window.on('show', () => {
-                if (!messengerWindowStore) return
-                messengerWindowStore.$patch({ isShown: true })
-            })
-            window.on('hide', () => {
-                if (!messengerWindowStore) return
-                messengerWindowStore.$patch({ isShown: false })
-            })
-            window.on('focus', () => {
-                if (!messengerWindowStore) return
-                messengerWindowStore.$patch({ isFocused: true })
-            })
-            window.on('blur', () => {
-                if (!messengerWindowStore) return
-                messengerWindowStore.$patch({ isFocused: false })
-            })
-            window.on('close', (e) => {
-                e.preventDefault()
-                hide()
-            })
-            window.on('minimize', () => {
-                hide()
-            })
-            window.webContents.setWindowOpenHandler(({ url }) => {
-                shell.openExternal(url)
-                return { action: 'deny' }
-            })
-        }
-    }
+  const addEventListeners = () => {
+    const window = getWindow()
+    mouse.on('move', throttle(onMouseMove, 150))
 
-    const start = (window: BrowserWindow) => {
-        const localSettingsStore = useSettingsStore()
-        settingsStore = localSettingsStore
-        messengerStore = useMessengerStore()
-        messengerWindowStore = useMessengerWindowStore()
-        hitboxesStore = useHitboxesStore()
-        registeredWindow = window
-        settingsStore.$whenReady().then(() => {
-            setDisplay(localSettingsStore.display)
-        })
-        ready.resolve(window)
+    if (window) {
+      window.on('show', () => {
+        if (!messengerWindowStore) return
+        messengerWindowStore.$patch({ isShown: true })
+      })
+      window.on('hide', () => {
+        if (!messengerWindowStore) return
+        messengerWindowStore.$patch({ isShown: false })
+      })
+      window.on('focus', () => {
+        if (!messengerWindowStore) return
+        messengerWindowStore.$patch({ isFocused: true })
+      })
+      window.on('blur', () => {
+        if (!messengerWindowStore) return
+        messengerWindowStore.$patch({ isFocused: false })
+      })
+      window.on('close', (e) => {
+        e.preventDefault()
+        hide()
+      })
+      window.on('minimize', () => {
+        hide()
+      })
+      window.webContents.setWindowOpenHandler(({ url }) => {
+        shell.openExternal(url)
+        return { action: 'deny' }
+      })
     }
+  }
 
-    isReady().then(() => {
-        addEventListeners()
+  const start = (window: BrowserWindow) => {
+    const localSettingsStore = useSettingsStore()
+    settingsStore = localSettingsStore
+    messengerStore = useMessengerStore()
+    messengerWindowStore = useMessengerWindowStore()
+    hitboxesStore = useHitboxesStore()
+    registeredWindow = window
+    settingsStore.$whenReady().then(() => {
+      setDisplay(localSettingsStore.display)
     })
+    ready.resolve(window)
+  }
 
-    return {
-        openDevTools,
-        focus,
-        blur,
-        show,
-        hide,
-        toggleWindow,
-        start,
-        setDisplay,
-        isReady,
-        ensureNativeFocus,
-        zoomIn,
-        zoomOut,
-        resetZoom,
-    }
+  isReady().then(() => {
+    addEventListeners()
+  })
+
+  return {
+    openDevTools,
+    focus,
+    blur,
+    show,
+    hide,
+    toggleWindow,
+    start,
+    setDisplay,
+    isReady,
+    ensureNativeFocus,
+    zoomIn,
+    zoomOut,
+    resetZoom,
+  }
 }
 
 export default ElectronMessengerWindow()
diff --git a/apps/app/src/teams/overlay/electron/window.ts b/apps/app/src/teams/overlay/electron/window.ts
index f1555ebd8..d645c7d52 100644
--- a/apps/app/src/teams/overlay/electron/window.ts
+++ b/apps/app/src/teams/overlay/electron/window.ts
@@ -42,17 +42,23 @@ const createWindow = async (name: string): Promise<BrowserWindow> => {
 
   ipcMain.registerBrowserWindow(name, window)
 
-  const filePath = `./src/teams/${name}/index.html`
+  window.webContents.once('did-finish-load', () => {
+    if (import.meta.env.DEV) {
+      setTimeout(() => {
+        window.webContents.openDevTools({ mode: 'detach' })
+      }, 300)
+    }
+  })
+
+  const filePath = `./src/teams/${ name }/index.html`
 
   if (import.meta.env.VITE_DEV_SERVER_URL) {
     await window.loadURL(
       path.join(import.meta.env.VITE_DEV_SERVER_URL as string, filePath),
     )
-    if (import.meta.env.DEV)
-      window.webContents.openDevTools({ mode: 'undocked' })
   } else {
     createProtocol('app')
-    window.loadURL(`app://${filePath}`)
+    window.loadURL(`app://${ filePath }`)
   }
 
   return window
diff --git a/apps/app/src/teams/speech-worker/electron/window.ts b/apps/app/src/teams/speech-worker/electron/window.ts
index 3c14368b7..64a7f4937 100644
--- a/apps/app/src/teams/speech-worker/electron/window.ts
+++ b/apps/app/src/teams/speech-worker/electron/window.ts
@@ -12,8 +12,8 @@ const createWindow = async (name: string): Promise<BrowserWindow> => {
   window = new BrowserWindow({
     width: windowWidth,
     height: windowHeight,
-    x: (topLeftDisplay?.bounds.x ?? 0) - windowWidth,
-    y: (topLeftDisplay?.bounds.y ?? 0) - windowHeight,
+    x: (topLeftDisplay?.bounds.x ?? 0)-windowWidth,
+    y: (topLeftDisplay?.bounds.y ?? 0)-windowHeight,
     show: true,
     transparent: true,
     frame: false,
@@ -47,17 +47,23 @@ const createWindow = async (name: string): Promise<BrowserWindow> => {
 
   ipcMain.registerBrowserWindow(name, window)
 
-  const filePath = `./src/teams/${name}/index.html`
+  window.webContents.once('did-finish-load', () => {
+    if (import.meta.env.DEV) {
+      setTimeout(() => {
+        window.webContents.openDevTools({ mode: 'detach' })
+      }, 300)
+    }
+  })
+
+  const filePath = `./src/teams/${ name }/index.html`
 
   if (import.meta.env.VITE_DEV_SERVER_URL) {
     await window.loadURL(
       path.join(import.meta.env.VITE_DEV_SERVER_URL as string, filePath),
     )
-    if (import.meta.env.DEV)
-      window.webContents.openDevTools({ mode: 'undocked' })
   } else {
     createProtocol('app')
-    window.loadURL(`app://${filePath}`)
+    window.loadURL(`app://${ filePath }`)
   }
 
   return window