Enhance MapView component with new features and icons

- Added fullscreen and measurement mode buttons for improved map interaction.
- Introduced a bookmarks section to save and navigate to locations easily.
- Implemented a search feature for quick access to coordinates and markers.
- Added keyboard shortcuts overlay for enhanced usability.
- Refactored MapControls and MapControlsContent to support new functionalities.
- Introduced new icon components for better visual representation in the UI.

frontend-nuxt/composables/useFullscreen.ts

@@ -0,0 +1,57 @@
+/**
+ * Fullscreen API for a target element. When active, optionally hide navbar via body class.
+ */
+export function useFullscreen(targetRef: Ref<HTMLElement | null>) {
+  const isFullscreen = ref(false)
+
+  function enter() {
+    const el = targetRef.value
+    if (!el || import.meta.server) return
+    const doc = document as Document & { fullscreenElement?: Element; exitFullscreen?: () => Promise<void> }
+    if (doc.fullscreenElement) return
+    el.requestFullscreen?.()?.then(() => {
+      isFullscreen.value = true
+      document.body.classList.add('map-fullscreen')
+    }).catch(() => {})
+  }
+
+  function exit() {
+    if (import.meta.server) return
+    const doc = document as Document & { fullscreenElement?: Element; exitFullscreen?: () => Promise<void> }
+    if (!doc.fullscreenElement) {
+      isFullscreen.value = false
+      document.body.classList.remove('map-fullscreen')
+      return
+    }
+    doc.exitFullscreen?.()?.then(() => {
+      isFullscreen.value = false
+      document.body.classList.remove('map-fullscreen')
+    }).catch(() => {})
+  }
+
+  function toggle() {
+    if (isFullscreen.value) exit()
+    else enter()
+  }
+
+  function onFullscreenChange() {
+    const doc = document as Document & { fullscreenElement?: Element }
+    isFullscreen.value = !!doc.fullscreenElement
+    if (!doc.fullscreenElement) document.body.classList.remove('map-fullscreen')
+  }
+
+  onMounted(() => {
+    if (import.meta.client) {
+      document.addEventListener('fullscreenchange', onFullscreenChange)
+    }
+  })
+
+  onBeforeUnmount(() => {
+    if (import.meta.client) {
+      document.removeEventListener('fullscreenchange', onFullscreenChange)
+      if (isFullscreen.value) exit()
+    }
+  })
+
+  return { isFullscreen, enter, exit, toggle }
+}