Enhance map components and improve build processes

- Updated Makefile to include `--build` flag for `docker-compose.dev.yml` and `--no-cache` for `docker-compose.prod.yml` to ensure fresh builds.
- Added new CSS styles for Leaflet tooltips and popups to utilize theme colors, enhancing visual consistency.
- Enhanced MapView component with new props for markers and current zoom level, improving marker management and zoom functionality.
- Introduced new icons for copy and info actions to improve user interface clarity.
- Updated MapBookmarks and MapControls components to support new features and improve user experience with bookmarks and zoom controls.
- Refactored MapSearch to display coordinates and improve marker search functionality.

frontend-nuxt/components/MapView.vue

@@ -100,12 +100,15 @@
       :maps="maps"
       :quest-givers="questGivers"
       :players="players"
+      :markers="allMarkers"
+      :current-zoom="currentZoom"
       :current-map-id="mapLogic.state.mapid.value"
       :current-coords="mapLogic.state.displayCoords.value"
       :selected-marker-for-bookmark="selectedMarkerForBookmark"
       @zoom-in="mapLogic.zoomIn(leafletMap)"
       @zoom-out="mapLogic.zoomOutControl(leafletMap)"
       @reset-view="mapLogic.resetView(leafletMap)"
+      @set-zoom="onSetZoom"
       @jump-to-marker="mapLogic.state.selectedMarkerId.value = $event"
     />
     <MapContextMenu
@@ -147,7 +150,7 @@ import { useMapNavigate } from '~/composables/useMapNavigate'
 import { useFullscreen } from '~/composables/useFullscreen'
 import { startMapUpdates, type UseMapUpdatesReturn, type SseConnectionState } from '~/composables/useMapUpdates'
 import { createMapLayers, type MapLayersManager } from '~/composables/useMapLayers'
-import type { MapInfo, ConfigResponse, MeResponse } from '~/types/api'
+import type { MapInfo, ConfigResponse, MeResponse, Marker as ApiMarker } from '~/types/api'
 import type L from 'leaflet'
 
 const props = withDefaults(
@@ -252,6 +255,10 @@ const maps = ref<MapInfo[]>([])
 const mapsLoaded = ref(false)
 const questGivers = ref<Array<{ id: number; name: string }>>([])
 const players = ref<Array<{ id: number; name: string }>>([])
+/** All markers from API for search suggestions (updated when markers load or on merge). */
+const allMarkers = ref<ApiMarker[]>([])
+/** Current map zoom level (1–6) for zoom slider. Updated on zoomend. */
+const currentZoom = ref(HnHDefaultZoom)
 /** Single source of truth: layout updates me, we derive auths for context menu. */
 const me = useState<MeResponse | null>('me', () => null)
 const auths = computed(() => me.value?.auths ?? [])
@@ -347,6 +354,10 @@ function reloadPage() {
   if (import.meta.client) window.location.reload()
 }
 
+function onSetZoom(z: number) {
+  if (leafletMap) leafletMap.setZoom(z)
+}
+
 function onKeydown(e: KeyboardEvent) {
   const target = e.target as HTMLElement
   const inInput = /^(INPUT|TEXTAREA|SELECT)$/.test(target?.tagName ?? '')
@@ -462,6 +473,16 @@ onMounted(async () => {
     getTrackingCharacterId: () => mapLogic.state.trackingCharacterId.value,
     setTrackingCharacterId: (id: number) => { mapLogic.state.trackingCharacterId.value = id },
     onMarkerContextMenu: mapLogic.openMarkerContextMenu,
+    onAddMarkerToBookmark: (markerId, getMarkerById) => {
+      const m = getMarkerById(markerId)
+      if (!m) return
+      openBookmarkModal(m.name, 'Add bookmark', {
+        kind: 'add',
+        mapId: m.map,
+        x: Math.floor(m.position.x / TileSize),
+        y: Math.floor(m.position.y / TileSize),
+      })
+    },
     resolveIconUrl: (path) => resolvePath(path),
     fallbackIconUrl: FALLBACK_MARKER_ICON,
   })
@@ -479,7 +500,9 @@ onMounted(async () => {
       layersManager!.changeMap(mapTo)
       api.getMarkers().then((body) => {
         if (!mounted) return
-        layersManager!.updateMarkers(Array.isArray(body) ? body : [])
+        const list = Array.isArray(body) ? body : []
+        allMarkers.value = list
+        layersManager!.updateMarkers(list)
         questGivers.value = layersManager!.getQuestGivers()
       })
       leafletMap!.setView(latLng, leafletMap!.getZoom())
@@ -530,7 +553,9 @@ onMounted(async () => {
   // Markers load asynchronously after map is visible.
   api.getMarkers().then((body) => {
     if (!mounted) return
-    layersManager!.updateMarkers(Array.isArray(body) ? body : [])
+    const list = Array.isArray(body) ? body : []
+    allMarkers.value = list
+    layersManager!.updateMarkers(list)
     questGivers.value = layersManager!.getQuestGivers()
     updateSelectedMarkerForBookmark()
   })
@@ -650,6 +675,10 @@ onMounted(async () => {
 
   leafletMap.on('moveend', () => mapLogic.updateDisplayCoords(leafletMap))
   mapLogic.updateDisplayCoords(leafletMap)
+  currentZoom.value = leafletMap.getZoom()
+  leafletMap.on('zoomend', () => {
+    if (leafletMap) currentZoom.value = leafletMap.getZoom()
+  })
   leafletMap.on('drag', () => {
     mapLogic.state.trackingCharacterId.value = -1
   })