feat(stage-tamagotchi): add top drag area to move window (#1231)

Author: fordelkon

apps/stage-tamagotchi/src/renderer/pages/index.vue

@@ -3,8 +3,10 @@ import type { ChatProvider } from '@xsai-ext/providers/utils'
 
 import workletUrl from '@proj-airi/stage-ui/workers/vad/process.worklet?worker&url'
 
+import { defineInvoke } from '@moeru/eventa'
 import { electron } from '@proj-airi/electron-eventa'
 import {
+  useElectronEventaContext,
   useElectronEventaInvoke,
   useElectronMouseAroundWindowBorder,
   useElectronMouseInElement,
@@ -24,11 +26,13 @@ import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { useSettings, useSettingsAudioDevice } from '@proj-airi/stage-ui/stores/settings'
 import { refDebounced, useBroadcastChannel } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
+import { isLinux } from 'std-env'
 import { computed, onUnmounted, ref, toRef, watch } from 'vue'
 
 import ControlsIsland from '../components/stage-islands/controls-island/index.vue'
 import ResourceStatusIsland from '../components/stage-islands/resource-status-island/index.vue'
 
+import { electronStartDraggingWindow } from '../../shared/eventa'
 import { useControlsIslandStore } from '../stores/controls-island'
 import { useWindowStore } from '../stores/window'
 
@@ -78,10 +82,17 @@ const isAroundWindowBorderFor250Ms = refDebounced(isAroundWindowBorder, 250)
 
 const setIgnoreMouseEvents = useElectronEventaInvoke(electron.window.setIgnoreMouseEvents)
 
-const { scale, positionInPercentageString } = storeToRefs(useLive2d())
+const context = useElectronEventaContext()
+const startDraggingWindow = !isLinux ? defineInvoke(context.value, electronStartDraggingWindow) : undefined
+
+const live2dStore = useLive2d()
+const { scale, positionInPercentageString } = storeToRefs(live2dStore)
 const { live2dLookAtX, live2dLookAtY } = storeToRefs(useWindowStore())
 const { fadeOnHoverEnabled } = storeToRefs(useControlsIslandStore())
 
+// Drag hint for window dragging
+const showDragHint = ref(false)
+
 watch(componentStateStage, () => isLoading.value = componentStateStage.value !== 'mounted', { immediate: true })
 
 const { pause, resume } = watch(isTransparent, (transparent) => {
@@ -322,6 +333,16 @@ watch([stream, () => vadLoaded.value], async ([s, loaded]) => {
     relative z-2 h-full overflow-hidden rounded-xl
     transition="opacity duration-500 ease-in-out"
   >
+    <div
+      v-show="!isLoading"
+      absolute left-0 top-0 z-10 h-12 w-full
+      cursor-move
+      :class="{ 'drag-region': isLinux }"
+      @mousedown="startDraggingWindow?.()"
+      @mouseenter="showDragHint = true"
+      @mouseleave="showDragHint = false"
+    />
+
     <div
       v-show="!isLoading"
       :class="[