fix(stage-tamagotchi): broken click through toggle

apps/stage-tamagotchi/src/composables/window-shortcuts.ts

@@ -2,68 +2,17 @@ import type { ShortcutEvent } from '@tauri-apps/plugin-global-shortcut'
 
 import { register, unregisterAll } from '@tauri-apps/plugin-global-shortcut'
 import { storeToRefs } from 'pinia'
-import { computed, watch } from 'vue'
+import { watch } from 'vue'
 
 import { useShortcutsStore } from '../stores/shortcuts'
-import { useWindowControlStore } from '../stores/window-controls'
-import { WindowControlMode } from '../types/window-controls'
-import { startClickThrough, stopClickThrough } from '../utils/windows'
 
 export function useWindowShortcuts() {
-  const windowStore = useWindowControlStore()
-
   const { shortcuts } = storeToRefs(useShortcutsStore())
-  const handlers = computed(() => [
-    {
-      handle: async (event: ShortcutEvent) => {
-        if (event.state !== 'Pressed') {
-          return
-        }
 
-        windowStore.setMode(WindowControlMode.MOVE)
-        windowStore.toggleControl()
-      },
-      shortcut: shortcuts.value.find(shortcut => shortcut.type === 'move')?.shortcut,
-    },
-    {
-      handle: async (event: ShortcutEvent) => {
-        if (event.state !== 'Pressed') {
-          return
-        }
-
-        windowStore.setMode(WindowControlMode.RESIZE)
-        windowStore.toggleControl()
-      },
-      shortcut: shortcuts.value.find(shortcut => shortcut.type === 'resize')?.shortcut,
-    },
-    {
-      handle: async (event: ShortcutEvent) => {
-        if (event.state !== 'Pressed') {
-          return
-        }
-
-        windowStore.setMode(WindowControlMode.DEBUG)
-        windowStore.toggleControl()
-      },
-      shortcut: shortcuts.value.find(shortcut => shortcut.type === 'debug')?.shortcut,
-    },
-    {
-      handle: async (event: ShortcutEvent) => {
-        if (event.state === 'Pressed') {
-          stopClickThrough()
-          return
-        }
-
-        startClickThrough()
-      },
-      shortcut: shortcuts.value.find(shortcut => shortcut.type === 'ignore-mouse-event')?.shortcut,
-    },
-  ])
-
-  watch(handlers, async () => {
+  watch(shortcuts, async () => {
     await unregisterAll()
 
-    for (const handler of handlers.value) {
+    for (const handler of shortcuts.value) {
       if (!handler.shortcut) {
         return
       }

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

@@ -52,6 +52,10 @@ function openChat() {
   invoke('open_chat_window')
 }
 
+const shouldHideView = computed(() => {
+  return isCursorInside.value && !windowStore.isControlActive && windowStore.isIgnoringMouseEvent
+})
+
 onMounted(async () => {
   // Listen for click-through state changes
   unlisten.push(await listen('tauri-app:window-click-through:is-inside', (event: { payload: boolean }) => {
@@ -79,7 +83,7 @@ onUnmounted(() => {
 <template>
   <div
     :class="[modeIndicatorClass, {
-      'op-0': isCursorInside && !windowStore.isControlActive,
+      'op-0': shouldHideView,
     }]"
     relative
     max-h="[100vh]"
@@ -94,9 +98,11 @@ onUnmounted(() => {
     <div relative h-full w-full items-end gap-2 class="view">
       <WidgetStage h-full w-full flex-1 mb="<md:18" />
       <div
-        absolute bottom-4 left-4 flex gap-1 op-0 transition="opacity duration-250"
-        class="interaction-area"
-        :class="{ 'pointer-events-none': windowStore.isControlActive }"
+        absolute bottom-4 left-4 flex gap-1 op-0 transition="opacity duration-500"
+        :class="{
+          'pointer-events-none': windowStore.isControlActive,
+          'show-on-hover': !windowStore.isIgnoringMouseEvent,
+        }"
       >
         <div
           border="solid 2 primary-100 "
@@ -165,6 +171,12 @@ onUnmounted(() => {
 <style scoped>
 .view {
   transition: opacity 0.5s ease-in-out;
+
+  &:hover {
+    .show-on-hover {
+      opacity: 1;
+    }
+  }
 }
 
 .drag-region {

apps/stage-tamagotchi/src/stores/shortcuts.ts

@@ -1,9 +1,14 @@
+import type { ShortcutEvent } from '@tauri-apps/plugin-global-shortcut'
 import type { MaybeRefOrGetter, UseStorageOptions } from '@vueuse/core'
 
 import { useLocalStorage } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { ref, toValue, watch } from 'vue'
 
+import { WindowControlMode } from '../types/window-controls'
+import { startClickThrough, stopClickThrough } from '../utils/windows'
+import { useWindowControlStore } from './window-controls'
+
 interface Versioned<T> { version?: string, data?: T }
 interface UseVersionedStorageOptions<T> {
   defaultVersion?: string
@@ -64,24 +69,47 @@ function useVersionedLocalStorage<T>(
 }
 
 export const useShortcutsStore = defineStore('shortcuts', () => {
+  const windowStore = useWindowControlStore()
+
   const shortcuts = ref([
     {
       name: 'settings.pages.themes.window-shortcuts.toggle-move.label',
       shortcut: useVersionedLocalStorage('shortcuts/window/move', 'Shift+Alt+N'), // Shift + Alt + N
       group: 'window',
       type: 'move',
+      handle: async (event: ShortcutEvent) => {
+        if (event.state !== 'Pressed') {
+          return
+        }
+
+        windowStore.setMode(WindowControlMode.MOVE)
+        windowStore.toggleControl()
+      },
     },
     {
       name: 'settings.pages.themes.window-shortcuts.toggle-resize.label',
       shortcut: useVersionedLocalStorage('shortcuts/window/resize', 'Shift+Alt+R'), // Shift + Alt + R
       group: 'window',
       type: 'resize',
+      handle: async (_: ShortcutEvent) => {
+        windowStore.setMode(WindowControlMode.RESIZE)
+        windowStore.toggleControl()
+      },
     },
     {
       name: 'settings.pages.themes.window-shortcuts.toggle-ignore-mouse-event.label',
       shortcut: useVersionedLocalStorage('shortcuts/window/debug', 'Shift+Alt+I'), // Shift + Alt + I
       group: 'window',
       type: 'ignore-mouse-event',
+      handle: async (_: ShortcutEvent) => {
+        windowStore.isIgnoringMouseEvent = !windowStore.isIgnoringMouseEvent
+        if (windowStore.isIgnoringMouseEvent) {
+          await startClickThrough()
+          return
+        }
+
+        await stopClickThrough()
+      },
     },
   ])
 

apps/stage-tamagotchi/src/stores/window-controls.ts

@@ -9,6 +9,7 @@ import { startClickThrough, stopClickThrough } from '../utils/windows'
 export const useWindowControlStore = defineStore('windowControl', () => {
   const controlMode = ref<WindowControlMode>(WindowControlMode.NONE)
   const isControlActive = ref(false)
+  const isIgnoringMouseEvent = ref(true)
   const size = useLocalStorage('window/control/size', { width: 300 * 1.5, height: 400 * 1.5 })
   const position = useLocalStorage('window/control/position', { x: 0, y: 0 })
 
@@ -20,7 +21,9 @@ export const useWindowControlStore = defineStore('windowControl', () => {
     isControlActive.value = !isControlActive.value
     if (!isControlActive.value) {
       controlMode.value = WindowControlMode.NONE
-      startClickThrough()
+      if (isIgnoringMouseEvent.value)
+        startClickThrough()
+
       return
     }
 
@@ -33,6 +36,7 @@ export const useWindowControlStore = defineStore('windowControl', () => {
   return {
     controlMode,
     isControlActive,
+    isIgnoringMouseEvent,
     size,
     position,
     setMode,