fix(stage-tamagotchi): no drag-and-click for linux (#663)

apps/stage-tamagotchi/src/main/windows/main/index.ts

@@ -1,7 +1,7 @@
 import type { BrowserWindowConstructorOptions, Rectangle } from 'electron'
 
 import { dirname, join, resolve } from 'node:path'
-import { env, platform } from 'node:process'
+import { env } from 'node:process'
 import { fileURLToPath } from 'node:url'
 
 import clickDragPlugin from 'electron-click-drag-plugin'
@@ -11,7 +11,7 @@ import { defineInvokeHandler } from '@unbird/eventa'
 import { createContext } from '@unbird/eventa/adapters/electron/main'
 import { defu } from 'defu'
 import { BrowserWindow, ipcMain, shell } from 'electron'
-import { isMacOS } from 'std-env'
+import { isLinux, isMacOS } from 'std-env'
 
 import icon from '../../../../resources/icon.png?asset'
 
@@ -115,30 +115,29 @@ export async function setupMainWindow(params: {
 
   /**
    * This is a know issue (or expected behavior maybe) to Electron.
+   * We don't use this approach on Linux because it's not working.
    *
    * Discussion: https://github.com/electron/electron/issues/37789
    * Workaround: https://github.com/noobfromph/electron-click-drag-plugin
    */
-  function handleStartDraggingWindow() {
-    try {
-      const hwndBuffer = window.getNativeWindowHandle()
-      // Linux: extract X11 Window ID from the buffer (first 4 bytes, little-endian)
-      // macOS/Windows: pass Buffer directly
-      const windowId = platform === 'linux' ? hwndBuffer.readUInt32LE(0) : hwndBuffer
+  if (!isLinux) {
+    function handleStartDraggingWindow() {
+      try {
+        const windowId = window.getNativeWindowHandle()
+        clickDragPlugin.startDrag(windowId)
+      }
+      catch (error) {
+        console.error(error)
+      }
+    }
 
-      clickDragPlugin.startDrag(windowId)
-    }
-    catch (error) {
-      console.error(error)
-    }
+    const { context } = createContext(ipcMain, window)
+    const cleanUpWindowDraggingInvokeHandler = defineInvokeHandler(context, electronStartDraggingWindow, handleStartDraggingWindow)
+
+    window.on('closed', () => {
+      cleanUpWindowDraggingInvokeHandler()
+    })
   }
 
-  const { context } = createContext(ipcMain, window)
-  const cleanUpWindowDraggingInvokeHandler = defineInvokeHandler(context, electronStartDraggingWindow, () => handleStartDraggingWindow())
-
-  window.on('closed', () => {
-    cleanUpWindowDraggingInvokeHandler()
-  })
-
   return window
 }

apps/stage-tamagotchi/src/preload/index.d.ts

@@ -3,6 +3,7 @@ import type { ElectronAPI } from '@electron-toolkit/preload'
 declare global {
   interface Window {
     electron: ElectronAPI
+    platform: NodeJS.Platform
     api: unknown
   }
 }

apps/stage-tamagotchi/src/preload/index.ts

@@ -1,4 +1,4 @@
-import { contextIsolated } from 'node:process'
+import { contextIsolated, platform } from 'node:process'
 
 import { electronAPI } from '@electron-toolkit/preload'
 import { contextBridge } from 'electron'
@@ -12,6 +12,7 @@ const api = {}
 if (contextIsolated) {
   try {
     contextBridge.exposeInMainWorld('electron', electronAPI)
+    contextBridge.exposeInMainWorld('platform', platform)
     contextBridge.exposeInMainWorld('api', api)
   }
   catch (error) {
@@ -22,5 +23,7 @@ else {
   // @ts-expect-error (define in dts)
   window.electron = electronAPI
   // @ts-expect-error (define in dts)
+  window.platform = platform
+  // @ts-expect-error (define in dts)
   window.api = api
 }

apps/stage-tamagotchi/src/renderer/components/Widgets/ControlsIsland/index.vue

@@ -10,6 +10,7 @@ import ControlButton from './ControlButton.vue'
 import ControlButtonTooltip from './ControlButtonTooltip.vue'
 
 import { electronOpenSettings, electronStartDraggingWindow } from '../../../../shared/eventa'
+import { isLinux } from '../../../utils/platform'
 
 const isDark = useDark({ disableTransition: false })
 const toggleDark = useToggle(isDark)
@@ -22,10 +23,11 @@ const openSettings = defineInvoke(context, electronOpenSettings)
 
 /**
  * This is a know issue (or expected behavior maybe) to Electron.
+ * We don't use this approach on Linux because it's not working.
  *
  * See `apps/stage-tamagotchi/src/main/windows/main/index.ts` for handler definition
  */
-const startDraggingWindow = defineInvoke(context, electronStartDraggingWindow)
+const startDraggingWindow = !isLinux ? defineInvoke(context, electronStartDraggingWindow) : undefined
 </script>
 
 <template>
@@ -57,7 +59,7 @@ const startDraggingWindow = defineInvoke(context, electronStartDraggingWindow)
       </ControlButtonTooltip>
 
       <ControlButtonTooltip>
-        <ControlButton cursor-move @mousedown="startDraggingWindow">
+        <ControlButton cursor-move :class="{ 'drag-region': isLinux }" @mousedown="startDraggingWindow?.()">
           <div i-ph:arrows-out-cardinal size-5 text="neutral-800 dark:neutral-300" />
         </ControlButton>
 

apps/stage-tamagotchi/src/renderer/electron.d.ts

@@ -1,6 +1,7 @@
 declare global {
   interface Window {
     electron: import('@electron-toolkit/preload').ElectronAPI
+    platform: NodeJS.Platform
   }
 }
 

apps/stage-tamagotchi/src/renderer/utils/platform.ts

@@ -0,0 +1 @@
+export const isLinux = /^linux/i.test(window.platform)