Merge PR #802 (kennethbrewer3) - feat(maps): add details on marker

Resolved 2 conflicts arising from #786 + #802 both restructuring map UX.

ScaleUnitToggle.tsx:
  - Combined #786's onMouseEnter prop (essential for hide-coords-over-controls)
    with #802's cursor-pointer styling and `if (scaleUnit !== X)` guards.
  - Kept Tailwind classes (codebase convention) over #802's inline styles.

MapComponent.tsx:
  - Layered #786's cursor/coords/dragging UX on top of #802's componentized
    marker structure (MapMarkerFormPopup, ViewMapMarkerPopup).
  - Dropped #786's inline marker form (markerName/markerColor state +
    handleSaveMarker) — superseded by #802's MapMarkerFormPopup which
    manages its own form state.
  - Used #802's handleMapClick (calls confirmDiscardMarkerChanges) instead
    of #786's simple version.
  - Added '.maplibregl-popup' to both control selectors so #786's
    hide-coords-over-controls UX naturally extends to popups without
    requiring changes to #802's popup components.
  - Kept all of #786's drag/cursor handlers on <Map> (onMouseDown/Up/
    DragStart/End/MouseMove/MouseLeave + cursor='grabbing'/'crosshair').
  - Kept #802's editingMarkerId / hasUnsavedMarkerChanges state for the
    edit flow.

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'
@@ -14,12 +13,13 @@ 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 CoordinateOverlay from './CoordinateOverlay'
 import ScaleUnitToggle from './ScaleUnitToggle'
+import ViewMapMarkerPopup from './ViewMapMarkerPopup'
+import MapMarkerFormPopup from './MapMarkerFormPopup'
 
 type ScaleUnit = 'imperial' | 'metric'
 
@@ -35,13 +35,13 @@ export default function MapComponent({
   const mapRef = useRef<MapRef>(null)
   const animationFrameRef = useRef<number | null>(null)
 
-  const { markers, addMarker, deleteMarker } = useMapMarkers()
+  const { markers, addMarker, updateMarker, deleteMarker } = useMapMarkers()
 
   const [isDraggingMap, setIsDraggingMap] = useState(false)
   const [placingMarker, setPlacingMarker] = useState<{ lng: number; lat: number } | null>(null)
-  const [markerName, setMarkerName] = useState('')
-  const [markerColor, setMarkerColor] = useState<PinColorId>('orange')
   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'
@@ -56,6 +56,12 @@ export default function MapComponent({
 
   const [showCoordinates, setShowCoordinates] = useState(false)
 
+  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)
@@ -91,7 +97,7 @@ export default function MapComponent({
         !showCoordinatesEnabled ||
         isHoveringUI ||
         isDraggingMap ||
-        target?.closest('.maplibregl-control-container, .maplibregl-ctrl')
+        target?.closest('.maplibregl-control-container, .maplibregl-ctrl, .maplibregl-popup')
       ) {
         hideCoordinates()
         return
@@ -114,21 +120,17 @@ export default function MapComponent({
     [hideCoordinates, isHoveringUI, isDraggingMap, showCoordinatesEnabled]
   )
 
-  const handleMapClick = useCallback((e: MapLayerMouseEvent) => {
-    setPlacingMarker({ lng: e.lngLat.lng, lat: e.lngLat.lat })
-    setMarkerName('')
-    setMarkerColor('orange')
-    setSelectedMarkerId(null)
-  }, [])
+  const handleMapClick = useCallback(
+    (e: MapLayerMouseEvent) => {
+      if (!confirmDiscardMarkerChanges()) return
 
-  const handleSaveMarker = useCallback(() => {
-    if (placingMarker && markerName.trim()) {
-      addMarker(markerName.trim(), placingMarker.lng, placingMarker.lat, markerColor)
-      setPlacingMarker(null)
-      setMarkerName('')
-      setMarkerColor('orange')
-    }
-  }, [placingMarker, markerName, markerColor, addMarker])
+      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 })
@@ -136,13 +138,22 @@ 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>
@@ -157,7 +168,7 @@ export default function MapComponent({
 
           if (
             target?.closest(
-              '.maplibregl-control-container, .maplibregl-ctrl, .maplibregl-ctrl-group, .maplibregl-ctrl-scale'
+              '.maplibregl-control-container, .maplibregl-ctrl, .maplibregl-ctrl-group, .maplibregl-ctrl-scale, .maplibregl-popup'
             )
           ) {
             hideCoordinates()
@@ -199,6 +210,12 @@ export default function MapComponent({
           <FullscreenControl style={{ marginTop: '30px', marginRight: '36px' }} />
           <ScaleControl position="bottom-left" maxWidth={150} unit={scaleUnit} />
 
+          <ScaleUnitToggle
+            scaleUnit={scaleUnit}
+            onChange={handleScaleUnitChange}
+            onMouseEnter={hideCoordinates}
+          />
+
           {showCoordinates && cursorLngLat && (
             <CoordinateOverlay
               latitude={cursorLngLat.lat}
@@ -208,12 +225,6 @@ export default function MapComponent({
             />
           )}
 
-          <ScaleUnitToggle
-            scaleUnit={scaleUnit}
-            onChange={handleScaleUnitChange}
-            onMouseEnter={hideCoordinates}
-          />
-
           {markers.map((marker) => (
             <Marker
               key={marker.id}
@@ -222,91 +233,76 @@ 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
-                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]}
-              onClose={() => setSelectedMarkerId(null)}
-              closeOnClick={false}
-            >
-              <div className="text-sm font-medium">{selectedMarker.name}</div>
-            </Popup>
-          )}
-
           {placingMarker && (
-            <Popup
+            <MapMarkerFormPopup
               longitude={placingMarker.lng}
               latitude={placingMarker.lat}
-              anchor="bottom"
-              onClose={() => setPlacingMarker(null)}
-              closeOnClick={false}
-            >
-              <div onMouseEnter={hideCoordinates} 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"
-                />
+              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
 
-                <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>
+                setPlacingMarker(null)
+                setEditingMarkerId(null)
+                setHasUnsavedMarkerChanges(false)
+              }}
+            />
+          )}
 
-                <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 && (
+            <ViewMapMarkerPopup
+              marker={selectedMarker}
+              onClose={() => setSelectedMarkerId(null)}
+              onEdit={() => setEditingMarkerId(selectedMarker.id)}
+            />
+          )}
 
-                  <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>
+          {selectedMarker && editingMarkerId === selectedMarker.id && (
+            <MapMarkerFormPopup
+              longitude={selectedMarker.longitude}
+              latitude={selectedMarker.latitude}
+              initialMarker={selectedMarker}
+              onDirtyChange={setHasUnsavedMarkerChanges}
+              onSave={async ({ id, name, notes, color }) => {
+                if (!id) return
+
+                await updateMarker(id, {
+                  name,
+                  notes: notes || null,
+                  color,
+                })
+
+                setEditingMarkerId(null)
+                setHasUnsavedMarkerChanges(false)
+              }}
+              onCancel={() => setEditingMarkerId(null)}
+            />
           )}
         </Map>
       </div>

admin/inertia/components/maps/MapMarkerFormPopup.tsx

@@ -0,0 +1,160 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, 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
+  }) => Promise<void> | void
+  onCancel: () => void
+  onDirtyChange?: (dirty: boolean) => void
+}
+
+export default function MapMarkerFormPopup({
+                                             longitude,
+                                             latitude,
+                                             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 [isSaving, setIsSaving] = useState(false)
+
+  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])
+
+  const isDirty =
+    name !== (initialMarker?.name ?? '') ||
+    notes !== (initialMarker?.notes ?? '') ||
+    color !== (initialMarker?.color ?? 'orange')
+
+  useEffect(() => {
+    onDirtyChange?.(isDirty)
+  }, [isDirty, onDirtyChange])
+
+  const handleSave = async () => {
+    if (!name.trim() || isSaving) return
+
+    try {
+      setIsSaving(true)
+
+      await onSave({
+        id: initialMarker?.id,
+        name: name.trim(),
+        notes: notes.trim(),
+        color,
+      })
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  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
+          ref={textareaRef}
+          placeholder="Add notes (optional)"
+          value={notes}
+          rows={2}
+          maxLength={MAX_MARKER_NOTES_LENGTH}
+          onChange={(e) => {
+            setNotes(e.target.value)
+            requestAnimationFrame(resizeTextarea)
+          }}
+          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">
+          {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}
+            disabled={isSaving}
+            className="text-xs text-gray-500 hover:text-gray-700 px-2 py-1 rounded transition-colors disabled:opacity-40"
+          >
+            Cancel
+          </button>
+
+          <button
+            type="button"
+            onClick={handleSave}
+            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"
+          >
+            {isSaving ? 'Saving...' : 'Save'}
+          </button>
+        </div>
+      </div>
+    </Popup>
+  )
+}

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,114 @@ interface MarkerPanelProps {
   selectedMarkerId: number | null
 }
 
+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 getColorSortValue = (color: string) => {
+  const hex = normalizeColorHex(color).replace('#', '')
+
+  // 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
+  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
+  const lightness = (max + min) / 2
+
+  // Grayscale colors sort separately before hue colors, by lightness
+  if (delta === 0) {
+    return { bucket: 0, hue: 0, lightness }
+  }
+
+  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 {
+    bucket: 1,
+    hue: Math.round(hue * 60 + 360) % 360,
+    lightness,
+  }
+}
+
 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 sortDirectionLabel =
+    sortField === 'name'
+      ? sortDirection === 'asc'
+        ? 'A → Z'
+        : 'Z → A'
+      : sortDirection === 'asc'
+        ? 'Hue ↑'
+        : 'Hue ↓'
+
+  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 result =
+          sortField === 'name'
+            ? a.name.localeCompare(b.name, undefined, { sensitivity: 'base' })
+            : (() => {
+          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
+      })
+  }, [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 +128,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 hue</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"
+          >
+            {sortDirectionLabel}
+          </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 +205,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: normalizeColorHex(marker.color),
+                  }}
                 />
+
                 <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} />

admin/inertia/components/maps/ScaleUnitToggle.tsx

@@ -19,8 +19,10 @@ export default function ScaleUnitToggle({
       <div className="inline-flex overflow-hidden rounded text-[11px] font-semibold leading-none shadow-[0_0_0_2px_rgba(0,0,0,0.1)]">
         <button
           type="button"
-          onClick={() => onChange('metric')}
-          className="border-0 px-2 py-1"
+          onClick={() => {
+            if (scaleUnit !== 'metric') onChange('metric')
+          }}
+          className="cursor-pointer border-0 px-2 py-1"
           style={{
             background: scaleUnit === 'metric' ? '#424420' : 'white',
             color: scaleUnit === 'metric' ? 'white' : '#666',
@@ -31,8 +33,10 @@ export default function ScaleUnitToggle({
 
         <button
           type="button"
-          onClick={() => onChange('imperial')}
-          className="border-0 px-2 py-1"
+          onClick={() => {
+            if (scaleUnit !== 'imperial') onChange('imperial')
+          }}
+          className="cursor-pointer border-0 px-2 py-1"
           style={{
             background: scaleUnit === 'imperial' ? '#424420' : 'white',
             color: scaleUnit === 'imperial' ? 'white' : '#666',

admin/inertia/components/maps/ViewMapMarkerPopup.tsx

@@ -0,0 +1,66 @@
+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 (
+      <div className="max-w-[260px]">
+          <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 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={{
+                              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>
+          )
+          }

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,51 @@ body {
 [data-theme="dark"] .maplibregl-popup-close-button:hover {
   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);
+}

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)

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
     })()
   }

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": [

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
+}