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

Author: dnywh

src/components/ListingRead/ListingRead.tsx

@@ -64,13 +64,18 @@ const ListingRead = memo(function Listing({
   const realListing =
     !isDemo && listing && !isDemoListing(listing) ? (listing as Listing) : null;
 
-  // Load existing thread if any (only if not in demo mode)
+  // Load existing thread if any (only if not in demo mode). Depend on the
+  // specific listing fields used inside the effect so a new `realListing`
+  // object identity with the same id/owner doesn't refire the query.
+  const listingId = realListing?.id;
+  const listingOwnerId = realListing?.owner_id;
+  const userId = user?.id;
   useEffect(() => {
-    if (isDemo || !supabase || !user || !realListing) return;
+    if (isDemo || !supabase || !userId || !listingId || !listingOwnerId) return;
 
     // TODO: Should this only be called when the actual ListingChatDrawer is loaded?
     async function loadExistingThread() {
-      if (!supabase || !user || !realListing) return;
+      if (!supabase) return;
       const { data: thread, error } = await supabase
         .from("chat_threads_with_participants")
         .select(
@@ -80,9 +85,9 @@ const ListingRead = memo(function Listing({
         `
         )
         .match({
-          listing_id: realListing.id,
-          initiator_id: user.id,
-          owner_id: realListing.owner_id,
+          listing_id: listingId,
+          initiator_id: userId,
+          owner_id: listingOwnerId,
         })
         .maybeSingle();
 
@@ -95,7 +100,7 @@ const ListingRead = memo(function Listing({
     }
 
     loadExistingThread();
-  }, [realListing?.id, user?.id, isDemo, supabase, realListing]);
+  }, [listingId, listingOwnerId, userId, isDemo, supabase]);
 
   const initialZoomLevel = 14;
 

src/components/MapPin/MapPin.tsx

@@ -3,7 +3,7 @@ import MapCommunityIcon from "../MapCommunityIcon";
 import MapResidentialIcon from "../MapResidentialIcon";
 import { styled } from "@pigment-css/react";
 
-type ListingPinType = "business" | "community" | "residential";
+import type { ListingType } from "@/types/listing";
 
 type MapPinProps = {
   selected?: boolean;
@@ -145,19 +145,16 @@ const SelectedPinIcon = (
 
 const ICON = `M18.149 15.8139C18.2078 15.7251 18.2326 15.6533 18.2915 15.5646C19.3387 13.9878 20 12.0412 20 10C20 4.4 15.5 0 10 0C4.5 0 0 4.5 0 10C0 11.8662 0.522404 13.6453 1.40473 15.0937C1.52799 15.296 1.62851 15.5285 1.79602 15.696C1.79734 15.6974 1.79867 15.6987 1.8 15.7C1.90535 15.8054 1.94349 15.9666 2.02739 16.0897C2.18874 16.3264 2.36323 16.5632 2.6 16.8C4.5396 19.1126 7.70356 22.2044 9.18572 23.6258C9.64236 24.0637 10.3577 24.0638 10.8151 23.6266C12.2976 22.2097 15.4607 19.1376 17.4 16.9C17.5711 16.6433 17.8155 16.3866 18.0078 16.1299C18.07 16.0467 18.0918 15.9006 18.149 15.8139Z`;
 
-const iconMap: Record<
-  ListingPinType,
-  React.ComponentType<{ size?: string }>
-> = {
+// Keyed on the shared `ListingType` union so adding a new type there becomes
+// a compile error here — prevents the two from drifting out of sync.
+const iconMap: Record<ListingType, React.ComponentType<{ size?: string }>> = {
   business: MapBusinessIcon as React.ComponentType<{ size?: string }>,
   community: MapCommunityIcon as React.ComponentType<{ size?: string }>,
   residential: MapResidentialIcon as React.ComponentType<{ size?: string }>,
 };
 
-function isListingPinType(value: string | undefined): value is ListingPinType {
-  return (
-    value === "business" || value === "community" || value === "residential"
-  );
+function isListingPinType(value: string | undefined): value is ListingType {
+  return value !== undefined && value in iconMap;
 }
 
 function MapPin({ selected = false, type }: MapPinProps) {