Enhance frontend UI and functionality

- Added page transition effects in app.vue for smoother navigation.
- Updated nuxt.config.ts to include custom font styles and page transitions.
- Improved loading indicators in MapPageWrapper.vue and login.vue for better user experience.
- Enhanced MapView.vue with a collapsible control panel and improved styling.
- Introduced new icons for various components to enhance visual consistency.
- Updated Tailwind CSS configuration to extend font families and improve theme management.
- Refined layout styles in default.vue and admin pages for better responsiveness and aesthetics.
- Implemented error handling and loading states across various forms for improved user feedback.

frontend-nuxt/components/MapPageWrapper.vue

@@ -5,7 +5,15 @@
         <slot />
       </div>
       <template #fallback>
-        <div class="h-screen flex items-center justify-center bg-base-200">Loading map…</div>
+        <div class="h-screen flex flex-col items-center justify-center gap-4 bg-base-200">
+          <span class="loading loading-spinner loading-lg text-primary" />
+          <p class="text-base-content/80 font-medium">Loading map…</p>
+          <div class="flex gap-2">
+            <div class="w-24 h-3 rounded bg-base-300 animate-pulse" />
+            <div class="w-32 h-3 rounded bg-base-300 animate-pulse" />
+            <div class="w-20 h-3 rounded bg-base-300 animate-pulse" />
+          </div>
+        </div>
       </template>
     </ClientOnly>
   </div>

frontend-nuxt/components/MapView.vue

@@ -17,108 +17,138 @@
     <!-- Grid coords & zoom (bottom-right) -->
     <div
       v-if="displayCoords"
-      class="absolute bottom-2 right-2 z-[501] rounded bg-base-100/90 px-2 py-1 font-mono text-xs shadow"
+      class="absolute bottom-2 right-2 z-[501] rounded-lg px-3 py-2 font-mono text-sm bg-base-100/95 backdrop-blur-sm border border-base-300/50 shadow"
       aria-label="Current grid position and zoom"
+      title="mapId · x, y · zoom"
     >
       {{ mapid }} · {{ displayCoords.x }}, {{ displayCoords.y }} · z{{ displayCoords.z }}
     </div>
     <!-- Control panel -->
-    <div class="absolute left-3 top-[10%] z-[502] card card-compact bg-base-100 shadow-xl w-56">
-      <div class="card-body p-3 gap-2">
-        <div class="flex flex-col gap-2">
-          <div class="flex items-center gap-1">
-            <button
-              type="button"
-              class="btn btn-neutral btn-sm btn-square"
-              title="Zoom in"
-              aria-label="Zoom in"
-              @click="zoomIn"
-            >
-              +
-            </button>
-            <button
-              type="button"
-              class="btn btn-neutral btn-sm btn-square"
-              title="Zoom out"
-              aria-label="Zoom out"
-              @click="zoomOutControl"
-            >
-              −
-            </button>
-          </div>
-          <label class="label cursor-pointer justify-start gap-2 py-0">
-            <input v-model="showGridCoordinates" type="checkbox" class="checkbox checkbox-sm" />
-            <span class="label-text">Show grid coordinates</span>
-          </label>
-          <label class="label cursor-pointer justify-start gap-2 py-0">
-            <input v-model="hideMarkers" type="checkbox" class="checkbox checkbox-sm" />
-            <span class="label-text">Hide markers</span>
-          </label>
-          <button
-            type="button"
-            class="btn btn-neutral btn-sm"
-            title="Center map and minimum zoom"
-            @click="zoomOut"
-          >
-            Reset view
-          </button>
-          <div class="form-control">
-            <label class="label py-0"><span class="label-text">Jump to Map</span></label>
-            <select v-model="selectedMapId" class="select select-bordered select-sm w-full">
-              <option :value="null">Select map</option>
-              <option v-for="m in maps" :key="m.ID" :value="m.ID">{{ m.Name }}</option>
-            </select>
-          </div>
-          <div class="form-control">
-            <label class="label py-0"><span class="label-text">Overlay Map</span></label>
-            <select v-model="overlayMapId" class="select select-bordered select-sm w-full">
-              <option :value="-1">None</option>
-              <option v-for="m in maps" :key="'overlay-' + m.ID" :value="m.ID">{{ m.Name }}</option>
-            </select>
-          </div>
-          <div class="form-control">
-            <label class="label py-0"><span class="label-text">Jump to Quest Giver</span></label>
-            <select v-model="selectedMarkerId" class="select select-bordered select-sm w-full">
-              <option :value="null">Select quest giver</option>
-              <option v-for="q in questGivers" :key="q.id" :value="q.id">{{ q.name }}</option>
-            </select>
-          </div>
-          <div class="form-control">
-            <label class="label py-0"><span class="label-text">Jump to Player</span></label>
-            <select v-model="selectedPlayerId" class="select select-bordered select-sm w-full">
-              <option :value="null">Select player</option>
-              <option v-for="p in players" :key="p.id" :value="p.id">{{ p.name }}</option>
-            </select>
-          </div>
+    <div
+      class="absolute left-3 top-[10%] z-[502] flex 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 transition-all duration-300 flex flex-col"
+        :class="panelCollapsed ? 'w-12 items-center py-2' : 'w-56'"
+      >
+        <div v-show="!panelCollapsed" class="flex flex-col p-4 gap-4 flex-1 min-w-0">
+            <!-- Zoom -->
+            <section class="flex flex-col gap-2">
+              <h3 class="text-xs font-semibold uppercase tracking-wider text-base-content/70">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="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="zoomOutControl"
+                >
+                  <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="zoomOut"
+                >
+                  <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">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 class="label-text">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 class="label-text">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">Navigation</h3>
+              <div class="form-control">
+                <label class="label py-0"><span class="label-text">Jump to Map</span></label>
+                <select v-model="selectedMapId" class="select select-bordered select-sm w-full focus:ring-2 focus:ring-primary">
+                  <option :value="null">Select map</option>
+                  <option v-for="m in maps" :key="m.ID" :value="m.ID">{{ m.Name }}</option>
+                </select>
+              </div>
+              <div class="form-control">
+                <label class="label py-0"><span class="label-text">Overlay Map</span></label>
+                <select v-model="overlayMapId" class="select select-bordered 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>
+              </div>
+              <div class="form-control">
+                <label class="label py-0"><span class="label-text">Jump to Quest Giver</span></label>
+                <select v-model="selectedMarkerId" class="select select-bordered select-sm w-full focus:ring-2 focus:ring-primary">
+                  <option :value="null">Select quest giver</option>
+                  <option v-for="q in questGivers" :key="q.id" :value="q.id">{{ q.name }}</option>
+                </select>
+              </div>
+              <div class="form-control">
+                <label class="label py-0"><span class="label-text">Jump to Player</span></label>
+                <select v-model="selectedPlayerId" class="select select-bordered select-sm w-full focus:ring-2 focus:ring-primary">
+                  <option :value="null">Select player</option>
+                  <option v-for="p in players" :key="p.id" :value="p.id">{{ p.name }}</option>
+                </select>
+              </div>
+            </section>
         </div>
+        <button
+          type="button"
+          class="btn btn-ghost btn-sm btn-square shrink-0 m-1 transition-all duration-200 hover:scale-105"
+          :title="panelCollapsed ? 'Expand panel' : 'Collapse panel'"
+          :aria-label="panelCollapsed ? 'Expand panel' : 'Collapse panel'"
+          @click="panelCollapsed = !panelCollapsed"
+        >
+          <icons-icon-chevron-right v-if="panelCollapsed" />
+          <icons-icon-panel-left v-else />
+        </button>
       </div>
     </div>
     <!-- Context menu (tile) -->
     <div
       v-show="contextMenu.tile.show"
-      class="fixed z-[1000] bg-base-100 shadow-lg rounded-lg border border-base-300 py-1 min-w-[180px]"
+      class="fixed z-[1000] bg-base-100/95 backdrop-blur-xl shadow-xl rounded-lg border border-base-300 py-1 min-w-[180px] transition-opacity duration-150"
       :style="{ left: contextMenu.tile.x + 'px', top: contextMenu.tile.y + 'px' }"
     >
-      <button type="button" class="btn btn-ghost btn-sm w-full justify-start" @click="contextMenu.tile.data && (wipeTile(contextMenu.tile.data), (contextMenu.tile.show = false))">
+      <button type="button" class="btn btn-ghost btn-sm w-full justify-start hover:bg-base-200 transition-colors" @click="contextMenu.tile.data && (wipeTile(contextMenu.tile.data), (contextMenu.tile.show = false))">
         Wipe tile {{ contextMenu.tile.data?.coords?.x }}, {{ contextMenu.tile.data?.coords?.y }}
       </button>
-      <button type="button" class="btn btn-ghost btn-sm w-full justify-start" @click="contextMenu.tile.data && (openCoordSet(contextMenu.tile.data), (contextMenu.tile.show = false))">
+      <button type="button" class="btn btn-ghost btn-sm w-full justify-start hover:bg-base-200 transition-colors" @click="contextMenu.tile.data && (openCoordSet(contextMenu.tile.data), (contextMenu.tile.show = false))">
         Rewrite tile coords
       </button>
     </div>
     <!-- Context menu (marker) -->
     <div
       v-show="contextMenu.marker.show"
-      class="fixed z-[1000] bg-base-100 shadow-lg rounded-lg border border-base-300 py-1 min-w-[180px]"
+      class="fixed z-[1000] bg-base-100/95 backdrop-blur-xl shadow-xl rounded-lg border border-base-300 py-1 min-w-[180px] transition-opacity duration-150"
       :style="{ left: contextMenu.marker.x + 'px', top: contextMenu.marker.y + 'px' }"
     >
-      <button type="button" class="btn btn-ghost btn-sm w-full justify-start" @click="contextMenu.marker.data?.id != null && (hideMarkerById(contextMenu.marker.data.id), (contextMenu.marker.show = false))">
+      <button type="button" class="btn btn-ghost btn-sm w-full justify-start hover:bg-base-200 transition-colors" @click="contextMenu.marker.data?.id != null && (hideMarkerById(contextMenu.marker.data.id), (contextMenu.marker.show = false))">
         Hide marker {{ contextMenu.marker.data?.name }}
       </button>
     </div>
     <!-- Coord-set modal: close via Cancel, backdrop click, or Escape -->
     <dialog ref="coordSetModal" class="modal" @cancel="closeCoordSetModal">
-      <div class="modal-box" @click.stop>
+      <div class="modal-box transition-all duration-200" @click.stop>
         <h3 class="font-bold text-lg">Rewrite tile coords</h3>
         <p class="py-2">From ({{ coordSetFrom.x }}, {{ coordSetFrom.y }}) to:</p>
         <div class="flex gap-2">
@@ -162,6 +192,7 @@ const api = useMapApi()
 
 const showGridCoordinates = ref(false)
 const hideMarkers = ref(false)
+const panelCollapsed = ref(false)
 const trackingCharacterId = ref(-1)
 const maps = ref<{ ID: number; Name: string; size?: number }[]>([])
 const mapsLoaded = ref(false)
@@ -361,6 +392,7 @@ onMounted(async () => {
     maxZoom: HnHMaxZoom,
     opacity: 0,
     visible: false,
+    pane: 'tilePane',
   } as any)
   coordLayer.addTo(map)
   coordLayer.setZIndex(500)

frontend-nuxt/components/PasswordInput.vue

@@ -21,7 +21,8 @@
         :aria-label="showPass ? 'Hide password' : 'Show password'"
         @click="showPass = !showPass"
       >
-        {{ showPass ? '🙈' : '👁' }}
+        <icons-icon-eye-off v-if="showPass" />
+        <icons-icon-eye v-else />
       </button>
     </div>
   </div>

frontend-nuxt/components/icons/IconAlertTriangle.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+    <line x1="12" y1="9" x2="12" y2="13" />
+    <line x1="12" y1="17" x2="12.01" y2="17" />
+  </svg>
+</template>

frontend-nuxt/components/icons/IconChevronRight.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="m9 18 6-6-6-6" />
+  </svg>
+</template>

frontend-nuxt/components/icons/IconEye.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+    <circle cx="12" cy="12" r="3" />
+  </svg>
+</template>

frontend-nuxt/components/icons/IconEyeOff.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+    <line x1="1" y1="1" x2="23" y2="23" />
+  </svg>
+</template>

frontend-nuxt/components/icons/IconHome.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+    <polyline points="9 22 9 12 15 12 15 22" />
+  </svg>
+</template>

frontend-nuxt/components/icons/IconKey.vue

@@ -0,0 +1,7 @@
+<template>
+  <!-- Simple key icon (Lucide-style): round head, shaft, teeth -->
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <circle cx="7.5" cy="15.5" r="5.5" />
+    <path d="M12 12l4-4 4 4-4 4" />
+  </svg>
+</template>

frontend-nuxt/components/icons/IconLogout.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+    <polyline points="16 17 21 12 16 7" />
+    <line x1="21" y1="12" x2="9" y2="12" />
+  </svg>
+</template>

frontend-nuxt/components/icons/IconMap.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6" />
+    <line x1="8" y1="2" x2="8" y2="18" />
+    <line x1="16" y1="6" x2="16" y2="22" />
+  </svg>
+</template>

frontend-nuxt/components/icons/IconMapPin.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+    <circle cx="12" cy="10" r="3" />
+  </svg>
+</template>

frontend-nuxt/components/icons/IconMoon.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+  </svg>
+</template>

frontend-nuxt/components/icons/IconPanelLeft.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+    <line x1="9" y1="3" x2="9" y2="21" />
+  </svg>
+</template>

frontend-nuxt/components/icons/IconPanelRight.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+    <line x1="15" y1="3" x2="15" y2="21" />
+  </svg>
+</template>

frontend-nuxt/components/icons/IconPencil.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+    <path d="m15 5 4 4" />
+  </svg>
+</template>

frontend-nuxt/components/icons/IconPlus.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M5 12h14" />
+    <path d="M12 5v14" />
+  </svg>
+</template>

frontend-nuxt/components/icons/IconSettings.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <circle cx="12" cy="12" r="3" />
+    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+  </svg>
+</template>

frontend-nuxt/components/icons/IconShield.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+  </svg>
+</template>

frontend-nuxt/components/icons/IconSun.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <circle cx="12" cy="12" r="4" />
+    <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+  </svg>
+</template>

frontend-nuxt/components/icons/IconUser.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+    <circle cx="12" cy="7" r="4" />
+  </svg>
+</template>

frontend-nuxt/components/icons/IconUsers.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+    <circle cx="9" cy="7" r="4" />
+    <path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
+  </svg>
+</template>

frontend-nuxt/components/icons/IconZoomIn.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <circle cx="11" cy="11" r="8" />
+    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    <line x1="11" y1="8" x2="11" y2="14" />
+    <line x1="8" y1="11" x2="14" y2="11" />
+  </svg>
+</template>

frontend-nuxt/components/icons/IconZoomOut.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <circle cx="11" cy="11" r="8" />
+    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    <line x1="8" y1="11" x2="14" y2="11" />
+  </svg>
+</template>