Enhance frontend UI and functionality

- Added page transition effects in app.vue for smoother navigation.
- Updated nuxt.config.ts to include custom font styles and page transitions.
- Improved loading indicators in MapPageWrapper.vue and login.vue for better user experience.
- Enhanced MapView.vue with a collapsible control panel and improved styling.
- Introduced new icons for various components to enhance visual consistency.
- Updated Tailwind CSS configuration to extend font families and improve theme management.
- Refined layout styles in default.vue and admin pages for better responsiveness and aesthetics.
- Implemented error handling and loading states across various forms for improved user feedback.

frontend-nuxt/lib/LeafletCustomTypes.ts

@@ -29,6 +29,9 @@ export const GridCoordLayer = L.GridLayer.extend({
     const scaleFactor = Math.pow(2, HnHMaxZoom - coords.z)
     const topLeft = { x: coords.x * scaleFactor, y: coords.y * scaleFactor }
     const bottomRight = { x: topLeft.x + scaleFactor - 1, y: topLeft.y + scaleFactor - 1 }
+    const swPoint = { x: topLeft.x * TileSize, y: topLeft.y * TileSize }
+    const tileWidthPx = scaleFactor * TileSize
+    const tileHeightPx = scaleFactor * TileSize
 
     if (scaleFactor > GRID_COORD_SCALE_FACTOR_THRESHOLD) {
       // Low zoom: one label per tile to avoid hundreds of thousands of DOM nodes (Reset view freeze fix)
@@ -45,8 +48,8 @@ export const GridCoordLayer = L.GridLayer.extend({
 
     for (let gx = topLeft.x; gx <= bottomRight.x; gx++) {
       for (let gy = topLeft.y; gy <= bottomRight.y; gy++) {
-        const leftPx = ((gx - topLeft.x) / scaleFactor) * TileSize
-        const topPx = ((gy - topLeft.y) / scaleFactor) * TileSize
+        const leftPx = tileWidthPx > 0 ? ((gx * TileSize - swPoint.x) / tileWidthPx) * TileSize : 0
+        const topPx = tileHeightPx > 0 ? ((gy * TileSize - swPoint.y) / tileHeightPx) * TileSize : 0
         const textElement = document.createElement('div')
         textElement.classList.add('map-tile-text')
         textElement.textContent = `(${gx}, ${gy})`