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/LeafletCustomTypes.ts

@@ -70,12 +70,29 @@ export const GridCoordLayer = L.GridLayer.extend({
   },
 }) as unknown as new (options?: GridCoordLayerOptions) => L.GridLayer
 
+export interface ImageIconOptions extends L.IconOptions {
+  /** When the main icon image fails to load, use this URL (e.g. data URL or default marker). */
+  fallbackIconUrl?: string
+}
+
 export const ImageIcon = L.Icon.extend({
   options: {
     iconSize: [32, 32],
     iconAnchor: [16, 16],
+  } as ImageIconOptions,
+
+  createIcon(oldIcon?: HTMLElement): HTMLElement {
+    const img = L.Icon.prototype.createIcon.call(this, oldIcon) as HTMLImageElement
+    const fallback = (this.options as ImageIconOptions).fallbackIconUrl
+    if (fallback && img && img.tagName === 'IMG') {
+      img.onerror = () => {
+        img.onerror = null
+        img.src = fallback
+      }
+    }
+    return img
   },
-}) as unknown as new (options?: L.IconOptions) => L.Icon
+}) as unknown as new (options?: ImageIconOptions) => L.Icon
 
 const latNormalization = (90.0 * TileSize) / 2500000.0
 const lngNormalization = (180.0 * TileSize) / 2500000.0