fix(i18n): hint for settings on notifications page (#893)

Co-authored-by: Daniel Roe <daniel@roe.dev>

components/notification/NotificationEnablePushNotification.client.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+
 defineProps<{
   closeableHeader?: boolean
   busy?: boolean
@@ -11,6 +13,8 @@ defineSlots<{
   error: {}
 }>()
 
+const xl = useMediaQuery('(min-width: 1280px)')
+
 const isLegacyAccount = computed(() => !currentUser.value?.vapidKey)
 </script>
 
@@ -38,8 +42,19 @@ const isLegacyAccount = computed(() => !currentUser.value?.vapidKey)
         <span aria-hidden="true" i-ri:close-line />
       </button>
     </header>
-    <p>
+    <template v-if="closeableHeader">
-      {{ $t(`settings.notifications.push_notifications.warning.enable_description${closeableHeader ? '' : '_settings'}`) }}
+      <p xl:hidden>
+        {{ $t('settings.notifications.push_notifications.warning.enable_description') }}
+      </p>
+      <p xl:hidden>
+        {{ $t('settings.notifications.push_notifications.warning.enable_description_mobile') }}
+      </p>
+      <p :class="xl ? null : 'hidden'">
+        {{ $t('settings.notifications.push_notifications.warning.enable_description_desktop') }}
+      </p>
+    </template>
+    <p v-else>
+      {{ $t('settings.notifications.push_notifications.warning.enable_description_settings') }}
     </p>
     <p v-if="isLegacyAccount">
       {{ $t('settings.notifications.push_notifications.warning.re_auth') }}
@@ -52,7 +67,7 @@ const isLegacyAccount = computed(() => !currentUser.value?.vapidKey)
       @click="$emit('subscribe')"
     >
       <span aria-hidden="true" :class="busy && animate ? 'i-ri:loader-2-fill animate-spin' : 'i-ri:check-line'" />
-      {{ $t('settings.notifications.push_notifications.warning.enable_desktop') }}
+      <span>{{ $t('settings.notifications.push_notifications.warning.enable_desktop') }}</span>
     </button>
     <slot name="error" />
   </div>

locales/en-GB.json

@@ -245,6 +245,8 @@
         "warning": {
           "enable_close": "Close",
           "enable_description": "To receive notifications when Elk is not open, enable push notifications. You can control precisely what types of interactions generate push notifications via the \"@:settings.notifications.show_btn{'\"'} button above once enabled.",
+          "enable_description_desktop": "To receive notifications when Elk is not open, enable push notifications. You can control precisely what types of interactions generate push notifications in the navigation menu under \"Settings > Notifications > Push notifications settings\" once enabled.",
+          "enable_description_mobile": "You can also access the settings using the navigation menu under \"Settings > Notifications > Push notification settings\".",
           "enable_description_settings": "To receive notifications when Elk is not open, enable push notifications. You will be able to control precisely what types of interactions generate push notifications on this same screen once you enable them.",
           "enable_desktop": "Enable push notifications",
           "enable_title": "Never miss anything",

locales/en-US.json

@@ -304,6 +304,8 @@
         "warning": {
           "enable_close": "Close",
           "enable_description": "To receive notifications when Elk is not open, enable push notifications. You can control precisely what types of interactions generate push notifications via the \"@:settings.notifications.show_btn{'\"'} button above once enabled.",
+          "enable_description_desktop": "To receive notifications when Elk is not open, enable push notifications. You can control precisely what types of interactions generate push notifications in \"Settings > Notifications > Push notifications settings\" once enabled.",
+          "enable_description_mobile": "You can also access the settings using the navigation menu \"Settings > Notifications > Push notification settings\".",
           "enable_description_settings": "To receive notifications when Elk is not open, enable push notifications. You will be able to control precisely what types of interactions generate push notifications on this same screen once you enable them.",
           "enable_desktop": "Enable push notifications",
           "enable_title": "Never miss anything",

locales/es-ES.json

@@ -304,6 +304,8 @@
         "warning": {
           "enable_close": "Cerrar",
           "enable_description": "Para recibir notificaciones cuando Elk no esté abierto, habilita las notificaciones push. Puedes controlar con precisión qué tipos de interacciones generan notificaciones push a través del botón \"@:settings.notifications.show_btn{'\"'} de arriba una vez que estén habilitadas.",
+          "enable_description_desktop": "Para recibir notificaciones cuando Elk no esté abierto, habilite las notificaciones push. Puedes controlar con precisión qué tipos de interacciones generan notificaciones push en el menú de navegación en \"Ajustes > Notificaciones > Ajustes de notificaciones push\" una vez que estén habilitadas.",
+          "enable_description_mobile": "También podrá acceder a la configuración utilizando el menú de navegación en \"Ajustes > Notificaciones > Ajutes de notificaciones push\".",
           "enable_description_settings": "Para recibir notificaciones cuando Elk no esté abierto, habilita las notificaciones push. Podrás controlar con precisión qué tipos de interacciones generan notificaciones push en esta misma pantalla una vez las habilites.",
           "enable_desktop": "Habilitar notificaciones push",
           "enable_title": "Nunca te pierdas nada",

pages/settings/notifications/index.vue

@@ -7,7 +7,7 @@ const { t } = useI18n()
 const pwaEnabled = useRuntimeConfig().public.pwaEnabled
 
 useHeadFixed({
-  title: () => `${t('settings.notifications.notifications.label')} | ${t('nav.settings')}`,
+  title: () => `${t('settings.notifications.label')} | ${t('nav.settings')}`,
 })
 </script>
 
@@ -15,7 +15,7 @@ useHeadFixed({
   <MainContent back-on-small-screen>
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
-        <span>{{ $t('settings.notifications.notifications.label') }}</span>
+        <span>{{ $t('settings.notifications.label') }}</span>
       </div>
     </template>