From ae2b65609a1183cab5aaa6d1417cb1ef9fd30ffb Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Sun, 1 Mar 2026 14:28:25 -0500
Subject: [PATCH] Fix auth form visibility (static imports + remove transition)
 and map zoom logic synchronization

---
 frontend/src/views/AuthView.vue | 12 ++++--------
 frontend/src/views/MapView.vue  | 29 +++++++++++++++++++++++------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/frontend/src/views/AuthView.vue b/frontend/src/views/AuthView.vue
index 3b394fe..cc212e8 100644
--- a/frontend/src/views/AuthView.vue
+++ b/frontend/src/views/AuthView.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-
 import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
 import LoginForm from '@/components/auth/LoginForm.vue'
 import RegisterForm from '@/components/auth/RegisterForm.vue'
 
+const { t } = useI18n()
 const isLogin = ref(true)
 const toggleAuth = () => { isLogin.value = !isLogin.value }
 const router = useRouter()
@@ -67,11 +65,9 @@ onMounted(() => {
           {{ sessionExpiredMessage }}
         </div>
 
-        <!-- Formularios con transición -->
-        <Transition name="auth-slide" mode="out-in">
-          <LoginForm v-if="isLogin" @toggle="toggleAuth" />
-          <RegisterForm v-else @toggle="toggleAuth" @success="isLogin = true" />
-        </Transition>
+        <!-- Formularios directos para evitar bugs de transición -->
+        <LoginForm v-if="isLogin" @toggle="toggleAuth" />
+        <RegisterForm v-else @toggle="toggleAuth" @success="isLogin = true" />
       </div>
 
       <!-- Footer -->
diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
index c437849..8c3d542 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -48,6 +48,7 @@ const userCoords = ref<{ lat: number; lng: number } | null>(null);
 const optimalStopPulse = ref<any>(null);
 const showRouteDropdown = ref(false);
 const isInternalSelection = ref(false);
+const forceDetailedZoom = ref(false);
 
 const alturaNavbar = ref(64);
 // Search state
@@ -385,6 +386,14 @@ async function updateMapMarkers(skipZoom = false) {
       return;
     }
 
+    // SI SE REQUIERE ZOOM DETALLADO (selección manual desde el mapa)
+    if (forceDetailedZoom.value) {
+        console.log('🤖 JARVIS: Aplicando zoom detallado a la parada más cercana...');
+        await highlightOptimalStopForRoute();
+        forceDetailedZoom.value = false; // Consumimos el flag
+        isInternalSelection.value = false; // Limpiamos el flag de control
+    }
+
     // All stop markers loop removed per request to avoid marking stops on map
   } finally {
     isUpdatingMarkers.value = false;
@@ -438,17 +447,23 @@ async function updatePromoMarkers() {
 
 async function selectRouteAndClose(routeId: string, routeName: string) {
   console.log(`🤖 JARVIS: Iniciando viaje hacia ${routeName}`);
+  
+  if (routeStore.selectedRouteId === routeId) {
+    // Si la ruta ya estaba seleccionada, solo hacemos el zoom y cerramos
+    showUberSearch.value = false;
+    showRouteDropdown.value = false;
+    await highlightOptimalStopForRoute();
+    return;
+  }
+
   isInternalSelection.value = true;
+  forceDetailedZoom.value = true;
   routeStore.wasSelectedFromMap = true;
   await routeStore.selectRoute(routeId, routeName);
   showRouteDropdown.value = false;
   showUberSearch.value = false; // Close the expanded search panel
   
-  // Highlight the optimal stop ONLY in this flow when initiated from the map search
-  if (routeStore.selectedRouteStops.length > 0) {
-    await highlightOptimalStopForRoute();
-  }
-  isInternalSelection.value = false;
+  // El zoom detallado ocurrirá dentro de updateMapMarkers cuando terminen de cargar los datos
 }
 async function updateActiveUnits() {
   if (!isLoaded.value) return;
@@ -574,7 +589,9 @@ async function highlightOptimalStopForRoute() {
     const stopObj = paradaCercana.value as BusStop;
     console.log(`🤖 JARVIS: Parada óptima detectada: ${stopObj.name}`);
     
-    // Ya no centramos o hacemos zoom aquí manual porque la nueva gráfica de updateMapMarkers ajusta bounds y engloba location.
+    // Restaurar centrado y zoom en la parada óptima para que el usuario la vea claramente
+    setCenter(stopObj.latitude, stopObj.longitude);
+    setZoom(17); // Zoom más cercano para ver la parada y alrededores
 
     // Añadir el PULSO NARANJA
     if (optimalStopPulse.value && typeof optimalStopPulse.value.setMap === 'function') {