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

@@ -37,7 +37,6 @@
           class="flex flex-col p-4 gap-4 flex-1 min-w-0 overflow-hidden"
         >
           <MapControlsContent
-            v-model:show-grid-coordinates="showGridCoordinates"
             v-model:hide-markers="hideMarkers"
             :selected-map-id-select="selectedMapIdSelect"
             @update:selected-map-id-select="(v) => (selectedMapIdSelect = v)"
@@ -52,6 +51,7 @@
             :players="players"
             :current-map-id="currentMapId ?? undefined"
             :current-coords="currentCoords"
+            :selected-marker-for-bookmark="selectedMarkerForBookmark"
             @zoom-in="$emit('zoomIn')"
             @zoom-out="$emit('zoomOut')"
             @reset-view="$emit('resetView')"
@@ -128,7 +128,6 @@
           </div>
           <div class="overflow-y-auto overscroll-contain flex-1 p-4 pb-8">
             <MapControlsContent
-              v-model:show-grid-coordinates="showGridCoordinates"
               v-model:hide-markers="hideMarkers"
               :selected-map-id-select="selectedMapIdSelect"
               @update:selected-map-id-select="(v) => (selectedMapIdSelect = v)"
@@ -143,6 +142,7 @@
               :players="players"
               :current-map-id="currentMapId ?? undefined"
               :current-coords="currentCoords"
+              :selected-marker-for-bookmark="selectedMarkerForBookmark"
               :touch-friendly="true"
               @zoom-in="$emit('zoomIn')"
               @zoom-out="$emit('zoomOut')"
@@ -167,6 +167,7 @@
 
 <script setup lang="ts">
 import type { MapInfo } from '~/types/api'
+import type { SelectedMarkerForBookmark } from '~/components/map/MapBookmarks.vue'
 import MapControlsContent from '~/components/map/MapControlsContent.vue'
 
 interface QuestGiver {
@@ -186,8 +187,16 @@ const props = withDefaults(
     players: Player[]
     currentMapId?: number | null
     currentCoords?: { x: number; y: number; z: number } | null
+    selectedMarkerForBookmark?: SelectedMarkerForBookmark
   }>(),
-  { maps: () => [], questGivers: () => [], players: () => [], currentMapId: null, currentCoords: null }
+  {
+    maps: () => [],
+    questGivers: () => [],
+    players: () => [],
+    currentMapId: null,
+    currentCoords: null,
+    selectedMarkerForBookmark: null,
+  }
 )
 
 defineEmits<{
@@ -197,7 +206,6 @@ defineEmits<{
   jumpToMarker: [id: number]
 }>()
 
-const showGridCoordinates = defineModel<boolean>('showGridCoordinates', { default: false })
 const hideMarkers = defineModel<boolean>('hideMarkers', { default: false })
 const panelCollapsed = ref(false)
 const sheetOpen = ref(false)
@@ -233,6 +241,8 @@ const selectedPlayerIdSelect = computed({
     selectedPlayerId.value = v === '' ? null : Number(v)
   },
 })
+
+const selectedMarkerForBookmark = toRef(props, 'selectedMarkerForBookmark')
 </script>
 
 <style scoped>