Repository: moeru-ai/airi
File: apps/stage-tamagotchi/src/renderer/pages/notice/fade-on-hover.vue (Vue)

Code before:
<script setup lang="ts">
import { Button, Checkbox, TransitionVertical } from '@proj-airi/ui'
import { refDebounced, useDark, useMouseInElement, useToggle } from '@vueuse/core'
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'

import VideoTutorialFadeOnHoverDark from '../../assets/videos/tutorial/tutorial-fade-on-hover.dark.mp4'
import VideoTutorialFadeOnHoverLight from '../../assets/videos/tutorial/tutorial-fade-on-hover.light.mp4'

import { noticeWindowEventa } from '../../../shared/eventa'
import { useElectronEventaContext, useElectronEventaInvoke } from '../../composables/electron-vueuse'
import { useControlsIslandStore } from '../../stores/controls-island'

const context = useElectronEventaContext()
const sendAction = useElectronEventaInvoke(noticeWindowEventa.windowAction, context.value)
const notifyMounted = useElectronEventaInvoke(noticeWindowEventa.pageMounted, context.value)
const notifyUnmounted = useElectronEventaInvoke(noticeWindowEventa.pageUnmounted, context.value)
const route = useRoute()
const { t } = useI18n()

const controlsIslandStore = useControlsIslandStore()
const { dontShowItAgainNoticeFadeOnHover } = storeToRefs(controlsIslandStore)
const toggleDontShowItAgain = useToggle(dontShowItAgainNoticeFadeOnHover)

const descriptionContainerRef = ref<HTMLDivElement>()
const { isOutside } = useMouseInElement(descriptionContainerRef)
const descriptionOpenImmediate = computed(() => !isOutside.value)
const descriptionOpen = refDebounced(descriptionOpenImmediate, 80)

const isDark = useDark({ disableTransition: false })

const requestId = ref<string | null>(null)
const waitingForRequest = computed(() => !requestId.value)

onMounted(async () => {
  try {
    const id = typeof route.query.id === 'string'
      ? route.query.id
      : Array.isArray(route.query.id)
        ? route.query.id[0]
        : null
    const pending = await notifyMounted({ id: id ?? undefined })
    if (pending?.id && pending.type === 'fade-on-hover')
      requestId.value = pending.id
  }
  catch (error) {
    console.warn('Failed to notify notice window mounted:', error)
  }
})

Review comment (suggestion):
```suggestion
import { storeToRefs } from 'pinia' 
const { dontShowItAgainNoticeFadeOnHover } = storeToRefs(controlsIslandStore)
```

Code after:
<script setup lang="ts">
import { Button, Checkbox, TransitionVertical } from '@proj-airi/ui'
import { refDebounced, useDark, useMouseInElement } from '@vueuse/core'
import { storeToRefs } from 'pinia'
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'

import VideoTutorialFadeOnHoverDark from '../../assets/videos/tutorial/tutorial-fade-on-hover.dark.mp4'
import VideoTutorialFadeOnHoverLight from '../../assets/videos/tutorial/tutorial-fade-on-hover.light.mp4'

import { noticeWindowEventa } from '../../../shared/eventa'
import { useElectronEventaContext, useElectronEventaInvoke } from '../../composables/electron-vueuse'
import { useControlsIslandStore } from '../../stores/controls-island'

const context = useElectronEventaContext()
const sendAction = useElectronEventaInvoke(noticeWindowEventa.windowAction, context.value)
const notifyMounted = useElectronEventaInvoke(noticeWindowEventa.pageMounted, context.value)
const notifyUnmounted = useElectronEventaInvoke(noticeWindowEventa.pageUnmounted, context.value)
const route = useRoute()
const { t } = useI18n()

const controlsIslandStore = useControlsIslandStore()
const dontShowItAgainNoticeFadeOnHoverPending = ref(false)
const { dontShowItAgainNoticeFadeOnHover } = storeToRefs(controlsIslandStore)

const descriptionContainerRef = ref<HTMLDivElement>()
const { isOutside } = useMouseInElement(descriptionContainerRef)
const descriptionOpenImmediate = computed(() => !isOutside.value)
const descriptionOpen = refDebounced(descriptionOpenImmediate, 80)

const isDark = useDark({ disableTransition: false })

const requestId = ref<string | null>(null)
const waitingForRequest = computed(() => !requestId.value)

onMounted(async () => {
  try {
    const id = typeof route.query.id === 'string'
      ? route.query.id
      : Array.isArray(route.query.id)
        ? route.query.id[0]
        : null
    const pending = await notifyMounted({ id: id ?? undefined })
    if (pending?.id && pending.type === 'fade-on-hover')
      requestId.value = pending.id
  }
  catch (error) {
    console.warn('Failed to notify notice window mounted:', error)
  }