Tour example

Added tour example in a subroute of the app.

app/app.vue

@@ -123,6 +123,14 @@ const steps = [
       side: "right",
     },
   },
+  {
+    element: ".favorites_toggle",
+    popover: {
+      title: t('tour.favorites_button'),
+      description: t('tour.favorites_toggle'),
+      side: "bottom"
+    }
+  }
 ]
 
 const tourConfig = {

app/components/PublicationDetail.vue

@@ -70,6 +70,8 @@ const props = defineProps<{
 
 const emits = defineEmits(['close'])
 
+const nuxtApp = useNuxtApp()
+
 const { locale } = useI18n()
 const favorites = useFavoritesStore()
 
@@ -828,6 +830,15 @@ const items = computed(() => {
       </template>
 
       <template #right>
+        <UTooltip text="Como funciona?">
+          <UButton
+            icon="ph-student"
+            color="neutral"
+            variant="ghost"
+            :disabled="!document"
+            @click="nuxtApp.callHook('tour',12)"
+          />
+        </UTooltip>
         <UTooltip :text="isFav ? 'Quitar de mi lista' : 'Guardar en mi lista'">
           <UButton
             :icon="isFav ? 'i-lucide-bookmark-check' : 'i-lucide-bookmark-plus'"
@@ -835,6 +846,7 @@ const items = computed(() => {
             variant="ghost"
             :disabled="!document"
             :aria-label="isFav ? 'Quitar de mi lista' : 'Guardar en mi lista'"
+            class="favorites_toggle"
             @click="onToggleFavorite"
           />
         </UTooltip>

lang/es.json

@@ -26,7 +26,8 @@
         "changelog_description": "Bitacora de cambios realizados al sitio en orden cronologico",
         "feedback_description": "Tienes alguna sugerencia o queja? realizala aqui",
         "localeselector_description": "Cambia facilmente el idioma de la pagina",
-        "index_changelog": "Panel de ultimos cambios subidos"
+        "index_changelog": "Panel de ultimos cambios subidos",
+        "favorites_toggle": "Boton para guardar / quitar este documento de mis favoritos"
     },
     "home": {
         "instructions": "Bienvenidos, aqui podran buscar entre los estudios biblicos, las conferencias y las entrelineas que estan disponibles en el material de archivo de La Gran Carpa Catedral."