RomanNum3ral
/
project-nomad
mirror of https://github.com/Crosstalk-Solutions/project-nomad.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Set up map markers to now be able to toggle the visiblity, provide a custom color, and a custom icon.

This commit is contained in:
Kenneth Brewer 2026-05-01 22:13:06 -04:00
parent 98aa569e8e
commit 1af0faf279
7 changed files with 590 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
admin/app/controllers/maps_controller.ts
View File

@ -140,33 +140,49 @@ export default class MapsController {
longitude: vine.number().min(-180).max(180),
latitude: vine.number().min(-90).max(90),
color: vine.string().trim().maxLength(20).optional(),
custom_color: vine.string().trim().maxLength(7).nullable().optional(),
icon: vine.string().trim().maxLength(50).nullable().optional(),
icon_color: vine.string().trim().maxLength(7).nullable().optional(),
visible: vine.boolean().optional(),
notes: vine.string().trim().nullable().optional(),
marker_type: vine.string().trim().maxLength(20).optional(),
})
)
)
const marker = await MapMarker.create({
name: payload.name,
longitude: payload.longitude,
latitude: payload.latitude,
color: payload.color ?? 'orange',
custom_color: payload.custom_color ?? null,
icon: payload.icon ?? null,
icon_color: payload.icon_color ?? null,
visible: payload.visible ?? true,
notes: payload.notes ?? null,
marker_type: payload.marker_type ?? 'pin',
})
return marker
}
async updateMarker({ request, response }: HttpContext) {
const { id } = request.params()
const marker = await MapMarker.find(id)
if (!marker) {
return response.status(404).send({ message: 'Marker not found' })
}
const payload = await request.validateUsing(
vine.compile(
vine.object({
name: vine.string().trim().minLength(1).maxLength(255).optional(),
color: vine.string().trim().maxLength(20).optional(),
custom_color: vine.string().trim().maxLength(7).nullable().optional(),
icon: vine.string().trim().maxLength(50).nullable().optional(),
icon_color: vine.string().trim().maxLength(7).nullable().optional(),
visible: vine.boolean().optional(),
longitude: vine.number().min(-180).max(180).optional(),
latitude: vine.number().min(-90).max(90).optional(),
notes: vine.string().trim().nullable().optional(),
@ -174,12 +190,18 @@ export default class MapsController {
})
)
)
if (payload.name !== undefined) marker.name = payload.name
if (payload.color !== undefined) marker.color = payload.color
if (payload.custom_color !== undefined) marker.custom_color = payload.custom_color
if (payload.icon !== undefined) marker.icon = payload.icon
if (payload.icon_color !== undefined) marker.icon_color = payload.icon_color
if (payload.visible !== undefined) marker.visible = payload.visible
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
}

23
admin/database/migrations/1771200000002_add_visibility_and_icon_fields_to_map_markers.ts Normal file
View File

@ -0,0 +1,23 @@
import { BaseSchema } from '@adonisjs/lucid/schema'
export default class AddVisibilityAndIconFieldsToMapMarkers extends BaseSchema {
protected tableName = 'map_markers'
async up() {
this.schema.alterTable(this.tableName, (table) => {
table.string('custom_color', 7).nullable()
table.string('icon', 50).nullable()
table.string('icon_color', 7).nullable()
table.boolean('visible').notNullable().defaultTo(true)
})
}
async down() {
this.schema.alterTable(this.tableName, (table) => {
table.dropColumn('custom_color')
table.dropColumn('icon')
table.dropColumn('icon_color')
table.dropColumn('visible')
})
}
}

119
admin/inertia/components/maps/IconSelectorPopover.tsx Normal file
View File

@ -0,0 +1,119 @@
import { useMemo, useState } from 'react'
import * as TablerIcons from '@tabler/icons-react'
import type { IconProps } from '@tabler/icons-react'
import type { ComponentType } from 'react'
const PAGE_SIZE = 48
type IconSelectorPopoverProps = {
selectedIcon?: string | null
onSelect: (iconName: string) => void
onClose: () => void
}
const iconEntries = Object.entries(TablerIcons)
.filter(([name, value]) => {
return (
name.startsWith('Icon') &&
name !== 'Icon' &&
value !== null &&
(typeof value === 'function' || typeof value === 'object')
)
})
.sort(([a], [b]) => a.localeCompare(b)) as Array<[string, ComponentType<IconProps>]>
export default function IconSelectorPopover({
selectedIcon,
onSelect,
onClose,
}: IconSelectorPopoverProps) {
const [query, setQuery] = useState('')
const [page, setPage] = useState(0)
const filteredIcons = useMemo(() => {
const normalizedQuery = query.trim().toLowerCase()
return iconEntries.filter(([name]) => name.toLowerCase().includes(normalizedQuery))
}, [query])
const pageCount = Math.max(1, Math.ceil(filteredIcons.length / PAGE_SIZE))
const pagedIcons = filteredIcons.slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE)
return (
<div
className="absolute left-0 top-7 z-50 w-72 rounded-md border border-border-subtle bg-surface-primary p-2 shadow-lg"
onClick={(e) => e.stopPropagation()}
onMouseDown={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
>
<input
autoFocus
type="search"
placeholder="Search icons..."
value={query}
onChange={(e) => {
setQuery(e.target.value)
setPage(0)
}}
className="mb-2 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="max-h-56 overflow-y-auto themed-scrollbar">
<div className="grid grid-cols-6 gap-1">
{pagedIcons.map(([name, Icon]) => (
<button
key={name}
type="button"
title={name}
aria-label={name}
onClick={() => {
onSelect(name)
onClose()
}}
className={`flex h-8 w-8 items-center justify-center rounded transition-colors hover:bg-surface-secondary ${
selectedIcon === name ? 'bg-desert-green text-white' : 'text-text-secondary'
}`}
>
<Icon size={18} />
</button>
))}
</div>
</div>
<div className="mt-2 flex items-center justify-between gap-2">
<button
type="button"
onClick={() => setPage((prev) => Math.max(0, prev - 1))}
disabled={page === 0}
className="rounded bg-[#424420] px-2 py-1 text-xs text-white hover:bg-[#525530] disabled:opacity-40"
>
Prev
</button>
<span className="text-xs text-text-muted">
{filteredIcons.length === 0 ? 'No icons' : `${page + 1} / ${pageCount}`}
</span>
<button
type="button"
onClick={() => setPage((prev) => Math.min(pageCount - 1, prev + 1))}
disabled={page >= pageCount - 1}
className="rounded bg-[#424420] px-2 py-1 text-xs text-white hover:bg-[#525530] disabled:opacity-40"
>
Next
</button>
</div>
<div className="mt-2 flex justify-end">
<button
type="button"
onClick={onClose}
className="rounded bg-[#424420] px-2 py-1 text-xs text-white hover:bg-[#525530]"
>
Close
</button>
</div>
</div>
)
}

81
admin/inertia/components/maps/MapComponent.tsx
View File

@ -12,7 +12,7 @@ import 'maplibre-gl/dist/maplibre-gl.css'
import { Protocol } from 'pmtiles'
import { useCallback, useEffect, useRef, useState } from 'react'
import { useMapMarkers, PIN_COLORS } from '~/hooks/useMapMarkers'
import { useMapMarkers } from '~/hooks/useMapMarkers'
import MarkerPin from './MarkerPin'
import MarkerPanel from './MarkerPanel'
@ -198,6 +198,17 @@ export default function MapComponent({
}
}, [mapCommand, confirmDiscardMarkerChanges])
useEffect(() => {
if (!selectedMarkerId) return
const marker = markers.find((m) => m.id === selectedMarkerId)
if (!marker || marker.visible === false) {
setSelectedMarkerId(null)
setEditingMarkerId(null)
}
}, [markers, selectedMarkerId])
const handleScaleUnitChange = useCallback((unit: ScaleUnit) => {
setScaleUnit(unit)
localStorage.setItem('nomad:map-scale-unit', unit)
@ -355,38 +366,53 @@ export default function MapComponent({
onMouseEnter={hideCoordinates}
/>
{markers.map((marker) => (
<Marker
key={marker.id}
longitude={marker.longitude}
latitude={marker.latitude}
anchor="bottom"
onClick={(e) => {
e.originalEvent.stopPropagation()
{markers
.filter((marker) => marker.visible)
.map((marker) => (
<Marker
key={marker.id}
longitude={marker.longitude}
latitude={marker.latitude}
anchor="bottom"
onClick={(e) => {
e.originalEvent.stopPropagation()
if (!confirmDiscardMarkerChanges()) return
if (!confirmDiscardMarkerChanges()) return
setSelectedMarkerId(marker.id === selectedMarkerId ? null : marker.id)
setPlacingMarker(null)
setEditingMarkerId(null)
setHasUnsavedMarkerChanges(false)
setTargetIndicator(null)
}}
>
<MarkerPin
color={PIN_COLORS.find((color) => color.id === marker.color)?.hex}
active={marker.id === selectedMarkerId}
/>
</Marker>
))}
setSelectedMarkerId(marker.id === selectedMarkerId ? null : marker.id)
setPlacingMarker(null)
setEditingMarkerId(null)
setHasUnsavedMarkerChanges(false)
setTargetIndicator(null)
}}
>
<MarkerPin
color={marker.color}
customColor={marker.customColor}
icon={marker.icon}
iconColor={marker.iconColor}
visible={marker.visible}
active={marker.id === selectedMarkerId}
/>
</Marker>
))}
{placingMarker && (
<MapMarkerFormPopup
longitude={placingMarker.lng}
latitude={placingMarker.lat}
onDirtyChange={setHasUnsavedMarkerChanges}
onSave={async ({ name, notes, color }) => {
await addMarker(name, placingMarker.lng, placingMarker.lat, color, notes || undefined)
onSave={async ({ name, notes, color, customColor, icon }) => {
await addMarker({
name,
longitude: placingMarker.lng,
latitude: placingMarker.lat,
color,
customColor,
icon,
notes: notes || null,
})
setPlacingMarker(null)
setHasUnsavedMarkerChanges(false)
setTargetIndicator(null)
@ -418,13 +444,15 @@ export default function MapComponent({
initialMarker={selectedMarker}
onDirtyChange={setHasUnsavedMarkerChanges}
onMouseEnter={hideCoordinates}
onSave={async ({ id, name, notes, color }) => {
onSave={async ({ id, name, notes, color, customColor, icon }) => {
if (!id) return
await updateMarker(id, {
name,
notes: notes || null,
color,
customColor,
icon,
})
setEditingMarkerId(null)
@ -448,6 +476,7 @@ export default function MapComponent({
onFlyTo={handleFlyTo}
onSelect={setSelectedMarkerId}
selectedMarkerId={selectedMarkerId}
onToggleVisibility={(id, visible) => updateMarker(id, { visible })}
/>
</div>
</MapProvider>

372
admin/inertia/components/maps/MapMarkerFormPopup.tsx
View File

@ -1,177 +1,251 @@
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
import { Popup } from 'react-map-gl/maplibre'
import {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react'
import {Popup} from 'react-map-gl/maplibre'
import {IconPalette} from '@tabler/icons-react'
import { PIN_COLORS } from '~/hooks/useMapMarkers'
import type { MapMarker, PinColorId } from '~/hooks/useMapMarkers'
import {IconIcons} from '@tabler/icons-react'
import IconSelectorPopover from './IconSelectorPopover'
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'
'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
onMouseEnter?: () => void
longitude: number
latitude: number
initialMarker?: MapMarker
onSave: (values: {
id?: number
name: string
notes: string
color: PinColorId
customColor: string | null
icon: string | null
}) => Promise<void> | void
onCancel: () => void
onDirtyChange?: (dirty: boolean) => void
onMouseEnter?: () => void
}
export default function MapMarkerFormPopup({
longitude,
latitude,
initialMarker,
onSave,
onCancel,
onDirtyChange,
onMouseEnter,
longitude,
latitude,
initialMarker,
onSave,
onCancel,
onDirtyChange,
onMouseEnter,
}: 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 [name, setName] = useState(initialMarker?.name ?? '')
const [notes, setNotes] = useState(initialMarker?.notes ?? '')
const [color, setColor] = useState<PinColorId>(initialMarker?.color ?? 'orange')
const [customColor, setCustomColor] = useState<string | null>(initialMarker?.customColor ?? null)
const [isSaving, setIsSaving] = useState(false)
const textareaRef = useRef<HTMLTextAreaElement | null>(null)
const textareaRef = useRef<HTMLTextAreaElement | null>(null)
const nameInputRef = useRef<HTMLInputElement | null>(null)
const colorInputRef = useRef<HTMLInputElement | null>(null)
const resizeTextarea = useCallback(() => {
const textarea = textareaRef.current
if (!textarea) return
const resizeTextarea = useCallback(() => {
const textarea = textareaRef.current
if (!textarea) return
textarea.style.height = 'auto'
textarea.style.height = `${textarea.scrollHeight}px`
}, [])
textarea.style.height = 'auto'
textarea.style.height = `${textarea.scrollHeight}px`
}, [])
useLayoutEffect(() => {
resizeTextarea()
}, [resizeTextarea])
const [icon, setIcon] = useState<string | null>(initialMarker?.icon ?? null)
const [showIconSelector, setShowIconSelector] = useState(false)
const nameInputRef = useRef<HTMLInputElement | null>(null)
useLayoutEffect(() => {
resizeTextarea()
}, [resizeTextarea])
useLayoutEffect(() => {
nameInputRef.current?.focus()
nameInputRef.current?.select()
}, [])
useLayoutEffect(() => {
nameInputRef.current?.focus()
nameInputRef.current?.select()
}, [])
const isDirty =
name !== (initialMarker?.name ?? '') ||
notes !== (initialMarker?.notes ?? '') ||
color !== (initialMarker?.color ?? 'orange')
const isDirty =
name !== (initialMarker?.name ?? '') ||
notes !== (initialMarker?.notes ?? '') ||
color !== (initialMarker?.color ?? 'orange') ||
customColor !== (initialMarker?.customColor ?? null) ||
icon !== (initialMarker?.icon ?? null)
useEffect(() => {
onDirtyChange?.(isDirty)
}, [isDirty, onDirtyChange])
useEffect(() => {
onDirtyChange?.(isDirty)
}, [isDirty, onDirtyChange])
const handleSave = async () => {
if (!name.trim() || isSaving) return
const handleSave = async () => {
if (!name.trim() || isSaving) return
try {
setIsSaving(true)
try {
setIsSaving(true)
await onSave({
id: initialMarker?.id,
name: name.trim(),
notes: notes.trim(),
color,
})
} finally {
setIsSaving(false)
await onSave({
id: initialMarker?.id,
name: name.trim(),
notes: notes.trim(),
color,
customColor,
icon,
})
} finally {
setIsSaving(false)
}
}
}
return (
<Popup
longitude={longitude}
latitude={latitude}
anchor="bottom"
offset={[0, -36] as [number, number]}
onClose={onCancel}
closeOnClick={false}
closeButton={false}
>
<div
className="p-1"
onClick={(e) => e.stopPropagation()}
onMouseDown={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
onMouseEnter={onMouseEnter}
>
<input
ref={nameInputRef}
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',
}}
return (
<Popup
longitude={longitude}
latitude={latitude}
anchor="bottom"
offset={[0, -36] as [number, number]}
onClose={onCancel}
closeOnClick={false}
closeButton={false}
>
<div
className="p-1"
onClick={(e) => e.stopPropagation()}
onMouseDown={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
onMouseEnter={onMouseEnter}
>
<div className="w-4 h-4 rounded-full" style={{backgroundColor: pinColor.hex}}/>
</button>
))}
</div>
<input
ref={nameInputRef}
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}
/>
<div className="mt-1.5 flex gap-1.5 justify-end">
<button
type="button"
onClick={onCancel}
disabled={isSaving}
className="text-xs bg-[#424420] text-white rounded px-2.5 py-1 hover:bg-[#525530] disabled:opacity-40 transition-colors"
>
Cancel
</button>
<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}`}
/>
<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>
)
<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)
setCustomColor(null)
}}
title={pinColor.label}
className="rounded-full p-0.5 transition-transform"
style={{
outline:
!customColor && 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>
))}
<button
type="button"
title="Choose custom marker color"
aria-label="Choose custom marker color"
onClick={() => colorInputRef.current?.click()}
className="rounded-full p-0.5 transition-transform"
style={{
outline: customColor ? `2px solid ${customColor}` : '2px solid transparent',
outlineOffset: '1px',
}}
>
<span
className="flex h-5 w-5 items-center justify-center rounded-full border border-border-default"
style={{backgroundColor: customColor ?? '#424420'}}
>
<IconPalette size={16} fill="currentColor" stroke={1.5} className="text-white"/>
</span>
</button>
<div className="relative">
<button
type="button"
title="Choose custom marker icon"
aria-label="Choose custom marker icon"
onClick={() => setShowIconSelector((prev) => !prev)}
className="rounded-full p-0.5 transition-transform"
style={{
outline: icon ? '2px solid #424420' : '2px solid transparent',
outlineOffset: '1px',
}}
>
<span
className="flex h-5 w-5 items-center justify-center rounded-full border border-border-default bg-[#424420] text-white">
<IconIcons size={16} fill="currentColor" stroke={1.5}/>
</span>
</button>
{showIconSelector && (
<IconSelectorPopover
selectedIcon={icon}
onSelect={setIcon}
onClose={() => setShowIconSelector(false)}
/>
)}
</div>
<input
ref={colorInputRef}
type="color"
value={customColor ?? '#a84a12'}
onChange={(e) => setCustomColor(e.target.value)}
className="sr-only"
aria-label="Choose custom marker color"
/>
</div>
<div className="mt-1.5 flex gap-1.5 justify-end">
<button
type="button"
onClick={onCancel}
disabled={isSaving}
className="text-xs bg-[#424420] text-white rounded px-2.5 py-1 hover:bg-[#525530] disabled:opacity-40 transition-colors"
>
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>
)
}

164
admin/inertia/components/maps/MarkerPanel.tsx
View File

@ -1,6 +1,15 @@
import { useMemo, useState } from 'react'
import { IconMapPinFilled, IconTrash, IconMapPin, IconX } from '@tabler/icons-react'
import {
IconEye,
IconEyeOff,
IconMapPin,
IconMapPinFilled,
IconTrash,
IconX,
} from '@tabler/icons-react'
import * as TablerIcons from '@tabler/icons-react'
import type { IconProps } from '@tabler/icons-react'
import type { ComponentType } from 'react'
import { PIN_COLORS } from '~/hooks/useMapMarkers'
import type { MapMarker } from '~/hooks/useMapMarkers'
@ -9,21 +18,23 @@ interface MarkerPanelProps {
onDelete: (id: number) => void
onFlyTo: (longitude: number, latitude: number) => void
onSelect: (id: number | null) => void
onToggleVisibility: (id: number, visible: boolean) => void
selectedMarkerId: number | null
}
type SortField = 'name' | 'color'
type SortField = 'name' | 'color' | 'visibility' | 'icon'
type SortDirection = 'asc' | 'desc'
const normalizeColorHex = (color: string) => {
const normalizeColorHex = (color: string, customColor?: string | null) => {
if (customColor) return customColor
const preset = PIN_COLORS.find((pinColor) => pinColor.id === color)
return preset?.hex ?? color
}
const getColorSortValue = (color: string) => {
const hex = normalizeColorHex(color).replace('#', '')
const getColorSortValue = (color: string, customColor?: string | null) => {
const hex = normalizeColorHex(color, customColor).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 }
}
@ -37,7 +48,6 @@ const getColorSortValue = (color: string) => {
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 }
}
@ -59,11 +69,20 @@ const getColorSortValue = (color: string) => {
}
}
const resolveMarkerIcon = (icon?: string | null): ComponentType<IconProps> => {
if (!icon) return IconMapPinFilled
const Icon = (TablerIcons as Record<string, unknown>)[icon]
return Icon ? (Icon as ComponentType<IconProps>) : IconMapPinFilled
}
export default function MarkerPanel({
markers,
onDelete,
onFlyTo,
onSelect,
onToggleVisibility,
selectedMarkerId,
}: MarkerPanelProps) {
const [open, setOpen] = useState(false)
@ -76,9 +95,17 @@ export default function MarkerPanel({
? sortDirection === 'asc'
? 'A → Z'
: 'Z → A'
: sortDirection === 'asc'
? 'Hue ↑'
: 'Hue ↓'
: sortField === 'color'
? sortDirection === 'asc'
? 'Hue ↑'
: 'Hue ↓'
: sortField === 'icon'
? sortDirection === 'asc'
? 'A → Z'
: 'Z → A'
: sortDirection === 'asc'
? 'Hidden first'
: 'Visible first'
const visibleMarkers = useMemo(() => {
const query = searchQuery.trim().toLowerCase()
@ -92,16 +119,24 @@ export default function MarkerPanel({
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
)
})()
: sortField === 'visibility'
? Number(a.visible) - Number(b.visible)
: sortField === 'icon'
? (a.icon ? 1 : 0) - (b.icon ? 1 : 0) ||
(a.icon ?? '').localeCompare(b.icon ?? '')
: (() => {
const aColor = getColorSortValue(a.color, a.customColor)
const bColor = getColorSortValue(b.color, b.customColor)
return (
aColor.bucket - bColor.bucket ||
aColor.hue - bColor.hue ||
aColor.lightness - bColor.lightness
)
})()
return sortDirection === 'asc' ? result : -result
})
@ -169,6 +204,8 @@ export default function MarkerPanel({
>
<option value="name">Sort by name</option>
<option value="color">Sort by hue</option>
<option value="icon">Sort by icon</option>
<option value="visibility">Sort by visibility</option>
</select>
<button
@ -193,45 +230,60 @@ export default function MarkerPanel({
</div>
) : (
<ul>
{visibleMarkers.map((marker) => (
<li
key={marker.id}
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'
}`}
>
<IconMapPinFilled
size={16}
className="shrink-0"
style={{
color: normalizeColorHex(marker.color),
}}
/>
{visibleMarkers.map((marker) => {
const MarkerIcon = resolveMarkerIcon(marker.icon)
<button
type="button"
onClick={() => {
onSelect(marker.id)
onFlyTo(marker.longitude, marker.latitude)
}}
className="min-w-0 flex-1 text-left"
title={marker.name}
return (
<li
key={marker.id}
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'
} ${marker.visible ? '' : 'opacity-60'}`}
>
<p className="truncate text-sm font-medium text-text-primary">{marker.name}</p>
</button>
<MarkerIcon
size={16}
className="shrink-0"
style={{
color: normalizeColorHex(marker.color, marker.customColor),
}}
/>
<button
type="button"
onClick={() => onDelete(marker.id)}
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} />
</button>
</li>
))}
<button
type="button"
onClick={() => {
onSelect(marker.id)
onFlyTo(marker.longitude, marker.latitude)
}}
className="min-w-0 flex-1 text-left"
title={marker.name}
>
<p className="truncate text-sm font-medium text-text-primary">{marker.name}</p>
</button>
<button
type="button"
onClick={(event) => {
event.stopPropagation()
onToggleVisibility(marker.id, !marker.visible)
}}
className="shrink-0 rounded p-1 text-text-muted transition-colors hover:bg-surface-secondary hover:text-text-primary"
title={marker.visible ? 'Hide pin' : 'Show pin'}
aria-label={marker.visible ? 'Hide pin' : 'Show pin'}
>
{marker.visible ? <IconEye size={14}/> : <IconEyeOff size={14}/>}
</button>
<button
type="button"
onClick={() => onDelete(marker.id)}
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}/>
</button>
</li>
)
})}
</ul>
)}
</div>

45
admin/inertia/components/maps/MarkerPin.tsx
View File

@ -1,4 +1,5 @@
import { IconCircleFilled } from '@tabler/icons-react'
import * as TablerIcons from '@tabler/icons-react'
import type { IconProps } from '@tabler/icons-react'
import type { ComponentType } from 'react'
@ -8,28 +9,62 @@ import type { PinColorId } from '~/hooks/useMapMarkers'
interface MarkerPinProps {
color?: PinColorId | string | null
customColor?: string | null
icon?: ComponentType<IconProps>
icon?: string | null
iconColor?: string | null
visible?: boolean
active?: boolean
}
const resolvePinColor = (color?: PinColorId | string | null, customColor?: string | null) => {
if (customColor) return customColor
if (!color) return '#a84a12'
const preset = PIN_COLORS.find((pinColor) => pinColor.id === color)
return preset?.hex ?? color
}
const getContrastingIconColor = (backgroundColor: string) => {
const hex = backgroundColor.replace('#', '')
if (!/^[0-9a-fA-F]{6}$/.test(hex)) {
return '#ffffff'
}
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 luminance =
0.2126 * r +
0.7152 * g +
0.0722 * b
return luminance > 0.55 ? '#111827' : '#ffffff'
}
const resolveIcon = (icon?: string | null): ComponentType<IconProps> => {
if (!icon) return IconCircleFilled
const Icon = (TablerIcons as Record<string, unknown>)[icon]
if (!Icon) return IconCircleFilled
return Icon as ComponentType<IconProps>
}
export default function MarkerPin({
color = 'orange',
customColor,
icon: Icon = IconCircleFilled,
iconColor = '#ffffff',
icon,
iconColor,
visible = true,
active = false,
}: MarkerPinProps) {
if (!visible) return null
const resolvedColor = resolvePinColor(color, customColor)
const resolvedIconColor = iconColor ?? getContrastingIconColor(resolvedColor)
const Icon = resolveIcon(icon)
const width = active ? 42 : 36
const height = active ? 52 : 46
@ -72,7 +107,7 @@ export default function MarkerPin({
height: iconSize,
}}
>
<Icon size={iconSize} color={iconColor ?? '#ffffff'} />
<Icon size={iconSize} color={resolvedIconColor} />
</div>
</div>
)