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/components/map/MapShortcutsOverlay.vue

@@ -0,0 +1,84 @@
+<template>
+  <Teleport to="body">
+    <Transition name="shortcuts-modal">
+      <div
+        v-if="open"
+        class="fixed inset-0 z-[1200] flex items-center justify-center p-4 bg-black/50"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Keyboard shortcuts"
+        @click.self="$emit('close')"
+      >
+        <div
+          class="bg-base-100 rounded-xl shadow-2xl border border-base-300 max-w-md w-full p-6"
+          @click.stop
+        >
+          <div class="flex items-center justify-between mb-4">
+            <h2 class="text-lg font-semibold flex items-center gap-2">
+              <icons-icon-keyboard class="size-5" />
+              Keyboard shortcuts
+            </h2>
+            <button
+              type="button"
+              class="btn btn-ghost btn-sm btn-circle"
+              aria-label="Close"
+              @click="$emit('close')"
+            >
+              ×
+            </button>
+          </div>
+          <dl class="space-y-2 text-sm">
+            <div class="flex justify-between gap-4 py-1 border-b border-base-300/50">
+              <dt class="text-base-content/80"><kbd class="kbd kbd-sm">?</kbd></dt>
+              <dd>Show this help</dd>
+            </div>
+            <div class="flex justify-between gap-4 py-1 border-b border-base-300/50">
+              <dt class="text-base-content/80"><kbd class="kbd kbd-sm">+</kbd> / <kbd class="kbd kbd-sm">−</kbd></dt>
+              <dd>Zoom in / out</dd>
+            </div>
+            <div class="flex justify-between gap-4 py-1 border-b border-base-300/50">
+              <dt class="text-base-content/80"><kbd class="kbd kbd-sm">H</kbd></dt>
+              <dd>Toggle markers visibility</dd>
+            </div>
+            <div class="flex justify-between gap-4 py-1 border-b border-base-300/50">
+              <dt class="text-base-content/80"><kbd class="kbd kbd-sm">G</kbd></dt>
+              <dd>Toggle grid coordinates</dd>
+            </div>
+            <div class="flex justify-between gap-4 py-1 border-b border-base-300/50">
+              <dt class="text-base-content/80"><kbd class="kbd kbd-sm">F</kbd></dt>
+              <dd>Focus search</dd>
+            </div>
+            <div class="flex justify-between gap-4 py-1">
+              <dt class="text-base-content/80"><kbd class="kbd kbd-sm">Esc</kbd></dt>
+              <dd>Close menus / overlay</dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+defineProps<{ open: boolean }>()
+defineEmits<{ close: [] }>()
+</script>
+
+<style scoped>
+.shortcuts-modal-enter-active,
+.shortcuts-modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+.shortcuts-modal-enter-from,
+.shortcuts-modal-leave-to {
+  opacity: 0;
+}
+.shortcuts-modal-enter-active .bg-base-100,
+.shortcuts-modal-leave-active .bg-base-100 {
+  transition: transform 0.2s ease;
+}
+.shortcuts-modal-enter-from .bg-base-100,
+.shortcuts-modal-leave-to .bg-base-100 {
+  transform: scale(0.95);
+}
+</style>