UI: Improve location button behavior and add Smart Location toggle in profile

frontend/src/views/MapView.vue

@@ -56,6 +56,7 @@ const showPromoModal = ref(false);
 const selectedPromo = ref<any>(null);
 const currentCarouselIndex = ref(0);
 const carouselTimer = ref<any>(null);
+const isMapMoved = ref(false);
 
 // Search optimization: Simple debounce implementation
 // Helper functions
@@ -142,6 +143,11 @@ async function initializeMap() {
     map.value.addListener('click', () => {
       if (showETACard.value) showETACard.value = false;
     });
+
+    // Detect user interaction with the map to show/hide location button
+    map.value.addListener('dragstart', () => {
+      isMapMoved.value = true;
+    });
   }
   
   if (routeStore.selectedRouteId && routeStore.selectedRouteStops.length > 0 && routeStore.wasSelectedFromMap) {
@@ -286,6 +292,7 @@ function locateUser(): Promise<void> {
         setCenter(latitude, longitude);
         setZoom(16);
         reDrawUserMarker();
+        isMapMoved.value = false; // Reset interaction state
         resolve();
       },
       () => {
@@ -366,7 +373,7 @@ function handleImageError(event: Event) {
               <span v-if="couponStore.coupons.length > 0" class="offers-badge">{{ couponStore.coupons.length }}</span>
             </button>
 
-            <button v-if="isLoaded && !authStore.userProfile?.auto_location" class="location-loader-btn" @click="locateUser">
+            <button v-if="isLoaded && (!authStore.userProfile?.auto_location || isMapMoved)" class="location-loader-btn" @click="locateUser">
               <span class="material-icons">my_location</span>
             </button>
           </div>