feat: auto-geolocation improves, fix route stops query and map soft-reset

frontend/src/components/map/SearchOverlay.vue

@@ -35,11 +35,22 @@
           </button>
           <div class="search-title">{{ t('map.availableRoutes') }}</div>
         </div>
+        <!-- Search Input -->
+        <div class="search-input-wrapper">
+          <span class="material-icons search-field-icon">search</span>
+          <input 
+            v-model="searchQuery" 
+            type="text" 
+            :placeholder="t('map.search')" 
+            class="route-search-input"
+            autofocus
+          />
+        </div>
 
         <!-- Results -->
         <div class="uber-results custom-scrollbar">
           <div 
-            v-for="route in allRoutes" 
+            v-for="route in filteredRoutes" 
             :key="route.id" 
             class="uber-result-item"
             :class="{ 'selected-route': route.id === selectedRouteId && wasSelectedFromMap }"
@@ -63,6 +74,7 @@
 </template>
 
 <script setup lang="ts">
+import { ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const props = defineProps<{
@@ -77,6 +89,17 @@ const props = defineProps<{
 defineEmits(['open', 'close', 'select-route'])
 
 const { t } = useI18n()
+const searchQuery = ref('')
+
+const filteredRoutes = computed(() => {
+  if (!searchQuery.value.trim()) return props.allRoutes
+  const query = searchQuery.value.toLowerCase().trim()
+  return props.allRoutes.filter(r => 
+    r.name.toLowerCase().includes(query) || 
+    (r.origin_city && r.origin_city.toLowerCase().includes(query)) ||
+    (r.destination_city && r.destination_city.toLowerCase().includes(query))
+  )
+})
 </script>
 
 <style scoped>
@@ -175,6 +198,39 @@ const { t } = useI18n()
   font-weight: 800;
 }
 
+.search-input-wrapper {
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.search-field-icon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-secondary);
+  pointer-events: none;
+}
+
+.route-search-input {
+  width: 100%;
+  padding: 12px 12px 12px 40px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  color: var(--text-primary);
+  font-family: inherit;
+  font-size: 0.95rem;
+  font-weight: 600;
+  transition: border-color 0.2s;
+}
+
+.route-search-input:focus {
+  outline: none;
+  border-color: var(--active-color);
+  box-shadow: 0 0 0 2px rgba(254, 231, 21, 0.2);
+}
+
 .uber-results {
   max-height: 400px;
   overflow-y: auto;