Enhance map functionality with bookmark features and UI improvements

- Introduced a new MapBookmarkNameModal for adding and editing bookmarks.
- Updated MapView to manage selected markers for bookmarking and handle bookmark name submissions.
- Enhanced MapContextMenu with an option to add markers to bookmarks.
- Improved MapBookmarks component to support editing bookmark names and adding selected markers.
- Refactored MapControls and MapControlsContent to integrate selected marker functionality for bookmarks.
- Updated useMapBookmarks composable to include bookmark updating logic.
- Removed unused grid coordinates toggle from the UI for a cleaner interface.

frontend-nuxt/lib/LeafletCustomTypes.ts

@@ -5,51 +5,6 @@ export const HnHMaxZoom = 6
 export const HnHMinZoom = 1
 export const HnHDefaultZoom = 6
 
-export interface GridCoordLayerOptions extends L.GridLayerOptions {
-  visible?: boolean
-}
-
-/**
- * Grid layer that draws one coordinate label per Leaflet tile in the top-left corner.
- * Uses only coords.z (do not use map.getZoom()) so labels stay in sync with tiles.
- * SmartTileLayer has zoomReverse: true, so URL z = 6 - coords.z; backend maps z=6 → storageZ=0.
- * Game tile for this Leaflet tile: scaleFactor = 2^(HnHMaxZoom - coords.z),
- * topLeft = (coords.x * scaleFactor, coords.y * scaleFactor) — same (x,y) as backend tile.
- */
-export const GridCoordLayer = L.GridLayer.extend({
-  options: {
-    visible: true,
-  },
-  createTile(coords: { x: number; y: number; z: number }) {
-    if (!this.options.visible) {
-      const element = document.createElement('div')
-      element.style.width = TileSize + 'px'
-      element.style.height = TileSize + 'px'
-      element.classList.add('map-tile')
-      return element
-    }
-    const element = document.createElement('div')
-    element.style.width = TileSize + 'px'
-    element.style.height = TileSize + 'px'
-    element.style.position = 'relative'
-    element.classList.add('map-tile')
-
-    const scaleFactor = Math.pow(2, HnHMaxZoom - coords.z)
-    const topLeft = { x: coords.x * scaleFactor, y: coords.y * scaleFactor }
-
-    // One label per Leaflet tile at top-left (2px, 2px); same (x,y) as backend tile for this coords.
-    const textElement = document.createElement('div')
-    textElement.classList.add('map-tile-text')
-    textElement.textContent = `(${topLeft.x}, ${topLeft.y})`
-    textElement.style.position = 'absolute'
-    textElement.style.left = '2px'
-    textElement.style.top = '2px'
-    textElement.style.fontSize = Math.max(8, 12 - Math.log2(scaleFactor) * 2) + 'px'
-    element.appendChild(textElement)
-    return element
-  },
-}) 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