From 1d3f0ce2fae5822fd1028a879c6c3d5d817d66ea Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Thu, 12 Mar 2026 13:53:56 -0500
Subject: [PATCH] fix(ui): Adjust bottom nav padding, fix router scroll, keep
 session on PWA, and add ETA loading state

---
 frontend/src/components/auth/LoginForm.vue | 2 +-
 frontend/src/components/map/ETACard.vue    | 6 ++++--
 frontend/src/router/index.ts               | 7 +++++++
 frontend/src/views/MapView.vue             | 8 +++++---
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/auth/LoginForm.vue b/frontend/src/components/auth/LoginForm.vue
index 7e74ddf..a3422a6 100644
--- a/frontend/src/components/auth/LoginForm.vue
+++ b/frontend/src/components/auth/LoginForm.vue
@@ -11,7 +11,7 @@ const authStore = useAuthStore()
 
 const email = ref('')
 const password = ref('')
-const keepSession = ref(false)
+const keepSession = ref(true)
 const isLoading = ref(false)
 const errorMessage = ref('')
 const showPassword = ref(false)
diff --git a/frontend/src/components/map/ETACard.vue b/frontend/src/components/map/ETACard.vue
index 846d9a2..31d4db2 100644
--- a/frontend/src/components/map/ETACard.vue
+++ b/frontend/src/components/map/ETACard.vue
@@ -28,7 +28,7 @@
       </p>
 
       <!-- Cabecera de la parada -->
-      <div v-if="stopName" class="mt-4 flex items-start gap-4 pb-4 border-b border-gray-100 dark:border-gray-800">
+      <div v-if="stopName && !isLoading" class="mt-4 flex items-start gap-4 pb-4 border-b border-gray-100 dark:border-gray-800">
         <div class="bg-blue-100 dark:bg-blue-900/40 p-3 rounded-2xl flex-shrink-0">
           <span class="material-icons text-blue-600 dark:text-blue-400 text-3xl">place</span>
         </div>
@@ -51,7 +51,9 @@
         <!-- Estado de carga -->
         <div v-if="isLoading" class="flex flex-col items-center justify-center py-8">
           <div class="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
-          <span class="mt-4 text-gray-500 dark:text-gray-400 font-medium animate-pulse">Calculando satélites...</span>
+          <span class="mt-4 text-gray-500 dark:text-gray-400 font-medium animate-pulse">
+            {{ stopName ? 'Calculando llegada...' : 'Cargando datos de ruta...' }}
+          </span>
         </div>
 
         <!-- Sin servicio -->
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index aa782dd..e2f9859 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -5,6 +5,13 @@ import { useAuthStore } from '@/stores/auth'
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
+    scrollBehavior(_to, _from, savedPosition) {
+        if (savedPosition) {
+            return savedPosition;
+        } else {
+            return { top: 0 };
+        }
+    },
     routes: [
         // ─── Vistas Públicas Core ───────────────────────────────────────────
         {
diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
index 6a8eab1..64cd173 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -701,7 +701,7 @@ watch([() => authStore.userProfile?.auto_location, isLoaded], ([canLocate, loade
       :walk-distance="distanciaMetros"
       :walk-duration="duracionCaminata"
       :buses="busesActivos"
-      :is-loading="etaCargando"
+      :is-loading="etaCargando || isUpdatingMarkers || flujoCargando"
       @close="handleETACardDismiss"
       @refresh="paradaCercana && routeStore.selectedRouteId ? calcularETA(routeStore.selectedRouteId, paradaCercana) : null"
     />
@@ -751,7 +751,7 @@ watch([() => authStore.userProfile?.auto_location, isLoaded], ([canLocate, loade
 
 .map-floating-controls {
   position: fixed;
-  bottom: 85px; 
+  bottom: calc(95px + var(--safe-area-bottom)); 
   right: 16px;
   display: flex;
   flex-direction: column;
@@ -865,6 +865,8 @@ watch([() => authStore.userProfile?.auto_location, isLoaded], ([canLocate, loade
 }
 
 @media (max-width: 600px) {
-  .map-floating-controls { bottom: 100px; }
+  .map-floating-controls { 
+    bottom: calc(100px + var(--safe-area-bottom)); 
+  }
 }
 </style>