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

Author: dnywh

src/components/ListingChatDrawer/ListingChatDrawer.tsx

@@ -65,7 +65,6 @@ type ListingChatDrawerProps = {
   isChatDrawerOpen: boolean;
   setIsChatDrawerOpen: (open: boolean) => void;
   existingThread: unknown;
-  listingDisplayName: string;
 };
 
 type SharedDrawerProps = {
@@ -94,12 +93,12 @@ export default function ListingChatDrawer({
   isChatDrawerOpen,
   setIsChatDrawerOpen,
   existingThread,
-  listingDisplayName: _listingDisplayName,
 }: ListingChatDrawerProps) {
   const { isDesktop, hasTouch } = useDeviceContext();
 
   // Mobile: always modal. Desktop: modal only if NOT a nested drawer.
-  const shouldUseModal = !isDesktop || isNested === false;
+  // (`!isNested` treats an omitted prop the same as `false`.)
+  const shouldUseModal = !isDesktop || !isNested;
 
   const visibility = listing.visibility ?? undefined;
   const isStub = listing.is_stub ?? undefined;

src/components/ListingRead/ListingRead.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { Fragment, useState, memo, useEffect } from "react";
+import { Fragment, useState, memo, useEffect, useMemo } from "react";
 import type { ReactNode } from "react";
 import type { User } from "@supabase/supabase-js";
 
@@ -47,12 +47,17 @@ const ListingRead = memo(function Listing({
   const router = useRouter();
 
   const [existingThread, setExistingThread] = useState<unknown>(null);
-  const [mapZoomLevel, setMapZoomLevel] = useState<number | null>(null);
   // Chat drawer state is owned here so that each selected listing gets a
   // fresh drawer. The parent resets this by remounting with `key`.
   const [isChatDrawerOpen, setIsChatDrawerOpen] = useState(false);
 
-  const supabase = presentation !== "demo" ? createClient() : null;
+  // `createClient()` builds a new Supabase browser client on every call, so
+  // memoize to keep the reference stable — otherwise the thread-loading
+  // effect below (which depends on `supabase`) would re-run on every render.
+  const supabase = useMemo(
+    () => (presentation !== "demo" ? createClient() : null),
+    [presentation]
+  );
 
   const isDemo = presentation === "demo";
   const demoListing = isDemoListing(listing) ? listing : null;
@@ -93,9 +98,6 @@ const ListingRead = memo(function Listing({
   }, [realListing?.id, user?.id, isDemo, supabase, realListing]);
 
   const initialZoomLevel = 14;
-  useEffect(() => {
-    setMapZoomLevel(initialZoomLevel);
-  }, []);
 
   const listingDisplayName: string = isDemo
     ? (demoListing?.name ?? demoListing?.owner_first_name ?? "")
@@ -135,7 +137,6 @@ const ListingRead = memo(function Listing({
             isChatDrawerOpen={isChatDrawerOpen}
             setIsChatDrawerOpen={setIsChatDrawerOpen}
             existingThread={existingThread}
-            listingDisplayName={listingDisplayName}
           />
         ) : null}
 

src/features/map/hooks/useMapListingUrl.ts

@@ -155,6 +155,10 @@ export function useMapListingUrl({
   // do clear the pin-selection id so the pin snaps back immediately.
   useEffect(() => {
     if (!listingSlug) {
+      // Invalidate any in-flight fetch so a late response can't re-select
+      // the listing the user just navigated away from (e.g. browser Back
+      // while a deep-link fetch is still in flight).
+      requestTokenRef.current += 1;
       resolvedSlugRef.current = null;
       resolvedTableRef.current = null;
       setOptimisticListingId(null);