fix map prod e2e search bounds flake (#103)

* fix map prod e2e search bounds flake and local media seed noise

Seed map search context from saved coordinates before MapLibre idle so
production Playwright runs do not open search without proximity/bbox.
Also seed limit/*.jpg fixtures for the max_photos media test and migrate
Supabase local email config from deprecated inbucket to local_smtp.

* revert supabase config to inbucket for branch compatibility

Supabase branch parsing does not yet accept the local_smtp key; keep
inbucket until hosted Supabase catches up with the newer CLI schema.

Author: dnywh

e2e/map.spec.ts

@@ -376,6 +376,10 @@ test("map search is bounded by the current map instead of IP country", async ({
     ).toBeVisible({
       timeout: 10_000,
     });
+    await expect(page.getByTestId("map-view")).toHaveAttribute(
+      "data-search-context-ready",
+      "true"
+    );
 
     await page.getByTestId("map-control-search").click();
     await page.getByTestId("geocoding-search-input").fill("Newtown");

scripts/seed-local-media.mjs

@@ -188,6 +188,34 @@ async function main() {
     await uploadBucketObjects(supabase, bucketName, bucketConfig);
   }
 
+  const listingPhotoFixture = path.join(
+    repoRoot,
+    "supabase",
+    "storage",
+    "listing_photos",
+    "demo",
+    "garden.jpg"
+  );
+  const listingPhotoBody = readFileSync(listingPhotoFixture);
+
+  for (const photoName of ["one", "two", "three", "four", "five"]) {
+    const objectPath = `limit/${photoName}.jpg`;
+    const { error } = await supabase.storage
+      .from("listing_photos")
+      .upload(objectPath, listingPhotoBody, {
+        contentType: "image/jpeg",
+        upsert: true,
+      });
+
+    if (error) {
+      throw new Error(
+        `Failed to upload listing_photos/${objectPath}: ${error.message}`
+      );
+    }
+
+    console.log(`Uploaded listing_photos/${objectPath}`);
+  }
+
   console.log("Local demo media seeding complete.");
 }
 

src/features/map/components/MapView.tsx

@@ -27,6 +27,7 @@ import {
   MAP_MAX_ZOOM,
   ZOOM_LEVEL_DEFAULT,
   ZOOM_LEVEL_SELECTED,
+  approximateBoundsFromViewState,
   getListingCoordinates,
   hasValidCoordinates,
   padBounds,
@@ -212,6 +213,20 @@ function resolveMapSearchContext(bounds: LngLatBounds): MapSearchContext {
   return { bbox, proximity };
 }
 
+function resolveInitialSearchContext(
+  initialCoordinates: InitialMapCoordinates | null
+): MapSearchContext | null {
+  if (!initialCoordinates) return null;
+
+  return resolveMapSearchContext(
+    approximateBoundsFromViewState(
+      initialCoordinates.longitude,
+      initialCoordinates.latitude,
+      initialCoordinates.zoom
+    )
+  );
+}
+
 function resolveInitialViewState(
   selectedListing: SelectedListing | null,
   initialCoordinates: InitialMapCoordinates | null
@@ -252,7 +267,7 @@ export default function MapView({
   const mapContainerRef = useRef<HTMLDivElement | null>(null);
   const [isSearchOpen, setIsSearchOpen] = useState(false);
   const [searchContext, setSearchContext] = useState<MapSearchContext | null>(
-    null
+    () => resolveInitialSearchContext(initialCoordinates)
   );
   const [userCoordinates, setUserCoordinates] = useState<{
     latitude: number;
@@ -427,6 +442,19 @@ export default function MapView({
     }
   }, [initialCoordinates]);
 
+  useEffect(() => {
+    if (!initialCoordinates) return;
+
+    setSearchContext((currentSearchContext) => {
+      if (currentSearchContext?.bbox) return currentSearchContext;
+
+      const nextSearchContext = resolveInitialSearchContext(initialCoordinates);
+      return areSearchContextsEqual(currentSearchContext, nextSearchContext)
+        ? currentSearchContext
+        : nextSearchContext;
+    });
+  }, [initialCoordinates]);
+
   const scheduleStoredMapViewSave = useCallback(() => {
     if (saveMapViewTimeoutRef.current !== null) {
       clearTimeout(saveMapViewTimeoutRef.current);
@@ -539,6 +567,11 @@ export default function MapView({
     );
   }, [flyToCoordinate]);
 
+  const handleOpenSearch = useCallback(() => {
+    syncCurrentMapState();
+    setIsSearchOpen(true);
+  }, [syncCurrentMapState]);
+
   const handleSearchPick = useCallback(
     (feature: GeocodingFeature) => {
       const center = feature.center;
@@ -561,6 +594,7 @@ export default function MapView({
       ref={mapContainerRef}
       role="region"
       aria-label={t("mapRegionLabel")}
+      data-search-context-ready={searchContext?.proximity ? "true" : "false"}
       data-testid="map-view"
       style={initialMapPinZoomStyleRef.current ?? undefined}
     >
@@ -612,7 +646,7 @@ export default function MapView({
             locateActive={Boolean(userCoordinates)}
             locateLabel={t("locateControl")}
             onLocate={handleLocate}
-            onSearch={() => setIsSearchOpen(true)}
+            onSearch={handleOpenSearch}
             onZoomIn={zoomIn}
             onZoomOut={zoomOut}
             searchLabel={t("searchLabel")}

src/features/map/lib/mapUtils.test.ts

@@ -2,7 +2,7 @@ import test from "node:test";
 import assert from "node:assert/strict";
 import type { LngLatBounds } from "maplibre-gl";
 
-import { padBounds } from "./mapUtils.ts";
+import { approximateBoundsFromViewState, padBounds } from "./mapUtils.ts";
 
 function bounds(
   south: number,
@@ -34,3 +34,13 @@ test("padBounds still splits antimeridian crossings", () => {
     { south: -16, north: 16, west: -180, east: -164 },
   ]);
 });
+
+test("approximateBoundsFromViewState centres on the saved map view", () => {
+  const approximateBounds = approximateBoundsFromViewState(151.16, -33.91, 7);
+
+  assert.ok(approximateBounds.contains([151.16, -33.91]));
+  assert.ok(approximateBounds.getWest() < 151.16);
+  assert.ok(approximateBounds.getEast() > 151.16);
+  assert.ok(approximateBounds.getSouth() < -33.91);
+  assert.ok(approximateBounds.getNorth() > -33.91);
+});

src/features/map/lib/mapUtils.ts

@@ -85,6 +85,62 @@ export function wrapLongitude(lng: number): number {
   return ((((lng + 180) % 360) + 360) % 360) - 180;
 }
 
+const DEFAULT_MAP_VIEWPORT_WIDTH = 1280;
+const DEFAULT_MAP_VIEWPORT_HEIGHT = 900;
+
+function createBounds(
+  west: number,
+  south: number,
+  east: number,
+  north: number
+): LngLatBounds {
+  return {
+    getSouthWest: () => ({ lat: south, lng: west }),
+    getNorthEast: () => ({ lat: north, lng: east }),
+    getCenter: () => ({
+      lng: wrapLongitude((west + east) / 2),
+      lat: (south + north) / 2,
+    }),
+    contains: (coordinate) => {
+      const lng = Array.isArray(coordinate)
+        ? coordinate[0]
+        : "lng" in coordinate
+          ? coordinate.lng
+          : coordinate.lon;
+      const lat = Array.isArray(coordinate) ? coordinate[1] : coordinate.lat;
+
+      return lat >= south && lat <= north && lng >= west && lng <= east;
+    },
+    getWest: () => west,
+    getEast: () => east,
+    getSouth: () => south,
+    getNorth: () => north,
+  } as LngLatBounds;
+}
+
+// Approximate the current viewport bounds from a saved map view before MapLibre
+// has finished loading. Search can use these immediately and refine them on idle.
+export function approximateBoundsFromViewState(
+  longitude: number,
+  latitude: number,
+  zoom: number,
+  width = DEFAULT_MAP_VIEWPORT_WIDTH,
+  height = DEFAULT_MAP_VIEWPORT_HEIGHT
+): LngLatBounds {
+  const scale = 512 * 2 ** zoom;
+  const lngDelta = (360 / scale) * (width / 2);
+  const latRad = (latitude * Math.PI) / 180;
+  const latDelta =
+    ((360 / scale) * (height / 2)) / Math.max(Math.cos(latRad), 0.01);
+
+  const south = Math.max(-90, latitude - latDelta);
+  const north = Math.min(90, latitude + latDelta);
+  const west = wrapLongitude(longitude - lngDelta);
+  const east = wrapLongitude(longitude + lngDelta);
+
+  return createBounds(west, south, east, north);
+}
+
 // Expand a viewport bbox by a fraction (e.g. 0.3 => 30% larger in each
 // direction). This lets us fetch a slightly padded area so that small pans
 // reuse already-loaded pins without hitting the network again.