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

@@ -22,6 +22,15 @@
           >
             <span class="truncate">{{ b.name }}</span>
           </button>
+          <button
+            v-if="openBookmarkModal"
+            type="button"
+            class="btn btn-ghost btn-xs btn-square shrink-0 opacity-70 hover:opacity-100"
+            aria-label="Edit bookmark name"
+            @click="openBookmarkModal(b.name, 'Edit bookmark name', { kind: 'edit', editId: b.id })"
+          >
+            <icons-icon-pencil class="size-3.5" />
+          </button>
           <button
             type="button"
             class="btn btn-ghost btn-xs btn-square shrink-0 opacity-70 hover:opacity-100 hover:text-error"
@@ -33,17 +42,30 @@
         </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>
+    <div v-if="openBookmarkModal" class="flex flex-col gap-1">
+      <button
+        type="button"
+        class="btn btn-primary btn-sm w-full"
+        :class="touchFriendly ? 'min-h-11' : ''"
+        :disabled="!selectedMarkerForBookmark"
+        title="Add selected quest giver as bookmark"
+        @click="onAddSelectedMarker"
+      >
+        <icons-icon-plus class="size-4" />
+        Add selected marker
+      </button>
+      <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>
+    </div>
   </section>
 </template>
 
@@ -52,18 +74,27 @@ import type { MapInfo } from '~/types/api'
 import { useMapBookmarks } from '~/composables/useMapBookmarks'
 import { useMapNavigate } from '~/composables/useMapNavigate'
 
+export type SelectedMarkerForBookmark = { mapId: number; x: number; y: number; name: string } | null
+
+type BookmarkModalPayload =
+  | { kind: 'add'; mapId: number; x: number; y: number; zoom?: number }
+  | { kind: 'edit'; editId: string }
+type OpenBookmarkModalFn = (defaultName: string, title: string, data: BookmarkModalPayload) => void
+
 const props = withDefaults(
   defineProps<{
     maps: MapInfo[]
     currentMapId: number | null
     currentCoords: { x: number; y: number; z: number } | null
+    selectedMarkerForBookmark?: SelectedMarkerForBookmark
     touchFriendly?: boolean
   }>(),
-  { touchFriendly: false }
+  { selectedMarkerForBookmark: null, touchFriendly: false }
 )
 
-const { bookmarks, add, remove } = useMapBookmarks()
+const { bookmarks, remove } = useMapBookmarks()
 const { goToCoords } = useMapNavigate()
+const openBookmarkModal = inject<OpenBookmarkModalFn>('openBookmarkModal')
 
 const canAddCurrent = computed(
   () =>
@@ -80,17 +111,20 @@ function onRemove(id: string) {
   remove(id)
 }
 
+function onAddSelectedMarker() {
+  const m = props.selectedMarkerForBookmark
+  if (!m || !openBookmarkModal) return
+  openBookmarkModal(m.name, 'Add bookmark', { kind: 'add', mapId: m.mapId, x: m.x, y: m.y })
+}
+
 function onAddCurrent() {
-  if (!canAddCurrent.value) return
+  if (!canAddCurrent.value || !openBookmarkModal) 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,
-  })
+  openBookmarkModal(
+    `${props.maps.find((map) => map.ID === mapId)?.Name ?? `Map ${mapId}`} ${x}, ${y}`,
+    'Add bookmark',
+    { kind: 'add', mapId, x, y, zoom: z }
+  )
 }
 </script>