Fix favorites system, add support for bus stops and tourist trips, and improve UI consistency

frontend/src/components/BusStopInfoModal.vue

@@ -2,7 +2,7 @@
 import { ref, watch } from 'vue'
 import type { BusStop } from '@/types'
 import { busStopsService } from '@/services/busStopsService'
-import { favoritesService } from '@/services/favoritesService'
+import FavoriteButton from '@/components/FavoriteButton.vue'
 import { formatTo12Hour } from '@/utils/timeFormatter'
 
 interface Props {
@@ -15,8 +15,6 @@ const emit = defineEmits(['close', 'navigate'])
 
 const upcomingArrivals = ref<{ routeName: string; arrivalTime: string }[]>([])
 const isLoading = ref(false)
-const isFavorited = ref(false)
-const favoriteId = ref<string | null>(null)
 
 // Function to fetch arrivals
 async function loadArrivals() {
@@ -33,48 +31,6 @@ async function loadArrivals() {
   }
 }
 
-async function checkFavoriteStatus() {
-  const token = localStorage.getItem('auth_token')
-  if (!token || !props.busStop) {
-    isFavorited.value = false
-    favoriteId.value = null
-    return
-  }
-  
-  try {
-    const favorites = await favoritesService.getMyFavorites()
-    const found = favorites.find(f => f.item_type === 'stop' && f.item_id === props.busStop?.id)
-    isFavorited.value = !!found
-    favoriteId.value = found ? found.id : null
-  } catch (e) {
-    console.error("Error checking favorite status", e)
-  }
-}
-
-async function toggleFavorite() {
-  const token = localStorage.getItem('auth_token')
-  if (!token) {
-    alert("Debes iniciar sesión para guardar favoritos")
-    return
-  }
-
-  if (!props.busStop) return
-
-  try {
-    if (isFavorited.value && props.busStop) {
-      await favoritesService.removeFavorite('stop', props.busStop.id)
-      isFavorited.value = false
-      favoriteId.value = null
-    } else {
-      const fav = await favoritesService.addFavorite('stop', props.busStop.id)
-      isFavorited.value = true
-      favoriteId.value = fav.id
-    }
-  } catch (e) {
-    alert("Error al actualizar favorito")
-  }
-}
-
 function startInternalNavigation() {
   if (props.busStop) {
     emit('navigate', props.busStop)
@@ -85,14 +41,12 @@ function startInternalNavigation() {
 watch(() => props.busStop, async (newStop) => {
   if (newStop && props.isOpen) {
     await loadArrivals()
-    await checkFavoriteStatus()
   }
 })
 
 watch(() => props.isOpen, async (isOpen) => {
   if (isOpen && props.busStop) {
     await loadArrivals()
-    await checkFavoriteStatus()
   }
 })
 </script>
@@ -107,11 +61,11 @@ watch(() => props.isOpen, async (isOpen) => {
           <div v-if="busStop" class="header-info">
             <div class="title-row">
               <h3 class="stop-name">{{ busStop.name }}</h3>
-              <button class="fav-btn" @click="toggleFavorite">
-                <span class="material-icons" :class="{ 'favorited': isFavorited }">
-                  {{ isFavorited ? 'favorite' : 'favorite_border' }}
-                </span>
-              </button>
+              <FavoriteButton 
+                item-type="stop" 
+                :item-id="busStop.id" 
+                :item-name="busStop.name"
+              />
             </div>
             <p v-if="busStop.address" class="stop-address">
               <span class="material-icons text-sm">location_on</span>