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 { 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 { dontShowItAgainNoticeFadeOnHover } = storeToRefs(controlsIslandStore)
const toggleDontShowItAgain = useToggle(dontShowItAgainNoticeFadeOnHover)

const descriptionContainerRef = ref<HTMLDivElement>()
const { isOutside } = useMouseInElement(descriptionContainerRef)

Review comment (suggestion):
```suggestion
import { refDebounced, useDark, useMouseInElement } from '@vueuse/core'
```

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)