feat(stage-tamagotchi): notice before toggling Fade on Hover

Author: nekomeowww

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

@@ -22,6 +22,7 @@ import { setupCaptionWindowManager } from './windows/caption'
 import { setupChatWindowReusableFunc } from './windows/chat'
 import { setupInlayWindow } from './windows/inlay'
 import { setupMainWindow } from './windows/main'
+import { setupNoticeWindowManager } from './windows/notice'
 import { setupSettingsWindowReusableFunc } from './windows/settings'
 import { toggleWindowShow } from './windows/shared/window'
 import { setupWidgetsWindowManager } from './windows/widgets'
@@ -103,13 +104,14 @@ app.whenReady().then(async () => {
   const channelServerModule = injeca.provide('modules:channel-server', async () => setupChannelServer())
   const chatWindow = injeca.provide('windows:chat', { build: () => setupChatWindowReusableFunc() })
   const widgetsManager = injeca.provide('windows:widgets', { build: () => setupWidgetsWindowManager() })
+  const noticeWindow = injeca.provide('windows:notice', { build: () => setupNoticeWindowManager() })
 
   const settingsWindow = injeca.provide('windows:settings', {
     dependsOn: { widgetsManager },
     build: ({ dependsOn }) => setupSettingsWindowReusableFunc(dependsOn),
   })
   const mainWindow = injeca.provide('windows:main', {
-    dependsOn: { settingsWindow, chatWindow, widgetsManager },
+    dependsOn: { settingsWindow, chatWindow, widgetsManager, noticeWindow },
     build: async ({ dependsOn }) => setupMainWindow(dependsOn),
   })
   const captionWindow = injeca.provide('windows:caption', {

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

@@ -1,6 +1,7 @@
 import type { BrowserWindowConstructorOptions, Rectangle } from 'electron'
 
 import type { WidgetsWindowManager } from '../widgets'
+import type { NoticeWindowManager } from '../notice'
 
 import { dirname, join, resolve } from 'node:path'
 import { env } from 'node:process'
@@ -31,6 +32,7 @@ export async function setupMainWindow(params: {
   settingsWindow: () => Promise<BrowserWindow>
   chatWindow: () => Promise<BrowserWindow>
   widgetsManager: WidgetsWindowManager
+  noticeWindow: NoticeWindowManager
 }) {
   const {
     setup: setupConfig,
@@ -131,6 +133,7 @@ export async function setupMainWindow(params: {
     settingsWindow: params.settingsWindow,
     chatWindow: params.chatWindow,
     widgetsManager: params.widgetsManager,
+    noticeWindow: params.noticeWindow,
   })
 
   /**

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

@@ -1,12 +1,13 @@
 import type { BrowserWindow } from 'electron'
 
+import type { NoticeWindowManager } from '../../notice'
 import type { WidgetsWindowManager } from '../../widgets'
 
 import { defineInvokeHandler } from '@moeru/eventa'
 import { createContext } from '@moeru/eventa/adapters/electron/main'
 import { ipcMain } from 'electron'
 
-import { electronOpenChat, electronOpenMainDevtools, electronOpenSettings } from '../../../../shared/eventa'
+import { electronOpenChat, electronOpenMainDevtools, electronOpenSettings, noticeWindowEventa } from '../../../../shared/eventa'
 import { createWidgetsService } from '../../../services/airi/widgets'
 import { createScreenService, createWindowService } from '../../../services/electron'
 import { toggleWindowShow } from '../../shared'
@@ -16,6 +17,7 @@ export function setupMainWindowElectronInvokes(params: {
   settingsWindow: () => Promise<BrowserWindow>
   chatWindow: () => Promise<BrowserWindow>
   widgetsManager: WidgetsWindowManager
+  noticeWindow: NoticeWindowManager
 }) {
   // TODO: once we refactored eventa to support window-namespaced contexts,
   // we can remove the setMaxListeners call below since eventa will be able to dispatch and
@@ -31,4 +33,5 @@ export function setupMainWindowElectronInvokes(params: {
   defineInvokeHandler(context, electronOpenMainDevtools, () => params.window.webContents.openDevTools({ mode: 'detach' }))
   defineInvokeHandler(context, electronOpenSettings, async () => toggleWindowShow(await params.settingsWindow()))
   defineInvokeHandler(context, electronOpenChat, async () => toggleWindowShow(await params.chatWindow()))
+  defineInvokeHandler(context, noticeWindowEventa.openWindow, (payload) => params.noticeWindow.open(payload))
 }

apps/stage-tamagotchi/src/renderer/assets/videos/tutorial/tutorial-fade-on-hover.dark.mp4

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import ControlButton from './ControlButton.vue'
+import ControlButtonTooltip from './ControlButtonTooltip.vue'
+
+import { noticeWindowEventa } from '../../../../shared/eventa'
+import { useElectronEventaInvoke } from '../../../composables/electron-vueuse/use-electron-eventa-context'
+import { useControlsIslandStore } from '../../../stores/controls-island'
+
+const uiStore = useControlsIslandStore()
+const enabled = computed(() => uiStore.fadeOnHoverEnabled)
+const { t } = useI18n()
+
+const requestNotice = useElectronEventaInvoke(noticeWindowEventa.openWindow)
+const NOTICE_WINDOW_ID = 'fade-on-hover'
+
+async function handleToggle() {
+  if (enabled.value) {
+    uiStore.disableFadeOnHover()
+    return
+  }
+
+  try {
+    const acknowledged = await requestNotice({
+      id: NOTICE_WINDOW_ID,
+      route: '/notice/fade-on-hover',
+      type: 'fade-on-hover',
+    })
+    if (acknowledged)
+      uiStore.enableFadeOnHover()
+  }
+  catch (error) {
+    console.error('Failed to open fade-on-hover notice:', error)
+  }
+}
+</script>
+
+<template>
+  <ControlButtonTooltip>
+    <ControlButton
+      :class="{ 'border-primary-300/70 shadow-[0_10px_24px_rgba(0,0,0,0.22)]': enabled }"
+      @click="handleToggle"
+    >
+      <Transition name="fade" mode="out-in">
+        <div v-if="enabled" i-ph:eye size-5 text="primary-700 dark:primary-300" />
+        <div v-else i-ph:eye-slash size-5 text="neutral-800 dark:neutral-300" />
+      </Transition>
+    </ControlButton>
+
+    <template #tooltip>
+      {{ enabled ? t('tamagotchi.stage.controls-island.fade-on-hover.disable') : t('tamagotchi.stage.controls-island.fade-on-hover.enable') }}
+    </template>
+  </ControlButtonTooltip>
+</template>

apps/stage-tamagotchi/src/renderer/assets/videos/tutorial/tutorial-fade-on-hover.light.mp4

@@ -7,6 +7,7 @@ import { ref } from 'vue'
 
 import ControlButton from './ControlButton.vue'
 import ControlButtonTooltip from './ControlButtonTooltip.vue'
+import ControlsIslandFadeOnHover from './ControlsIslandFadeOnHover.vue'
 import ControlsIslandHearingConfig from './ControlsIslandHearingConfig.vue'
 import IndicatorMicVolume from './IndicatorMicVolume.vue'
 
@@ -75,6 +76,8 @@ defineExpose({ hearingDialogOpen })
         </template>
       </ControlButtonTooltip>
 
+      <ControlsIslandFadeOnHover />
+
       <ControlButtonTooltip>
         <ControlButton cursor-move :class="{ 'drag-region': isLinux }" @mousedown="startDraggingWindow?.()">
           <div i-ph:arrows-out-cardinal size-5 text="neutral-800 dark:neutral-300" />

apps/stage-tamagotchi/src/renderer/components/StageIslands/ControlsIsland/ControlsIslandFadeOnHover.vue

@@ -13,7 +13,7 @@ import { useConsciousnessStore } from '@proj-airi/stage-ui/stores/modules/consci
 import { useHearingSpeechInputPipeline } from '@proj-airi/stage-ui/stores/modules/hearing'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { useSettingsAudioDevice } from '@proj-airi/stage-ui/stores/settings'
-import { refDebounced, useBroadcastChannel } from '@vueuse/core'
+import { refDebounced, useBroadcastChannel, watchPausable } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, onUnmounted, ref, toRef, watch } from 'vue'
 
@@ -28,6 +28,7 @@ import {
   useElectronMouseInWindow,
   useElectronRelativeMouse,
 } from '../composables/electron-vueuse'
+import { useControlsIslandStore } from '../stores/controls-island'
 import { useWindowStore } from '../stores/window'
 
 const resourceStatusIslandRef = ref<InstanceType<typeof ResourceStatusIsland>>()
@@ -53,16 +54,17 @@ const setIgnoreMouseEvents = useElectronEventaInvoke(electron.window.setIgnoreMo
 
 const { scale, positionInPercentageString } = storeToRefs(useLive2d())
 const { live2dLookAtX, live2dLookAtY } = storeToRefs(useWindowStore())
+const { fadeOnHoverEnabled } = storeToRefs(useControlsIslandStore())
 
 watch(componentStateStage, () => isLoading.value = componentStateStage.value !== 'mounted', { immediate: true })
 
-const { pause, resume } = watch(isTransparent, (transparent) => {
-  shouldFadeOnCursorWithin.value = !transparent
+const { pause, resume } = watchPausable(isTransparent, (transparent) => {
+  shouldFadeOnCursorWithin.value = fadeOnHoverEnabled.value && !transparent
 }, { immediate: true })
 
 const hearingDialogOpen = computed(() => controlsIslandRef.value?.hearingDialogOpen ?? false)
 
-watch([isOutsideFor250Ms, isAroundWindowBorderFor250Ms, isOutsideWindow, isTransparent, hearingDialogOpen], () => {
+watch([isOutsideFor250Ms, isAroundWindowBorderFor250Ms, isOutsideWindow, isTransparent, hearingDialogOpen, fadeOnHoverEnabled], () => {
   if (hearingDialogOpen.value) {
     // Hearing dialog/drawer is open; keep window interactive
     isIgnoringMouseEvents.value = false
@@ -83,13 +85,14 @@ watch([isOutsideFor250Ms, isAroundWindowBorderFor250Ms, isOutsideWindow, isTrans
     pause()
   }
   else {
-    // Otherwise allow click-through while we fade UI based on transparency
+    // Otherwise allow click-through while we fade UI based on transparency (when enabled)
     isIgnoringMouseEvents.value = true
-    if (!isOutsideWindow.value && !isTransparent.value) {
-      shouldFadeOnCursorWithin.value = true
-    }
+    shouldFadeOnCursorWithin.value = fadeOnHoverEnabled.value && !isOutsideWindow.value && !isTransparent.value
     setIgnoreMouseEvents([true, { forward: true }])
-    resume()
+    if (fadeOnHoverEnabled.value)
+      resume()
+    else
+      pause()
   }
 })
 
@@ -226,7 +229,9 @@ watch([stream, () => vadLoaded.value], async ([s, loaded]) => {
           :y-offset="positionInPercentageString.y"
           mb="<md:18"
         />
-        <ControlsIsland ref="controlsIslandRef" />
+        <ControlsIsland
+          ref="controlsIslandRef"
+        />
       </div>
     </div>
     <div v-show="isLoading" h-full w-full>