refactor map page to TSX and split into focused modules (#47)

* refactor map page to TSX and split into focused modules

- Extract map concerns into hooks: useMapListingUrl (URL sync + optimistic
  pin selection to fix tap flicker), useListingsInView (debounced,
  cancellable, padded viewport fetch that preserves prior pins),
  useMapCenter (centralised fly-to rules), useIpInitialLocation, and
  useMapDrawerScroll.
- Split MapPageClient into MapPageClient + MapListingDrawer and
  MapImmersive into MapImmersive + MapPinLayer; move shared types and
  helpers into src/utils/mapUtils.ts.
- Convert MapPageClient, MapImmersive, MapPin, MapSearch, and MapSidebar
  (plus their barrels) from JSX to TSX with typed props.
- Strip extraneous console logs and add i18n strings for the return-to-
  listing button and the pin-loading chip.

Made-with: Cursor

* refactor

* fix styling

* fix(map): address Copilot PR feedback on map hooks and MapView

- Always render Map so DEFAULT_COORDINATES applies when IP lookup is null
- Accept latitude/longitude 0 in MapTiler geolocation response
- Refetch listing when public/private view changes after auth resolves
- Loosen debounce helper typings (document why any[] is needed)

Co-authored-by: Danny White <dnywh@users.noreply.github.com>

* fix(map): address second-pass PR feedback

- useIpInitialLocation: track setTimeout id and clear it in finally + effect
  cleanup so the losing race branch can't fire after the network call wins.
- useMapListingUrl: add a monotonic requestTokenRef; fetchBySlug and
  selectListingById ignore stale responses (and close invalidates any
  in-flight fetch) so older requests can't overwrite newer selections.
- MapPageClient: handleDrawerOpenChange now accepts the open arg and only
  calls closeListing when the drawer is actually closing.
- mapUtils: narrow getListingCoordinates / hasValidCoordinates via an
  explicit isListingError check instead of casting through isListing.

Made-with: Cursor

* fix(map): attach desktop drawer scroll listener when ref is already set

Previously, the desktop branch of useMapDrawerState only attached the scroll
listener inside the MutationObserver callback. If drawerContentRef.current
was already populated when the effect ran (common on subsequent listing
changes), no DOM mutation fired, the listener never attached, and the sticky
drawer header stayed hidden. Now we attach immediately when the ref is set
and only fall back to the observer when it isn't.

Made-with: Cursor

* fix(map): keep URL/UI in sync on tap failure; handle antimeridian in padBounds

- selectListingById no longer sets the error sentinel when the fetch fails.
  Tap-driven fetches happen before the URL is pushed, so the drawer would
  either stay closed (swallowing the error) or desync UI and URL while
  pointing at the previous listing. The optimistic pin id is reverted and
  `selectedListing` is left untouched, so UI and URL stay consistent.
- padBounds now wraps longitudes into [-180, 180] and splits the envelope
  into two when the padded viewport crosses the antimeridian. Callers
  iterate all returned boxes.
- useListingsInView fetches all returned boxes in parallel and merges
  responses, deduping by id.

Made-with: Cursor

* fix(map): restore optimistic pin to resolved listing on tap failure

When selectListingById's fetch fails while a previously resolved listing is
still visible in the drawer, the pin selection was being cleared to null —
leaving the drawer showing listing A with no pin highlighted. Now we capture
the currently-resolved listing id (via a ref mirroring selectedListing.id)
before the optimistic change, and revert to that id on failure so the pin
and the drawer stay in sync.

Made-with: Cursor

* fix(map): cancel in-flight fetch when URL loses listingSlug; cleanups

- useMapListingUrl: bump requestTokenRef when listingSlug becomes null so a
  late fetchBySlug response can't re-select the listing after browser back.
- ListingRead: memoize the Supabase client so the thread-loading effect
  doesn't re-run on every render; drop unused mapZoomLevel state + effect
  (MapThumbnail already uses initialZoomLevel directly).
- ListingChatDrawer: drop the dead listingDisplayName prop (was renamed to
  a discarded local); simplify isNested check to !isNested so an omitted
  prop is treated as "not nested".

Made-with: Cursor

* fix: narrow thread effect deps; share ListingType with MapPin

- ListingRead: the thread-loading effect depended on the whole realListing
  object, so any parent re-render with a new listing identity (even with
  the same id/owner_id) refetched the thread. Depend on the specific
  fields the effect reads instead.
- MapPin: drop the duplicated ListingPinType union and key the icon map on
  the shared ListingType. Adding a new listing type now surfaces as a
  compile error in MapPin, keeping the two from drifting out of sync.

Made-with: Cursor

* fix(map): restore IP-based initial centre; assorted review tweaks

- MapView: restore the hasInitialPosition gate. MapLibre's initialViewState
  is consumed once at mount, so mounting before the IP lookup resolves
  locks the map to DEFAULT_COORDINATES (Brisbane) even after IP data
  arrives. The gate waits for either a selected listing or the IP
  fallback to resolve before mounting.
- useIpInitialLocation: on timeout or error, fall back to
  DEFAULT_COORDINATES so the gate always eventually lifts (addresses the
  earlier concern about the map never rendering on IP failure).
- mapUtils: drop the unused DEFAULT_COORDINATES.zoom; ZOOM_LEVEL_DEFAULT
  is already the canonical default zoom.
- useMapListingUrl: memoize the Supabase client so fetchBySlug /
  selectListingById don't churn on every render.
- MapPin: tighten isListingPinType with hasOwnProperty.call so inherited
  prototype keys like "toString" can't incorrectly narrow to ListingType.

Made-with: Cursor

* fix(map): resolve initialCoordinates even when IP lookup is skipped

Deep links (skip: true) would leave initialCoordinates null forever; combined
with a listing that has no coordinates or resolves to an error sentinel, the
<Map> never mounted. Fall back to DEFAULT_COORDINATES on skip so MapView can
always render.

Made-with: Cursor

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Danny White <dnywh@users.noreply.github.com>

Author: dnywh

messages/de.json

@@ -378,6 +378,8 @@
     "searchPlaceholder": "Suchen",
     "searchError": "Etwas ist schiefgelaufen. Erneut versuchen?",
     "searchNoResults": "Keine Ergebnisse. Tippe weiter oder verfeinere deine Suche",
+    "returnToListing": "Zurück zum Eintrag",
+    "loadingPins": "Wird geladen…",
     "didYouKnow": "Wusstest du schon?",
     "steps": {
       "find": {

messages/en.json

@@ -378,6 +378,8 @@
     "searchPlaceholder": "Search",
     "searchError": "Something went wrong. Try again?",
     "searchNoResults": "No results. Keep typing or refine your search",
+    "returnToListing": "Return to listing",
+    "loadingPins": "Loading…",
     "didYouKnow": "Did you know?",
     "steps": {
       "find": {

messages/es.json

@@ -378,6 +378,8 @@
     "searchPlaceholder": "Buscar",
     "searchError": "Algo salió mal. ¿Intentarlo de nuevo?",
     "searchNoResults": "Sin resultados. Sigue escribiendo o ajusta tu búsqueda",
+    "returnToListing": "Volver al anuncio",
+    "loadingPins": "Cargando…",
     "didYouKnow": "¿Sabías que?",
     "steps": {
       "find": {

…core)/(interact)/(stretched)/map/page.js …ore)/(interact)/(stretched)/map/page.tsxsrc/app/(core)/(interact)/(stretched)/map/page.js renamed to src/app/(core)/(interact)/(stretched)/map/page.tsx src/app/(core)/(interact)/(stretched)/map/page.js renamed to src/app/(core)/(interact)/(stretched)/map/page.tsx

@@ -1,19 +1,27 @@
+import { cache } from "react";
+import type { Metadata } from "next/types";
+
 import { createClient } from "@/utils/supabase/server";
 import { siteConfig } from "@/config/site";
 import { generateListingMetadata } from "@/utils/listingUtils";
-import MapPageClient from "@/components/MapPageClient";
-import { cache } from "react";
+import MapPageClient from "@/features/map";
+import type { Listing } from "@/types/listing";
+
+type MapPageSearchParams = {
+  listing?: string;
+};
+
+type MapPageProps = {
+  searchParams: Promise<MapPageSearchParams>;
+};
 
-// Fetch data only once and use across metadata and page
-const getInitialData = cache(async (listingSlug) => {
+const getInitialData = cache(async (listingSlug: string | undefined) => {
   const supabase = await createClient();
 
-  // Get user first
   const {
     data: { user },
   } = await supabase.auth.getUser();
 
-  // Then get listing data if slug exists
   const listingResponse = listingSlug
     ? await supabase
         .from(user ? "listings_private_data" : "listings_public_data")
@@ -24,11 +32,13 @@ const getInitialData = cache(async (listingSlug) => {
 
   return {
     user,
-    listing: listingResponse?.data,
+    listing: (listingResponse?.data ?? null) as Listing | null,
   };
 });
 
-export async function generateMetadata({ searchParams }) {
+export async function generateMetadata({
+  searchParams,
+}: MapPageProps): Promise<Metadata> {
   const listingSlug = (await searchParams)?.listing;
 
   if (!listingSlug) {
@@ -42,18 +52,17 @@ export async function generateMetadata({ searchParams }) {
 
   const { user, listing } = await getInitialData(listingSlug);
 
-  // Use shared utility to generate metadata
   return generateListingMetadata(listing, user);
 }
 
-export default async function Page({ searchParams }) {
+export default async function Page({ searchParams }: MapPageProps) {
   const listingSlug = (await searchParams)?.listing;
   const { user, listing } = await getInitialData(listingSlug);
 
   return (
     <MapPageClient
       user={user}
-      initialListingSlug={listingSlug}
+      initialListingSlug={listingSlug ?? null}
       initialListing={listing}
     />
   );

src/app/actions.ts

@@ -494,7 +494,6 @@ export async function fetchListingsInView(
       return [];
     }
 
-    console.log(`Successfully fetched ${data?.length || 0} listings`);
     return data || [];
   } catch (error) {
     console.error("Fatal error in fetchListingsInView:", {

…/ListingChatDrawer/ListingChatDrawer.jsx …/ListingChatDrawer/ListingChatDrawer.tsxsrc/components/ListingChatDrawer/ListingChatDrawer.jsx renamed to src/components/ListingChatDrawer/ListingChatDrawer.tsx src/components/ListingChatDrawer/ListingChatDrawer.jsx renamed to src/components/ListingChatDrawer/ListingChatDrawer.tsx

@@ -1,11 +1,15 @@
 "use client";
+import type { ReactNode } from "react";
+import type { User } from "@supabase/supabase-js";
 import { useDeviceContext } from "@/hooks/useDeviceContext";
 import { Drawer } from "vaul";
 import Button from "@/components/Button";
 import ChatWindow from "@/components/ChatWindow";
 import ListingCta from "@/components/ListingCta";
 import { styled } from "@pigment-css/react";
 
+import type { Listing } from "@/types/listing";
+
 const sidebarWidth = "clamp(20rem, 30vw, 30rem)";
 
 const StyledDrawerOverlay = styled(Drawer.Overlay)({
@@ -15,7 +19,7 @@ const StyledDrawerOverlay = styled(Drawer.Overlay)({
 });
 
 const ListingCtaContainer = styled("div")({
-  padding: "0 1rem", // Match padding from other parts of ListingRead
+  padding: "0 1rem",
 
   "& > *": {
     width: "100%",
@@ -24,17 +28,16 @@ const ListingCtaContainer = styled("div")({
 
 const StyledDrawerContent = styled(Drawer.Content)(({ theme }) => ({
   background: theme.colors.background.top,
-  borderRadius: `${theme.corners.base} ${theme.corners.base} 0 0`, // Match over drawer content
+  borderRadius: `${theme.corners.base} ${theme.corners.base} 0 0`,
 
   overflowX: "hidden",
 
   "&::after": {
-    display: "none", // Otherwise seems to include side scroll, even when overflowX hidden
+    display: "none",
   },
 
   marginTop: "24px",
-  // maxHeight: "95%",
-  height: "95%", // Take up full height even if the message contents aren't overflowing yet
+  height: "95%",
   position: "fixed",
   bottom: "0",
   left: "0",
@@ -43,7 +46,7 @@ const StyledDrawerContent = styled(Drawer.Content)(({ theme }) => ({
   flexDirection: "column",
 
   "@media (min-width: 768px)": {
-    borderRadius: theme.corners.base, // Match over drawer content
+    borderRadius: theme.corners.base,
     height: "unset",
     marginTop: "unset",
     top: "24px",
@@ -52,53 +55,53 @@ const StyledDrawerContent = styled(Drawer.Content)(({ theme }) => ({
     left: "unset",
     outline: "none",
     width: sidebarWidth,
-    // height: "100%",
   },
 }));
 
-// We need to define two different drawer components, because depending on the 'modal' prop, a different number of hooks will be rendered
-// React doesn't like when we conditionally change the number of hooks. It's better to just render a separate component for each case
-// Shared drawer props to reduce repetition
-const getDrawerProps = ({
-  isNested,
-  isChatDrawerOpen,
-  setIsChatDrawerOpen,
-  isDesktop,
-  ...rest
-}) => ({
-  isNested,
-  direction: isDesktop ? "right" : undefined,
-  open: isChatDrawerOpen,
-  onOpenChange: setIsChatDrawerOpen,
-  ...rest,
-});
-
-const ModalDrawer = (props) => {
-  const DrawerComponent = props.isNested ? Drawer.NestedRoot : Drawer.Root;
-  return <DrawerComponent modal={true} {...getDrawerProps(props)} />;
+type ListingChatDrawerProps = {
+  isNested?: boolean;
+  user: User | null;
+  listing: Listing;
+  isChatDrawerOpen: boolean;
+  setIsChatDrawerOpen: (open: boolean) => void;
+  existingThread: unknown;
 };
 
-const NonModalDrawer = (props) => {
-  const DrawerComponent = props.isNested ? Drawer.NestedRoot : Drawer.Root;
-  return <DrawerComponent modal={false} {...getDrawerProps(props)} />;
+type SharedDrawerProps = {
+  isNested?: boolean;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  direction?: "right";
+  children?: ReactNode;
 };
 
+// We need two drawer variants because `modal` changes which hooks vaul renders.
+function ModalDrawer({ isNested, ...rest }: SharedDrawerProps) {
+  const DrawerComponent = isNested ? Drawer.NestedRoot : Drawer.Root;
+  return <DrawerComponent modal={true} {...rest} />;
+}
+
+function NonModalDrawer({ isNested, ...rest }: SharedDrawerProps) {
+  const DrawerComponent = isNested ? Drawer.NestedRoot : Drawer.Root;
+  return <DrawerComponent modal={false} {...rest} />;
+}
+
 export default function ListingChatDrawer({
   isNested,
   user,
   listing,
   isChatDrawerOpen,
   setIsChatDrawerOpen,
   existingThread,
-  listingDisplayName,
-  ...props
-}) {
+}: ListingChatDrawerProps) {
   const { isDesktop, hasTouch } = useDeviceContext();
 
-  // We can infer modal behavior based on presentation
-  // If it's a mobile breakpoint, always use a model
-  // If it's a desktop breakpoint, only use a modal if it's NOT a nested drawer
-  const shouldUseModal = !isDesktop || isNested === false;
+  // Mobile: always modal. Desktop: modal only if NOT a nested drawer.
+  // (`!isNested` treats an omitted prop the same as `false`.)
+  const shouldUseModal = !isDesktop || !isNested;
+
+  const visibility = listing.visibility ?? undefined;
+  const isStub = listing.is_stub ?? undefined;
 
   const drawerContent = (
     <>
@@ -108,14 +111,14 @@ export default function ListingChatDrawer({
             <ListingCta
               viewer="owner"
               slug={listing.slug}
-              visibility={listing.visibility}
-              isStub={listing.is_stub}
+              visibility={visibility}
+              isStub={isStub}
             />
           ) : listing.is_stub ? (
             <ListingCta
               viewer="guest"
               slug={listing.slug}
-              visibility={listing.visibility}
+              visibility={visibility}
               isStub={true}
             />
           ) : (
@@ -129,8 +132,8 @@ export default function ListingChatDrawer({
           <ListingCta
             viewer="guest"
             slug={listing.slug}
-            visibility={listing.visibility}
-            isStub={listing.is_stub}
+            visibility={visibility}
+            isStub={isStub}
           />
         )}
       </ListingCtaContainer>
@@ -154,10 +157,9 @@ export default function ListingChatDrawer({
   return (
     <DrawerComponent
       isNested={isNested}
-      isChatDrawerOpen={isChatDrawerOpen}
-      setIsChatDrawerOpen={setIsChatDrawerOpen}
-      isDesktop={isDesktop}
-      {...props}
+      open={isChatDrawerOpen}
+      onOpenChange={setIsChatDrawerOpen}
+      direction={isDesktop ? "right" : undefined}
     >
       {drawerContent}
     </DrawerComponent>