Enhance frontend components and introduce new features

- Added a custom light theme in app.css to match the dark theme's palette.
- Introduced AdminBreadcrumbs component for improved navigation in admin pages.
- Implemented Skeleton component for loading states in various views.
- Added ToastContainer for displaying notifications and alerts.
- Enhanced MapView with loading indicators and improved marker handling.
- Updated MapCoordsDisplay to allow copying of shareable links.
- Refactored MapControls and MapContextMenu for better usability.
- Improved user experience in profile and admin pages with loading states and search functionality.

frontend-nuxt/lib/Marker.ts

@@ -41,7 +41,14 @@ function detectType(name: string): string {
   return name.substring('gfx/terobjs/mm/'.length)
 }
 
-export function createMarker(data: MarkerData): MapMarker {
+export interface MarkerIconOptions {
+  /** Resolves relative icon path to absolute URL (e.g. with app base path). */
+  resolveIconUrl: (path: string) => string
+  /** Optional fallback URL when the icon image fails to load. */
+  fallbackIconUrl?: string
+}
+
+export function createMarker(data: MarkerData, iconOptions?: MarkerIconOptions): MapMarker {
   let leafletMarker: L.Marker | null = null
   let onClick: ((e: L.LeafletMouseEvent) => void) | null = null
   let onContext: ((e: L.LeafletMouseEvent) => void) | null = null
@@ -70,17 +77,24 @@ export function createMarker(data: MarkerData): MapMarker {
 
     add(mapview: MapViewRef): void {
       if (!marker.hidden) {
+        const resolve = iconOptions?.resolveIconUrl ?? ((path: string) => path)
+        const fallback = iconOptions?.fallbackIconUrl
         let icon: L.Icon
         if (marker.image === 'gfx/terobjs/mm/custom') {
           icon = new ImageIcon({
-            iconUrl: 'gfx/terobjs/mm/custom.png',
+            iconUrl: resolve('gfx/terobjs/mm/custom.png'),
             iconSize: [21, 23],
             iconAnchor: [11, 21],
             popupAnchor: [1, 3],
             tooltipAnchor: [1, 3],
+            fallbackIconUrl: fallback,
           })
         } else {
-          icon = new ImageIcon({ iconUrl: `${marker.image}.png`, iconSize: [32, 32] })
+          icon = new ImageIcon({
+            iconUrl: resolve(`${marker.image}.png`),
+            iconSize: [32, 32],
+            fallbackIconUrl: fallback,
+          })
         }
 
         const position = mapview.map.unproject([marker.position.x, marker.position.y], HnHMaxZoom)