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

Code before:
                    <template #controls>
                      <span class="inline text-nowrap text-primary-600 font-semibold dark:text-primary-100">
                        {{ t('tamagotchi.stage.notice.fade-on-hover.controls-label') }}
                      </span>
                    </template>
                    <template #icon>
                      <div
                        i-ph:eye-slash
                        class="inline-block align-middle text-primary-600 dark:text-primary-100"
                        :aria-label="t('tamagotchi.stage.notice.fade-on-hover.icon-label')"
                      />
                    </template>
                  </i18n-t>

                  <div class="mt-3 flex flex-col gap-2 sm:flex-row">
                    <Button
                      variant="primary"
                      size="md"
                      block
                      :label="t('tamagotchi.stage.notice.fade-on-hover.confirm')"
                      :disabled="waitingForRequest"
                      :loading="waitingForRequest"
                      @click="handleAction('confirm')"
                    />
                    <div class="flex items-center gap-2 whitespace-nowrap px-2">
                      <Checkbox v-model="dontShowAgain" />
                      <div class="whitespace-nowrap text-sm">
                        {{ t('tamagotchi.stage.notice.fade-on-hover.dont-show-again') }}
                      </div>
                    </div>
                  </div>
                </div>
              </TransitionVertical>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<route lang="yaml">
meta:
  layout: plain
</route>

<style scoped>
.heading-backdrop {
  mask-image: radial-gradient(200% 150% at top left, black 20%, transparent 30%);
  -webkit-mask-image: radial-gradient(200% 150% at top left, black 20%, transparent 30%);
  mask-size: 100% 100%;

Review comment (suggestion):
```suggestion
                      <Checkbox v-model="dontShowItAgainNoticeFadeOnHoverPending" />
```

Code after:
                    <template #controls>
                      <span class="inline text-nowrap text-primary-600 font-semibold dark:text-primary-100">
                        {{ t('tamagotchi.stage.notice.fade-on-hover.controls-label') }}
                      </span>
                    </template>
                    <template #icon>
                      <div
                        i-ph:eye-slash
                        class="inline-block align-middle text-primary-600 dark:text-primary-100"
                        :aria-label="t('tamagotchi.stage.notice.fade-on-hover.icon-label')"
                      />
                    </template>
                  </i18n-t>

                  <div class="mt-3 flex flex-col gap-2 sm:flex-row">
                    <Button
                      variant="primary"
                      size="md"
                      block
                      :label="t('tamagotchi.stage.notice.fade-on-hover.confirm')"
                      :disabled="waitingForRequest"
                      :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>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<route lang="yaml">
meta:
  layout: plain
</route>

<style scoped>
.heading-backdrop {
  mask-image: radial-gradient(200% 150% at top left, black 20%, transparent 30%);
  -webkit-mask-image: radial-gradient(200% 150% at top left, black 20%, transparent 30%);
  mask-size: 100% 100%;