feat(stage-tamagotchi,i18n): option to not show FadeOnHover again (#821)

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

@@ -22,6 +22,11 @@ async function handleToggle() {
     return
   }
 
+  if (uiStore.dontShowItAgainNoticeFadeOnHover) {
+    uiStore.enableFadeOnHover()
+    return
+  }
+
   try {
     const acknowledged = await requestNotice({
       id: NOTICE_WINDOW_ID,

apps/stage-tamagotchi/src/renderer/pages/notice/fade-on-hover.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { Button, TransitionVertical } from '@proj-airi/ui'
+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'
@@ -10,6 +11,7 @@ import VideoTutorialFadeOnHoverLight from '../../assets/videos/tutorial/tutorial
 
 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)
@@ -18,6 +20,10 @@ const notifyUnmounted = useElectronEventaInvoke(noticeWindowEventa.pageUnmounted
 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)
@@ -61,6 +67,8 @@ async function handleAction(action: 'confirm' | 'cancel' | 'close') {
   }
 
   try {
+    if (action === 'confirm')
+      dontShowItAgainNoticeFadeOnHover.value = dontShowItAgainNoticeFadeOnHoverPending.value
     await sendAction({ id, action })
   }
   catch (error) {
@@ -213,6 +221,12 @@ async function handleAction(action: 'confirm' | 'cancel' | 'close') {
                       :loading="waitingForRequest"
                       @click="handleAction('confirm')"
                     />
+                    <div class="flex items-center gap-2 whitespace-nowrap px-2">
+                      <Checkbox v-model="dontShowItAgainNoticeFadeOnHoverPending" />
+                      <div class="whitespace-nowrap text-sm">
+                        {{ t('tamagotchi.stage.notice.fade-on-hover.dont-show-again') }}
+                      </div>
+                    </div>
                   </div>
                 </div>
               </TransitionVertical>

apps/stage-tamagotchi/src/renderer/stores/controls-island.ts

@@ -4,6 +4,7 @@ import { defineStore } from 'pinia'
 export const useControlsIslandStore = defineStore('controls-island', () => {
   // Persist fade-on-hover preference per user
   const fadeOnHoverEnabled = useLocalStorage<boolean>('controls-island/fade-on-hover-enabled', false)
+  const dontShowItAgainNoticeFadeOnHover = useLocalStorage<boolean>('preferences/dont-show-it-again/notice/fade-on-hover', false)
 
   function enableFadeOnHover() {
     fadeOnHoverEnabled.value = true
@@ -15,6 +16,7 @@ export const useControlsIslandStore = defineStore('controls-island', () => {
 
   return {
     fadeOnHoverEnabled,
+    dontShowItAgainNoticeFadeOnHover,
     enableFadeOnHover,
     disableFadeOnHover,
   }