Implement error handling and visual enhancements in map components

- Introduced MapErrorBoundary component to handle map loading errors gracefully.
- Enhanced MapView with a reconnection status indicator for live updates.
- Added tile freshness animation to indicate updated tiles visually.
- Preloaded marker icon images to improve rendering performance.
- Updated various pages to utilize the new MapErrorBoundary for better user experience.

frontend-nuxt/components/MapView.vue

@@ -32,6 +32,17 @@
       :mapid="mapLogic.state.mapid.value"
       :display-coords="mapLogic.state.displayCoords.value"
     />
+    <div
+      v-if="sseConnectionState === 'error' && mapReady"
+      class="absolute bottom-4 left-1/2 z-[501] -translate-x-1/2 rounded-lg px-3 py-2 text-sm bg-warning/90 text-warning-content shadow"
+      role="status"
+      title="Live updates will resume when reconnected"
+    >
+      <span class="inline-flex items-center gap-2">
+        <span class="inline-block size-2 animate-pulse rounded-full bg-current" aria-hidden="true" />
+        Reconnecting…
+      </span>
+    </div>
     <div class="absolute top-2 right-2 z-[501] flex flex-col gap-1">
       <button
         type="button"
@@ -116,7 +127,7 @@ import { HnHDefaultZoom, HnHMaxZoom, HnHMinZoom, TileSize } from '~/lib/LeafletC
 import { initLeafletMap, type MapInitResult } from '~/composables/useMapInit'
 import { useMapNavigate } from '~/composables/useMapNavigate'
 import { useFullscreen } from '~/composables/useFullscreen'
-import { startMapUpdates, type UseMapUpdatesReturn } from '~/composables/useMapUpdates'
+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 L from 'leaflet'
@@ -140,6 +151,7 @@ const { resolvePath } = useAppPaths()
 const mapNavigate = useMapNavigate()
 const fullscreen = useFullscreen(mapContainerRef)
 const showShortcutsOverlay = ref(false)
+const sseConnectionState = ref<SseConnectionState>('connecting')
 const measureMode = ref(false)
 const measurePointA = ref<{ x: number; y: number } | null>(null)
 const measurePointB = ref<{ x: number; y: number } | null>(null)
@@ -330,6 +342,7 @@ onMounted(async () => {
     overlayLayer: mapInit.overlayLayer,
     map: leafletMap,
     getCurrentMapId: () => mapLogic.state.mapid.value,
+    connectionStateRef: sseConnectionState,
     onMerge: (mapTo: number, shift: { x: number; y: number }) => {
       const latLng = toLatLng(shift.x * 100, shift.y * 100)
       layersManager!.changeMap(mapTo)