From 53686f03e7c2e31b672509d05db455bb6e88a40e Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 21 Mar 2025 11:42:38 +0100
Subject: [PATCH] Added more translations

---
 astro.config.mjs                              |  12 +-
 src/components/maps/Map.astro                 |   2 +-
 src/components/maps/MapOverlay.astro          |   4 +-
 src/components/maps/overlay/MarkerCreator.vue |  12 +-
 .../maps/overlay/SearchMapSwitch.vue          | 192 +++++++-----------
 src/components/maps/overlay/SearchMarkers.vue |  42 +++-
 .../maps/overlay/SearchMarkersTags.vue        |  10 +-
 src/i18n/store.ts                             |   6 +-
 src/i18n/ui.ts                                |  50 ++++-
 src/i18n/utils.ts                             |   2 +-
 10 files changed, 188 insertions(+), 144 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index c060e789..88d664e2 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,11 +1,21 @@
 import { defineConfig } from 'astro/config';
 
+import { availableLangs, defaultLang } from './src/i18n/ui';
+
 import vue from "@astrojs/vue";
 import sitemap from "@astrojs/sitemap";
 
+
 // https://astro.build/config
 export default defineConfig({
   integrations: [vue(), sitemap()],
   output: 'static',
-  site: 'https://maps.alexcreates.fr'
+  site: 'https://maps.alexcreates.fr',
+  i18n: {
+    locales: availableLangs,
+    defaultLocale: defaultLang,
+    routing: {
+        prefixDefaultLocale: true,
+    }
+  }
 });
diff --git a/src/components/maps/Map.astro b/src/components/maps/Map.astro
index 9adbf8ec..78642d75 100644
--- a/src/components/maps/Map.astro
+++ b/src/components/maps/Map.astro
@@ -22,7 +22,7 @@ const {
 <div class="world-wrapper">
     <div id="world"></div>
 
-    <MarkerCreator client:visible mapKey={mapKey} />
+    <MarkerCreator client:only="vue" mapKey={mapKey} />
 </div>
 
 <script
diff --git a/src/components/maps/MapOverlay.astro b/src/components/maps/MapOverlay.astro
index 4743810f..b93ce81c 100644
--- a/src/components/maps/MapOverlay.astro
+++ b/src/components/maps/MapOverlay.astro
@@ -21,7 +21,9 @@ const {
 ---
 
 <div class="world-overlay">
-    <SearchMarkers client:visible mapKey={mapKey} markers={markers} players={players} searchConfig={searchConfig} />
+    <SearchMarkers client:only="vue" mapKey={mapKey} markers={markers} players={players} searchConfig={searchConfig} >
+        <div slot="fallback" style="height: 45px;"></div>
+    </SearchMarkers>
 
     <MapOverlayBreadcrumbs breadcrumbs={breadcrumbs} />
 </div>
diff --git a/src/components/maps/overlay/MarkerCreator.vue b/src/components/maps/overlay/MarkerCreator.vue
index 9e26da03..bfa38761 100644
--- a/src/components/maps/overlay/MarkerCreator.vue
+++ b/src/components/maps/overlay/MarkerCreator.vue
@@ -3,6 +3,8 @@ import type { MapMarker } from '@/types/Leaflet';
 import { onClickOutside, useCssVar, useLocalStorage, useMouse } from '@vueuse/core'
 import { computed, onMounted, ref, watch } from 'vue'
 
+import { t } from '@/i18n/store';
+
 const markerMenu = ref<HTMLMenuElement>()
 
 type MenuMode = "editing-marker" | "default"
@@ -194,7 +196,7 @@ function setTitleError(error: Error | null) {
             <menu v-show="shouldBeShown" ref="markerMenu">
                 <li>
                     <button @click="switchMenuMode('editing-marker')">
-                        Nouveau marqueur
+                        {{ t('maps.markers.new') }}
                     </button>
                 </li>
             </menu>
@@ -204,18 +206,18 @@ function setTitleError(error: Error | null) {
             <form @submit.prevent="handleAddCustomMarker">
                 <div class="modal-head">
                     <h2>
-                        Ajouter un marqueur personnel
+                        {{ t('maps.markers.addPersonal') }}
                     </h2>
                     <p class="modal-notice">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="icon"><rect width="256" height="256" fill="none"/><path d="M142.41,40.22l87.46,151.87C236,202.79,228.08,216,215.46,216H40.54C27.92,216,20,202.79,26.13,192.09L113.59,40.22C119.89,29.26,136.11,29.26,142.41,40.22Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><line x1="128" y1="144" x2="128" y2="104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><circle cx="128" cy="180" r="10"/></svg>
-                        <span>Le marqueur sera sauvegardé mais n'apparaîtra que sur votre carte !</span>
+                        <span>{{ t('maps.markers.newNotice') }}</span>
                     </p>
                 </div>
 
                 <div class="modal-body">
                     <div class="form-group">
                         <label for="marker-name">
-                            Titre
+                            {{ t('common.title') }}
                         </label>
 
                         <div class="form-input">
@@ -235,7 +237,7 @@ function setTitleError(error: Error | null) {
                         class="btn btn-secondary"
                         :disabled="!markerTitle"
                     >
-                        <span>Créer</span>
+                        <span>{{ t('common.create') }}</span>
                     </button>
                 </div>
             </form>
diff --git a/src/components/maps/overlay/SearchMapSwitch.vue b/src/components/maps/overlay/SearchMapSwitch.vue
index 63fbee84..bafbb941 100644
--- a/src/components/maps/overlay/SearchMapSwitch.vue
+++ b/src/components/maps/overlay/SearchMapSwitch.vue
@@ -5,6 +5,7 @@ import { PopoverArrow, PopoverContent, PopoverRoot, PopoverTrigger } from 'radix
 import { useStore } from '@nanostores/vue';
 
 import { currentLang } from '@/i18n/store';
+import { t } from '@/i18n/store';
 
 const $currentLang = useStore(currentLang);
 
@@ -30,6 +31,11 @@ onUpdated(() => {
     url = new URL(window.location.href)
 })
 
+interface Menu {
+    name: string,
+    items: MenuItem[]
+}
+
 interface MenuItem {
     name: string,
     img: string,
@@ -37,45 +43,49 @@ interface MenuItem {
     newItem?: boolean
 }
 
-const worldMenuItems: MenuItem[] = [
+const menus: Menu[] = [
     {
-        name: 'Aldys',
-        img: '/images/aldys-cover.png',
-        url: `/${$currentLang.value}/`
+        name: t('continents'),
+        items: [
+            {
+                name: 'Aldys',
+                img: '/images/aldys-cover.png',
+                url: `/${$currentLang.value}/`
+            },
+            {
+                name: 'Bamast',
+                img: '/images/bamast-cover.png',
+                url: `/${$currentLang.value}/bamast`
+            }
+        ]
     },
     {
-        name: 'Bamast',
-        img: '/images/bamast-cover.png',
-        url: `/${$currentLang.value}/bamast`
+        name: t('cities'),
+        items: [
+            {
+                name: 'Borélis',
+                img: '/images/aldys-borelis-cover.png',
+                url: `/${$currentLang.value}/aldys/borelis`
+            },
+            {
+                name: 'Cantane',
+                img: '/images/aldys-cantane-cover.png',
+                url: `/${$currentLang.value}/aldys/cantane`
+            },
+        ]
+    },
+    {
+        name: t('others'),
+        items: [
+            {
+                name: 'Mines Blanches',
+                img: '/images/aldys-cantane-mines-blanches-cover.png',
+                url: `/${$currentLang.value}/aldys/cantane/mines-blanches`,
+                newItem: true
+            },
+        ]
     }
 ]
-
-const cityMenuItems: MenuItem[] = [
-    // {
-    //     name: 'Ambrose',
-    //     img: '/images/aldys-cover.png',
-    //     url: '/aldys/ambrose'
-    // },
-    {
-        name: 'Borélis',
-        img: '/images/aldys-borelis-cover.png',
-        url: `/${$currentLang.value}/aldys/borelis`
-    },
-    {
-        name: 'Cantane',
-        img: '/images/aldys-cantane-cover.png',
-        url: `/${$currentLang.value}/aldys/cantane`
-    },
-]
-
-const extraMenuitems: MenuItem[] = [
-    {
-        name: 'Mines Blanches',
-        img: '/images/aldys-cantane-mines-blanches-cover.png',
-        url: `/${$currentLang.value}/aldys/cantane/mines-blanches`,
-        newItem: true
-    },
-]
 </script>
 
 <template>
@@ -89,95 +99,37 @@ const extraMenuitems: MenuItem[] = [
             <PopoverContent side="bottom" :side-offset="6" :collision-padding="10" class="card" style="z-index: 100;">
                 <PopoverArrow class="card-arrow" />
 
-                <div class="menu-title">
-                    Continents
-                </div>
+                <template v-for="menu in menus">
+                    <div class="menu-title">
+                        {{ menu.name }}
+                    </div>
 
-                <menu class="map-menu">
-                    <li v-for="item in worldMenuItems" :key="item.name">
-                        <a
-                            :href="item.url"
-                            :class="{ 'active': url?.pathname === item.url }"
-                            :tabindex="url?.pathname === item.url ? -1 : 0"
-                            :title="item.newItem ? 'Nouveau' : ''"
-                        >
-                            <figure>
-                                <div class="img-wrapper">
-                                    <img :src="item.img" alt="" width="40" height="40" loading="eager">
+                    <menu class="map-menu">
+                        <li v-for="item in menu.items" :key="item.name">
+                            <a
+                                :href="item.url"
+                                :class="{ 'active': url?.pathname === item.url }"
+                                :tabindex="url?.pathname === item.url ? -1 : 0"
+                                :title="item.newItem ? 'Nouveau' : ''"
+                            >
+                                <figure>
+                                    <div class="img-wrapper">
+                                        <img :src="item.img" alt="" width="40" height="40" loading="eager">
 
-                                    <svg v-if="item.newItem" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 256 256">
-                                        <path class="fill" d="M112.1,255c-3.6,0-7.2-.6-10.7-1.9-8.5-3.1-15.2-9.8-18.3-18.3l-16.7-45.1-45.1-16.6c-16-5.9-24.2-23.7-18.3-39.7,3.1-8.5,9.8-15.2,18.3-18.3l45.1-16.7,16.6-45.1c4.5-12.1,16.1-20.2,29-20.2s7.2.6,10.7,1.9c2.3.8,4.5,1.9,6.5,3.3,1-11.8,10.9-21.1,22.9-21.1h1v-1c0-12.7,10.3-23,23-23s23,10.3,23,23v1h1c12.7,0,23,10.3,23,23s-.7,6.4-1.9,9.2c1-.1,1.9-.2,2.9-.2,10.5,0,19.5,7.1,22.2,16.8,9.7,2.7,16.8,11.6,16.8,22.2s-7.1,19.5-16.8,22.2c-2.7,9.7-11.6,16.8-22.2,16.8s-4.6-.3-6.7-1c3.7,5.2,5.7,11.4,5.7,18,0,12.9-8.1,24.6-20.3,29l-45.1,16.6-16.6,45.1c-4.5,12.1-16.1,20.2-29,20.2ZM202.8,114.9c.4.2.8.3,1.2.5-.9-1.6-1.7-3.4-2.2-5.2-9.7-2.7-16.8-11.6-16.8-22.2s0-2,.2-2.9c-2.8,1.2-5.9,1.9-9.2,1.9-12.7,0-23-10.3-23-23v-1h-1c-2.8,0-5.5-.5-7.9-1.4l13.6,36.7,45.1,16.6ZM199,64c0,1,0,2-.2,2.9,1-.4,2-.8,3-1.1.3-1,.6-2,1.1-3-1,.1-1.9.2-2.9.2h-1v1Z"/>
-                                        <path class="stroke" d="M176,8c4.4,0,8,3.6,8,8v16h16c4.4,0,8,3.6,8,8s-3.6,8-8,8h-16v16c0,4.4-3.6,8-8,8s-8-3.6-8-8v-16h-16c-4.4,0-8-3.6-8-8s3.6-8,8-8h16v-16c0-4.4,3.6-8,8-8M111.9,48c1.8,0,3.7.3,5.5,1,4.4,1.6,7.8,5.1,9.4,9.4l19.1,51.6,51.6,19c6.3,2.3,10.5,8.3,10.4,15,0,6.7-4.1,12.7-10.4,14.9l-51.6,19.1-19,51.6c-2.4,6.4-8.5,10.4-14.9,10.4s-3.7-.3-5.5-1c-4.4-1.6-7.8-5.1-9.4-9.4l-19.1-51.6-51.6-19c-8.3-3-12.5-12.2-9.4-20.4,1.6-4.4,5.1-7.8,9.4-9.4l51.6-19.1,19-51.6c2.4-6.4,8.5-10.4,14.9-10.4M224,64c4.4,0,8,3.6,8,8v8h8c4.4,0,8,3.6,8,8s-3.6,8-8,8h-8v8c0,4.4-3.6,8-8,8s-8-3.6-8-8v-8h-8c-4.4,0-8-3.6-8-8s3.6-8,8-8h8v-8c0-4.4,3.6-8,8-8M176-22c-16.7,0-31,10.9-36,26-8,2.7-14.8,7.9-19.5,14.8-2.8-.5-5.7-.8-8.6-.8h0c-19.2,0-36.5,12.1-43.1,30.1l-14.2,38.7-38.6,14.3c-12.6,4.7-22.6,14.6-27.2,27.2-8.7,23.8,3.5,50.2,27.2,59l38.7,14.2,14.3,38.7c4.7,12.6,14.6,22.5,27.2,27.2,5.1,1.9,10.4,2.8,15.9,2.8,19.2,0,36.5-12.1,43.1-30.1l14.2-38.6,38.5-14.2c18-6.6,30.1-23.8,30.1-43,0-1.6,0-3.1-.2-4.7,8.6-3.3,15.6-9.7,19.9-17.8,12.1-6.4,20.4-19.1,20.4-33.6s-8.3-27.3-20.4-33.6c-4.2-8-11.3-14.4-19.8-17.7-1.4-15.3-11.8-28-25.8-32.7-5-15.1-19.3-26-36-26h0Z"/>
-                                    </svg>
-                                </div>
+                                        <svg v-if="item.newItem" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 256 256">
+                                            <path class="fill" d="M112.1,255c-3.6,0-7.2-.6-10.7-1.9-8.5-3.1-15.2-9.8-18.3-18.3l-16.7-45.1-45.1-16.6c-16-5.9-24.2-23.7-18.3-39.7,3.1-8.5,9.8-15.2,18.3-18.3l45.1-16.7,16.6-45.1c4.5-12.1,16.1-20.2,29-20.2s7.2.6,10.7,1.9c2.3.8,4.5,1.9,6.5,3.3,1-11.8,10.9-21.1,22.9-21.1h1v-1c0-12.7,10.3-23,23-23s23,10.3,23,23v1h1c12.7,0,23,10.3,23,23s-.7,6.4-1.9,9.2c1-.1,1.9-.2,2.9-.2,10.5,0,19.5,7.1,22.2,16.8,9.7,2.7,16.8,11.6,16.8,22.2s-7.1,19.5-16.8,22.2c-2.7,9.7-11.6,16.8-22.2,16.8s-4.6-.3-6.7-1c3.7,5.2,5.7,11.4,5.7,18,0,12.9-8.1,24.6-20.3,29l-45.1,16.6-16.6,45.1c-4.5,12.1-16.1,20.2-29,20.2ZM202.8,114.9c.4.2.8.3,1.2.5-.9-1.6-1.7-3.4-2.2-5.2-9.7-2.7-16.8-11.6-16.8-22.2s0-2,.2-2.9c-2.8,1.2-5.9,1.9-9.2,1.9-12.7,0-23-10.3-23-23v-1h-1c-2.8,0-5.5-.5-7.9-1.4l13.6,36.7,45.1,16.6ZM199,64c0,1,0,2-.2,2.9,1-.4,2-.8,3-1.1.3-1,.6-2,1.1-3-1,.1-1.9.2-2.9.2h-1v1Z"/>
+                                            <path class="stroke" d="M176,8c4.4,0,8,3.6,8,8v16h16c4.4,0,8,3.6,8,8s-3.6,8-8,8h-16v16c0,4.4-3.6,8-8,8s-8-3.6-8-8v-16h-16c-4.4,0-8-3.6-8-8s3.6-8,8-8h16v-16c0-4.4,3.6-8,8-8M111.9,48c1.8,0,3.7.3,5.5,1,4.4,1.6,7.8,5.1,9.4,9.4l19.1,51.6,51.6,19c6.3,2.3,10.5,8.3,10.4,15,0,6.7-4.1,12.7-10.4,14.9l-51.6,19.1-19,51.6c-2.4,6.4-8.5,10.4-14.9,10.4s-3.7-.3-5.5-1c-4.4-1.6-7.8-5.1-9.4-9.4l-19.1-51.6-51.6-19c-8.3-3-12.5-12.2-9.4-20.4,1.6-4.4,5.1-7.8,9.4-9.4l51.6-19.1,19-51.6c2.4-6.4,8.5-10.4,14.9-10.4M224,64c4.4,0,8,3.6,8,8v8h8c4.4,0,8,3.6,8,8s-3.6,8-8,8h-8v8c0,4.4-3.6,8-8,8s-8-3.6-8-8v-8h-8c-4.4,0-8-3.6-8-8s3.6-8,8-8h8v-8c0-4.4,3.6-8,8-8M176-22c-16.7,0-31,10.9-36,26-8,2.7-14.8,7.9-19.5,14.8-2.8-.5-5.7-.8-8.6-.8h0c-19.2,0-36.5,12.1-43.1,30.1l-14.2,38.7-38.6,14.3c-12.6,4.7-22.6,14.6-27.2,27.2-8.7,23.8,3.5,50.2,27.2,59l38.7,14.2,14.3,38.7c4.7,12.6,14.6,22.5,27.2,27.2,5.1,1.9,10.4,2.8,15.9,2.8,19.2,0,36.5-12.1,43.1-30.1l14.2-38.6,38.5-14.2c18-6.6,30.1-23.8,30.1-43,0-1.6,0-3.1-.2-4.7,8.6-3.3,15.6-9.7,19.9-17.8,12.1-6.4,20.4-19.1,20.4-33.6s-8.3-27.3-20.4-33.6c-4.2-8-11.3-14.4-19.8-17.7-1.4-15.3-11.8-28-25.8-32.7-5-15.1-19.3-26-36-26h0Z"/>
+                                        </svg>
+                                    </div>
 
-                                <figcaption>
-                                    {{ item.name }}
-                                </figcaption>
-                            </figure>
-                        </a>
-                    </li>
-                </menu>
-
-                <div class="menu-title">
-                    Villes
-                </div>
-
-                <menu class="map-menu">
-                    <li v-for="item in cityMenuItems" :key="item.name">
-                        <a
-                            :href="item.url"
-                            :class="{ 'active': url?.pathname === item.url }"
-                            :tabindex="url?.pathname === item.url ? -1 : 0"
-                            :title="item.newItem ? 'Nouveau' : ''"
-                        >
-                            <figure>
-                                <div class="img-wrapper">
-                                    <img :src="item.img" alt="" width="40" height="40" loading="eager">
-
-                                    <svg v-if="item.newItem" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 256 256">
-                                        <path class="fill" d="M112.1,255c-3.6,0-7.2-.6-10.7-1.9-8.5-3.1-15.2-9.8-18.3-18.3l-16.7-45.1-45.1-16.6c-16-5.9-24.2-23.7-18.3-39.7,3.1-8.5,9.8-15.2,18.3-18.3l45.1-16.7,16.6-45.1c4.5-12.1,16.1-20.2,29-20.2s7.2.6,10.7,1.9c2.3.8,4.5,1.9,6.5,3.3,1-11.8,10.9-21.1,22.9-21.1h1v-1c0-12.7,10.3-23,23-23s23,10.3,23,23v1h1c12.7,0,23,10.3,23,23s-.7,6.4-1.9,9.2c1-.1,1.9-.2,2.9-.2,10.5,0,19.5,7.1,22.2,16.8,9.7,2.7,16.8,11.6,16.8,22.2s-7.1,19.5-16.8,22.2c-2.7,9.7-11.6,16.8-22.2,16.8s-4.6-.3-6.7-1c3.7,5.2,5.7,11.4,5.7,18,0,12.9-8.1,24.6-20.3,29l-45.1,16.6-16.6,45.1c-4.5,12.1-16.1,20.2-29,20.2ZM202.8,114.9c.4.2.8.3,1.2.5-.9-1.6-1.7-3.4-2.2-5.2-9.7-2.7-16.8-11.6-16.8-22.2s0-2,.2-2.9c-2.8,1.2-5.9,1.9-9.2,1.9-12.7,0-23-10.3-23-23v-1h-1c-2.8,0-5.5-.5-7.9-1.4l13.6,36.7,45.1,16.6ZM199,64c0,1,0,2-.2,2.9,1-.4,2-.8,3-1.1.3-1,.6-2,1.1-3-1,.1-1.9.2-2.9.2h-1v1Z"/>
-                                        <path class="stroke" d="M176,8c4.4,0,8,3.6,8,8v16h16c4.4,0,8,3.6,8,8s-3.6,8-8,8h-16v16c0,4.4-3.6,8-8,8s-8-3.6-8-8v-16h-16c-4.4,0-8-3.6-8-8s3.6-8,8-8h16v-16c0-4.4,3.6-8,8-8M111.9,48c1.8,0,3.7.3,5.5,1,4.4,1.6,7.8,5.1,9.4,9.4l19.1,51.6,51.6,19c6.3,2.3,10.5,8.3,10.4,15,0,6.7-4.1,12.7-10.4,14.9l-51.6,19.1-19,51.6c-2.4,6.4-8.5,10.4-14.9,10.4s-3.7-.3-5.5-1c-4.4-1.6-7.8-5.1-9.4-9.4l-19.1-51.6-51.6-19c-8.3-3-12.5-12.2-9.4-20.4,1.6-4.4,5.1-7.8,9.4-9.4l51.6-19.1,19-51.6c2.4-6.4,8.5-10.4,14.9-10.4M224,64c4.4,0,8,3.6,8,8v8h8c4.4,0,8,3.6,8,8s-3.6,8-8,8h-8v8c0,4.4-3.6,8-8,8s-8-3.6-8-8v-8h-8c-4.4,0-8-3.6-8-8s3.6-8,8-8h8v-8c0-4.4,3.6-8,8-8M176-22c-16.7,0-31,10.9-36,26-8,2.7-14.8,7.9-19.5,14.8-2.8-.5-5.7-.8-8.6-.8h0c-19.2,0-36.5,12.1-43.1,30.1l-14.2,38.7-38.6,14.3c-12.6,4.7-22.6,14.6-27.2,27.2-8.7,23.8,3.5,50.2,27.2,59l38.7,14.2,14.3,38.7c4.7,12.6,14.6,22.5,27.2,27.2,5.1,1.9,10.4,2.8,15.9,2.8,19.2,0,36.5-12.1,43.1-30.1l14.2-38.6,38.5-14.2c18-6.6,30.1-23.8,30.1-43,0-1.6,0-3.1-.2-4.7,8.6-3.3,15.6-9.7,19.9-17.8,12.1-6.4,20.4-19.1,20.4-33.6s-8.3-27.3-20.4-33.6c-4.2-8-11.3-14.4-19.8-17.7-1.4-15.3-11.8-28-25.8-32.7-5-15.1-19.3-26-36-26h0Z"/>
-                                    </svg>
-                                </div>
-
-                                <figcaption>
-                                    {{ item.name }}
-                                </figcaption>
-                            </figure>
-                        </a>
-                    </li>
-                </menu>
-
-                <div class="menu-title">
-                    Autres
-                </div>
-
-                <menu class="map-menu">
-                    <li v-for="item in extraMenuitems" :key="item.name">
-                        <a
-                            :href="item.url"
-                            :class="{ 'active': url?.pathname === item.url }"
-                            :tabindex="url?.pathname === item.url ? -1 : 0"
-                            :title="item.newItem ? 'Nouveau' : ''"
-                        >
-                            <figure>
-                                <div class="img-wrapper">
-                                    <img :src="item.img" alt="" width="40" height="40" loading="eager">
-
-                                    <svg v-if="item.newItem" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 256 256">
-                                        <path class="fill" d="M112.1,255c-3.6,0-7.2-.6-10.7-1.9-8.5-3.1-15.2-9.8-18.3-18.3l-16.7-45.1-45.1-16.6c-16-5.9-24.2-23.7-18.3-39.7,3.1-8.5,9.8-15.2,18.3-18.3l45.1-16.7,16.6-45.1c4.5-12.1,16.1-20.2,29-20.2s7.2.6,10.7,1.9c2.3.8,4.5,1.9,6.5,3.3,1-11.8,10.9-21.1,22.9-21.1h1v-1c0-12.7,10.3-23,23-23s23,10.3,23,23v1h1c12.7,0,23,10.3,23,23s-.7,6.4-1.9,9.2c1-.1,1.9-.2,2.9-.2,10.5,0,19.5,7.1,22.2,16.8,9.7,2.7,16.8,11.6,16.8,22.2s-7.1,19.5-16.8,22.2c-2.7,9.7-11.6,16.8-22.2,16.8s-4.6-.3-6.7-1c3.7,5.2,5.7,11.4,5.7,18,0,12.9-8.1,24.6-20.3,29l-45.1,16.6-16.6,45.1c-4.5,12.1-16.1,20.2-29,20.2ZM202.8,114.9c.4.2.8.3,1.2.5-.9-1.6-1.7-3.4-2.2-5.2-9.7-2.7-16.8-11.6-16.8-22.2s0-2,.2-2.9c-2.8,1.2-5.9,1.9-9.2,1.9-12.7,0-23-10.3-23-23v-1h-1c-2.8,0-5.5-.5-7.9-1.4l13.6,36.7,45.1,16.6ZM199,64c0,1,0,2-.2,2.9,1-.4,2-.8,3-1.1.3-1,.6-2,1.1-3-1,.1-1.9.2-2.9.2h-1v1Z"/>
-                                        <path class="stroke" d="M176,8c4.4,0,8,3.6,8,8v16h16c4.4,0,8,3.6,8,8s-3.6,8-8,8h-16v16c0,4.4-3.6,8-8,8s-8-3.6-8-8v-16h-16c-4.4,0-8-3.6-8-8s3.6-8,8-8h16v-16c0-4.4,3.6-8,8-8M111.9,48c1.8,0,3.7.3,5.5,1,4.4,1.6,7.8,5.1,9.4,9.4l19.1,51.6,51.6,19c6.3,2.3,10.5,8.3,10.4,15,0,6.7-4.1,12.7-10.4,14.9l-51.6,19.1-19,51.6c-2.4,6.4-8.5,10.4-14.9,10.4s-3.7-.3-5.5-1c-4.4-1.6-7.8-5.1-9.4-9.4l-19.1-51.6-51.6-19c-8.3-3-12.5-12.2-9.4-20.4,1.6-4.4,5.1-7.8,9.4-9.4l51.6-19.1,19-51.6c2.4-6.4,8.5-10.4,14.9-10.4M224,64c4.4,0,8,3.6,8,8v8h8c4.4,0,8,3.6,8,8s-3.6,8-8,8h-8v8c0,4.4-3.6,8-8,8s-8-3.6-8-8v-8h-8c-4.4,0-8-3.6-8-8s3.6-8,8-8h8v-8c0-4.4,3.6-8,8-8M176-22c-16.7,0-31,10.9-36,26-8,2.7-14.8,7.9-19.5,14.8-2.8-.5-5.7-.8-8.6-.8h0c-19.2,0-36.5,12.1-43.1,30.1l-14.2,38.7-38.6,14.3c-12.6,4.7-22.6,14.6-27.2,27.2-8.7,23.8,3.5,50.2,27.2,59l38.7,14.2,14.3,38.7c4.7,12.6,14.6,22.5,27.2,27.2,5.1,1.9,10.4,2.8,15.9,2.8,19.2,0,36.5-12.1,43.1-30.1l14.2-38.6,38.5-14.2c18-6.6,30.1-23.8,30.1-43,0-1.6,0-3.1-.2-4.7,8.6-3.3,15.6-9.7,19.9-17.8,12.1-6.4,20.4-19.1,20.4-33.6s-8.3-27.3-20.4-33.6c-4.2-8-11.3-14.4-19.8-17.7-1.4-15.3-11.8-28-25.8-32.7-5-15.1-19.3-26-36-26h0Z"/>
-                                    </svg>
-                                </div>
-
-                                <figcaption>
-                                    {{ item.name }}
-                                </figcaption>
-                            </figure>
-                        </a>
-                    </li>
-                </menu>
+                                    <figcaption>
+                                        {{ item.name }}
+                                    </figcaption>
+                                </figure>
+                            </a>
+                        </li>
+                    </menu>
+                </template>
             </PopoverContent>
         </PopoverRoot>
     </div>
diff --git a/src/components/maps/overlay/SearchMarkers.vue b/src/components/maps/overlay/SearchMarkers.vue
index e9b9ef3c..7ecd3507 100644
--- a/src/components/maps/overlay/SearchMarkers.vue
+++ b/src/components/maps/overlay/SearchMarkers.vue
@@ -7,13 +7,11 @@ import type { MapMarker, MapMarkerGroup, PlayerMarker } from '@/types/Leaflet';
 import type { SearchConfig } from '@/types/Map';
 import type { SearchMode } from '@/types/Search';
 
-import { currentLang } from '@/i18n/store';
+import { t } from '@/i18n/store';
 
 import SearchMapSwitch from './SearchMapSwitch.vue';
 import SearchMarkersTags from './SearchMarkersTags.vue';
 
-const $currentLang = useStore(currentLang);
-
 const props = defineProps<{
     markers: MapMarker[],
     players: PlayerMarker,
@@ -215,13 +213,21 @@ function resetAllFields(actionAfter?: "focusAfter") {
             <div class="input-w">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="search-icon"><rect width="256" height="256" fill="none"/><path d="M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z"/></svg>
 
-                <input ref="qInput" class="" name="recherche" type="text" v-model="q" title="Rechercher le monde" placeholder="Ville, point d'intérêt…">
+                <input
+                    ref="qInput"
+                    class=""
+                    name="recherche"
+                    type="text"
+                    v-model="q"
+                    :title="t('maps.search')"
+                    :placeholder="t('maps.searchPlaceholder')"
+                >
 
-                <button v-if="hasGroupFilter || hasQuery" @click="onCloseQuery" class="close-btn" title="Enlever le filtre">
+                <button v-if="hasGroupFilter || hasQuery" @click="onCloseQuery" class="close-btn" :title="t('maps.closeSearch')">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="icon"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><line x1="200" y1="200" x2="56" y2="56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/></svg>
                 </button>
 
-                <button v-if="hasPlayers" data-to-players class="player-btn" :tabindex="shouldBeActive ? 1 : 0" title="Aller à la position actuelle des joueurs">
+                <button v-if="hasPlayers" data-to-players class="player-btn" :tabindex="shouldBeActive ? 1 : 0" :title="t('maps.go-to-player')">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="icon"><rect width="256" height="256" fill="none"/><path d="M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z"/></svg>
                 </button>
             </div>
@@ -233,7 +239,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
                         :class="`group-${m.group}`"
                         :data-to-marker="m.title"
                         tabindex="0"
-                        :title="m.group === 'quests' ? 'Voir la quête' : 'Visiter ce lieu'"
+                        :title="m.group === 'quests' ? t('maps.seeQuest') : t('maps.seePlace')"
                     >
                         <img v-if="m.cover && !m.coverPortrait" :src="`/images/cover/${m.cover}`" :alt="m.title" width="300" />
 
@@ -245,7 +251,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
 
                                 <a v-if="m.mapId" :href="m.mapId" class="map-link">
                                     <span>
-                                        Voir la carte détaillée
+                                        {{ t('maps.go-to-map') }}
                                     </span>
                                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="80" y1="112" x2="144" y2="112" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="112" y1="80" x2="112" y2="144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                                 </a>
@@ -601,4 +607,22 @@ function resetAllFields(actionAfter?: "focusAfter") {
         }
     }
 }
-</style>
\ No newline at end of file
+
+// Animations on load
+@media screen and (prefers-reduced-motion: no-preference) {
+    .toolbar {
+        animation: fadeIn .2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translateY(-1rem);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+}
+</style>
diff --git a/src/components/maps/overlay/SearchMarkersTags.vue b/src/components/maps/overlay/SearchMarkersTags.vue
index ae3587aa..d79654dc 100644
--- a/src/components/maps/overlay/SearchMarkersTags.vue
+++ b/src/components/maps/overlay/SearchMarkersTags.vue
@@ -3,6 +3,8 @@ import type { MapMarker, MapMarkerGroup } from '@/types/Leaflet';
 import type { SearchConfig } from '@/types/Map';
 import type { SearchMode } from '@/types/Search';
 
+import { t } from '@/i18n/store';
+
 defineProps<{
     currentSearchMode: SearchMode,
     customMarkers: MapMarker[],
@@ -32,7 +34,7 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
                 <svg v-else class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M231.22,59.44l-80,168a8,8,0,1,1-14.44-6.88L165.62,160H32a8,8,0,0,1-5.88-13.43l42.56-46.1L26.59,61.9A8,8,0,0,1,32,48H224a8,8,0,0,1,7.22,11.44Z"/></svg>
 
                 <span class="label">
-                    Quêtes
+                    {{ t('quests') }}
                 </span>
             </button>
         </li>
@@ -49,7 +51,7 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
                 <svg v-else class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M200,24h-8a16,16,0,0,0-16,16V56H148V40a16,16,0,0,0-16-16h-8a16,16,0,0,0-16,16V56H80V40A16,16,0,0,0,64,24H56A16,16,0,0,0,40,40V84.69A15.86,15.86,0,0,0,44.69,96L56,107.31V216a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V107.31L211.31,96A15.86,15.86,0,0,0,216,84.69V40A16,16,0,0,0,200,24ZM152,216H104V152a24,24,0,0,1,48,0Z"/></svg>
 
                 <span class="label">
-                    Capitales
+                    {{ t('capitals') }}
                 </span>
             </button>
         </li>
@@ -66,7 +68,7 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
                 <svg v-else class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M208,80a8,8,0,0,0-8,8v16H188.85L184,55.2A8,8,0,0,0,181.31,50h0L138.44,11.88l-.2-.17a16,16,0,0,0-20.48,0l-.2.17L74.68,50v0A7.93,7.93,0,0,0,72,55.2L67.15,104H56V88a8,8,0,0,0-16,0v24a8,8,0,0,0,8,8H65.54l-9.47,94.48A16,16,0,0,0,72,232H184a16,16,0,0,0,15.92-17.56L190.46,120H208a8,8,0,0,0,8-8V88A8,8,0,0,0,208,80ZM87.24,64h81.52l4,40H136V88a8,8,0,0,0-16,0v16H83.23ZM72,216l4.81-48H179.19L184,216Z"/></svg>
 
                 <span class="label">
-                    Points d'intérêt
+                    {{ t('points-of-interest') }}
                 </span>
             </button>
         </li>
@@ -83,7 +85,7 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
                 <svg v-else xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M172,120a44,44,0,1,1-44-44A44.05,44.05,0,0,1,172,120Zm60,8A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88.09,88.09,0,0,0-91.47-87.93C77.43,41.89,39.87,81.12,40,128.25a87.65,87.65,0,0,0,22.24,58.16A79.71,79.71,0,0,1,84,165.1a4,4,0,0,1,4.83.32,59.83,59.83,0,0,0,78.28,0,4,4,0,0,1,4.83-.32,79.71,79.71,0,0,1,21.79,21.31A87.62,87.62,0,0,0,216,128Z"/></svg>
 
                 <span class="label">
-                    Personnels
+                    {{ t('personals') }}
                 </span>
             </button>
         </li>
diff --git a/src/i18n/store.ts b/src/i18n/store.ts
index 8b99bba6..6a82c56f 100644
--- a/src/i18n/store.ts
+++ b/src/i18n/store.ts
@@ -1,4 +1,4 @@
-import { type Language } from './ui';
+import { translations, type Language } from './ui';
 import { persistentAtom } from '@nanostores/persistent';
 
 export const currentLang = persistentAtom<Language>('lang', "fr");
@@ -6,3 +6,7 @@ export const currentLang = persistentAtom<Language>('lang', "fr");
 export function setLang(lang: Language) {
     currentLang.set(lang);
 }
+
+export function t(key: string): string {
+    return translations[currentLang.get()][key]
+}
\ No newline at end of file
diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
index 4fcdebb7..03e5ff21 100644
--- a/src/i18n/ui.ts
+++ b/src/i18n/ui.ts
@@ -1,4 +1,52 @@
 export const availableLangs = ['en', 'fr'] as const;
 export type Language = typeof availableLangs[number];
+export type LanguageDict = Record<Language, any>;
 
-export const defaultLang: Language = 'fr';
\ No newline at end of file
+export const defaultLang: Language = 'fr';
+
+export const translations: LanguageDict = {
+    'fr': {
+        'common.title': 'Titre',
+        'common.create': 'Créer',
+        'continents': 'Continents',
+        'cities': 'Villes',
+        'others': 'Autres',
+        'new': 'Nouveau',
+        'quests': 'Quêtes',
+        'capitals': 'Capitales',
+        'points-of-interest': 'Points d\'intérêt',
+        'personals': 'Personnels',
+        'maps.go-to-map': 'Voir la carte détaillée',
+        'maps.go-to-player': 'Aller à la position actuelle des joueurs',
+        'maps.seeQuest': 'Voir la quête',
+        'maps.seePlace': 'Voir sur la carte',
+        'maps.search': 'Rechercher la carte',
+        'maps.searchPlaceholder': "Ville, point d'intérêt…",
+        'maps.closeSearch': 'Enlever le filtre',
+        'maps.markers.new': 'Nouveau marqueur',
+        'maps.markers.addPersonal': 'Ajouter un marqueur personnel',
+        'maps.markers.newNotice': "Le marqueur sera sauvegardé mais n'apparaîtra que sur votre carte !"
+    },
+    'en': {
+        'common.title': 'Title',
+        'common.create': 'Create',
+        'continents': 'Continents',
+        'cities': 'Cities',
+        'others': 'Others',
+        'new': 'New',
+        'quests': 'Quests',
+        'capitals': 'Capitals',
+        'points-of-interest': 'Points of interest',
+        'personals': 'Personals',
+        'maps.go-to-map': 'See detailed map',
+        'maps.go-to-player': 'Go to current players position',
+        'maps.seeQuest': 'See the quest',
+        'maps.seePlace': 'See on the map',
+        'maps.search': 'Search the map',
+        'maps.searchPlaceholder': "City, point of interest…",
+        'maps.closeSearch': 'Remove filter',
+        'maps.markers.new': 'New marker',
+        'maps.markers.addPersonal': 'Add a personal marker',
+        'maps.markers.newNotice': "The marker will be saved but will only appear on your map!"
+    }
+} as const;
diff --git a/src/i18n/utils.ts b/src/i18n/utils.ts
index a251a258..7de62d40 100644
--- a/src/i18n/utils.ts
+++ b/src/i18n/utils.ts
@@ -1,4 +1,4 @@
-import { defaultLang, availableLangs, type Language } from './ui';
+import { defaultLang, availableLangs, type Language, type LanguageDict } from './ui';
 
 export function getLangFromUrl(url: URL): Language {
   const [, lang] = url.pathname.split('/');