From 945b803dbadc2ea161e3f4448a079d8d5574c141 Mon Sep 17 00:00:00 2001
From: Nikolay Tatarinov <me@arnike.ru>
Date: Sun, 1 Mar 2026 15:45:49 +0300
Subject: [PATCH] Enhance frontend components and introduce new features

- Updated PasswordInput component with improved styling and touch manipulation support.
- Added new IconMenu component for consistent icon representation in the UI.
- Refactored MapControls and introduced MapControlsContent for better organization and usability.
- Implemented suppress-leaflet-deprecation plugin to handle known warnings in Firefox.
- Enhanced default layout with a responsive drawer for mobile navigation and improved user experience.
---
 frontend-nuxt/components/PasswordInput.vue    |  98 +-
 frontend-nuxt/components/icons/IconMenu.vue   |   7 +
 frontend-nuxt/components/map/MapControls.vue  | 473 +++++-----
 .../components/map/MapControlsContent.vue     | 169 ++++
 frontend-nuxt/layouts/default.vue             | 221 +++--
 frontend-nuxt/pages/admin/index.vue           | 892 +++++++++---------
 frontend-nuxt/pages/profile.vue               | 380 ++++----
 .../suppress-leaflet-deprecation.client.ts    |  22 +
 8 files changed, 1293 insertions(+), 969 deletions(-)
 create mode 100644 frontend-nuxt/components/icons/IconMenu.vue
 create mode 100644 frontend-nuxt/components/map/MapControlsContent.vue
 create mode 100644 frontend-nuxt/plugins/suppress-leaflet-deprecation.client.ts

diff --git a/frontend-nuxt/components/PasswordInput.vue b/frontend-nuxt/components/PasswordInput.vue
index d58fd39..d873650 100644
--- a/frontend-nuxt/components/PasswordInput.vue
+++ b/frontend-nuxt/components/PasswordInput.vue
@@ -1,49 +1,49 @@
-<template>
-  <fieldset class="fieldset">
-    <label v-if="label" class="label" :for="inputId">
-      <span>{{ label }}</span>
-    </label>
-    <div class="relative flex">
-      <input
-        :id="inputId"
-        :value="modelValue"
-        :type="showPass ? 'text' : 'password'"
-        class="input flex-1 pr-10"
-        :placeholder="placeholder"
-        :required="required"
-        :autocomplete="autocomplete"
-        :readonly="readonly"
-        @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
-      />
-      <button
-        type="button"
-        class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-sm btn-square min-h-0 h-8 w-8"
-        :aria-label="showPass ? 'Hide password' : 'Show password'"
-        @click="showPass = !showPass"
-      >
-        <icons-icon-eye-off v-if="showPass" />
-        <icons-icon-eye v-else />
-      </button>
-    </div>
-  </fieldset>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    modelValue: string
-    label?: string
-    placeholder?: string
-    required?: boolean
-    autocomplete?: string
-    readonly?: boolean
-    inputId?: string
-  }>(),
-  { required: false, autocomplete: 'off', inputId: undefined }
-)
-
-const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
-
-const showPass = ref(false)
-const inputId = computed(() => props.inputId ?? `password-${Math.random().toString(36).slice(2, 9)}`)
-</script>
+<template>
+  <fieldset class="fieldset">
+    <label v-if="label" class="label" :for="inputId">
+      <span>{{ label }}</span>
+    </label>
+    <div class="relative flex">
+      <input
+        :id="inputId"
+        :value="modelValue"
+        :type="showPass ? 'text' : 'password'"
+        class="input flex-1 pr-10 min-h-11 touch-manipulation"
+        :placeholder="placeholder"
+        :required="required"
+        :autocomplete="autocomplete"
+        :readonly="readonly"
+        @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+      />
+      <button
+        type="button"
+        class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-sm btn-square min-h-9 min-w-9 touch-manipulation"
+        :aria-label="showPass ? 'Hide password' : 'Show password'"
+        @click="showPass = !showPass"
+      >
+        <icons-icon-eye-off v-if="showPass" />
+        <icons-icon-eye v-else />
+      </button>
+    </div>
+  </fieldset>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    label?: string
+    placeholder?: string
+    required?: boolean
+    autocomplete?: string
+    readonly?: boolean
+    inputId?: string
+  }>(),
+  { required: false, autocomplete: 'off', inputId: undefined }
+)
+
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+
+const showPass = ref(false)
+const inputId = computed(() => props.inputId ?? `password-${Math.random().toString(36).slice(2, 9)}`)
+</script>
diff --git a/frontend-nuxt/components/icons/IconMenu.vue b/frontend-nuxt/components/icons/IconMenu.vue
new file mode 100644
index 0000000..c5f9996
--- /dev/null
+++ b/frontend-nuxt/components/icons/IconMenu.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <line x1="3" y1="6" x2="21" y2="6" />
+    <line x1="3" y1="12" x2="21" y2="12" />
+    <line x1="3" y1="18" x2="21" y2="18" />
+  </svg>
+</template>
diff --git a/frontend-nuxt/components/map/MapControls.vue b/frontend-nuxt/components/map/MapControls.vue
index 7b93535..23665e2 100644
--- a/frontend-nuxt/components/map/MapControls.vue
+++ b/frontend-nuxt/components/map/MapControls.vue
@@ -1,218 +1,255 @@
-<template>
-  <div
-    class="absolute left-3 top-[10%] z-[502] flex min-w-[3rem] min-h-[3rem] transition-all duration-300 ease-out"
-    :class="panelCollapsed ? 'w-12' : 'w-64'"
-  >
-    <div
-      class="rounded-xl bg-base-100/80 backdrop-blur-xl border border-base-300/50 shadow-xl overflow-hidden flex flex-col transition-all duration-300 ease-out"
-      :class="panelCollapsed ? 'w-12 items-center py-2 gap-1' : 'w-56'"
-    >
-      <!-- Collapsed: zoom in/out + expand -->
-      <template v-if="panelCollapsed">
-        <div class="flex flex-col gap-1">
-          <button
-            type="button"
-            class="btn btn-ghost btn-sm btn-square transition-all duration-200 hover:scale-105"
-            title="Zoom in"
-            aria-label="Zoom in"
-            @click="$emit('zoomIn')"
-          >
-            <icons-icon-zoom-in class="size-4" />
-          </button>
-          <button
-            type="button"
-            class="btn btn-ghost btn-sm btn-square transition-all duration-200 hover:scale-105"
-            title="Zoom out"
-            aria-label="Zoom out"
-            @click="$emit('zoomOut')"
-          >
-            <icons-icon-zoom-out class="size-4" />
-          </button>
-        </div>
-      </template>
-      <!-- Expanded: full content with transition -->
-      <Transition name="panel-slide" mode="out-in">
-        <div
-          v-if="!panelCollapsed"
-          key="expanded"
-          class="flex flex-col p-4 gap-4 flex-1 min-w-0 overflow-hidden"
-        >
-          <!-- Zoom -->
-          <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-zoom-in class="size-3.5 opacity-80" aria-hidden="true" />
-              Zoom
-            </h3>
-            <div class="flex items-center gap-2">
-              <button
-                type="button"
-                class="btn btn-outline btn-sm btn-square transition-all duration-200 hover:scale-105"
-                title="Zoom in"
-                aria-label="Zoom in"
-                @click="$emit('zoomIn')"
-              >
-                <icons-icon-zoom-in />
-              </button>
-              <button
-                type="button"
-                class="btn btn-outline btn-sm btn-square transition-all duration-200 hover:scale-105"
-                title="Zoom out"
-                aria-label="Zoom out"
-                @click="$emit('zoomOut')"
-              >
-                <icons-icon-zoom-out />
-              </button>
-              <button
-                type="button"
-                class="btn btn-outline btn-sm btn-square transition-all duration-200 hover:scale-105"
-                title="Reset view — center map and minimum zoom"
-                aria-label="Reset view"
-                @click="$emit('resetView')"
-              >
-                <icons-icon-home />
-              </button>
-            </div>
-          </section>
-          <!-- Display -->
-          <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-eye class="size-3.5 opacity-80" aria-hidden="true" />
-              Display
-            </h3>
-            <label class="label cursor-pointer justify-start gap-2 py-0 hover:bg-base-200/50 rounded-lg px-2 -mx-2">
-              <input v-model="showGridCoordinates" type="checkbox" class="checkbox checkbox-sm" />
-              <span>Show grid coordinates</span>
-            </label>
-            <label class="label cursor-pointer justify-start gap-2 py-0 hover:bg-base-200/50 rounded-lg px-2 -mx-2">
-              <input v-model="hideMarkers" type="checkbox" class="checkbox checkbox-sm" />
-              <span>Hide markers</span>
-            </label>
-          </section>
-          <!-- Navigation -->
-          <section class="flex flex-col gap-3">
-            <h3 class="text-xs font-semibold uppercase tracking-wider text-base-content/70 flex items-center gap-1.5">
-              <icons-icon-map-pin class="size-3.5 opacity-80" aria-hidden="true" />
-              Navigation
-            </h3>
-            <fieldset class="fieldset">
-              <label class="label py-0"><span>Jump to Map</span></label>
-              <select v-model="selectedMapIdSelect" class="select select-sm w-full focus:ring-2 focus:ring-primary">
-                <option value="">Select map</option>
-                <option v-for="m in maps" :key="m.ID" :value="m.ID">{{ m.Name }}</option>
-              </select>
-            </fieldset>
-            <fieldset class="fieldset">
-              <label class="label py-0"><span>Overlay Map</span></label>
-              <select v-model="overlayMapId" class="select select-sm w-full focus:ring-2 focus:ring-primary">
-                <option :value="-1">None</option>
-                <option v-for="m in maps" :key="'overlay-' + m.ID" :value="m.ID">{{ m.Name }}</option>
-              </select>
-            </fieldset>
-            <fieldset class="fieldset">
-              <label class="label py-0"><span>Jump to Quest Giver</span></label>
-              <select v-model="selectedMarkerIdSelect" class="select select-sm w-full focus:ring-2 focus:ring-primary">
-                <option value="">Select quest giver</option>
-                <option v-for="q in questGivers" :key="q.id" :value="q.id">{{ q.name }}</option>
-              </select>
-            </fieldset>
-            <fieldset class="fieldset">
-              <label class="label py-0"><span>Jump to Player</span></label>
-              <select v-model="selectedPlayerIdSelect" class="select select-sm w-full focus:ring-2 focus:ring-primary">
-                <option value="">Select player</option>
-                <option v-for="p in players" :key="p.id" :value="p.id">{{ p.name }}</option>
-              </select>
-            </fieldset>
-          </section>
-        </div>
-      </Transition>
-      <button
-        type="button"
-        class="btn btn-ghost btn-sm btn-square shrink-0 m-1 transition-all duration-200 hover:scale-105 mt-auto"
-        :title="panelCollapsed ? 'Expand panel' : 'Collapse panel'"
-        :aria-label="panelCollapsed ? 'Expand panel' : 'Collapse panel'"
-        @click.stop="panelCollapsed = !panelCollapsed"
-      >
-        <icons-icon-chevron-right v-if="panelCollapsed" class="rotate-0" />
-        <icons-icon-panel-left v-else />
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { MapInfo } from '~/types/api'
-
-interface QuestGiver {
-  id: number
-  name: string
-}
-
-interface Player {
-  id: number
-  name: string
-}
-
-const props = withDefaults(
-  defineProps<{
-    maps: MapInfo[]
-    questGivers: QuestGiver[]
-    players: Player[]
-  }>(),
-  { maps: () => [], questGivers: () => [], players: () => [] }
-)
-
-const emit = defineEmits<{
-  zoomIn: []
-  zoomOut: []
-  resetView: []
-}>()
-
-const showGridCoordinates = defineModel<boolean>('showGridCoordinates', { default: false })
-const hideMarkers = defineModel<boolean>('hideMarkers', { default: false })
-const panelCollapsed = ref(false)
-const selectedMapId = defineModel<number | null>('selectedMapId', { default: null })
-const overlayMapId = defineModel<number>('overlayMapId', { default: -1 })
-const selectedMarkerId = defineModel<number | null>('selectedMarkerId', { default: null })
-const selectedPlayerId = defineModel<number | null>('selectedPlayerId', { default: null })
-
-// String bindings for selects with placeholder ('' ↔ null)
-const selectedMapIdSelect = computed({
-  get() {
-    const v = selectedMapId.value
-    return v == null ? '' : String(v)
-  },
-  set(v: string) {
-    selectedMapId.value = v === '' ? null : Number(v)
-  },
-})
-const selectedMarkerIdSelect = computed({
-  get() {
-    const v = selectedMarkerId.value
-    return v == null ? '' : String(v)
-  },
-  set(v: string) {
-    selectedMarkerId.value = v === '' ? null : Number(v)
-  },
-})
-const selectedPlayerIdSelect = computed({
-  get() {
-    const v = selectedPlayerId.value
-    return v == null ? '' : String(v)
-  },
-  set(v: string) {
-    selectedPlayerId.value = v === '' ? null : Number(v)
-  },
-})
-</script>
-
-<style scoped>
-.panel-slide-enter-active,
-.panel-slide-leave-active {
-  transition: opacity 0.2s ease, transform 0.2s ease;
-}
-.panel-slide-enter-from,
-.panel-slide-leave-to {
-  opacity: 0;
-  transform: translateX(-0.5rem);
-}
-</style>
+<template>
+  <!-- Desktop: left panel (md and up) -->
+  <div
+    class="absolute left-3 top-[10%] z-[502] hidden md:flex min-w-[3rem] min-h-[3rem] transition-all duration-300 ease-out"
+    :class="panelCollapsed ? 'w-12' : 'w-64'"
+  >
+    <div
+      class="rounded-xl bg-base-100/80 backdrop-blur-xl border border-base-300/50 shadow-xl overflow-hidden flex flex-col transition-all duration-300 ease-out"
+      :class="panelCollapsed ? 'w-12 items-center py-2 gap-1' : 'w-56'"
+    >
+      <template v-if="panelCollapsed">
+        <div class="flex flex-col gap-1">
+          <button
+            type="button"
+            class="btn btn-ghost btn-sm btn-square transition-all duration-200 hover:scale-105"
+            title="Zoom in"
+            aria-label="Zoom in"
+            @click="$emit('zoomIn')"
+          >
+            <icons-icon-zoom-in class="size-4" />
+          </button>
+          <button
+            type="button"
+            class="btn btn-ghost btn-sm btn-square transition-all duration-200 hover:scale-105"
+            title="Zoom out"
+            aria-label="Zoom out"
+            @click="$emit('zoomOut')"
+          >
+            <icons-icon-zoom-out class="size-4" />
+          </button>
+        </div>
+      </template>
+      <Transition name="panel-slide" mode="out-in">
+        <div
+          v-if="!panelCollapsed"
+          key="expanded"
+          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)"
+            :overlay-map-id="overlayMapId"
+            @update:overlay-map-id="(v) => (overlayMapId = v)"
+            :selected-marker-id-select="selectedMarkerIdSelect"
+            @update:selected-marker-id-select="(v) => (selectedMarkerIdSelect = v)"
+            :selected-player-id-select="selectedPlayerIdSelect"
+            @update:selected-player-id-select="(v) => (selectedPlayerIdSelect = v)"
+            :maps="maps"
+            :quest-givers="questGivers"
+            :players="players"
+            @zoom-in="$emit('zoomIn')"
+            @zoom-out="$emit('zoomOut')"
+            @reset-view="$emit('resetView')"
+          />
+        </div>
+      </Transition>
+      <button
+        type="button"
+        class="btn btn-ghost btn-sm btn-square shrink-0 m-1 transition-all duration-200 hover:scale-105 mt-auto"
+        :title="panelCollapsed ? 'Expand panel' : 'Collapse panel'"
+        :aria-label="panelCollapsed ? 'Expand panel' : 'Collapse panel'"
+        @click.stop="panelCollapsed = !panelCollapsed"
+      >
+        <icons-icon-chevron-right v-if="panelCollapsed" class="rotate-0" />
+        <icons-icon-panel-left v-else />
+      </button>
+    </div>
+  </div>
+
+  <!-- Mobile: FAB + bottom sheet -->
+  <div class="fixed left-3 bottom-6 z-[502] flex flex-col gap-2 md:hidden">
+    <button
+      type="button"
+      class="btn btn-primary btn-circle shadow-lg min-h-12 min-w-12 touch-manipulation"
+      aria-label="Open map controls"
+      @click="sheetOpen = true"
+    >
+      <icons-icon-panel-left class="size-6" />
+    </button>
+    <div class="flex flex-col gap-1">
+      <button
+        type="button"
+        class="btn btn-ghost btn-sm btn-circle min-h-10 min-w-10 touch-manipulation"
+        title="Zoom in"
+        aria-label="Zoom in"
+        @click="$emit('zoomIn')"
+      >
+        <icons-icon-zoom-in class="size-4" />
+      </button>
+      <button
+        type="button"
+        class="btn btn-ghost btn-sm btn-circle min-h-10 min-w-10 touch-manipulation"
+        title="Zoom out"
+        aria-label="Zoom out"
+        @click="$emit('zoomOut')"
+      >
+        <icons-icon-zoom-out class="size-4" />
+      </button>
+    </div>
+  </div>
+
+  <!-- Mobile bottom sheet overlay + panel -->
+  <Teleport to="body">
+    <Transition name="sheet">
+      <div
+        v-if="sheetOpen"
+        class="fixed inset-0 z-[1100] md:hidden"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Map controls"
+      >
+        <div
+          class="absolute inset-0 bg-black/50"
+          aria-hidden="true"
+          @click="sheetOpen = false"
+        />
+        <div
+          class="sheet-panel absolute left-0 right-0 bottom-0 max-h-[85vh] rounded-t-2xl bg-base-100 shadow-2xl flex flex-col overflow-hidden"
+          @click.stop
+        >
+          <div class="flex justify-center py-2 shrink-0">
+            <span class="w-12 h-1 rounded-full bg-base-300" aria-hidden="true" />
+          </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)"
+              :overlay-map-id="overlayMapId"
+              @update:overlay-map-id="(v) => (overlayMapId = v)"
+              :selected-marker-id-select="selectedMarkerIdSelect"
+              @update:selected-marker-id-select="(v) => (selectedMarkerIdSelect = v)"
+              :selected-player-id-select="selectedPlayerIdSelect"
+              @update:selected-player-id-select="(v) => (selectedPlayerIdSelect = v)"
+              :maps="maps"
+              :quest-givers="questGivers"
+              :players="players"
+              :touch-friendly="true"
+              @zoom-in="$emit('zoomIn')"
+              @zoom-out="$emit('zoomOut')"
+              @reset-view="$emit('resetView')"
+            />
+          </div>
+          <div class="p-3 border-t border-base-300 shrink-0 safe-area-pb">
+            <button
+              type="button"
+              class="btn btn-ghost btn-block touch-manipulation min-h-12"
+              @click="sheetOpen = false"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { MapInfo } from '~/types/api'
+import MapControlsContent from '~/components/map/MapControlsContent.vue'
+
+interface QuestGiver {
+  id: number
+  name: string
+}
+
+interface Player {
+  id: number
+  name: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    maps: MapInfo[]
+    questGivers: QuestGiver[]
+    players: Player[]
+  }>(),
+  { maps: () => [], questGivers: () => [], players: () => [] }
+)
+
+defineEmits<{
+  zoomIn: []
+  zoomOut: []
+  resetView: []
+}>()
+
+const showGridCoordinates = defineModel<boolean>('showGridCoordinates', { default: false })
+const hideMarkers = defineModel<boolean>('hideMarkers', { default: false })
+const panelCollapsed = ref(false)
+const sheetOpen = ref(false)
+const selectedMapId = defineModel<number | null>('selectedMapId', { default: null })
+const overlayMapId = defineModel<number>('overlayMapId', { default: -1 })
+const selectedMarkerId = defineModel<number | null>('selectedMarkerId', { default: null })
+const selectedPlayerId = defineModel<number | null>('selectedPlayerId', { default: null })
+
+const selectedMapIdSelect = computed({
+  get() {
+    const v = selectedMapId.value
+    return v == null ? '' : String(v)
+  },
+  set(v: string) {
+    selectedMapId.value = v === '' ? null : Number(v)
+  },
+})
+const selectedMarkerIdSelect = computed({
+  get() {
+    const v = selectedMarkerId.value
+    return v == null ? '' : String(v)
+  },
+  set(v: string) {
+    selectedMarkerId.value = v === '' ? null : Number(v)
+  },
+})
+const selectedPlayerIdSelect = computed({
+  get() {
+    const v = selectedPlayerId.value
+    return v == null ? '' : String(v)
+  },
+  set(v: string) {
+    selectedPlayerId.value = v === '' ? null : Number(v)
+  },
+})
+</script>
+
+<style scoped>
+.panel-slide-enter-active,
+.panel-slide-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.panel-slide-enter-from,
+.panel-slide-leave-to {
+  opacity: 0;
+  transform: translateX(-0.5rem);
+}
+.sheet-enter-active,
+.sheet-leave-active {
+  transition: opacity 0.2s ease;
+}
+.sheet-enter-from,
+.sheet-leave-to {
+  opacity: 0;
+}
+.sheet-enter-active .sheet-panel,
+.sheet-leave-active .sheet-panel {
+  transition: transform 0.25s ease-out;
+}
+.sheet-enter-from .sheet-panel,
+.sheet-leave-to .sheet-panel {
+  transform: translateY(100%);
+}
+</style>
diff --git a/frontend-nuxt/components/map/MapControlsContent.vue b/frontend-nuxt/components/map/MapControlsContent.vue
new file mode 100644
index 0000000..923451c
--- /dev/null
+++ b/frontend-nuxt/components/map/MapControlsContent.vue
@@ -0,0 +1,169 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <!-- Zoom -->
+    <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-zoom-in class="size-3.5 opacity-80" aria-hidden="true" />
+        Zoom
+      </h3>
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="btn btn-outline btn-sm btn-square transition-all duration-200 hover:scale-105 touch-manipulation"
+          :class="touchFriendly ? 'min-h-10 min-w-10' : ''"
+          title="Zoom in"
+          aria-label="Zoom in"
+          @click="$emit('zoomIn')"
+        >
+          <icons-icon-zoom-in />
+        </button>
+        <button
+          type="button"
+          class="btn btn-outline btn-sm btn-square transition-all duration-200 hover:scale-105 touch-manipulation"
+          :class="touchFriendly ? 'min-h-10 min-w-10' : ''"
+          title="Zoom out"
+          aria-label="Zoom out"
+          @click="$emit('zoomOut')"
+        >
+          <icons-icon-zoom-out />
+        </button>
+        <button
+          type="button"
+          class="btn btn-outline btn-sm btn-square transition-all duration-200 hover:scale-105 touch-manipulation"
+          :class="touchFriendly ? 'min-h-10 min-w-10' : ''"
+          title="Reset view — center map and minimum zoom"
+          aria-label="Reset view"
+          @click="$emit('resetView')"
+        >
+          <icons-icon-home />
+        </button>
+      </div>
+    </section>
+    <!-- Display -->
+    <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-eye class="size-3.5 opacity-80" aria-hidden="true" />
+        Display
+      </h3>
+      <label class="label cursor-pointer justify-start gap-2 py-0 hover:bg-base-200/50 rounded-lg px-2 -mx-2 touch-manipulation" :class="touchFriendly ? 'min-h-11' : ''">
+        <input v-model="showGridCoordinates" type="checkbox" class="checkbox checkbox-sm" />
+        <span>Show grid coordinates</span>
+      </label>
+      <label class="label cursor-pointer justify-start gap-2 py-0 hover:bg-base-200/50 rounded-lg px-2 -mx-2 touch-manipulation" :class="touchFriendly ? 'min-h-11' : ''">
+        <input v-model="hideMarkers" type="checkbox" class="checkbox checkbox-sm" />
+        <span>Hide markers</span>
+      </label>
+    </section>
+    <!-- Navigation -->
+    <section class="flex flex-col gap-3">
+      <h3 class="text-xs font-semibold uppercase tracking-wider text-base-content/70 flex items-center gap-1.5">
+        <icons-icon-map-pin class="size-3.5 opacity-80" aria-hidden="true" />
+        Navigation
+      </h3>
+      <fieldset class="fieldset">
+        <label class="label py-0"><span>Jump to Map</span></label>
+        <select
+          v-model="selectedMapIdSelect"
+          class="select select-sm w-full focus:ring-2 focus:ring-primary touch-manipulation"
+          :class="touchFriendly ? 'min-h-11 text-base' : ''"
+        >
+          <option value="">Select map</option>
+          <option v-for="m in maps" :key="m.ID" :value="String(m.ID)">{{ m.Name }}</option>
+        </select>
+      </fieldset>
+      <fieldset class="fieldset">
+        <label class="label py-0"><span>Overlay Map</span></label>
+        <select
+          v-model="overlayMapId"
+          class="select select-sm w-full focus:ring-2 focus:ring-primary touch-manipulation"
+          :class="touchFriendly ? 'min-h-11 text-base' : ''"
+        >
+          <option value="-1">None</option>
+          <option v-for="m in maps" :key="'overlay-' + m.ID" :value="String(m.ID)">{{ m.Name }}</option>
+        </select>
+      </fieldset>
+      <fieldset class="fieldset">
+        <label class="label py-0"><span>Jump to Quest Giver</span></label>
+        <select
+          v-model="selectedMarkerIdSelect"
+          class="select select-sm w-full focus:ring-2 focus:ring-primary touch-manipulation"
+          :class="touchFriendly ? 'min-h-11 text-base' : ''"
+        >
+          <option value="">Select quest giver</option>
+          <option v-for="q in questGivers" :key="q.id" :value="String(q.id)">{{ q.name }}</option>
+        </select>
+      </fieldset>
+      <fieldset class="fieldset">
+        <label class="label py-0"><span>Jump to Player</span></label>
+        <select
+          v-model="selectedPlayerIdSelect"
+          class="select select-sm w-full focus:ring-2 focus:ring-primary touch-manipulation"
+          :class="touchFriendly ? 'min-h-11 text-base' : ''"
+        >
+          <option value="">Select player</option>
+          <option v-for="p in players" :key="p.id" :value="String(p.id)">{{ p.name }}</option>
+        </select>
+      </fieldset>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MapInfo } from '~/types/api'
+
+interface QuestGiver {
+  id: number
+  name: string
+}
+
+interface Player {
+  id: number
+  name: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    maps: MapInfo[]
+    questGivers: QuestGiver[]
+    players: Player[]
+    touchFriendly?: boolean
+    selectedMapIdSelect: string
+    overlayMapId: number
+    selectedMarkerIdSelect: string
+    selectedPlayerIdSelect: string
+  }>(),
+  { touchFriendly: false }
+)
+
+const emit = defineEmits<{
+  zoomIn: []
+  zoomOut: []
+  resetView: []
+  'update:showGridCoordinates': [v: boolean]
+  'update:hideMarkers': [v: boolean]
+  'update:selectedMapIdSelect': [v: string]
+  'update:overlayMapId': [v: number]
+  'update:selectedMarkerIdSelect': [v: string]
+  'update:selectedPlayerIdSelect': [v: string]
+}>()
+
+const showGridCoordinates = defineModel<boolean>('showGridCoordinates', { required: true })
+const hideMarkers = defineModel<boolean>('hideMarkers', { required: true })
+
+const selectedMapIdSelect = computed({
+  get: () => props.selectedMapIdSelect,
+  set: (v) => emit('update:selectedMapIdSelect', v),
+})
+const overlayMapId = computed({
+  get: () => String(props.overlayMapId),
+  set: (v) => emit('update:overlayMapId', v === '' ? -1 : Number(v)),
+})
+const selectedMarkerIdSelect = computed({
+  get: () => props.selectedMarkerIdSelect,
+  set: (v) => emit('update:selectedMarkerIdSelect', v),
+})
+const selectedPlayerIdSelect = computed({
+  get: () => props.selectedPlayerIdSelect,
+  set: (v) => emit('update:selectedPlayerIdSelect', v),
+})
+</script>
diff --git a/frontend-nuxt/layouts/default.vue b/frontend-nuxt/layouts/default.vue
index ef60735..fcc9698 100644
--- a/frontend-nuxt/layouts/default.vue
+++ b/frontend-nuxt/layouts/default.vue
@@ -1,75 +1,165 @@
 <template>
-  <div class="h-screen flex flex-col bg-base-100 overflow-hidden">
-    <header class="navbar relative z-[1100] bg-base-100/80 backdrop-blur-xl border-b border-base-300/50 px-4 gap-2 shrink-0">
-      <NuxtLink to="/" class="flex items-center gap-2 text-lg font-semibold hover:opacity-80 transition-all duration-200">
-        <icons-icon-map class="size-6 text-primary shrink-0" aria-hidden="true" />
-        <span>{{ title }}</span>
-      </NuxtLink>
-      <div class="flex-1" />
-      <!-- When not logged in: show Login link (except on login page) -->
-      <NuxtLink
-        v-if="!me && !isLogin"
-        to="/login"
-        class="btn btn-ghost btn-sm btn-primary"
-      >
-        Login
-      </NuxtLink>
-      <!-- Connection status: pulsing dot + tooltip when logged in -->
-      <div
-        v-if="!isLogin && me"
-        class="tooltip tooltip-bottom shrink-0"
-        :data-tip="live ? 'Connected to live updates' : 'Disconnected'"
-      >
-        <span
-          class="inline-flex items-center gap-1.5 text-xs text-base-content/70"
-          :class="live ? 'text-success' : 'text-base-content/50'"
-        >
-          <span
-            class="size-2 rounded-full"
-            :class="live ? 'bg-success animate-pulse' : 'bg-base-content/40'"
-            aria-hidden="true"
-          />
-          {{ live ? 'Live' : 'Offline' }}
-        </span>
-      </div>
-      <!-- User dropdown when logged in: details/summary for reliable click-to-open -->
-      <div v-if="!isLogin && me" class="dropdown dropdown-end">
-        <details ref="userDropdownRef" class="dropdown group">
-          <summary class="btn btn-ghost btn-sm gap-2 cursor-pointer list-none [&::-webkit-details-marker]:hidden">
-            <div class="avatar placeholder">
-              <div class="bg-primary text-primary-content rounded-full w-8">
-                <span class="text-sm font-medium">{{ (me.username || '?')[0].toUpperCase() }}</span>
-              </div>
-            </div>
-            <span class="max-w-[8rem] truncate font-medium hidden sm:inline">{{ me.username }}</span>
-            <svg class="size-4 opacity-70 shrink-0 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-            </svg>
-          </summary>
-          <ul
-            class="dropdown-content menu bg-base-200 rounded-box z-[1100] mt-2 w-52 border border-base-300/50 shadow-xl p-2"
+  <div class="drawer h-screen flex flex-col bg-base-100 overflow-hidden">
+    <input id="nav-drawer" ref="drawerCheckboxRef" type="checkbox" class="drawer-toggle" />
+    <div class="drawer-content flex flex-col h-screen overflow-hidden">
+      <header class="navbar relative z-[1100] bg-base-100/80 backdrop-blur-xl border-b border-base-300/50 px-4 gap-2 shrink-0">
+        <NuxtLink to="/" class="flex items-center gap-2 text-lg font-semibold hover:opacity-80 transition-all duration-200">
+          <icons-icon-map class="size-6 text-primary shrink-0" aria-hidden="true" />
+          <span>{{ title }}</span>
+        </NuxtLink>
+        <div class="flex-1" />
+        <!-- Desktop (md+): Login / connection + user dropdown -->
+        <template v-if="!isLogin">
+          <NuxtLink
+            v-if="!me"
+            to="/login"
+            class="btn btn-ghost btn-sm btn-primary hidden md:inline-flex"
           >
+            Login
+          </NuxtLink>
+          <div
+            v-if="me"
+            class="hidden md:flex items-center gap-2 shrink-0"
+          >
+            <div
+              class="tooltip tooltip-bottom shrink-0"
+              :data-tip="live ? 'Connected to live updates' : 'Disconnected'"
+            >
+              <span
+                class="inline-flex items-center gap-1.5 text-xs text-base-content/70"
+                :class="live ? 'text-success' : 'text-base-content/50'"
+              >
+                <span
+                  class="size-2 rounded-full"
+                  :class="live ? 'bg-success animate-pulse' : 'bg-base-content/40'"
+                  aria-hidden="true"
+                />
+                {{ live ? 'Live' : 'Offline' }}
+              </span>
+            </div>
+            <div class="dropdown dropdown-end">
+              <details ref="userDropdownRef" class="dropdown group">
+                <summary class="btn btn-ghost btn-sm gap-2 cursor-pointer list-none [&::-webkit-details-marker]:hidden">
+                  <div class="avatar placeholder">
+                    <div class="bg-primary text-primary-content rounded-full w-8">
+                      <span class="text-sm font-medium">{{ (me.username || '?')[0].toUpperCase() }}</span>
+                    </div>
+                  </div>
+                  <span class="max-w-[8rem] truncate font-medium">{{ me.username }}</span>
+                  <svg class="size-4 opacity-70 shrink-0 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                  </svg>
+                </summary>
+                <ul
+                  class="dropdown-content menu bg-base-200 rounded-box z-[1100] mt-2 w-52 border border-base-300/50 shadow-xl p-2"
+                >
+                  <li>
+                    <NuxtLink to="/" :class="route.path === '/' ? 'active' : ''" @click="closeDropdown">
+                      <icons-icon-map />
+                      Map
+                    </NuxtLink>
+                  </li>
+                  <li>
+                    <NuxtLink to="/profile" :class="route.path === '/profile' ? 'active' : ''" @click="closeDropdown">
+                      <icons-icon-user />
+                      Profile
+                    </NuxtLink>
+                  </li>
+                  <li v-if="isAdmin">
+                    <NuxtLink to="/admin" :class="route.path.startsWith('/admin') ? 'active' : ''" @click="closeDropdown">
+                      <icons-icon-shield />
+                      Admin
+                    </NuxtLink>
+                  </li>
+                  <li class="menu-divider my-1" />
+                  <li class="[&_.menu-item]:flex [&_.menu-item]:items-center [&_.menu-item]:gap-3">
+                    <label class="flex cursor-pointer items-center gap-3 py-2 px-2 rounded-lg hover:bg-base-300/50 w-full min-h-0">
+                      <icons-icon-sun v-if="!dark" class="size-4 shrink-0 opacity-80" />
+                      <icons-icon-moon v-else class="size-4 shrink-0 opacity-80" />
+                      <span class="flex-1 text-sm">Тёмная тема</span>
+                      <input
+                        type="checkbox"
+                        class="toggle toggle-sm toggle-primary shrink-0"
+                        :checked="dark"
+                        @change="onThemeToggle"
+                      />
+                    </label>
+                  </li>
+                  <li>
+                    <button type="button" class="text-error hover:bg-error/10 rounded-lg" @click="doLogout">
+                      <icons-icon-logout />
+                      Logout
+                    </button>
+                  </li>
+                </ul>
+              </details>
+            </div>
+          </div>
+        </template>
+        <!-- Mobile: hamburger to open drawer -->
+        <label
+          for="nav-drawer"
+          class="btn btn-ghost btn-square md:hidden flex items-center justify-center min-h-[2.75rem] min-w-[2.75rem]"
+          aria-label="Open menu"
+        >
+          <icons-icon-menu class="size-6" />
+        </label>
+      </header>
+      <main class="flex-1 min-h-0 overflow-y-auto relative flex flex-col">
+        <AdminBreadcrumbs v-if="route.path.startsWith('/admin') && route.path !== '/admin'" />
+        <div class="flex-1 min-h-0">
+          <slot />
+        </div>
+      </main>
+      <ToastContainer />
+    </div>
+    <!-- Drawer sidebar (mobile menu) -->
+    <div class="drawer-side z-[1100]">
+      <label for="nav-drawer" aria-label="Close menu" class="drawer-overlay" />
+      <aside class="bg-base-200/95 backdrop-blur-xl min-h-full w-72 p-4 flex flex-col">
+        <!-- Mobile: user + live when logged in -->
+        <div v-if="!isLogin && me" class="flex items-center gap-3 pb-4 mb-2 border-b border-base-300/50">
+          <div class="avatar placeholder">
+            <div class="bg-primary text-primary-content rounded-full w-10">
+              <span class="text-sm font-medium">{{ (me.username || '?')[0].toUpperCase() }}</span>
+            </div>
+          </div>
+          <div class="flex-1 min-w-0">
+            <p class="font-medium truncate">{{ me.username }}</p>
+            <p class="text-xs flex items-center gap-1.5" :class="live ? 'text-success' : 'text-base-content/60'">
+              <span class="size-1.5 rounded-full" :class="live ? 'bg-success animate-pulse' : 'bg-base-content/40'" />
+              {{ live ? 'Live' : 'Offline' }}
+            </p>
+          </div>
+        </div>
+        <ul class="menu p-0 flex-1 text-base">
+          <li v-if="!me && !isLogin">
+            <NuxtLink to="/login" class="min-h-12 touch-manipulation" @click="closeDrawer">
+              Login
+            </NuxtLink>
+          </li>
+          <template v-else>
             <li>
-              <NuxtLink to="/" :class="route.path === '/' ? 'active' : ''" @click="closeDropdown">
+              <NuxtLink to="/" :class="route.path === '/' ? 'active' : ''" class="min-h-12 touch-manipulation" @click="closeDrawer">
                 <icons-icon-map />
                 Map
               </NuxtLink>
             </li>
             <li>
-              <NuxtLink to="/profile" :class="route.path === '/profile' ? 'active' : ''" @click="closeDropdown">
+              <NuxtLink to="/profile" :class="route.path === '/profile' ? 'active' : ''" class="min-h-12 touch-manipulation" @click="closeDrawer">
                 <icons-icon-user />
                 Profile
               </NuxtLink>
             </li>
             <li v-if="isAdmin">
-              <NuxtLink to="/admin" :class="route.path.startsWith('/admin') ? 'active' : ''" @click="closeDropdown">
+              <NuxtLink to="/admin" :class="route.path.startsWith('/admin') ? 'active' : ''" class="min-h-12 touch-manipulation" @click="closeDrawer">
                 <icons-icon-shield />
                 Admin
               </NuxtLink>
             </li>
             <li class="menu-divider my-1" />
-            <li class="[&_.menu-item]:flex [&_.menu-item]:items-center [&_.menu-item]:gap-3">
-              <label class="flex cursor-pointer items-center gap-3 py-2 px-2 rounded-lg hover:bg-base-300/50 w-full min-h-0">
+            <li class="[&_.menu-item]:flex [&_.menu-item]:items-center [&_.menu-item]:gap-3 min-h-12">
+              <label class="flex cursor-pointer items-center gap-3 py-3 px-2 rounded-lg hover:bg-base-300/50 w-full min-h-0 touch-manipulation">
                 <icons-icon-sun v-if="!dark" class="size-4 shrink-0 opacity-80" />
                 <icons-icon-moon v-else class="size-4 shrink-0 opacity-80" />
                 <span class="flex-1 text-sm">Тёмная тема</span>
@@ -82,22 +172,15 @@
               </label>
             </li>
             <li>
-              <button type="button" class="text-error hover:bg-error/10 rounded-lg" @click="doLogout">
+              <button type="button" class="text-error hover:bg-error/10 rounded-lg min-h-12 touch-manipulation w-full justify-start" @click="doLogout">
                 <icons-icon-logout />
                 Logout
               </button>
             </li>
-          </ul>
-        </details>
-      </div>
-    </header>
-    <main class="flex-1 min-h-0 overflow-y-auto relative flex flex-col">
-      <AdminBreadcrumbs v-if="route.path.startsWith('/admin')" />
-      <div class="flex-1 min-h-0">
-        <slot />
-      </div>
-    </main>
-    <ToastContainer />
+          </template>
+        </ul>
+      </aside>
+    </div>
   </div>
 </template>
 
@@ -121,11 +204,16 @@ const dark = ref(false)
 const live = ref(false)
 const me = ref<{ username?: string; auths?: string[] } | null>(null)
 const userDropdownRef = ref<HTMLDetailsElement | null>(null)
+const drawerCheckboxRef = ref<HTMLInputElement | null>(null)
 
 function closeDropdown() {
   userDropdownRef.value?.removeAttribute('open')
 }
 
+function closeDrawer() {
+  if (drawerCheckboxRef.value) drawerCheckboxRef.value.checked = false
+}
+
 const { isLoginPath } = useAppPaths()
 const isLogin = computed(() => isLoginPath(route.path))
 const isAdmin = computed(() => !!me.value?.auths?.includes('admin'))
@@ -175,6 +263,7 @@ function applyTheme() {
 
 async function doLogout() {
   await useMapApi().logout()
+  closeDrawer()
   await router.push('/login')
   me.value = null
 }
diff --git a/frontend-nuxt/pages/admin/index.vue b/frontend-nuxt/pages/admin/index.vue
index d2db7f3..993c407 100644
--- a/frontend-nuxt/pages/admin/index.vue
+++ b/frontend-nuxt/pages/admin/index.vue
@@ -1,446 +1,446 @@
-<template>
-  <div class="container mx-auto p-4 max-w-2xl">
-    <h1 class="text-2xl font-bold mb-6">Admin</h1>
-
-    <template v-if="loading">
-      <div class="card bg-base-200 shadow-xl mb-6">
-        <div class="card-body">
-          <Skeleton class="h-6 w-24 mb-4" />
-          <div class="flex flex-col gap-2">
-            <Skeleton v-for="i in 3" :key="i" class="h-12 w-full" />
-            <Skeleton class="h-9 w-28 mt-2" />
-          </div>
-        </div>
-      </div>
-      <div class="card bg-base-200 shadow-xl mb-6">
-        <div class="card-body">
-          <Skeleton class="h-6 w-20 mb-4" />
-          <div class="overflow-x-auto">
-            <Skeleton class="h-32 w-full" />
-          </div>
-        </div>
-      </div>
-      <div class="card bg-base-200 shadow-xl mb-6">
-        <div class="card-body">
-          <Skeleton class="h-6 w-16 mb-4" />
-          <div class="flex flex-col gap-3">
-            <Skeleton class="h-10 w-48" />
-            <Skeleton class="h-10 w-48" />
-            <Skeleton class="h-8 w-36" />
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <template v-else>
-    <!-- Stats -->
-    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
-      <div class="stat bg-base-200 rounded-xl shadow border border-base-300/50 py-4 px-4">
-        <div class="stat-title text-xs">Users</div>
-        <div class="stat-value text-2xl">{{ users.length }}</div>
-      </div>
-      <div class="stat bg-base-200 rounded-xl shadow border border-base-300/50 py-4 px-4">
-        <div class="stat-title text-xs">Maps</div>
-        <div class="stat-value text-2xl">{{ maps.length }}</div>
-      </div>
-    </div>
-
-    <div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
-      <div class="card-body">
-        <h2 class="card-title gap-2">
-          <icons-icon-users />
-          Users
-        </h2>
-        <div class="form-control w-full max-w-xs mb-3">
-          <input
-            v-model="userSearch"
-            type="search"
-            placeholder="Search users…"
-            class="input input-sm input-bordered w-full"
-            aria-label="Search users"
-          />
-        </div>
-          <div class="flex flex-col gap-2">
-            <div
-              v-for="u in filteredUsers"
-              :key="u"
-              class="flex items-center justify-between gap-3 w-full p-3 rounded-lg bg-base-300/50 hover:bg-base-300/70 transition-colors"
-            >
-              <div class="flex items-center gap-2 min-w-0">
-                <div class="avatar avatar-placeholder">
-                  <div class="bg-neutral text-neutral-content rounded-full w-8">
-                    <span class="text-xs">{{ u[0]?.toUpperCase() }}</span>
-                  </div>
-                </div>
-                <span class="font-medium">{{ u }}</span>
-              </div>
-              <NuxtLink :to="`/admin/users/${u}`" class="btn btn-outline btn-sm gap-1 shrink-0">
-                <icons-icon-pencil /> Edit
-              </NuxtLink>
-            </div>
-            <div v-if="!filteredUsers.length" class="py-6 text-center text-base-content/60 rounded-lg bg-base-300/30">
-              {{ userSearch ? 'No users match.' : 'No users yet.' }}
-            </div>
-            <NuxtLink to="/admin/users/new" class="btn btn-primary btn-sm mt-2 gap-1">
-              <icons-icon-plus /> Add user
-            </NuxtLink>
-          </div>
-        </div>
-    </div>
-
-    <div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
-      <div class="card-body">
-        <h2 class="card-title gap-2">
-          <icons-icon-map-pin />
-          Maps
-        </h2>
-        <div class="form-control w-full max-w-xs mb-3">
-          <input
-            v-model="mapSearch"
-            type="search"
-            placeholder="Search maps…"
-            class="input input-sm input-bordered w-full"
-            aria-label="Search maps"
-          />
-        </div>
-          <div class="overflow-x-auto">
-            <table class="table table-sm table-zebra">
-              <thead>
-                <tr>
-                  <th>
-                    <button type="button" class="btn btn-ghost btn-xs gap-0.5" :class="mapsSortBy === 'ID' ? 'btn-active' : ''" @click="setMapsSort('ID')">
-                      ID
-                      <span v-if="mapsSortBy === 'ID'" class="opacity-70">{{ mapsSortDir === 'asc' ? '↑' : '↓' }}</span>
-                    </button>
-                  </th>
-                  <th>
-                    <button type="button" class="btn btn-ghost btn-xs gap-0.5" :class="mapsSortBy === 'Name' ? 'btn-active' : ''" @click="setMapsSort('Name')">
-                      Name
-                      <span v-if="mapsSortBy === 'Name'" class="opacity-70">{{ mapsSortDir === 'asc' ? '↑' : '↓' }}</span>
-                    </button>
-                  </th>
-                  <th>Hidden</th>
-                  <th>Priority</th>
-                  <th class="text-right"></th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="map in sortedFilteredMaps" :key="map.ID" class="hover:bg-base-300">
-                  <td>{{ map.ID }}</td>
-                  <td>{{ map.Name }}</td>
-                  <td>{{ map.Hidden ? 'Yes' : 'No' }}</td>
-                  <td>{{ map.Priority ? 'Yes' : 'No' }}</td>
-                  <td class="text-right">
-                    <NuxtLink :to="`/admin/maps/${map.ID}`" class="btn btn-outline btn-sm gap-1">
-                      <icons-icon-pencil /> Edit
-                    </NuxtLink>
-                  </td>
-                </tr>
-                <tr v-if="!sortedFilteredMaps.length">
-                  <td colspan="5" class="text-base-content/60">{{ mapSearch ? 'No maps match.' : 'No maps.' }}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-      </div>
-    </div>
-
-    <div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
-      <div class="card-body">
-        <h2 class="card-title gap-2">
-          <icons-icon-settings />
-          Settings
-        </h2>
-          <div class="flex flex-col gap-4">
-            <fieldset class="fieldset w-full max-w-xs">
-              <label class="label" for="admin-settings-prefix">Prefix</label>
-              <input
-                id="admin-settings-prefix"
-                v-model="settings.prefix"
-                type="text"
-                class="input input-sm w-full"
-              />
-            </fieldset>
-            <fieldset class="fieldset w-full max-w-xs">
-              <label class="label" for="admin-settings-title">Title</label>
-              <input
-                id="admin-settings-title"
-                v-model="settings.title"
-                type="text"
-                class="input input-sm w-full"
-              />
-            </fieldset>
-            <fieldset class="fieldset">
-              <label class="label gap-2 cursor-pointer justify-start" for="admin-settings-default-hide">
-                <input
-                  id="admin-settings-default-hide"
-                  v-model="settings.defaultHide"
-                  type="checkbox"
-                  class="checkbox checkbox-sm"
-                />
-                Default hide new maps
-              </label>
-            </fieldset>
-          </div>
-          <div class="flex justify-end mt-2">
-            <button class="btn btn-primary btn-sm" :disabled="savingSettings" @click="saveSettings">
-              <span v-if="savingSettings" class="loading loading-spinner loading-sm" />
-              <span v-else>Save settings</span>
-            </button>
-          </div>
-        </div>
-    </div>
-
-    <div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
-      <div class="card-body">
-        <h2 class="card-title gap-2">
-          <icons-icon-alert-triangle />
-          Actions
-        </h2>
-          <div class="flex flex-col gap-3">
-            <div>
-              <a :href="api.adminExportUrl()" target="_blank" rel="noopener" class="btn btn-sm">
-                Export zip
-              </a>
-            </div>
-            <div>
-              <button class="btn btn-sm" :disabled="rebuilding" @click="confirmRebuildZooms">
-                <span v-if="rebuilding" class="loading loading-spinner loading-sm" />
-                <span v-else>Rebuild zooms</span>
-              </button>
-            </div>
-            <div class="flex flex-col gap-2">
-              <div class="flex flex-wrap items-center gap-2">
-                <input ref="mergeFileRef" type="file" accept=".zip" class="hidden" @change="onMergeFile" />
-                <button type="button" class="btn btn-sm" @click="mergeFileRef?.click()">
-                  Choose merge file
-                </button>
-                <span class="text-sm text-base-content/70">
-                  {{ mergeFile ? mergeFile.name : 'No file chosen' }}
-                </span>
-              </div>
-              <form @submit.prevent="doMerge">
-                <button type="submit" class="btn btn-sm btn-primary" :disabled="!mergeFile || merging">
-                  <span v-if="merging" class="loading loading-spinner loading-sm" />
-                  <span v-else>Merge</span>
-                </button>
-              </form>
-            </div>
-            <div class="border-t border-red-500/30 pt-4 mt-1 bg-error/5 rounded-lg p-3 -mx-1">
-              <p class="text-sm font-medium text-error/90 mb-2">Danger zone</p>
-              <button class="btn btn-sm btn-error" :disabled="wiping" @click="confirmWipe">
-                <span v-if="wiping" class="loading loading-spinner loading-sm" />
-                <span v-else>Wipe all data</span>
-              </button>
-            </div>
-          </div>
-      </div>
-    </div>
-
-    <!-- Progress indicator for long operations -->
-    <div
-      v-if="rebuilding || merging || wiping"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-base-100/80 backdrop-blur-sm"
-      aria-live="polite"
-      aria-busy="true"
-    >
-      <div class="flex flex-col items-center gap-4 p-6 rounded-xl bg-base-200 border border-base-300 shadow-2xl">
-        <span class="loading loading-spinner loading-lg text-primary" />
-        <p class="font-medium">
-          {{ rebuilding ? 'Rebuilding zooms…' : merging ? 'Merging…' : 'Wiping data…' }}
-        </p>
-        <p class="text-sm text-base-content/70">This may take a moment.</p>
-      </div>
-    </div>
-
-    <dialog ref="wipeModalRef" class="modal" aria-labelledby="wipe-modal-title">
-      <div class="modal-box">
-        <h2 id="wipe-modal-title" class="font-bold text-lg mb-2">Confirm wipe</h2>
-        <p>Wipe all grids, markers, tiles and maps? This cannot be undone.</p>
-        <div class="modal-action">
-          <form method="dialog">
-            <button class="btn">Cancel</button>
-          </form>
-          <button class="btn btn-error" :disabled="wiping" @click="doWipe">Wipe</button>
-        </div>
-      </div>
-      <form method="dialog" class="modal-backdrop"><button aria-label="Close">Close</button></form>
-    </dialog>
-
-    <dialog ref="rebuildModalRef" class="modal" aria-labelledby="rebuild-modal-title">
-      <div class="modal-box">
-        <h2 id="rebuild-modal-title" class="font-bold text-lg mb-2">Rebuild zooms</h2>
-        <p>Rebuild tile zoom levels for all maps? This may take a while.</p>
-        <div class="modal-action">
-          <form method="dialog">
-            <button class="btn">Cancel</button>
-          </form>
-          <button class="btn btn-primary" :disabled="rebuilding" @click="doRebuildZooms">Rebuild</button>
-        </div>
-      </div>
-      <form method="dialog" class="modal-backdrop"><button aria-label="Close">Close</button></form>
-    </dialog>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({ middleware: 'admin' })
-
-const api = useMapApi()
-const toast = useToast()
-const users = ref<string[]>([])
-const maps = ref<Array<{ ID: number; Name: string; Hidden: boolean; Priority: boolean }>>([])
-const settings = ref({ prefix: '', defaultHide: false, title: '' })
-const savingSettings = ref(false)
-const rebuilding = ref(false)
-const wiping = ref(false)
-const merging = ref(false)
-const mergeFile = ref<File | null>(null)
-const mergeFileRef = ref<HTMLInputElement | null>(null)
-const wipeModalRef = ref<HTMLDialogElement | null>(null)
-const rebuildModalRef = ref<HTMLDialogElement | null>(null)
-const loading = ref(true)
-const userSearch = ref('')
-const mapSearch = ref('')
-const mapsSortBy = ref<'ID' | 'Name'>('ID')
-const mapsSortDir = ref<'asc' | 'desc'>('asc')
-
-const filteredUsers = computed(() => {
-  const q = userSearch.value.trim().toLowerCase()
-  if (!q) return users.value
-  return users.value.filter((u) => u.toLowerCase().includes(q))
-})
-
-const filteredMaps = computed(() => {
-  const q = mapSearch.value.trim().toLowerCase()
-  if (!q) return maps.value
-  return maps.value.filter(
-    (m) =>
-      m.Name.toLowerCase().includes(q) ||
-      String(m.ID).includes(q)
-  )
-})
-
-const sortedFilteredMaps = computed(() => {
-  const list = [...filteredMaps.value]
-  const by = mapsSortBy.value
-  const dir = mapsSortDir.value
-  list.sort((a, b) => {
-    let cmp = 0
-    if (by === 'ID') cmp = a.ID - b.ID
-    else cmp = a.Name.localeCompare(b.Name)
-    return dir === 'asc' ? cmp : -cmp
-  })
-  return list
-})
-
-function setMapsSort(by: 'ID' | 'Name') {
-  if (mapsSortBy.value === by) mapsSortDir.value = mapsSortDir.value === 'asc' ? 'desc' : 'asc'
-  else {
-    mapsSortBy.value = by
-    mapsSortDir.value = 'asc'
-  }
-}
-
-onMounted(async () => {
-  await Promise.all([loadUsers(), loadMaps(), loadSettings()])
-  loading.value = false
-})
-
-async function loadUsers() {
-  try {
-    users.value = await api.adminUsers()
-  } catch {
-    users.value = []
-  }
-}
-
-async function loadMaps() {
-  try {
-    maps.value = await api.adminMaps()
-  } catch {
-    maps.value = []
-  }
-}
-
-async function loadSettings() {
-  try {
-    const s = await api.adminSettings()
-    settings.value = { prefix: s.prefix ?? '', defaultHide: s.defaultHide ?? false, title: s.title ?? '' }
-  } catch {
-    //
-  }
-}
-
-async function saveSettings() {
-  savingSettings.value = true
-  try {
-    await api.adminSettingsPost(settings.value)
-    toast.success('Settings saved.')
-  } catch (e) {
-    toast.error((e as Error)?.message ?? 'Failed to save settings.')
-  } finally {
-    savingSettings.value = false
-  }
-}
-
-function confirmRebuildZooms() {
-  rebuildModalRef.value?.showModal()
-}
-
-async function doRebuildZooms() {
-  rebuildModalRef.value?.close()
-  rebuilding.value = true
-  try {
-    await api.adminRebuildZooms()
-    toast.success('Zooms rebuilt.')
-  } catch (e) {
-    toast.error((e as Error)?.message ?? 'Failed to rebuild zooms.')
-  } finally {
-    rebuilding.value = false
-  }
-}
-
-function confirmWipe() {
-  wipeModalRef.value?.showModal()
-}
-
-async function doWipe() {
-  wiping.value = true
-  try {
-    await api.adminWipe()
-    wipeModalRef.value?.close()
-    await loadMaps()
-    toast.success('All data wiped.')
-  } catch (e) {
-    toast.error((e as Error)?.message ?? 'Failed to wipe.')
-  } finally {
-    wiping.value = false
-  }
-}
-
-function onMergeFile(e: Event) {
-  const input = e.target as HTMLInputElement
-  mergeFile.value = input.files?.[0] ?? null
-}
-
-async function doMerge() {
-  if (!mergeFile.value) return
-  merging.value = true
-  try {
-    const fd = new FormData()
-    fd.append('merge', mergeFile.value)
-    await api.adminMerge(fd)
-    mergeFile.value = null
-    if (mergeFileRef.value) mergeFileRef.value.value = ''
-    await loadMaps()
-    toast.success('Merge completed.')
-  } catch (e) {
-    toast.error((e as Error)?.message ?? 'Merge failed.')
-  } finally {
-    merging.value = false
-  }
-}
-</script>
-
+<template>
+  <div class="container mx-auto p-4 max-w-2xl min-w-0">
+    <h1 class="text-2xl font-bold mb-6">Admin</h1>
+
+    <template v-if="loading">
+      <div class="card bg-base-200 shadow-xl mb-6">
+        <div class="card-body">
+          <Skeleton class="h-6 w-24 mb-4" />
+          <div class="flex flex-col gap-2">
+            <Skeleton v-for="i in 3" :key="i" class="h-12 w-full" />
+            <Skeleton class="h-9 w-28 mt-2" />
+          </div>
+        </div>
+      </div>
+      <div class="card bg-base-200 shadow-xl mb-6">
+        <div class="card-body">
+          <Skeleton class="h-6 w-20 mb-4" />
+          <div class="overflow-x-auto">
+            <Skeleton class="h-32 w-full" />
+          </div>
+        </div>
+      </div>
+      <div class="card bg-base-200 shadow-xl mb-6">
+        <div class="card-body">
+          <Skeleton class="h-6 w-16 mb-4" />
+          <div class="flex flex-col gap-3">
+            <Skeleton class="h-10 w-48" />
+            <Skeleton class="h-10 w-48" />
+            <Skeleton class="h-8 w-36" />
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template v-else>
+    <!-- Stats -->
+    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
+      <div class="stat bg-base-200 rounded-xl shadow border border-base-300/50 py-4 px-4">
+        <div class="stat-title text-xs">Users</div>
+        <div class="stat-value text-2xl">{{ users.length }}</div>
+      </div>
+      <div class="stat bg-base-200 rounded-xl shadow border border-base-300/50 py-4 px-4">
+        <div class="stat-title text-xs">Maps</div>
+        <div class="stat-value text-2xl">{{ maps.length }}</div>
+      </div>
+    </div>
+
+    <div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
+      <div class="card-body">
+        <h2 class="card-title gap-2">
+          <icons-icon-users />
+          Users
+        </h2>
+        <div class="form-control w-full mb-3 sm:max-w-xs">
+          <input
+            v-model="userSearch"
+            type="search"
+            placeholder="Search users…"
+            class="input input-sm input-bordered w-full min-h-11 touch-manipulation"
+            aria-label="Search users"
+          />
+        </div>
+          <div class="flex flex-col gap-2">
+            <div
+              v-for="u in filteredUsers"
+              :key="u"
+              class="flex items-center justify-between gap-3 w-full p-3 rounded-lg bg-base-300/50 hover:bg-base-300/70 transition-colors"
+            >
+              <div class="flex items-center gap-2 min-w-0">
+                <div class="avatar avatar-placeholder">
+                  <div class="bg-neutral text-neutral-content rounded-full w-8">
+                    <span class="text-xs">{{ u[0]?.toUpperCase() }}</span>
+                  </div>
+                </div>
+                <span class="font-medium truncate">{{ u }}</span>
+              </div>
+              <NuxtLink :to="`/admin/users/${u}`" class="btn btn-outline btn-sm gap-1 shrink-0 min-h-11 touch-manipulation">
+                <icons-icon-pencil /> Edit
+              </NuxtLink>
+            </div>
+            <div v-if="!filteredUsers.length" class="py-6 text-center text-base-content/60 rounded-lg bg-base-300/30">
+              {{ userSearch ? 'No users match.' : 'No users yet.' }}
+            </div>
+            <NuxtLink to="/admin/users/new" class="btn btn-primary btn-sm mt-2 gap-1 min-h-11 touch-manipulation">
+              <icons-icon-plus /> Add user
+            </NuxtLink>
+          </div>
+        </div>
+    </div>
+
+    <div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
+      <div class="card-body">
+        <h2 class="card-title gap-2">
+          <icons-icon-map-pin />
+          Maps
+        </h2>
+        <div class="form-control w-full mb-3 sm:max-w-xs">
+          <input
+            v-model="mapSearch"
+            type="search"
+            placeholder="Search maps…"
+            class="input input-sm input-bordered w-full min-h-11 touch-manipulation"
+            aria-label="Search maps"
+          />
+        </div>
+          <div class="overflow-x-auto">
+            <table class="table table-sm table-zebra min-w-[32rem]">
+              <thead>
+                <tr>
+                  <th>
+                    <button type="button" class="btn btn-ghost btn-xs gap-0.5 min-h-9 touch-manipulation" :class="mapsSortBy === 'ID' ? 'btn-active' : ''" @click="setMapsSort('ID')">
+                      ID
+                      <span v-if="mapsSortBy === 'ID'" class="opacity-70">{{ mapsSortDir === 'asc' ? '↑' : '↓' }}</span>
+                    </button>
+                  </th>
+                  <th>
+                    <button type="button" class="btn btn-ghost btn-xs gap-0.5 min-h-9 touch-manipulation" :class="mapsSortBy === 'Name' ? 'btn-active' : ''" @click="setMapsSort('Name')">
+                      Name
+                      <span v-if="mapsSortBy === 'Name'" class="opacity-70">{{ mapsSortDir === 'asc' ? '↑' : '↓' }}</span>
+                    </button>
+                  </th>
+                  <th>Hidden</th>
+                  <th>Priority</th>
+                  <th class="text-right"></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="map in sortedFilteredMaps" :key="map.ID" class="hover:bg-base-300">
+                  <td>{{ map.ID }}</td>
+                  <td>{{ map.Name }}</td>
+                  <td>{{ map.Hidden ? 'Yes' : 'No' }}</td>
+                  <td>{{ map.Priority ? 'Yes' : 'No' }}</td>
+                  <td class="text-right">
+                    <NuxtLink :to="`/admin/maps/${map.ID}`" class="btn btn-outline btn-sm gap-1 min-h-9 touch-manipulation">
+                      <icons-icon-pencil /> Edit
+                    </NuxtLink>
+                  </td>
+                </tr>
+                <tr v-if="!sortedFilteredMaps.length">
+                  <td colspan="5" class="text-base-content/60">{{ mapSearch ? 'No maps match.' : 'No maps.' }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+      </div>
+    </div>
+
+    <div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
+      <div class="card-body">
+        <h2 class="card-title gap-2">
+          <icons-icon-settings />
+          Settings
+        </h2>
+          <div class="flex flex-col gap-4">
+            <fieldset class="fieldset w-full max-w-xs">
+              <label class="label" for="admin-settings-prefix">Prefix</label>
+              <input
+                id="admin-settings-prefix"
+                v-model="settings.prefix"
+                type="text"
+                class="input input-sm w-full min-h-11 touch-manipulation"
+              />
+            </fieldset>
+            <fieldset class="fieldset w-full max-w-xs">
+              <label class="label" for="admin-settings-title">Title</label>
+              <input
+                id="admin-settings-title"
+                v-model="settings.title"
+                type="text"
+                class="input input-sm w-full min-h-11 touch-manipulation"
+              />
+            </fieldset>
+            <fieldset class="fieldset">
+              <label class="label gap-2 cursor-pointer justify-start min-h-11 touch-manipulation" for="admin-settings-default-hide">
+                <input
+                  id="admin-settings-default-hide"
+                  v-model="settings.defaultHide"
+                  type="checkbox"
+                  class="checkbox checkbox-sm"
+                />
+                Default hide new maps
+              </label>
+            </fieldset>
+          </div>
+          <div class="flex justify-end mt-2">
+            <button class="btn btn-primary btn-sm min-h-11 touch-manipulation" :disabled="savingSettings" @click="saveSettings">
+              <span v-if="savingSettings" class="loading loading-spinner loading-sm" />
+              <span v-else>Save settings</span>
+            </button>
+          </div>
+        </div>
+    </div>
+
+    <div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
+      <div class="card-body">
+        <h2 class="card-title gap-2">
+          <icons-icon-alert-triangle />
+          Actions
+        </h2>
+          <div class="flex flex-col gap-3">
+            <div>
+              <a :href="api.adminExportUrl()" target="_blank" rel="noopener" class="btn btn-sm min-h-11 touch-manipulation">
+                Export zip
+              </a>
+            </div>
+            <div>
+              <button class="btn btn-sm min-h-11 touch-manipulation" :disabled="rebuilding" @click="confirmRebuildZooms">
+                <span v-if="rebuilding" class="loading loading-spinner loading-sm" />
+                <span v-else>Rebuild zooms</span>
+              </button>
+            </div>
+            <div class="flex flex-col gap-2">
+              <div class="flex flex-wrap items-center gap-2">
+                <input ref="mergeFileRef" type="file" accept=".zip" class="hidden" @change="onMergeFile" />
+                <button type="button" class="btn btn-sm min-h-11 touch-manipulation" @click="mergeFileRef?.click()">
+                  Choose merge file
+                </button>
+                <span class="text-sm text-base-content/70">
+                  {{ mergeFile ? mergeFile.name : 'No file chosen' }}
+                </span>
+              </div>
+              <form @submit.prevent="doMerge">
+                <button type="submit" class="btn btn-sm btn-primary min-h-11 touch-manipulation" :disabled="!mergeFile || merging">
+                  <span v-if="merging" class="loading loading-spinner loading-sm" />
+                  <span v-else>Merge</span>
+                </button>
+              </form>
+            </div>
+            <div class="border-t border-red-500/30 pt-4 mt-1 bg-error/5 rounded-lg p-3 -mx-1">
+              <p class="text-sm font-medium text-error/90 mb-2">Danger zone</p>
+              <button class="btn btn-sm btn-error min-h-11 touch-manipulation" :disabled="wiping" @click="confirmWipe">
+                <span v-if="wiping" class="loading loading-spinner loading-sm" />
+                <span v-else>Wipe all data</span>
+              </button>
+            </div>
+          </div>
+      </div>
+    </div>
+
+    <!-- Progress indicator for long operations -->
+    <div
+      v-if="rebuilding || merging || wiping"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-base-100/80 backdrop-blur-sm"
+      aria-live="polite"
+      aria-busy="true"
+    >
+      <div class="flex flex-col items-center gap-4 p-6 rounded-xl bg-base-200 border border-base-300 shadow-2xl">
+        <span class="loading loading-spinner loading-lg text-primary" />
+        <p class="font-medium">
+          {{ rebuilding ? 'Rebuilding zooms…' : merging ? 'Merging…' : 'Wiping data…' }}
+        </p>
+        <p class="text-sm text-base-content/70">This may take a moment.</p>
+      </div>
+    </div>
+
+    <dialog ref="wipeModalRef" class="modal" aria-labelledby="wipe-modal-title">
+      <div class="modal-box">
+        <h2 id="wipe-modal-title" class="font-bold text-lg mb-2">Confirm wipe</h2>
+        <p>Wipe all grids, markers, tiles and maps? This cannot be undone.</p>
+        <div class="modal-action">
+          <form method="dialog">
+            <button class="btn">Cancel</button>
+          </form>
+          <button class="btn btn-error" :disabled="wiping" @click="doWipe">Wipe</button>
+        </div>
+      </div>
+      <form method="dialog" class="modal-backdrop"><button aria-label="Close">Close</button></form>
+    </dialog>
+
+    <dialog ref="rebuildModalRef" class="modal" aria-labelledby="rebuild-modal-title">
+      <div class="modal-box">
+        <h2 id="rebuild-modal-title" class="font-bold text-lg mb-2">Rebuild zooms</h2>
+        <p>Rebuild tile zoom levels for all maps? This may take a while.</p>
+        <div class="modal-action">
+          <form method="dialog">
+            <button class="btn">Cancel</button>
+          </form>
+          <button class="btn btn-primary" :disabled="rebuilding" @click="doRebuildZooms">Rebuild</button>
+        </div>
+      </div>
+      <form method="dialog" class="modal-backdrop"><button aria-label="Close">Close</button></form>
+    </dialog>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ middleware: 'admin' })
+
+const api = useMapApi()
+const toast = useToast()
+const users = ref<string[]>([])
+const maps = ref<Array<{ ID: number; Name: string; Hidden: boolean; Priority: boolean }>>([])
+const settings = ref({ prefix: '', defaultHide: false, title: '' })
+const savingSettings = ref(false)
+const rebuilding = ref(false)
+const wiping = ref(false)
+const merging = ref(false)
+const mergeFile = ref<File | null>(null)
+const mergeFileRef = ref<HTMLInputElement | null>(null)
+const wipeModalRef = ref<HTMLDialogElement | null>(null)
+const rebuildModalRef = ref<HTMLDialogElement | null>(null)
+const loading = ref(true)
+const userSearch = ref('')
+const mapSearch = ref('')
+const mapsSortBy = ref<'ID' | 'Name'>('ID')
+const mapsSortDir = ref<'asc' | 'desc'>('asc')
+
+const filteredUsers = computed(() => {
+  const q = userSearch.value.trim().toLowerCase()
+  if (!q) return users.value
+  return users.value.filter((u) => u.toLowerCase().includes(q))
+})
+
+const filteredMaps = computed(() => {
+  const q = mapSearch.value.trim().toLowerCase()
+  if (!q) return maps.value
+  return maps.value.filter(
+    (m) =>
+      m.Name.toLowerCase().includes(q) ||
+      String(m.ID).includes(q)
+  )
+})
+
+const sortedFilteredMaps = computed(() => {
+  const list = [...filteredMaps.value]
+  const by = mapsSortBy.value
+  const dir = mapsSortDir.value
+  list.sort((a, b) => {
+    let cmp = 0
+    if (by === 'ID') cmp = a.ID - b.ID
+    else cmp = a.Name.localeCompare(b.Name)
+    return dir === 'asc' ? cmp : -cmp
+  })
+  return list
+})
+
+function setMapsSort(by: 'ID' | 'Name') {
+  if (mapsSortBy.value === by) mapsSortDir.value = mapsSortDir.value === 'asc' ? 'desc' : 'asc'
+  else {
+    mapsSortBy.value = by
+    mapsSortDir.value = 'asc'
+  }
+}
+
+onMounted(async () => {
+  await Promise.all([loadUsers(), loadMaps(), loadSettings()])
+  loading.value = false
+})
+
+async function loadUsers() {
+  try {
+    users.value = await api.adminUsers()
+  } catch {
+    users.value = []
+  }
+}
+
+async function loadMaps() {
+  try {
+    maps.value = await api.adminMaps()
+  } catch {
+    maps.value = []
+  }
+}
+
+async function loadSettings() {
+  try {
+    const s = await api.adminSettings()
+    settings.value = { prefix: s.prefix ?? '', defaultHide: s.defaultHide ?? false, title: s.title ?? '' }
+  } catch {
+    //
+  }
+}
+
+async function saveSettings() {
+  savingSettings.value = true
+  try {
+    await api.adminSettingsPost(settings.value)
+    toast.success('Settings saved.')
+  } catch (e) {
+    toast.error((e as Error)?.message ?? 'Failed to save settings.')
+  } finally {
+    savingSettings.value = false
+  }
+}
+
+function confirmRebuildZooms() {
+  rebuildModalRef.value?.showModal()
+}
+
+async function doRebuildZooms() {
+  rebuildModalRef.value?.close()
+  rebuilding.value = true
+  try {
+    await api.adminRebuildZooms()
+    toast.success('Zooms rebuilt.')
+  } catch (e) {
+    toast.error((e as Error)?.message ?? 'Failed to rebuild zooms.')
+  } finally {
+    rebuilding.value = false
+  }
+}
+
+function confirmWipe() {
+  wipeModalRef.value?.showModal()
+}
+
+async function doWipe() {
+  wiping.value = true
+  try {
+    await api.adminWipe()
+    wipeModalRef.value?.close()
+    await loadMaps()
+    toast.success('All data wiped.')
+  } catch (e) {
+    toast.error((e as Error)?.message ?? 'Failed to wipe.')
+  } finally {
+    wiping.value = false
+  }
+}
+
+function onMergeFile(e: Event) {
+  const input = e.target as HTMLInputElement
+  mergeFile.value = input.files?.[0] ?? null
+}
+
+async function doMerge() {
+  if (!mergeFile.value) return
+  merging.value = true
+  try {
+    const fd = new FormData()
+    fd.append('merge', mergeFile.value)
+    await api.adminMerge(fd)
+    mergeFile.value = null
+    if (mergeFileRef.value) mergeFileRef.value.value = ''
+    await loadMaps()
+    toast.success('Merge completed.')
+  } catch (e) {
+    toast.error((e as Error)?.message ?? 'Merge failed.')
+  } finally {
+    merging.value = false
+  }
+}
+</script>
+
diff --git a/frontend-nuxt/pages/profile.vue b/frontend-nuxt/pages/profile.vue
index eade2c6..2d2b28a 100644
--- a/frontend-nuxt/pages/profile.vue
+++ b/frontend-nuxt/pages/profile.vue
@@ -1,190 +1,190 @@
-<template>
-  <div class="container mx-auto p-4 max-w-2xl">
-    <h1 class="text-2xl font-bold mb-6">Profile</h1>
-
-    <!-- User info card -->
-    <div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
-      <div class="card-body">
-        <template v-if="initialLoad">
-          <div class="flex items-center gap-4">
-            <Skeleton class="size-14 rounded-full shrink-0" />
-            <div class="flex flex-col gap-2">
-              <Skeleton class="h-6 w-32" />
-              <Skeleton class="h-4 w-48" />
-            </div>
-          </div>
-        </template>
-        <template v-else-if="me">
-          <div class="flex flex-wrap items-center gap-4">
-            <div class="avatar placeholder">
-              <div class="bg-primary text-primary-content rounded-full w-14">
-                <span class="text-2xl font-semibold">{{ (me.username || '?')[0].toUpperCase() }}</span>
-              </div>
-            </div>
-            <div class="flex flex-col gap-1">
-              <h2 class="text-lg font-semibold">{{ me.username }}</h2>
-              <div class="flex flex-wrap gap-1.5">
-                <span
-                  v-for="auth in (me.auths ?? [])"
-                  :key="auth"
-                  class="badge badge-sm badge-outline"
-                >
-                  {{ auth }}
-                </span>
-                <span v-if="!me.auths?.length" class="text-sm text-base-content/60">No roles</span>
-              </div>
-            </div>
-          </div>
-        </template>
-      </div>
-    </div>
-
-    <!-- Upload tokens -->
-    <div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
-      <div class="card-body">
-        <template v-if="initialLoad">
-          <Skeleton class="h-6 w-32 mb-2" />
-          <Skeleton class="h-4 w-full mb-4" />
-          <Skeleton class="h-8 w-full mb-2" />
-          <Skeleton class="h-9 w-36 mt-2" />
-        </template>
-        <template v-else>
-          <h2 class="card-title gap-2">
-            <icons-icon-key />
-            Upload tokens
-          </h2>
-          <p class="text-sm opacity-80">Tokens for upload API. Generate and copy as needed.</p>
-          <ul v-if="tokens?.length" class="list-none mt-2 space-y-2">
-            <li
-              v-for="(t, idx) in tokens"
-              :key="t"
-              class="font-mono text-sm flex flex-wrap items-center gap-2 p-2 rounded-lg bg-base-300/50"
-            >
-              <span class="break-all flex-1 min-w-0">{{ uploadTokenDisplay(t) }}</span>
-              <span class="text-xs text-base-content/60 shrink-0">Token {{ idx + 1 }}</span>
-              <button
-                type="button"
-                class="btn btn-ghost btn-xs shrink-0 gap-1"
-                aria-label="Copy token"
-                :class="copiedToken === t ? 'btn-success' : ''"
-                @click="copyToken(t)"
-              >
-                <template v-if="copiedToken === t">Copied!</template>
-                <template v-else>Copy</template>
-              </button>
-            </li>
-          </ul>
-          <p v-else class="text-sm mt-2">No tokens yet.</p>
-          <p v-if="tokenError" class="text-error text-sm mt-2">{{ tokenError }}</p>
-          <button class="btn btn-primary btn-sm mt-2 transition-all duration-200 hover:scale-[1.02]" :disabled="loadingTokens" @click="generateToken">
-            {{ loadingTokens ? '…' : 'Generate token' }}
-          </button>
-        </template>
-      </div>
-    </div>
-
-    <div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
-      <div class="card-body">
-        <h2 class="card-title gap-2">
-          <icons-icon-settings />
-          Change password
-        </h2>
-        <form @submit.prevent="changePass" class="flex flex-col gap-2">
-          <PasswordInput
-            v-model="newPass"
-            placeholder="New password"
-            autocomplete="new-password"
-          />
-          <p v-if="passMsg" class="text-sm" :class="passOk ? 'text-success' : 'text-error'">{{ passMsg }}</p>
-          <button type="submit" class="btn btn-sm transition-all duration-200 hover:scale-[1.02]" :disabled="loadingPass">Save password</button>
-        </form>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const api = useMapApi()
-const toast = useToast()
-const initialLoad = ref(true)
-const me = ref<{ username?: string; auths?: string[] } | null>(null)
-const tokens = ref<string[]>([])
-const uploadPrefix = ref('')
-const newPass = ref('')
-const loadingTokens = ref(false)
-const loadingPass = ref(false)
-const passMsg = ref('')
-const passOk = ref(false)
-const tokenError = ref('')
-const copiedToken = ref<string | null>(null)
-let copiedTimeout: ReturnType<typeof setTimeout> | null = null
-
-function uploadTokenDisplay(token: string): string {
-  const base = (uploadPrefix.value ?? '').replace(/\/+$/, '')
-  return base ? `${base}/client/${token}` : `client/${token}`
-}
-
-async function copyToken(token: string) {
-  const text = uploadTokenDisplay(token)
-  try {
-    await navigator.clipboard.writeText(text)
-    copiedToken.value = token
-    toast.success('Copied to clipboard', 2000)
-    if (copiedTimeout) clearTimeout(copiedTimeout)
-    copiedTimeout = setTimeout(() => {
-      copiedToken.value = null
-    }, 2000)
-  } catch {
-    toast.error('Failed to copy')
-  }
-}
-
-onMounted(async () => {
-  try {
-    const data = await api.me()
-    me.value = { username: data.username, auths: data.auths }
-    tokens.value = data.tokens ?? []
-    uploadPrefix.value = data.prefix ?? ''
-  } catch {
-    me.value = null
-    tokens.value = []
-    uploadPrefix.value = ''
-  } finally {
-    initialLoad.value = false
-  }
-})
-
-async function generateToken() {
-  tokenError.value = ''
-  loadingTokens.value = true
-  try {
-    await api.meTokens()
-    const me = await api.me()
-    tokens.value = me.tokens ?? []
-    uploadPrefix.value = me.prefix ?? ''
-  } catch (e: unknown) {
-    const msg = e instanceof Error ? e.message : ''
-    tokenError.value = msg === 'Forbidden'
-      ? 'You need "upload" permission to generate tokens. Ask an admin to add it to your account.'
-      : (msg || 'Failed to generate token')
-  } finally {
-    loadingTokens.value = false
-  }
-}
-
-async function changePass() {
-  passMsg.value = ''
-  loadingPass.value = true
-  try {
-    await api.mePassword(newPass.value)
-    passMsg.value = 'Password updated.'
-    passOk.value = true
-    newPass.value = ''
-  } catch (e: unknown) {
-    passMsg.value = e instanceof Error ? e.message : 'Failed'
-    passOk.value = false
-  } finally {
-    loadingPass.value = false
-  }
-}
-</script>
+<template>
+  <div class="container mx-auto p-4 max-w-2xl min-w-0">
+    <h1 class="text-2xl font-bold mb-6">Profile</h1>
+
+    <!-- User info card -->
+    <div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
+      <div class="card-body">
+        <template v-if="initialLoad">
+          <div class="flex items-center gap-4">
+            <Skeleton class="size-14 rounded-full shrink-0" />
+            <div class="flex flex-col gap-2">
+              <Skeleton class="h-6 w-32" />
+              <Skeleton class="h-4 w-48" />
+            </div>
+          </div>
+        </template>
+        <template v-else-if="me">
+          <div class="flex flex-wrap items-center gap-4">
+            <div class="avatar placeholder">
+              <div class="bg-primary text-primary-content rounded-full w-14">
+                <span class="text-2xl font-semibold">{{ (me.username || '?')[0].toUpperCase() }}</span>
+              </div>
+            </div>
+            <div class="flex flex-col gap-1">
+              <h2 class="text-lg font-semibold">{{ me.username }}</h2>
+              <div class="flex flex-wrap gap-1.5">
+                <span
+                  v-for="auth in (me.auths ?? [])"
+                  :key="auth"
+                  class="badge badge-sm badge-outline"
+                >
+                  {{ auth }}
+                </span>
+                <span v-if="!me.auths?.length" class="text-sm text-base-content/60">No roles</span>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <!-- Upload tokens -->
+    <div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
+      <div class="card-body">
+        <template v-if="initialLoad">
+          <Skeleton class="h-6 w-32 mb-2" />
+          <Skeleton class="h-4 w-full mb-4" />
+          <Skeleton class="h-8 w-full mb-2" />
+          <Skeleton class="h-9 w-36 mt-2" />
+        </template>
+        <template v-else>
+          <h2 class="card-title gap-2">
+            <icons-icon-key />
+            Upload tokens
+          </h2>
+          <p class="text-sm opacity-80">Tokens for upload API. Generate and copy as needed.</p>
+          <ul v-if="tokens?.length" class="list-none mt-2 space-y-2">
+            <li
+              v-for="(t, idx) in tokens"
+              :key="t"
+              class="font-mono text-sm flex flex-wrap items-center gap-2 p-2 rounded-lg bg-base-300/50"
+            >
+              <span class="break-all flex-1 min-w-0">{{ uploadTokenDisplay(t) }}</span>
+              <span class="text-xs text-base-content/60 shrink-0">Token {{ idx + 1 }}</span>
+              <button
+                type="button"
+                class="btn btn-ghost btn-xs shrink-0 gap-1 min-h-9 min-w-[4rem] touch-manipulation"
+                aria-label="Copy token"
+                :class="copiedToken === t ? 'btn-success' : ''"
+                @click="copyToken(t)"
+              >
+                <template v-if="copiedToken === t">Copied!</template>
+                <template v-else>Copy</template>
+              </button>
+            </li>
+          </ul>
+          <p v-else class="text-sm mt-2">No tokens yet.</p>
+          <p v-if="tokenError" class="text-error text-sm mt-2">{{ tokenError }}</p>
+          <button class="btn btn-primary btn-sm mt-2 min-h-11 touch-manipulation transition-all duration-200 hover:scale-[1.02]" :disabled="loadingTokens" @click="generateToken">
+            {{ loadingTokens ? '…' : 'Generate token' }}
+          </button>
+        </template>
+      </div>
+    </div>
+
+    <div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
+      <div class="card-body">
+        <h2 class="card-title gap-2">
+          <icons-icon-settings />
+          Change password
+        </h2>
+        <form @submit.prevent="changePass" class="flex flex-col gap-2">
+          <PasswordInput
+            v-model="newPass"
+            placeholder="New password"
+            autocomplete="new-password"
+          />
+          <p v-if="passMsg" class="text-sm" :class="passOk ? 'text-success' : 'text-error'">{{ passMsg }}</p>
+          <button type="submit" class="btn btn-sm min-h-11 touch-manipulation transition-all duration-200 hover:scale-[1.02]" :disabled="loadingPass">Save password</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const api = useMapApi()
+const toast = useToast()
+const initialLoad = ref(true)
+const me = ref<{ username?: string; auths?: string[] } | null>(null)
+const tokens = ref<string[]>([])
+const uploadPrefix = ref('')
+const newPass = ref('')
+const loadingTokens = ref(false)
+const loadingPass = ref(false)
+const passMsg = ref('')
+const passOk = ref(false)
+const tokenError = ref('')
+const copiedToken = ref<string | null>(null)
+let copiedTimeout: ReturnType<typeof setTimeout> | null = null
+
+function uploadTokenDisplay(token: string): string {
+  const base = (uploadPrefix.value ?? '').replace(/\/+$/, '')
+  return base ? `${base}/client/${token}` : `client/${token}`
+}
+
+async function copyToken(token: string) {
+  const text = uploadTokenDisplay(token)
+  try {
+    await navigator.clipboard.writeText(text)
+    copiedToken.value = token
+    toast.success('Copied to clipboard', 2000)
+    if (copiedTimeout) clearTimeout(copiedTimeout)
+    copiedTimeout = setTimeout(() => {
+      copiedToken.value = null
+    }, 2000)
+  } catch {
+    toast.error('Failed to copy')
+  }
+}
+
+onMounted(async () => {
+  try {
+    const data = await api.me()
+    me.value = { username: data.username, auths: data.auths }
+    tokens.value = data.tokens ?? []
+    uploadPrefix.value = data.prefix ?? ''
+  } catch {
+    me.value = null
+    tokens.value = []
+    uploadPrefix.value = ''
+  } finally {
+    initialLoad.value = false
+  }
+})
+
+async function generateToken() {
+  tokenError.value = ''
+  loadingTokens.value = true
+  try {
+    await api.meTokens()
+    const me = await api.me()
+    tokens.value = me.tokens ?? []
+    uploadPrefix.value = me.prefix ?? ''
+  } catch (e: unknown) {
+    const msg = e instanceof Error ? e.message : ''
+    tokenError.value = msg === 'Forbidden'
+      ? 'You need "upload" permission to generate tokens. Ask an admin to add it to your account.'
+      : (msg || 'Failed to generate token')
+  } finally {
+    loadingTokens.value = false
+  }
+}
+
+async function changePass() {
+  passMsg.value = ''
+  loadingPass.value = true
+  try {
+    await api.mePassword(newPass.value)
+    passMsg.value = 'Password updated.'
+    passOk.value = true
+    newPass.value = ''
+  } catch (e: unknown) {
+    passMsg.value = e instanceof Error ? e.message : 'Failed'
+    passOk.value = false
+  } finally {
+    loadingPass.value = false
+  }
+}
+</script>
diff --git a/frontend-nuxt/plugins/suppress-leaflet-deprecation.client.ts b/frontend-nuxt/plugins/suppress-leaflet-deprecation.client.ts
new file mode 100644
index 0000000..c9c27cc
--- /dev/null
+++ b/frontend-nuxt/plugins/suppress-leaflet-deprecation.client.ts
@@ -0,0 +1,22 @@
+/**
+ * Suppress known Firefox deprecation warnings from Leaflet when panning/dragging the map.
+ * See: https://github.com/Leaflet/Leaflet/issues/7078, https://github.com/Leaflet/Leaflet/issues/9386
+ * No ill effect; Leaflet has not fixed this upstream.
+ */
+export default defineNuxtPlugin(() => {
+  if (import.meta.dev && typeof console !== 'undefined' && console.warn) {
+    const originalWarn = console.warn
+    console.warn = function (...args: unknown[]) {
+      const msg = typeof args[0] === 'string' ? args[0] : String(args[0])
+      if (
+        msg.includes('mozPressure') ||
+        msg.includes('mozInputSource') ||
+        msg.includes('PointerEvent.pressure') ||
+        msg.includes('PointerEvent.pointerType')
+      ) {
+        return
+      }
+      originalWarn.apply(console, args)
+    }
+  }
+})