From 5a55c8e63279fea56d96e9b9a7e28b2650729652 Mon Sep 17 00:00:00 2001
From: Kenneth Brewer <kennethbrewer3@gmail.com>
Date: Sun, 26 Apr 2026 23:08:55 -0400
Subject: [PATCH 1/8] Initial commit for being able to add notes on map markers
 and display them

---
 .../inertia/components/maps/MapComponent.tsx  | 67 ++++++++++++++-----
 admin/inertia/hooks/useMapMarkers.ts          | 62 +++++++++++++----
 install/management_compose.yaml               | 38 +++++------
 3 files changed, 118 insertions(+), 49 deletions(-)

diff --git a/admin/inertia/components/maps/MapComponent.tsx b/admin/inertia/components/maps/MapComponent.tsx
index bac307d..e541dd4 100644
--- a/admin/inertia/components/maps/MapComponent.tsx
+++ b/admin/inertia/components/maps/MapComponent.tsx
@@ -12,19 +12,23 @@ import 'maplibre-gl/dist/maplibre-gl.css'
 import { Protocol } from 'pmtiles'
 import { useEffect, useRef, useState, useCallback } from 'react'
 
-type ScaleUnit = 'imperial' | 'metric'
 import { useMapMarkers, PIN_COLORS } from '~/hooks/useMapMarkers'
 import type { PinColorId } from '~/hooks/useMapMarkers'
 import MarkerPin from './MarkerPin'
 import MarkerPanel from './MarkerPanel'
 
+type ScaleUnit = 'imperial' | 'metric'
+
 export default function MapComponent() {
   const mapRef = useRef<MapRef>(null)
   const { markers, addMarker, deleteMarker } = useMapMarkers()
+
   const [placingMarker, setPlacingMarker] = useState<{ lng: number; lat: number } | null>(null)
   const [markerName, setMarkerName] = useState('')
+  const [markerNotes, setMarkerNotes] = useState('')
   const [markerColor, setMarkerColor] = useState<PinColorId>('orange')
   const [selectedMarkerId, setSelectedMarkerId] = useState<number | null>(null)
+
   const [scaleUnit, setScaleUnit] = useState<ScaleUnit>(
     () => (localStorage.getItem('nomad:map-scale-unit') as ScaleUnit) || 'metric'
   )
@@ -37,10 +41,10 @@ export default function MapComponent() {
     })
   }, [])
 
-  // Add the PMTiles protocol to maplibre-gl
   useEffect(() => {
-    let protocol = new Protocol()
+    const protocol = new Protocol()
     maplibregl.addProtocol('pmtiles', protocol.tile)
+
     return () => {
       maplibregl.removeProtocol('pmtiles')
     }
@@ -49,18 +53,27 @@ export default function MapComponent() {
   const handleMapClick = useCallback((e: MapLayerMouseEvent) => {
     setPlacingMarker({ lng: e.lngLat.lng, lat: e.lngLat.lat })
     setMarkerName('')
+    setMarkerNotes('')
     setMarkerColor('orange')
     setSelectedMarkerId(null)
   }, [])
 
   const handleSaveMarker = useCallback(() => {
     if (placingMarker && markerName.trim()) {
-      addMarker(markerName.trim(), placingMarker.lng, placingMarker.lat, markerColor)
+      addMarker(
+        markerName.trim(),
+        placingMarker.lng,
+        placingMarker.lat,
+        markerColor,
+        markerNotes.trim() || undefined
+      )
+
       setPlacingMarker(null)
       setMarkerName('')
+      setMarkerNotes('')
       setMarkerColor('orange')
     }
-  }, [placingMarker, markerName, markerColor, addMarker])
+  }, [placingMarker, markerName, markerNotes, markerColor, addMarker])
 
   const handleFlyTo = useCallback((longitude: number, latitude: number) => {
     mapRef.current?.flyTo({ center: [longitude, latitude], zoom: 12, duration: 1500 })
@@ -97,6 +110,7 @@ export default function MapComponent() {
         <NavigationControl style={{ marginTop: '110px', marginRight: '36px' }} />
         <FullscreenControl style={{ marginTop: '30px', marginRight: '36px' }} />
         <ScaleControl position="bottom-left" maxWidth={150} unit={scaleUnit} />
+
         <div style={{ position: 'absolute', bottom: '30px', left: '10px', zIndex: 2 }}>
           <div
             style={{
@@ -110,7 +124,10 @@ export default function MapComponent() {
             }}
           >
             <button
-              onClick={() => { if (scaleUnit !== 'metric') toggleScaleUnit() }}
+              type="button"
+              onClick={() => {
+                if (scaleUnit !== 'metric') toggleScaleUnit()
+              }}
               style={{
                 background: scaleUnit === 'metric' ? '#424420' : 'white',
                 color: scaleUnit === 'metric' ? 'white' : '#666',
@@ -121,8 +138,12 @@ export default function MapComponent() {
             >
               Metric
             </button>
+
             <button
-              onClick={() => { if (scaleUnit !== 'imperial') toggleScaleUnit() }}
+              type="button"
+              onClick={() => {
+                if (scaleUnit !== 'imperial') toggleScaleUnit()
+              }}
               style={{
                 background: scaleUnit === 'imperial' ? '#424420' : 'white',
                 color: scaleUnit === 'imperial' ? 'white' : '#666',
@@ -136,7 +157,6 @@ export default function MapComponent() {
           </div>
         </div>
 
-        {/* Existing markers */}
         {markers.map((marker) => (
           <Marker
             key={marker.id}
@@ -156,7 +176,6 @@ export default function MapComponent() {
           </Marker>
         ))}
 
-        {/* Popup for selected marker */}
         {selectedMarker && (
           <Popup
             longitude={selectedMarker.longitude}
@@ -167,10 +186,15 @@ export default function MapComponent() {
             closeOnClick={false}
           >
             <div className="text-sm font-medium">{selectedMarker.name}</div>
+
+            {selectedMarker.notes && (
+              <div className="mt-1 text-xs text-gray-500 whitespace-pre-wrap">
+                {selectedMarker.notes}
+              </div>
+            )}
           </Popup>
         )}
 
-        {/* Popup for placing a new marker */}
         {placingMarker && (
           <Popup
             longitude={placingMarker.lng}
@@ -192,33 +216,45 @@ export default function MapComponent() {
                 }}
                 className="block w-full rounded border border-gray-300 px-2 py-1 text-sm placeholder:text-gray-400 focus:outline-none focus:border-gray-500"
               />
+
+              <textarea
+                placeholder="Add notes (optional)"
+                value={markerNotes}
+                onChange={(e) => setMarkerNotes(e.target.value)}
+                rows={3}
+                className="mt-1 block w-full resize-none rounded border border-gray-300 px-2 py-1 text-sm placeholder:text-gray-400 focus:outline-none focus:border-gray-500"
+              />
+
               <div className="mt-1.5 flex gap-1 items-center">
                 {PIN_COLORS.map((c) => (
                   <button
                     key={c.id}
+                    type="button"
                     onClick={() => setMarkerColor(c.id)}
                     title={c.label}
                     className="rounded-full p-0.5 transition-transform"
                     style={{
-                      outline: markerColor === c.id ? `2px solid ${c.hex}` : '2px solid transparent',
+                      outline:
+                        markerColor === c.id ? `2px solid ${c.hex}` : '2px solid transparent',
                       outlineOffset: '1px',
                     }}
                   >
-                    <div
-                      className="w-4 h-4 rounded-full"
-                      style={{ backgroundColor: c.hex }}
-                    />
+                    <div className="w-4 h-4 rounded-full" style={{ backgroundColor: c.hex }} />
                   </button>
                 ))}
               </div>
+
               <div className="mt-1.5 flex gap-1.5 justify-end">
                 <button
+                  type="button"
                   onClick={() => setPlacingMarker(null)}
                   className="text-xs text-gray-500 hover:text-gray-700 px-2 py-1 rounded transition-colors"
                 >
                   Cancel
                 </button>
+
                 <button
+                  type="button"
                   onClick={handleSaveMarker}
                   disabled={!markerName.trim()}
                   className="text-xs bg-[#424420] text-white rounded px-2.5 py-1 hover:bg-[#525530] disabled:opacity-40 transition-colors"
@@ -231,7 +267,6 @@ export default function MapComponent() {
         )}
       </Map>
 
-      {/* Marker panel overlay */}
       <MarkerPanel
         markers={markers}
         onDelete={handleDeleteMarker}
diff --git a/admin/inertia/hooks/useMapMarkers.ts b/admin/inertia/hooks/useMapMarkers.ts
index ba999eb..98e9594 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
 }
 
@@ -25,7 +26,6 @@ export function useMapMarkers() {
   const [markers, setMarkers] = useState<MapMarker[]>([])
   const [loaded, setLoaded] = useState(false)
 
-  // Load markers from API on mount
   useEffect(() => {
     api.listMapMarkers().then((data) => {
       if (data) {
@@ -36,17 +36,32 @@ export function useMapMarkers() {
             longitude: m.longitude,
             latitude: m.latitude,
             color: m.color as PinColorId,
+            notes: m.notes ?? null,
             createdAt: m.created_at,
           }))
         )
       }
+
       setLoaded(true)
     })
   }, [])
 
   const addMarker = useCallback(
-    async (name: string, longitude: number, latitude: number, color: PinColorId = 'orange') => {
-      const result = await api.createMapMarker({ name, longitude, latitude, color })
+    async (
+      name: string,
+      longitude: number,
+      latitude: number,
+      color: PinColorId = 'orange',
+      notes?: string
+    ) => {
+      const result = await api.createMapMarker({
+        name,
+        longitude,
+        latitude,
+        color,
+        notes,
+      })
+
       if (result) {
         const marker: MapMarker = {
           id: result.id,
@@ -54,28 +69,47 @@ 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])
         return marker
       }
+
       return null
     },
     []
   )
 
-  const updateMarker = useCallback(async (id: number, updates: { name?: string; color?: string }) => {
-    const result = await api.updateMapMarker(id, updates)
-    if (result) {
-      setMarkers((prev) =>
-        prev.map((m) =>
-          m.id === id
-            ? { ...m, name: result.name, color: result.color as PinColorId }
-            : m
+  const updateMarker = useCallback(
+    async (
+      id: number,
+      updates: {
+        name?: string
+        color?: string
+        notes?: string | null
+      }
+    ) => {
+      const result = await api.updateMapMarker(id, updates)
+
+      if (result) {
+        setMarkers((prev) =>
+          prev.map((m) =>
+            m.id === id
+              ? {
+                ...m,
+                name: result.name,
+                color: result.color as PinColorId,
+                notes: result.notes ?? null,
+              }
+              : m
+          )
         )
-      )
-    }
-  }, [])
+      }
+    },
+    []
+  )
 
   const deleteMarker = useCallback(async (id: number) => {
     await api.deleteMapMarker(id)
diff --git a/install/management_compose.yaml b/install/management_compose.yaml
index f4c7b5f..c8a360e 100644
--- a/install/management_compose.yaml
+++ b/install/management_compose.yaml
@@ -9,8 +9,8 @@
 name: project-nomad
 services:
   admin:
-    image: ghcr.io/crosstalk-solutions/project-nomad:latest
-    pull_policy: always
+    image: project-nomad:local
+    pull_policy: never
     container_name: nomad_admin
     restart: unless-stopped
     extra_hosts:
@@ -18,7 +18,7 @@ services:
     ports:
       - "8080:8080"
     volumes:
-      - /opt/project-nomad/storage:/app/storage # If you change the default storage path (/opt/project-nomad/storage), make sure to update the disk-collector config as well!
+      - /Users/kbb3/project-nomad/storage:/app/storage # If you change the default storage path (/opt/project-nomad/storage), make sure to update the disk-collector config as well!
       - /var/run/docker.sock:/var/run/docker.sock # Allows the admin service to communicate with the Host's Docker daemon
       - nomad-update-shared:/app/update-shared # Shared volume for update communication
     environment:
@@ -27,18 +27,18 @@ services:
       - PORT=8080
       - LOG_LEVEL=info
       # APP_KEY needs to be at least 16 chars or will fail validation and container won't start!
-      - APP_KEY=replaceme
+      - APP_KEY=17cd5668db08606ef9befd97311bf83f787485507418bc41f47f4ef81070b7f7
       # # Leave HOST as is so the admin server listens all interfaces within the container - this doesn't affect how you access it from the host, it's just for internal container networking
       - HOST=0.0.0.0
       # URL should be set to the URL you will access the admin interface at (e.g. http://localhost:8080 or http://192.168.1.x:8080)
-      - URL=replaceme
+      - URL=http://localhost:8080
       - DB_HOST=mysql
       # If you change the MySQL port, make sure to update this accordingly
       - DB_PORT=3306
       - DB_DATABASE=nomad
       - DB_USER=nomad_user
       # Needs to match the MYSQL_PASSWORD in the mysql service!
-      - DB_PASSWORD=replaceme
+      - DB_PASSWORD=28230a296b16650b7f241fb7044694245e4c039fb1dc4a79f496ca79d6c0d450
       - DB_NAME=nomad
       - DB_SSL=false
       - REDIS_HOST=redis
@@ -72,13 +72,13 @@ services:
     container_name: nomad_mysql
     restart: unless-stopped
     environment:
-      - MYSQL_ROOT_PASSWORD=replaceme
+      - MYSQL_ROOT_PASSWORD=ee680548bc3c992dac137343413828adf20d8844e8fc69158a4c28b0abe05ca6
       - MYSQL_DATABASE=nomad
       - MYSQL_USER=nomad_user
       # Needs to match DB_PASSWORD in the admin service!
-      - MYSQL_PASSWORD=replaceme
+      - MYSQL_PASSWORD=28230a296b16650b7f241fb7044694245e4c039fb1dc4a79f496ca79d6c0d450
     volumes:
-      - /opt/project-nomad/mysql:/var/lib/mysql # Persist MySQL data on the host. This path can be changed if needed, just make sure it's writable by the container. Host persistence is important for the database to ensure your data isn't lost when the container is removed or updated.
+      - /Users/kbb3/project-nomad/mysql:/var/lib/mysql # Persist MySQL data on the host. This path can be changed if needed, just make sure it's writable by the container. Host persistence is important for the database to ensure your data isn't lost when the container is removed or updated.
     healthcheck:
       test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
       interval: 30s
@@ -89,7 +89,7 @@ services:
     container_name: nomad_redis
     restart: unless-stopped
     volumes:
-      - /opt/project-nomad/redis:/data # Persist Redis data on the host. This path can be changed if needed, just make sure it's writable by the container. Host persistence is important for Redis to ensure your data isn't lost when the container is removed or updated.
+      - /Users/kbb3/project-nomad/redis:/data # Persist Redis data on the host. This path can be changed if needed, just make sure it's writable by the container. Host persistence is important for Redis to ensure your data isn't lost when the container is removed or updated.
     healthcheck:
       test: ["CMD", "redis-cli", "ping"]
       interval: 30s
@@ -103,18 +103,18 @@ services:
     restart: unless-stopped
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock # Allows communication with the Host's Docker daemon
-      - /opt/project-nomad:/opt/project-nomad # Writable access required so the updater can set the correct image tag in compose.yml. This needs to be the same location that the compose file is located at on the host for the updater to work correctly
+      - /Users/kbb3/project-nomad:/opt/project-nomad # Writable access required so the updater can set the correct image tag in compose.yml. This needs to be the same location that the compose file is located at on the host for the updater to work correctly
       - nomad-update-shared:/shared # Shared volume for communication with admin container
-  disk-collector:
+  #disk-collector:
     # Disk Collector is a lightweight privileged container that collects disk usage information from the host system and shares it with the admin container so it can be displayed in the UI. 
     # It requires read-only access to the host filesystem and is designed to be as secure and limited in scope as possible while still providing the necessary functionality.
-    image: ghcr.io/crosstalk-solutions/project-nomad-disk-collector:latest
-    pull_policy: always
-    container_name: nomad_disk_collector
-    restart: unless-stopped
-    volumes:
-      - /:/host:ro,rslave  # Read-only view of host FS with rslave propagation so /sys and /proc submounts are visible
-      - /opt/project-nomad/storage:/storage
+    #image: ghcr.io/crosstalk-solutions/project-nomad-disk-collector:latest
+    #pull_policy: always
+    #container_name: nomad_disk_collector
+    #restart: unless-stopped
+    #volumes:
+    #  - /:/host:ro,rslave  # Read-only view of host FS with rslave propagation so /sys and /proc submounts are visible
+    #  - /Users/kbb3/project-nomad/storage:/storage
 
 volumes:
   nomad-update-shared:

From 596d9f71722725bed5f3d78f19e2bfb41ea1bcd8 Mon Sep 17 00:00:00 2001
From: Kenneth Brewer <kennethbrewer3@gmail.com>
Date: Mon, 27 Apr 2026 16:02:21 -0400
Subject: [PATCH 2/8] Updated the map markers so they can be edited as well as
 to permit markdown in the notes field.

---
 admin/app/controllers/maps_controller.ts      |   8 +-
 .../components/maps/CreateMapMarkerPopup.tsx  | 115 +++++++++
 .../components/maps/EditMapMarkerPopup.tsx    | 111 +++++++++
 .../inertia/components/maps/MapComponent.tsx  | 232 +++++-------------
 .../components/maps/MapMarkerFormPopup.tsx    | 127 ++++++++++
 .../components/maps/ScaleUnitControl.tsx      |  56 +++++
 .../components/maps/ViewMapMarkerPopup.tsx    |  48 ++++
 admin/inertia/css/app.css                     |   8 +-
 admin/package-lock.json                       |  10 +
 9 files changed, 543 insertions(+), 172 deletions(-)
 create mode 100644 admin/inertia/components/maps/CreateMapMarkerPopup.tsx
 create mode 100644 admin/inertia/components/maps/EditMapMarkerPopup.tsx
 create mode 100644 admin/inertia/components/maps/MapMarkerFormPopup.tsx
 create mode 100644 admin/inertia/components/maps/ScaleUnitControl.tsx
 create mode 100644 admin/inertia/components/maps/ViewMapMarkerPopup.tsx

diff --git a/admin/app/controllers/maps_controller.ts b/admin/app/controllers/maps_controller.ts
index f5fb0f3..31035ee 100644
--- a/admin/app/controllers/maps_controller.ts
+++ b/admin/app/controllers/maps_controller.ts
@@ -137,9 +137,11 @@ export default class MapsController {
       vine.compile(
         vine.object({
           name: vine.string().trim().minLength(1).maxLength(255),
-          longitude: vine.number(),
-          latitude: vine.number(),
+          longitude: vine.number().min(-180).max(180),
+          latitude: vine.number().min(-90).max(90),
           color: vine.string().trim().maxLength(20).optional(),
+          notes: vine.string().trim().nullable().optional(),
+          marker_type: vine.string().trim().maxLength(20).optional(),
         })
       )
     )
@@ -148,6 +150,8 @@ export default class MapsController {
       longitude: payload.longitude,
       latitude: payload.latitude,
       color: payload.color ?? 'orange',
+      notes: payload.notes ?? null,
+      marker_type: payload.marker_type ?? 'pin',
     })
     return marker
   }
diff --git a/admin/inertia/components/maps/CreateMapMarkerPopup.tsx b/admin/inertia/components/maps/CreateMapMarkerPopup.tsx
new file mode 100644
index 0000000..b55c66f
--- /dev/null
+++ b/admin/inertia/components/maps/CreateMapMarkerPopup.tsx
@@ -0,0 +1,115 @@
+import { Popup } from 'react-map-gl/maplibre'
+
+import { PIN_COLORS } from '~/hooks/useMapMarkers'
+import type { PinColorId } from '~/hooks/useMapMarkers'
+
+const MAX_MARKER_NOTES_LENGTH = 1000
+
+const inputClass =
+  'block w-full appearance-none rounded border border-gray-300 bg-transparent px-2 py-1 text-sm text-gray-900 leading-normal placeholder:text-gray-400 focus:border-gray-500 focus:outline-none'
+
+type CreateMapMarkerPopupProps = {
+  longitude: number
+  latitude: number
+  markerName: string
+  markerNotes: string
+  markerColor: PinColorId
+  onNameChange: (value: string) => void
+  onNotesChange: (value: string) => void
+  onColorChange: (value: PinColorId) => void
+  onSave: () => void
+  onCancel: () => void
+}
+
+export default function CreateMapMarkerPopup({
+                                               longitude,
+                                               latitude,
+                                               markerName,
+                                               markerNotes,
+                                               markerColor,
+                                               onNameChange,
+                                               onNotesChange,
+                                               onColorChange,
+                                               onSave,
+                                               onCancel,
+                                             }: CreateMapMarkerPopupProps) {
+  return (
+    <Popup
+      longitude={longitude}
+      latitude={latitude}
+      anchor="bottom"
+      onClose={onCancel}
+      closeOnClick={false}
+    >
+      <div className="p-1">
+        <input
+          autoFocus
+          type="text"
+          placeholder="Name this location"
+          value={markerName}
+          onChange={(e) => onNameChange(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') onSave()
+            if (e.key === 'Escape') onCancel()
+          }}
+          className={inputClass}
+        />
+
+        <textarea
+          placeholder="Add notes (optional)"
+          value={markerNotes}
+          rows={2}
+          maxLength={MAX_MARKER_NOTES_LENGTH}
+          onChange={(e) => {
+            onNotesChange(e.target.value)
+            e.currentTarget.style.height = 'auto'
+            e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`
+          }}
+          className={`mt-1 min-h-[64px] resize-none overflow-hidden ${inputClass}`}
+        />
+
+        <div className="mt-1 text-[11px] text-gray-400">
+          {markerNotes.length}/{MAX_MARKER_NOTES_LENGTH}
+        </div>
+
+        <div className="mt-1.5 flex gap-1 items-center">
+          {PIN_COLORS.map((color) => (
+            <button
+              key={color.id}
+              type="button"
+              onClick={() => onColorChange(color.id)}
+              title={color.label}
+              className="rounded-full p-0.5 transition-transform"
+              style={{
+                outline:
+                  markerColor === color.id ? `2px solid ${color.hex}` : '2px solid transparent',
+                outlineOffset: '1px',
+              }}
+            >
+              <div className="w-4 h-4 rounded-full" style={{ backgroundColor: color.hex }} />
+            </button>
+          ))}
+        </div>
+
+        <div className="mt-1.5 flex gap-1.5 justify-end">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="text-xs text-gray-500 hover:text-gray-700 px-2 py-1 rounded transition-colors"
+          >
+            Cancel
+          </button>
+
+          <button
+            type="button"
+            onClick={onSave}
+            disabled={!markerName.trim()}
+            className="text-xs bg-[#424420] text-white rounded px-2.5 py-1 hover:bg-[#525530] disabled:opacity-40 transition-colors"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </Popup>
+  )
+}
diff --git a/admin/inertia/components/maps/EditMapMarkerPopup.tsx b/admin/inertia/components/maps/EditMapMarkerPopup.tsx
new file mode 100644
index 0000000..1b5919c
--- /dev/null
+++ b/admin/inertia/components/maps/EditMapMarkerPopup.tsx
@@ -0,0 +1,111 @@
+import { useState } from 'react'
+import { Popup } from 'react-map-gl/maplibre'
+
+import type { MapMarker, PinColorId } from '~/hooks/useMapMarkers'
+import { PIN_COLORS } from '~/hooks/useMapMarkers'
+
+const MAX_MARKER_NOTES_LENGTH = 1000
+
+const inputClass =
+  'block w-full rounded border border-gray-300 bg-transparent px-2 py-1 text-sm text-gray-900 leading-normal placeholder:text-gray-400 focus:outline-none focus:border-gray-500'
+
+type EditMapMarkerPopupProps = {
+  marker: MapMarker
+  onSave: (id: number, name: string, notes: string, color: PinColorId) => void
+  onCancel: () => void
+}
+
+export default function EditMapMarkerPopup({
+                                             marker,
+                                             onSave,
+                                             onCancel,
+                                           }: EditMapMarkerPopupProps) {
+  const [name, setName] = useState(marker.name)
+  const [notes, setNotes] = useState(marker.notes ?? '')
+  const [color, setColor] = useState<PinColorId>(marker.color)
+
+  const handleSave = () => {
+    if (!name.trim()) return
+    onSave(marker.id, name.trim(), notes.trim(), color)
+  }
+
+  return (
+    <Popup
+      longitude={marker.longitude}
+      latitude={marker.latitude}
+      anchor="bottom"
+      offset={[0, -36] as [number, number]}
+      onClose={onCancel}
+      closeOnClick={false}
+    >
+      <div className="p-1">
+        <input
+          autoFocus
+          type="text"
+          placeholder="Name this location"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') handleSave()
+            if (e.key === 'Escape') onCancel()
+          }}
+          className={inputClass}
+        />
+
+        <textarea
+          placeholder="Add notes (optional)"
+          value={notes}
+          rows={2}
+          maxLength={MAX_MARKER_NOTES_LENGTH}
+          onChange={(e) => {
+            setNotes(e.target.value)
+            e.currentTarget.style.height = 'auto'
+            e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`
+          }}
+          className={`mt-1 min-h-[64px] resize-none overflow-hidden ${inputClass}`}
+        />
+
+        <div className="mt-1 text-[11px] text-gray-400">
+          {notes.length}/{MAX_MARKER_NOTES_LENGTH}
+        </div>
+
+        <div className="mt-1.5 flex gap-1 items-center">
+          {PIN_COLORS.map((pinColor) => (
+            <button
+              key={pinColor.id}
+              type="button"
+              onClick={() => setColor(pinColor.id)}
+              title={pinColor.label}
+              className="rounded-full p-0.5 transition-transform"
+              style={{
+                outline: color === pinColor.id ? `2px solid ${pinColor.hex}` : '2px solid transparent',
+                outlineOffset: '1px',
+              }}
+            >
+              <div className="w-4 h-4 rounded-full" style={{ backgroundColor: pinColor.hex }} />
+            </button>
+          ))}
+        </div>
+
+        <div className="mt-1.5 flex gap-1.5 justify-end">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="text-xs text-gray-500 hover:text-gray-700 px-2 py-1 rounded transition-colors"
+          >
+            Cancel
+          </button>
+
+          <button
+            type="button"
+            onClick={handleSave}
+            disabled={!name.trim()}
+            className="text-xs bg-[#424420] text-white rounded px-2.5 py-1 hover:bg-[#525530] disabled:opacity-40 transition-colors"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </Popup>
+  )
+}
diff --git a/admin/inertia/components/maps/MapComponent.tsx b/admin/inertia/components/maps/MapComponent.tsx
index e541dd4..d738638 100644
--- a/admin/inertia/components/maps/MapComponent.tsx
+++ b/admin/inertia/components/maps/MapComponent.tsx
@@ -3,7 +3,6 @@ import Map, {
   NavigationControl,
   ScaleControl,
   Marker,
-  Popup,
   MapProvider,
 } from 'react-map-gl/maplibre'
 import type { MapRef, MapLayerMouseEvent } from 'react-map-gl/maplibre'
@@ -13,34 +12,26 @@ import { Protocol } from 'pmtiles'
 import { useEffect, useRef, useState, useCallback } from 'react'
 
 import { useMapMarkers, PIN_COLORS } from '~/hooks/useMapMarkers'
-import type { PinColorId } from '~/hooks/useMapMarkers'
 import MarkerPin from './MarkerPin'
 import MarkerPanel from './MarkerPanel'
+import ViewMapMarkerPopup from './ViewMapMarkerPopup'
+import MapMarkerFormPopup from './MapMarkerFormPopup'
+import ScaleUnitControl from './ScaleUnitControl'
 
 type ScaleUnit = 'imperial' | 'metric'
 
 export default function MapComponent() {
   const mapRef = useRef<MapRef>(null)
-  const { markers, addMarker, deleteMarker } = useMapMarkers()
+  const { markers, addMarker, updateMarker, deleteMarker } = useMapMarkers()
 
   const [placingMarker, setPlacingMarker] = useState<{ lng: number; lat: number } | null>(null)
-  const [markerName, setMarkerName] = useState('')
-  const [markerNotes, setMarkerNotes] = useState('')
-  const [markerColor, setMarkerColor] = useState<PinColorId>('orange')
   const [selectedMarkerId, setSelectedMarkerId] = useState<number | null>(null)
+  const [editingMarkerId, setEditingMarkerId] = useState<number | null>(null)
 
   const [scaleUnit, setScaleUnit] = useState<ScaleUnit>(
     () => (localStorage.getItem('nomad:map-scale-unit') as ScaleUnit) || 'metric'
   )
 
-  const toggleScaleUnit = useCallback(() => {
-    setScaleUnit((prev) => {
-      const next = prev === 'metric' ? 'imperial' : 'metric'
-      localStorage.setItem('nomad:map-scale-unit', next)
-      return next
-    })
-  }, [])
-
   useEffect(() => {
     const protocol = new Protocol()
     maplibregl.addProtocol('pmtiles', protocol.tile)
@@ -50,30 +41,16 @@ export default function MapComponent() {
     }
   }, [])
 
-  const handleMapClick = useCallback((e: MapLayerMouseEvent) => {
-    setPlacingMarker({ lng: e.lngLat.lng, lat: e.lngLat.lat })
-    setMarkerName('')
-    setMarkerNotes('')
-    setMarkerColor('orange')
-    setSelectedMarkerId(null)
+  const handleScaleUnitChange = useCallback((unit: ScaleUnit) => {
+    setScaleUnit(unit)
+    localStorage.setItem('nomad:map-scale-unit', unit)
   }, [])
 
-  const handleSaveMarker = useCallback(() => {
-    if (placingMarker && markerName.trim()) {
-      addMarker(
-        markerName.trim(),
-        placingMarker.lng,
-        placingMarker.lat,
-        markerColor,
-        markerNotes.trim() || undefined
-      )
-
-      setPlacingMarker(null)
-      setMarkerName('')
-      setMarkerNotes('')
-      setMarkerColor('orange')
-    }
-  }, [placingMarker, markerName, markerNotes, markerColor, addMarker])
+  const handleMapClick = useCallback((e: MapLayerMouseEvent) => {
+    setPlacingMarker({ lng: e.lngLat.lng, lat: e.lngLat.lat })
+    setSelectedMarkerId(null)
+    setEditingMarkerId(null)
+  }, [])
 
   const handleFlyTo = useCallback((longitude: number, latitude: number) => {
     mapRef.current?.flyTo({ center: [longitude, latitude], zoom: 12, duration: 1500 })
@@ -81,13 +58,20 @@ export default function MapComponent() {
 
   const handleDeleteMarker = useCallback(
     (id: number) => {
-      if (selectedMarkerId === id) setSelectedMarkerId(null)
+      if (selectedMarkerId === id) {
+        setSelectedMarkerId(null)
+      }
+
+      if (editingMarkerId === id) {
+        setEditingMarkerId(null)
+      }
+
       deleteMarker(id)
     },
-    [selectedMarkerId, deleteMarker]
+    [selectedMarkerId, editingMarkerId, deleteMarker]
   )
 
-  const selectedMarker = selectedMarkerId ? markers.find((m) => m.id === selectedMarkerId) : null
+  const selectedMarker = selectedMarkerId ? markers.find((marker) => marker.id === selectedMarkerId) : null
 
   return (
     <MapProvider>
@@ -110,52 +94,7 @@ export default function MapComponent() {
         <NavigationControl style={{ marginTop: '110px', marginRight: '36px' }} />
         <FullscreenControl style={{ marginTop: '30px', marginRight: '36px' }} />
         <ScaleControl position="bottom-left" maxWidth={150} unit={scaleUnit} />
-
-        <div style={{ position: 'absolute', bottom: '30px', left: '10px', zIndex: 2 }}>
-          <div
-            style={{
-              display: 'inline-flex',
-              borderRadius: '4px',
-              boxShadow: '0 0 0 2px rgba(0,0,0,0.1)',
-              overflow: 'hidden',
-              fontSize: '11px',
-              fontWeight: 600,
-              lineHeight: 1,
-            }}
-          >
-            <button
-              type="button"
-              onClick={() => {
-                if (scaleUnit !== 'metric') toggleScaleUnit()
-              }}
-              style={{
-                background: scaleUnit === 'metric' ? '#424420' : 'white',
-                color: scaleUnit === 'metric' ? 'white' : '#666',
-                border: 'none',
-                padding: '4px 8px',
-                cursor: 'pointer',
-              }}
-            >
-              Metric
-            </button>
-
-            <button
-              type="button"
-              onClick={() => {
-                if (scaleUnit !== 'imperial') toggleScaleUnit()
-              }}
-              style={{
-                background: scaleUnit === 'imperial' ? '#424420' : 'white',
-                color: scaleUnit === 'imperial' ? 'white' : '#666',
-                border: 'none',
-                padding: '4px 8px',
-                cursor: 'pointer',
-              }}
-            >
-              Imperial
-            </button>
-          </div>
-        </div>
+        <ScaleUnitControl scaleUnit={scaleUnit} onChange={handleScaleUnitChange} />
 
         {markers.map((marker) => (
           <Marker
@@ -167,103 +106,62 @@ export default function MapComponent() {
               e.originalEvent.stopPropagation()
               setSelectedMarkerId(marker.id === selectedMarkerId ? null : marker.id)
               setPlacingMarker(null)
+              setEditingMarkerId(null)
             }}
           >
             <MarkerPin
-              color={PIN_COLORS.find((c) => c.id === marker.color)?.hex}
+              color={PIN_COLORS.find((color) => color.id === marker.color)?.hex}
               active={marker.id === selectedMarkerId}
             />
           </Marker>
         ))}
 
-        {selectedMarker && (
-          <Popup
-            longitude={selectedMarker.longitude}
-            latitude={selectedMarker.latitude}
-            anchor="bottom"
-            offset={[0, -36] as [number, number]}
-            onClose={() => setSelectedMarkerId(null)}
-            closeOnClick={false}
-          >
-            <div className="text-sm font-medium">{selectedMarker.name}</div>
-
-            {selectedMarker.notes && (
-              <div className="mt-1 text-xs text-gray-500 whitespace-pre-wrap">
-                {selectedMarker.notes}
-              </div>
-            )}
-          </Popup>
-        )}
-
         {placingMarker && (
-          <Popup
+          <MapMarkerFormPopup
             longitude={placingMarker.lng}
             latitude={placingMarker.lat}
-            anchor="bottom"
-            onClose={() => setPlacingMarker(null)}
-            closeOnClick={false}
-          >
-            <div className="p-1">
-              <input
-                autoFocus
-                type="text"
-                placeholder="Name this location"
-                value={markerName}
-                onChange={(e) => setMarkerName(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') handleSaveMarker()
-                  if (e.key === 'Escape') setPlacingMarker(null)
-                }}
-                className="block w-full rounded border border-gray-300 px-2 py-1 text-sm placeholder:text-gray-400 focus:outline-none focus:border-gray-500"
-              />
+            onSave={async ({ name, notes, color }) => {
+              await addMarker(name, placingMarker.lng, placingMarker.lat, color, notes || undefined)
+              setPlacingMarker(null)
+            }}
+            onCancel={() => setPlacingMarker(null)}
+          />
+        )}
 
-              <textarea
-                placeholder="Add notes (optional)"
-                value={markerNotes}
-                onChange={(e) => setMarkerNotes(e.target.value)}
-                rows={3}
-                className="mt-1 block w-full resize-none rounded border border-gray-300 px-2 py-1 text-sm placeholder:text-gray-400 focus:outline-none focus:border-gray-500"
-              />
+        {selectedMarker && editingMarkerId !== selectedMarker.id && (
+          <ViewMapMarkerPopup
+            marker={selectedMarker}
+            onClose={() => setSelectedMarkerId(null)}
+            onEdit={() => setEditingMarkerId(selectedMarker.id)}
+          />
+        )}
 
-              <div className="mt-1.5 flex gap-1 items-center">
-                {PIN_COLORS.map((c) => (
-                  <button
-                    key={c.id}
-                    type="button"
-                    onClick={() => setMarkerColor(c.id)}
-                    title={c.label}
-                    className="rounded-full p-0.5 transition-transform"
-                    style={{
-                      outline:
-                        markerColor === c.id ? `2px solid ${c.hex}` : '2px solid transparent',
-                      outlineOffset: '1px',
-                    }}
-                  >
-                    <div className="w-4 h-4 rounded-full" style={{ backgroundColor: c.hex }} />
-                  </button>
-                ))}
-              </div>
+        {selectedMarker && editingMarkerId !== selectedMarker.id && (
+          <ViewMapMarkerPopup
+            marker={selectedMarker}
+            onClose={() => setSelectedMarkerId(null)}
+            onEdit={() => setEditingMarkerId(selectedMarker.id)}
+          />
+        )}
 
-              <div className="mt-1.5 flex gap-1.5 justify-end">
-                <button
-                  type="button"
-                  onClick={() => setPlacingMarker(null)}
-                  className="text-xs text-gray-500 hover:text-gray-700 px-2 py-1 rounded transition-colors"
-                >
-                  Cancel
-                </button>
+        {selectedMarker && editingMarkerId === selectedMarker.id && (
+          <MapMarkerFormPopup
+            longitude={selectedMarker.longitude}
+            latitude={selectedMarker.latitude}
+            initialMarker={selectedMarker}
+            onSave={async ({ id, name, notes, color }) => {
+              if (!id) return
 
-                <button
-                  type="button"
-                  onClick={handleSaveMarker}
-                  disabled={!markerName.trim()}
-                  className="text-xs bg-[#424420] text-white rounded px-2.5 py-1 hover:bg-[#525530] disabled:opacity-40 transition-colors"
-                >
-                  Save
-                </button>
-              </div>
-            </div>
-          </Popup>
+              await updateMarker(id, {
+                name,
+                notes: notes || null,
+                color,
+              })
+
+              setEditingMarkerId(null)
+            }}
+            onCancel={() => setEditingMarkerId(null)}
+          />
         )}
       </Map>
 
diff --git a/admin/inertia/components/maps/MapMarkerFormPopup.tsx b/admin/inertia/components/maps/MapMarkerFormPopup.tsx
new file mode 100644
index 0000000..b5bd839
--- /dev/null
+++ b/admin/inertia/components/maps/MapMarkerFormPopup.tsx
@@ -0,0 +1,127 @@
+import { useState } from 'react'
+import { Popup } from 'react-map-gl/maplibre'
+
+import { PIN_COLORS } from '~/hooks/useMapMarkers'
+import type { MapMarker, PinColorId } from '~/hooks/useMapMarkers'
+
+const MAX_MARKER_NOTES_LENGTH = 500
+
+const inputClass =
+  'block w-full rounded border border-gray-300 bg-transparent px-2 py-1 text-sm text-gray-900 leading-normal placeholder:text-gray-400 focus:outline-none focus:border-gray-500'
+
+type MapMarkerFormPopupProps = {
+  longitude: number
+  latitude: number
+  initialMarker?: MapMarker
+  onSave: (values: {
+    id?: number
+    name: string
+    notes: string
+    color: PinColorId
+  }) => void
+  onCancel: () => void
+}
+
+export default function MapMarkerFormPopup({
+                                             longitude,
+                                             latitude,
+                                             initialMarker,
+                                             onSave,
+                                             onCancel,
+                                           }: MapMarkerFormPopupProps) {
+  const [name, setName] = useState(initialMarker?.name ?? '')
+  const [notes, setNotes] = useState(initialMarker?.notes ?? '')
+  const [color, setColor] = useState<PinColorId>(initialMarker?.color ?? 'orange')
+
+  const handleSave = () => {
+    if (!name.trim()) return
+
+    onSave({
+      id: initialMarker?.id,
+      name: name.trim(),
+      notes: notes.trim(),
+      color,
+    })
+  }
+
+  return (
+    <Popup
+      longitude={longitude}
+      latitude={latitude}
+      anchor="bottom"
+      offset={[0, -36] as [number, number]}
+      onClose={onCancel}
+      closeOnClick={false}
+    >
+      <div className="p-1">
+        <input
+          autoFocus
+          type="text"
+          placeholder="Name this location"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') handleSave()
+            if (e.key === 'Escape') onCancel()
+          }}
+          className={inputClass}
+        />
+
+        <textarea
+          placeholder="Add notes (optional)"
+          value={notes}
+          rows={2}
+          maxLength={MAX_MARKER_NOTES_LENGTH}
+          onChange={(e) => {
+            setNotes(e.target.value)
+            e.currentTarget.style.height = 'auto'
+            e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`
+          }}
+          className={`mt-1 min-h-[64px] resize-none overflow-hidden ${inputClass}`}
+        />
+
+        <div className="mt-1 text-[11px] text-gray-400">
+          {notes.length}/{MAX_MARKER_NOTES_LENGTH}
+        </div>
+
+        <div className="mt-1.5 flex gap-1 items-center">
+          {PIN_COLORS.map((pinColor) => (
+            <button
+              key={pinColor.id}
+              type="button"
+              onClick={() => setColor(pinColor.id)}
+              title={pinColor.label}
+              className="rounded-full p-0.5 transition-transform"
+              style={{
+                outline:
+                  color === pinColor.id ? `2px solid ${pinColor.hex}` : '2px solid transparent',
+                outlineOffset: '1px',
+              }}
+            >
+              <div className="w-4 h-4 rounded-full" style={{ backgroundColor: pinColor.hex }} />
+            </button>
+          ))}
+        </div>
+
+        <div className="mt-1.5 flex gap-1.5 justify-end">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="text-xs text-gray-500 hover:text-gray-700 px-2 py-1 rounded transition-colors"
+          >
+            Cancel
+          </button>
+
+          <button
+            type="button"
+            onClick={handleSave}
+            disabled={!name.trim()}
+            className="text-xs bg-[#424420] text-white rounded px-2.5 py-1 hover:bg-[#525530] disabled:opacity-40 transition-colors"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </Popup>
+  )
+}
diff --git a/admin/inertia/components/maps/ScaleUnitControl.tsx b/admin/inertia/components/maps/ScaleUnitControl.tsx
new file mode 100644
index 0000000..06d94f9
--- /dev/null
+++ b/admin/inertia/components/maps/ScaleUnitControl.tsx
@@ -0,0 +1,56 @@
+type ScaleUnit = 'imperial' | 'metric'
+
+type ScaleUnitControlProps = {
+  scaleUnit: ScaleUnit
+  onChange: (unit: ScaleUnit) => void
+}
+
+export default function ScaleUnitControl({ scaleUnit, onChange }: ScaleUnitControlProps) {
+  return (
+    <div style={{ position: 'absolute', bottom: '30px', left: '10px', zIndex: 2 }}>
+      <div
+        style={{
+          display: 'inline-flex',
+          borderRadius: '4px',
+          boxShadow: '0 0 0 2px rgba(0,0,0,0.1)',
+          overflow: 'hidden',
+          fontSize: '11px',
+          fontWeight: 600,
+          lineHeight: 1,
+        }}
+      >
+        <button
+          type="button"
+          onClick={() => {
+            if (scaleUnit !== 'metric') onChange('metric')
+          }}
+          style={{
+            background: scaleUnit === 'metric' ? '#424420' : 'white',
+            color: scaleUnit === 'metric' ? 'white' : '#666',
+            border: 'none',
+            padding: '4px 8px',
+            cursor: 'pointer',
+          }}
+        >
+          Metric
+        </button>
+
+        <button
+          type="button"
+          onClick={() => {
+            if (scaleUnit !== 'imperial') onChange('imperial')
+          }}
+          style={{
+            background: scaleUnit === 'imperial' ? '#424420' : 'white',
+            color: scaleUnit === 'imperial' ? 'white' : '#666',
+            border: 'none',
+            padding: '4px 8px',
+            cursor: 'pointer',
+          }}
+        >
+          Imperial
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/admin/inertia/components/maps/ViewMapMarkerPopup.tsx b/admin/inertia/components/maps/ViewMapMarkerPopup.tsx
new file mode 100644
index 0000000..99e3f9c
--- /dev/null
+++ b/admin/inertia/components/maps/ViewMapMarkerPopup.tsx
@@ -0,0 +1,48 @@
+import { Popup } from 'react-map-gl/maplibre'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+import type { MapMarker } from '~/hooks/useMapMarkers'
+
+type ViewMapMarkerPopupProps = {
+  marker: MapMarker
+  onClose: () => void
+  onEdit: () => void
+}
+
+export default function ViewMapMarkerPopup({
+                                             marker,
+                                             onClose,
+                                             onEdit,
+                                           }: ViewMapMarkerPopupProps) {
+  return (
+    <Popup
+      longitude={marker.longitude}
+      latitude={marker.latitude}
+      anchor="bottom"
+      offset={[0, -36] as [number, number]}
+      onClose={onClose}
+      closeOnClick={false}
+    >
+      <div className="text-sm font-medium">{marker.name}</div>
+
+      {marker.notes && (
+        <div className="mt-1 text-xs text-gray-500">
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>
+            {marker.notes}
+          </ReactMarkdown>
+        </div>
+      )}
+
+      <div className="mt-2 flex justify-end">
+        <button
+          type="button"
+          onClick={onEdit}
+          className="rounded bg-[#424420] px-2.5 py-1 text-xs text-white hover:bg-[#525530]"
+        >
+          Edit
+        </button>
+      </div>
+    </Popup>
+  )
+}
diff --git a/admin/inertia/css/app.css b/admin/inertia/css/app.css
index 9a7781d..16d17d1 100644
--- a/admin/inertia/css/app.css
+++ b/admin/inertia/css/app.css
@@ -126,13 +126,15 @@ body {
   color: #f7eedc;
 }
 
-[data-theme="dark"] .maplibregl-popup-content input {
+[data-theme="dark"] .maplibregl-popup-content input,
+[data-theme="dark"] .maplibregl-popup-content textarea {
   background: #353420;
   color: #f7eedc;
   border-color: #424420;
 }
 
-[data-theme="dark"] .maplibregl-popup-content input::placeholder {
+[data-theme="dark"] .maplibregl-popup-content input::placeholder,
+[data-theme="dark"] .maplibregl-popup-content textarea::placeholder {
   color: #8f8f82;
 }
 
@@ -155,4 +157,4 @@ body {
 [data-theme="dark"] .maplibregl-popup-close-button:hover {
   color: #f7eedc;
   background: #353420;
-}
\ No newline at end of file
+}
diff --git a/admin/package-lock.json b/admin/package-lock.json
index ae7ef36..f2ebfeb 100644
--- a/admin/package-lock.json
+++ b/admin/package-lock.json
@@ -4383,6 +4383,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4399,6 +4400,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4415,6 +4417,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -4431,6 +4434,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4447,6 +4451,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4463,6 +4468,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4479,6 +4485,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4495,6 +4502,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4511,6 +4519,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4527,6 +4536,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [

From 8479192e492a556e0e9ad21f209b8be2f40a6bc0 Mon Sep 17 00:00:00 2001
From: Kenneth Brewer <kennethbrewer3@gmail.com>
Date: Mon, 27 Apr 2026 16:41:57 -0400
Subject: [PATCH 3/8] Updated the MarkerPanel to allow searching for a marker,
 and to sort by name or color. Color sort is lexicographically done via the
 hex value because I plan to add custom marker colors in the future.

---
 admin/inertia/components/maps/MarkerPanel.tsx | 132 ++++++++++++++----
 1 file changed, 102 insertions(+), 30 deletions(-)

diff --git a/admin/inertia/components/maps/MarkerPanel.tsx b/admin/inertia/components/maps/MarkerPanel.tsx
index 1bf448e..cafe63b 100644
--- a/admin/inertia/components/maps/MarkerPanel.tsx
+++ b/admin/inertia/components/maps/MarkerPanel.tsx
@@ -1,5 +1,6 @@
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { IconMapPinFilled, IconTrash, IconMapPin, IconX } from '@tabler/icons-react'
+
 import { PIN_COLORS } from '~/hooks/useMapMarkers'
 import type { MapMarker } from '~/hooks/useMapMarkers'
 
@@ -11,26 +12,62 @@ interface MarkerPanelProps {
   selectedMarkerId: number | null
 }
 
+const getColorSortValue = (color: string) => {
+  const preset = PIN_COLORS.find((pinColor) => pinColor.id === color)
+
+  if (preset) return preset.label
+
+  return color.replace('#', '').toLowerCase()
+}
+
+type SortField = 'name' | 'color'
+type SortDirection = 'asc' | 'desc'
+
 export default function MarkerPanel({
-  markers,
-  onDelete,
-  onFlyTo,
-  onSelect,
-  selectedMarkerId,
-}: MarkerPanelProps) {
+                                      markers,
+                                      onDelete,
+                                      onFlyTo,
+                                      onSelect,
+                                      selectedMarkerId,
+                                    }: MarkerPanelProps) {
   const [open, setOpen] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [sortField, setSortField] = useState<SortField>('name')
+  const [sortDirection, setSortDirection] = useState<SortDirection>('asc')
+
+  const visibleMarkers = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase()
+
+    return [...markers]
+      .filter((marker) => {
+        if (!query) return true
+        return marker.name.toLowerCase().includes(query)
+      })
+      .sort((a, b) => {
+        const aValue = sortField === 'name' ? a.name : getColorSortValue(a.color)
+        const bValue = sortField === 'name' ? b.name : getColorSortValue(b.color)
+
+        const result = aValue.localeCompare(bValue, undefined, {
+          sensitivity: 'base',
+        })
+
+        return sortDirection === 'asc' ? result : -result
+      })
+  }, [markers, searchQuery, sortField, sortDirection])
 
   if (!open) {
     return (
       <button
+        type="button"
         onClick={() => setOpen(true)}
-        className="absolute left-4 top-[72px] z-40 flex items-center gap-1.5 rounded-lg bg-surface-primary/95 px-3 py-2 shadow-lg border border-border-subtle backdrop-blur-sm hover:bg-surface-secondary transition-colors"
+        className="absolute left-4 top-[72px] z-40 flex items-center gap-1.5 rounded-lg border border-border-subtle bg-surface-primary/95 px-3 py-2 shadow-lg backdrop-blur-sm transition-colors hover:bg-surface-secondary"
         title="Show saved locations"
       >
         <IconMapPin size={18} className="text-desert-orange" />
         <span className="text-sm font-medium text-text-primary">Pins</span>
+
         {markers.length > 0 && (
-          <span className="ml-0.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-desert-orange text-[11px] font-bold text-white px-1">
+          <span className="ml-0.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-desert-orange px-1 text-[11px] font-bold text-white">
             {markers.length}
           </span>
         )}
@@ -39,44 +76,75 @@ export default function MarkerPanel({
   }
 
   return (
-    <div className="absolute left-4 top-[72px] z-40 w-72 rounded-lg bg-surface-primary/95 shadow-lg border border-border-subtle backdrop-blur-sm">
-      {/* Header */}
-      <div className="flex items-center justify-between px-3 py-2.5 border-b border-border-subtle">
+    <div className="absolute left-4 top-[72px] z-40 w-72 rounded-lg border border-border-subtle bg-surface-primary/95 shadow-lg backdrop-blur-sm">
+      <div className="flex items-center justify-between border-b border-border-subtle px-3 py-2.5">
         <div className="flex items-center gap-2">
           <IconMapPin size={18} className="text-desert-orange" />
-          <span className="text-sm font-semibold text-text-primary">
-            Saved Locations
-          </span>
+
+          <span className="text-sm font-semibold text-text-primary">Saved Locations</span>
+
           {markers.length > 0 && (
-            <span className="flex h-5 min-w-5 items-center justify-center rounded-full bg-desert-orange text-[11px] font-bold text-white px-1">
+            <span className="flex h-5 min-w-5 items-center justify-center rounded-full bg-desert-orange px-1 text-[11px] font-bold text-white">
               {markers.length}
             </span>
           )}
         </div>
+
         <button
+          type="button"
           onClick={() => setOpen(false)}
-          className="rounded p-0.5 text-text-muted hover:text-text-primary hover:bg-surface-secondary transition-colors"
+          className="rounded p-0.5 text-text-muted transition-colors hover:bg-surface-secondary hover:text-text-primary"
           title="Close panel"
         >
           <IconX size={16} />
         </button>
       </div>
 
-      {/* Marker list */}
-      <div className="max-h-[calc(100vh-180px)] overflow-y-auto">
+      <div className="space-y-2 border-b border-border-subtle px-3 py-2">
+        <input
+          type="search"
+          placeholder="Search pins..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="block w-full rounded border border-border-default bg-surface-primary px-2 py-1 text-sm text-text-primary placeholder:text-text-muted focus:border-desert-green focus:outline-none"
+        />
+
+        <div className="flex gap-2">
+          <select
+            value={sortField}
+            onChange={(e) => setSortField(e.target.value as SortField)}
+            className="flex-1 rounded border border-border-default bg-surface-primary px-2 py-1 text-xs text-text-primary focus:border-desert-green focus:outline-none"
+          >
+            <option value="name">Sort by name</option>
+            <option value="color">Sort by color</option>
+          </select>
+
+          <button
+            type="button"
+            onClick={() => setSortDirection((prev) => (prev === 'asc' ? 'desc' : 'asc'))}
+            className="rounded border border-border-default px-2 py-1 text-xs text-text-secondary transition-colors hover:bg-surface-secondary"
+          >
+            {sortDirection === 'asc' ? 'A → Z' : 'Z → A'}
+          </button>
+        </div>
+      </div>
+
+      <div className="max-h-[calc(100vh-240px)] overflow-y-auto">
         {markers.length === 0 ? (
           <div className="px-3 py-6 text-center">
             <IconMapPinFilled size={24} className="mx-auto mb-2 text-text-muted" />
-            <p className="text-sm text-text-muted">
-              Click anywhere on the map to drop a pin
-            </p>
+            <p className="text-sm text-text-muted">Click anywhere on the map to drop a pin</p>
+          </div>
+        ) : visibleMarkers.length === 0 ? (
+          <div className="px-3 py-6 text-center">
+            <p className="text-sm text-text-muted">No pins match your search.</p>
           </div>
         ) : (
           <ul>
-            {markers.map((marker) => (
+            {visibleMarkers.map((marker) => (
               <li
                 key={marker.id}
-                className={`flex items-center gap-2 px-3 py-2 border-b border-border-subtle last:border-b-0 group transition-colors ${
+                className={`group flex items-center gap-2 border-b border-border-subtle px-3 py-2 transition-colors last:border-b-0 ${
                   marker.id === selectedMarkerId
                     ? 'bg-desert-green/10'
                     : 'hover:bg-surface-secondary'
@@ -85,23 +153,27 @@ export default function MarkerPanel({
                 <IconMapPinFilled
                   size={16}
                   className="shrink-0"
-                  style={{ color: PIN_COLORS.find((c) => c.id === marker.color)?.hex ?? '#a84a12' }}
+                  style={{
+                    color: PIN_COLORS.find((color) => color.id === marker.color)?.hex ?? '#a84a12',
+                  }}
                 />
+
                 <button
+                  type="button"
                   onClick={() => {
                     onSelect(marker.id)
                     onFlyTo(marker.longitude, marker.latitude)
                   }}
-                  className="flex-1 min-w-0 text-left"
+                  className="min-w-0 flex-1 text-left"
                   title={marker.name}
                 >
-                  <p className="text-sm font-medium text-text-primary truncate">
-                    {marker.name}
-                  </p>
+                  <p className="truncate text-sm font-medium text-text-primary">{marker.name}</p>
                 </button>
+
                 <button
+                  type="button"
                   onClick={() => onDelete(marker.id)}
-                  className="shrink-0 rounded p-1 text-text-muted opacity-0 group-hover:opacity-100 hover:text-desert-red hover:bg-surface-secondary transition-all"
+                  className="shrink-0 rounded p-1 text-text-muted opacity-0 transition-all hover:bg-surface-secondary hover:text-desert-red group-hover:opacity-100"
                   title="Delete pin"
                 >
                   <IconTrash size={14} />

From b0430162992b1bdb2e3b1678804e151a95e7707a Mon Sep 17 00:00:00 2001
From: Kenneth Brewer <kennethbrewer3@gmail.com>
Date: Mon, 27 Apr 2026 16:43:49 -0400
Subject: [PATCH 4/8] removed unused files that were modified by a refactor

---
 .../components/maps/CreateMapMarkerPopup.tsx  | 115 ------------------
 .../components/maps/EditMapMarkerPopup.tsx    | 111 -----------------
 2 files changed, 226 deletions(-)
 delete mode 100644 admin/inertia/components/maps/CreateMapMarkerPopup.tsx
 delete mode 100644 admin/inertia/components/maps/EditMapMarkerPopup.tsx

diff --git a/admin/inertia/components/maps/CreateMapMarkerPopup.tsx b/admin/inertia/components/maps/CreateMapMarkerPopup.tsx
deleted file mode 100644
index b55c66f..0000000
--- a/admin/inertia/components/maps/CreateMapMarkerPopup.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { Popup } from 'react-map-gl/maplibre'
-
-import { PIN_COLORS } from '~/hooks/useMapMarkers'
-import type { PinColorId } from '~/hooks/useMapMarkers'
-
-const MAX_MARKER_NOTES_LENGTH = 1000
-
-const inputClass =
-  'block w-full appearance-none rounded border border-gray-300 bg-transparent px-2 py-1 text-sm text-gray-900 leading-normal placeholder:text-gray-400 focus:border-gray-500 focus:outline-none'
-
-type CreateMapMarkerPopupProps = {
-  longitude: number
-  latitude: number
-  markerName: string
-  markerNotes: string
-  markerColor: PinColorId
-  onNameChange: (value: string) => void
-  onNotesChange: (value: string) => void
-  onColorChange: (value: PinColorId) => void
-  onSave: () => void
-  onCancel: () => void
-}
-
-export default function CreateMapMarkerPopup({
-                                               longitude,
-                                               latitude,
-                                               markerName,
-                                               markerNotes,
-                                               markerColor,
-                                               onNameChange,
-                                               onNotesChange,
-                                               onColorChange,
-                                               onSave,
-                                               onCancel,
-                                             }: CreateMapMarkerPopupProps) {
-  return (
-    <Popup
-      longitude={longitude}
-      latitude={latitude}
-      anchor="bottom"
-      onClose={onCancel}
-      closeOnClick={false}
-    >
-      <div className="p-1">
-        <input
-          autoFocus
-          type="text"
-          placeholder="Name this location"
-          value={markerName}
-          onChange={(e) => onNameChange(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') onSave()
-            if (e.key === 'Escape') onCancel()
-          }}
-          className={inputClass}
-        />
-
-        <textarea
-          placeholder="Add notes (optional)"
-          value={markerNotes}
-          rows={2}
-          maxLength={MAX_MARKER_NOTES_LENGTH}
-          onChange={(e) => {
-            onNotesChange(e.target.value)
-            e.currentTarget.style.height = 'auto'
-            e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`
-          }}
-          className={`mt-1 min-h-[64px] resize-none overflow-hidden ${inputClass}`}
-        />
-
-        <div className="mt-1 text-[11px] text-gray-400">
-          {markerNotes.length}/{MAX_MARKER_NOTES_LENGTH}
-        </div>
-
-        <div className="mt-1.5 flex gap-1 items-center">
-          {PIN_COLORS.map((color) => (
-            <button
-              key={color.id}
-              type="button"
-              onClick={() => onColorChange(color.id)}
-              title={color.label}
-              className="rounded-full p-0.5 transition-transform"
-              style={{
-                outline:
-                  markerColor === color.id ? `2px solid ${color.hex}` : '2px solid transparent',
-                outlineOffset: '1px',
-              }}
-            >
-              <div className="w-4 h-4 rounded-full" style={{ backgroundColor: color.hex }} />
-            </button>
-          ))}
-        </div>
-
-        <div className="mt-1.5 flex gap-1.5 justify-end">
-          <button
-            type="button"
-            onClick={onCancel}
-            className="text-xs text-gray-500 hover:text-gray-700 px-2 py-1 rounded transition-colors"
-          >
-            Cancel
-          </button>
-
-          <button
-            type="button"
-            onClick={onSave}
-            disabled={!markerName.trim()}
-            className="text-xs bg-[#424420] text-white rounded px-2.5 py-1 hover:bg-[#525530] disabled:opacity-40 transition-colors"
-          >
-            Save
-          </button>
-        </div>
-      </div>
-    </Popup>
-  )
-}
diff --git a/admin/inertia/components/maps/EditMapMarkerPopup.tsx b/admin/inertia/components/maps/EditMapMarkerPopup.tsx
deleted file mode 100644
index 1b5919c..0000000
--- a/admin/inertia/components/maps/EditMapMarkerPopup.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { useState } from 'react'
-import { Popup } from 'react-map-gl/maplibre'
-
-import type { MapMarker, PinColorId } from '~/hooks/useMapMarkers'
-import { PIN_COLORS } from '~/hooks/useMapMarkers'
-
-const MAX_MARKER_NOTES_LENGTH = 1000
-
-const inputClass =
-  'block w-full rounded border border-gray-300 bg-transparent px-2 py-1 text-sm text-gray-900 leading-normal placeholder:text-gray-400 focus:outline-none focus:border-gray-500'
-
-type EditMapMarkerPopupProps = {
-  marker: MapMarker
-  onSave: (id: number, name: string, notes: string, color: PinColorId) => void
-  onCancel: () => void
-}
-
-export default function EditMapMarkerPopup({
-                                             marker,
-                                             onSave,
-                                             onCancel,
-                                           }: EditMapMarkerPopupProps) {
-  const [name, setName] = useState(marker.name)
-  const [notes, setNotes] = useState(marker.notes ?? '')
-  const [color, setColor] = useState<PinColorId>(marker.color)
-
-  const handleSave = () => {
-    if (!name.trim()) return
-    onSave(marker.id, name.trim(), notes.trim(), color)
-  }
-
-  return (
-    <Popup
-      longitude={marker.longitude}
-      latitude={marker.latitude}
-      anchor="bottom"
-      offset={[0, -36] as [number, number]}
-      onClose={onCancel}
-      closeOnClick={false}
-    >
-      <div className="p-1">
-        <input
-          autoFocus
-          type="text"
-          placeholder="Name this location"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') handleSave()
-            if (e.key === 'Escape') onCancel()
-          }}
-          className={inputClass}
-        />
-
-        <textarea
-          placeholder="Add notes (optional)"
-          value={notes}
-          rows={2}
-          maxLength={MAX_MARKER_NOTES_LENGTH}
-          onChange={(e) => {
-            setNotes(e.target.value)
-            e.currentTarget.style.height = 'auto'
-            e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`
-          }}
-          className={`mt-1 min-h-[64px] resize-none overflow-hidden ${inputClass}`}
-        />
-
-        <div className="mt-1 text-[11px] text-gray-400">
-          {notes.length}/{MAX_MARKER_NOTES_LENGTH}
-        </div>
-
-        <div className="mt-1.5 flex gap-1 items-center">
-          {PIN_COLORS.map((pinColor) => (
-            <button
-              key={pinColor.id}
-              type="button"
-              onClick={() => setColor(pinColor.id)}
-              title={pinColor.label}
-              className="rounded-full p-0.5 transition-transform"
-              style={{
-                outline: color === pinColor.id ? `2px solid ${pinColor.hex}` : '2px solid transparent',
-                outlineOffset: '1px',
-              }}
-            >
-              <div className="w-4 h-4 rounded-full" style={{ backgroundColor: pinColor.hex }} />
-            </button>
-          ))}
-        </div>
-
-        <div className="mt-1.5 flex gap-1.5 justify-end">
-          <button
-            type="button"
-            onClick={onCancel}
-            className="text-xs text-gray-500 hover:text-gray-700 px-2 py-1 rounded transition-colors"
-          >
-            Cancel
-          </button>
-
-          <button
-            type="button"
-            onClick={handleSave}
-            disabled={!name.trim()}
-            className="text-xs bg-[#424420] text-white rounded px-2.5 py-1 hover:bg-[#525530] disabled:opacity-40 transition-colors"
-          >
-            Save
-          </button>
-        </div>
-      </div>
-    </Popup>
-  )
-}

From a09d945b41d4b7b28fd16d14935f6c78bfa14d9a Mon Sep 17 00:00:00 2001
From: Kenneth Brewer <kennethbrewer3@gmail.com>
Date: Tue, 28 Apr 2026 10:03:38 -0400
Subject: [PATCH 5/8] changed the color sort to use hue so that when custom
 colors are introduced it will sort in a way that is logically consistent.

---
 admin/app/controllers/maps_controller.ts      |  8 +++
 .../inertia/components/maps/MapComponent.tsx  | 12 +---
 admin/inertia/components/maps/MarkerPanel.tsx | 66 ++++++++++++++-----
 ...aleUnitControl.tsx => ScaleUnitToggle.tsx} |  2 +-
 .../components/maps/ViewMapMarkerPopup.tsx    | 16 ++++-
 5 files changed, 75 insertions(+), 29 deletions(-)
 rename admin/inertia/components/maps/{ScaleUnitControl.tsx => ScaleUnitToggle.tsx} (93%)

diff --git a/admin/app/controllers/maps_controller.ts b/admin/app/controllers/maps_controller.ts
index 31035ee..dd93a8b 100644
--- a/admin/app/controllers/maps_controller.ts
+++ b/admin/app/controllers/maps_controller.ts
@@ -167,11 +167,19 @@ export default class MapsController {
         vine.object({
           name: vine.string().trim().minLength(1).maxLength(255).optional(),
           color: vine.string().trim().maxLength(20).optional(),
+          longitude: vine.number().min(-180).max(180).optional(),
+          latitude: vine.number().min(-90).max(90).optional(),
+          notes: vine.string().trim().nullable().optional(),
+          marker_type: vine.string().trim().maxLength(20).optional(),
         })
       )
     )
     if (payload.name !== undefined) marker.name = payload.name
     if (payload.color !== undefined) marker.color = payload.color
+    if (payload.longitude !== undefined) marker.longitude = payload.longitude
+    if (payload.latitude !== undefined) marker.latitude = payload.latitude
+    if (payload.notes !== undefined) marker.notes = payload.notes
+    if (payload.marker_type !== undefined) marker.marker_type = payload.marker_type
     await marker.save()
     return marker
   }
diff --git a/admin/inertia/components/maps/MapComponent.tsx b/admin/inertia/components/maps/MapComponent.tsx
index d738638..1fe5208 100644
--- a/admin/inertia/components/maps/MapComponent.tsx
+++ b/admin/inertia/components/maps/MapComponent.tsx
@@ -16,7 +16,7 @@ import MarkerPin from './MarkerPin'
 import MarkerPanel from './MarkerPanel'
 import ViewMapMarkerPopup from './ViewMapMarkerPopup'
 import MapMarkerFormPopup from './MapMarkerFormPopup'
-import ScaleUnitControl from './ScaleUnitControl'
+import ScaleUnitToggle from './ScaleUnitToggle'
 
 type ScaleUnit = 'imperial' | 'metric'
 
@@ -94,7 +94,7 @@ export default function MapComponent() {
         <NavigationControl style={{ marginTop: '110px', marginRight: '36px' }} />
         <FullscreenControl style={{ marginTop: '30px', marginRight: '36px' }} />
         <ScaleControl position="bottom-left" maxWidth={150} unit={scaleUnit} />
-        <ScaleUnitControl scaleUnit={scaleUnit} onChange={handleScaleUnitChange} />
+        <ScaleUnitToggle scaleUnit={scaleUnit} onChange={handleScaleUnitChange} />
 
         {markers.map((marker) => (
           <Marker
@@ -136,14 +136,6 @@ export default function MapComponent() {
           />
         )}
 
-        {selectedMarker && editingMarkerId !== selectedMarker.id && (
-          <ViewMapMarkerPopup
-            marker={selectedMarker}
-            onClose={() => setSelectedMarkerId(null)}
-            onEdit={() => setEditingMarkerId(selectedMarker.id)}
-          />
-        )}
-
         {selectedMarker && editingMarkerId === selectedMarker.id && (
           <MapMarkerFormPopup
             longitude={selectedMarker.longitude}
diff --git a/admin/inertia/components/maps/MarkerPanel.tsx b/admin/inertia/components/maps/MarkerPanel.tsx
index cafe63b..1a9cc2c 100644
--- a/admin/inertia/components/maps/MarkerPanel.tsx
+++ b/admin/inertia/components/maps/MarkerPanel.tsx
@@ -12,17 +12,42 @@ interface MarkerPanelProps {
   selectedMarkerId: number | null
 }
 
-const getColorSortValue = (color: string) => {
-  const preset = PIN_COLORS.find((pinColor) => pinColor.id === color)
-
-  if (preset) return preset.label
-
-  return color.replace('#', '').toLowerCase()
-}
-
 type SortField = 'name' | 'color'
 type SortDirection = 'asc' | 'desc'
 
+const normalizeColorHex = (color: string) => {
+  const preset = PIN_COLORS.find((pinColor) => pinColor.id === color)
+  return preset?.hex ?? color
+}
+
+const getHueSortValue = (color: string) => {
+  const hex = normalizeColorHex(color).replace('#', '')
+
+  if (!/^[0-9a-fA-F]{6}$/.test(hex)) return 0
+
+  const r = parseInt(hex.slice(0, 2), 16) / 255
+  const g = parseInt(hex.slice(2, 4), 16) / 255
+  const b = parseInt(hex.slice(4, 6), 16) / 255
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const delta = max - min
+
+  if (delta === 0) return 0
+
+  let hue = 0
+
+  if (max === r) {
+    hue = ((g - b) / delta) % 6
+  } else if (max === g) {
+    hue = (b - r) / delta + 2
+  } else {
+    hue = (r - g) / delta + 4
+  }
+
+  return Math.round(hue * 60 + 360) % 360
+}
+
 export default function MarkerPanel({
                                       markers,
                                       onDelete,
@@ -35,6 +60,15 @@ export default function MarkerPanel({
   const [sortField, setSortField] = useState<SortField>('name')
   const [sortDirection, setSortDirection] = useState<SortDirection>('asc')
 
+  const sortDirectionLabel =
+    sortField === 'name'
+      ? sortDirection === 'asc'
+        ? 'A → Z'
+        : 'Z → A'
+      : sortDirection === 'asc'
+        ? 'Hue ↑'
+        : 'Hue ↓'
+
   const visibleMarkers = useMemo(() => {
     const query = searchQuery.trim().toLowerCase()
 
@@ -44,12 +78,10 @@ export default function MarkerPanel({
         return marker.name.toLowerCase().includes(query)
       })
       .sort((a, b) => {
-        const aValue = sortField === 'name' ? a.name : getColorSortValue(a.color)
-        const bValue = sortField === 'name' ? b.name : getColorSortValue(b.color)
-
-        const result = aValue.localeCompare(bValue, undefined, {
-          sensitivity: 'base',
-        })
+        const result =
+          sortField === 'name'
+            ? a.name.localeCompare(b.name, undefined, { sensitivity: 'base' })
+            : getHueSortValue(a.color) - getHueSortValue(b.color)
 
         return sortDirection === 'asc' ? result : -result
       })
@@ -116,7 +148,7 @@ export default function MarkerPanel({
             className="flex-1 rounded border border-border-default bg-surface-primary px-2 py-1 text-xs text-text-primary focus:border-desert-green focus:outline-none"
           >
             <option value="name">Sort by name</option>
-            <option value="color">Sort by color</option>
+            <option value="color">Sort by hue</option>
           </select>
 
           <button
@@ -124,7 +156,7 @@ export default function MarkerPanel({
             onClick={() => setSortDirection((prev) => (prev === 'asc' ? 'desc' : 'asc'))}
             className="rounded border border-border-default px-2 py-1 text-xs text-text-secondary transition-colors hover:bg-surface-secondary"
           >
-            {sortDirection === 'asc' ? 'A → Z' : 'Z → A'}
+            {sortDirectionLabel}
           </button>
         </div>
       </div>
@@ -154,7 +186,7 @@ export default function MarkerPanel({
                   size={16}
                   className="shrink-0"
                   style={{
-                    color: PIN_COLORS.find((color) => color.id === marker.color)?.hex ?? '#a84a12',
+                    color: normalizeColorHex(marker.color),
                   }}
                 />
 
diff --git a/admin/inertia/components/maps/ScaleUnitControl.tsx b/admin/inertia/components/maps/ScaleUnitToggle.tsx
similarity index 93%
rename from admin/inertia/components/maps/ScaleUnitControl.tsx
rename to admin/inertia/components/maps/ScaleUnitToggle.tsx
index 06d94f9..32cb788 100644
--- a/admin/inertia/components/maps/ScaleUnitControl.tsx
+++ b/admin/inertia/components/maps/ScaleUnitToggle.tsx
@@ -5,7 +5,7 @@ type ScaleUnitControlProps = {
   onChange: (unit: ScaleUnit) => void
 }
 
-export default function ScaleUnitControl({ scaleUnit, onChange }: ScaleUnitControlProps) {
+export default function ScaleUnitToggle({ scaleUnit, onChange }: ScaleUnitControlProps) {
   return (
     <div style={{ position: 'absolute', bottom: '30px', left: '10px', zIndex: 2 }}>
       <div
diff --git a/admin/inertia/components/maps/ViewMapMarkerPopup.tsx b/admin/inertia/components/maps/ViewMapMarkerPopup.tsx
index 99e3f9c..ae8d945 100644
--- a/admin/inertia/components/maps/ViewMapMarkerPopup.tsx
+++ b/admin/inertia/components/maps/ViewMapMarkerPopup.tsx
@@ -28,7 +28,21 @@ export default function ViewMapMarkerPopup({
 
       {marker.notes && (
         <div className="mt-1 text-xs text-gray-500">
-          <ReactMarkdown remarkPlugins={[remarkGfm]}>
+          <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
+            components={{
+              a: ({ href, children }) => (
+                <a
+                  href={href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-600 underline hover:text-blue-700"
+                >
+                  {children}
+                </a>
+              ),
+            }}
+          >
             {marker.notes}
           </ReactMarkdown>
         </div>

From 4a348c94e79e65de308704a338f25a20b170bc31 Mon Sep 17 00:00:00 2001
From: Kenneth Brewer <kennethbrewer3@gmail.com>
Date: Tue, 28 Apr 2026 10:29:45 -0400
Subject: [PATCH 6/8] reverted management_compose.yaml

---
 install/management_compose.yaml | 38 ++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/install/management_compose.yaml b/install/management_compose.yaml
index c8a360e..f4c7b5f 100644
--- a/install/management_compose.yaml
+++ b/install/management_compose.yaml
@@ -9,8 +9,8 @@
 name: project-nomad
 services:
   admin:
-    image: project-nomad:local
-    pull_policy: never
+    image: ghcr.io/crosstalk-solutions/project-nomad:latest
+    pull_policy: always
     container_name: nomad_admin
     restart: unless-stopped
     extra_hosts:
@@ -18,7 +18,7 @@ services:
     ports:
       - "8080:8080"
     volumes:
-      - /Users/kbb3/project-nomad/storage:/app/storage # If you change the default storage path (/opt/project-nomad/storage), make sure to update the disk-collector config as well!
+      - /opt/project-nomad/storage:/app/storage # If you change the default storage path (/opt/project-nomad/storage), make sure to update the disk-collector config as well!
       - /var/run/docker.sock:/var/run/docker.sock # Allows the admin service to communicate with the Host's Docker daemon
       - nomad-update-shared:/app/update-shared # Shared volume for update communication
     environment:
@@ -27,18 +27,18 @@ services:
       - PORT=8080
       - LOG_LEVEL=info
       # APP_KEY needs to be at least 16 chars or will fail validation and container won't start!
-      - APP_KEY=17cd5668db08606ef9befd97311bf83f787485507418bc41f47f4ef81070b7f7
+      - APP_KEY=replaceme
       # # Leave HOST as is so the admin server listens all interfaces within the container - this doesn't affect how you access it from the host, it's just for internal container networking
       - HOST=0.0.0.0
       # URL should be set to the URL you will access the admin interface at (e.g. http://localhost:8080 or http://192.168.1.x:8080)
-      - URL=http://localhost:8080
+      - URL=replaceme
       - DB_HOST=mysql
       # If you change the MySQL port, make sure to update this accordingly
       - DB_PORT=3306
       - DB_DATABASE=nomad
       - DB_USER=nomad_user
       # Needs to match the MYSQL_PASSWORD in the mysql service!
-      - DB_PASSWORD=28230a296b16650b7f241fb7044694245e4c039fb1dc4a79f496ca79d6c0d450
+      - DB_PASSWORD=replaceme
       - DB_NAME=nomad
       - DB_SSL=false
       - REDIS_HOST=redis
@@ -72,13 +72,13 @@ services:
     container_name: nomad_mysql
     restart: unless-stopped
     environment:
-      - MYSQL_ROOT_PASSWORD=ee680548bc3c992dac137343413828adf20d8844e8fc69158a4c28b0abe05ca6
+      - MYSQL_ROOT_PASSWORD=replaceme
       - MYSQL_DATABASE=nomad
       - MYSQL_USER=nomad_user
       # Needs to match DB_PASSWORD in the admin service!
-      - MYSQL_PASSWORD=28230a296b16650b7f241fb7044694245e4c039fb1dc4a79f496ca79d6c0d450
+      - MYSQL_PASSWORD=replaceme
     volumes:
-      - /Users/kbb3/project-nomad/mysql:/var/lib/mysql # Persist MySQL data on the host. This path can be changed if needed, just make sure it's writable by the container. Host persistence is important for the database to ensure your data isn't lost when the container is removed or updated.
+      - /opt/project-nomad/mysql:/var/lib/mysql # Persist MySQL data on the host. This path can be changed if needed, just make sure it's writable by the container. Host persistence is important for the database to ensure your data isn't lost when the container is removed or updated.
     healthcheck:
       test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
       interval: 30s
@@ -89,7 +89,7 @@ services:
     container_name: nomad_redis
     restart: unless-stopped
     volumes:
-      - /Users/kbb3/project-nomad/redis:/data # Persist Redis data on the host. This path can be changed if needed, just make sure it's writable by the container. Host persistence is important for Redis to ensure your data isn't lost when the container is removed or updated.
+      - /opt/project-nomad/redis:/data # Persist Redis data on the host. This path can be changed if needed, just make sure it's writable by the container. Host persistence is important for Redis to ensure your data isn't lost when the container is removed or updated.
     healthcheck:
       test: ["CMD", "redis-cli", "ping"]
       interval: 30s
@@ -103,18 +103,18 @@ services:
     restart: unless-stopped
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock # Allows communication with the Host's Docker daemon
-      - /Users/kbb3/project-nomad:/opt/project-nomad # Writable access required so the updater can set the correct image tag in compose.yml. This needs to be the same location that the compose file is located at on the host for the updater to work correctly
+      - /opt/project-nomad:/opt/project-nomad # Writable access required so the updater can set the correct image tag in compose.yml. This needs to be the same location that the compose file is located at on the host for the updater to work correctly
       - nomad-update-shared:/shared # Shared volume for communication with admin container
-  #disk-collector:
+  disk-collector:
     # Disk Collector is a lightweight privileged container that collects disk usage information from the host system and shares it with the admin container so it can be displayed in the UI. 
     # It requires read-only access to the host filesystem and is designed to be as secure and limited in scope as possible while still providing the necessary functionality.
-    #image: ghcr.io/crosstalk-solutions/project-nomad-disk-collector:latest
-    #pull_policy: always
-    #container_name: nomad_disk_collector
-    #restart: unless-stopped
-    #volumes:
-    #  - /:/host:ro,rslave  # Read-only view of host FS with rslave propagation so /sys and /proc submounts are visible
-    #  - /Users/kbb3/project-nomad/storage:/storage
+    image: ghcr.io/crosstalk-solutions/project-nomad-disk-collector:latest
+    pull_policy: always
+    container_name: nomad_disk_collector
+    restart: unless-stopped
+    volumes:
+      - /:/host:ro,rslave  # Read-only view of host FS with rslave propagation so /sys and /proc submounts are visible
+      - /opt/project-nomad/storage:/storage
 
 volumes:
   nomad-update-shared:

From aad4d2af7c229b5fdb4c5ad7d1dcc0cb896fe9dd Mon Sep 17 00:00:00 2001
From: Kenneth Brewer <kennethbrewer3@gmail.com>
Date: Wed, 29 Apr 2026 02:13:43 -0400
Subject: [PATCH 7/8] Addressed PR comments about the textarea auto growing,
 the in flight notes changes asking for confirmation, and updated the hue sort
 to sort by lightness and then hue so that grayscale values will not collide
 with red

---
 .../inertia/components/maps/MapComponent.tsx  | 37 ++++++--
 .../components/maps/MapMarkerFormPopup.tsx    | 37 +++++++-
 admin/inertia/components/maps/MarkerPanel.tsx | 30 +++++--
 .../components/maps/ViewMapMarkerPopup.tsx    | 84 ++++++++++---------
 admin/inertia/css/app.css                     | 47 +++++++++++
 5 files changed, 179 insertions(+), 56 deletions(-)

diff --git a/admin/inertia/components/maps/MapComponent.tsx b/admin/inertia/components/maps/MapComponent.tsx
index 1fe5208..0580e3c 100644
--- a/admin/inertia/components/maps/MapComponent.tsx
+++ b/admin/inertia/components/maps/MapComponent.tsx
@@ -27,11 +27,18 @@ export default function MapComponent() {
   const [placingMarker, setPlacingMarker] = useState<{ lng: number; lat: number } | null>(null)
   const [selectedMarkerId, setSelectedMarkerId] = useState<number | null>(null)
   const [editingMarkerId, setEditingMarkerId] = useState<number | null>(null)
+  const [hasUnsavedMarkerChanges, setHasUnsavedMarkerChanges] = useState(false)
 
   const [scaleUnit, setScaleUnit] = useState<ScaleUnit>(
     () => (localStorage.getItem('nomad:map-scale-unit') as ScaleUnit) || 'metric'
   )
 
+  const confirmDiscardMarkerChanges = useCallback(() => {
+    if (!hasUnsavedMarkerChanges) return true
+
+    return window.confirm('Discard unsaved marker changes?')
+  }, [hasUnsavedMarkerChanges])
+
   useEffect(() => {
     const protocol = new Protocol()
     maplibregl.addProtocol('pmtiles', protocol.tile)
@@ -46,11 +53,17 @@ export default function MapComponent() {
     localStorage.setItem('nomad:map-scale-unit', unit)
   }, [])
 
-  const handleMapClick = useCallback((e: MapLayerMouseEvent) => {
-    setPlacingMarker({ lng: e.lngLat.lng, lat: e.lngLat.lat })
-    setSelectedMarkerId(null)
-    setEditingMarkerId(null)
-  }, [])
+  const handleMapClick = useCallback(
+    (e: MapLayerMouseEvent) => {
+      if (!confirmDiscardMarkerChanges()) return
+
+      setPlacingMarker({ lng: e.lngLat.lng, lat: e.lngLat.lat })
+      setSelectedMarkerId(null)
+      setEditingMarkerId(null)
+      setHasUnsavedMarkerChanges(false)
+    },
+    [confirmDiscardMarkerChanges]
+  )
 
   const handleFlyTo = useCallback((longitude: number, latitude: number) => {
     mapRef.current?.flyTo({ center: [longitude, latitude], zoom: 12, duration: 1500 })
@@ -104,9 +117,13 @@ export default function MapComponent() {
             anchor="bottom"
             onClick={(e) => {
               e.originalEvent.stopPropagation()
+
+              if (!confirmDiscardMarkerChanges()) return
+
               setSelectedMarkerId(marker.id === selectedMarkerId ? null : marker.id)
               setPlacingMarker(null)
               setEditingMarkerId(null)
+              setHasUnsavedMarkerChanges(false)
             }}
           >
             <MarkerPin
@@ -124,7 +141,13 @@ export default function MapComponent() {
               await addMarker(name, placingMarker.lng, placingMarker.lat, color, notes || undefined)
               setPlacingMarker(null)
             }}
-            onCancel={() => setPlacingMarker(null)}
+            onCancel={() => {
+              if (!confirmDiscardMarkerChanges()) return
+
+              setPlacingMarker(null)
+              setEditingMarkerId(null)
+              setHasUnsavedMarkerChanges(false)
+            }}
           />
         )}
 
@@ -141,6 +164,7 @@ export default function MapComponent() {
             longitude={selectedMarker.longitude}
             latitude={selectedMarker.latitude}
             initialMarker={selectedMarker}
+            onDirtyChange={setHasUnsavedMarkerChanges}
             onSave={async ({ id, name, notes, color }) => {
               if (!id) return
 
@@ -151,6 +175,7 @@ export default function MapComponent() {
               })
 
               setEditingMarkerId(null)
+              setHasUnsavedMarkerChanges(false)
             }}
             onCancel={() => setEditingMarkerId(null)}
           />
diff --git a/admin/inertia/components/maps/MapMarkerFormPopup.tsx b/admin/inertia/components/maps/MapMarkerFormPopup.tsx
index b5bd839..190e6e7 100644
--- a/admin/inertia/components/maps/MapMarkerFormPopup.tsx
+++ b/admin/inertia/components/maps/MapMarkerFormPopup.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react'
 import { Popup } from 'react-map-gl/maplibre'
 
 import { PIN_COLORS } from '~/hooks/useMapMarkers'
@@ -20,6 +20,7 @@ type MapMarkerFormPopupProps = {
     color: PinColorId
   }) => void
   onCancel: () => void
+  onDirtyChange?: (dirty: boolean) => void
 }
 
 export default function MapMarkerFormPopup({
@@ -28,11 +29,39 @@ export default function MapMarkerFormPopup({
                                              initialMarker,
                                              onSave,
                                              onCancel,
+                                             onDirtyChange,
                                            }: MapMarkerFormPopupProps) {
   const [name, setName] = useState(initialMarker?.name ?? '')
   const [notes, setNotes] = useState(initialMarker?.notes ?? '')
   const [color, setColor] = useState<PinColorId>(initialMarker?.color ?? 'orange')
 
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null)
+
+  const resizeTextarea = useCallback(() => {
+    const textarea = textareaRef.current
+    if (!textarea) return
+
+    textarea.style.height = 'auto'
+    textarea.style.height = `${textarea.scrollHeight}px`
+  }, [])
+
+  useLayoutEffect(() => {
+    resizeTextarea()
+  }, [resizeTextarea])
+
+  useLayoutEffect(() => {
+    resizeTextarea()
+  }, [])
+
+  const isDirty =
+    name !== (initialMarker?.name ?? '') ||
+    notes !== (initialMarker?.notes ?? '') ||
+    color !== (initialMarker?.color ?? 'orange')
+
+  useEffect(() => {
+    onDirtyChange?.(isDirty)
+  }, [isDirty, onDirtyChange])
+
   const handleSave = () => {
     if (!name.trim()) return
 
@@ -68,16 +97,16 @@ export default function MapMarkerFormPopup({
         />
 
         <textarea
+          ref={textareaRef}
           placeholder="Add notes (optional)"
           value={notes}
           rows={2}
           maxLength={MAX_MARKER_NOTES_LENGTH}
           onChange={(e) => {
             setNotes(e.target.value)
-            e.currentTarget.style.height = 'auto'
-            e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`
+            requestAnimationFrame(resizeTextarea)
           }}
-          className={`mt-1 min-h-[64px] resize-none overflow-hidden ${inputClass}`}
+          className={`mt-1 min-h-[64px] max-h-[240px] resize-none overflow-y-auto themed-scrollbar ${inputClass}`}
         />
 
         <div className="mt-1 text-[11px] text-gray-400">
diff --git a/admin/inertia/components/maps/MarkerPanel.tsx b/admin/inertia/components/maps/MarkerPanel.tsx
index 1a9cc2c..8565bb3 100644
--- a/admin/inertia/components/maps/MarkerPanel.tsx
+++ b/admin/inertia/components/maps/MarkerPanel.tsx
@@ -20,10 +20,13 @@ const normalizeColorHex = (color: string) => {
   return preset?.hex ?? color
 }
 
-const getHueSortValue = (color: string) => {
+const getColorSortValue = (color: string) => {
   const hex = normalizeColorHex(color).replace('#', '')
 
-  if (!/^[0-9a-fA-F]{6}$/.test(hex)) return 0
+  // Invalid/custom non-hex colors sort after valid colors
+  if (!/^[0-9a-fA-F]{6}$/.test(hex)) {
+    return { bucket: 2, hue: 0, lightness: 0 }
+  }
 
   const r = parseInt(hex.slice(0, 2), 16) / 255
   const g = parseInt(hex.slice(2, 4), 16) / 255
@@ -32,8 +35,12 @@ const getHueSortValue = (color: string) => {
   const max = Math.max(r, g, b)
   const min = Math.min(r, g, b)
   const delta = max - min
+  const lightness = (max + min) / 2
 
-  if (delta === 0) return 0
+  // Grayscale colors sort separately before hue colors, by lightness
+  if (delta === 0) {
+    return { bucket: 0, hue: 0, lightness }
+  }
 
   let hue = 0
 
@@ -45,7 +52,11 @@ const getHueSortValue = (color: string) => {
     hue = (r - g) / delta + 4
   }
 
-  return Math.round(hue * 60 + 360) % 360
+  return {
+    bucket: 1,
+    hue: Math.round(hue * 60 + 360) % 360,
+    lightness,
+  }
 }
 
 export default function MarkerPanel({
@@ -81,7 +92,16 @@ export default function MarkerPanel({
         const result =
           sortField === 'name'
             ? a.name.localeCompare(b.name, undefined, { sensitivity: 'base' })
-            : getHueSortValue(a.color) - getHueSortValue(b.color)
+            : (() => {
+          const aColor = getColorSortValue(a.color)
+          const bColor = getColorSortValue(b.color)
+
+          return (
+            aColor.bucket - bColor.bucket ||
+            aColor.hue - bColor.hue ||
+            aColor.lightness - bColor.lightness
+          )
+        })()
 
         return sortDirection === 'asc' ? result : -result
       })
diff --git a/admin/inertia/components/maps/ViewMapMarkerPopup.tsx b/admin/inertia/components/maps/ViewMapMarkerPopup.tsx
index ae8d945..d7762f0 100644
--- a/admin/inertia/components/maps/ViewMapMarkerPopup.tsx
+++ b/admin/inertia/components/maps/ViewMapMarkerPopup.tsx
@@ -16,47 +16,49 @@ export default function ViewMapMarkerPopup({
                                              onEdit,
                                            }: ViewMapMarkerPopupProps) {
   return (
-    <Popup
-      longitude={marker.longitude}
-      latitude={marker.latitude}
-      anchor="bottom"
-      offset={[0, -36] as [number, number]}
-      onClose={onClose}
-      closeOnClick={false}
-    >
-      <div className="text-sm font-medium">{marker.name}</div>
-
-      {marker.notes && (
-        <div className="mt-1 text-xs text-gray-500">
-          <ReactMarkdown
-            remarkPlugins={[remarkGfm]}
-            components={{
-              a: ({ href, children }) => (
-                <a
-                  href={href}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-blue-600 underline hover:text-blue-700"
-                >
-                  {children}
-                </a>
-              ),
-            }}
+      <div className="max-w-[260px]">
+          <Popup
+              longitude={marker.longitude}
+              latitude={marker.latitude}
+              anchor="bottom"
+              offset={[0, -36] as [number, number]}
+              onClose={onClose}
+              closeOnClick={false}
           >
-            {marker.notes}
-          </ReactMarkdown>
-        </div>
-      )}
+              <div className="text-sm font-medium">{marker.name}</div>
 
-      <div className="mt-2 flex justify-end">
-        <button
-          type="button"
-          onClick={onEdit}
-          className="rounded bg-[#424420] px-2.5 py-1 text-xs text-white hover:bg-[#525530]"
-        >
-          Edit
-        </button>
+              {marker.notes && (
+                  <div className="mt-1 max-w-[240px] break-all whitespace-pre-wrap text-xs text-gray-500">
+                      <ReactMarkdown
+                          remarkPlugins={[remarkGfm]}
+                          components={{
+                              a: ({href, children}) => (
+                                  <a
+                                      href={href}
+                                      target="_blank"
+                                      rel="noopener noreferrer"
+                                      className="break-all text-blue-600 underline hover:text-blue-700"
+                                  >
+                                      {children}
+                                  </a>
+                              ),
+                          }}
+                      >
+                          {marker.notes}
+                      </ReactMarkdown>
+                  </div>
+              )}
+
+              <div className="mt-2 flex justify-end">
+                  <button
+                      type="button"
+                      onClick={onEdit}
+                      className="rounded bg-[#424420] px-2.5 py-1 text-xs text-white hover:bg-[#525530]"
+                  >
+                      Edit
+                  </button>
+              </div>
+          </Popup>
       </div>
-    </Popup>
-  )
-}
+          )
+          }
diff --git a/admin/inertia/css/app.css b/admin/inertia/css/app.css
index 16d17d1..4fe2b92 100644
--- a/admin/inertia/css/app.css
+++ b/admin/inertia/css/app.css
@@ -158,3 +158,50 @@ body {
   color: #f7eedc;
   background: #353420;
 }
+
+/* Base (hidden scrollbar + fade hint) */
+.themed-scrollbar {
+  scrollbar-width: none; /* Firefox */
+  mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    black 8px,
+    black calc(100% - 8px),
+    transparent
+  );
+}
+
+/* Chrome / Safari */
+.themed-scrollbar::-webkit-scrollbar {
+  width: 0px;
+}
+
+/* Show scrollbar on hover OR focus */
+.themed-scrollbar:hover,
+.themed-scrollbar:focus {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-default) transparent;
+}
+
+.themed-scrollbar:hover::-webkit-scrollbar,
+.themed-scrollbar:focus::-webkit-scrollbar {
+  width: 8px;
+}
+
+.themed-scrollbar:hover::-webkit-scrollbar-track,
+.themed-scrollbar:focus::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.themed-scrollbar:hover::-webkit-scrollbar-thumb,
+.themed-scrollbar:focus::-webkit-scrollbar-thumb {
+  background-color: var(--color-border-default);
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+.themed-scrollbar:hover::-webkit-scrollbar-thumb:hover,
+.themed-scrollbar:focus::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-text-muted);
+}

From 2f00db362dfcbcd0fe528d9ac759539d37a0bb8d Mon Sep 17 00:00:00 2001
From: Kenneth Brewer <kennethbrewer3@gmail.com>
Date: Wed, 29 Apr 2026 02:57:37 -0400
Subject: [PATCH 8/8] Addressed further pr comments about the api, onSave
 async, and adding a comment about rehypeRaw

---
 .../inertia/components/maps/MapComponent.tsx  |  2 +
 .../components/maps/MapMarkerFormPopup.tsx    | 38 ++++++++++---------
 .../components/maps/ViewMapMarkerPopup.tsx    |  2 +
 admin/inertia/lib/api.ts                      | 26 +++++++------
 admin/types/maps.ts                           | 14 +++++++
 5 files changed, 54 insertions(+), 28 deletions(-)

diff --git a/admin/inertia/components/maps/MapComponent.tsx b/admin/inertia/components/maps/MapComponent.tsx
index 0580e3c..b906932 100644
--- a/admin/inertia/components/maps/MapComponent.tsx
+++ b/admin/inertia/components/maps/MapComponent.tsx
@@ -137,9 +137,11 @@ export default function MapComponent() {
           <MapMarkerFormPopup
             longitude={placingMarker.lng}
             latitude={placingMarker.lat}
+            onDirtyChange={setHasUnsavedMarkerChanges}
             onSave={async ({ name, notes, color }) => {
               await addMarker(name, placingMarker.lng, placingMarker.lat, color, notes || undefined)
               setPlacingMarker(null)
+              setHasUnsavedMarkerChanges(false)
             }}
             onCancel={() => {
               if (!confirmDiscardMarkerChanges()) return
diff --git a/admin/inertia/components/maps/MapMarkerFormPopup.tsx b/admin/inertia/components/maps/MapMarkerFormPopup.tsx
index 190e6e7..94ff34b 100644
--- a/admin/inertia/components/maps/MapMarkerFormPopup.tsx
+++ b/admin/inertia/components/maps/MapMarkerFormPopup.tsx
@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react'
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { Popup } from 'react-map-gl/maplibre'
 
 import { PIN_COLORS } from '~/hooks/useMapMarkers'
@@ -18,7 +18,7 @@ type MapMarkerFormPopupProps = {
     name: string
     notes: string
     color: PinColorId
-  }) => void
+  }) => Promise<void> | void
   onCancel: () => void
   onDirtyChange?: (dirty: boolean) => void
 }
@@ -34,6 +34,7 @@ export default function MapMarkerFormPopup({
   const [name, setName] = useState(initialMarker?.name ?? '')
   const [notes, setNotes] = useState(initialMarker?.notes ?? '')
   const [color, setColor] = useState<PinColorId>(initialMarker?.color ?? 'orange')
+  const [isSaving, setIsSaving] = useState(false)
 
   const textareaRef = useRef<HTMLTextAreaElement | null>(null)
 
@@ -49,10 +50,6 @@ export default function MapMarkerFormPopup({
     resizeTextarea()
   }, [resizeTextarea])
 
-  useLayoutEffect(() => {
-    resizeTextarea()
-  }, [])
-
   const isDirty =
     name !== (initialMarker?.name ?? '') ||
     notes !== (initialMarker?.notes ?? '') ||
@@ -62,15 +59,21 @@ export default function MapMarkerFormPopup({
     onDirtyChange?.(isDirty)
   }, [isDirty, onDirtyChange])
 
-  const handleSave = () => {
-    if (!name.trim()) return
+  const handleSave = async () => {
+    if (!name.trim() || isSaving) return
 
-    onSave({
-      id: initialMarker?.id,
-      name: name.trim(),
-      notes: notes.trim(),
-      color,
-    })
+    try {
+      setIsSaving(true)
+
+      await onSave({
+        id: initialMarker?.id,
+        name: name.trim(),
+        notes: notes.trim(),
+        color,
+      })
+    } finally {
+      setIsSaving(false)
+    }
   }
 
   return (
@@ -136,7 +139,8 @@ export default function MapMarkerFormPopup({
           <button
             type="button"
             onClick={onCancel}
-            className="text-xs text-gray-500 hover:text-gray-700 px-2 py-1 rounded transition-colors"
+            disabled={isSaving}
+            className="text-xs text-gray-500 hover:text-gray-700 px-2 py-1 rounded transition-colors disabled:opacity-40"
           >
             Cancel
           </button>
@@ -144,10 +148,10 @@ export default function MapMarkerFormPopup({
           <button
             type="button"
             onClick={handleSave}
-            disabled={!name.trim()}
+            disabled={!name.trim() || isSaving}
             className="text-xs bg-[#424420] text-white rounded px-2.5 py-1 hover:bg-[#525530] disabled:opacity-40 transition-colors"
           >
-            Save
+            {isSaving ? 'Saving...' : 'Save'}
           </button>
         </div>
       </div>
diff --git a/admin/inertia/components/maps/ViewMapMarkerPopup.tsx b/admin/inertia/components/maps/ViewMapMarkerPopup.tsx
index d7762f0..227b73b 100644
--- a/admin/inertia/components/maps/ViewMapMarkerPopup.tsx
+++ b/admin/inertia/components/maps/ViewMapMarkerPopup.tsx
@@ -29,6 +29,8 @@ export default function ViewMapMarkerPopup({
 
               {marker.notes && (
                   <div className="mt-1 max-w-[240px] break-all whitespace-pre-wrap text-xs text-gray-500">
+                       {/* react-markdown is intentionally used without rehypeRaw.
+                            Do not enable raw HTML rendering unless notes are sanitized first. */}
                       <ReactMarkdown
                           remarkPlugins={[remarkGfm]}
                           components={{
diff --git a/admin/inertia/lib/api.ts b/admin/inertia/lib/api.ts
index 0df95ae..e8b995e 100644
--- a/admin/inertia/lib/api.ts
+++ b/admin/inertia/lib/api.ts
@@ -10,6 +10,7 @@ import { catchInternal } from './util'
 import { NomadChatResponse, NomadInstalledModel, NomadOllamaModel, OllamaChatRequest } from '../../types/ollama'
 import BenchmarkResult from '#models/benchmark_result'
 import { BenchmarkType, RunBenchmarkResponse, SubmitBenchmarkResponse, UpdateBuilderTagResponse } from '../../types/benchmark'
+import type { MapMarkerResponse } from '../../types/maps'
 
 class API {
   private client: AxiosInstance
@@ -580,27 +581,30 @@ 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 }>
-      >('/maps/markers')
+      const response = await this.client.get<MapMarkerResponse[]>('/maps/markers')
       return response.data
     })()
   }
 
-  async createMapMarker(data: { name: string; longitude: number; latitude: number; color?: string }) {
+  async createMapMarker(data: {
+    name: string
+    notes?: string | null
+    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 }
-      >('/maps/markers', data)
+      const response = await this.client.post<MapMarkerResponse>('/maps/markers', data)
       return response.data
     })()
   }
 
-  async updateMapMarker(id: number, data: { name?: string; color?: string }) {
+  async updateMapMarker(
+    id: number,
+    data: { name?: string; notes?: string | null; color?: string }
+  ) {
     return catchInternal(async () => {
-      const response = await this.client.patch<
-        { id: number; name: string; longitude: number; latitude: number; color: string }
-      >(`/maps/markers/${id}`, data)
+      const response = await this.client.patch<MapMarkerResponse>(`/maps/markers/${id}`, data)
       return response.data
     })()
   }
diff --git a/admin/types/maps.ts b/admin/types/maps.ts
index f907126..ff3072d 100644
--- a/admin/types/maps.ts
+++ b/admin/types/maps.ts
@@ -21,3 +21,17 @@ export type MapLayer = {
   'source-layer'?: string
   [key: string]: any
 }
+
+export type MapMarkerResponse = {
+  id: number
+  name: string
+  longitude: number
+  latitude: number
+  color: string
+  notes?: string | null
+  marker_type?: string
+  route_id?: string | null
+  route_order?: number | null
+  created_at: string
+  updated_at?: string
+}