refactor(mobile/search): pick a place to recenter the map

Typed queries now hit places.search and render neighbourhoods
and landmarks — no more mixing with local mosque results.
Tapping a result navigates to the map with lat/lng params; the
map animates there, pins a marker, and refetches nearby mosques
from the picked centre via the existing mosques.nearby hook.
Recenter button clears the picked-place override. Recent and
popular sections at the bottom still show mosques when the
search input is empty.

Author: Aqib-Rime

apps/mobile/features/map/components/map-screen.tsx

@@ -1,8 +1,10 @@
 import type BottomSheet from "@gorhom/bottom-sheet";
+import { router, useLocalSearchParams } from "expo-router";
 import { StatusBar } from "expo-status-bar";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Pressable, StyleSheet, View } from "react-native";
-import MapView, { PROVIDER_GOOGLE } from "react-native-maps";
+import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps";
+import { Icon } from "@/components/ui/icon";
 import {
   applyFilters,
   countActive,
@@ -18,16 +20,44 @@ import { MapMarkers } from "./map-markers";
 import { MapMosqueSheet } from "./map-mosque-sheet";
 import { MapTopOverlay } from "./map-top-overlay";
 
+type PickedPlace = { lat: number; lng: number; name?: string };
+
+function parsePickedPlace(
+  params: Record<string, string | string[] | undefined>,
+): PickedPlace | null {
+  const lat = Array.isArray(params.lat) ? params.lat[0] : params.lat;
+  const lng = Array.isArray(params.lng) ? params.lng[0] : params.lng;
+  const name = Array.isArray(params.placeName)
+    ? params.placeName[0]
+    : params.placeName;
+  if (!lat || !lng) return null;
+  const latNum = Number(lat);
+  const lngNum = Number(lng);
+  if (!Number.isFinite(latNum) || !Number.isFinite(lngNum)) return null;
+  return { lat: latNum, lng: lngNum, name };
+}
+
 export function MapScreen() {
   const filters = useMosqueFilters();
   const activeFilters = countActive(filters);
   const userPos = useUserLocation();
 
-  // Use the server-side distance filter when the user has both a location and a radius.
+  const searchParams = useLocalSearchParams();
+  const pickedPlace = useMemo(
+    () => parsePickedPlace(searchParams),
+    [searchParams],
+  );
+
+  // The centre point used for nearby-mosque fetches. Picked place overrides
+  // the user's real location so "explore Gulshan" shows mosques near Gulshan,
+  // not near the user's actual GPS position.
+  const center = pickedPlace ?? userPos;
+
+  // Use the server-side distance filter when we have both a centre and a radius.
   // Otherwise fall back to the full list (we still apply toggles client-side).
   const nearbyParams =
-    userPos && filters.radiusKm != null
-      ? { lat: userPos.lat, lng: userPos.lng, radiusKm: filters.radiusKm }
+    center && filters.radiusKm != null
+      ? { lat: center.lat, lng: center.lng, radiusKm: filters.radiusKm }
       : null;
 
   const list = useMosquesList({ pageSize: 50 });
@@ -46,12 +76,26 @@ export function MapScreen() {
   const sheetRef = useRef<BottomSheet>(null);
   const mapRef = useRef<MapView>(null);
 
-  const coords = userPos ?? {
+  const coords = center ?? {
     lat: DHAKA_REGION.latitude,
     lng: DHAKA_REGION.longitude,
   };
   const { data: prayer } = usePrayerTimes(coords);
 
+  // Animate to the picked place when it changes.
+  useEffect(() => {
+    if (!pickedPlace) return;
+    mapRef.current?.animateToRegion(
+      {
+        latitude: pickedPlace.lat,
+        longitude: pickedPlace.lng,
+        latitudeDelta: 0.04,
+        longitudeDelta: 0.04,
+      },
+      600,
+    );
+  }, [pickedPlace]);
+
   const handleMarkerPress = useCallback((m: MosqueListItem) => {
     setSelected(m);
     sheetRef.current?.snapToIndex(0);
@@ -76,6 +120,15 @@ export function MapScreen() {
       lat: DHAKA_REGION.latitude,
       lng: DHAKA_REGION.longitude,
     };
+    // Pressing recenter drops any picked-place override and returns to the
+    // user's real location.
+    if (pickedPlace) {
+      router.setParams({
+        lat: undefined,
+        lng: undefined,
+        placeName: undefined,
+      });
+    }
     mapRef.current?.animateToRegion(
       {
         latitude: target.lat,
@@ -85,7 +138,7 @@ export function MapScreen() {
       },
       500,
     );
-  }, [userPos]);
+  }, [userPos, pickedPlace]);
 
   return (
     <View className="flex-1 bg-cream">
@@ -103,6 +156,20 @@ export function MapScreen() {
         onPoiClick={handleCloseSheet}
       >
         <MapMarkers mosques={mosques} onSelect={handleMarkerPress} />
+        {pickedPlace ? (
+          <Marker
+            coordinate={{
+              latitude: pickedPlace.lat,
+              longitude: pickedPlace.lng,
+            }}
+            title={pickedPlace.name ?? "Picked location"}
+            pinColor="#2e5d45"
+          >
+            <View className="h-7 w-7 items-center justify-center rounded-pill border-2 border-white bg-green shadow-sm">
+              <Icon name="pin" size={14} color="#ffffff" />
+            </View>
+          </Marker>
+        ) : null}
       </MapView>
 
       {menuOpen ? (
@@ -119,7 +186,7 @@ export function MapScreen() {
         timings={prayer?.timings ?? null}
         onRetry={() => refetch()}
         onRecenter={handleRecenter}
-        canRecenter={Boolean(userPos)}
+        canRecenter={Boolean(userPos) || Boolean(pickedPlace)}
         activeFilters={activeFilters}
         menuOpen={menuOpen}
         onOpenMenu={() => setMenuOpen(true)}

apps/mobile/features/mosques/components/search-modal-screen.tsx

@@ -1,30 +1,25 @@
 import { useQuery } from "@tanstack/react-query";
 import { StatusBar } from "expo-status-bar";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { ScrollView, View } from "react-native";
 import { Icon } from "@/components/ui/icon";
 import { Text } from "@/components/ui/text";
 import { api } from "@/lib/api";
 import { useUserLocation } from "@/lib/use-user-location";
 import { useMosquesList } from "../hooks/use-mosques";
-import { applySearch } from "../lib/apply-filters";
 import { SearchInputBar } from "./search-input-bar";
 import { SearchPlacesRow } from "./search-places-row";
 import { SearchPopularSection } from "./search-popular-section";
 import { SearchRecentSection } from "./search-recent-section";
-import { SearchResultRow } from "./search-result-row";
-import { SearchResultsSkeleton } from "./search-results-skeleton";
 
 export function SearchModalScreen() {
   const [query, setQuery] = useState("");
   const [debouncedQuery, setDebouncedQuery] = useState("");
-  const { data, isLoading } = useMosquesList({ pageSize: 50 });
+  const { data } = useMosquesList({ pageSize: 50 });
   const mosques = data?.data ?? [];
   const userPos = useUserLocation();
 
-  const results = useMemo(() => applySearch(mosques, query), [mosques, query]);
-
-  // Debounce the query before hitting Google Places so slider-quick typing
+  // Debounce before hitting Google Places so slider-quick typing
   // doesn't burn quota. 400ms feels responsive without being chatty.
   useEffect(() => {
     const trimmed = query.trim();
@@ -46,7 +41,7 @@ export function SearchModalScreen() {
       userPos?.lng,
     ] as const,
     queryFn: () =>
-      api.places.searchMosques({
+      api.places.search({
         query: debouncedQuery,
         lat: userPos?.lat,
         lng: userPos?.lng,
@@ -56,6 +51,8 @@ export function SearchModalScreen() {
   });
 
   const placeResults = places.data?.data ?? [];
+  const searching = placesEnabled;
+  const isPlacesLoading = places.isFetching && placeResults.length === 0;
 
   return (
     <View className="flex-1 bg-cream">
@@ -71,37 +68,35 @@ export function SearchModalScreen() {
         keyboardShouldPersistTaps="handled"
         showsVerticalScrollIndicator={false}
       >
-        {isLoading ? (
-          <SearchResultsSkeleton />
-        ) : query ? (
+        {searching ? (
           <View className="gap-s-6">
-            {results.length === 0 && placeResults.length === 0 ? (
+            <Text variant="eyebrow" tone="muted">
+              Places
+            </Text>
+
+            {isPlacesLoading ? (
+              <View className="items-center rounded-md bg-white py-s-6">
+                <Text variant="caption" tone="muted">
+                  Searching…
+                </Text>
+              </View>
+            ) : placeResults.length === 0 ? (
               <View className="items-center gap-s-2 rounded-md bg-white px-s-5 py-s-8">
                 <Icon name="search" size={28} color="#6b7a70" />
                 <Text variant="label" tone="muted">
-                  No matches for "{query.trim()}"
+                  No places found for "{query.trim()}"
+                </Text>
+                <Text variant="caption" tone="muted" className="text-center">
+                  Try a neighbourhood, landmark, or address.
                 </Text>
               </View>
-            ) : null}
-
-            {results.length > 0 ? (
-              <View className="gap-s-3">
-                {results.map((m) => (
-                  <SearchResultRow key={m.id} mosque={m} />
-                ))}
-              </View>
-            ) : null}
-
-            {placesEnabled && placeResults.length > 0 ? (
+            ) : (
               <View className="gap-s-3">
-                <Text variant="eyebrow" tone="muted">
-                  More nearby — via Google
-                </Text>
                 {placeResults.map((p) => (
                   <SearchPlacesRow key={p.placeId} place={p} />
                 ))}
               </View>
-            ) : null}
+            )}
           </View>
         ) : (
           <View className="gap-s-7">

apps/mobile/features/mosques/components/search-places-row.tsx

@@ -1,4 +1,5 @@
-import { Alert, Pressable, View } from "react-native";
+import { router } from "expo-router";
+import { Pressable, View } from "react-native";
 import { Icon } from "@/components/ui/icon";
 import { Text } from "@/components/ui/text";
 
@@ -7,6 +8,8 @@ type Props = {
     placeId: string;
     name: string;
     address: string | null;
+    lat: number;
+    lng: number;
     distanceKm?: number;
   };
 };
@@ -17,34 +20,32 @@ function formatDistance(km: number) {
 }
 
 export function SearchPlacesRow({ place }: Props) {
-  const onSuggest = () => {
-    Alert.alert(
-      "Suggest this mosque",
-      `${place.name} isn't in Qibla yet. We'll review and add it soon — thanks for flagging it.`,
-      [{ text: "OK", style: "default" }],
-    );
+  const onPick = () => {
+    // Recenter the map on this place; nearby mosques will refetch from the
+    // new center via map-screen's search-params handling.
+    router.replace({
+      pathname: "/(tabs)/map",
+      params: {
+        lat: String(place.lat),
+        lng: String(place.lng),
+        placeName: place.name,
+      },
+    });
   };
 
   return (
     <Pressable
-      onPress={onSuggest}
-      className="flex-row items-center gap-s-3 rounded-md border border-dashed border-line bg-white p-s-4"
+      onPress={onPick}
+      className="flex-row items-center gap-s-3 rounded-md bg-white p-s-4"
       style={({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })}
     >
-      <View className="h-10 w-10 items-center justify-center rounded-sm bg-[#f4ead0]">
-        <Icon name="pin" size={16} color="#8a6a1f" />
+      <View className="h-10 w-10 items-center justify-center rounded-sm bg-green-tint">
+        <Icon name="pin" size={16} color="#2e5d45" />
       </View>
       <View className="flex-1">
-        <View className="flex-row items-center gap-s-2">
-          <Text variant="label" numberOfLines={1} className="flex-1">
-            {place.name}
-          </Text>
-          <View className="rounded-sm bg-[#f4ead0] px-s-2 py-s-1">
-            <Text variant="caption" tone="muted" className="text-[10px]">
-              GOOGLE
-            </Text>
-          </View>
-        </View>
+        <Text variant="label" numberOfLines={1}>
+          {place.name}
+        </Text>
         {place.address ? (
           <Text
             variant="caption"