From f41027ca399b24df89fddd475e863e2a0e294f37 Mon Sep 17 00:00:00 2001
From: Chris Sherwood <chris@crosstalksolutions.com>
Date: Mon, 4 May 2026 15:41:23 -0700
Subject: [PATCH] fix(Maps): render notes in marker popup when populated
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #796.

The maps API has accepted and persisted `notes` on map markers since
PR #770, but the marker popup component still rendered name only and
ignored the field. Now the popup shows a notes block beneath the name
when it's populated, with whitespace preserved and long text wrapped.

Threaded `notes` through the read path:
- `api.listMapMarkers` / `api.createMapMarker` response types
- `MapMarker` interface in `useMapMarkers` and the data.map projection
- `MapComponent`'s selectedMarker popup

The create/update UI is unchanged — users still set notes via the API
or DB directly, matching the issue's stated scope. A marker entry with
empty/whitespace-only notes renders the same as before.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 admin/inertia/components/maps/MapComponent.tsx | 5 +++++
 admin/inertia/hooks/useMapMarkers.ts           | 3 +++
 admin/inertia/lib/api.ts                       | 4 ++--
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/admin/inertia/components/maps/MapComponent.tsx b/admin/inertia/components/maps/MapComponent.tsx
index 07fe1c6..f7a3a8a 100644
--- a/admin/inertia/components/maps/MapComponent.tsx
+++ b/admin/inertia/components/maps/MapComponent.tsx
@@ -243,6 +243,11 @@ export default function MapComponent({
               closeOnClick={false}
             >
               <div className="text-sm font-medium">{selectedMarker.name}</div>
+              {selectedMarker.notes && selectedMarker.notes.trim() && (
+                <div className="mt-1 text-xs text-desert-stone-dark whitespace-pre-wrap break-words max-w-[240px]">
+                  {selectedMarker.notes}
+                </div>
+              )}
             </Popup>
           )}
 
diff --git a/admin/inertia/hooks/useMapMarkers.ts b/admin/inertia/hooks/useMapMarkers.ts
index ba999eb..a0e818e 100644
--- a/admin/inertia/hooks/useMapMarkers.ts
+++ b/admin/inertia/hooks/useMapMarkers.ts
@@ -18,6 +18,7 @@ export interface MapMarker {
   longitude: number
   latitude: number
   color: PinColorId
+  notes: string | null
   createdAt: string
 }
 
@@ -36,6 +37,7 @@ export function useMapMarkers() {
             longitude: m.longitude,
             latitude: m.latitude,
             color: m.color as PinColorId,
+            notes: m.notes ?? null,
             createdAt: m.created_at,
           }))
         )
@@ -54,6 +56,7 @@ export function useMapMarkers() {
           longitude: result.longitude,
           latitude: result.latitude,
           color: result.color as PinColorId,
+          notes: result.notes ?? null,
           createdAt: result.created_at,
         }
         setMarkers((prev) => [...prev, marker])
diff --git a/admin/inertia/lib/api.ts b/admin/inertia/lib/api.ts
index 3e015d8..aa1369b 100644
--- a/admin/inertia/lib/api.ts
+++ b/admin/inertia/lib/api.ts
@@ -631,7 +631,7 @@ class API {
   async listMapMarkers() {
     return catchInternal(async () => {
       const response = await this.client.get<
-        Array<{ id: number; name: string; longitude: number; latitude: number; color: string; created_at: string }>
+        Array<{ id: number; name: string; longitude: number; latitude: number; color: string; notes: string | null; created_at: string }>
       >('/maps/markers')
       return response.data
     })()
@@ -640,7 +640,7 @@ class API {
   async createMapMarker(data: { name: string; longitude: number; latitude: number; color?: string }) {
     return catchInternal(async () => {
       const response = await this.client.post<
-        { id: number; name: string; longitude: number; latitude: number; color: string; created_at: string }
+        { id: number; name: string; longitude: number; latitude: number; color: string; notes: string | null; created_at: string }
       >('/maps/markers', data)
       return response.data
     })()