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/MapBookmarks.vue

@@ -0,0 +1,96 @@
+<template>
+  <section class="flex flex-col gap-2">
+    <h3 class="text-xs font-semibold uppercase tracking-wider text-base-content/70 flex items-center gap-1.5">
+      <icons-icon-bookmark class="size-3.5 opacity-80" aria-hidden="true" />
+      Saved locations
+    </h3>
+    <div class="flex flex-col gap-1 max-h-40 overflow-y-auto">
+      <template v-if="bookmarks.length === 0">
+        <p class="text-xs text-base-content/60 py-1">No saved locations.</p>
+      </template>
+      <template v-else>
+        <div
+          v-for="b in bookmarks"
+          :key="b.id"
+          class="flex items-center gap-2 group rounded-lg hover:bg-base-200/50 px-2 py-1.5 -mx-2"
+        >
+          <button
+            type="button"
+            class="btn btn-ghost btn-xs flex-1 min-w-0 justify-start text-left truncate font-normal"
+            :title="`Go to ${b.name}`"
+            @click="onGoTo(b)"
+          >
+            <span class="truncate">{{ b.name }}</span>
+          </button>
+          <button
+            type="button"
+            class="btn btn-ghost btn-xs btn-square shrink-0 opacity-70 hover:opacity-100 hover:text-error"
+            aria-label="Remove bookmark"
+            @click="onRemove(b.id)"
+          >
+            ×
+          </button>
+        </div>
+      </template>
+    </div>
+    <button
+      type="button"
+      class="btn btn-outline btn-sm w-full"
+      :class="touchFriendly ? 'min-h-11' : ''"
+      :disabled="!canAddCurrent"
+      title="Save current map position"
+      @click="onAddCurrent"
+    >
+      <icons-icon-plus class="size-4" />
+      Add current location
+    </button>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { MapInfo } from '~/types/api'
+import { useMapBookmarks } from '~/composables/useMapBookmarks'
+import { useMapNavigate } from '~/composables/useMapNavigate'
+
+const props = withDefaults(
+  defineProps<{
+    maps: MapInfo[]
+    currentMapId: number | null
+    currentCoords: { x: number; y: number; z: number } | null
+    touchFriendly?: boolean
+  }>(),
+  { touchFriendly: false }
+)
+
+const { bookmarks, add, remove } = useMapBookmarks()
+const { goToCoords } = useMapNavigate()
+
+const canAddCurrent = computed(
+  () =>
+    props.currentMapId != null &&
+    props.currentCoords != null &&
+    props.currentMapId >= 0
+)
+
+function onGoTo(b: { mapId: number; x: number; y: number; zoom?: number }) {
+  goToCoords(b.mapId, b.x, b.y, b.zoom)
+}
+
+function onRemove(id: string) {
+  remove(id)
+}
+
+function onAddCurrent() {
+  if (!canAddCurrent.value) return
+  const mapId = props.currentMapId!
+  const { x, y, z } = props.currentCoords!
+  const mapName = props.maps.find((m) => m.ID === mapId)?.Name ?? `Map ${mapId}`
+  add({
+    name: `${mapName} ${x}, ${y}`,
+    mapId,
+    x,
+    y,
+    zoom: z,
+  })
+}
+</script>