From b15071f56f41d72d81e1db16f8128058eab0e27c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 25 Jul 2024 16:45:05 +0200
Subject: [PATCH 01/81] fix: wrong close button on PoiCard in Notebook #340

---
 components/Home/Home.vue         | 2 ++
 components/PoisCard/PoiCard.vue  | 6 +++++-
 components/PoisCard/PoisDeck.vue | 1 +
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/components/Home/Home.vue b/components/Home/Home.vue
index 5f418507..6c6c3b06 100644
--- a/components/Home/Home.vue
+++ b/components/Home/Home.vue
@@ -639,6 +639,7 @@ function handlePoiCardClose() {
             && selectedFeature.properties.metadata
             && showPoi
         "
+        :can-close="device.smallScreen"
         :poi="selectedFeature"
         class="tw-grow-0"
         :explorer-mode-enabled="explorerModeEnabled"
@@ -668,6 +669,7 @@ function handlePoiCardClose() {
               && selectedFeature.properties.metadata
               && showPoi
           "
+          :can-close="device.smallScreen"
           :poi="selectedFeature"
           class="tw-grow-0 tw-text-left tw-h-full"
           :explorer-mode-enabled="explorerModeEnabled"
diff --git a/components/PoisCard/PoiCard.vue b/components/PoisCard/PoiCard.vue
index fe51911b..f3bccad9 100644
--- a/components/PoisCard/PoiCard.vue
+++ b/components/PoisCard/PoiCard.vue
@@ -18,6 +18,10 @@ export default defineNuxtComponent({
   },
 
   props: {
+    canClose: {
+      type: Boolean,
+      default: true,
+    },
     poi: {
       type: Object as PropType<ApiPoi>,
       required: true,
@@ -66,7 +70,7 @@ export default defineNuxtComponent({
     class="poiDescription tw-z-10 tw-flex tw-flex-col tw-w-full md:tw-max-w-xl tw-mx-0 tw-overflow-y-auto tw-shadow-md tw-pointer-events-auto md:tw-flex-row md:tw-w-auto md:tw-mx-auto md:tw-rounded-xl tw-bg-white"
   >
     <UIButton
-      v-show="device.smallScreen"
+      v-show="canClose"
       id="close-poi-card"
       :color="device.smallScreen ? '#ffffff' : '#000000'"
       :style="{ backgroundColor: device.smallScreen ? 'rgb(0 0 0 / 55%)' : 'transparent' }"
diff --git a/components/PoisCard/PoisDeck.vue b/components/PoisCard/PoisDeck.vue
index a7f85ec2..52434bb3 100644
--- a/components/PoisCard/PoisDeck.vue
+++ b/components/PoisCard/PoisDeck.vue
@@ -23,6 +23,7 @@ defineEmits<{
       :is="isCardLight ? PoiCardLight : PoiCard"
       v-for="item in pois"
       :key="item.properties.metadata.id"
+      :can-close="false"
       :poi="item"
       class="tw-grow-1 poi-deck"
       :explorer-mode-enabled="explorerModeEnabled"

From 01fe92c746e9500105628af91761bc242e5eb815 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 18 Jul 2024 15:38:40 +0200
Subject: [PATCH 02/81] chore: use setSelectedFeature store action #226

---
 components/MainMap/FavoriteMenu.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/MainMap/FavoriteMenu.vue b/components/MainMap/FavoriteMenu.vue
index c2170789..d39ee4c8 100644
--- a/components/MainMap/FavoriteMenu.vue
+++ b/components/MainMap/FavoriteMenu.vue
@@ -21,7 +21,8 @@ const emit = defineEmits(['toggleFavoriteMode', 'toggleNoteBookMode'])
 const device = useDevice()
 const notebookModal = ref<boolean>(false)
 
-const { isModeFavorites, selectedFeature } = storeToRefs(useMapStore())
+const mapStore = useMapStore()
+const { isModeFavorites } = storeToRefs(mapStore)
 const { favoriteCount } = storeToRefs(useFavoriteStore())
 
 function explore(poi: ApiPoi) {
@@ -35,7 +36,7 @@ function onClose() {
 }
 
 function onZoomClick(poi: ApiPoi) {
-  selectedFeature.value = poi
+  mapStore.setSelectedFeature(poi)
   notebookModal.value = false
   props.goToSelectedPoi(poi)
 }

From adc27d7675f432fec113df28690eba3464e2aa66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 18 Jul 2024 16:45:00 +0200
Subject: [PATCH 03/81] refactor: move initialPoi logic on page level #338

---
 components/Home/Embedded.vue | 4 +---
 components/Home/Home.vue     | 4 ----
 pages/embedded.vue           | 6 +++---
 pages/index.vue              | 7 ++++---
 4 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/components/Home/Embedded.vue b/components/Home/Embedded.vue
index b2a61690..d6f52cd0 100644
--- a/components/Home/Embedded.vue
+++ b/components/Home/Embedded.vue
@@ -22,7 +22,6 @@ import { flattenFeatures } from '~/utils/utilities'
 const props = defineProps<{
   boundaryArea?: Polygon | MultiPolygon
   initialCategoryIds?: number[]
-  initialPoi?: ApiPoi
 }>()
 
 //
@@ -60,8 +59,7 @@ onMounted(() => {
     }
     menuStore.setSelectedCategoryIds(enabledCategories)
   }
-  if (props.initialPoi)
-    mapStore.setSelectedFeature(props.initialPoi)
+
   if (props.boundaryArea) {
     initialBbox.value = getBBoxFeature(props.boundaryArea)
   }
diff --git a/components/Home/Home.vue b/components/Home/Home.vue
index 6c6c3b06..badf89db 100644
--- a/components/Home/Home.vue
+++ b/components/Home/Home.vue
@@ -36,7 +36,6 @@ import type { ApiAddrSearchResult, ApiSearchResult } from '~/lib/apiSearch'
 const props = defineProps<{
   boundaryArea?: Polygon | MultiPolygon
   initialCategoryIds?: number[]
-  initialPoi?: ApiPoi
 }>()
 
 //
@@ -122,9 +121,6 @@ onMounted(async () => {
     menuStore.setSelectedCategoryIds(enabledCategories)
   }
 
-  if (props.initialPoi)
-    mapStore.setSelectedFeature(props.initialPoi)
-
   $tracking({
     type: 'page',
     title: (route.name && String(route.name)) || undefined,
diff --git a/pages/embedded.vue b/pages/embedded.vue
index f78a953e..350809f0 100644
--- a/pages/embedded.vue
+++ b/pages/embedded.vue
@@ -4,12 +4,14 @@ import { storeToRefs } from 'pinia'
 import Embedded from '~/components/Home/Embedded.vue'
 import type { ApiPoi } from '~/lib/apiPois'
 import { siteStore as useSiteStore } from '~/stores/site'
+import { mapStore as useMapStore } from '~/stores/map'
 
 //
 // Composables
 //
 const { params, query, path } = useRoute()
 const siteStore = useSiteStore()
+const mapStore = useMapStore()
 const { config, settings } = storeToRefs(siteStore)
 const { API_ENDPOINT, API_PROJECT, API_THEME } = config.value!
 const { $trackingInit } = useNuxtApp()
@@ -21,7 +23,6 @@ const boundaryGeojson = ref<Polygon | MultiPolygon>()
 const categoryIdsJoin = ref<string>()
 const poiId = ref<string>()
 const categoryIds = ref<number[]>()
-const initialPoi = ref<ApiPoi>()
 
 //
 // Hooks
@@ -75,7 +76,7 @@ if (categoryIds.value && poiId.value) {
   if (!data.value)
     throw createError({ statusCode: 404, message: 'Initial POI not found !' })
 
-  initialPoi.value = data.value!
+  mapStore.setSelectedFeature(data.value!)
 }
 </script>
 
@@ -83,7 +84,6 @@ if (categoryIds.value && poiId.value) {
   <Embedded
     :boundary-area="boundaryGeojson"
     :initial-category-ids="categoryIds"
-    :initial-poi="initialPoi"
   />
 </template>
 
diff --git a/pages/index.vue b/pages/index.vue
index 281f9cd3..5c46f0cb 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,12 +4,14 @@ import { storeToRefs } from 'pinia'
 import Home from '~/components/Home/Home.vue'
 import type { ApiPoi } from '~/lib/apiPois'
 import { siteStore as useSiteStore } from '~/stores/site'
+import { mapStore as useMapStore } from '~/stores/map'
 
 //
 // Composables
 //
 const { params, query, path } = useRoute()
 const siteStore = useSiteStore()
+const mapStore = useMapStore()
 const { config, settings } = storeToRefs(siteStore)
 const { API_ENDPOINT, API_PROJECT, API_THEME } = config.value!
 const { $trackingInit } = useNuxtApp()
@@ -21,7 +23,6 @@ const boundaryGeojson = ref<Polygon | MultiPolygon>()
 const categoryIdsJoin = ref<string>()
 const poiId = ref<string>()
 const categoryIds = ref<number[]>()
-const initialPoi = ref<ApiPoi>()
 
 //
 // Hooks
@@ -66,6 +67,7 @@ else {
 
 categoryIds.value = categoryIdsJoin.value?.split(',').map(id => Number.parseInt(id))
 
+// Fetch inital POI
 const { data, error } = await useFetch<ApiPoi>(`${API_ENDPOINT}/${API_PROJECT}/${API_THEME}/poi/${poiId.value}.geojson?geometry_as=bbox&short_description=true`)
 
 if (categoryIds.value && poiId.value) {
@@ -75,7 +77,7 @@ if (categoryIds.value && poiId.value) {
   if (!data.value)
     throw createError({ statusCode: 404, message: 'Initial POI not found !' })
 
-  initialPoi.value = data.value!
+  mapStore.setSelectedFeature(data.value!)
 }
 </script>
 
@@ -83,7 +85,6 @@ if (categoryIds.value && poiId.value) {
   <Home
     :boundary-area="boundaryGeojson"
     :initial-category-ids="categoryIds"
-    :initial-poi="initialPoi"
   />
 </template>
 

From 61d0625b037ab515313f75c1f944e658c895c04d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 18 Jul 2024 16:45:34 +0200
Subject: [PATCH 04/81] fix: client code executed on server #338

---
 components/Fields/Coordinates.vue      |  5 +-
 components/Home/Home.vue               | 31 ++++++-----
 components/PoisCard/PoiCardContent.vue | 77 +++++++++++++-------------
 lib/coordinates.ts                     | 20 +++----
 utils/isIOS.ts                         |  4 ++
 5 files changed, 69 insertions(+), 68 deletions(-)

diff --git a/components/Fields/Coordinates.vue b/components/Fields/Coordinates.vue
index 2706e443..8f1e0493 100644
--- a/components/Fields/Coordinates.vue
+++ b/components/Fields/Coordinates.vue
@@ -5,7 +5,6 @@ import type { PropType } from 'vue'
 import { defineNuxtComponent } from '#app'
 import ExternalLink from '~/components/UI/ExternalLink.vue'
 import { coordinatesHref } from '~/lib/coordinates'
-import { isIOS } from '~/utils/isIOS'
 
 export function isCoordinatesEmpty(geom: GeoJSON.Geometry): boolean {
   return !(geom && geom.type === 'Point' && geom.coordinates)
@@ -30,9 +29,7 @@ export default defineNuxtComponent({
   },
 
   mounted() {
-    // isOS is client side only
-    this.href
-      = isIOS !== undefined ? coordinatesHref(this.geom, isIOS()) : undefined
+    this.href = coordinatesHref(this.geom)
   },
 })
 </script>
diff --git a/components/Home/Home.vue b/components/Home/Home.vue
index badf89db..a1964e6d 100644
--- a/components/Home/Home.vue
+++ b/components/Home/Home.vue
@@ -229,21 +229,24 @@ const siteName = computed(() => {
 //
 watch(selectedFeature, () => {
   showPoi.value = !!selectedFeature.value
-  routerPushUrl()
-
-  if (selectedFeature.value) {
-    $tracking({
-      type: 'popup',
-      poiId:
-            selectedFeature.value.properties.metadata.id
-            || selectedFeature.value.properties?.id,
-      title: selectedFeature.value.properties?.name,
-      location: window.location.href,
-      path: route.path,
-      categoryIds: selectedFeature.value.properties?.metadata?.category_ids || [],
-    })
+
+  if (process.client) {
+    routerPushUrl()
+
+    if (selectedFeature.value) {
+      $tracking({
+        type: 'popup',
+        poiId:
+              selectedFeature.value.properties.metadata.id
+              || selectedFeature.value.properties?.id,
+        title: selectedFeature.value.properties?.name,
+        location: window.location.href,
+        path: route.path,
+        categoryIds: selectedFeature.value.properties?.metadata?.category_ids || [],
+      })
+    }
   }
-})
+}, { immediate: true })
 
 watch(selectedCategoryIds, (a, b) => {
   if (a !== b) {
diff --git a/components/PoisCard/PoiCardContent.vue b/components/PoisCard/PoiCardContent.vue
index c38b9d7a..d7c4cda6 100644
--- a/components/PoisCard/PoiCardContent.vue
+++ b/components/PoisCard/PoiCardContent.vue
@@ -10,7 +10,6 @@ import type { ApiPoi, ApiPoiId, ApiPoiProperties } from '~/lib/apiPois'
 import { coordinatesHref } from '~/lib/coordinates'
 import { favoriteStore } from '~/stores/favorite'
 import { mapStore } from '~/stores/map'
-import { isIOS } from '~/utils/isIOS'
 import ContribFieldGroup from '~/components/Fields/ContribFieldGroup.vue'
 import type { ContribFields } from '~/composables/useContrib'
 import useDevice from '~/composables/useDevice'
@@ -43,11 +42,17 @@ export default defineNuxtComponent({
     },
   },
 
-  setup() {
+  setup(props) {
     const device = useDevice()
+    const routeHref = ref<string>()
+
+    onMounted(() => {
+      routeHref.value = coordinatesHref(props.poi.geometry)
+    })
 
     return {
       device,
+      routeHref,
     }
   },
 
@@ -125,7 +130,7 @@ export default defineNuxtComponent({
       }
       else {
         const u = new URL(url)
-        if (u.hostname !== window.location.hostname) {
+        if (process.client && u.hostname !== window.location.hostname) {
           return url
         }
         else {
@@ -136,12 +141,6 @@ export default defineNuxtComponent({
         }
       }
     },
-
-    coordinatesHref(): string | undefined {
-      return isIOS !== undefined
-        ? coordinatesHref(this.poi.geometry, isIOS())
-        : undefined
-    },
   },
 
   emits: {
@@ -196,33 +195,35 @@ export default defineNuxtComponent({
         {{ name }}
       </h2>
 
-      <template v-if="websiteDetails !== undefined">
-        <NuxtLink
-          v-if="
-            !websiteDetails.startsWith('https://')
-              && !websiteDetails.startsWith('http://')
-          "
-          class="tw-ml-6 tw-px-3 tw-py-1.5 tw-text-xs tw-text-zinc-800 tw-bg-zinc-100 hover:tw-bg-zinc-200 focus:tw-bg-zinc-200 tw-transition tw-transition-colors tw-rounded-md"
-          :to="websiteDetails"
-          :style="`background:${colorFill};color:white`"
-          rel="noopener noreferrer"
-          :target="detailsIsExternal ? '_blank' : '_self'"
-          @click.stop="trackingPopupEvent('details')"
-        >
-          {{ $t('poiCard.details') }}
-        </NuxtLink>
-        <a
-          v-else
-          class="tw-ml-6 tw-px-3 tw-py-1.5 tw-text-xs tw-text-zinc-800 tw-bg-zinc-100 hover:tw-bg-zinc-200 focus:tw-bg-zinc-200 tw-transition tw-transition-colors tw-rounded-md"
-          :href="websiteDetails"
-          :style="`background:${colorFill};color:white`"
-          rel="noopener noreferrer"
-          :target="detailsIsExternal ? '_blank' : '_self'"
-          @click.stop="trackingPopupEvent('details')"
-        >
-          {{ $t('poiCard.details') }}
-        </a>
-      </template>
+      <client-only>
+        <template v-if="websiteDetails !== undefined">
+          <NuxtLink
+            v-if="
+              !websiteDetails.startsWith('https://')
+                && !websiteDetails.startsWith('http://')
+            "
+            class="tw-ml-6 tw-px-3 tw-py-1.5 tw-text-xs tw-text-zinc-800 tw-bg-zinc-100 hover:tw-bg-zinc-200 focus:tw-bg-zinc-200 tw-transition tw-transition-colors tw-rounded-md"
+            :to="websiteDetails"
+            :style="`background:${colorFill};color:white`"
+            rel="noopener noreferrer"
+            :target="detailsIsExternal ? '_blank' : '_self'"
+            @click.stop="trackingPopupEvent('details')"
+          >
+            {{ $t('poiCard.details') }}
+          </NuxtLink>
+          <a
+            v-else
+            class="tw-ml-6 tw-px-3 tw-py-1.5 tw-text-xs tw-text-zinc-800 tw-bg-zinc-100 hover:tw-bg-zinc-200 focus:tw-bg-zinc-200 tw-transition tw-transition-colors tw-rounded-md"
+            :href="websiteDetails"
+            :style="`background:${colorFill};color:white`"
+            rel="noopener noreferrer"
+            :target="detailsIsExternal ? '_blank' : '_self'"
+            @click.stop="trackingPopupEvent('details')"
+          >
+            {{ $t('poiCard.details') }}
+          </a>
+        </template>
+      </client-only>
     </div>
 
     <div
@@ -266,8 +267,8 @@ export default defineNuxtComponent({
       class="tw-flex tw-items-center tw-space-x-2 tw-justify-evenly tw-shrink-0 tw-bottom-0 tw-pt-2"
     >
       <a
-        v-if="device.phone && coordinatesHref"
-        :href="coordinatesHref"
+        v-if="device.phone && routeHref"
+        :href="routeHref"
         class="tw-flex tw-flex-col tw-items-center tw-flex-1 tw-h-full tw-p-2 tw-space-y-2 tw-rounded-lg hover:tw-bg-zinc-100"
         :title="$t('poiCard.findRoute')"
         @click="trackingPopupEvent('route')"
diff --git a/lib/coordinates.ts b/lib/coordinates.ts
index 2aa485c8..18ad98f7 100644
--- a/lib/coordinates.ts
+++ b/lib/coordinates.ts
@@ -1,16 +1,12 @@
 import type GeoJSON from 'geojson'
+import { isIOS } from '~/utils/isIOS'
 
-export function coordinatesHref(
-  geometry: GeoJSON.Geometry,
-  isIOS: boolean | undefined,
-): string | undefined {
-  if (isIOS !== undefined && geometry.type === 'Point') {
-    const lat = geometry.coordinates[1]
-    const lng = geometry.coordinates[0]
-    const latLng = `${lat},${lng}`
-    return isIOS ? `maps://?q=${latLng}` : `geo:${latLng}?q=${latLng}`
-  }
-  else {
+export function coordinatesHref(geometry: GeoJSON.Geometry) {
+  if (geometry.type !== 'Point')
     return undefined
-  }
+
+  const lat = geometry.coordinates[1]
+  const lng = geometry.coordinates[0]
+  const latLng = `${lat},${lng}`
+  return isIOS() ? `maps://?q=${latLng}` : `geo:${latLng}?q=${latLng}`
 }
diff --git a/utils/isIOS.ts b/utils/isIOS.ts
index 14ac199c..338a1b45 100644
--- a/utils/isIOS.ts
+++ b/utils/isIOS.ts
@@ -2,6 +2,10 @@
  * Looks at the user agent and guess if the current OS is iOS.
  */
 export function isIOS() {
+  if (!process.client)
+    return false
+
+  // FIXME: navigator.platform is deprecated
   return (
     [
       'iPad Simulator',

From ced927985390953ebc2d755ddaf4a482f5f8369e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 22 Jul 2024 15:55:27 +0200
Subject: [PATCH 05/81] refactor: poi-card to script setup style #338

---
 components/PoisCard/PoiCard.vue | 96 ++++++++++++---------------------
 1 file changed, 35 insertions(+), 61 deletions(-)

diff --git a/components/PoisCard/PoiCard.vue b/components/PoisCard/PoiCard.vue
index f3bccad9..ae7d38e3 100644
--- a/components/PoisCard/PoiCard.vue
+++ b/components/PoisCard/PoiCard.vue
@@ -1,72 +1,44 @@
-<script lang="ts">
-import type { PropType } from 'vue'
-
-import { defineNuxtComponent } from '#app'
+<script setup lang="ts">
 import PoiCardContent from '~/components/PoisCard/PoiCardContent.vue'
 import TeritorioIcon from '~/components/UI/TeritorioIcon.vue'
 import UIButton from '~/components/UI/UIButton.vue'
 import UIPicture from '~/components/UI/UIPicture.vue'
-import type { ApiPoi, ApiPoiId } from '~/lib/apiPois'
+import type { ApiPoi } from '~/lib/apiPois'
 import useDevice from '~/composables/useDevice'
 
-export default defineNuxtComponent({
-  components: {
-    PoiCardContent,
-    TeritorioIcon,
-    UIButton,
-    UIPicture,
-  },
-
-  props: {
-    canClose: {
-      type: Boolean,
-      default: true,
-    },
-    poi: {
-      type: Object as PropType<ApiPoi>,
-      required: true,
-    },
-    explorerModeEnabled: {
-      type: Boolean,
-      required: true,
-    },
-    favoritesModeEnabled: {
-      type: Boolean,
-      required: true,
-    },
-    showImage: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
-  setup() {
-    const device = useDevice()
-
-    return {
-      device,
-    }
-  },
-
-  computed: {
-    id(): ApiPoiId {
-      return this.poi.properties.metadata.id
-    },
+//
+// Props
+//
+withDefaults(defineProps<{
+  canClose: boolean
+  poi: ApiPoi
+  explorerModeEnabled: boolean
+  favoritesModeEnabled: boolean
+  showImage?: boolean
+}>(), {
+  canClose: false,
+  showImage: true,
+})
 
-    colorFill(): string {
-      return this.poi.properties.display?.color_fill || 'black'
-    },
+//
+// Events
+//
+defineEmits<{
+  (e: 'exploreClick', poi: ApiPoi): void
+  (e: 'favoriteClick', poi: ApiPoi): void
+  (e: 'onClose'): void
+  (e: 'zoomClick', poi: ApiPoi): void
+}>()
 
-    icon(): string | undefined {
-      return this.poi.properties.display?.icon
-    },
-  },
-})
+//
+// Composables
+//
+const device = useDevice()
 </script>
 
 <template>
   <div
-    :id="`PoiCard-${id}`"
+    :id="`PoiCard-${poi.properties.metadata.id}`"
     class="poiDescription tw-z-10 tw-flex tw-flex-col tw-w-full md:tw-max-w-xl tw-mx-0 tw-overflow-y-auto tw-shadow-md tw-pointer-events-auto md:tw-flex-row md:tw-w-auto md:tw-mx-auto md:tw-rounded-xl tw-bg-white"
   >
     <UIButton
@@ -83,14 +55,14 @@ export default defineNuxtComponent({
       class=" tw-bg-gray-100 tw-text-gray-100 tw-flex tw-relative tw-items-center tw-align-middle tw-justify-center tw-h-44 md:tw-w-48 md:tw-h-auto md:tw-max-h-full min-icon-height"
     >
       <TeritorioIcon
-        v-if="icon"
-        :picto="icon"
+        v-if="poi.properties.display?.icon"
+        :picto="poi.properties.display.icon"
         :use-native-alignment="false"
         class="tw-text-8xl tw-align-middle tw-absolute tw-z-0"
         :color-text="
           poi.properties.image && poi.properties.image.length > 0
             ? '#AAA'
-            : colorFill
+            : poi.properties.display?.color_fill || 'black'
         "
       />
       <UIPicture
@@ -107,7 +79,9 @@ export default defineNuxtComponent({
       :explorer-mode-enabled="explorerModeEnabled"
       :favorites-mode-enabled="favoritesModeEnabled"
       class="tw-px-4 tw-py-5 tw-flex tw-flex-col md:tw-overflow-y-auto tw-flex-grow md:tw-max-h-full tw-box-border tw-w-full md:tw-h-80 md:tw-w-96"
-      v-bind="$attrs"
+      @explore-click="$emit('exploreClick', $event)"
+      @favorite-click="$emit('favoriteClick', $event)"
+      @zoom-click="$emit('zoomClick', $event)"
     />
   </div>
 </template>

From cb3b105c3c4192ca0c304db033bc86d5e13e945d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 22 Jul 2024 16:11:13 +0200
Subject: [PATCH 06/81] refactor: delete method for direct event emit usage
 #338

---
 components/Search/Search.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/components/Search/Search.vue b/components/Search/Search.vue
index fcbc467d..4c0dd1f9 100644
--- a/components/Search/Search.vue
+++ b/components/Search/Search.vue
@@ -155,10 +155,6 @@ export default defineNuxtComponent({
   methods: {
     ...mapActions(menuStore, ['addSelectedCategoryIds', 'applyFilters']),
 
-    setSelectedFeature(feature: ApiPoi): void {
-      this.$emit('selectFeature', feature)
-    },
-
     reset() {
       this.searchMenuItemsResults = null
       this.searchPoisResults = null
@@ -237,7 +233,7 @@ export default defineNuxtComponent({
     onPoiClick(searchResult: SearchResult) {
       getPoiById(this.config!, searchResult.id).then(
         (poi) => {
-          this.setSelectedFeature(poi)
+          this.$emit('selectFeature', poi)
         },
       )
 
@@ -250,7 +246,7 @@ export default defineNuxtComponent({
       )
       if (feature) {
         const f = formatApiAddressToFeature(feature, true)
-        this.setSelectedFeature(f)
+        this.$emit('selectFeature', f)
       }
       this.reset()
     },

From 1fb5e84fcbbc6632169b8666da4f68c64da6c8ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 22 Jul 2024 16:32:23 +0200
Subject: [PATCH 07/81] refactor: poi-card display scenarios #338

---
 components/Home/Home.vue | 37 ++++++++++++++++---------------------
 1 file changed, 16 insertions(+), 21 deletions(-)

diff --git a/components/Home/Home.vue b/components/Home/Home.vue
index a1964e6d..f4df3104 100644
--- a/components/Home/Home.vue
+++ b/components/Home/Home.vue
@@ -62,7 +62,7 @@ const initialBbox = ref<LngLatBounds | null>(null)
 const isMenuItemOpen = ref<boolean>(false)
 const isOnSearch = ref<boolean>(false)
 const showFavoritesOverlay = ref<boolean>(false)
-const showPoi = ref<boolean>(false)
+const isPoiCardShown = ref<boolean>(false)
 const mapFeaturesRef = ref<InstanceType<typeof MapFeatures>>()
 
 //
@@ -149,12 +149,8 @@ const favoritesModeEnabled = computed(() => {
   return settings!.themes[0]?.favorites_mode ?? true
 })
 
-const isPoiCardVisible = computed(() => {
-  return !!(selectedFeature.value && showPoi.value)
-})
-
 const isBottomMenuOpened = computed(() => {
-  return ((device.value.smallScreen && isPoiCardVisible.value) || isMenuItemOpen.value)
+  return ((device.value.smallScreen && isPoiCardShown.value) || isMenuItemOpen.value)
 })
 
 const fitBoundsPaddingOptions = computed((): FitBoundsOptions['padding'] => {
@@ -169,7 +165,7 @@ const fitBoundsPaddingOptions = computed((): FitBoundsOptions['padding'] => {
   else {
     return {
       top: 100,
-      bottom: isPoiCardVisible.value ? 400 : 100,
+      bottom: isPoiCardShown.value ? 400 : 100,
       right: 100,
       left: isModeExplorerOrFavorites.value ? 50 : 500,
     }
@@ -228,7 +224,7 @@ const siteName = computed(() => {
 // Watchers
 //
 watch(selectedFeature, () => {
-  showPoi.value = !!selectedFeature.value
+  isPoiCardShown.value = !!selectedFeature.value
 
   if (process.client) {
     routerPushUrl()
@@ -353,21 +349,21 @@ function onBottomMenuButtonClick() {
   if (!isModeFavorites.value) {
     if (isBottomMenuOpened.value) {
       if (selectedFeature.value)
-        setPoiVisibility(false)
+        setPoiCardDisplay(false)
       isMenuItemOpen.value = false
     }
     else if (!isModeExplorer.value) {
       isMenuItemOpen.value = true
     }
-    else if (selectedFeature.value && !isPoiCardVisible.value) {
-      setPoiVisibility(true)
+    else if (selectedFeature.value && !isPoiCardShown.value) {
+      setPoiCardDisplay(true)
     }
   }
   else if (selectedFeature.value) {
-    if (!isModeExplorer.value && !showPoi.value)
+    if (!isModeExplorer.value && !isPoiCardShown.value)
       mapStore.setSelectedFeature(null)
     else
-      setPoiVisibility(false)
+      setPoiCardDisplay(false)
   }
 }
 
@@ -428,7 +424,7 @@ function toggleExploreAroundSelectedPoi(feature?: ApiPoi) {
     goToSelectedFeature()
 
     if (device.value.smallScreen)
-      showPoi.value = false
+      isPoiCardShown.value = false
   }
   else {
     allowRegionBackZoom.value = false
@@ -463,13 +459,12 @@ function scrollTop() {
     header.scrollTop = 0
 }
 
-function setPoiVisibility(visible: boolean) {
-  showPoi.value = visible
+function setPoiCardDisplay(visible: boolean) {
+  isPoiCardShown.value = visible
 }
 
 function handlePoiCardClose() {
   mapStore.setSelectedFeature(null)
-  setPoiVisibility(false)
 }
 </script>
 
@@ -609,7 +604,7 @@ function handlePoiCardClose() {
         >
           <div class="tw-relative">
             <button
-              v-if="!(isModeExplorer || isModeFavorites || showPoi)"
+              v-if="!(isModeExplorer || isModeFavorites || isPoiCardShown)"
               type="button"
               class="md:tw-hidden tw-absolute -tw-top-12 tw-z-0 tw-w-1/4 tw-h-12 tw-transition-all tw-rounded-t-lg tw-text-sm tw-font-medium tw-px-5 tw-shadow-lg tw-outline-none focus:tw-outline-none tw-bg-white tw-text-zinc-800 hover:tw-bg-zinc-100 focus-visible:tw-bg-zinc-100"
               style="right: 37.5%"
@@ -636,7 +631,7 @@ function handlePoiCardClose() {
           selectedFeature
             && selectedFeature.properties
             && selectedFeature.properties.metadata
-            && showPoi
+            && isPoiCardShown
         "
         :can-close="device.smallScreen"
         :poi="selectedFeature"
@@ -657,7 +652,7 @@ function handlePoiCardClose() {
         class="tw-flex-1 tw-h-full tw-overflow-y-auto tw-h-screen-3/5 tw-divide-y"
       >
         <Menu
-          v-if="!showPoi"
+          v-if="!isPoiCardShown"
           menu-block="MenuBlockBottom"
           @scroll-top="scrollTop"
         />
@@ -666,7 +661,7 @@ function handlePoiCardClose() {
             selectedFeature
               && selectedFeature.properties
               && selectedFeature.properties.metadata
-              && showPoi
+              && isPoiCardShown
           "
           :can-close="device.smallScreen"
           :poi="selectedFeature"

From c6b6e3ad27a4e766b892c00cabd179ccb54d0c64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 22 Jul 2024 17:37:34 +0200
Subject: [PATCH 08/81] refactor: pois-card-light with script setup style #338

---
 components/PoisCard/PoiCardLight.vue | 94 ++++++----------------------
 1 file changed, 20 insertions(+), 74 deletions(-)

diff --git a/components/PoisCard/PoiCardLight.vue b/components/PoisCard/PoiCardLight.vue
index 5f3f09ee..58154fc9 100644
--- a/components/PoisCard/PoiCardLight.vue
+++ b/components/PoisCard/PoiCardLight.vue
@@ -1,85 +1,31 @@
-<script lang="ts">
-import { mapState } from 'pinia'
-import type { PropType } from 'vue'
-
-import { defineNuxtComponent } from '#app'
+<script setup lang="ts">
 import Fields from '~/components/PoisCard/Fields.vue'
 import TeritorioIconBadge from '~/components/UI/TeritorioIconBadge.vue'
 import UIPicture from '~/components/UI/UIPicture.vue'
 import type { ApiPoi } from '~/lib/apiPois'
-import type { MapPoiId } from '~/lib/mapPois'
-import { favoriteStore } from '~/stores/favorite'
-
-export default defineNuxtComponent({
-  components: {
-    TeritorioIconBadge,
-    Fields,
-    UIPicture,
-  },
-
-  props: {
-    notebook: {
-      type: Boolean,
-      default: false,
-    },
-    poi: {
-      type: Object as PropType<ApiPoi>,
-      required: true,
-    },
-  },
-
-  data(): {
-    textLimit: number
-  } {
-    return {
-      textLimit: 160,
-    }
-  },
-
-  computed: {
-    ...mapState(favoriteStore, ['favoritesIds']),
-
-    id(): MapPoiId {
-      return this.poi.properties.metadata.id
-    },
 
-    name(): string | undefined {
-      return (
-        this.poi.properties.name
-        || this.poi.properties.editorial?.class_label_popup?.fr
-        || this.poi.properties.editorial?.class_label?.fr
-      )
-    },
-
-    colorFill(): string {
-      return this.poi.properties.display?.color_fill || 'black'
-    },
-
-    colorLine(): string {
-      return this.poi.properties.display?.color_line || 'black'
-    },
-
-    icon(): string | undefined {
-      return this.poi.properties.display?.icon
-    },
-
-    description(): string | undefined {
-      return this.poi.properties.description
-    },
-
-    websiteDetails(): string | undefined {
-      return (
-        this.poi.properties.editorial
-        && this.poi.properties.editorial['website:details']
-      )
-    },
-  },
+//
+// Props
+//
+const props = withDefaults(defineProps<{
+  notebook: boolean
+  poi: ApiPoi
+}>(), {
+  notebook: false,
 })
+
+//
+// Data
+//
+const colorFill = ref(props.poi.properties.display?.color_fill || 'black')
+const colorLine = ref(props.poi.properties.display?.color_line || 'black')
+const name = ref(props.poi.properties.name || props.poi.properties.editorial?.class_label_popup?.fr || props.poi.properties.editorial?.class_label?.fr)
+const websiteDetails = ref(props.poi.properties.editorial && props.poi.properties.editorial['website:details'])
 </script>
 
 <template>
   <div
-    :id="`PoiCardLight-${id}`"
+    :id="`PoiCardLight-${poi.properties.metadata.id}`"
     class="tw-flex-col md:tw-flex-row tw-h-auto tw-shrink-0 tw-flex tw-items-start tw-gap-4 tw-justify-between tw-box-border tw-w-full tw-border-gray-300 tw-border-t tw-pt-4 first-of-type:tw-border-t-0"
   >
     <div>
@@ -89,9 +35,9 @@ export default defineNuxtComponent({
           :style="`color:${colorLine}`"
         >
           <TeritorioIconBadge
-            v-if="icon || poi.properties.display?.text"
+            v-if="props.poi.properties.display?.icon || poi.properties.display?.text"
             :color-fill="colorFill"
-            :picto="icon"
+            :picto="props.poi.properties.display?.icon"
             size="lg"
             :image="undefined"
             :text="poi.properties.display?.text"

From 0d90d9b14017d4b7da40b6fd18a9d28667f0e942 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 22 Jul 2024 17:51:09 +0200
Subject: [PATCH 09/81] refactor: isolate poi-card from poi-card-light #338

---
 components/PoisCard/PoisDeck.vue          | 24 +++++++++++++++++------
 components/PoisDetails/Route/RouteMap.vue | 20 ++-----------------
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/components/PoisCard/PoisDeck.vue b/components/PoisCard/PoisDeck.vue
index 52434bb3..ee33707c 100644
--- a/components/PoisCard/PoisDeck.vue
+++ b/components/PoisCard/PoisDeck.vue
@@ -3,12 +3,15 @@ import type { ApiPoi } from '~/lib/apiPois'
 import PoiCard from '~/components/PoisCard/PoiCard.vue'
 import PoiCardLight from '~/components/PoisCard/PoiCardLight.vue'
 
-defineProps<{
-  explorerModeEnabled: boolean
-  favoritesModeEnabled: boolean
+withDefaults(defineProps<{
+  explorerModeEnabled?: boolean
+  favoritesModeEnabled?: boolean
   pois: ApiPoi[]
   isCardLight: boolean
-}>()
+}>(), {
+  explorerModeEnabled: false,
+  favoritesModeEnabled: false,
+})
 
 defineEmits<{
   (e: 'exploreClick', poi: ApiPoi): void
@@ -18,9 +21,18 @@ defineEmits<{
 </script>
 
 <template>
-  <div class="tw-flex tw-justify-between tw-flex-wrap tw-gap-6">
+  <div v-if="isCardLight" class="tw-flex tw-justify-between tw-flex-wrap tw-gap-6">
+    <component
+      :is="PoiCardLight"
+      v-for="item in pois"
+      :key="item.properties.metadata.id"
+      :poi="item"
+      class="tw-grow-1 poi-deck"
+    />
+  </div>
+  <div v-else class="tw-flex tw-justify-between tw-flex-wrap tw-gap-6">
     <component
-      :is="isCardLight ? PoiCardLight : PoiCard"
+      :is="PoiCard"
       v-for="item in pois"
       :key="item.properties.metadata.id"
       :can-close="false"
diff --git a/components/PoisDetails/Route/RouteMap.vue b/components/PoisDetails/Route/RouteMap.vue
index c8a3999c..0b0c9e43 100644
--- a/components/PoisDetails/Route/RouteMap.vue
+++ b/components/PoisDetails/Route/RouteMap.vue
@@ -102,27 +102,11 @@ export default defineNuxtComponent({
     <div class="detail-wrapper">
       <div v-if="points.length > 0" class="detail-left">
         <h2>{{ $t('poiDetails.routes.waypoints') }}</h2>
-        <PoisDeck
-          :pois="points"
-          :is-card-light="true"
-          :explorer-mode-enabled="false"
-          :favorites-mode-enabled="favoritesModeEnabled"
-          @explore-click="$emit('exploreClick', $event)"
-          @favorite-click="$emit('favoriteClick', $event)"
-          @zoom-click="$emit('zoomClick', $event)"
-        />
+        <PoisDeck :pois="points" :is-card-light="true" />
       </div>
       <div v-if="pois.length > 0" class="detail-right">
         <h2>{{ $t('poiDetails.routes.pois') }}</h2>
-        <PoisDeck
-          :pois="pois"
-          :is-card-light="true"
-          :explorer-mode-enabled="false"
-          :favorites-mode-enabled="favoritesModeEnabled"
-          @explore-click="$emit('exploreClick', $event)"
-          @favorite-click="$emit('favoriteClick', $event)"
-          @zoom-click="$emit('zoomClick', $event)"
-        />
+        <PoisDeck :pois="pois" :is-card-light="true" />
       </div>
     </div>
   </div>

From 044247dc96f912dfe8d394287448b2280d6408e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 23 Jul 2024 14:10:59 +0200
Subject: [PATCH 10/81] refactor: simplify onBottomMenuButtonClick method #338

---
 components/Home/Home.vue | 24 +-----------------------
 1 file changed, 1 insertion(+), 23 deletions(-)

diff --git a/components/Home/Home.vue b/components/Home/Home.vue
index f4df3104..6baedce3 100644
--- a/components/Home/Home.vue
+++ b/components/Home/Home.vue
@@ -346,25 +346,7 @@ function onActivateFilter(val: boolean) {
 }
 
 function onBottomMenuButtonClick() {
-  if (!isModeFavorites.value) {
-    if (isBottomMenuOpened.value) {
-      if (selectedFeature.value)
-        setPoiCardDisplay(false)
-      isMenuItemOpen.value = false
-    }
-    else if (!isModeExplorer.value) {
-      isMenuItemOpen.value = true
-    }
-    else if (selectedFeature.value && !isPoiCardShown.value) {
-      setPoiCardDisplay(true)
-    }
-  }
-  else if (selectedFeature.value) {
-    if (!isModeExplorer.value && !isPoiCardShown.value)
-      mapStore.setSelectedFeature(null)
-    else
-      setPoiCardDisplay(false)
-  }
+  isMenuItemOpen.value = !isMenuItemOpen.value
 }
 
 function onQuitExplorerFavoriteMode() {
@@ -459,10 +441,6 @@ function scrollTop() {
     header.scrollTop = 0
 }
 
-function setPoiCardDisplay(visible: boolean) {
-  isPoiCardShown.value = visible
-}
-
 function handlePoiCardClose() {
   mapStore.setSelectedFeature(null)
 }

From eddc29237ed08b4f56455fbfa979690f839a1fa9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 25 Jul 2024 17:39:22 +0200
Subject: [PATCH 11/81] chore: create marker composable #338

---
 composables/useMarker.ts  | 16 ++++++++++++++++
 lib/clusters.ts           |  1 +
 lib/markerLayerFactory.ts | 21 +++++++++++----------
 3 files changed, 28 insertions(+), 10 deletions(-)
 create mode 100644 composables/useMarker.ts

diff --git a/composables/useMarker.ts b/composables/useMarker.ts
new file mode 100644
index 00000000..43770686
--- /dev/null
+++ b/composables/useMarker.ts
@@ -0,0 +1,16 @@
+import { type LngLatLike, Marker, type MarkerOptions } from 'maplibre-gl'
+
+const defaultOptions = {
+  scale: 1.3,
+  color: '#f44336',
+} satisfies MarkerOptions
+
+export function createMarker(coords: LngLatLike, options: MarkerOptions = defaultOptions) {
+  return new Marker(options).setLngLat(coords)
+}
+
+export default function () {
+  return {
+    createMarker,
+  }
+}
diff --git a/lib/clusters.ts b/lib/clusters.ts
index f5671f55..703def09 100644
--- a/lib/clusters.ts
+++ b/lib/clusters.ts
@@ -77,6 +77,7 @@ export function createMarkerDonutChart(countPerColor: Record<string, number>, to
     </svg>`
 
   const el = document.createElement('div')
+  el.classList.add('cluster-item')
   el.innerHTML = html
   return el
 }
diff --git a/lib/markerLayerFactory.ts b/lib/markerLayerFactory.ts
index c3065af1..5857ee2d 100644
--- a/lib/markerLayerFactory.ts
+++ b/lib/markerLayerFactory.ts
@@ -3,9 +3,9 @@ import type {
   LayerSpecification,
   LngLatBounds,
   Map,
+  Marker,
   SymbolLayerSpecification,
 } from 'maplibre-gl'
-import { Marker } from 'maplibre-gl'
 import { createApp } from 'vue'
 
 import type { ApiPoi } from './apiPois'
@@ -14,6 +14,7 @@ import { createMarkerDonutChart } from './clusters'
 
 import TeritorioIconBadge from '~/components/UI/TeritorioIconBadge.vue'
 import type { TupleLatLng } from '~/utils/types'
+import { createMarker } from '~/composables/useMarker'
 
 type ITMarker = InstanceType<typeof Marker>
 
@@ -84,12 +85,12 @@ export function makerHtmlFactory(
   el.classList.add('maplibregl-marker')
   el.classList.add('cluster-item')
 
-  const marker = new Marker({
+  const marker = createMarker(latLng, {
     element: el,
     ...(thumbnail && {
       offset: [0, -10],
     }),
-  }).setLngLat(latLng) // Using this to avoid misplaced marker
+  })
 
   // Teritorio badge
   createApp(TeritorioIconBadge, {
@@ -136,12 +137,12 @@ export function updateMarkers(
             point_count_abbreviated: _e,
             ...countPercolor
           } = props
-          const el = createMarkerDonutChart(countPercolor, point_count)
-          el.classList.add('cluster-item')
-          markers[id] = new Marker({
-            element: el,
-          }).setLngLat(coords)
-          el.addEventListener('click', (e) => {
+          const element = createMarkerDonutChart(countPercolor, point_count)
+
+          markers[id] = createMarker(coords, { element })
+          markers[id].addTo(map)
+
+          element.addEventListener('click', (e) => {
             e.stopPropagation()
             const source = map.getSource(src)
 
@@ -161,7 +162,6 @@ export function updateMarkers(
               )
             }
           })
-          markers[id].addTo(map)
         }
       }
       else if (props?.metadata) {
@@ -200,6 +200,7 @@ export function updateMarkers(
             // Click handler
             if (markerClickCallBack && props.editorial?.popup_fields) {
               const el = markers[id].getElement()
+
               el.addEventListener('click', (e: MouseEvent) => {
                 e.stopPropagation()
                 markerClickCallBack(feature as unknown as ApiPoi)

From 00c9da3347b566edc655e3aeb6a5288f0d3cec46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 25 Jul 2024 18:40:19 +0200
Subject: [PATCH 12/81] refactor: map store state #338

---
 components/Home/ExplorerOrFavoritesBack.vue | 10 ++++----
 components/MainMap/FavoritesOverlay.vue     | 13 +++++++----
 components/MainMap/MapControlsExplore.vue   | 14 +++++------
 components/MainMap/MapFeatures.vue          | 14 ++++++-----
 components/PoisCard/PoiCardContent.vue      |  7 +++---
 stores/map.ts                               | 26 ++++++---------------
 6 files changed, 38 insertions(+), 46 deletions(-)

diff --git a/components/Home/ExplorerOrFavoritesBack.vue b/components/Home/ExplorerOrFavoritesBack.vue
index 3dc3553a..181edd99 100644
--- a/components/Home/ExplorerOrFavoritesBack.vue
+++ b/components/Home/ExplorerOrFavoritesBack.vue
@@ -1,9 +1,9 @@
 <script lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { mapState } from 'pinia'
+import { storeToRefs } from 'pinia'
 
 import { defineNuxtComponent } from '#app'
-import { mapStore } from '~/stores/map'
+import { mapStore as useMapStore } from '~/stores/map'
 import useDevice from '~/composables/useDevice'
 
 export default defineNuxtComponent({
@@ -11,15 +11,13 @@ export default defineNuxtComponent({
     FontAwesomeIcon,
   },
 
-  computed: {
-    ...mapState(mapStore, ['isModeFavorites']),
-  },
-
   setup() {
     const device = useDevice()
+    const { isModeFavorites } = storeToRefs(useMapStore())
 
     return {
       device,
+      isModeFavorites,
     }
   },
 
diff --git a/components/MainMap/FavoritesOverlay.vue b/components/MainMap/FavoritesOverlay.vue
index af67f1d3..becdcbbe 100644
--- a/components/MainMap/FavoritesOverlay.vue
+++ b/components/MainMap/FavoritesOverlay.vue
@@ -1,13 +1,16 @@
 <script lang="ts">
-import { mapWritableState } from 'pinia'
-
+import { storeToRefs } from 'pinia'
 import { defineNuxtComponent } from '#app'
-import { mapStore } from '~/stores/map'
+import { mapStore as useMapStore } from '~/stores/map'
 import { Mode } from '~/utils/types'
 
 export default defineNuxtComponent({
-  computed: {
-    ...mapWritableState(mapStore, ['mode']),
+  setup() {
+    const { mode } = storeToRefs(useMapStore())
+
+    return {
+      mode,
+    }
   },
 
   emits: {
diff --git a/components/MainMap/MapControlsExplore.vue b/components/MainMap/MapControlsExplore.vue
index d4539281..cf94e6da 100644
--- a/components/MainMap/MapControlsExplore.vue
+++ b/components/MainMap/MapControlsExplore.vue
@@ -2,12 +2,12 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { Control } from '@teritorio/map'
 import type { Map } from 'maplibre-gl'
-import { mapState, mapWritableState } from 'pinia'
+import { storeToRefs } from 'pinia'
 import type { PropType } from 'vue'
 import { ref } from 'vue'
 
 import { defineNuxtComponent } from '#app'
-import { mapStore } from '~/stores/map'
+import { mapStore as useMapStore } from '~/stores/map'
 import { Mode } from '~/utils/types'
 
 export default defineNuxtComponent({
@@ -21,17 +21,17 @@ export default defineNuxtComponent({
       default: null,
     },
   },
+
   setup() {
+    const { isModeExplorer, mode } = storeToRefs(useMapStore())
+
     return {
       container: ref<InstanceType<typeof HTMLDivElement>>(),
+      isModeExplorer,
+      mode,
     }
   },
 
-  computed: {
-    ...mapState(mapStore, ['isModeExplorer']),
-    ...mapWritableState(mapStore, ['mode']),
-  },
-
   watch: {
     map(value, oldValue) {
       if (!oldValue && value) {
diff --git a/components/MainMap/MapFeatures.vue b/components/MainMap/MapFeatures.vue
index 8dee0416..9c88e0ae 100644
--- a/components/MainMap/MapFeatures.vue
+++ b/components/MainMap/MapFeatures.vue
@@ -29,7 +29,7 @@ import { getBBoxFeature, getBBoxFeatures } from '~/lib/bbox'
 import { DEFAULT_MAP_STYLE, MAP_ZOOM } from '~/lib/constants'
 import type { VectorTilesPoi } from '~/lib/vectorTilesPois'
 import { vectorTilesPoi2ApiPoi } from '~/lib/vectorTilesPois'
-import { mapStore } from '~/stores/map'
+import { mapStore as useMapStore } from '~/stores/map'
 import { menuStore } from '~/stores/menu'
 import { siteStore as useSiteStore } from '~/stores/site'
 import { snackStore } from '~/stores/snack'
@@ -118,11 +118,16 @@ export default defineNuxtComponent({
   setup() {
     const device = useDevice()
     const { config } = storeToRefs(useSiteStore())
+    const mapStore = useMapStore()
+    const { center, selectedFeature } = storeToRefs(mapStore)
 
     return {
+      center,
       config,
       device,
       mapBase: ref<InstanceType<typeof MapBase>>(),
+      mapStore,
+      selectedFeature,
     }
   },
 
@@ -141,9 +146,7 @@ export default defineNuxtComponent({
   },
 
   computed: {
-    ...mapState(mapStore, ['selectedFeature']),
     ...mapState(menuStore, ['isLoadingFeatures']),
-    ...mapWritableState(mapStore, ['center']),
 
     availableStyles(): MapStyleEnum[] {
       return [MapStyleEnum.vector, MapStyleEnum.aerial, MapStyleEnum.bicycle]
@@ -222,7 +225,6 @@ export default defineNuxtComponent({
   },
 
   methods: {
-    ...mapActions(mapStore, ['setSelectedFeature']),
     ...mapActions(snackStore, ['showSnack']),
 
     // Map and style init and changes
@@ -290,7 +292,7 @@ export default defineNuxtComponent({
 
     updateSelectedFeature(feature: ApiPoi | null, fetch = false) {
       if (this.selectedFeature !== feature) {
-        this.setSelectedFeature(feature)
+        this.mapStore.setSelectedFeature(feature)
 
         if (feature && fetch && feature.properties.metadata.id) {
           try {
@@ -303,7 +305,7 @@ export default defineNuxtComponent({
               // Overide geometry.
               // Keep same original location to avoid side effect on moving selected object.
               apiPoi.geometry = feature.geometry
-              this.setSelectedFeature(apiPoi)
+              this.mapStore.setSelectedFeature(apiPoi)
             })
           }
           catch (e) {
diff --git a/components/PoisCard/PoiCardContent.vue b/components/PoisCard/PoiCardContent.vue
index d7c4cda6..7fcd78f7 100644
--- a/components/PoisCard/PoiCardContent.vue
+++ b/components/PoisCard/PoiCardContent.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { mapState } from 'pinia'
+import { mapState, storeToRefs } from 'pinia'
 import type { PropType } from 'vue'
 import { defineNuxtComponent } from '#app'
 import Fields from '~/components/PoisCard/Fields.vue'
@@ -9,7 +9,7 @@ import TeritorioIcon from '~/components/UI/TeritorioIcon.vue'
 import type { ApiPoi, ApiPoiId, ApiPoiProperties } from '~/lib/apiPois'
 import { coordinatesHref } from '~/lib/coordinates'
 import { favoriteStore } from '~/stores/favorite'
-import { mapStore } from '~/stores/map'
+import { mapStore as useMapStore } from '~/stores/map'
 import ContribFieldGroup from '~/components/Fields/ContribFieldGroup.vue'
 import type { ContribFields } from '~/composables/useContrib'
 import useDevice from '~/composables/useDevice'
@@ -43,6 +43,7 @@ export default defineNuxtComponent({
   },
 
   setup(props) {
+    const { isModeExplorer } = storeToRefs(useMapStore())
     const device = useDevice()
     const routeHref = ref<string>()
 
@@ -52,6 +53,7 @@ export default defineNuxtComponent({
 
     return {
       device,
+      isModeExplorer,
       routeHref,
     }
   },
@@ -71,7 +73,6 @@ export default defineNuxtComponent({
   },
 
   computed: {
-    ...mapState(mapStore, ['isModeExplorer']),
     ...mapState(favoriteStore, ['favoritesIds', 'favoriteAddresses']),
 
     id(): ApiPoiId {
diff --git a/stores/map.ts b/stores/map.ts
index 84250ac2..e2bede0b 100644
--- a/stores/map.ts
+++ b/stores/map.ts
@@ -5,30 +5,18 @@ import { Mode } from '~/utils/types'
 
 interface State {
   center: LatLng
+  mode: Mode
   pitch: Pitch
   selectedFeature: ApiPoi | null
-  mode: Mode
 }
 
-const getInitialMapview: () => {
-  center: {
-    lng: number
-    lat: number
-  }
-} = () => ({
-  center: { lng: 0, lat: 0 },
-})
-
 export const mapStore = defineStore('map', {
-  state: (): State =>
-    Object.assign(
-      {
-        pitch: 0,
-        selectedFeature: null,
-        mode: Mode.BROWSER,
-      },
-      getInitialMapview(),
-    ),
+  state: (): State => ({
+    center: { lng: 0, lat: 0 },
+    mode: Mode.BROWSER,
+    pitch: 0,
+    selectedFeature: null,
+  }),
 
   getters: {
     isModeExplorer: (state: State) => state.mode === Mode.EXPLORER,

From 8c4a6219eba571536f4f84c082b8110f349eef1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Wed, 24 Jul 2024 14:56:43 +0200
Subject: [PATCH 13/81] refactor: pass marker instance through click event
 callback #338

---
 components/Home/Home.vue           | 14 +++---
 components/MainMap/MapFeatures.vue | 75 ++++++++----------------------
 components/Map/MapBase.vue         |  5 +-
 lib/markerLayerFactory.ts          | 12 ++---
 4 files changed, 35 insertions(+), 71 deletions(-)

diff --git a/components/Home/Home.vue b/components/Home/Home.vue
index 6baedce3..11120da6 100644
--- a/components/Home/Home.vue
+++ b/components/Home/Home.vue
@@ -223,22 +223,20 @@ const siteName = computed(() => {
 //
 // Watchers
 //
-watch(selectedFeature, () => {
-  isPoiCardShown.value = !!selectedFeature.value
+watch(selectedFeature, (newFeature) => {
+  isPoiCardShown.value = !!newFeature
 
   if (process.client) {
     routerPushUrl()
 
-    if (selectedFeature.value) {
+    if (newFeature) {
       $tracking({
         type: 'popup',
-        poiId:
-              selectedFeature.value.properties.metadata.id
-              || selectedFeature.value.properties?.id,
-        title: selectedFeature.value.properties?.name,
+        poiId: newFeature.properties.metadata.id || newFeature.properties?.id,
+        title: newFeature.properties?.name,
         location: window.location.href,
         path: route.path,
-        categoryIds: selectedFeature.value.properties?.metadata?.category_ids || [],
+        categoryIds: newFeature.properties?.metadata?.category_ids || [],
       })
     }
   }
diff --git a/components/MainMap/MapFeatures.vue b/components/MainMap/MapFeatures.vue
index 9c88e0ae..352cf504 100644
--- a/components/MainMap/MapFeatures.vue
+++ b/components/MainMap/MapFeatures.vue
@@ -1,7 +1,6 @@
 <script lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import type { MultiPolygon, Polygon } from 'geojson'
-import debounce from 'lodash.debounce'
 import type {
   FitBoundsOptions,
   GeoJSONSource,
@@ -9,9 +8,9 @@ import type {
   Map,
   MapDataEvent,
   MapMouseEvent,
+  Marker,
 } from 'maplibre-gl'
-import { Marker } from 'maplibre-gl'
-import { mapActions, mapState, mapWritableState, storeToRefs } from 'pinia'
+import { mapActions, mapState, storeToRefs } from 'pinia'
 import type { PropType } from 'vue'
 import { ref } from 'vue'
 import booleanIntersects from '@turf/boolean-intersects'
@@ -39,8 +38,6 @@ import { MapStyleEnum } from '~/utils/types'
 import { getHashPart } from '~/utils/url'
 import useDevice from '~/composables/useDevice'
 
-type ITMarker = InstanceType<typeof Marker>
-
 const STYLE_LAYERS = [
   'poi-level-1',
   'poi-level-2',
@@ -120,6 +117,7 @@ export default defineNuxtComponent({
     const { config } = storeToRefs(useSiteStore())
     const mapStore = useMapStore()
     const { center, selectedFeature } = storeToRefs(mapStore)
+    const mapStyleLoaded = ref(false)
 
     return {
       center,
@@ -127,20 +125,20 @@ export default defineNuxtComponent({
       device,
       mapBase: ref<InstanceType<typeof MapBase>>(),
       mapStore,
+      mapStyleLoaded,
       selectedFeature,
     }
   },
 
   data(): {
     map: Map
-    markers: { [id: string]: ITMarker }
-    selectedFeatureMarker: ITMarker | null
+    markers: { [id: string]: Marker }
+    selectedFeatureMarker?: Marker
     selectedBackground: MapStyleEnum
   } {
     return {
       map: null!,
       markers: {},
-      selectedFeatureMarker: null,
       selectedBackground: DEFAULT_MAP_STYLE,
     }
   },
@@ -215,10 +213,6 @@ export default defineNuxtComponent({
     },
   },
 
-  created() {
-    this.updateSelectedFeature = debounce(this.updateSelectedFeature, 300)
-  },
-
   beforeMount() {
     const bg = getHashPart(this.$router, 'bg') as keyof typeof MapStyleEnum
     this.selectedBackground = (bg && MapStyleEnum[bg]) || DEFAULT_MAP_STYLE
@@ -263,7 +257,9 @@ export default defineNuxtComponent({
           this.map.getCanvas().style.cursor = ''
         })
       })
+
       this.showSelectedFeature()
+      this.mapStyleLoaded = true
     },
 
     // Map interactions
@@ -281,18 +277,20 @@ export default defineNuxtComponent({
         // Set temp partial data from vector tiles. Then fetch full data
         this.updateSelectedFeature(
           vectorTilesPoi2ApiPoi(selectedFeatures[0]),
+          undefined,
           true,
         )
         this.showSelectedFeature()
       }
       else {
-        this.updateSelectedFeature(null)
+        this.updateSelectedFeature(null, undefined)
       }
     },
 
-    updateSelectedFeature(feature: ApiPoi | null, fetch = false) {
+    updateSelectedFeature(feature: ApiPoi | null, marker?: Marker, fetch = false) {
       if (this.selectedFeature !== feature) {
         this.mapStore.setSelectedFeature(feature)
+        this.setSelectedFeatureMarker(marker)
 
         if (feature && fetch && feature.properties.metadata.id) {
           try {
@@ -316,12 +314,10 @@ export default defineNuxtComponent({
     },
 
     // Map view
-
     onMapRender() {
-      // Put selected feature marker on top
-      if (this.selectedFeatureMarker) {
-        this.selectedFeatureMarker.remove()
-        this.selectedFeatureMarker.addTo(this.map as Map)
+      if (this.mapStyleLoaded && this.selectedFeature) {
+        const marker = createMarker((this.selectedFeature.geometry as GeoJSON.Point).coordinates as [number, number])
+        this.setSelectedFeatureMarker(marker)
       }
     },
 
@@ -407,13 +403,6 @@ export default defineNuxtComponent({
     },
 
     showSelectedFeature() {
-      // Clean-up previous marker
-      if (this.selectedFeatureMarker) {
-        this.selectedFeatureMarker.remove()
-        this.selectedFeatureMarker = null
-      }
-
-      // Add new marker if a feature is selected
       if (
         this.selectedFeature
         && (this.selectedFeature.properties?.metadata?.id
@@ -425,35 +414,6 @@ export default defineNuxtComponent({
           || this.selectedFeature?.id
           || this.selectedFeature?.properties?.id,
         ])
-
-        if (
-          ['Point', 'MultiLineString', 'LineString'].includes(
-            this.selectedFeature.geometry.type,
-          )
-        ) {
-          // Get original coords to set exact marker position
-          const originalFeature = this.features.find(
-            originalFeature =>
-              originalFeature.properties?.metadata?.id
-              && this.selectedFeature?.properties?.metadata?.id
-              && originalFeature.properties?.metadata?.id
-              === this.selectedFeature?.properties?.metadata?.id,
-          )
-          const lngLat = (
-            originalFeature && originalFeature.geometry.type === 'Point'
-              ? originalFeature.geometry.coordinates
-              : this.selectedFeature.geometry.type === 'Point'
-                ? this.selectedFeature.geometry?.coordinates
-                : this.defaultBounds
-          ) as [number, number]
-
-          this.selectedFeatureMarker = new Marker({
-            scale: 1.3,
-            color: '#f44336',
-          })
-            .setLngLat(lngLat)
-            .addTo(this.map as Map)
-        }
       }
       else {
         if (this.enableFilterRouteByFeatures) {
@@ -472,6 +432,11 @@ export default defineNuxtComponent({
           filterRouteByCategories(this.map as Map, this.selectedCategoriesIds)
       }
     },
+
+    setSelectedFeatureMarker(marker?: Marker) {
+      this.selectedFeatureMarker?.remove()
+      this.selectedFeatureMarker = marker?.addTo(this.map as Map)
+    },
   },
 })
 </script>
diff --git a/components/Map/MapBase.vue b/components/Map/MapBase.vue
index cce08f70..3410a410 100644
--- a/components/Map/MapBase.vue
+++ b/components/Map/MapBase.vue
@@ -11,6 +11,7 @@ import type {
   MapDataEvent,
   MapLibreEvent,
   MapTouchEvent,
+  Marker,
 } from 'maplibre-gl'
 import type { PropType } from 'vue'
 
@@ -161,7 +162,7 @@ export default defineNuxtComponent({
       object,
     ) => true,
     mapStyleLoad: (_style: maplibregl.StyleSpecification) => true,
-    featureClick: (_feature: ApiPoi) => true,
+    featureClick: (_feature: ApiPoi, _marker?: Marker) => true,
   },
 
   methods: {
@@ -362,7 +363,7 @@ export default defineNuxtComponent({
           this.markers,
           POI_SOURCE,
           this.fitBounds,
-          (feature: ApiPoi) => this.$emit('featureClick', feature),
+          (feature: ApiPoi, marker?: Marker) => this.$emit('featureClick', feature, marker),
         )
       }
 
diff --git a/lib/markerLayerFactory.ts b/lib/markerLayerFactory.ts
index 5857ee2d..bf0aba1a 100644
--- a/lib/markerLayerFactory.ts
+++ b/lib/markerLayerFactory.ts
@@ -16,8 +16,6 @@ import TeritorioIconBadge from '~/components/UI/TeritorioIconBadge.vue'
 import type { TupleLatLng } from '~/utils/types'
 import { createMarker } from '~/composables/useMarker'
 
-type ITMarker = InstanceType<typeof Marker>
-
 export function markerLayerTextFactory(layerTemplate: LayerSpecification, id: string, source: string): LayerSpecification {
   if (layerTemplate.type !== 'symbol') {
     return layerTemplate
@@ -78,7 +76,7 @@ export function makerHtmlFactory(
   thumbnail: string | undefined,
   size: string | null = null,
   text?: string,
-): ITMarker {
+): Marker {
   // Marker
   const el: HTMLElement = document.createElement('div')
   el.id = id
@@ -106,10 +104,10 @@ export function makerHtmlFactory(
 
 export function updateMarkers(
   map: Map,
-  markers: { [id: string]: ITMarker },
+  markers: { [id: string]: Marker },
   src: string,
   fitBounds: (bounds: LngLatBounds, options: FitBoundsOptions) => void,
-  markerClickCallBack: ((feature: ApiPoi) => void) | undefined,
+  markerClickCallBack: ((feature: ApiPoi, marker?: Marker) => void) | undefined,
 ) {
   const markerIdPrevious = Object.keys(markers)
   const markerIdcurrent: string[] = []
@@ -203,7 +201,9 @@ export function updateMarkers(
 
               el.addEventListener('click', (e: MouseEvent) => {
                 e.stopPropagation()
-                markerClickCallBack(feature as unknown as ApiPoi)
+                const pinMarker = createMarker(markerCoords)
+
+                markerClickCallBack(feature as unknown as ApiPoi, pinMarker)
               })
             }
             markers[id].addTo(map)

From e24f38438f459782fbe7376d6c3f36c08f553b8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Wed, 31 Jul 2024 14:46:49 +0200
Subject: [PATCH 14/81] fix: rollback debounce on updateSelectedFeature #345

---
 components/MainMap/MapFeatures.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/components/MainMap/MapFeatures.vue b/components/MainMap/MapFeatures.vue
index 352cf504..0e1962b0 100644
--- a/components/MainMap/MapFeatures.vue
+++ b/components/MainMap/MapFeatures.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import type { MultiPolygon, Polygon } from 'geojson'
+import debounce from 'lodash.debounce'
 import type {
   FitBoundsOptions,
   GeoJSONSource,
@@ -112,6 +113,10 @@ export default defineNuxtComponent({
     },
   },
 
+  created() {
+    this.updateSelectedFeature = debounce(this.updateSelectedFeature, 300)
+  },
+
   setup() {
     const device = useDevice()
     const { config } = storeToRefs(useSiteStore())

From 040a64e47ef5c85cae45de842da872c3f5c9b219 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 30 Jul 2024 17:17:08 +0200
Subject: [PATCH 15/81] chore: update maplibre to v4.0.0 #343

---
 lib/markerLayerFactory.ts | 176 ++++++++++++++++++--------------------
 package.json              |   2 +-
 yarn.lock                 |  42 +++++----
 3 files changed, 112 insertions(+), 108 deletions(-)

diff --git a/lib/markerLayerFactory.ts b/lib/markerLayerFactory.ts
index bf0aba1a..54ffcb5e 100644
--- a/lib/markerLayerFactory.ts
+++ b/lib/markerLayerFactory.ts
@@ -1,5 +1,6 @@
 import type {
   FitBoundsOptions,
+  GeoJSONSource,
   LayerSpecification,
   LngLatBounds,
   Map,
@@ -112,105 +113,96 @@ export function updateMarkers(
   const markerIdPrevious = Object.keys(markers)
   const markerIdcurrent: string[] = []
 
-  const features = map.querySourceFeatures(src)
+  const features = map.querySourceFeatures(src).filter(feature => feature.geometry.type === 'Point')
   // for every cluster on the screen, create an HTML marker for it (if we didn't yet),
   // and add it to the map if it's not there already
-  features
-    .filter(feature => feature.geometry.type === 'Point')
-    .forEach((feature) => {
-      const coords = (feature.geometry as GeoJSON.Point).coordinates as [
-        number,
-        number,
-      ]
-      const props = feature.properties
-      if (props?.cluster) {
-        const id = `c${props.cluster_id}`
-        markerIdcurrent.push(id)
-        if (!markers[id]) {
-          const {
-            cluster: _a,
-            cluster_id: _b,
-            point_count,
-            _c: _d,
-            point_count_abbreviated: _e,
-            ...countPercolor
-          } = props
-          const element = createMarkerDonutChart(countPercolor, point_count)
-
-          markers[id] = createMarker(coords, { element })
-          markers[id].addTo(map)
-
-          element.addEventListener('click', (e) => {
-            e.stopPropagation()
-            const source = map.getSource(src)
-
-            if (source && 'getClusterLeaves' in source) {
-              // @ts-expect-error: getClusterLeaves is for GeoJSONSource but source is Source type
-              source.getClusterLeaves(
-                props.cluster_id,
-                100,
-                0,
-                (error: any, features: GeoJSON.Feature[]) => {
-                  if (!error && map) {
-                    const bounds = getBBoxFeatures(features)
-                    if (bounds)
-                      fitBounds(bounds, {})
-                  }
-                },
-              )
+  for (let i = 0; i < features.length; i++) {
+    const coords = (features[i].geometry as GeoJSON.Point).coordinates as [
+      number,
+      number,
+    ]
+    const props = features[i].properties
+    if (props?.cluster) {
+      const id = `c${props.cluster_id}`
+      markerIdcurrent.push(id)
+      if (!markers[id]) {
+        const {
+          cluster: _a,
+          cluster_id: _b,
+          point_count,
+          _c: _d,
+          point_count_abbreviated: _e,
+          ...countPercolor
+        } = props
+        const element = createMarkerDonutChart(countPercolor, point_count)
+
+        markers[id] = createMarker(coords, { element })
+        markers[id].addTo(map)
+
+        element.addEventListener('click', async (e) => {
+          e.stopPropagation()
+          const source = map.getSource(src) as GeoJSONSource
+
+          if (source && 'getClusterLeaves' in source) {
+            const leaves = await source.getClusterLeaves(props.cluster_id, props.point_count, 0)
+            if (leaves.length) {
+              const bounds = getBBoxFeatures(leaves)
+              if (bounds)
+                fitBounds(bounds, {})
             }
-          })
-        }
+          }
+        })
       }
-      else if (props?.metadata) {
-        if (typeof props.metadata === 'string')
-          props.metadata = JSON.parse(props.metadata)
-
-        const id = `m${feature.id}`
-        markerIdcurrent.push(id)
-
-        // Workaround to correct shifting POI markers after zoom-in
-        if (!markers[id] || (markers[id] && (markers[id]?.getLngLat().lat !== (feature.geometry as GeoJSON.Point).coordinates[1]))) {
-          if (markers[id])
-            markers[id].remove()
-
-          const markerCoords
-            = feature.geometry.type === 'Point'
-            && (feature.geometry.coordinates as TupleLatLng)
-          if (markerCoords) {
-            if (typeof props.display === 'string')
-              props.display = JSON.parse(props.display)
-
-            if (typeof props.editorial === 'string')
-              props.editorial = JSON.parse(props.editorial)
-
-            // Marker
-            markers[id] = makerHtmlFactory(
-              id,
-              markerCoords, // Using this to avoid misplaced marker
-              props.display?.color_fill || '#000000',
-              props.display?.icon || '#000000',
-              props['image:thumbnail'],
-              null,
-              props.display?.text,
-            )
-
-            // Click handler
-            if (markerClickCallBack && props.editorial?.popup_fields) {
-              const el = markers[id].getElement()
-
-              el.addEventListener('click', (e: MouseEvent) => {
-                e.stopPropagation()
-                const pinMarker = createMarker(markerCoords)
-
-                markerClickCallBack(feature as unknown as ApiPoi, pinMarker)
-              })
-            }
-            markers[id].addTo(map)
+    }
+    else if (props?.metadata) {
+      if (typeof props.metadata === 'string')
+        props.metadata = JSON.parse(props.metadata)
+
+      const id = `m${features[i].id}`
+      markerIdcurrent.push(id)
+
+      // Workaround to correct shifting POI markers after zoom-in
+      if (!markers[id] || (markers[id] && (markers[id]?.getLngLat().lat !== (features[i].geometry as GeoJSON.Point).coordinates[1]))) {
+        if (markers[id])
+          markers[id].remove()
+
+        const markerCoords
+            = features[i].geometry.type === 'Point'
+            && ((features[i].geometry as GeoJSON.Point).coordinates as TupleLatLng)
+        if (markerCoords) {
+          if (typeof props.display === 'string')
+            props.display = JSON.parse(props.display)
+
+          if (typeof props.editorial === 'string')
+            props.editorial = JSON.parse(props.editorial)
+
+          // Marker
+          markers[id] = makerHtmlFactory(
+            id,
+            markerCoords, // Using this to avoid misplaced marker
+            props.display?.color_fill || '#000000',
+            props.display?.icon || '#000000',
+            props['image:thumbnail'],
+            null,
+            props.display?.text,
+          )
+
+          // Click handler
+          if (markerClickCallBack && props.editorial?.popup_fields) {
+            const el = markers[id].getElement()
+
+            el.addEventListener('click', (e: MouseEvent) => {
+              e.stopPropagation()
+              const pinMarker = createMarker(markerCoords)
+
+              markerClickCallBack(features[i] as unknown as ApiPoi, pinMarker)
+            })
           }
+          markers[id].addTo(map)
         }
       }
-    })
+    }
+  }
 
   // for every marker we've added previously, remove those that are no longer visible
   const markerIdcurrentSet = new Set(markerIdcurrent)
diff --git a/package.json b/package.json
index b2a17ac0..ac7f357e 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "lodash.uniq": "^4.5.0",
     "lodash.uniqby": "^4.7.0",
     "lodash.without": "^4.4.0",
-    "maplibre-gl": "^3.6.2",
+    "maplibre-gl": "4.0.0",
     "opening_hours": "^3.8.0",
     "pinia": "^2.0.33",
     "pinia-shared-state": "0.5.1",
diff --git a/yarn.lock b/yarn.lock
index 0a353503..4af73fa1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1952,21 +1952,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@maplibre/maplibre-gl-style-spec@npm:^19.3.3":
-  version: 19.3.3
-  resolution: "@maplibre/maplibre-gl-style-spec@npm:19.3.3"
+"@maplibre/maplibre-gl-style-spec@npm:^20.1.0":
+  version: 20.3.0
+  resolution: "@maplibre/maplibre-gl-style-spec@npm:20.3.0"
   dependencies:
     "@mapbox/jsonlint-lines-primitives": "npm:~2.0.2"
     "@mapbox/unitbezier": "npm:^0.0.1"
-    json-stringify-pretty-compact: "npm:^3.0.0"
+    json-stringify-pretty-compact: "npm:^4.0.0"
     minimist: "npm:^1.2.8"
+    quickselect: "npm:^2.0.0"
     rw: "npm:^1.3.3"
     sort-object: "npm:^3.0.3"
+    tinyqueue: "npm:^2.0.3"
   bin:
     gl-style-format: dist/gl-style-format.mjs
     gl-style-migrate: dist/gl-style-migrate.mjs
     gl-style-validate: dist/gl-style-validate.mjs
-  checksum: 10c0/ef315bf9c4e5ebce0d76a7722e53c3e4192b92ea405c95392f61655f551a112bbc17fd00c7c62a16eeb57cdb79a2145e385c4eaf2ca7f50222d2540c9e7e0a7a
+  checksum: 10c0/86c55a71b58a3895e56070e8a912449d6cfec25e2b4a1a9847a51bf5abd666416ecd8515ebf07557a07f51af1ae4b19e3b1247a105368141f4982cefe067105e
   languageName: node
   linkType: hard
 
@@ -3563,7 +3565,7 @@ __metadata:
     lodash.uniq: "npm:^4.5.0"
     lodash.uniqby: "npm:^4.7.0"
     lodash.without: "npm:^4.4.0"
-    maplibre-gl: "npm:^3.6.2"
+    maplibre-gl: "npm:4.0.0"
     msw: "npm:^1.2.2"
     nuxt: "npm:3.8.0"
     nuxt-simple-sitemap: "npm:^2.7.0"
@@ -3929,6 +3931,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/geojson-vt@npm:3.2.5":
+  version: 3.2.5
+  resolution: "@types/geojson-vt@npm:3.2.5"
+  dependencies:
+    "@types/geojson": "npm:*"
+  checksum: 10c0/bfd9157c7d0441dc4b420e0c6df65b4e4b29f3d33cc77667b3dc5acd68ba6326bfbfd867642645357382e3374ceebfb9c5d15f2b2c0ee3e3c492e0b5a2bb71be
+  languageName: node
+  linkType: hard
+
 "@types/geojson@npm:*, @types/geojson@npm:^7946.0.10, @types/geojson@npm:^7946.0.13":
   version: 7946.0.14
   resolution: "@types/geojson@npm:7946.0.14"
@@ -10519,10 +10530,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json-stringify-pretty-compact@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "json-stringify-pretty-compact@npm:3.0.0"
-  checksum: 10c0/fc522c25047bd96d72ded77af4002e7f12e9ba9f4b7e7e12a9316aee166f1b8f9c7b0d0d989a8494e3fdd804a23819f411479f68f2ef10b2f7a144581b2c68f4
+"json-stringify-pretty-compact@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "json-stringify-pretty-compact@npm:4.0.0"
+  checksum: 10c0/505781b4be7c72047ae8dfa667b520d20461ceac451b6516cb8ac5e12a758fbd7491d99d5e3f7e60423ce9d26ed4e4bcaccab3420bf651298901635c849017cf
   languageName: node
   linkType: hard
 
@@ -11107,9 +11118,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"maplibre-gl@npm:^3.6.2":
-  version: 3.6.2
-  resolution: "maplibre-gl@npm:3.6.2"
+"maplibre-gl@npm:4.0.0":
+  version: 4.0.0
+  resolution: "maplibre-gl@npm:4.0.0"
   dependencies:
     "@mapbox/geojson-rewind": "npm:^0.5.2"
     "@mapbox/jsonlint-lines-primitives": "npm:^2.0.2"
@@ -11118,8 +11129,9 @@ __metadata:
     "@mapbox/unitbezier": "npm:^0.0.1"
     "@mapbox/vector-tile": "npm:^1.3.1"
     "@mapbox/whoots-js": "npm:^3.1.0"
-    "@maplibre/maplibre-gl-style-spec": "npm:^19.3.3"
+    "@maplibre/maplibre-gl-style-spec": "npm:^20.1.0"
     "@types/geojson": "npm:^7946.0.13"
+    "@types/geojson-vt": "npm:3.2.5"
     "@types/mapbox__point-geometry": "npm:^0.1.4"
     "@types/mapbox__vector-tile": "npm:^1.3.4"
     "@types/pbf": "npm:^3.0.5"
@@ -11136,7 +11148,7 @@ __metadata:
     supercluster: "npm:^8.0.1"
     tinyqueue: "npm:^2.0.3"
     vt-pbf: "npm:^3.1.3"
-  checksum: 10c0/51245b634087dd5f2a971b1dfa4170b98e10472e0d00859774d2ab1bd646de9a78342616862f4a66e932d0a75a6a5695258ce044f128a26e77d2f6b9efe7dafe
+  checksum: 10c0/a501283283f67bd4673b922974cda4579756996a2c4f971e0a6c2976df80e7567c2fa5de0f763f9bb394b5ebffd7ed58747fe34dc0f36179bb41b0ce18393458
   languageName: node
   linkType: hard
 

From f4ebd35d4a4088dd530c8884f1813085191c05d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 1 Aug 2024 12:17:42 +0200
Subject: [PATCH 16/81] refactor: maplibre styles #347

---
 components/Map/MapBase.vue | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/components/Map/MapBase.vue b/components/Map/MapBase.vue
index 3410a410..99d8f73f 100644
--- a/components/Map/MapBase.vue
+++ b/components/Map/MapBase.vue
@@ -4,14 +4,17 @@ import copy from 'fast-copy'
 import type { MultiLineString, MultiPoint, MultiPolygon, Polygon } from 'geojson'
 import throttle from 'lodash.throttle'
 import type {
+  ExpressionSpecification,
   FitBoundsOptions,
   LayerSpecification,
   LngLatBounds,
   LngLatLike,
   MapDataEvent,
+  Map as MapGL,
   MapLibreEvent,
   MapTouchEvent,
   Marker,
+  StyleSpecification,
 } from 'maplibre-gl'
 import type { PropType } from 'vue'
 
@@ -101,10 +104,10 @@ export default defineNuxtComponent({
   },
 
   data(): {
-    map: maplibregl.Map
+    map: MapGL
     poiFilter: PoiFilter | null
-    poiLayerTemplate: maplibregl.LayerSpecification | undefined
-    markers: { [id: string]: maplibregl.Marker }
+    poiLayerTemplate: LayerSpecification | undefined
+    markers: { [id: string]: Marker }
     fullAttribution: string
   } {
     return {
@@ -143,7 +146,7 @@ export default defineNuxtComponent({
   },
 
   emits: {
-    mapInit: (_map: maplibregl.Map) => true,
+    mapInit: (_map: MapGL) => true,
     mapData: (_event: MapDataEvent & object) => true,
     mapDragEnd: (
       _event: MapLibreEvent<MouseEvent | TouchEvent | undefined> & object,
@@ -161,7 +164,7 @@ export default defineNuxtComponent({
       _event: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> &
       object,
     ) => true,
-    mapStyleLoad: (_style: maplibregl.StyleSpecification) => true,
+    mapStyleLoad: (_style: StyleSpecification) => true,
     featureClick: (_feature: ApiPoi, _marker?: Marker) => true,
   },
 
@@ -205,7 +208,7 @@ export default defineNuxtComponent({
     initPoiLayer(
       features: MapPoi[],
       clusterPropertiesValues: string[],
-      clusterPropertiesKeyExpression: maplibregl.ExpressionSpecification,
+      clusterPropertiesKeyExpression: ExpressionSpecification,
       cluster?: boolean,
     ) {
       if (this.map.getLayer(POI_LAYER))
@@ -261,12 +264,12 @@ export default defineNuxtComponent({
       }
     },
 
-    onMapInit(map: maplibregl.Map) {
+    onMapInit(map: MapGL) {
       this.map = map
       this.$emit('mapInit', map)
     },
 
-    onMapStyleLoad(style: maplibregl.StyleSpecification) {
+    onMapStyleLoad(style: StyleSpecification) {
       this.poiLayerTemplate = style.layers.find(
         layer => layer.id === 'poi-level-1',
       )
@@ -359,7 +362,7 @@ export default defineNuxtComponent({
         && this.map.isSourceLoaded(POI_SOURCE)
       ) {
         this.markers = updateMarkers(
-          this.map as maplibregl.Map,
+          this.map as MapGL,
           this.markers,
           POI_SOURCE,
           this.fitBounds,

From d1928535e40fd8843285a5d9cb003b2e74630dd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 1 Aug 2024 12:47:44 +0200
Subject: [PATCH 17/81] chore: update maplibre-gl to v4.5.0 #374

---
 package.json |  2 +-
 yarn.lock    | 36 ++++++++++++++++++++++--------------
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index ac7f357e..9ded8020 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "lodash.uniq": "^4.5.0",
     "lodash.uniqby": "^4.7.0",
     "lodash.without": "^4.4.0",
-    "maplibre-gl": "4.0.0",
+    "maplibre-gl": "4.5.0",
     "opening_hours": "^3.8.0",
     "pinia": "^2.0.33",
     "pinia-shared-state": "0.5.1",
diff --git a/yarn.lock b/yarn.lock
index 4af73fa1..e55c441e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1952,7 +1952,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@maplibre/maplibre-gl-style-spec@npm:^20.1.0":
+"@maplibre/maplibre-gl-style-spec@npm:^20.3.0":
   version: 20.3.0
   resolution: "@maplibre/maplibre-gl-style-spec@npm:20.3.0"
   dependencies:
@@ -3565,7 +3565,7 @@ __metadata:
     lodash.uniq: "npm:^4.5.0"
     lodash.uniqby: "npm:^4.7.0"
     lodash.without: "npm:^4.4.0"
-    maplibre-gl: "npm:4.0.0"
+    maplibre-gl: "npm:4.5.0"
     msw: "npm:^1.2.2"
     nuxt: "npm:3.8.0"
     nuxt-simple-sitemap: "npm:^2.7.0"
@@ -3940,7 +3940,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/geojson@npm:*, @types/geojson@npm:^7946.0.10, @types/geojson@npm:^7946.0.13":
+"@types/geojson@npm:*, @types/geojson@npm:^7946.0.10, @types/geojson@npm:^7946.0.14":
   version: 7946.0.14
   resolution: "@types/geojson@npm:7946.0.14"
   checksum: 10c0/54f3997708fa2970c03eeb31f7e4540a0eb6387b15e9f8a60513a1409c23cafec8d618525404573468b59c6fecbfd053724b3327f7fca416729c26271d799f55
@@ -4002,6 +4002,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/junit-report-builder@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "@types/junit-report-builder@npm:3.0.2"
+  checksum: 10c0/3848c5247a57597695c86ab7a80cf64ba0bfcbc39e067e9e2e051eea80608a95261de065298aaaaee795b137b076f5ab3acb4e3ba003ee637a9dfd9715f86456
+  languageName: node
+  linkType: hard
+
 "@types/less@npm:3.0.6":
   version: 3.0.6
   resolution: "@types/less@npm:3.0.6"
@@ -8914,10 +8921,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"geojson-vt@npm:^3.2.1":
-  version: 3.2.1
-  resolution: "geojson-vt@npm:3.2.1"
-  checksum: 10c0/db2fc1a452067ee8436fa86e5a138f6ebd3d64893e0af097bc1cc960ec63d67c0ce77444711e9583036192d6bf9ce754bf9b56a76789684fc0fea4d52321fffc
+"geojson-vt@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "geojson-vt@npm:4.0.2"
+  checksum: 10c0/f2ca14d868e46f6262f5d3862f8e38a2418ecf9bd7cd6938a67bf87f1e2f8fbf65345d95996711b07cdf8f05ef512be0e2c20f0a8179c6393c2fd41badcb0532
   languageName: node
   linkType: hard
 
@@ -11118,9 +11125,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"maplibre-gl@npm:4.0.0":
-  version: 4.0.0
-  resolution: "maplibre-gl@npm:4.0.0"
+"maplibre-gl@npm:4.5.0":
+  version: 4.5.0
+  resolution: "maplibre-gl@npm:4.5.0"
   dependencies:
     "@mapbox/geojson-rewind": "npm:^0.5.2"
     "@mapbox/jsonlint-lines-primitives": "npm:^2.0.2"
@@ -11129,15 +11136,16 @@ __metadata:
     "@mapbox/unitbezier": "npm:^0.0.1"
     "@mapbox/vector-tile": "npm:^1.3.1"
     "@mapbox/whoots-js": "npm:^3.1.0"
-    "@maplibre/maplibre-gl-style-spec": "npm:^20.1.0"
-    "@types/geojson": "npm:^7946.0.13"
+    "@maplibre/maplibre-gl-style-spec": "npm:^20.3.0"
+    "@types/geojson": "npm:^7946.0.14"
     "@types/geojson-vt": "npm:3.2.5"
+    "@types/junit-report-builder": "npm:^3.0.2"
     "@types/mapbox__point-geometry": "npm:^0.1.4"
     "@types/mapbox__vector-tile": "npm:^1.3.4"
     "@types/pbf": "npm:^3.0.5"
     "@types/supercluster": "npm:^7.1.3"
     earcut: "npm:^2.2.4"
-    geojson-vt: "npm:^3.2.1"
+    geojson-vt: "npm:^4.0.2"
     gl-matrix: "npm:^3.4.3"
     global-prefix: "npm:^3.0.0"
     kdbush: "npm:^4.0.2"
@@ -11148,7 +11156,7 @@ __metadata:
     supercluster: "npm:^8.0.1"
     tinyqueue: "npm:^2.0.3"
     vt-pbf: "npm:^3.1.3"
-  checksum: 10c0/a501283283f67bd4673b922974cda4579756996a2c4f971e0a6c2976df80e7567c2fa5de0f763f9bb394b5ebffd7ed58747fe34dc0f36179bb41b0ce18393458
+  checksum: 10c0/137142176c5dea24f217da2f24c4ccf1b2d685d68524f392bd514a395eaeb3cad28834974e457ddff7e01758c295d8be138ef71c86d8e6a84e3fc1a0217e237b
   languageName: node
   linkType: hard
 

From 478d0e348014f9c0f54ea56ad113fd9c67c0ecbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 1 Aug 2024 16:27:34 +0200
Subject: [PATCH 18/81] fix: map attribution hidden on desktop #347

---
 components/Map/Map.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Map/Map.vue b/components/Map/Map.vue
index 75cbcbc2..5608966d 100644
--- a/components/Map/Map.vue
+++ b/components/Map/Map.vue
@@ -330,7 +330,7 @@ export default defineNuxtComponent({
     addAttribution() {
       this.doWithMap(() => {
         if (!this.attributionControl) {
-          this.attributionControl = new AttributionControl()
+          this.attributionControl = new AttributionControl({ compact: false })
           this.map!.addControl(this.attributionControl)
         }
       })

From bdb7708211646499f6e44f8481acc316242623dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 16 Sep 2024 15:21:06 +0200
Subject: [PATCH 19/81] fix: client-only hydration mismatch #354

---
 components/Home/Home.vue | 92 +++++++++++++++++++++-------------------
 1 file changed, 49 insertions(+), 43 deletions(-)

diff --git a/components/Home/Home.vue b/components/Home/Home.vue
index 11120da6..59da0e3d 100644
--- a/components/Home/Home.vue
+++ b/components/Home/Home.vue
@@ -451,11 +451,11 @@ function handlePoiCardClose() {
     <h1 class="tw-absolute tw-text-white">
       {{ siteName }}
     </h1>
-    <header
-      class="tw-flex md:tw-hidden tw-relative tw-fidex tw-top-0 tw-bottom-0 tw-z-10 tw-flex-row tw-w-full tw-space-x-4"
-    >
-      <div class="tw-w-full" :class="[isBottomMenuOpened && 'tw-hidden']">
-        <client-only>
+    <ClientOnly>
+      <header
+        class="tw-flex md:tw-hidden tw-relative tw-fidex tw-top-0 tw-bottom-0 tw-z-10 tw-flex-row tw-w-full tw-space-x-4"
+      >
+        <div class="tw-w-full" :class="[isBottomMenuOpened && 'tw-hidden']">
           <aside
             v-if="!isModeExplorerOrFavorites"
             class="tw-flex tw-flex-col tw-max-h-full tw-px-5 tw-py-4 tw-space-y-6 tw-shadow-md tw-pointer-events-auto md:tw-rounded-xl md:tw-w-96 tw-bg-white tw-min-h-20"
@@ -480,9 +480,9 @@ function handlePoiCardClose() {
           >
             <ExplorerOrFavoritesBack @click="onQuitExplorerFavoriteMode" />
           </aside>
-        </client-only>
-      </div>
-    </header>
+        </div>
+      </header>
+    </ClientOnly>
 
     <div v-if="initialBbox" class="tw-w-full tw-h-full">
       <header
@@ -597,43 +597,15 @@ function handlePoiCardClose() {
       v-if="showFavoritesOverlay"
       @discard="showFavoritesOverlay = false"
     />
-    <div
-      class="tw-hidden tw-fixed tw-inset-x-0 tw-bottom-0 md:tw-flex tw-overflow-y-auto tw-h-auto md:tw-left-8 md:tw-right-16 md:tw-bottom-5 tw-pointer-events-none"
-    >
-      <div class="tw-w-full tw-max-w-md" />
-      <div class="tw-grow-[1]" />
-      <PoiCard
-        v-if="
-          selectedFeature
-            && selectedFeature.properties
-            && selectedFeature.properties.metadata
-            && isPoiCardShown
-        "
-        :can-close="device.smallScreen"
-        :poi="selectedFeature"
-        class="tw-grow-0"
-        :explorer-mode-enabled="explorerModeEnabled"
-        :favorites-mode-enabled="favoritesModeEnabled"
-        @explore-click="toggleExploreAroundSelectedPoi"
-        @favorite-click="toggleFavorite"
-        @zoom-click="goToSelectedFeature"
-        @on-close="handlePoiCardClose"
-      />
-      <div class="tw-grow-[3]" />
-    </div>
 
-    <BottomMenu class="md:tw-hidden" :is-open="isBottomMenuOpened">
+    <ClientOnly>
       <div
-        ref="bottomMenuRef"
-        class="tw-flex-1 tw-h-full tw-overflow-y-auto tw-h-screen-3/5 tw-divide-y"
+        class="tw-hidden tw-fixed tw-inset-x-0 tw-bottom-0 md:tw-flex tw-overflow-y-auto tw-h-auto md:tw-left-8 md:tw-right-16 md:tw-bottom-5 tw-pointer-events-none"
       >
-        <Menu
-          v-if="!isPoiCardShown"
-          menu-block="MenuBlockBottom"
-          @scroll-top="scrollTop"
-        />
+        <div class="tw-w-full tw-max-w-md" />
+        <div class="tw-grow-[1]" />
         <PoiCard
-          v-else-if="
+          v-if="
             selectedFeature
               && selectedFeature.properties
               && selectedFeature.properties.metadata
@@ -641,7 +613,7 @@ function handlePoiCardClose() {
           "
           :can-close="device.smallScreen"
           :poi="selectedFeature"
-          class="tw-grow-0 tw-text-left tw-h-full"
+          class="tw-grow-0"
           :explorer-mode-enabled="explorerModeEnabled"
           :favorites-mode-enabled="favoritesModeEnabled"
           @explore-click="toggleExploreAroundSelectedPoi"
@@ -649,8 +621,42 @@ function handlePoiCardClose() {
           @zoom-click="goToSelectedFeature"
           @on-close="handlePoiCardClose"
         />
+        <div class="tw-grow-[3]" />
       </div>
-    </BottomMenu>
+    </ClientOnly>
+
+    <ClientOnly>
+      <BottomMenu class="md:tw-hidden" :is-open="isBottomMenuOpened">
+        <div
+          ref="bottomMenuRef"
+          class="tw-flex-1 tw-h-full tw-overflow-y-auto tw-h-screen-3/5 tw-divide-y"
+        >
+          <Menu
+            v-if="!isPoiCardShown"
+            menu-block="MenuBlockBottom"
+            @scroll-top="scrollTop"
+          />
+          <PoiCard
+            v-else-if="
+              selectedFeature
+                && selectedFeature.properties
+                && selectedFeature.properties.metadata
+                && isPoiCardShown
+            "
+            :can-close="device.smallScreen"
+            :poi="selectedFeature"
+            class="tw-grow-0 tw-text-left tw-h-full"
+            :explorer-mode-enabled="explorerModeEnabled"
+            :favorites-mode-enabled="favoritesModeEnabled"
+            @explore-click="toggleExploreAroundSelectedPoi"
+            @favorite-click="toggleFavorite"
+            @zoom-click="goToSelectedFeature"
+            @on-close="handlePoiCardClose"
+          />
+        </div>
+      </BottomMenu>
+    </ClientOnly>
+
     <footer class="tw-z-20">
       <CookiesConsent />
     </footer>

From 10d5d93eb70efd62c3847e27895b6f2066554bee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 17 Sep 2024 10:59:22 +0200
Subject: [PATCH 20/81] feat: add local source style support  #281

---
 utils/styles.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/utils/styles.ts b/utils/styles.ts
index 52fec54f..08af5d4a 100644
--- a/utils/styles.ts
+++ b/utils/styles.ts
@@ -16,10 +16,15 @@ export function fetchStyle(styleUrl: string, extraAttributions: string[]): Promi
         url: string
         attribution: string
       }[] = Object.values(style.sources)
+
       const vectoSourceUrl: string[] = vectoSources
         .map((src: any) => src.url)
         .filter(url => url)
 
+      const vectoSourcesLocal: string[] = vectoSources
+        .filter((source: any) => source.tiles?.length)
+        .map((source: any) => source.attribution)
+
       const vectoSourceAttribution = (
         await Promise.all(
           vectoSourceUrl
@@ -42,7 +47,7 @@ export function fetchStyle(styleUrl: string, extraAttributions: string[]): Promi
       )
 
       const nuAttribution = [
-        ...new Set([...vectoSourceAttribution.flat(1), ...extraAttributions]),
+        ...new Set([...vectoSourceAttribution.flat(1), ...vectoSourcesLocal, ...extraAttributions]),
       ].join(' ')
 
       const nuStyle = { ...style }

From c8ac88ff493397fdbc28e955c3d3857bfecb58fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 10 Sep 2024 15:51:08 +0200
Subject: [PATCH 21/81] refactor: use script setup style #327

---
 components/Home/ExplorerOrFavoritesBack.vue | 42 ++++++++-------------
 1 file changed, 16 insertions(+), 26 deletions(-)

diff --git a/components/Home/ExplorerOrFavoritesBack.vue b/components/Home/ExplorerOrFavoritesBack.vue
index 181edd99..92631718 100644
--- a/components/Home/ExplorerOrFavoritesBack.vue
+++ b/components/Home/ExplorerOrFavoritesBack.vue
@@ -1,36 +1,26 @@
-<script lang="ts">
+<script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { storeToRefs } from 'pinia'
-
-import { defineNuxtComponent } from '#app'
 import { mapStore as useMapStore } from '~/stores/map'
 import useDevice from '~/composables/useDevice'
 
-export default defineNuxtComponent({
-  components: {
-    FontAwesomeIcon,
-  },
-
-  setup() {
-    const device = useDevice()
-    const { isModeFavorites } = storeToRefs(useMapStore())
-
-    return {
-      device,
-      isModeFavorites,
-    }
-  },
+//
+// Emits
+//
+const emit = defineEmits(['click'])
 
-  emits: {
-    click: () => true,
-  },
+//
+// Props
+//
+const device = useDevice()
+const { isModeFavorites } = storeToRefs(useMapStore())
 
-  methods: {
-    goToMenuItems() {
-      this.$emit('click')
-    },
-  },
-})
+//
+// Methods
+//
+function goToMenuItems() {
+  emit('click')
+}
 </script>
 
 <template>

From 6552151e60fb521e6f949ae4282345ee0ea27c56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 10 Sep 2024 15:53:37 +0200
Subject: [PATCH 22/81] fix: wrong label on ExplorerOrFavoritesBack component
 #327

---
 components/Home/ExplorerOrFavoritesBack.vue | 29 +++++++++------------
 locales/en-GB.ts                            |  6 ++---
 locales/es-ES.ts                            |  2 +-
 locales/fr-FR.ts                            |  4 +--
 4 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/components/Home/ExplorerOrFavoritesBack.vue b/components/Home/ExplorerOrFavoritesBack.vue
index 92631718..c5c9be7c 100644
--- a/components/Home/ExplorerOrFavoritesBack.vue
+++ b/components/Home/ExplorerOrFavoritesBack.vue
@@ -2,7 +2,6 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { storeToRefs } from 'pinia'
 import { mapStore as useMapStore } from '~/stores/map'
-import useDevice from '~/composables/useDevice'
 
 //
 // Emits
@@ -13,14 +12,20 @@ const emit = defineEmits(['click'])
 // Props
 //
 const device = useDevice()
+const { t } = useI18n()
 const { isModeFavorites } = storeToRefs(useMapStore())
 
 //
-// Methods
+// Computed
 //
-function goToMenuItems() {
-  emit('click')
-}
+const label = computed(() => {
+  if (isModeFavorites.value) {
+    return device.value.smallScreen ? 'headerMenu.backToMenuFavoritesMobile' : 'headerMenu.backToMenuFavorites'
+  }
+  else {
+    return device.value.smallScreen ? 'headerMenu.backToMenuExplorerMobile' : 'headerMenu.backToMenuExplorer'
+  }
+})
 </script>
 
 <template>
@@ -28,22 +33,12 @@ function goToMenuItems() {
     <button
       type="button"
       class="tw-flex tw-shrink-0 tw-items-center tw-justify-center tw-w-10 tw-h-10 tw-text-2xl tw-font-bold tw-transition-all tw-rounded-full tw-outline-none tw-cursor-pointer focus:tw-outline-none hover:tw-bg-blue-700"
-      @click="goToMenuItems"
+      @click="emit('click')"
     >
       <FontAwesomeIcon icon="arrow-left" size="xs" />
     </button>
     <p class="tw-ml-2">
-      {{
-        $t(
-          device.smallScreen
-            ? isModeFavorites
-              ? 'headerMenu.backToMenuFavorites'
-              : 'headerMenu.backToMenuExplorer'
-            : isModeFavorites
-              ? 'headerMenu.backToMenuFavoritesMobile'
-              : 'headerMenu.backToMenuExplorerMobile',
-        )
-      }}
+      {{ t(label) }}
     </p>
   </div>
 </template>
diff --git a/locales/en-GB.ts b/locales/en-GB.ts
index 374f38a3..b67f2323 100644
--- a/locales/en-GB.ts
+++ b/locales/en-GB.ts
@@ -77,9 +77,9 @@ export default defineI18nLocale(() => {
       clearAllCategories: 'Hide all categories',
       back: 'Back',
       backToMenuFavorites: 'Show menu',
-      backToMenuExplorer: 'Search by Categories',
-      backToMenuFavoritesMobile: 'Exit Favorites',
-      backToMenuExplorerMobile: 'Search by Categories',
+      backToMenuExplorer: 'Search by categories',
+      backToMenuFavoritesMobile: 'Exit favorites',
+      backToMenuExplorerMobile: 'Exit "Nearby"',
       disableCategory: 'Remove the category',
     },
     dateRange: {
diff --git a/locales/es-ES.ts b/locales/es-ES.ts
index 185b6534..2df7eef7 100644
--- a/locales/es-ES.ts
+++ b/locales/es-ES.ts
@@ -79,7 +79,7 @@ export default defineI18nLocale(() => {
       backToMenuFavorites: 'Ver el menú',
       backToMenuExplorer: 'Buscar par categorías',
       backToMenuFavoritesMobile: 'Salir de los favoritos',
-      backToMenuExplorerMobile: 'Buscar par categorías',
+      backToMenuExplorerMobile: 'Salir «Cercano»',
       disableCategory: 'Eliminar la categoría',
     },
     dateRange: {
diff --git a/locales/fr-FR.ts b/locales/fr-FR.ts
index 61426610..4dc62950 100644
--- a/locales/fr-FR.ts
+++ b/locales/fr-FR.ts
@@ -80,7 +80,7 @@ export default defineI18nLocale(() => {
       backToMenuFavorites: 'Afficher le menu',
       backToMenuExplorer: 'Rechercher par catégories',
       backToMenuFavoritesMobile: 'Quitter les favoris',
-      backToMenuExplorerMobile: 'Rechercher par catégories',
+      backToMenuExplorerMobile: 'Quitter « À proximité »',
       disableCategory: 'Supprimer la catégorie',
     },
     dateRange: {
@@ -102,7 +102,7 @@ export default defineI18nLocale(() => {
       details: 'Détails',
       seeDetail: 'Voir le detail',
       route: 'Itinéraire',
-      explore: 'À proximité',
+      explore: 'À proximité',
       favorite: 'Favori',
       favoriteOn: 'Mettre en favori',
       favoriteOff: 'Retirer le favori',

From 185fdd6afc3be2b86ded872ee7489844e14fd3ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 24 Sep 2024 10:20:22 +0200
Subject: [PATCH 23/81] fix: add cookies-consent on client only #357

---
 components/Home/Home.vue     | 8 +++++---
 components/Layout/Footer.vue | 4 +++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/Home/Home.vue b/components/Home/Home.vue
index 59da0e3d..1c706544 100644
--- a/components/Home/Home.vue
+++ b/components/Home/Home.vue
@@ -657,9 +657,11 @@ function handlePoiCardClose() {
       </BottomMenu>
     </ClientOnly>
 
-    <footer class="tw-z-20">
-      <CookiesConsent />
-    </footer>
+    <ClientOnly>
+      <footer class="tw-z-20">
+        <CookiesConsent />
+      </footer>
+    </ClientOnly>
   </div>
 </template>
 
diff --git a/components/Layout/Footer.vue b/components/Layout/Footer.vue
index 01973999..736a7546 100644
--- a/components/Layout/Footer.vue
+++ b/components/Layout/Footer.vue
@@ -36,7 +36,9 @@ export default defineNuxtComponent({
         >
       </a>
     </span>
-    <CookiesConsent />
+    <ClientOnly>
+      <CookiesConsent />
+    </ClientOnly>
   </footer>
 </template>
 

From 7f836787d6d502f46c401cc16885540155ce768f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Wed, 25 Sep 2024 10:52:51 +0200
Subject: [PATCH 24/81] chore: set cypress base url to localhost

---
 cypress.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress.config.ts b/cypress.config.ts
index 242d1dec..a4fd6ec6 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -4,7 +4,7 @@ import htmlvalidate from 'cypress-html-validate/plugin'
 
 export default defineConfig({
   e2e: {
-    baseUrl: 'http://127.0.0.1:3000',
+    baseUrl: 'http://localhost:3000',
     retries: 2,
     setupNodeEvents(on, _config) {
       installLogsPrinter(on)

From 5e37fd99eede10387d351a29ab058e1ccf1a4b55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Wed, 25 Sep 2024 11:32:41 +0200
Subject: [PATCH 25/81] feat: add typecheck on lint-staged and build-time only
 #368

---
 nuxt.config.ts | 5 +----
 package.json   | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index a63ba2c7..47c0a8bb 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,6 +1,4 @@
 import vuetify from 'vite-plugin-vuetify'
-import checker from 'vite-plugin-checker'
-
 import { vidos } from './lib/config'
 import { configuredApi, configuredImageProxy } from './utils/vido-config-static'
 
@@ -97,10 +95,9 @@ export default defineNuxtConfig({
     host: '0.0.0.0',
   },
   typescript: {
-    typeCheck: !process.env.CYPRESS,
+    typeCheck: 'build',
   },
   vite: {
     optimizeDeps: { exclude: ['fsevents'] },
-    plugins: [!process.env.CYPRESS ? checker({ vueTsc: true }) : undefined],
   },
 })
diff --git a/package.json b/package.json
index 9ded8020..ca7f77b1 100644
--- a/package.json
+++ b/package.json
@@ -120,6 +120,6 @@
   },
   "lint-staged": {
     "*.{css,scss,vue}": "stylelint",
-    "*.{js,jsx,ts,tsx,vue}": "eslint"
+    "*.{js,jsx,ts,tsx,vue}": "nuxi typecheck && eslint"
   }
 }

From 7a0efe486a86f356cd9b307aa096e2de25064e18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Wed, 25 Sep 2024 12:00:03 +0200
Subject: [PATCH 26/81] fix: wrong lint-staged statement

---
 README.md    | 18 +++++++++++++++++-
 package.json |  4 +++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 164a6c30..a40927e1 100644
--- a/README.md
+++ b/README.md
@@ -108,7 +108,23 @@ Header set Content-Security-Policy "frame-ancestors *"
 
 Vido is mainly building using:
 - [MapLibre GL JS](https://maplibre.org/maplibre-gl-js-docs/api/map/)
-- [Nxut3](https://nuxt.com/) and [Vue3](https://vuejs.org/), using the Options API
+- [Nuxt 3](https://nuxt.com/) and [Vue 3](https://vuejs.org/), using both Options API / Composition API
+
+### Setup hooks
+
+Ensure that `core.hooksPath` is properly setup !
+
+From your project root run:
+
+```bash
+git config core.hooksPath .git/hooks/
+```
+
+Then update your hooks with the following command:
+
+```bash
+yarn dlx simple-git-hooks
+```
 
 ```
 # serve with hot reload at localhost:3000
diff --git a/package.json b/package.json
index ca7f77b1..c1b9ebaf 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "start:cypress": "CONFIG=vidos-config-empty.json yarn build-fixture && yarn run cypress open",
     "lint": "yarn lint:js && yarn lint:style",
     "lint:js": "eslint .",
+    "lint:js:fix": "eslint --fix .",
     "lint:style": "stylelint --cache **/*.{vue,css,scss}",
     "test": "yarn test:cypress && yarn test:histoire",
     "test:cypress": "yarn build-fixture && yarn run cypress run",
@@ -120,6 +121,7 @@
   },
   "lint-staged": {
     "*.{css,scss,vue}": "stylelint",
-    "*.{js,jsx,ts,tsx,vue}": "nuxi typecheck && eslint"
+    "*": "yarn nuxi typecheck .",
+    "*.{vue,ts,js}": "yarn lint:js:fix"
   }
 }

From cd8aa6fd8e108a9057cfdb7d88319507a697563d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 26 Sep 2024 15:38:52 +0200
Subject: [PATCH 27/81] fix: exclude bin folder from typecheck

---
 tsconfig.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tsconfig.json b/tsconfig.json
index a746f2a7..e4052471 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,5 @@
 {
   // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
+  "extends": "./.nuxt/tsconfig.json",
+  "exclude": ["bin"]
 }

From 7d43ed00ceb5ae8ad4741ac4f2dd356a1ecd77f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 26 Sep 2024 17:01:15 +0200
Subject: [PATCH 28/81] fix: add homepage link support on bran logo #282

---
 components/Home/Home.vue     | 8 +++++++-
 components/Layout/Header.vue | 6 +++++-
 components/UI/Logo.vue       | 6 +++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/components/Home/Home.vue b/components/Home/Home.vue
index 1c706544..2fe914fe 100644
--- a/components/Home/Home.vue
+++ b/components/Home/Home.vue
@@ -177,7 +177,11 @@ const logoUrl = computed(() => {
 })
 
 const mainUrl = computed(() => {
-  return settings!.themes[0]?.main_url?.fr || ''
+  return settings!.themes[0]?.main_url?.fr || '/'
+})
+
+const target = computed(() => {
+  return settings!.themes[0]?.main_url?.fr ? '_blank' : '_self'
 })
 
 const mapFeatures = computed(() => {
@@ -469,6 +473,7 @@ function handlePoiCardClose() {
                 :main-url="mainUrl"
                 :site-name="siteName"
                 :logo-url="logoUrl"
+                :target="target"
                 class="tw-flex-none md:tw-hidden tw-mr-2"
                 image-class="tw-max-w-2xl tw-max-h-12 md:tw-max-h-16"
               />
@@ -527,6 +532,7 @@ function handlePoiCardClose() {
                 :main-url="mainUrl"
                 :site-name="siteName"
                 :logo-url="logoUrl"
+                :target="target"
                 class="tw-flex-none tw-mr-2"
                 image-class="tw-max-w-2xl tw-max-h-12 md:tw-max-h-16"
               />
diff --git a/components/Layout/Header.vue b/components/Layout/Header.vue
index 97729d7e..0b5ffae2 100644
--- a/components/Layout/Header.vue
+++ b/components/Layout/Header.vue
@@ -28,7 +28,10 @@ export default defineNuxtComponent({
     ...mapState(siteStore, ['locale']),
 
     mainUrl(): string {
-      return (this.locale && this.theme.main_url?.[this.locale]) || ''
+      return (this.locale && this.theme.main_url?.[this.locale]) || '/'
+    },
+    target() {
+      return (this.locale && this.theme.main_url?.[this.locale]) ? '_blank' : '_self'
     },
   },
 })
@@ -39,6 +42,7 @@ export default defineNuxtComponent({
     <Logo
       id="logo"
       :main-url="mainUrl"
+      :target="target"
       :site-name="theme && theme.title.fr"
       :logo-url="theme && theme.logo_url"
     />
diff --git a/components/UI/Logo.vue b/components/UI/Logo.vue
index d80bf00b..20ad91f4 100644
--- a/components/UI/Logo.vue
+++ b/components/UI/Logo.vue
@@ -21,6 +21,10 @@ export default defineNuxtComponent({
       type: String as PropType<string>,
       default: 'tw-max-w-2xl tw-max-h-16',
     },
+    target: {
+      type: String,
+      default: '_blank',
+    },
   },
 })
 </script>
@@ -32,7 +36,7 @@ export default defineNuxtComponent({
       rel="noopener noreferrer"
       :aria-label="siteName"
       :title="siteName"
-      target="_blank"
+      :target="target"
     >
       <img
         :src="logoUrl"

From 2e57da6c788b293c59ae2189f13753c18a0edd66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 1 Oct 2024 17:22:36 +0200
Subject: [PATCH 29/81] feat: add category name in page detail title #350

---
 components/PoisDetails/PoiDetails.story.vue |  1 +
 components/PoisDetails/PoiDetails.vue       |  6 +++++-
 pages/poi/[id]/details.vue                  | 17 +++++++++++++----
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/components/PoisDetails/PoiDetails.story.vue b/components/PoisDetails/PoiDetails.story.vue
index f5931623..0b8a9c98 100644
--- a/components/PoisDetails/PoiDetails.story.vue
+++ b/components/PoisDetails/PoiDetails.story.vue
@@ -17,6 +17,7 @@ const defaultProps = {
 const props = {
   Default: {
     ...defaultProps,
+    pageTitle: `${defaultProps.poi.properties.classe} - ${defaultProps.poi.properties.name}`,
   },
 }
 </script>
diff --git a/components/PoisDetails/PoiDetails.vue b/components/PoisDetails/PoiDetails.vue
index 00ecece7..673213c6 100644
--- a/components/PoisDetails/PoiDetails.vue
+++ b/components/PoisDetails/PoiDetails.vue
@@ -59,6 +59,10 @@ export default defineNuxtComponent({
       type: Object as PropType<ApiPoiDeps>,
       default: null,
     },
+    pageTitle: {
+      type: String,
+      required: true,
+    },
   },
 
   data(): {
@@ -195,7 +199,7 @@ export default defineNuxtComponent({
   <PoiLayout
     :settings="settings"
     :nav-menu-entries="navMenuEntries"
-    :name="poi.properties.name"
+    :name="pageTitle"
     :icon="poi.properties.display && poi.properties.display.icon"
     :color-line="colorLine"
     :color-fill="colorFill"
diff --git a/pages/poi/[id]/details.vue b/pages/poi/[id]/details.vue
index acbc2cc3..f73870a9 100644
--- a/pages/poi/[id]/details.vue
+++ b/pages/poi/[id]/details.vue
@@ -69,6 +69,16 @@ if (!poi.value) {
   })
 }
 
+//
+// Computed
+//
+const pageTitle = computed(() => {
+  if (!poi.value)
+    return ''
+
+  return `${poi.value.properties.classe} - ${poi.value.properties.name}`
+})
+
 //
 // Hooks
 //
@@ -78,11 +88,9 @@ onBeforeMount(() => {
 
 useHead(
   headerFromSettings(settings.value!, {
-    // @ts-expect-error: Fix typings
-    title: poiPoiDeps.value?.poi.properties.name,
+    title: pageTitle.value,
     description: {
-      // @ts-expect-error: Fix typings
-      fr: poiPoiDeps.value?.poi.properties.description,
+      fr: poi.value?.properties.description,
     },
   }),
 )
@@ -95,6 +103,7 @@ useHead(
     :nav-menu-entries="contents!"
     :poi="poi!"
     :poi-deps="poiDeps"
+    :page-title="pageTitle"
     class="page-details tw-overflow-clip"
   />
 </template>

From 66c60e3b7057f371682e69ed1b39f661fbf3769c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Wed, 2 Oct 2024 23:12:53 +0200
Subject: [PATCH 30/81] chore: deactivate long-text rule

---
 cypress.config.ts                   | 2 +-
 cypress/e2e/poi/detail-simple.cy.ts | 8 +++++++-
 package.json                        | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/cypress.config.ts b/cypress.config.ts
index a4fd6ec6..242d1dec 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -4,7 +4,7 @@ import htmlvalidate from 'cypress-html-validate/plugin'
 
 export default defineConfig({
   e2e: {
-    baseUrl: 'http://localhost:3000',
+    baseUrl: 'http://127.0.0.1:3000',
     retries: 2,
     setupNodeEvents(on, _config) {
       installLogsPrinter(on)
diff --git a/cypress/e2e/poi/detail-simple.cy.ts b/cypress/e2e/poi/detail-simple.cy.ts
index 83d28d91..ac14ce28 100644
--- a/cypress/e2e/poi/detail-simple.cy.ts
+++ b/cypress/e2e/poi/detail-simple.cy.ts
@@ -7,6 +7,12 @@ const hostnames = {
   'http://127.0.0.1:3000': '/fixtures/teritorio/references/',
 }
 
+const htmlValidateRules = {
+  rules: {
+    'long-title': 0,
+  },
+}
+
 describe('home content', () => {
   beforeEach(() => {
     mockSSRAPI(hostnames, teritorioReferenceAPIFixture, {
@@ -30,6 +36,6 @@ describe('home content', () => {
       .parent()
       .contains('contact_card')
 
-    cy.htmlvalidate()
+    cy.htmlvalidate(htmlValidateRules)
   })
 })
diff --git a/package.json b/package.json
index c1b9ebaf..9fa614ea 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "generate": "nuxi generate",
     "start": "CONFIG=${CONFIG:-$PWD/vidos-config.json} nuxi preview",
     "start:histoire": "CONFIG=vidos-config-empty.json yarn histoire dev",
-    "start:cypress": "CONFIG=vidos-config-empty.json yarn build-fixture && yarn run cypress open",
+    "start:cypress": "CONFIG=vidos-config-cypress.json yarn build-fixture && yarn run cypress open",
     "lint": "yarn lint:js && yarn lint:style",
     "lint:js": "eslint .",
     "lint:js:fix": "eslint --fix .",

From a16c990d4f7216cf7913b9ada1ddf10fa17fd68f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 10 Sep 2024 15:55:56 +0200
Subject: [PATCH 31/81] chore: update yarn to v4.4.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9fa614ea..a61c118f 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "type": "module",
   "version": "1.23.1",
   "private": true,
-  "packageManager": "yarn@4.3.0",
+  "packageManager": "yarn@4.4.1",
   "engines": {
     "node": "^14.18.0 || >=16.10.0"
   },

From 6a9b6742ea7e6194b0ab24afda89594218676779 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 8 Aug 2024 18:05:13 +0200
Subject: [PATCH 32/81] feat: add uncluster plugin support #226

---
 components/MainMap/MapFeatures.vue |  35 +++------
 components/Map/MapBase.vue         |  73 ++++++++---------
 lib/clusters.ts                    |  72 ++++++++++++-----
 lib/markerLayerFactory.ts          | 121 -----------------------------
 package.json                       |   3 +-
 stores/map.ts                      |  23 +++++-
 yarn.lock                          | 105 +++++++++++++++++--------
 7 files changed, 193 insertions(+), 239 deletions(-)

diff --git a/components/MainMap/MapFeatures.vue b/components/MainMap/MapFeatures.vue
index 0e1962b0..86f8c28c 100644
--- a/components/MainMap/MapFeatures.vue
+++ b/components/MainMap/MapFeatures.vue
@@ -121,7 +121,7 @@ export default defineNuxtComponent({
     const device = useDevice()
     const { config } = storeToRefs(useSiteStore())
     const mapStore = useMapStore()
-    const { center, selectedFeature } = storeToRefs(mapStore)
+    const { center, selectedFeature, pinMarker } = storeToRefs(mapStore)
     const mapStyleLoaded = ref(false)
 
     return {
@@ -131,6 +131,7 @@ export default defineNuxtComponent({
       mapBase: ref<InstanceType<typeof MapBase>>(),
       mapStore,
       mapStyleLoaded,
+      pinMarker,
       selectedFeature,
     }
   },
@@ -138,7 +139,6 @@ export default defineNuxtComponent({
   data(): {
     map: Map
     markers: { [id: string]: Marker }
-    selectedFeatureMarker?: Marker
     selectedBackground: MapStyleEnum
   } {
     return {
@@ -155,7 +155,7 @@ export default defineNuxtComponent({
       return [MapStyleEnum.vector, MapStyleEnum.aerial, MapStyleEnum.bicycle]
     },
 
-    // Workarround typing issue
+    // Workaround typing issue
     mapTyped(): Map {
       return this.map as Map
     },
@@ -195,6 +195,9 @@ export default defineNuxtComponent({
     },
 
     selectedFeature() {
+      if (this.pinMarker)
+        this.pinMarker.addTo(this.map as Map)
+
       this.showSelectedFeature()
     },
 
@@ -280,22 +283,17 @@ export default defineNuxtComponent({
       )
       if (selectedFeatures.length > 0) {
         // Set temp partial data from vector tiles. Then fetch full data
-        this.updateSelectedFeature(
-          vectorTilesPoi2ApiPoi(selectedFeatures[0]),
-          undefined,
-          true,
-        )
+        this.updateSelectedFeature(vectorTilesPoi2ApiPoi(selectedFeatures[0]), true)
         this.showSelectedFeature()
       }
       else {
-        this.updateSelectedFeature(null, undefined)
+        this.updateSelectedFeature(null)
       }
     },
 
-    updateSelectedFeature(feature: ApiPoi | null, marker?: Marker, fetch = false) {
+    updateSelectedFeature(feature: ApiPoi | null, fetch = false) {
       if (this.selectedFeature !== feature) {
         this.mapStore.setSelectedFeature(feature)
-        this.setSelectedFeatureMarker(marker)
 
         if (feature && fetch && feature.properties.metadata.id) {
           try {
@@ -318,14 +316,6 @@ export default defineNuxtComponent({
       }
     },
 
-    // Map view
-    onMapRender() {
-      if (this.mapStyleLoaded && this.selectedFeature) {
-        const marker = createMarker((this.selectedFeature.geometry as GeoJSON.Point).coordinates as [number, number])
-        this.setSelectedFeatureMarker(marker)
-      }
-    },
-
     goTo(feature: ApiPoi) {
       if (!feature || !('coordinates' in feature.geometry))
         return
@@ -437,11 +427,6 @@ export default defineNuxtComponent({
           filterRouteByCategories(this.map as Map, this.selectedCategoriesIds)
       }
     },
-
-    setSelectedFeatureMarker(marker?: Marker) {
-      this.selectedFeatureMarker?.remove()
-      this.selectedFeatureMarker = marker?.addTo(this.map as Map)
-    },
   },
 })
 </script>
@@ -454,8 +439,6 @@ export default defineNuxtComponent({
       :map-style="selectedBackground" :rotate="!device.touch" :show-attribution="!small"
       :off-map-attribution="device.smallScreen && !small" :hide-control="small" :style-icon-filter="styleIconFilter"
       :cooperative-gestures="cooperativeGestures" :boundary-area="boundaryArea" hash="map" @map-init="onMapInit"
-      @map-data="onMapRender" @map-drag-end="onMapRender" @map-move-end="onMapRender" @map-resize="onMapRender"
-      @map-rotate-end="onMapRender" @map-touch-move="onMapRender" @map-zoom-end="onMapRender"
       @map-style-load="onMapStyleLoad" @feature-click="updateSelectedFeature"
     >
       <template #controls>
diff --git a/components/Map/MapBase.vue b/components/Map/MapBase.vue
index 99d8f73f..7f22c764 100644
--- a/components/Map/MapBase.vue
+++ b/components/Map/MapBase.vue
@@ -11,6 +11,7 @@ import type {
   LngLatLike,
   MapDataEvent,
   Map as MapGL,
+  MapGeoJSONFeature,
   MapLibreEvent,
   MapTouchEvent,
   Marker,
@@ -18,14 +19,18 @@ import type {
 } from 'maplibre-gl'
 import type { PropType } from 'vue'
 
+import { TeritorioCluster } from '@teritorio/maplibre-gl-teritorio-cluster'
+import { storeToRefs } from 'pinia'
 import { defineNuxtComponent } from '#app'
 import Attribution from '~/components/Map/Attribution.vue'
 import Map from '~/components/Map/Map.vue'
 import type { ApiPoi } from '~/lib/apiPois'
 import { MAP_ZOOM } from '~/lib/constants'
 import type { MapPoi } from '~/lib/mapPois'
-import { markerLayerTextFactory, updateMarkers } from '~/lib/markerLayerFactory'
+import { markerLayerTextFactory } from '~/lib/markerLayerFactory'
+import { clusterRender, markerRender, pinMarkerRender } from '~/lib/clusters'
 import type { MapStyleEnum } from '~/utils/types'
+import { mapStore as useMapStore } from '~/stores/map'
 
 const POI_SOURCE = 'poi'
 const POI_LAYER = 'poi'
@@ -103,6 +108,15 @@ export default defineNuxtComponent({
     },
   },
 
+  setup() {
+    const { selectedFeature, teritorioCluster } = storeToRefs(useMapStore())
+
+    return {
+      selectedFeature,
+      teritorioCluster,
+    }
+  },
+
   data(): {
     map: MapGL
     poiFilter: PoiFilter | null
@@ -165,7 +179,7 @@ export default defineNuxtComponent({
       object,
     ) => true,
     mapStyleLoad: (_style: StyleSpecification) => true,
-    featureClick: (_feature: ApiPoi, _marker?: Marker) => true,
+    featureClick: (_feature: ApiPoi) => true,
   },
 
   methods: {
@@ -244,8 +258,9 @@ export default defineNuxtComponent({
         cluster: cluster === undefined ? true : cluster,
         clusterRadius: 32,
         clusterProperties: clusterProps,
-        clusterMaxZoom: 15,
+        clusterMaxZoom: 22,
         tolerance: 0.6,
+        maxzoom: 24,
         data: {
           type: 'FeatureCollection',
           features: this.featuresPrepare(features as ApiPoi[]),
@@ -266,6 +281,14 @@ export default defineNuxtComponent({
 
     onMapInit(map: MapGL) {
       this.map = map
+      this.teritorioCluster = new TeritorioCluster(map, POI_SOURCE, {
+        clusterRenderFn: clusterRender,
+        initialFeature: this.selectedFeature as unknown as MapGeoJSONFeature,
+        markerRenderFn: markerRender,
+        markerSize: 32,
+        pinMarkerRenderFn: pinMarkerRender,
+      })
+
       this.$emit('mapInit', map)
     },
 
@@ -361,13 +384,8 @@ export default defineNuxtComponent({
         && this.map.getSource(POI_SOURCE)
         && this.map.isSourceLoaded(POI_SOURCE)
       ) {
-        this.markers = updateMarkers(
-          this.map as MapGL,
-          this.markers,
-          POI_SOURCE,
-          this.fitBounds,
-          (feature: ApiPoi, marker?: Marker) => this.$emit('featureClick', feature, marker),
-        )
+        this.teritorioCluster?.render()
+        this.teritorioCluster?.addEventListener('click', (e: Event) => this.$emit('featureClick', (e as CustomEvent).detail.selectedFeature))
       }
 
       // @ts-expect-error: eventName is not in events definition
@@ -380,28 +398,14 @@ export default defineNuxtComponent({
 <template>
   <div id="map-container" class="tw-w-full tw-h-full tw-flex tw-flex-col">
     <Map
-      :center="center"
-      :bounds="bounds"
-      :fit-bounds-options="fitBoundsOptions()"
-      :zoom="selectionZoom.poi"
-      :fullscreen-control="fullscreenControl"
-      :extra-attributions="extraAttributions"
-      :map-style="mapStyle"
-      :rotate="rotate"
-      :show-attribution="showAttribution && !offMapAttribution"
-      :hide-control="hideControl"
-      :hash="hash"
-      :cooperative-gestures="cooperativeGestures"
-      class="tw-grow tw-h-full"
-      @map-init="onMapInit($event)"
-      @map-data="onMapRender('mapData', $event)"
-      @map-drag-end="onMapRender('mapDragEnd', $event)"
-      @map-move-end="onMapRender('mapMoveEnd', $event)"
-      @map-resize="onMapRender('mapResize', $event)"
-      @map-rotate-end="onMapRender('mapRotateEnd', $event)"
-      @map-touch-move="onMapRender('mapTouchMove', $event)"
-      @map-zoom-end="onMapRender('mapZoomEnd', $event)"
-      @map-style-load="onMapStyleLoad($event)"
+      :center="center" :bounds="bounds" :fit-bounds-options="fitBoundsOptions()" :zoom="selectionZoom.poi"
+      :fullscreen-control="fullscreenControl" :extra-attributions="extraAttributions" :map-style="mapStyle"
+      :rotate="rotate" :show-attribution="showAttribution && !offMapAttribution" :hide-control="hideControl"
+      :hash="hash" :cooperative-gestures="cooperativeGestures" class="tw-grow tw-h-full" @map-init="onMapInit($event)"
+      @map-data="onMapRender('mapData', $event)" @map-drag-end="onMapRender('mapDragEnd', $event)"
+      @map-move-end="onMapRender('mapMoveEnd', $event)" @map-resize="onMapRender('mapResize', $event)"
+      @map-rotate-end="onMapRender('mapRotateEnd', $event)" @map-touch-move="onMapRender('mapTouchMove', $event)"
+      @map-zoom-end="onMapRender('mapZoomEnd', $event)" @map-style-load="onMapStyleLoad($event)"
       @full-attribution="fullAttribution = $event"
     >
       <template #controls>
@@ -411,10 +415,7 @@ export default defineNuxtComponent({
         <slot name="body" />
       </template>
     </Map>
-    <Attribution
-      v-if="showAttribution && offMapAttribution"
-      :attribution="fullAttribution"
-    />
+    <Attribution v-if="showAttribution && offMapAttribution" :attribution="fullAttribution" />
   </div>
 </template>
 
diff --git a/lib/clusters.ts b/lib/clusters.ts
index 703def09..b5970a43 100644
--- a/lib/clusters.ts
+++ b/lib/clusters.ts
@@ -1,3 +1,8 @@
+import type { LngLatLike, MapGeoJSONFeature, Point } from 'maplibre-gl'
+import { Marker } from 'maplibre-gl'
+import { createApp } from 'vue'
+import TeritorioIconBadge from '~/components/UI/TeritorioIconBadge.vue'
+
 function getMarkerDonutSegment(start: number, end: number, r: number, r0: number, colorFill: string): string {
   if (end - start === 1)
     end -= 0.00001
@@ -39,15 +44,23 @@ function getMarkerDonutSegment(start: number, end: number, r: number, r0: number
   ].join(' ')
 }
 
-export function createMarkerDonutChart(countPerColor: Record<string, number>, totalCount: number): HTMLElement {
-  const r
-    = totalCount >= 1000
-      ? 40
-      : totalCount >= 100
-        ? 32
-        : totalCount >= 10
-          ? 24
-          : 16
+export function clusterRender(element: HTMLDivElement, props: MapGeoJSONFeature['properties']) {
+  const {
+    cluster: _a,
+    cluster_id: _b,
+    point_count,
+    _c: _d,
+    point_count_abbreviated: _e,
+    ...countPercolor
+  } = props
+
+  const r = point_count >= 1000
+    ? 40
+    : point_count >= 100
+      ? 32
+      : point_count >= 10
+        ? 24
+        : 16
   const r0 = r - 5
   const w = r * 2
 
@@ -55,11 +68,11 @@ export function createMarkerDonutChart(countPerColor: Record<string, number>, to
 
   let total = 0
   let offsets = 0
-  Object.entries(countPerColor).forEach(([color, count]) => {
+  Object.entries(countPercolor).forEach(([color, count]) => {
     total += count
     html += getMarkerDonutSegment(
-      offsets / totalCount,
-      total / totalCount,
+      offsets / point_count,
+      total / point_count,
       r,
       r0,
       color,
@@ -67,17 +80,38 @@ export function createMarkerDonutChart(countPerColor: Record<string, number>, to
     offsets = total
   })
 
-  if (total !== totalCount)
-    html += getMarkerDonutSegment(total / totalCount, 1, r, r0, '#ccc')
+  if (total !== point_count)
+    html += getMarkerDonutSegment(total / point_count, 1, r, r0, '#ccc')
 
   html += `<circle cx="${r}" cy="${r}" r="${r0}" fill="white" />
       <text dominant-baseline="central" transform="translate(${r}, ${r})">
-        ${totalCount.toLocaleString()}
+        ${point_count.toLocaleString()}
       </text>
     </svg>`
 
-  const el = document.createElement('div')
-  el.classList.add('cluster-item')
-  el.innerHTML = html
-  return el
+  element.classList.add('cluster-item')
+  element.innerHTML = html
+}
+
+export function markerRender(element: HTMLDivElement, feature: MapGeoJSONFeature) {
+  if (typeof feature.properties?.metadata === 'string')
+    feature.properties.metadata = JSON.parse(feature.properties.metadata)
+
+  if (typeof feature.properties?.display === 'string')
+    feature.properties.display = JSON.parse(feature.properties?.display)
+
+  if (typeof feature.properties?.editorial === 'string')
+    feature.properties.editorial = JSON.parse(feature.properties?.editorial)
+
+  createApp(TeritorioIconBadge, {
+    colorFill: feature.properties.display?.color_fill,
+    picto: feature.properties.display?.icon,
+    image: feature.properties!['image:thumbnail'],
+    size: null,
+    text: feature.properties.display?.text,
+  }).mount(element)
+}
+
+export function pinMarkerRender(coords: LngLatLike, offset: Point): Marker {
+  return new Marker({ scale: 1.3, color: '#f44336', anchor: 'bottom' }).setLngLat(coords).setOffset(offset)
 }
diff --git a/lib/markerLayerFactory.ts b/lib/markerLayerFactory.ts
index 54ffcb5e..59c98e9f 100644
--- a/lib/markerLayerFactory.ts
+++ b/lib/markerLayerFactory.ts
@@ -1,18 +1,10 @@
 import type {
-  FitBoundsOptions,
-  GeoJSONSource,
   LayerSpecification,
-  LngLatBounds,
-  Map,
   Marker,
   SymbolLayerSpecification,
 } from 'maplibre-gl'
 import { createApp } from 'vue'
 
-import type { ApiPoi } from './apiPois'
-import { getBBoxFeatures } from './bbox'
-import { createMarkerDonutChart } from './clusters'
-
 import TeritorioIconBadge from '~/components/UI/TeritorioIconBadge.vue'
 import type { TupleLatLng } from '~/utils/types'
 import { createMarker } from '~/composables/useMarker'
@@ -102,116 +94,3 @@ export function makerHtmlFactory(
 
   return marker
 }
-
-export function updateMarkers(
-  map: Map,
-  markers: { [id: string]: Marker },
-  src: string,
-  fitBounds: (bounds: LngLatBounds, options: FitBoundsOptions) => void,
-  markerClickCallBack: ((feature: ApiPoi, marker?: Marker) => void) | undefined,
-) {
-  const markerIdPrevious = Object.keys(markers)
-  const markerIdcurrent: string[] = []
-
-  const features = map.querySourceFeatures(src).filter(feature => feature.geometry.type === 'Point')
-  // for every cluster on the screen, create an HTML marker for it (if we didn't yet),
-  // and add it to the map if it's not there already
-  for (let i = 0; i < features.length; i++) {
-    const coords = (features[i].geometry as GeoJSON.Point).coordinates as [
-      number,
-      number,
-    ]
-    const props = features[i].properties
-    if (props?.cluster) {
-      const id = `c${props.cluster_id}`
-      markerIdcurrent.push(id)
-      if (!markers[id]) {
-        const {
-          cluster: _a,
-          cluster_id: _b,
-          point_count,
-          _c: _d,
-          point_count_abbreviated: _e,
-          ...countPercolor
-        } = props
-        const element = createMarkerDonutChart(countPercolor, point_count)
-
-        markers[id] = createMarker(coords, { element })
-        markers[id].addTo(map)
-
-        element.addEventListener('click', async (e) => {
-          e.stopPropagation()
-          const source = map.getSource(src) as GeoJSONSource
-
-          if (source && 'getClusterLeaves' in source) {
-            const leaves = await source.getClusterLeaves(props.cluster_id, props.point_count, 0)
-            if (leaves.length) {
-              const bounds = getBBoxFeatures(leaves)
-              if (bounds)
-                fitBounds(bounds, {})
-            }
-          }
-        })
-      }
-    }
-    else if (props?.metadata) {
-      if (typeof props.metadata === 'string')
-        props.metadata = JSON.parse(props.metadata)
-
-      const id = `m${features[i].id}`
-      markerIdcurrent.push(id)
-
-      // Workaround to correct shifting POI markers after zoom-in
-      if (!markers[id] || (markers[id] && (markers[id]?.getLngLat().lat !== (features[i].geometry as GeoJSON.Point).coordinates[1]))) {
-        if (markers[id])
-          markers[id].remove()
-
-        const markerCoords
-            = features[i].geometry.type === 'Point'
-            && ((features[i].geometry as GeoJSON.Point).coordinates as TupleLatLng)
-        if (markerCoords) {
-          if (typeof props.display === 'string')
-            props.display = JSON.parse(props.display)
-
-          if (typeof props.editorial === 'string')
-            props.editorial = JSON.parse(props.editorial)
-
-          // Marker
-          markers[id] = makerHtmlFactory(
-            id,
-            markerCoords, // Using this to avoid misplaced marker
-            props.display?.color_fill || '#000000',
-            props.display?.icon || '#000000',
-            props['image:thumbnail'],
-            null,
-            props.display?.text,
-          )
-
-          // Click handler
-          if (markerClickCallBack && props.editorial?.popup_fields) {
-            const el = markers[id].getElement()
-
-            el.addEventListener('click', (e: MouseEvent) => {
-              e.stopPropagation()
-              const pinMarker = createMarker(markerCoords)
-
-              markerClickCallBack(features[i] as unknown as ApiPoi, pinMarker)
-            })
-          }
-          markers[id].addTo(map)
-        }
-      }
-    }
-  }
-
-  // for every marker we've added previously, remove those that are no longer visible
-  const markerIdcurrentSet = new Set(markerIdcurrent)
-  markerIdPrevious.forEach((id) => {
-    if (!markerIdcurrentSet.has(id)) {
-      markers[id].remove()
-      delete markers[id]
-    }
-  })
-
-  return markers
-}
diff --git a/package.json b/package.json
index a61c118f..0197d05b 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "@sentry/vue": "^7.113.0",
     "@tailwindcss/typography": "^0.5.9",
     "@teritorio/map": "^0.12.7",
+    "@teritorio/maplibre-gl-teritorio-cluster": "^0.0.5",
     "@teritorio/openmaptiles-gl-language": "^1.5.4",
     "@turf/boolean-intersects": "^6.5.0",
     "@types/geojson": "^7946.0.10",
@@ -51,7 +52,7 @@
     "lodash.uniq": "^4.5.0",
     "lodash.uniqby": "^4.7.0",
     "lodash.without": "^4.4.0",
-    "maplibre-gl": "4.5.0",
+    "maplibre-gl": "^4.5.0",
     "opening_hours": "^3.8.0",
     "pinia": "^2.0.33",
     "pinia-shared-state": "0.5.1",
diff --git a/stores/map.ts b/stores/map.ts
index e2bede0b..81d57f53 100644
--- a/stores/map.ts
+++ b/stores/map.ts
@@ -1,32 +1,42 @@
 import { defineStore } from 'pinia'
+import { type LngLatLike, type Marker, Point } from 'maplibre-gl'
+import type { TeritorioCluster } from '@teritorio/maplibre-gl-teritorio-cluster'
 import type { ApiPoi, ApiPoiProperties } from '~/lib/apiPois'
 import type { LatLng, Pitch } from '~/utils/types'
 import { Mode } from '~/utils/types'
+import { pinMarkerRender } from '~/lib/clusters'
 
 interface State {
   center: LatLng
   mode: Mode
+  pinMarker: Marker | null
   pitch: Pitch
   selectedFeature: ApiPoi | null
+  teritorioCluster: TeritorioCluster | null
 }
 
 export const mapStore = defineStore('map', {
   state: (): State => ({
     center: { lng: 0, lat: 0 },
     mode: Mode.BROWSER,
+    pinMarker: null,
     pitch: 0,
     selectedFeature: null,
+    teritorioCluster: null,
   }),
 
   getters: {
-    isModeExplorer: (state: State) => state.mode === Mode.EXPLORER,
-    isModeFavorites: (state: State) => state.mode === Mode.FAVORITES,
-    isModeExplorerOrFavorites: (state: State) =>
+    isModeExplorer: state => state.mode === Mode.EXPLORER,
+    isModeFavorites: state => state.mode === Mode.FAVORITES,
+    isModeExplorerOrFavorites: state =>
       state.mode === Mode.EXPLORER || state.mode === Mode.FAVORITES,
   },
 
   actions: {
     setSelectedFeature(feature: ApiPoi | null) {
+      this.pinMarker?.remove()
+      this.pinMarker = null
+
       if (!feature) {
         this.selectedFeature = null
       }
@@ -55,6 +65,13 @@ export const mapStore = defineStore('map', {
           })
 
           goodFeature.properties = cleanProperties
+
+          if (feature.properties.internalType === 'address') {
+            const { coordinates } = feature.geometry as GeoJSON.Point
+            // @ts-expect-error: type is too deep
+            this.pinMarker = pinMarkerRender(coordinates as LngLatLike, new Point(0, 0))
+            this.teritorioCluster?.resetSelectedFeature()
+          }
         }
 
         this.selectedFeature = goodFeature
diff --git a/yarn.lock b/yarn.lock
index e55c441e..8b3be231 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1952,9 +1952,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@maplibre/maplibre-gl-style-spec@npm:^20.3.0":
-  version: 20.3.0
-  resolution: "@maplibre/maplibre-gl-style-spec@npm:20.3.0"
+"@maplibre/maplibre-gl-style-spec@npm:^20.3.1":
+  version: 20.3.1
+  resolution: "@maplibre/maplibre-gl-style-spec@npm:20.3.1"
   dependencies:
     "@mapbox/jsonlint-lines-primitives": "npm:~2.0.2"
     "@mapbox/unitbezier": "npm:^0.0.1"
@@ -1963,12 +1963,12 @@ __metadata:
     quickselect: "npm:^2.0.0"
     rw: "npm:^1.3.3"
     sort-object: "npm:^3.0.3"
-    tinyqueue: "npm:^2.0.3"
+    tinyqueue: "npm:^3.0.0"
   bin:
     gl-style-format: dist/gl-style-format.mjs
     gl-style-migrate: dist/gl-style-migrate.mjs
     gl-style-validate: dist/gl-style-validate.mjs
-  checksum: 10c0/86c55a71b58a3895e56070e8a912449d6cfec25e2b4a1a9847a51bf5abd666416ecd8515ebf07557a07f51af1ae4b19e3b1247a105368141f4982cefe067105e
+  checksum: 10c0/94bdb9da4e435e1e0727d803cab513b284dba7851540fdf5b90cca39c4c1ed386be198ba5928325e2a22b95d503735337ca48ae23fc1b54308831e03c41b84f3
   languageName: node
   linkType: hard
 
@@ -3495,6 +3495,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@teritorio/maplibre-gl-teritorio-cluster@npm:^0.0.5":
+  version: 0.0.5
+  resolution: "@teritorio/maplibre-gl-teritorio-cluster@npm:0.0.5"
+  dependencies:
+    maplibre-gl: "npm:^4.7.0"
+  checksum: 10c0/a63bc23f8719937b54ba5a7d58ff0620a08837abbeaf3780a45fa32009af5157865dbbd4a5330f4c84ae94be5e41ed684e6cd2f0b66eacb2cb80a6a79ea99d2a
+  languageName: node
+  linkType: hard
+
 "@teritorio/openmaptiles-gl-language@npm:^1.5.4":
   version: 1.5.4
   resolution: "@teritorio/openmaptiles-gl-language@npm:1.5.4"
@@ -3530,6 +3539,7 @@ __metadata:
     "@tailwindcss/typography": "npm:^0.5.9"
     "@teritorio/font-teritorio": "npm:^2.5.0"
     "@teritorio/map": "npm:^0.12.7"
+    "@teritorio/maplibre-gl-teritorio-cluster": "npm:^0.0.5"
     "@teritorio/openmaptiles-gl-language": "npm:^1.5.4"
     "@turf/boolean-intersects": "npm:^6.5.0"
     "@types/geojson": "npm:^7946.0.10"
@@ -3565,7 +3575,7 @@ __metadata:
     lodash.uniq: "npm:^4.5.0"
     lodash.uniqby: "npm:^4.7.0"
     lodash.without: "npm:^4.4.0"
-    maplibre-gl: "npm:4.5.0"
+    maplibre-gl: "npm:^4.5.0"
     msw: "npm:^1.2.2"
     nuxt: "npm:3.8.0"
     nuxt-simple-sitemap: "npm:^2.7.0"
@@ -4002,13 +4012,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/junit-report-builder@npm:^3.0.2":
-  version: 3.0.2
-  resolution: "@types/junit-report-builder@npm:3.0.2"
-  checksum: 10c0/3848c5247a57597695c86ab7a80cf64ba0bfcbc39e067e9e2e051eea80608a95261de065298aaaaee795b137b076f5ab3acb4e3ba003ee637a9dfd9715f86456
-  languageName: node
-  linkType: hard
-
 "@types/less@npm:3.0.6":
   version: 3.0.6
   resolution: "@types/less@npm:3.0.6"
@@ -7285,10 +7288,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"earcut@npm:^2.2.4":
-  version: 2.2.4
-  resolution: "earcut@npm:2.2.4"
-  checksum: 10c0/01ca51830edd2787819f904ae580087d37351f6048b4565e7add4b3da8a86b7bc19262ab2aa7fdc64129ab03af2d9cec8cccee4d230c82275f97ef285c79aafb
+"earcut@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "earcut@npm:3.0.0"
+  checksum: 10c0/20f3d8492f02452648466d2ce98276c9317c4d6980fc2596b1cb119fc3ef2d034724c5721de2af191331fb43610a27995b0f1b611d3386976b770ae9af7b3bbe
   languageName: node
   linkType: hard
 
@@ -9182,6 +9185,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"global-prefix@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "global-prefix@npm:4.0.0"
+  dependencies:
+    ini: "npm:^4.1.3"
+    kind-of: "npm:^6.0.3"
+    which: "npm:^4.0.0"
+  checksum: 10c0/a757bba494f0542a34e82716450506a076e769e05993a9739aea3bf27c3f710cd5635d0f4c1c242650c0dc133bf20a8e8fc9cfd3d1d1c371717218ef561f1ac4
+  languageName: node
+  linkType: hard
+
 "globals@npm:^11.1.0":
   version: 11.12.0
   resolution: "globals@npm:11.12.0"
@@ -9826,6 +9840,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ini@npm:^4.1.3":
+  version: 4.1.3
+  resolution: "ini@npm:4.1.3"
+  checksum: 10c0/0d27eff094d5f3899dd7c00d0c04ea733ca03a8eb6f9406ce15daac1a81de022cb417d6eaff7e4342451ffa663389c565ffc68d6825eaf686bf003280b945764
+  languageName: node
+  linkType: hard
+
 "inquirer@npm:^8.2.0":
   version: 8.2.6
   resolution: "inquirer@npm:8.2.6"
@@ -10620,7 +10641,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kind-of@npm:^6.0.0, kind-of@npm:^6.0.2":
+"kind-of@npm:^6.0.0, kind-of@npm:^6.0.2, kind-of@npm:^6.0.3":
   version: 6.0.3
   resolution: "kind-of@npm:6.0.3"
   checksum: 10c0/61cdff9623dabf3568b6445e93e31376bee1cdb93f8ba7033d86022c2a9b1791a1d9510e026e6465ebd701a6dd2f7b0808483ad8838341ac52f003f512e0b4c4
@@ -11125,9 +11146,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"maplibre-gl@npm:4.5.0":
-  version: 4.5.0
-  resolution: "maplibre-gl@npm:4.5.0"
+"maplibre-gl@npm:^4.5.0, maplibre-gl@npm:^4.7.0":
+  version: 4.7.1
+  resolution: "maplibre-gl@npm:4.7.1"
   dependencies:
     "@mapbox/geojson-rewind": "npm:^0.5.2"
     "@mapbox/jsonlint-lines-primitives": "npm:^2.0.2"
@@ -11136,27 +11157,26 @@ __metadata:
     "@mapbox/unitbezier": "npm:^0.0.1"
     "@mapbox/vector-tile": "npm:^1.3.1"
     "@mapbox/whoots-js": "npm:^3.1.0"
-    "@maplibre/maplibre-gl-style-spec": "npm:^20.3.0"
+    "@maplibre/maplibre-gl-style-spec": "npm:^20.3.1"
     "@types/geojson": "npm:^7946.0.14"
     "@types/geojson-vt": "npm:3.2.5"
-    "@types/junit-report-builder": "npm:^3.0.2"
     "@types/mapbox__point-geometry": "npm:^0.1.4"
     "@types/mapbox__vector-tile": "npm:^1.3.4"
     "@types/pbf": "npm:^3.0.5"
     "@types/supercluster": "npm:^7.1.3"
-    earcut: "npm:^2.2.4"
+    earcut: "npm:^3.0.0"
     geojson-vt: "npm:^4.0.2"
     gl-matrix: "npm:^3.4.3"
-    global-prefix: "npm:^3.0.0"
+    global-prefix: "npm:^4.0.0"
     kdbush: "npm:^4.0.2"
     murmurhash-js: "npm:^1.0.0"
-    pbf: "npm:^3.2.1"
+    pbf: "npm:^3.3.0"
     potpack: "npm:^2.0.0"
-    quickselect: "npm:^2.0.0"
+    quickselect: "npm:^3.0.0"
     supercluster: "npm:^8.0.1"
-    tinyqueue: "npm:^2.0.3"
+    tinyqueue: "npm:^3.0.0"
     vt-pbf: "npm:^3.1.3"
-  checksum: 10c0/137142176c5dea24f217da2f24c4ccf1b2d685d68524f392bd514a395eaeb3cad28834974e457ddff7e01758c295d8be138ef71c86d8e6a84e3fc1a0217e237b
+  checksum: 10c0/dad2da8474af68647f882d5c4ff6df1c9afbe49f6d06c4594e4a55df0a34674f64d347b10b7af2869ac62fe837af6a56caa7617d5602724185e4df674be67b51
   languageName: node
   linkType: hard
 
@@ -12804,6 +12824,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pbf@npm:^3.3.0":
+  version: 3.3.0
+  resolution: "pbf@npm:3.3.0"
+  dependencies:
+    ieee754: "npm:^1.1.12"
+    resolve-protobuf-schema: "npm:^2.1.0"
+  bin:
+    pbf: bin/pbf
+  checksum: 10c0/79e5dc59a9391789de84b0a6d713fad0dd1e5ce6eb721536af8c9ec49feae04fdebab9f077b760bba858e615a95ac714a7d248ecb43736e904bb8396885e16d6
+  languageName: node
+  linkType: hard
+
 "pend@npm:~1.2.0":
   version: 1.2.0
   resolution: "pend@npm:1.2.0"
@@ -13633,6 +13665,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"quickselect@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "quickselect@npm:3.0.0"
+  checksum: 10c0/3a0d33b0ec06841d953accdfd735aa3d8b7922cddd12970544a2c4b0278871280d8f5ba496803600693c1e7b7b2fb57c31d2b14d99132f478888006a1be6e6b7
+  languageName: node
+  linkType: hard
+
 "radix3@npm:^1.0.1, radix3@npm:^1.1.0, radix3@npm:^1.1.2":
   version: 1.1.2
   resolution: "radix3@npm:1.1.2"
@@ -15521,10 +15560,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinyqueue@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "tinyqueue@npm:2.0.3"
-  checksum: 10c0/d7b590088f015a94a17132fa209c2f2a80c45158259af5474901fdf5932e95ea13ff6f034bcc725a6d5f66d3e5b888b048c310229beb25ad5bebb4f0a635abf2
+"tinyqueue@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "tinyqueue@npm:3.0.0"
+  checksum: 10c0/edd6f1a6146aa3aa7bc85b44b3aacf44cddfa805b0901019272d7e9235894b4f28b2f9d09c1bce500ae48883b03708b6b871aa33920e895d2943720f7a9ad3ba
   languageName: node
   linkType: hard
 

From 4c17e944cdf6c5d0c7590a3c718a35fc970ffe54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 30 Sep 2024 11:40:41 +0200
Subject: [PATCH 33/81] fix: type error #226

---
 components/Map/Map.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/Map/Map.vue b/components/Map/Map.vue
index 5608966d..cbb5a259 100644
--- a/components/Map/Map.vue
+++ b/components/Map/Map.vue
@@ -9,6 +9,7 @@ import type {
   MapTouchEvent,
   RasterSourceSpecification,
   StyleSpecification,
+
   VectorSourceSpecification,
 } from 'maplibre-gl'
 import {
@@ -30,7 +31,6 @@ import { MapStyleEnum } from '~/utils/types'
 
 type ITMap = InstanceType<typeof Map>
 type ITAttributionControl = InstanceType<typeof AttributionControl>
-type ITFullscreenControl = InstanceType<typeof FullscreenControl>
 
 export default defineNuxtComponent({
   props: {
@@ -89,9 +89,15 @@ export default defineNuxtComponent({
 
   setup() {
     const { config } = storeToRefs(useSiteStore())
+    const fullscreenControlObject = ref<FullscreenControl>()
+
+    onMounted(() => {
+      fullscreenControlObject.value = new FullscreenControl()
+    })
 
     return {
       config,
+      fullscreenControlObject,
     }
   },
 
@@ -101,7 +107,6 @@ export default defineNuxtComponent({
     mapStyleCache: { [key: string]: StyleSpecification }
     attributionControl: ITAttributionControl | null
     languageControl: OpenMapTilesLanguage | null
-    fullscreenControlObject: ITFullscreenControl | undefined
     withMap: any[]
   } {
     return {
@@ -110,15 +115,11 @@ export default defineNuxtComponent({
       mapStyleCache: {},
       attributionControl: null,
       languageControl: null,
-      fullscreenControlObject: undefined,
       withMap: [],
     }
   },
 
   mounted() {
-    // @ts-expect-error: type is too deep
-    this.fullscreenControlObject = new FullscreenControl()
-
     const map = new Map({
       container: 'map',
       style: (this.style as StyleSpecification) || {
@@ -175,7 +176,7 @@ export default defineNuxtComponent({
     map.addControl(geolocateControl)
     geolocateControl._container.classList.add('control-geolocate')
 
-    if (this.fullscreenControl)
+    if (this.fullscreenControl && this.fullscreenControlObject)
       map.addControl(this.fullscreenControlObject)
 
     map.addControl(

From 10b02ab173e718493f6c1c17adc64feb65ead826 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 3 Oct 2024 00:00:06 +0200
Subject: [PATCH 34/81] fix: marker ids on test #226

---
 cypress/e2e/embedded.cy.ts | 2 +-
 cypress/e2e/pois/map.cy.ts | 2 +-
 cypress/e2e/tracking.cy.ts | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/cypress/e2e/embedded.cy.ts b/cypress/e2e/embedded.cy.ts
index 59844fbd..0cb09823 100644
--- a/cypress/e2e/embedded.cy.ts
+++ b/cypress/e2e/embedded.cy.ts
@@ -24,7 +24,7 @@ describe('pois table', () => {
     cy.get('.category-selector input').wait(1000).click()
     cy.contains('Aire de passage', { timeout: 30000 }).click({ timeout: 30000 })
 
-    cy.get('#m0', { timeout: 30000 }).click()
+    cy.get('#1 ', { timeout: 30000 }).click()
     cy.url().should('include', `/embedded/22/1`)
 
     cy.get('#selected-category-22 button').click()
diff --git a/cypress/e2e/pois/map.cy.ts b/cypress/e2e/pois/map.cy.ts
index bab381dc..fee96ef2 100644
--- a/cypress/e2e/pois/map.cy.ts
+++ b/cypress/e2e/pois/map.cy.ts
@@ -18,7 +18,7 @@ describe('home content', () => {
   })
 
   it('contain map and poi', () => {
-    cy.get('#m0')
+    cy.get('#1')
 
     cy.htmlvalidate()
   })
diff --git a/cypress/e2e/tracking.cy.ts b/cypress/e2e/tracking.cy.ts
index f62d9cf3..90045f85 100644
--- a/cypress/e2e/tracking.cy.ts
+++ b/cypress/e2e/tracking.cy.ts
@@ -81,14 +81,14 @@ describe('home content', () => {
     })
 
     // Click on map POI
-    cy.get('#m0', { timeout: 10000 }).click()
+    cy.get('#1', { timeout: 10000 }).click()
     asserts.push((event: Event) => {
       assert(event.type === 'popup' && event.poiId === 1, 'Click on map POI')
     })
     cy.get('#PoiCard-1').should('be.visible')
 
     // Click on an other map POI
-    cy.get('#m1').click({ force: true }) // Force click on non visible element
+    cy.get('#2').click({ force: true }) // Force click on non visible element
     asserts.push((event: Event) => {
       assert(
         event.type === 'popup' && event.poiId === 2,

From 2b6d7023ff82944c790ee86426213f907ffaa239 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Rodrigo?= <fred.rodrigo@gmail.com>
Date: Thu, 3 Oct 2024 16:44:26 +0200
Subject: [PATCH 35/81] Fix README for build-config with docker

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a40927e1..048c4a4d 100644
--- a/README.md
+++ b/README.md
@@ -82,7 +82,7 @@ yarn start
 ```
 cp .env.sample .env
 docker compose build
-docker-compose -f docker compose.yml run --rm vido yarn build-config
+docker compose run --rm vido yarn build-config
 docker compose up -d
 ```
 

From 1100ac3b6c61fadc00d93a51606b0e7ac09c0cf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 8 Oct 2024 17:06:48 +0200
Subject: [PATCH 36/81] chore: declare teritorio cluster on higher level #226

---
 components/MainMap/MapFeatures.vue | 16 +++++++++++++++-
 components/Map/MapBase.vue         | 23 +----------------------
 2 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/components/MainMap/MapFeatures.vue b/components/MainMap/MapFeatures.vue
index 86f8c28c..ef985d83 100644
--- a/components/MainMap/MapFeatures.vue
+++ b/components/MainMap/MapFeatures.vue
@@ -8,6 +8,7 @@ import type {
   LngLatBounds,
   Map,
   MapDataEvent,
+  MapGeoJSONFeature,
   MapMouseEvent,
   Marker,
 } from 'maplibre-gl'
@@ -16,6 +17,7 @@ import type { PropType } from 'vue'
 import { ref } from 'vue'
 import booleanIntersects from '@turf/boolean-intersects'
 
+import { TeritorioCluster } from '@teritorio/maplibre-gl-teritorio-cluster'
 import { defineNuxtComponent } from '#app'
 import MapControlsExplore from '~/components/MainMap/MapControlsExplore.vue'
 import SnackBar from '~/components/MainMap/SnackBar.vue'
@@ -38,6 +40,7 @@ import type { LatLng } from '~/utils/types'
 import { MapStyleEnum } from '~/utils/types'
 import { getHashPart } from '~/utils/url'
 import useDevice from '~/composables/useDevice'
+import { clusterRender, markerRender, pinMarkerRender } from '~/lib/clusters'
 
 const STYLE_LAYERS = [
   'poi-level-1',
@@ -121,7 +124,7 @@ export default defineNuxtComponent({
     const device = useDevice()
     const { config } = storeToRefs(useSiteStore())
     const mapStore = useMapStore()
-    const { center, selectedFeature, pinMarker } = storeToRefs(mapStore)
+    const { center, selectedFeature, pinMarker, teritorioCluster } = storeToRefs(mapStore)
     const mapStyleLoaded = ref(false)
 
     return {
@@ -133,6 +136,7 @@ export default defineNuxtComponent({
       mapStyleLoaded,
       pinMarker,
       selectedFeature,
+      teritorioCluster,
     }
   },
 
@@ -234,6 +238,16 @@ export default defineNuxtComponent({
     onMapInit(map: Map) {
       this.map = map
 
+      this.teritorioCluster = new TeritorioCluster(map, POI_SOURCE, {
+        clusterRenderFn: clusterRender,
+        initialFeature: this.selectedFeature as unknown as MapGeoJSONFeature,
+        markerRenderFn: markerRender,
+        markerSize: 32,
+        pinMarkerRenderFn: pinMarkerRender,
+      })
+
+      this.teritorioCluster.addEventListener('click', (e: Event) => this.updateSelectedFeature((e as CustomEvent).detail.selectedFeature))
+
       this.map.on('click', this.onClick)
 
       this.center = this.map.getCenter()
diff --git a/components/Map/MapBase.vue b/components/Map/MapBase.vue
index 7f22c764..6feacd20 100644
--- a/components/Map/MapBase.vue
+++ b/components/Map/MapBase.vue
@@ -11,7 +11,6 @@ import type {
   LngLatLike,
   MapDataEvent,
   Map as MapGL,
-  MapGeoJSONFeature,
   MapLibreEvent,
   MapTouchEvent,
   Marker,
@@ -19,7 +18,6 @@ import type {
 } from 'maplibre-gl'
 import type { PropType } from 'vue'
 
-import { TeritorioCluster } from '@teritorio/maplibre-gl-teritorio-cluster'
 import { storeToRefs } from 'pinia'
 import { defineNuxtComponent } from '#app'
 import Attribution from '~/components/Map/Attribution.vue'
@@ -28,7 +26,6 @@ import type { ApiPoi } from '~/lib/apiPois'
 import { MAP_ZOOM } from '~/lib/constants'
 import type { MapPoi } from '~/lib/mapPois'
 import { markerLayerTextFactory } from '~/lib/markerLayerFactory'
-import { clusterRender, markerRender, pinMarkerRender } from '~/lib/clusters'
 import type { MapStyleEnum } from '~/utils/types'
 import { mapStore as useMapStore } from '~/stores/map'
 
@@ -109,11 +106,10 @@ export default defineNuxtComponent({
   },
 
   setup() {
-    const { selectedFeature, teritorioCluster } = storeToRefs(useMapStore())
+    const { selectedFeature } = storeToRefs(useMapStore())
 
     return {
       selectedFeature,
-      teritorioCluster,
     }
   },
 
@@ -281,14 +277,6 @@ export default defineNuxtComponent({
 
     onMapInit(map: MapGL) {
       this.map = map
-      this.teritorioCluster = new TeritorioCluster(map, POI_SOURCE, {
-        clusterRenderFn: clusterRender,
-        initialFeature: this.selectedFeature as unknown as MapGeoJSONFeature,
-        markerRenderFn: markerRender,
-        markerSize: 32,
-        pinMarkerRenderFn: pinMarkerRender,
-      })
-
       this.$emit('mapInit', map)
     },
 
@@ -379,15 +367,6 @@ export default defineNuxtComponent({
         | 'mapZoomEnd',
       event: any,
     ) {
-      if (
-        this.map
-        && this.map.getSource(POI_SOURCE)
-        && this.map.isSourceLoaded(POI_SOURCE)
-      ) {
-        this.teritorioCluster?.render()
-        this.teritorioCluster?.addEventListener('click', (e: Event) => this.$emit('featureClick', (e as CustomEvent).detail.selectedFeature))
-      }
-
       // @ts-expect-error: eventName is not in events definition
       this.$emit(eventName, event)
     },

From 12283edb685c8fdbbc831ffc741b422dbc659395 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 8 Oct 2024 17:07:21 +0200
Subject: [PATCH 37/81] chore: increase cluster radius #226

---
 components/Map/MapBase.vue |  2 +-
 package.json               |  2 +-
 yarn.lock                  | 10 +++++-----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/Map/MapBase.vue b/components/Map/MapBase.vue
index 6feacd20..f2c0d6e5 100644
--- a/components/Map/MapBase.vue
+++ b/components/Map/MapBase.vue
@@ -252,7 +252,7 @@ export default defineNuxtComponent({
       this.map.addSource(POI_SOURCE, {
         type: 'geojson',
         cluster: cluster === undefined ? true : cluster,
-        clusterRadius: 32,
+        clusterRadius: 64,
         clusterProperties: clusterProps,
         clusterMaxZoom: 22,
         tolerance: 0.6,
diff --git a/package.json b/package.json
index 0197d05b..732d705a 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "@sentry/vue": "^7.113.0",
     "@tailwindcss/typography": "^0.5.9",
     "@teritorio/map": "^0.12.7",
-    "@teritorio/maplibre-gl-teritorio-cluster": "^0.0.5",
+    "@teritorio/maplibre-gl-teritorio-cluster": "^0.0.6",
     "@teritorio/openmaptiles-gl-language": "^1.5.4",
     "@turf/boolean-intersects": "^6.5.0",
     "@types/geojson": "^7946.0.10",
diff --git a/yarn.lock b/yarn.lock
index 8b3be231..13b98b6f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3495,12 +3495,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@teritorio/maplibre-gl-teritorio-cluster@npm:^0.0.5":
-  version: 0.0.5
-  resolution: "@teritorio/maplibre-gl-teritorio-cluster@npm:0.0.5"
+"@teritorio/maplibre-gl-teritorio-cluster@npm:^0.0.6":
+  version: 0.0.6
+  resolution: "@teritorio/maplibre-gl-teritorio-cluster@npm:0.0.6"
   dependencies:
     maplibre-gl: "npm:^4.7.0"
-  checksum: 10c0/a63bc23f8719937b54ba5a7d58ff0620a08837abbeaf3780a45fa32009af5157865dbbd4a5330f4c84ae94be5e41ed684e6cd2f0b66eacb2cb80a6a79ea99d2a
+  checksum: 10c0/9dc6bd7cc674ae15db664237f5cfa139ff0dd592da511e9c231fcd0bb3d350758d4dd99f30be1d1db8451276cf0169c425a42fb7c719287e6a4deb36c4ca1242
   languageName: node
   linkType: hard
 
@@ -3539,7 +3539,7 @@ __metadata:
     "@tailwindcss/typography": "npm:^0.5.9"
     "@teritorio/font-teritorio": "npm:^2.5.0"
     "@teritorio/map": "npm:^0.12.7"
-    "@teritorio/maplibre-gl-teritorio-cluster": "npm:^0.0.5"
+    "@teritorio/maplibre-gl-teritorio-cluster": "npm:^0.0.6"
     "@teritorio/openmaptiles-gl-language": "npm:^1.5.4"
     "@turf/boolean-intersects": "npm:^6.5.0"
     "@types/geojson": "npm:^7946.0.10"

From fa51ba2a726aa8189e3b4c0b94b14449ae61ef51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 8 Oct 2024 18:34:53 +0200
Subject: [PATCH 38/81] fix: add teritorio cluster on map pois #226

---
 components/Map/MapPois.vue | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/components/Map/MapPois.vue b/components/Map/MapPois.vue
index 42e52141..e78ac3b1 100644
--- a/components/Map/MapPois.vue
+++ b/components/Map/MapPois.vue
@@ -3,6 +3,8 @@ import type { LngLatBounds, LngLatLike, Map } from 'maplibre-gl'
 import type { PropType } from 'vue'
 import { ref } from 'vue'
 
+import { TeritorioCluster } from '@teritorio/maplibre-gl-teritorio-cluster'
+import { storeToRefs } from 'pinia'
 import { defineNuxtComponent } from '#app'
 import MapBase from '~/components/Map/MapBase.vue'
 import type { ApiPoi } from '~/lib/apiPois'
@@ -10,6 +12,10 @@ import { getBBoxFeatures } from '~/lib/bbox'
 import { MAP_ZOOM } from '~/lib/constants'
 import type { MapPoiId } from '~/lib/mapPois'
 import { filterRouteByPoiIds } from '~/utils/styles'
+import { clusterRender, markerRender, pinMarkerRender } from '~/lib/clusters'
+import { mapStore as useMapStore } from '~/stores/map'
+
+const POI_SOURCE = 'poi'
 
 export default defineNuxtComponent({
   components: {
@@ -49,8 +55,11 @@ export default defineNuxtComponent({
     },
   },
   setup() {
+    const { teritorioCluster } = storeToRefs(useMapStore())
+
     return {
       mapBase: ref<InstanceType<typeof MapBase>>(),
+      teritorioCluster,
     }
   },
 
@@ -90,6 +99,13 @@ export default defineNuxtComponent({
   methods: {
     onMapInit(map: Map): void {
       this.map = map
+
+      this.teritorioCluster = new TeritorioCluster(map, POI_SOURCE, {
+        clusterRenderFn: clusterRender,
+        markerRenderFn: markerRender,
+        markerSize: 32,
+        pinMarkerRenderFn: pinMarkerRender,
+      })
     },
 
     onMapStyleLoad(): void {

From 76e0d6c2ff0cd8ee721cbe0a7e39b30d731d96e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Wed, 2 Oct 2024 11:27:04 +0200
Subject: [PATCH 39/81] fix: wrong prop definition #379

---
 components/PoisCard/PoiCardLight.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/PoisCard/PoiCardLight.vue b/components/PoisCard/PoiCardLight.vue
index 58154fc9..e9de3a52 100644
--- a/components/PoisCard/PoiCardLight.vue
+++ b/components/PoisCard/PoiCardLight.vue
@@ -8,7 +8,7 @@ import type { ApiPoi } from '~/lib/apiPois'
 // Props
 //
 const props = withDefaults(defineProps<{
-  notebook: boolean
+  notebook?: boolean
   poi: ApiPoi
 }>(), {
   notebook: false,

From 1517fe0debc36342b33b466d29fd00794c9fb5fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Wed, 2 Oct 2024 15:40:56 +0200
Subject: [PATCH 40/81] feat: add bbox or point support on detail page #374

---
 lib/apiPois.ts             | 2 +-
 pages/poi/[id]/details.vue | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/apiPois.ts b/lib/apiPois.ts
index 59dc77ba..79e0ada3 100644
--- a/lib/apiPois.ts
+++ b/lib/apiPois.ts
@@ -89,7 +89,7 @@ export type ApiPois = GeoJSON.FeatureCollection<
 
 export interface ApiPoisOptions {
 
-  geometry_as?: 'point' | 'bbox'
+  geometry_as?: 'point' | 'bbox' | 'point_or_bbox'
 
   short_description?: boolean
   format?: 'geojson' | 'csv'
diff --git a/pages/poi/[id]/details.vue b/pages/poi/[id]/details.vue
index f73870a9..b63bda42 100644
--- a/pages/poi/[id]/details.vue
+++ b/pages/poi/[id]/details.vue
@@ -38,6 +38,7 @@ const fetchPoiPoiDeps = getAsyncDataOrThrows(
   `fetchPoiPoiDeps-${params.id}`,
   async () => {
     return await getPoiDepsById(config.value!, params.id as string, {
+      geometry_as: 'point_or_bbox',
       short_description: false,
     }).then((poiDeps) => {
       let poi: ApiPoi | undefined

From 39e6306eb39b292c29c4d056ccafbe85665c5542 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 3 Oct 2024 16:12:25 +0200
Subject: [PATCH 41/81] chore: apply script setup style on poicardcontent #359

---
 components/PoisCard/PoiCardContent.vue | 323 +++++++++++--------------
 1 file changed, 142 insertions(+), 181 deletions(-)

diff --git a/components/PoisCard/PoiCardContent.vue b/components/PoisCard/PoiCardContent.vue
index 7fcd78f7..d67a0847 100644
--- a/components/PoisCard/PoiCardContent.vue
+++ b/components/PoisCard/PoiCardContent.vue
@@ -1,188 +1,152 @@
-<script lang="ts">
+<script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { mapState, storeToRefs } from 'pinia'
-import type { PropType } from 'vue'
-import { defineNuxtComponent } from '#app'
+import { storeToRefs } from 'pinia'
 import Fields from '~/components/PoisCard/Fields.vue'
 import FavoriteIcon from '~/components/UI/FavoriteIcon.vue'
 import TeritorioIcon from '~/components/UI/TeritorioIcon.vue'
-import type { ApiPoi, ApiPoiId, ApiPoiProperties } from '~/lib/apiPois'
+import type { ApiPoi } from '~/lib/apiPois'
 import { coordinatesHref } from '~/lib/coordinates'
-import { favoriteStore } from '~/stores/favorite'
+import { favoriteStore as useFavoriteStore } from '~/stores/favorite'
 import { mapStore as useMapStore } from '~/stores/map'
 import ContribFieldGroup from '~/components/Fields/ContribFieldGroup.vue'
-import type { ContribFields } from '~/composables/useContrib'
 import useDevice from '~/composables/useDevice'
 
-export default defineNuxtComponent({
-  components: {
-    ContribFieldGroup,
-    FontAwesomeIcon,
-    TeritorioIcon,
-    FavoriteIcon,
-    Fields,
-  },
-
-  props: {
-    detailsIsExternal: {
-      type: Boolean,
-      default: false,
-    },
-    poi: {
-      type: Object as PropType<ApiPoi>,
-      required: true,
-    },
-    explorerModeEnabled: {
-      type: Boolean,
-      required: true,
-    },
-    favoritesModeEnabled: {
-      type: Boolean,
-      required: true,
-    },
-  },
-
-  setup(props) {
-    const { isModeExplorer } = storeToRefs(useMapStore())
-    const device = useDevice()
-    const routeHref = ref<string>()
-
-    onMounted(() => {
-      routeHref.value = coordinatesHref(props.poi.geometry)
-    })
-
-    return {
-      device,
-      isModeExplorer,
-      routeHref,
-    }
-  },
-
-  data(): {
-    contribMode: boolean
-    isContribEligible: (properties: ApiPoiProperties) => boolean
-    getContributorFields: (feature: ApiPoi) => ContribFields
-  } {
-    const { contribMode, isContribEligible, getContributorFields } = useContrib()
-
-    return {
-      contribMode,
-      isContribEligible,
-      getContributorFields,
-    }
-  },
+//
+// Props
+//
+const props = withDefaults(defineProps<{
+  detailsIsExternal?: boolean
+  explorerModeEnabled: boolean
+  favoritesModeEnabled: boolean
+  poi: ApiPoi
+}>(), {
+  detailsIsExternal: false,
+})
 
-  computed: {
-    ...mapState(favoriteStore, ['favoritesIds', 'favoriteAddresses']),
+//
+// Emits
+//
+const emit = defineEmits<{
+  (e: 'favoriteClick', poi: ApiPoi): void
+  (e: 'exploreClick', poi: ApiPoi): void
+  (e: 'zoomClick', poi: ApiPoi): void
+}>()
+
+//
+// Composables
+//
+const { t } = useI18n()
+const { $tracking } = useNuxtApp()
+const { favoritesIds, favoriteAddresses } = storeToRefs(useFavoriteStore())
+const { contribMode, isContribEligible, getContributorFields } = useContrib()
+const { isModeExplorer } = storeToRefs(useMapStore())
+const device = useDevice()
+
+//
+// Data
+//
+const routeHref = ref<string>()
+
+//
+// Hooks
+//
+onMounted(() => {
+  routeHref.value = coordinatesHref(props.poi.geometry)
+})
 
-    id(): ApiPoiId {
-      return this.poi.properties.metadata.id
-    },
+//
+// Computed
+//
+const id = computed(() => {
+  return props.poi.properties.metadata.id
+})
 
-    isFavorite() {
-      return this.favoritesIds.includes(this.id) || this.favoriteAddresses.has(this.id.toString())
-    },
+const isFavorite = computed(() => {
+  return favoritesIds.value.includes(id.value) || favoriteAddresses.value.has(id.value.toString())
+})
 
-    name(): string | undefined {
-      return (
-        this.poi.properties.name
-        || this.poi.properties.editorial?.class_label_popup?.fr
-        || this.poi.properties.editorial?.class_label?.fr
-      )
-    },
+const name = computed(() => {
+  return props.poi.properties.name || props.poi.properties.editorial?.class_label_popup?.fr || props.poi.properties.editorial?.class_label?.fr
+})
 
-    colorFill(): string {
-      return this.poi.properties.display?.color_fill || 'black'
-    },
+const colorFill = computed(() => {
+  return props.poi.properties.display?.color_fill || 'black'
+})
+
+const colorLine = computed(() => {
+  return props.poi.properties.display?.color_line || 'black'
+})
+
+const icon = computed(() => {
+  return props.poi.properties.display?.icon
+})
+
+const category = computed(() => {
+  return props.poi.properties.editorial?.class_label_popup?.fr || props.poi.properties.editorial?.class_label?.fr
+})
 
-    colorLine(): string {
-      return this.poi.properties.display?.color_line || 'black'
-    },
+const description = computed(() => {
+  return props.poi.properties.description
+})
 
-    icon(): string | undefined {
-      return this.poi.properties.display?.icon
-    },
+const unavoidable = computed(() => {
+  return Boolean(props.poi.properties.editorial?.unavoidable)
+})
 
-    category(): string | undefined {
-      return (
-        this.poi.properties.editorial?.class_label_popup?.fr
-        || this.poi.properties.editorial?.class_label?.fr
+const websiteDetails = computed(() => {
+  const url = props.poi.properties.editorial && props.poi.properties.editorial['website:details']
+
+  if (!url) {
+    return undefined
+  }
+  else if (!url.startsWith('https://') && !url.startsWith('http://')) {
+    return url
+  }
+  else {
+    const u = new URL(url)
+    if (process.client && u.hostname !== window.location.hostname) {
+      return url
+    }
+    else {
+      return url.replace(
+        `${u.protocol}//${u.hostname}${u.port ? `:${u.port}` : ''}`,
+        '',
       )
-    },
-
-    description(): string | undefined {
-      return this.poi.properties.description
-    },
-
-    unavoidable(): boolean {
-      return Boolean(this.poi.properties.editorial?.unavoidable)
-    },
-
-    websiteDetails(): string | undefined {
-      const url
-        = this.poi.properties.editorial
-        && this.poi.properties.editorial['website:details']
-
-      if (!url) {
-        return undefined
-      }
-      else if (!url.startsWith('https://') && !url.startsWith('http://')) {
-        return url
-      }
-      else {
-        const u = new URL(url)
-        if (process.client && u.hostname !== window.location.hostname) {
-          return url
-        }
-        else {
-          return url.replace(
-            `${u.protocol}//${u.hostname}${u.port ? `:${u.port}` : ''}`,
-            '',
-          )
-        }
-      }
-    },
-  },
-
-  emits: {
-    zoomClick: (_poi: ApiPoi) => true,
-    exploreClick: (_poi: ApiPoi) => true,
-    favoriteClick: (_poi: ApiPoi) => true,
-  },
-
-  methods: {
-    onZoomClick() {
-      this.trackingPopupEvent('zoom')
-      this.$emit('zoomClick', this.poi)
-    },
-
-    onExploreClick() {
-      if (!this.isModeExplorer)
-        this.trackingPopupEvent('explore')
-
-      this.$emit('exploreClick', this.poi)
-    },
-
-    onFavoriteClick() {
-      if (!this.isFavorite)
-        this.trackingPopupEvent('favorite')
-
-      this.$emit('favoriteClick', this.poi)
-    },
-
-    trackingPopupEvent(
-      event: 'details' | 'route' | 'explore' | 'favorite' | 'zoom',
-    ) {
-      this.$tracking({
-        type: 'popup_event',
-        event,
-        poiId: this.id,
-        category: this.category || '',
-        title: this.poi.properties?.name,
-      })
-    },
-  },
+    }
+  }
 })
+
+//
+// Methods
+//
+function onZoomClick() {
+  trackingPopupEvent('zoom')
+  emit('zoomClick', props.poi)
+}
+
+function onExploreClick() {
+  if (!isModeExplorer.value)
+    trackingPopupEvent('explore')
+
+  emit('exploreClick', props.poi)
+}
+
+function onFavoriteClick() {
+  if (!isFavorite.value)
+    trackingPopupEvent('favorite')
+
+  emit('favoriteClick', props.poi)
+}
+
+function trackingPopupEvent(event: 'details' | 'route' | 'explore' | 'favorite' | 'zoom') {
+  $tracking({
+    type: 'popup_event',
+    event,
+    poiId: id.value,
+    category: category.value || '',
+    title: props.poi.properties?.name,
+  })
+}
 </script>
 
 <template>
@@ -210,7 +174,7 @@ export default defineNuxtComponent({
             :target="detailsIsExternal ? '_blank' : '_self'"
             @click.stop="trackingPopupEvent('details')"
           >
-            {{ $t('poiCard.details') }}
+            {{ t('poiCard.details') }}
           </NuxtLink>
           <a
             v-else
@@ -221,7 +185,7 @@ export default defineNuxtComponent({
             :target="detailsIsExternal ? '_blank' : '_self'"
             @click.stop="trackingPopupEvent('details')"
           >
-            {{ $t('poiCard.details') }}
+            {{ t('poiCard.details') }}
           </a>
         </template>
       </client-only>
@@ -271,35 +235,32 @@ export default defineNuxtComponent({
         v-if="device.phone && routeHref"
         :href="routeHref"
         class="tw-flex tw-flex-col tw-items-center tw-flex-1 tw-h-full tw-p-2 tw-space-y-2 tw-rounded-lg hover:tw-bg-zinc-100"
-        :title="$t('poiCard.findRoute')"
+        :title="t('poiCard.findRoute')"
         @click="trackingPopupEvent('route')"
       >
         <FontAwesomeIcon icon="route" :color="colorLine" size="sm" />
-        <span class="tw-text-sm">{{ $t('poiCard.route') }}</span>
+        <span class="tw-text-sm">{{ t('poiCard.route') }}</span>
       </a>
 
       <button
         type="button"
         class="tw-flex tw-flex-1 tw-flex-col tw-items-center tw-space-y-2 tw-rounded-lg tw-p-2 tw-h-full hover:tw-bg-zinc-100"
-        :title="$t('poiCard.zoom')"
+        :title="t('poiCard.zoom')"
         @click.stop="onZoomClick"
       >
         <FontAwesomeIcon icon="plus" :color="colorLine" size="sm" />
-        <span class="tw-text-sm">{{ $t('poiCard.zoom') }}</span>
+        <span class="tw-text-sm">{{ t('poiCard.zoom') }}</span>
       </button>
 
       <button
         v-if="explorerModeEnabled"
         type="button"
-        class="tw-flex tw-flex-1 tw-flex-col tw-items-center tw-space-y-2 tw-rounded-lg tw-p-2 tw-h-full" :class="[
+        class="tw-flex tw-flex-1 tw-flex-col tw-items-center tw-space-y-2 tw-rounded-lg tw-p-2 tw-h-full"
+        :class="[
           isModeExplorer && 'tw-bg-blue-600 tw-text-white hover:tw-bg-blue-500',
           !isModeExplorer && 'hover:tw-bg-zinc-100',
         ]"
-        :title="
-          isModeExplorer
-            ? $t('poiCard.unactivateExplore')
-            : $t('poiCard.activateExplore')
-        "
+        :title="isModeExplorer ? t('poiCard.unactivateExplore') : t('poiCard.activateExplore')"
         @click.stop="onExploreClick"
       >
         <FontAwesomeIcon
@@ -307,18 +268,18 @@ export default defineNuxtComponent({
           :color="isModeExplorer ? 'white' : colorLine"
           size="sm"
         />
-        <span class="tw-text-sm">{{ $t('poiCard.explore') }}</span>
+        <span class="tw-text-sm">{{ t('poiCard.explore') }}</span>
       </button>
 
       <button
         v-if="favoritesModeEnabled && id"
         type="button"
         class="tw-flex tw-flex-col tw-items-center tw-flex-1 tw-h-full tw-p-2 tw-space-y-2 tw-rounded-lg hover:tw-bg-zinc-100"
-        :title="isFavorite ? $t('poiCard.favoriteOn') : $t('poiCard.favoriteOff')"
+        :title="isFavorite ? t('poiCard.favoriteOn') : t('poiCard.favoriteOff')"
         @click.stop="onFavoriteClick"
       >
         <FavoriteIcon :is-active="isFavorite" :color-line="colorLine" />
-        <span class="tw-text-sm">{{ $t('poiCard.favorite') }}</span>
+        <span class="tw-text-sm">{{ t('poiCard.favorite') }}</span>
       </button>
     </div>
   </div>

From f50e5bebe414adef9cb993ac3b07937d45750a0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Wed, 9 Oct 2024 11:59:55 +0200
Subject: [PATCH 42/81] chore: add isochrone feature flag from config #359

---
 cypress/fixtures/teritorio/references/settings.json | 3 ++-
 lib/apiSettings.ts                                  | 2 ++
 utils/types-config.ts                               | 1 +
 vidos-config-cypress.json                           | 1 +
 vidos-config-empty.json                             | 1 +
 vidos.config.sample.ts                              | 1 +
 6 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/cypress/fixtures/teritorio/references/settings.json b/cypress/fixtures/teritorio/references/settings.json
index 3695526d..16dd07b3 100644
--- a/cypress/fixtures/teritorio/references/settings.json
+++ b/cypress/fixtures/teritorio/references/settings.json
@@ -69,7 +69,8 @@
                 "en": "foo"
             },
             "favorites_mode": true,
-            "explorer_mode": true
+            "explorer_mode": true,
+            "isochroneEnabled": false
         }
     ]
 }
diff --git a/lib/apiSettings.ts b/lib/apiSettings.ts
index de0d8d3c..fcbfbe01 100644
--- a/lib/apiSettings.ts
+++ b/lib/apiSettings.ts
@@ -21,6 +21,8 @@ export interface SiteInfosTheme {
   favorites_mode: boolean
 
   explorer_mode: boolean
+
+  isochroneEnabled: boolean
 }
 
 export interface Settings {
diff --git a/utils/types-config.ts b/utils/types-config.ts
index 3485b868..72f620ad 100644
--- a/utils/types-config.ts
+++ b/utils/types-config.ts
@@ -12,6 +12,7 @@ export interface VidoConfig {
   BICYCLE_STYLE_URL: string
   IMAGE_PROXY: string[] | null
   MAPILLARY_ACCESS_TOKEN: string | null
+  OPEN_ROUTE_SERVICE_KEY: string | null
   COOKIES_CONSENT: string | null
   COOKIES_LINK: string | null
   GOOGLE_SITE_VERIFICATION: string | undefined
diff --git a/vidos-config-cypress.json b/vidos-config-cypress.json
index 7e7e6045..327e74d7 100644
--- a/vidos-config-cypress.json
+++ b/vidos-config-cypress.json
@@ -12,6 +12,7 @@
       "cdt40.tourinsoft.com"
     ],
     "MAPILLARY_ACCESS_TOKEN": "MLY|5609419529131330|36d86a5578fecba521c1ffe033bda2fc",
+    "OPEN_ROUTE_SERVICE_KEY": "5b3ce3597851110001cf6248e176e3d24c3d4a71bff8701252700040",
     "COOKIES_CONSENT": null,
     "COOKIES_LINK": null,
     "GOOGLE_TAG_MANAGER_ID": null,
diff --git a/vidos-config-empty.json b/vidos-config-empty.json
index 458105c1..5eb55661 100644
--- a/vidos-config-empty.json
+++ b/vidos-config-empty.json
@@ -12,6 +12,7 @@
       "cdt40.tourinsoft.com"
     ],
     "MAPILLARY_ACCESS_TOKEN": "MLY|5609419529131330|36d86a5578fecba521c1ffe033bda2fc",
+    "OPEN_ROUTE_SERVICE_KEY": "5b3ce3597851110001cf6248e176e3d24c3d4a71bff8701252700040",
     "SENTRY_DSN": null,
     "COOKIES_CONSENT": null,
     "COOKIES_LINK": null,
diff --git a/vidos.config.sample.ts b/vidos.config.sample.ts
index 81dd66f0..aa9470ab 100644
--- a/vidos.config.sample.ts
+++ b/vidos.config.sample.ts
@@ -7,6 +7,7 @@ const configDefault = {
   API_QR_SHORTENER: 'https://qr-shortener-dev.teritorio.xyz',
   IMAGE_PROXY: null,
   MAPILLARY_ACCESS_TOKEN: null,
+  OPEN_ROUTE_SERVICE_KEY: null,
   SENTRY_DSN: null,
   COOKIES_CONSENT: null,
   COOKIES_LINK: null,

From 61cc3078ddafb3aba81a04b0f63b1ddd5fd80053 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 3 Oct 2024 18:00:57 +0200
Subject: [PATCH 43/81] chore: add isochrone composable #359

---
 composables/useIsochrone.ts | 66 +++++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 composables/useIsochrone.ts

diff --git a/composables/useIsochrone.ts b/composables/useIsochrone.ts
new file mode 100644
index 00000000..cccd48aa
--- /dev/null
+++ b/composables/useIsochrone.ts
@@ -0,0 +1,66 @@
+import { siteStore as useSiteStore } from '~/stores/site'
+
+export const profiles = {
+  car: 'driving-car',
+  cycle: 'cycling-regular',
+  foot: 'foot-walking',
+  wheelchair: 'wheelchair',
+}
+
+type ProfileKeys = keyof typeof profiles
+export type Profile = (typeof profiles)[ProfileKeys]
+
+export default function useIsochrone() {
+  // Get feature flag for Vido config
+  const { config, settings } = useSiteStore()
+  const enabled = settings?.themes[0].isochroneEnabled || true
+
+  //
+  // Data
+  //
+  const isOverlayOpen = ref(false)
+
+  //
+  // Methods
+  //
+  async function calculate(feature: GeoJSON.Feature, profile: Profile, range: number[] = [300, 200]) {
+    if (!config?.OPEN_ROUTE_SERVICE_KEY)
+      throw new Error('Open Route Service api key is missing.')
+
+    const { coordinates } = feature.geometry as GeoJSON.Point
+    const uniqueID = `isochrone-${profile}-${feature.properties?.metadata.id}`
+
+    const { data, error } = await useAsyncData<GeoJSON.FeatureCollection>(
+      uniqueID,
+      () => $fetch(`https://api.openrouteservice.org/v2/isochrones/${profile}`, {
+        method: 'POST',
+        headers: {
+          'Accept': 'application/json, application/geo+json, application/gpx+xml, img/png; charset=utf-8',
+          'Authorization': config.OPEN_ROUTE_SERVICE_KEY!,
+          'Content-Type': 'application/json',
+        },
+        body: {
+          locations: [coordinates],
+          range,
+        },
+      }),
+    )
+
+    if (error.value)
+      throw error.value
+
+    return data.value
+  }
+
+  function toggleOverlay() {
+    isOverlayOpen.value = !isOverlayOpen.value
+  }
+
+  return {
+    calculate,
+    enabled,
+    isOverlayOpen,
+    toggleOverlay,
+    profiles,
+  }
+}

From 98624fcce0d6b3e04018c3ba6013981fd522d13a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Wed, 9 Oct 2024 12:34:51 +0200
Subject: [PATCH 44/81] feat: add isochrone module #359

---
 components/Isochrone/IsochroneMapControl.vue |  36 ++++
 components/Isochrone/IsochroneTrigger.vue    |  99 +++++++++++
 components/Map/MapBase.vue                   |   1 +
 components/PoisCard/PoiCardContent.vue       |  15 +-
 composables/useIsochrone.ts                  | 170 +++++++++++++++++--
 locales/en-GB.ts                             |  12 ++
 locales/es-ES.ts                             |  12 ++
 locales/fr-FR.ts                             |  12 ++
 pages/index.vue                              |  10 +-
 plugins/fontawesome.ts                       |   6 +
 10 files changed, 354 insertions(+), 19 deletions(-)
 create mode 100644 components/Isochrone/IsochroneMapControl.vue
 create mode 100644 components/Isochrone/IsochroneTrigger.vue

diff --git a/components/Isochrone/IsochroneMapControl.vue b/components/Isochrone/IsochroneMapControl.vue
new file mode 100644
index 00000000..93f5b3f5
--- /dev/null
+++ b/components/Isochrone/IsochroneMapControl.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { Map } from 'maplibre-gl'
+import { Control } from '@teritorio/map'
+import IsochroneTrigger from '~/components/Isochrone/IsochroneTrigger.vue'
+
+//
+// Props
+//
+const props = defineProps<{
+  feature: GeoJSON.Feature
+  map: Map
+}>()
+
+//
+// Data
+//
+const controlRef = ref<InstanceType<typeof HTMLDivElement>>()
+class IsochroneControl extends Control {
+  constructor(container: HTMLDivElement) {
+    super(container)
+  }
+}
+
+onMounted(() => {
+  if (controlRef.value) {
+    const control = new IsochroneControl(controlRef.value)
+    props.map.addControl(control)
+  }
+})
+</script>
+
+<template>
+  <div ref="controlRef" class="maplibregl-ctrl maplibregl-ctrl-group">
+    <IsochroneTrigger :feature="feature" />
+  </div>
+</template>
diff --git a/components/Isochrone/IsochroneTrigger.vue b/components/Isochrone/IsochroneTrigger.vue
new file mode 100644
index 00000000..c9194ee0
--- /dev/null
+++ b/components/Isochrone/IsochroneTrigger.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+//
+// Props
+//
+const props = defineProps<{
+  feature: GeoJSON.Feature
+}>()
+
+//
+// Composables
+//
+const { isOverlayOpen, toggleOverlay, profiles, fetchIsochrone } = useIsochrone()
+const { t } = useI18n()
+
+//
+// Data
+//
+const loading = ref(false)
+const profile = ref<Profile>()
+
+//
+// Methods
+//
+async function handleProfileUpdate(value: Profile) {
+  try {
+    loading.value = true
+
+    await fetchIsochrone(props.feature, value)
+  }
+  catch (e: any) {}
+  finally {
+    loading.value = false
+    profile.value = undefined
+    toggleOverlay()
+  }
+}
+</script>
+
+<template>
+  <button type="button" :class="$attrs.class" :aria-label="t('isochrone.trigger')" @click.stop="toggleOverlay">
+    <slot />
+  </button>
+
+  <VOverlay v-model="isOverlayOpen" class="align-center justify-center">
+    <VCard class="mx-auto" max-width="380px" :disabled="loading" :loading="loading">
+      <template #loader="{ isActive }">
+        <VProgressLinear
+          :active="isActive"
+          color="deep-purple"
+          height="4"
+          indeterminate
+        />
+      </template>
+
+      <template #append>
+        <VBtn variant="plain" @click="toggleOverlay">
+          <template #prepend>
+            <FontAwesomeIcon icon="times" />
+          </template>
+          {{ t('ui.close') }}
+        </VBtn>
+      </template>
+
+      <template #title>
+        {{ t('isochrone.overlay.title') }}
+      </template>
+
+      <template #text>
+        {{ t('isochrone.overlay.text') }}
+      </template>
+
+      <template #actions>
+        <VSpacer />
+        <VBtnToggle v-model="profile" rounded="xs" variant="outlined" divided mandatory @update:model-value="handleProfileUpdate">
+          <VBtn :value="profiles.foot">
+            <template #prepend>
+              <FontAwesomeIcon icon="walking" />
+            </template>
+            {{ t(`isochrone.profiles.${profiles.foot}`) }}
+          </VBtn>
+          <VBtn :value="profiles.cycle">
+            <template #prepend>
+              <FontAwesomeIcon icon="biking" />
+            </template>
+            {{ t(`isochrone.profiles.${profiles.cycle}`) }}
+          </VBtn>
+          <VBtn :value="profiles.car">
+            <template #prepend>
+              <FontAwesomeIcon icon="car" />
+            </template>
+            {{ t(`isochrone.profiles.${profiles.car}`) }}
+          </VBtn>
+        </VBtnToggle>
+      </template>
+    </VCard>
+  </VOverlay>
+</template>
diff --git a/components/Map/MapBase.vue b/components/Map/MapBase.vue
index f2c0d6e5..f0c1f69d 100644
--- a/components/Map/MapBase.vue
+++ b/components/Map/MapBase.vue
@@ -277,6 +277,7 @@ export default defineNuxtComponent({
 
     onMapInit(map: MapGL) {
       this.map = map
+      useState('map-instance', () => map)
       this.$emit('mapInit', map)
     },
 
diff --git a/components/PoisCard/PoiCardContent.vue b/components/PoisCard/PoiCardContent.vue
index d67a0847..8f5d1acb 100644
--- a/components/PoisCard/PoiCardContent.vue
+++ b/components/PoisCard/PoiCardContent.vue
@@ -10,6 +10,7 @@ import { favoriteStore as useFavoriteStore } from '~/stores/favorite'
 import { mapStore as useMapStore } from '~/stores/map'
 import ContribFieldGroup from '~/components/Fields/ContribFieldGroup.vue'
 import useDevice from '~/composables/useDevice'
+import IsochroneTrigger from '~/components/Isochrone/IsochroneTrigger.vue'
 
 //
 // Props
@@ -41,6 +42,7 @@ const { favoritesIds, favoriteAddresses } = storeToRefs(useFavoriteStore())
 const { contribMode, isContribEligible, getContributorFields } = useContrib()
 const { isModeExplorer } = storeToRefs(useMapStore())
 const device = useDevice()
+const { enabled: isochroneEnabled } = useIsochrone()
 
 //
 // Data
@@ -228,9 +230,7 @@ function trackingPopupEvent(event: 'details' | 'route' | 'explore' | 'favorite'
       <ContribFieldGroup v-if="contribMode && isContribEligible(poi.properties)" v-bind="getContributorFields(poi)" />
     </div>
 
-    <div
-      class="tw-flex tw-items-center tw-space-x-2 tw-justify-evenly tw-shrink-0 tw-bottom-0 tw-pt-2"
-    >
+    <div class="tw-flex tw-items-center tw-space-x-2 tw-justify-evenly tw-shrink-0 tw-bottom-0 tw-pt-2">
       <a
         v-if="device.phone && routeHref"
         :href="routeHref"
@@ -242,6 +242,15 @@ function trackingPopupEvent(event: 'details' | 'route' | 'explore' | 'favorite'
         <span class="tw-text-sm">{{ t('poiCard.route') }}</span>
       </a>
 
+      <IsochroneTrigger
+        v-if="isochroneEnabled"
+        class="tw-flex tw-flex-col tw-items-center tw-flex-1 tw-h-full tw-p-2 tw-space-y-2 tw-rounded-lg hover:tw-bg-zinc-100"
+        :feature="poi"
+      >
+        <FontAwesomeIcon :color="colorLine" icon="clock" size="sm" />
+        <span class="tw-text-sm">{{ t('isochrone.trigger') }}</span>
+      </IsochroneTrigger>
+
       <button
         type="button"
         class="tw-flex tw-flex-1 tw-flex-col tw-items-center tw-space-y-2 tw-rounded-lg tw-p-2 tw-h-full hover:tw-bg-zinc-100"
diff --git a/composables/useIsochrone.ts b/composables/useIsochrone.ts
index cccd48aa..c7861734 100644
--- a/composables/useIsochrone.ts
+++ b/composables/useIsochrone.ts
@@ -1,4 +1,7 @@
+import type { ExpressionSpecification, LngLatBoundsLike, Map } from 'maplibre-gl'
+import type { FeatureCollection, GeoJsonProperties, Geometry } from 'geojson'
 import { siteStore as useSiteStore } from '~/stores/site'
+import { mapStore as useMapStore } from '~/stores/map'
 
 export const profiles = {
   car: 'driving-car',
@@ -9,55 +12,198 @@ export const profiles = {
 
 type ProfileKeys = keyof typeof profiles
 export type Profile = (typeof profiles)[ProfileKeys]
+type ORSData = FeatureCollection<Geometry, GeoJsonProperties> & {
+  bbox: LngLatBoundsLike
+  metadata: {
+    query: {
+      profile: Profile
+    }
+  }
+}
 
 export default function useIsochrone() {
-  // Get feature flag for Vido config
+  //
+  // Composables
+  //
   const { config, settings } = useSiteStore()
+  const mapStore = useMapStore()
+  // Get feature flag for Vido config
   const enabled = settings?.themes[0].isochroneEnabled || true
+  const { t, locale } = useI18n()
+  const map = useState<Map>('map-instance')
+  const profile = useState('isochrone-profile')
 
   //
   // Data
   //
   const isOverlayOpen = ref(false)
+  const sources = ref<string[]>([])
+  const layers = ref<string[]>([])
+  const sourceName = 'isochrone'
+  const colorExpression = [
+    'match',
+    ['get', 'value'],
+    900,
+    '#00c500',
+    1800,
+    '#ffac00',
+    3600,
+    '#ff0000',
+    '#000000',
+  ] as ExpressionSpecification
 
   //
   // Methods
   //
-  async function calculate(feature: GeoJSON.Feature, profile: Profile, range: number[] = [300, 200]) {
-    if (!config?.OPEN_ROUTE_SERVICE_KEY)
-      throw new Error('Open Route Service api key is missing.')
+  const reset = () => {
+    layers.value.forEach(layerId => map.value.removeLayer(layerId))
+    layers.value = []
+
+    sources.value.forEach(sourceId => map.value.removeSource(sourceId))
+    sources.value = []
+  }
+
+  const render = (data: ORSData) => {
+    if (map.value) {
+      const firstLineLayer = map.value.getStyle().layers.find(layer => layer.type === 'line')?.id
+
+      profile.value = data.metadata.query.profile
+
+      // Apply Isochrone bbox
+      map.value.fitBounds(data.bbox)
+
+      // Add Isochrone data source
+      map.value.addSource(sourceName, {
+        type: 'geojson',
+        data: {
+          ...data,
+          features: data.features.reverse(),
+        },
+      })
+
+      // Add Isochrone fill layer
+      map.value.addLayer({
+        id: `${sourceName}-fill`,
+        type: 'fill',
+        source: sourceName,
+        layout: {},
+        paint: {
+          'fill-color': colorExpression,
+          'fill-opacity': 0.1,
+        },
+      }, firstLineLayer)
+
+      // Add Isochrone line layer
+      map.value.addLayer({
+        id: `${sourceName}-line`,
+        type: 'line',
+        source: sourceName,
+        layout: {
+          'line-join': 'round',
+          'line-cap': 'round',
+        },
+        paint: {
+          'line-color': colorExpression,
+          'line-width': 3,
+        },
+      })
+
+      // Add Isochrone symbol layer
+      map.value.addLayer({
+        id: `${sourceName}-symbol`,
+        type: 'symbol',
+        source: sourceName,
+        layout: {
+          'symbol-placement': 'line',
+          'text-pitch-alignment': 'viewport',
+          'text-field': [
+            'concat',
+            ['/', ['get', 'value'], 60],
+            `min - ${t(`isochrone.profiles.${profile.value}`)}`,
+          ],
+          'text-size': 16,
+        },
+        paint: {
+          'text-color': colorExpression,
+          'text-halo-width': 2,
+          'text-halo-color': '#ffffff',
+        },
+      })
+
+      sources.value.push(sourceName)
+      layers.value.push(`${sourceName}-fill`)
+      layers.value.push(`${sourceName}-line`)
+      layers.value.push(`${sourceName}-symbol`)
+    }
+  }
+
+  const toggleOverlay = () => {
+    isOverlayOpen.value = !isOverlayOpen.value
+  }
+
+  const fetchIsochrone = async (feature: GeoJSON.Feature, profile: Profile, range: number[] = [900, 1800, 3600]) => {
+    reset()
 
     const { coordinates } = feature.geometry as GeoJSON.Point
     const uniqueID = `isochrone-${profile}-${feature.properties?.metadata.id}`
 
-    const { data, error } = await useAsyncData<GeoJSON.FeatureCollection>(
+    const { data, error } = await useAsyncData<ORSData>(
       uniqueID,
       () => $fetch(`https://api.openrouteservice.org/v2/isochrones/${profile}`, {
         method: 'POST',
         headers: {
           'Accept': 'application/json, application/geo+json, application/gpx+xml, img/png; charset=utf-8',
-          'Authorization': config.OPEN_ROUTE_SERVICE_KEY!,
+          'Authorization': config!.OPEN_ROUTE_SERVICE_KEY!,
           'Content-Type': 'application/json',
         },
         body: {
+          id: uniqueID,
           locations: [coordinates],
+          range_type: 'time',
           range,
         },
       }),
     )
 
     if (error.value)
-      throw error.value
+      throw new Error(error.value.message)
 
-    return data.value
+    if (data.value)
+      render(data.value)
   }
 
-  function toggleOverlay() {
-    isOverlayOpen.value = !isOverlayOpen.value
-  }
+  //
+  // Subscribers
+  //
+  mapStore.$onAction(({ name, after }) => {
+    if (name === 'setSelectedFeature') {
+      after((result) => {
+        if (result === undefined) {
+          reset()
+        }
+      })
+    }
+  })
+
+  //
+  // Watcher
+  //
+  watch(locale, (newLocale, oldLocale) => {
+    if (newLocale !== oldLocale) {
+      // Update symbols translation on locale change
+      map.value.setLayoutProperty(`${sourceName}-symbol`, 'text-field', [
+        'concat',
+        ['/', ['get', 'value'], 60],
+        `min - ${t(`isochrone.profiles.${profile.value}`)}`,
+      ])
+    }
+  })
+
+  if (!config?.OPEN_ROUTE_SERVICE_KEY)
+    throw new Error('Open Route Service api key is missing.')
 
   return {
-    calculate,
+    fetchIsochrone,
     enabled,
     isOverlayOpen,
     toggleOverlay,
diff --git a/locales/en-GB.ts b/locales/en-GB.ts
index b67f2323..ce05fb8d 100644
--- a/locales/en-GB.ts
+++ b/locales/en-GB.ts
@@ -188,5 +188,17 @@ export default defineI18nLocale(() => {
       details: 'More information',
       decline: 'Decline',
     },
+    isochrone: {
+      trigger: 'Travel time',
+      overlay: {
+        title: 'Where can I go ?',
+        text: 'View on map, accessible areas from this point, depending on the duration of travel mode.',
+      },
+      profiles: {
+        'cycling-regular': 'By bike',
+        'driving-car': 'By car',
+        'foot-walking': 'On foot',
+      },
+    },
   }
 })
diff --git a/locales/es-ES.ts b/locales/es-ES.ts
index 2df7eef7..30c9d7fd 100644
--- a/locales/es-ES.ts
+++ b/locales/es-ES.ts
@@ -188,5 +188,17 @@ export default defineI18nLocale(() => {
       details: 'Más información',
       decline: 'Descenso',
     },
+    isochrone: {
+      trigger: 'Tiempo de viaje',
+      overlay: {
+        title: '¿A dónde puedo ir?',
+        text: 'Visualiza en el mapa las zonas accesibles desde este punto de partida en función de la duración de la modalidad de viaje.',
+      },
+      profiles: {
+        'cycling-regular': 'En bicicleta',
+        'driving-car': 'En coche',
+        'foot-walking': 'A pie',
+      },
+    },
   }
 })
diff --git a/locales/fr-FR.ts b/locales/fr-FR.ts
index 4dc62950..8e035d17 100644
--- a/locales/fr-FR.ts
+++ b/locales/fr-FR.ts
@@ -189,5 +189,17 @@ export default defineI18nLocale(() => {
       details: 'En savoir plus',
       decline: 'Refuser',
     },
+    isochrone: {
+      trigger: 'Temps de trajet',
+      overlay: {
+        title: 'Où puis-je aller ?',
+        text: 'Visualiser sur la carte les zones accessibles depuis ce point de départ en fonction de la durée du mode de déplacement.',
+      },
+      profiles: {
+        'cycling-regular': 'À vélo',
+        'driving-car': 'En voiture',
+        'foot-walking': 'À pied',
+      },
+    },
   }
 })
diff --git a/pages/index.vue b/pages/index.vue
index 5c46f0cb..2114f976 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -82,10 +82,12 @@ if (categoryIds.value && poiId.value) {
 </script>
 
 <template>
-  <Home
-    :boundary-area="boundaryGeojson"
-    :initial-category-ids="categoryIds"
-  />
+  <VApp>
+    <Home
+      :boundary-area="boundaryGeojson"
+      :initial-category-ids="categoryIds"
+    />
+  </VApp>
 </template>
 
 <style scoped>
diff --git a/plugins/fontawesome.ts b/plugins/fontawesome.ts
index 4e41c694..f7a6a22b 100644
--- a/plugins/fontawesome.ts
+++ b/plugins/fontawesome.ts
@@ -17,12 +17,14 @@ import {
   faBars,
   faBiking,
   faBookOpen,
+  faCar,
   faCheckCircle,
   faChevronDown,
   faChevronRight,
   faChevronUp,
   faCity,
   faClipboardCheck,
+  faClock,
   faCog,
   faCopy,
   faEnvelope,
@@ -56,6 +58,7 @@ import {
   faStar,
   faTimes,
   faTrash,
+  faWalking,
   faCircle as fasCircle,
 } from '@fortawesome/free-solid-svg-icons'
 
@@ -70,11 +73,13 @@ library.add(
   faArrowLeft,
   faBars,
   faBiking,
+  faCar,
   faCheckCircle,
   faChevronDown,
   faChevronUp,
   faChevronRight,
   faCircle,
+  faClock,
   fasCircle,
   faHiking,
   faInfo,
@@ -121,6 +126,7 @@ library.add(
   faEnvelope,
   faPenToSquare,
   faNoteSticky,
+  faWalking,
 )
 
 export default defineNuxtPlugin(_nuxtApp => undefined)

From 8ea75182e40e7903e0d3b10262c49f8a9588d4c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 22 Oct 2024 12:10:02 +0200
Subject: [PATCH 45/81] feat: add close button on desktop poi-card #390

---
 components/Home/Home.vue           |  2 --
 components/MainMap/MapFeatures.vue |  6 ++----
 components/PoisCard/PoiCard.vue    | 21 ++++++++++++++-------
 locales/en-GB.ts                   |  2 +-
 locales/es-ES.ts                   |  4 ++--
 locales/fr-FR.ts                   |  2 +-
 package.json                       |  2 +-
 stores/map.ts                      |  1 +
 yarn.lock                          | 10 +++++-----
 9 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/components/Home/Home.vue b/components/Home/Home.vue
index 2fe914fe..4c8c0c4e 100644
--- a/components/Home/Home.vue
+++ b/components/Home/Home.vue
@@ -617,7 +617,6 @@ function handlePoiCardClose() {
               && selectedFeature.properties.metadata
               && isPoiCardShown
           "
-          :can-close="device.smallScreen"
           :poi="selectedFeature"
           class="tw-grow-0"
           :explorer-mode-enabled="explorerModeEnabled"
@@ -649,7 +648,6 @@ function handlePoiCardClose() {
                 && selectedFeature.properties.metadata
                 && isPoiCardShown
             "
-            :can-close="device.smallScreen"
             :poi="selectedFeature"
             class="tw-grow-0 tw-text-left tw-h-full"
             :explorer-mode-enabled="explorerModeEnabled"
diff --git a/components/MainMap/MapFeatures.vue b/components/MainMap/MapFeatures.vue
index ef985d83..eb1f047f 100644
--- a/components/MainMap/MapFeatures.vue
+++ b/components/MainMap/MapFeatures.vue
@@ -285,24 +285,22 @@ export default defineNuxtComponent({
     },
 
     // Map interactions
-
     onClick(e: MapMouseEvent) {
       let selectedFeatures = STYLE_LAYERS.map((layerId) => {
         return this.map.queryRenderedFeatures(e.point, {
           layers: [layerId],
         }) as unknown as VectorTilesPoi[]
       }).flat()
+
       selectedFeatures = selectedFeatures.filter(
         feature => feature.properties.popup_fields,
       )
+
       if (selectedFeatures.length > 0) {
         // Set temp partial data from vector tiles. Then fetch full data
         this.updateSelectedFeature(vectorTilesPoi2ApiPoi(selectedFeatures[0]), true)
         this.showSelectedFeature()
       }
-      else {
-        this.updateSelectedFeature(null)
-      }
     },
 
     updateSelectedFeature(feature: ApiPoi | null, fetch = false) {
diff --git a/components/PoisCard/PoiCard.vue b/components/PoisCard/PoiCard.vue
index ae7d38e3..7d958602 100644
--- a/components/PoisCard/PoiCard.vue
+++ b/components/PoisCard/PoiCard.vue
@@ -4,19 +4,18 @@ import TeritorioIcon from '~/components/UI/TeritorioIcon.vue'
 import UIButton from '~/components/UI/UIButton.vue'
 import UIPicture from '~/components/UI/UIPicture.vue'
 import type { ApiPoi } from '~/lib/apiPois'
-import useDevice from '~/composables/useDevice'
 
 //
 // Props
 //
 withDefaults(defineProps<{
-  canClose: boolean
+  canClose?: boolean
   poi: ApiPoi
   explorerModeEnabled: boolean
   favoritesModeEnabled: boolean
   showImage?: boolean
 }>(), {
-  canClose: false,
+  canClose: true,
   showImage: true,
 })
 
@@ -34,6 +33,16 @@ defineEmits<{
 // Composables
 //
 const device = useDevice()
+
+//
+// Data
+//
+const closeBtnStyles = reactive({
+  backgroundColor: 'rgb(0 0 0 / 55%)',
+  borderRadius: device.value.smallScreen ? '0 0 0 8px' : '0 0 8px 0',
+  right: device.value.smallScreen ? 0 : 'unset',
+  left: device.value.smallScreen ? 'unset' : 0,
+})
 </script>
 
 <template>
@@ -44,8 +53,8 @@ const device = useDevice()
     <UIButton
       v-show="canClose"
       id="close-poi-card"
-      :color="device.smallScreen ? '#ffffff' : '#000000'"
-      :style="{ backgroundColor: device.smallScreen ? 'rgb(0 0 0 / 55%)' : 'transparent' }"
+      color="#ffffff"
+      :style="closeBtnStyles"
       :title="$t('ui.close')"
       icon="times"
       @click="$emit('onClose')"
@@ -97,10 +106,8 @@ const device = useDevice()
 
 #close-poi-card {
   border: 0;
-  border-radius: 0 0 0 8px;
   position: absolute;
   top: 0;
-  right: 0;
   z-index: 15;
 }
 
diff --git a/locales/en-GB.ts b/locales/en-GB.ts
index ce05fb8d..9c210768 100644
--- a/locales/en-GB.ts
+++ b/locales/en-GB.ts
@@ -192,7 +192,7 @@ export default defineI18nLocale(() => {
       trigger: 'Travel time',
       overlay: {
         title: 'Where can I go ?',
-        text: 'View on map, accessible areas from this point, depending on the duration of travel mode.',
+        text: 'View on map, accessible areas from this point, depending on the duration and travel mode.',
       },
       profiles: {
         'cycling-regular': 'By bike',
diff --git a/locales/es-ES.ts b/locales/es-ES.ts
index 30c9d7fd..26e32a0a 100644
--- a/locales/es-ES.ts
+++ b/locales/es-ES.ts
@@ -189,10 +189,10 @@ export default defineI18nLocale(() => {
       decline: 'Descenso',
     },
     isochrone: {
-      trigger: 'Tiempo de viaje',
+      trigger: 'Duración de viaje',
       overlay: {
         title: '¿A dónde puedo ir?',
-        text: 'Visualiza en el mapa las zonas accesibles desde este punto de partida en función de la duración de la modalidad de viaje.',
+        text: 'Visualiza en el mapa las zonas accesibles desde este punto de inicio en función de la duración y de la modalidad de viaje.',
       },
       profiles: {
         'cycling-regular': 'En bicicleta',
diff --git a/locales/fr-FR.ts b/locales/fr-FR.ts
index 8e035d17..adf0ae32 100644
--- a/locales/fr-FR.ts
+++ b/locales/fr-FR.ts
@@ -193,7 +193,7 @@ export default defineI18nLocale(() => {
       trigger: 'Temps de trajet',
       overlay: {
         title: 'Où puis-je aller ?',
-        text: 'Visualiser sur la carte les zones accessibles depuis ce point de départ en fonction de la durée du mode de déplacement.',
+        text: 'Visualiser sur la carte les zones accessibles depuis ce point de départ en fonction de la durée et du mode de déplacement.',
       },
       profiles: {
         'cycling-regular': 'À vélo',
diff --git a/package.json b/package.json
index 732d705a..ce14e3b9 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "@sentry/vue": "^7.113.0",
     "@tailwindcss/typography": "^0.5.9",
     "@teritorio/map": "^0.12.7",
-    "@teritorio/maplibre-gl-teritorio-cluster": "^0.0.6",
+    "@teritorio/maplibre-gl-teritorio-cluster": "^0.0.7",
     "@teritorio/openmaptiles-gl-language": "^1.5.4",
     "@turf/boolean-intersects": "^6.5.0",
     "@types/geojson": "^7946.0.10",
diff --git a/stores/map.ts b/stores/map.ts
index 81d57f53..af03b478 100644
--- a/stores/map.ts
+++ b/stores/map.ts
@@ -39,6 +39,7 @@ export const mapStore = defineStore('map', {
 
       if (!feature) {
         this.selectedFeature = null
+        this.teritorioCluster?.resetSelectedFeature()
       }
       else {
         const goodFeature = feature
diff --git a/yarn.lock b/yarn.lock
index 13b98b6f..f9187b5b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3495,12 +3495,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@teritorio/maplibre-gl-teritorio-cluster@npm:^0.0.6":
-  version: 0.0.6
-  resolution: "@teritorio/maplibre-gl-teritorio-cluster@npm:0.0.6"
+"@teritorio/maplibre-gl-teritorio-cluster@npm:^0.0.7":
+  version: 0.0.7
+  resolution: "@teritorio/maplibre-gl-teritorio-cluster@npm:0.0.7"
   dependencies:
     maplibre-gl: "npm:^4.7.0"
-  checksum: 10c0/9dc6bd7cc674ae15db664237f5cfa139ff0dd592da511e9c231fcd0bb3d350758d4dd99f30be1d1db8451276cf0169c425a42fb7c719287e6a4deb36c4ca1242
+  checksum: 10c0/8bf1bd209e685f1438462143f6acbb3ba2071a8320c9e808991bc4d74d0a5cd207684a2fff178fd1dac1de10d305570f54d7a765195e0313e8858b426ad68b6c
   languageName: node
   linkType: hard
 
@@ -3539,7 +3539,7 @@ __metadata:
     "@tailwindcss/typography": "npm:^0.5.9"
     "@teritorio/font-teritorio": "npm:^2.5.0"
     "@teritorio/map": "npm:^0.12.7"
-    "@teritorio/maplibre-gl-teritorio-cluster": "npm:^0.0.6"
+    "@teritorio/maplibre-gl-teritorio-cluster": "npm:^0.0.7"
     "@teritorio/openmaptiles-gl-language": "npm:^1.5.4"
     "@turf/boolean-intersects": "npm:^6.5.0"
     "@types/geojson": "npm:^7946.0.10"

From 5106e7e4b278276492a68f956cece8d3dfa45b4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 22 Oct 2024 16:07:23 +0200
Subject: [PATCH 46/81] chore: error handling #359

---
 components/Isochrone/IsochroneTrigger.vue | 8 ++++++--
 composables/useIsochrone.ts               | 7 ++-----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/Isochrone/IsochroneTrigger.vue b/components/Isochrone/IsochroneTrigger.vue
index c9194ee0..a2043ea8 100644
--- a/components/Isochrone/IsochroneTrigger.vue
+++ b/components/Isochrone/IsochroneTrigger.vue
@@ -19,6 +19,7 @@ const { t } = useI18n()
 //
 const loading = ref(false)
 const profile = ref<Profile>()
+const error = ref<string>()
 
 //
 // Methods
@@ -28,12 +29,14 @@ async function handleProfileUpdate(value: Profile) {
     loading.value = true
 
     await fetchIsochrone(props.feature, value)
+    toggleOverlay()
+  }
+  catch (e: any) {
+    error.value = e.message
   }
-  catch (e: any) {}
   finally {
     loading.value = false
     profile.value = undefined
-    toggleOverlay()
   }
 }
 </script>
@@ -69,6 +72,7 @@ async function handleProfileUpdate(value: Profile) {
 
       <template #text>
         {{ t('isochrone.overlay.text') }}
+        <VAlert v-if="error" type="error" :text="error" />
       </template>
 
       <template #actions>
diff --git a/composables/useIsochrone.ts b/composables/useIsochrone.ts
index c7861734..c3bd185a 100644
--- a/composables/useIsochrone.ts
+++ b/composables/useIsochrone.ts
@@ -28,7 +28,7 @@ export default function useIsochrone() {
   const { config, settings } = useSiteStore()
   const mapStore = useMapStore()
   // Get feature flag for Vido config
-  const enabled = settings?.themes[0].isochroneEnabled || true
+  const enabled = (config?.OPEN_ROUTE_SERVICE_KEY && settings?.themes[0].isochroneEnabled) || false
   const { t, locale } = useI18n()
   const map = useState<Map>('map-instance')
   const profile = useState('isochrone-profile')
@@ -166,7 +166,7 @@ export default function useIsochrone() {
     )
 
     if (error.value)
-      throw new Error(error.value.message)
+      throw createError(error.value)
 
     if (data.value)
       render(data.value)
@@ -199,9 +199,6 @@ export default function useIsochrone() {
     }
   })
 
-  if (!config?.OPEN_ROUTE_SERVICE_KEY)
-    throw new Error('Open Route Service api key is missing.')
-
   return {
     fetchIsochrone,
     enabled,

From ceebdc9cf3426a228d5e981d0f63939636d09101 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 22 Oct 2024 16:16:33 +0200
Subject: [PATCH 47/81] fix: isochrone removal on explore mode #359

---
 components/Home/Home.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Home/Home.vue b/components/Home/Home.vue
index 4c8c0c4e..a99fbc73 100644
--- a/components/Home/Home.vue
+++ b/components/Home/Home.vue
@@ -621,7 +621,7 @@ function handlePoiCardClose() {
           class="tw-grow-0"
           :explorer-mode-enabled="explorerModeEnabled"
           :favorites-mode-enabled="favoritesModeEnabled"
-          @explore-click="toggleExploreAroundSelectedPoi"
+          @explore-click="toggleExploreAroundSelectedPoi(undefined)"
           @favorite-click="toggleFavorite"
           @zoom-click="goToSelectedFeature"
           @on-close="handlePoiCardClose"
@@ -652,7 +652,7 @@ function handlePoiCardClose() {
             class="tw-grow-0 tw-text-left tw-h-full"
             :explorer-mode-enabled="explorerModeEnabled"
             :favorites-mode-enabled="favoritesModeEnabled"
-            @explore-click="toggleExploreAroundSelectedPoi"
+            @explore-click="toggleExploreAroundSelectedPoi(undefined)"
             @favorite-click="toggleFavorite"
             @zoom-click="goToSelectedFeature"
             @on-close="handlePoiCardClose"

From c05a4ea68f0022be16c7196fcb2c6170d9bc8cb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 22 Oct 2024 16:39:09 +0200
Subject: [PATCH 48/81] fix: keep isochrone across style changing #359

---
 components/Map/Map.vue | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/components/Map/Map.vue b/components/Map/Map.vue
index cbb5a259..ebfcde39 100644
--- a/components/Map/Map.vue
+++ b/components/Map/Map.vue
@@ -286,7 +286,25 @@ export default defineNuxtComponent({
           this.style = style
           this.doWithMap(() => {
             // Use no diff mode to avoid issue with added layers
-            this.map!.setStyle(style, { diff: false })
+            this.map!.setStyle(style, {
+              diff: false,
+              transformStyle: (previousStyle, nextStyle) => {
+                if (previousStyle?.sources.isochrone) {
+                  style = {
+                    ...nextStyle,
+                    sources: {
+                      ...nextStyle.sources,
+                      isochrone: previousStyle.sources.isochrone,
+                    },
+                    layers: [
+                      ...nextStyle.layers,
+                      ...previousStyle.layers.filter(l => l.id.includes('isochrone')),
+                    ],
+                  }
+                }
+                return style
+              },
+            })
             this.emitStyleLoad()
           })
         })

From 12d30a42c3fe8214c0b3b87f33e97337800f9787 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 22 Oct 2024 18:28:32 +0200
Subject: [PATCH 49/81] chore: add isochrone feature flag from config #359

---
 composables/useIsochrone.ts | 4 ++--
 utils/types-config.ts       | 1 +
 vidos-config-cypress.json   | 1 +
 vidos-config-empty.json     | 1 +
 vidos.config.sample.ts      | 1 +
 5 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/composables/useIsochrone.ts b/composables/useIsochrone.ts
index c3bd185a..5d2b8782 100644
--- a/composables/useIsochrone.ts
+++ b/composables/useIsochrone.ts
@@ -25,10 +25,10 @@ export default function useIsochrone() {
   //
   // Composables
   //
-  const { config, settings } = useSiteStore()
+  const { config } = useSiteStore()
   const mapStore = useMapStore()
   // Get feature flag for Vido config
-  const enabled = (config?.OPEN_ROUTE_SERVICE_KEY && settings?.themes[0].isochroneEnabled) || false
+  const enabled = (config?.OPEN_ROUTE_SERVICE_KEY && config?.ISOCHRONE) || false
   const { t, locale } = useI18n()
   const map = useState<Map>('map-instance')
   const profile = useState('isochrone-profile')
diff --git a/utils/types-config.ts b/utils/types-config.ts
index 72f620ad..4c5c5096 100644
--- a/utils/types-config.ts
+++ b/utils/types-config.ts
@@ -13,6 +13,7 @@ export interface VidoConfig {
   IMAGE_PROXY: string[] | null
   MAPILLARY_ACCESS_TOKEN: string | null
   OPEN_ROUTE_SERVICE_KEY: string | null
+  ISOCHRONE: boolean
   COOKIES_CONSENT: string | null
   COOKIES_LINK: string | null
   GOOGLE_SITE_VERIFICATION: string | undefined
diff --git a/vidos-config-cypress.json b/vidos-config-cypress.json
index 327e74d7..06a239b6 100644
--- a/vidos-config-cypress.json
+++ b/vidos-config-cypress.json
@@ -13,6 +13,7 @@
     ],
     "MAPILLARY_ACCESS_TOKEN": "MLY|5609419529131330|36d86a5578fecba521c1ffe033bda2fc",
     "OPEN_ROUTE_SERVICE_KEY": "5b3ce3597851110001cf6248e176e3d24c3d4a71bff8701252700040",
+    "ISOCHRONE": false,
     "COOKIES_CONSENT": null,
     "COOKIES_LINK": null,
     "GOOGLE_TAG_MANAGER_ID": null,
diff --git a/vidos-config-empty.json b/vidos-config-empty.json
index 5eb55661..62d43645 100644
--- a/vidos-config-empty.json
+++ b/vidos-config-empty.json
@@ -13,6 +13,7 @@
     ],
     "MAPILLARY_ACCESS_TOKEN": "MLY|5609419529131330|36d86a5578fecba521c1ffe033bda2fc",
     "OPEN_ROUTE_SERVICE_KEY": "5b3ce3597851110001cf6248e176e3d24c3d4a71bff8701252700040",
+    "ISOCHRONE": false,
     "SENTRY_DSN": null,
     "COOKIES_CONSENT": null,
     "COOKIES_LINK": null,
diff --git a/vidos.config.sample.ts b/vidos.config.sample.ts
index aa9470ab..71a7e2b2 100644
--- a/vidos.config.sample.ts
+++ b/vidos.config.sample.ts
@@ -8,6 +8,7 @@ const configDefault = {
   IMAGE_PROXY: null,
   MAPILLARY_ACCESS_TOKEN: null,
   OPEN_ROUTE_SERVICE_KEY: null,
+  ISOCHRONE: false,
   SENTRY_DSN: null,
   COOKIES_CONSENT: null,
   COOKIES_LINK: null,

From 1b823e88401e937e0255d5c76319e7f8ee6920ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Wed, 23 Oct 2024 12:31:53 +0200
Subject: [PATCH 50/81] chore: update translations + add title on isochrone
 trigger #359

---
 components/Isochrone/IsochroneTrigger.vue | 2 +-
 components/PoisCard/PoiCardContent.vue    | 2 +-
 locales/en-GB.ts                          | 7 +++++--
 locales/es-ES.ts                          | 7 +++++--
 locales/fr-FR.ts                          | 7 +++++--
 5 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/components/Isochrone/IsochroneTrigger.vue b/components/Isochrone/IsochroneTrigger.vue
index a2043ea8..569b4ae7 100644
--- a/components/Isochrone/IsochroneTrigger.vue
+++ b/components/Isochrone/IsochroneTrigger.vue
@@ -42,7 +42,7 @@ async function handleProfileUpdate(value: Profile) {
 </script>
 
 <template>
-  <button type="button" :class="$attrs.class" :aria-label="t('isochrone.trigger')" @click.stop="toggleOverlay">
+  <button type="button" :title="t('isochrone.trigger.title')" :class="$attrs.class" :aria-label="t('isochrone.trigger.label')" @click.stop="toggleOverlay">
     <slot />
   </button>
 
diff --git a/components/PoisCard/PoiCardContent.vue b/components/PoisCard/PoiCardContent.vue
index 8f5d1acb..a4eaf504 100644
--- a/components/PoisCard/PoiCardContent.vue
+++ b/components/PoisCard/PoiCardContent.vue
@@ -248,7 +248,7 @@ function trackingPopupEvent(event: 'details' | 'route' | 'explore' | 'favorite'
         :feature="poi"
       >
         <FontAwesomeIcon :color="colorLine" icon="clock" size="sm" />
-        <span class="tw-text-sm">{{ t('isochrone.trigger') }}</span>
+        <span class="tw-text-sm">{{ t('isochrone.trigger.label') }}</span>
       </IsochroneTrigger>
 
       <button
diff --git a/locales/en-GB.ts b/locales/en-GB.ts
index 9c210768..ee40c621 100644
--- a/locales/en-GB.ts
+++ b/locales/en-GB.ts
@@ -189,10 +189,13 @@ export default defineI18nLocale(() => {
       decline: 'Decline',
     },
     isochrone: {
-      trigger: 'Travel time',
+      trigger: {
+        label: 'Travel time',
+        title: 'Travel time from this point',
+      },
       overlay: {
         title: 'Where can I go ?',
-        text: 'View on map, accessible areas from this point, depending on the duration and travel mode.',
+        text: 'View on map, accessible areas from this point, depending on the duration (15, 30, 60 min) and travel mode.',
       },
       profiles: {
         'cycling-regular': 'By bike',
diff --git a/locales/es-ES.ts b/locales/es-ES.ts
index 26e32a0a..94886f89 100644
--- a/locales/es-ES.ts
+++ b/locales/es-ES.ts
@@ -189,10 +189,13 @@ export default defineI18nLocale(() => {
       decline: 'Descenso',
     },
     isochrone: {
-      trigger: 'Duración de viaje',
+      trigger: {
+        label: 'Duración de viaje',
+        title: 'Duración de viaje desde este punto',
+      },
       overlay: {
         title: '¿A dónde puedo ir?',
-        text: 'Visualiza en el mapa las zonas accesibles desde este punto de inicio en función de la duración y de la modalidad de viaje.',
+        text: 'Visualiza en el mapa las zonas accesibles desde este punto de inicio en función de la duración (15, 30, 60 minutos) y de la modalidad de viaje.',
       },
       profiles: {
         'cycling-regular': 'En bicicleta',
diff --git a/locales/fr-FR.ts b/locales/fr-FR.ts
index adf0ae32..b253c501 100644
--- a/locales/fr-FR.ts
+++ b/locales/fr-FR.ts
@@ -190,10 +190,13 @@ export default defineI18nLocale(() => {
       decline: 'Refuser',
     },
     isochrone: {
-      trigger: 'Temps de trajet',
+      trigger: {
+        label: 'Temps de trajet',
+        title: 'Temps de trajet depuis ce point',
+      },
       overlay: {
         title: 'Où puis-je aller ?',
-        text: 'Visualiser sur la carte les zones accessibles depuis ce point de départ en fonction de la durée et du mode de déplacement.',
+        text: 'Visualiser sur la carte les zones accessibles depuis ce point de départ en fonction de la durée (15, 30, 60 min) et du mode de déplacement.',
       },
       profiles: {
         'cycling-regular': 'À vélo',

From adff7f5c0e175a8af890e2fcf284cbc4e2fa9e14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Wed, 23 Oct 2024 12:33:17 +0200
Subject: [PATCH 51/81] fix: watcher triggered even if no isochrone is
 displayed #359

---
 composables/useIsochrone.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/composables/useIsochrone.ts b/composables/useIsochrone.ts
index 5d2b8782..dc2d2dc2 100644
--- a/composables/useIsochrone.ts
+++ b/composables/useIsochrone.ts
@@ -189,7 +189,7 @@ export default function useIsochrone() {
   // Watcher
   //
   watch(locale, (newLocale, oldLocale) => {
-    if (newLocale !== oldLocale) {
+    if (newLocale !== oldLocale && map.value.getLayer(`${sourceName}-symbol`)) {
       // Update symbols translation on locale change
       map.value.setLayoutProperty(`${sourceName}-symbol`, 'text-field', [
         'concat',

From 27eb9026dc67a2a75c384893a8f61e725ae55321 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 22 Oct 2024 18:47:22 +0200
Subject: [PATCH 52/81] feat: add clipping polygon support #376

---
 components/Home/Embedded.vue    |  1 +
 components/Home/Home.vue        |  2 ++
 components/Map/MapBase.vue      | 10 ++++++----
 components/PoisList/Actions.vue |  1 +
 lib/apiPois.ts                  |  3 +--
 pages/pois/[ids]/map.vue        |  2 ++
 stores/menu.ts                  |  5 +++--
 7 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/components/Home/Embedded.vue b/components/Home/Embedded.vue
index d6f52cd0..34eb352a 100644
--- a/components/Home/Embedded.vue
+++ b/components/Home/Embedded.vue
@@ -130,6 +130,7 @@ watch(selectedCategoryIds, (a, b) => {
       menuStore.fetchFeatures({
         vidoConfig: config!,
         categoryIds: selectedCategoryIds.value,
+        clipingPolygonSlug: route.query.clipingPolygonSlug?.toString(),
       })
     }
   }
diff --git a/components/Home/Home.vue b/components/Home/Home.vue
index a99fbc73..f5fab1c0 100644
--- a/components/Home/Home.vue
+++ b/components/Home/Home.vue
@@ -253,6 +253,7 @@ watch(selectedCategoryIds, (a, b) => {
     menuStore.fetchFeatures({
       vidoConfig: config!,
       categoryIds: selectedCategoryIds.value,
+      clipingPolygonSlug: route.query.clipingPolygonSlug?.toString(),
     })
 
     allowRegionBackZoom.value = true
@@ -308,6 +309,7 @@ async function fetchFavorites() {
 
   return await getPois(config!, favoritesIds.value, {
     geometry_as: 'point',
+    cliping_polygon_slug: route.query.clipingPolygonSlug?.toString(),
   })
     .then(pois => (pois && pois.features) || [])
     .then(pois =>
diff --git a/components/Map/MapBase.vue b/components/Map/MapBase.vue
index f0c1f69d..0d590106 100644
--- a/components/Map/MapBase.vue
+++ b/components/Map/MapBase.vue
@@ -320,10 +320,12 @@ export default defineNuxtComponent({
           ]
         }
 
-        this.map.addSource(BOUNDARY_SOURCE, {
-          type: 'geojson',
-          data: inverse,
-        })
+        if (!this.map.getSource(BOUNDARY_SOURCE)) {
+          this.map.addSource(BOUNDARY_SOURCE, {
+            type: 'geojson',
+            data: inverse,
+          })
+        }
 
         const firstSymbolLayerId: string | undefined = this.map
           .getStyle()
diff --git a/components/PoisList/Actions.vue b/components/PoisList/Actions.vue
index c9e674fa..6ed1a8e1 100644
--- a/components/PoisList/Actions.vue
+++ b/components/PoisList/Actions.vue
@@ -48,6 +48,7 @@ export default defineNuxtComponent({
           geometry_as: 'point',
           short_description: false,
           format,
+          cliping_polygon_slug: this.$route.query.clipingPolygonSlug?.toString(),
         },
       )
     },
diff --git a/lib/apiPois.ts b/lib/apiPois.ts
index 79e0ada3..af029ac2 100644
--- a/lib/apiPois.ts
+++ b/lib/apiPois.ts
@@ -88,9 +88,8 @@ export type ApiPois = GeoJSON.FeatureCollection<
 >
 
 export interface ApiPoisOptions {
-
+  cliping_polygon_slug?: string
   geometry_as?: 'point' | 'bbox' | 'point_or_bbox'
-
   short_description?: boolean
   format?: 'geojson' | 'csv'
 }
diff --git a/pages/pois/[ids]/map.vue b/pages/pois/[ids]/map.vue
index ac29d06f..da9c0c91 100644
--- a/pages/pois/[ids]/map.vue
+++ b/pages/pois/[ids]/map.vue
@@ -24,6 +24,7 @@ const { params } = useRoute()
 const siteStore = useSiteStore()
 const { config, settings } = storeToRefs(siteStore)
 const { $trackingInit } = useNuxtApp()
+const route = useRoute()
 
 //
 // Data
@@ -35,6 +36,7 @@ if (params.ids) {
   const getPoiPromise = getAsyncDataOrThrows('getPoiPromise', async () =>
     await getPois(config.value!, ids, {
       geometry_as: undefined,
+      cliping_polygon_slug: route.query.clipingPolygonSlug?.toString(),
     }))
   const [poisF] = await Promise.all([getPoiPromise])
   pois.value = poisF.value
diff --git a/stores/menu.ts b/stores/menu.ts
index 40309fdb..d0de33cf 100644
--- a/stores/menu.ts
+++ b/stores/menu.ts
@@ -11,6 +11,7 @@ import { filterValueFactory, filterValuesIsSet, isMatch, isSet } from '~/utils/t
 interface FetchFeaturesPayload {
   vidoConfig: VidoConfig
   categoryIds: ApiMenuCategory['id'][]
+  clipingPolygonSlug?: string
 }
 
 export interface State {
@@ -160,7 +161,7 @@ export const menuStore = defineStore('menu', {
       }
     },
 
-    async fetchFeatures({ vidoConfig, categoryIds }: FetchFeaturesPayload) {
+    async fetchFeatures({ vidoConfig, categoryIds, clipingPolygonSlug }: FetchFeaturesPayload) {
       this.isLoadingFeatures = true
 
       try {
@@ -175,7 +176,7 @@ export const menuStore = defineStore('menu', {
               .filter(categoryId => !previousFeatures[categoryId])
               .map((categoryId) => {
                 try {
-                  return getPoiByCategoryId(vidoConfig, categoryId)
+                  return getPoiByCategoryId(vidoConfig, categoryId, { cliping_polygon_slug: clipingPolygonSlug })
                 }
                 catch (e) {
                   // eslint-disable-next-line no-console

From a4e377978bda17f6262558ccd77a97e7693db128 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 24 Oct 2024 12:54:48 +0200
Subject: [PATCH 53/81] docs: add parameter to README #376

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 048c4a4d..080d20b8 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,7 @@ Full entry points documentation available on [api.yml](public/api.yaml) and on s
   * Full page: `/`, `/{poi_Id}`, `/{category_ids}/` and `/{category_ids}/{poi_id}`.
   * Parameters:
     * `boundary`: an alternative boundary key from settings `polygons_extra`.
+    * `clipingPolygonSlug`: POI filtering by polygon (key from settings `polygons_extra`).
 * Embedded: `/embedded/`, same subpath and parameters as full page.
 * POI:
   * details: `/poi/{id}/details`.

From 9756860de0496f2faedc05f9ec6900970a947334 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 24 Oct 2024 12:56:26 +0200
Subject: [PATCH 54/81] chore: dont send undefined query param #376

---
 components/Home/Home.vue          | 10 +++++++---
 components/PoisList/Actions.vue   | 20 ++++++++++----------
 components/PoisList/PoisTable.vue | 12 ++++++++----
 pages/category.vue                | 10 ++++------
 pages/pois/[ids]/map.vue          | 13 ++++++++-----
 stores/menu.ts                    |  5 ++++-
 6 files changed, 41 insertions(+), 29 deletions(-)

diff --git a/components/Home/Home.vue b/components/Home/Home.vue
index f5fab1c0..e30cb927 100644
--- a/components/Home/Home.vue
+++ b/components/Home/Home.vue
@@ -307,10 +307,14 @@ async function fetchFavorites() {
   if (!favoritesIds.value.length)
     return []
 
-  return await getPois(config!, favoritesIds.value, {
+  const query = {
     geometry_as: 'point',
-    cliping_polygon_slug: route.query.clipingPolygonSlug?.toString(),
-  })
+  } as Record<string, any>
+
+  if (route.query.clipingPolygonSlug)
+    query.cliping_polygon_slug = route.query.clipingPolygonSlug.toString()
+
+  return await getPois(config!, favoritesIds.value, query)
     .then(pois => (pois && pois.features) || [])
     .then(pois =>
       pois.map(poi => ({
diff --git a/components/PoisList/Actions.vue b/components/PoisList/Actions.vue
index 6ed1a8e1..378d0d34 100644
--- a/components/PoisList/Actions.vue
+++ b/components/PoisList/Actions.vue
@@ -41,16 +41,16 @@ export default defineNuxtComponent({
 
   methods: {
     url(format: 'geojson' | 'csv'): string {
-      return getPoiByCategoryIdUrl(
-        useSiteStore().config!,
-        this.categoryId,
-        {
-          geometry_as: 'point',
-          short_description: false,
-          format,
-          cliping_polygon_slug: this.$route.query.clipingPolygonSlug?.toString(),
-        },
-      )
+      const query = {
+        geometry_as: 'point',
+        short_description: false,
+        format,
+      } as Record<string, any>
+
+      if (this.$route.query.clipingPolygonSlug)
+        query.cliping_polygon_slug = this.$route.query.clipingPolygonSlug.toString()
+
+      return getPoiByCategoryIdUrl(useSiteStore().config!, this.categoryId, query)
     },
   },
 })
diff --git a/components/PoisList/PoisTable.vue b/components/PoisList/PoisTable.vue
index cea578ee..ee799555 100644
--- a/components/PoisList/PoisTable.vue
+++ b/components/PoisList/PoisTable.vue
@@ -46,6 +46,13 @@ const route = useRoute()
 //
 const { API_ENDPOINT, API_PROJECT, API_THEME } = config.value!
 const search = ref('')
+const query = {
+  geometry_as: 'point',
+  short_description: true,
+} as Record<string, any>
+
+if (route.query.clipingPolygonSlug)
+  query.cliping_polygon_slug = route.query.clipingPolygonSlug.toString()
 
 //
 // Data Fetching
@@ -53,10 +60,7 @@ const search = ref('')
 const { data: pois, error, pending, status } = useFetch<ApiPois>(
   () => `${API_ENDPOINT}/${API_PROJECT}/${API_THEME}/pois/category/${route.params.id}.geojson`,
   {
-    query: {
-      geometry_as: 'point',
-      short_description: true,
-    },
+    query,
     immediate: !!route.params.id,
     transform(pois) {
       if (!pois.features.length)
diff --git a/pages/category.vue b/pages/category.vue
index 1c300864..3a1f56a8 100644
--- a/pages/category.vue
+++ b/pages/category.vue
@@ -58,12 +58,10 @@ async function onCategoryUpdate(categoryId: number) {
   if (!categoryId)
     return
 
-  if (isEmbedded.value) {
-    await navigateTo({ path: `/category/embedded/${categoryId}`, query })
-  }
-  else {
-    await navigateTo(`/category/${categoryId}`)
-  }
+  await navigateTo({
+    path: isEmbedded.value ? `/category/embedded/${categoryId}` : `/category/${categoryId}`,
+    query,
+  })
 }
 </script>
 
diff --git a/pages/pois/[ids]/map.vue b/pages/pois/[ids]/map.vue
index da9c0c91..3ba63727 100644
--- a/pages/pois/[ids]/map.vue
+++ b/pages/pois/[ids]/map.vue
@@ -33,11 +33,14 @@ const pois = ref<ApiPois>()
 
 if (params.ids) {
   const ids = (params.ids as string).split(',')
-  const getPoiPromise = getAsyncDataOrThrows('getPoiPromise', async () =>
-    await getPois(config.value!, ids, {
-      geometry_as: undefined,
-      cliping_polygon_slug: route.query.clipingPolygonSlug?.toString(),
-    }))
+  const query = {
+    geometry_as: undefined,
+  } as Record<string, any>
+
+  if (route.query.clipingPolygonSlug)
+    query.cliping_polygon_slug = route.query.clipingPolygonSlug.toString()
+
+  const getPoiPromise = getAsyncDataOrThrows('getPoiPromise', async () => await getPois(config.value!, ids, query))
   const [poisF] = await Promise.all([getPoiPromise])
   pois.value = poisF.value
 }
diff --git a/stores/menu.ts b/stores/menu.ts
index d0de33cf..4c9d0682 100644
--- a/stores/menu.ts
+++ b/stores/menu.ts
@@ -176,7 +176,10 @@ export const menuStore = defineStore('menu', {
               .filter(categoryId => !previousFeatures[categoryId])
               .map((categoryId) => {
                 try {
-                  return getPoiByCategoryId(vidoConfig, categoryId, { cliping_polygon_slug: clipingPolygonSlug })
+                  let options = {}
+                  if (clipingPolygonSlug)
+                    options = { cliping_polygon_slug: clipingPolygonSlug }
+                  return getPoiByCategoryId(vidoConfig, categoryId, options)
                 }
                 catch (e) {
                   // eslint-disable-next-line no-console

From a5de3a496387d7cb4a48300641f79f59123b7b85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 24 Oct 2024 22:07:48 +0200
Subject: [PATCH 55/81] chore: increase isochrone smoothing #359

---
 composables/useIsochrone.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/composables/useIsochrone.ts b/composables/useIsochrone.ts
index dc2d2dc2..aea2e159 100644
--- a/composables/useIsochrone.ts
+++ b/composables/useIsochrone.ts
@@ -161,6 +161,7 @@ export default function useIsochrone() {
           locations: [coordinates],
           range_type: 'time',
           range,
+          smoothing: 50,
         },
       }),
     )

From 6c6df1aa1739d91f76a712c48f616e8c6b572572 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 24 Oct 2024 23:22:48 +0200
Subject: [PATCH 56/81] fix: add multipolygon mask support #383

---
 components/Map/MapBase.vue | 76 +++++++++++---------------------------
 package.json               |  1 +
 yarn.lock                  | 59 +++++++++++++++++++++++++++++
 3 files changed, 81 insertions(+), 55 deletions(-)

diff --git a/components/Map/MapBase.vue b/components/Map/MapBase.vue
index 0d590106..a9da845f 100644
--- a/components/Map/MapBase.vue
+++ b/components/Map/MapBase.vue
@@ -1,6 +1,5 @@
 <script lang="ts">
 import { PoiFilter } from '@teritorio/map'
-import copy from 'fast-copy'
 import type { MultiLineString, MultiPoint, MultiPolygon, Polygon } from 'geojson'
 import throttle from 'lodash.throttle'
 import type {
@@ -16,6 +15,7 @@ import type {
   Marker,
   StyleSpecification,
 } from 'maplibre-gl'
+import { mask } from '@turf/mask'
 import type { PropType } from 'vue'
 
 import { storeToRefs } from 'pinia'
@@ -292,68 +292,34 @@ export default defineNuxtComponent({
       this.map.addControl(this.poiFilter)
 
       if (this.boundaryArea) {
-        const inverse = copy(this.boundaryArea)
-        if (inverse.type === 'Polygon') {
-          inverse.coordinates = [
-            [
-              [-180, -90],
-              [180, -90],
-              [180, 90],
-              [-180, 90],
-              [-180, -90],
-            ],
-            ...inverse.coordinates,
-          ]
-        }
-        else {
-          inverse.coordinates = [
-            [
-              [
-                [-180, -90],
-                [180, -90],
-                [180, 90],
-                [-180, 90],
-                [-180, -90],
-              ],
-              ...inverse.coordinates[0],
-            ],
-          ]
-        }
-
         if (!this.map.getSource(BOUNDARY_SOURCE)) {
           this.map.addSource(BOUNDARY_SOURCE, {
             type: 'geojson',
-            data: inverse,
+            data: mask(this.boundaryArea),
           })
         }
 
-        const firstSymbolLayerId: string | undefined = this.map
-          .getStyle()
-          .layers.find(layer => layer.type === 'line')?.id
-        this.map.addLayer(
-          {
-            id: BOUNDARY_AREA_LAYER,
-            source: BOUNDARY_SOURCE,
-            type: 'fill',
-            paint: {
-              'fill-color': 'rgba(185, 185, 185, 0.46)',
-              'fill-opacity': 0.8,
-            },
+        const firstSymbolLayerId = this.map.getStyle().layers.find(layer => layer.type === 'line')?.id
+
+        this.map.addLayer({
+          id: BOUNDARY_AREA_LAYER,
+          source: BOUNDARY_SOURCE,
+          type: 'fill',
+          paint: {
+            'fill-color': 'rgba(185, 185, 185, 0.46)',
+            'fill-opacity': 0.8,
           },
-          firstSymbolLayerId,
-        )
-        this.map.addLayer(
-          {
-            id: BOUNDAR_BORDER_LAYER,
-            source: BOUNDARY_SOURCE,
-            type: 'line',
-            paint: {
-              'line-color': 'rgba(185, 185, 185, 0.46)',
-              'line-width': 3,
-            },
+        }, firstSymbolLayerId)
+
+        this.map.addLayer({
+          id: BOUNDAR_BORDER_LAYER,
+          source: BOUNDARY_SOURCE,
+          type: 'line',
+          paint: {
+            'line-color': 'rgba(185, 185, 185, 0.46)',
+            'line-width': 3,
           },
-          firstSymbolLayerId,
-        )
+        }, firstSymbolLayerId)
       }
 
       this.$emit('mapStyleLoad', style)
diff --git a/package.json b/package.json
index ce14e3b9..a9ca2f54 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "@teritorio/maplibre-gl-teritorio-cluster": "^0.0.7",
     "@teritorio/openmaptiles-gl-language": "^1.5.4",
     "@turf/boolean-intersects": "^6.5.0",
+    "@turf/mask": "^7.1.0",
     "@types/geojson": "^7946.0.10",
     "core-js": "^3.31.0",
     "country-flag-icons": "^1.5.7",
diff --git a/yarn.lock b/yarn.lock
index f9187b5b..eef49f9c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3542,6 +3542,7 @@ __metadata:
     "@teritorio/maplibre-gl-teritorio-cluster": "npm:^0.0.7"
     "@teritorio/openmaptiles-gl-language": "npm:^1.5.4"
     "@turf/boolean-intersects": "npm:^6.5.0"
+    "@turf/mask": "npm:^7.1.0"
     "@types/geojson": "npm:^7946.0.10"
     "@types/lodash.debounce": "npm:^4.0.7"
     "@types/lodash.memoize": "npm:^4.1.7"
@@ -3679,6 +3680,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@turf/clone@npm:^7.1.0":
+  version: 7.1.0
+  resolution: "@turf/clone@npm:7.1.0"
+  dependencies:
+    "@turf/helpers": "npm:^7.1.0"
+    "@types/geojson": "npm:^7946.0.10"
+    tslib: "npm:^2.6.2"
+  checksum: 10c0/18cc6fd7f285652e5ad38d432ebdf66fc7ed4b960ff732d35833a12662f1cda442a3ab27a9ac789e9fad8a82aafc917f89ef44a680d52385770af226c2ccdda3
+  languageName: node
+  linkType: hard
+
 "@turf/helpers@npm:6.x, @turf/helpers@npm:^6.5.0":
   version: 6.5.0
   resolution: "@turf/helpers@npm:6.5.0"
@@ -3686,6 +3698,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@turf/helpers@npm:^7.1.0":
+  version: 7.1.0
+  resolution: "@turf/helpers@npm:7.1.0"
+  dependencies:
+    "@types/geojson": "npm:^7946.0.10"
+    tslib: "npm:^2.6.2"
+  checksum: 10c0/0b07c01584d8bee977edec8752109b4f79ab5b149e55a7dbe051e412e150c0a96f2464c9647676a092b7ab4429271eee4a31400ea45e9b55095ae53ad22f43d6
+  languageName: node
+  linkType: hard
+
 "@turf/invariant@npm:^6.5.0":
   version: 6.5.0
   resolution: "@turf/invariant@npm:6.5.0"
@@ -3719,6 +3741,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@turf/mask@npm:^7.1.0":
+  version: 7.1.0
+  resolution: "@turf/mask@npm:7.1.0"
+  dependencies:
+    "@turf/clone": "npm:^7.1.0"
+    "@turf/helpers": "npm:^7.1.0"
+    "@types/geojson": "npm:^7946.0.10"
+    polygon-clipping: "npm:^0.15.3"
+    tslib: "npm:^2.6.2"
+  checksum: 10c0/f6cbd696cc14ac9be8abb8e5667e2fd81beeb76e7481c193be58d7d1722413f08d28e1d9dfae2675b94aac2005668e4e8b54d6a9b0fcbdb7b6f47870886bacc3
+  languageName: node
+  linkType: hard
+
 "@turf/meta@npm:6.x, @turf/meta@npm:^6.5.0":
   version: 6.5.0
   resolution: "@turf/meta@npm:6.5.0"
@@ -12959,6 +12994,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"polygon-clipping@npm:^0.15.3":
+  version: 0.15.7
+  resolution: "polygon-clipping@npm:0.15.7"
+  dependencies:
+    robust-predicates: "npm:^3.0.2"
+    splaytree: "npm:^3.1.0"
+  checksum: 10c0/9515283509f1793f22fd87e68662838a6ebbd33cca4fc4bccd9f1b4f366383a4590e9a1cd48287e6897ad018803aeb97ed9ebe38bada5cffa7b4551539a9ab10
+  languageName: node
+  linkType: hard
+
 "possible-typed-array-names@npm:^1.0.0":
   version: 1.0.0
   resolution: "possible-typed-array-names@npm:1.0.0"
@@ -14017,6 +14062,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"robust-predicates@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "robust-predicates@npm:3.0.2"
+  checksum: 10c0/4ecd53649f1c2d49529c85518f2fa69ffb2f7a4453f7fd19c042421c7b4d76c3efb48bc1c740c8f7049346d7cb58cf08ee0c9adaae595cc23564d360adb1fde4
+  languageName: node
+  linkType: hard
+
 "rollup-plugin-visualizer@npm:^5.12.0, rollup-plugin-visualizer@npm:^5.9.2":
   version: 5.12.0
   resolution: "rollup-plugin-visualizer@npm:5.12.0"
@@ -14788,6 +14840,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"splaytree@npm:^3.1.0":
+  version: 3.1.2
+  resolution: "splaytree@npm:3.1.2"
+  checksum: 10c0/ba82da4e4185d692eb2b1c9e000a9dde6cd713ec447f5c90ec97264ce9de19ba1f5f90fbef8a9ffa37bbbe2e9f4b031c6ee45d4119acbf1cddb93112ec5ecf86
+  languageName: node
+  linkType: hard
+
 "split-string@npm:^3.0.1":
   version: 3.1.0
   resolution: "split-string@npm:3.1.0"

From df30072005da9c2328fb2e43e2222f29f305f74c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 24 Oct 2024 23:46:27 +0200
Subject: [PATCH 57/81] chore: update @teritorio/maplibre-gl-teritorio-cluster

---
 package.json |  2 +-
 yarn.lock    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index a9ca2f54..26258ff8 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "@sentry/vue": "^7.113.0",
     "@tailwindcss/typography": "^0.5.9",
     "@teritorio/map": "^0.12.7",
-    "@teritorio/maplibre-gl-teritorio-cluster": "^0.0.7",
+    "@teritorio/maplibre-gl-teritorio-cluster": "^0.0.8",
     "@teritorio/openmaptiles-gl-language": "^1.5.4",
     "@turf/boolean-intersects": "^6.5.0",
     "@turf/mask": "^7.1.0",
diff --git a/yarn.lock b/yarn.lock
index eef49f9c..56962b92 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3495,12 +3495,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@teritorio/maplibre-gl-teritorio-cluster@npm:^0.0.7":
-  version: 0.0.7
-  resolution: "@teritorio/maplibre-gl-teritorio-cluster@npm:0.0.7"
+"@teritorio/maplibre-gl-teritorio-cluster@npm:^0.0.8":
+  version: 0.0.8
+  resolution: "@teritorio/maplibre-gl-teritorio-cluster@npm:0.0.8"
   dependencies:
     maplibre-gl: "npm:^4.7.0"
-  checksum: 10c0/8bf1bd209e685f1438462143f6acbb3ba2071a8320c9e808991bc4d74d0a5cd207684a2fff178fd1dac1de10d305570f54d7a765195e0313e8858b426ad68b6c
+  checksum: 10c0/f87519ce64cc49341678b18cbc143ca3b92152d039fd2666ff0e060e985a3cdbeea6979da3fab666c49c8a157b2c7c58e7db1b97bfc2354bddb66e0e82355e2c
   languageName: node
   linkType: hard
 
@@ -3539,7 +3539,7 @@ __metadata:
     "@tailwindcss/typography": "npm:^0.5.9"
     "@teritorio/font-teritorio": "npm:^2.5.0"
     "@teritorio/map": "npm:^0.12.7"
-    "@teritorio/maplibre-gl-teritorio-cluster": "npm:^0.0.7"
+    "@teritorio/maplibre-gl-teritorio-cluster": "npm:^0.0.8"
     "@teritorio/openmaptiles-gl-language": "npm:^1.5.4"
     "@turf/boolean-intersects": "npm:^6.5.0"
     "@turf/mask": "npm:^7.1.0"

From 5a545cbab1bd4924c0dc68bb3473bd61adcc15e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 25 Oct 2024 01:02:13 +0200
Subject: [PATCH 58/81] chore: update sentry #337

---
 package.json |   3 +-
 yarn.lock    | 923 +++++++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 822 insertions(+), 104 deletions(-)

diff --git a/package.json b/package.json
index 26258ff8..44e57d7c 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,8 @@
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "@gtm-support/vue-gtm": "^2.0.0",
     "@pinia/nuxt": "0.4.11",
-    "@sentry/vue": "^7.113.0",
+    "@sentry/node": "^8.35.0",
+    "@sentry/vue": "^8.35.0",
     "@tailwindcss/typography": "^0.5.9",
     "@teritorio/map": "^0.12.7",
     "@teritorio/maplibre-gl-teritorio-cluster": "^0.0.8",
diff --git a/yarn.lock b/yarn.lock
index 56962b92..a9e63563 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2570,6 +2570,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@opentelemetry/api-logs@npm:0.52.1":
+  version: 0.52.1
+  resolution: "@opentelemetry/api-logs@npm:0.52.1"
+  dependencies:
+    "@opentelemetry/api": "npm:^1.0.0"
+  checksum: 10c0/fddecb2211f987bf1a7f104594e58227655c887a6a22b41e9ead5ed925a4594b56186b38fca8e24db33058a924d8b54ddd6b315eca915c469f9653ce7813c31a
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/api-logs@npm:0.53.0":
+  version: 0.53.0
+  resolution: "@opentelemetry/api-logs@npm:0.53.0"
+  dependencies:
+    "@opentelemetry/api": "npm:^1.0.0"
+  checksum: 10c0/969ad3bbb74e3de6fdfe8eb9b3ab86d3dc284ca7bffd0ca67eef64efd08c97a4305696afe0b7b03e5d356f15d0a1a67ac517e5fa7d1ddee6fdc249eef2209fcb
+  languageName: node
+  linkType: hard
+
 "@opentelemetry/api@npm:^1.0.0":
   version: 1.8.0
   resolution: "@opentelemetry/api@npm:1.8.0"
@@ -2577,6 +2595,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@opentelemetry/api@npm:^1.8, @opentelemetry/api@npm:^1.9.0":
+  version: 1.9.0
+  resolution: "@opentelemetry/api@npm:1.9.0"
+  checksum: 10c0/9aae2fe6e8a3a3eeb6c1fdef78e1939cf05a0f37f8a4fae4d6bf2e09eb1e06f966ece85805626e01ba5fab48072b94f19b835449e58b6d26720ee19a58298add
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/context-async-hooks@npm:^1.25.1":
+  version: 1.27.0
+  resolution: "@opentelemetry/context-async-hooks@npm:1.27.0"
+  peerDependencies:
+    "@opentelemetry/api": ">=1.0.0 <1.10.0"
+  checksum: 10c0/dcb5eebf2e9a3a941eef6b055886545305503caba5293db5c826efebb07101491732bffeac836e9b0b8588a827f8921df78ef027f45942be3b641e8666549588
+  languageName: node
+  linkType: hard
+
 "@opentelemetry/core@npm:1.23.0":
   version: 1.23.0
   resolution: "@opentelemetry/core@npm:1.23.0"
@@ -2599,6 +2633,338 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@opentelemetry/core@npm:1.26.0":
+  version: 1.26.0
+  resolution: "@opentelemetry/core@npm:1.26.0"
+  dependencies:
+    "@opentelemetry/semantic-conventions": "npm:1.27.0"
+  peerDependencies:
+    "@opentelemetry/api": ">=1.0.0 <1.10.0"
+  checksum: 10c0/8038a3b9124a0b3b48dceb3949f88726c6853eac33b79fc049856f78dcf4b7ee453db1e6f4d5205a79b315caba809cb7d2f853946cf14773e50ce6a87fd5260e
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/core@npm:1.27.0, @opentelemetry/core@npm:^1.1.0, @opentelemetry/core@npm:^1.25.1, @opentelemetry/core@npm:^1.8.0":
+  version: 1.27.0
+  resolution: "@opentelemetry/core@npm:1.27.0"
+  dependencies:
+    "@opentelemetry/semantic-conventions": "npm:1.27.0"
+  peerDependencies:
+    "@opentelemetry/api": ">=1.0.0 <1.10.0"
+  checksum: 10c0/0f9dea15f146c04debb3f30b133d4d0886b2bae3f3d9696362b2c0b0c4ec89c1da759477f5bce0c50e7c6d57572a7215ec4feb38a6dc2c25ae61089f51f23134
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-amqplib@npm:^0.42.0":
+  version: 0.42.0
+  resolution: "@opentelemetry/instrumentation-amqplib@npm:0.42.0"
+  dependencies:
+    "@opentelemetry/core": "npm:^1.8.0"
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+    "@opentelemetry/semantic-conventions": "npm:^1.27.0"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/bdbcce51161f026ed7d57ae8694738655d1c1f1c1308570d28d85c6d42ed1cffedf2dac8dac0ab00a3fa820908525171086a265d5c366cd4a372517d87fbdff5
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-connect@npm:0.39.0":
+  version: 0.39.0
+  resolution: "@opentelemetry/instrumentation-connect@npm:0.39.0"
+  dependencies:
+    "@opentelemetry/core": "npm:^1.8.0"
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+    "@opentelemetry/semantic-conventions": "npm:^1.27.0"
+    "@types/connect": "npm:3.4.36"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/c137f64b32d2bf916c0e928428ece7313682c9e845052d1f3884e807dcc0417c7751577e04451200c8d49448789c197f459dbbaad3ccb3748342cdfd242b3b51
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-dataloader@npm:0.12.0":
+  version: 0.12.0
+  resolution: "@opentelemetry/instrumentation-dataloader@npm:0.12.0"
+  dependencies:
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/44571605798b237edb7d6324e2459f190aadd9f0888cd677e3a718f62b91132a5e3eb252a38073e48a482f96acd7ed0f703c88b43aff60acf4a78d89e0a71628
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-express@npm:0.43.0":
+  version: 0.43.0
+  resolution: "@opentelemetry/instrumentation-express@npm:0.43.0"
+  dependencies:
+    "@opentelemetry/core": "npm:^1.8.0"
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+    "@opentelemetry/semantic-conventions": "npm:^1.27.0"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/5b2e56e8c6c546103f8e9a69e632bb5b8d992da0a1858cb35f6320f98675df503b1b07a704559d11e29fe47366f98296729b0cccaa543debcfe2072888331b72
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-fastify@npm:0.40.0":
+  version: 0.40.0
+  resolution: "@opentelemetry/instrumentation-fastify@npm:0.40.0"
+  dependencies:
+    "@opentelemetry/core": "npm:^1.8.0"
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+    "@opentelemetry/semantic-conventions": "npm:^1.27.0"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/2b05562aa8433fae2343c015a7e3c23a3871aaab1a50ddfb8c0974b03c7a0693c27dc4014ebcde61ec53658fc84c4554d6ba1ed1c0212fbcf6423424c07ed1ca
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-fs@npm:0.15.0":
+  version: 0.15.0
+  resolution: "@opentelemetry/instrumentation-fs@npm:0.15.0"
+  dependencies:
+    "@opentelemetry/core": "npm:^1.8.0"
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/d06508e7c36fe9ed8db920f2481bcaafb5cc22d6f3d0c95dd97b098ca326a8b6089e2bf3b77c106f275ed3e019576e49c5b16036943e76675b1ce80a4d427a2b
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-generic-pool@npm:0.39.0":
+  version: 0.39.0
+  resolution: "@opentelemetry/instrumentation-generic-pool@npm:0.39.0"
+  dependencies:
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/962b19814aa06d5dca42a94f6c94d29ab7ab81a64e951f18d712055343aed11f6ed40df95f39f71ba92ab34c47b21eec514ab93dc8323bbd7567caeebe3a2752
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-graphql@npm:0.43.0":
+  version: 0.43.0
+  resolution: "@opentelemetry/instrumentation-graphql@npm:0.43.0"
+  dependencies:
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/d1db48ea4af5f9352da5c644a04253908c4df1d386176ee2d2679a7f22769411a2ce10a53fd9910c11ea2d80307d0bd613ba64193b77329648e2e2da08edabf5
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-hapi@npm:0.41.0":
+  version: 0.41.0
+  resolution: "@opentelemetry/instrumentation-hapi@npm:0.41.0"
+  dependencies:
+    "@opentelemetry/core": "npm:^1.8.0"
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+    "@opentelemetry/semantic-conventions": "npm:^1.27.0"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/cbfecb84de7b79d9c54d2d60d881a6bbfa8cca6e2b54d4eaa3ea093b99b3fa990a03c4641bc76b36367af1c793e4f639ce0c09e3b5aed9f20f04c08076c5e31e
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-http@npm:0.53.0":
+  version: 0.53.0
+  resolution: "@opentelemetry/instrumentation-http@npm:0.53.0"
+  dependencies:
+    "@opentelemetry/core": "npm:1.26.0"
+    "@opentelemetry/instrumentation": "npm:0.53.0"
+    "@opentelemetry/semantic-conventions": "npm:1.27.0"
+    semver: "npm:^7.5.2"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/421d5d9d0725dab6d2e77bf1464e0a76c22a88415854ce703d9cce7f795e4b11653d1705e7e060c61f6dba8019dd365f527b0d6332e4a8ef473f5101b5637a9c
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-ioredis@npm:0.43.0":
+  version: 0.43.0
+  resolution: "@opentelemetry/instrumentation-ioredis@npm:0.43.0"
+  dependencies:
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+    "@opentelemetry/redis-common": "npm:^0.36.2"
+    "@opentelemetry/semantic-conventions": "npm:^1.27.0"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/81f3988baa1cd78819951eab2e2a889d0f758a8cf3ecdacb8581ee362a339050cfd3e2bf1d56cae2fdfd055ded6975b74a1a1bea793ef2ca4c1953537e63f12c
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-kafkajs@npm:0.3.0":
+  version: 0.3.0
+  resolution: "@opentelemetry/instrumentation-kafkajs@npm:0.3.0"
+  dependencies:
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+    "@opentelemetry/semantic-conventions": "npm:^1.27.0"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/e29b0a0010a004418ada1277018aca316eb38de304afe7c5f5e56c60bbfd714fc7e8f0ddcd53c9a87233d1d31c57761292a0b1292496a08ccbfd954df0635a5b
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-koa@npm:0.43.0":
+  version: 0.43.0
+  resolution: "@opentelemetry/instrumentation-koa@npm:0.43.0"
+  dependencies:
+    "@opentelemetry/core": "npm:^1.8.0"
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+    "@opentelemetry/semantic-conventions": "npm:^1.27.0"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/d9596de9915ced84d8db2f244376420700dbb2731e044cd2091f8b32938a732e41525e50f9fa32cb95dc2f4fd560bb9a327061a44a993db034dd89a7d2e0495b
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-lru-memoizer@npm:0.40.0":
+  version: 0.40.0
+  resolution: "@opentelemetry/instrumentation-lru-memoizer@npm:0.40.0"
+  dependencies:
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/2832a1668e237b8690405a7961a9a27fa99fe06f587daf13d516349805f8dcd9e0eacfd41ec45abdfaa7e79ca6e799387cdc33585b1ae7d16f80f2db1bb5b30d
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-mongodb@npm:0.47.0":
+  version: 0.47.0
+  resolution: "@opentelemetry/instrumentation-mongodb@npm:0.47.0"
+  dependencies:
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+    "@opentelemetry/sdk-metrics": "npm:^1.9.1"
+    "@opentelemetry/semantic-conventions": "npm:^1.27.0"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/aa3238c3fd4d8f58bb22255051b4203ca6fb2d6e45ef16fc6c3e34bd79230e9faa3f4753b5c1dbc154d50f4be832107623781ab070c63c5ae46713d0e1a65e45
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-mongoose@npm:0.42.0":
+  version: 0.42.0
+  resolution: "@opentelemetry/instrumentation-mongoose@npm:0.42.0"
+  dependencies:
+    "@opentelemetry/core": "npm:^1.8.0"
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+    "@opentelemetry/semantic-conventions": "npm:^1.27.0"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/993fe0a0c8eda24bf2e650a78131fcc80227b850b0c70e0a4242ed0110e0b24c2ea23125bc9bd071b5f9ac9f3c46df84e8988e7edd5f27f79b0a8a8567f2f5ad
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-mysql2@npm:0.41.0":
+  version: 0.41.0
+  resolution: "@opentelemetry/instrumentation-mysql2@npm:0.41.0"
+  dependencies:
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+    "@opentelemetry/semantic-conventions": "npm:^1.27.0"
+    "@opentelemetry/sql-common": "npm:^0.40.1"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/a51217ff9da3ee9aca9ff956755b67068813fdd6f266b605bff5c9fe8f8b67d40ec0293c01d1817c69abc41c19e7589f7bcb24535f259cc539d42d7d32fd2232
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-mysql@npm:0.41.0":
+  version: 0.41.0
+  resolution: "@opentelemetry/instrumentation-mysql@npm:0.41.0"
+  dependencies:
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+    "@opentelemetry/semantic-conventions": "npm:^1.27.0"
+    "@types/mysql": "npm:2.15.26"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/f472b0a8f5ea240da3c616d2eb2ed14d6a6d50e98e3c40eb773894d38eff3b5f1bc2d2426240c9228eb8b3eb3717e605822a7506025dea4549055b13807680f2
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-nestjs-core@npm:0.40.0":
+  version: 0.40.0
+  resolution: "@opentelemetry/instrumentation-nestjs-core@npm:0.40.0"
+  dependencies:
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+    "@opentelemetry/semantic-conventions": "npm:^1.27.0"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/d362daf6eb77fc716159f0bfbbf5685699ed7e85c14a8f241c316daa5ebc2c80a9e20dda8245e7acfbc7bcc7c95ab2d01c2c637b8d428352673fc77f862c87c6
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-pg@npm:0.44.0":
+  version: 0.44.0
+  resolution: "@opentelemetry/instrumentation-pg@npm:0.44.0"
+  dependencies:
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+    "@opentelemetry/semantic-conventions": "npm:^1.27.0"
+    "@opentelemetry/sql-common": "npm:^0.40.1"
+    "@types/pg": "npm:8.6.1"
+    "@types/pg-pool": "npm:2.0.6"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/d20db7b7791d40cf65751dc9d79feae8694b2eb156985ef1dc1ee3ff9a230424305b24534192d9f234b87465b47d6b622e8f9e001e4665ea17d9017825835b80
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-redis-4@npm:0.42.0":
+  version: 0.42.0
+  resolution: "@opentelemetry/instrumentation-redis-4@npm:0.42.0"
+  dependencies:
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+    "@opentelemetry/redis-common": "npm:^0.36.2"
+    "@opentelemetry/semantic-conventions": "npm:^1.27.0"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/4bb5408daeefc10395443fd10bd2b933c88f18658f181bd80c240f49e896c14bb520b71f2eca31fa27a4f1d82448ffceb88c2ee419eec1041f997f8a1d9a6818
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation-undici@npm:0.6.0":
+  version: 0.6.0
+  resolution: "@opentelemetry/instrumentation-undici@npm:0.6.0"
+  dependencies:
+    "@opentelemetry/core": "npm:^1.8.0"
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+  peerDependencies:
+    "@opentelemetry/api": ^1.7.0
+  checksum: 10c0/eafaf213f6da1ad479ee56c8cf884cf27871a40749444784ca03d77fd0c4418164f3fffaec42ad07b81a4613cdf076594e305917698663424a081b50d0c6b481
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation@npm:0.53.0, @opentelemetry/instrumentation@npm:^0.53.0":
+  version: 0.53.0
+  resolution: "@opentelemetry/instrumentation@npm:0.53.0"
+  dependencies:
+    "@opentelemetry/api-logs": "npm:0.53.0"
+    "@types/shimmer": "npm:^1.2.0"
+    import-in-the-middle: "npm:^1.8.1"
+    require-in-the-middle: "npm:^7.1.1"
+    semver: "npm:^7.5.2"
+    shimmer: "npm:^1.2.1"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/943e289926812272cb77cda5e0a6b662bc6a92812b66420ceeca1c764f2e3a13364f6bbed7c9e84a17ad677474101ea3c598ef6a6cca982c35bfd24be6f6a25e
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/instrumentation@npm:^0.49 || ^0.50 || ^0.51 || ^0.52.0":
+  version: 0.52.1
+  resolution: "@opentelemetry/instrumentation@npm:0.52.1"
+  dependencies:
+    "@opentelemetry/api-logs": "npm:0.52.1"
+    "@types/shimmer": "npm:^1.0.2"
+    import-in-the-middle: "npm:^1.8.1"
+    require-in-the-middle: "npm:^7.1.1"
+    semver: "npm:^7.5.2"
+    shimmer: "npm:^1.2.1"
+  peerDependencies:
+    "@opentelemetry/api": ^1.3.0
+  checksum: 10c0/1d4946b470ac31358ba8d81a9f9653a1d705db96ffb8958fef873340c3d3c9699cfd8ff617c313ea8c6a8ece51aa7cf8af37d87a60813c31ed2207e5c14a33ba
+  languageName: node
+  linkType: hard
+
 "@opentelemetry/otlp-transformer@npm:^0.50.0":
   version: 0.50.0
   resolution: "@opentelemetry/otlp-transformer@npm:0.50.0"
@@ -2615,6 +2981,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@opentelemetry/redis-common@npm:^0.36.2":
+  version: 0.36.2
+  resolution: "@opentelemetry/redis-common@npm:0.36.2"
+  checksum: 10c0/4cb831628551b9f13dca8d65897e300ff7be0e256b77f455a26fb053bbdfc7997b27d066ab1402ca929e7ac77598e0d593f91762d8af9f798c19ba1524e9d078
+  languageName: node
+  linkType: hard
+
 "@opentelemetry/resources@npm:1.23.0":
   version: 1.23.0
   resolution: "@opentelemetry/resources@npm:1.23.0"
@@ -2639,6 +3012,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@opentelemetry/resources@npm:1.27.0, @opentelemetry/resources@npm:^1.26.0":
+  version: 1.27.0
+  resolution: "@opentelemetry/resources@npm:1.27.0"
+  dependencies:
+    "@opentelemetry/core": "npm:1.27.0"
+    "@opentelemetry/semantic-conventions": "npm:1.27.0"
+  peerDependencies:
+    "@opentelemetry/api": ">=1.0.0 <1.10.0"
+  checksum: 10c0/a5ddb80f36dd094d6bd67e045e3a0e464fe533dde47f03c18da73720e99e48b67503d66a642e7cb6ce15e96bf0fa8416b976ec82ffbaf96d0a65396ab69eb39d
+  languageName: node
+  linkType: hard
+
 "@opentelemetry/sdk-logs@npm:0.50.0":
   version: 0.50.0
   resolution: "@opentelemetry/sdk-logs@npm:0.50.0"
@@ -2665,6 +3050,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@opentelemetry/sdk-metrics@npm:^1.9.1":
+  version: 1.27.0
+  resolution: "@opentelemetry/sdk-metrics@npm:1.27.0"
+  dependencies:
+    "@opentelemetry/core": "npm:1.27.0"
+    "@opentelemetry/resources": "npm:1.27.0"
+  peerDependencies:
+    "@opentelemetry/api": ">=1.3.0 <1.10.0"
+  checksum: 10c0/0886a1e958c4c3098ae5a97c6a051b239a3ea2cd798c5504832b759946acff64fd030ae407d2535b345eb777e8a8443c349d43047edfd71eeffcddd84083d147
+  languageName: node
+  linkType: hard
+
 "@opentelemetry/sdk-trace-base@npm:1.23.0":
   version: 1.23.0
   resolution: "@opentelemetry/sdk-trace-base@npm:1.23.0"
@@ -2678,6 +3075,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@opentelemetry/sdk-trace-base@npm:^1.22, @opentelemetry/sdk-trace-base@npm:^1.26.0":
+  version: 1.27.0
+  resolution: "@opentelemetry/sdk-trace-base@npm:1.27.0"
+  dependencies:
+    "@opentelemetry/core": "npm:1.27.0"
+    "@opentelemetry/resources": "npm:1.27.0"
+    "@opentelemetry/semantic-conventions": "npm:1.27.0"
+  peerDependencies:
+    "@opentelemetry/api": ">=1.0.0 <1.10.0"
+  checksum: 10c0/bfb85912fe7bae451f1612c0a41e896060377318df784854ea8494b52bb7fbae37eba6391284537ecc151020c32dcd3118555be896c8c7ece8dd8d1bc36a5a1c
+  languageName: node
+  linkType: hard
+
 "@opentelemetry/sdk-trace-base@npm:^1.23.0":
   version: 1.24.1
   resolution: "@opentelemetry/sdk-trace-base@npm:1.24.1"
@@ -2705,6 +3115,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@opentelemetry/semantic-conventions@npm:1.27.0, @opentelemetry/semantic-conventions@npm:^1.27.0":
+  version: 1.27.0
+  resolution: "@opentelemetry/semantic-conventions@npm:1.27.0"
+  checksum: 10c0/b859773ba06b7e53dd9c6b45a171bf3000e405733adbf462ae91004ed011bc80edb5beecb817fb344a085adfd06045ab5b729c9bd0f1479650ad377134fb798c
+  languageName: node
+  linkType: hard
+
+"@opentelemetry/sql-common@npm:^0.40.1":
+  version: 0.40.1
+  resolution: "@opentelemetry/sql-common@npm:0.40.1"
+  dependencies:
+    "@opentelemetry/core": "npm:^1.1.0"
+  peerDependencies:
+    "@opentelemetry/api": ^1.1.0
+  checksum: 10c0/60a70358f0c94f610e2995333e96b406626d67d03d38ed03b15a3461ad0f8d64afbf6275cca7cb58fe955ecdce832f3ffc9b73f9d88503bba5d2a620bbd6d351
+  languageName: node
+  linkType: hard
+
 "@parcel/watcher-android-arm64@npm:2.4.1":
   version: 2.4.1
   resolution: "@parcel/watcher-android-arm64@npm:2.4.1"
@@ -2874,6 +3302,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@prisma/instrumentation@npm:5.19.1":
+  version: 5.19.1
+  resolution: "@prisma/instrumentation@npm:5.19.1"
+  dependencies:
+    "@opentelemetry/api": "npm:^1.8"
+    "@opentelemetry/instrumentation": "npm:^0.49 || ^0.50 || ^0.51 || ^0.52.0"
+    "@opentelemetry/sdk-trace-base": "npm:^1.22"
+  checksum: 10c0/437ca8b61815642cb511bfbe9d5ba64a94accbd4902a037ab12b68e9ca77a9bf74c9269b6b3fd02a4bfd7474209e151accc24f051dd99828568c9df5f57d4a0d
+  languageName: node
+  linkType: hard
+
 "@remusao/guess-url-type@npm:^1.2.1":
   version: 1.2.1
   resolution: "@remusao/guess-url-type@npm:1.2.1"
@@ -3188,117 +3627,168 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sentry-internal/feedback@npm:7.116.0":
-  version: 7.116.0
-  resolution: "@sentry-internal/feedback@npm:7.116.0"
+"@sentry-internal/browser-utils@npm:8.35.0":
+  version: 8.35.0
+  resolution: "@sentry-internal/browser-utils@npm:8.35.0"
   dependencies:
-    "@sentry/core": "npm:7.116.0"
-    "@sentry/types": "npm:7.116.0"
-    "@sentry/utils": "npm:7.116.0"
-  checksum: 10c0/e239464d5300ee1d026cf8af8c8945117b5c0dc175e431f2a13bb5e23e1a890ebe3df5598ca6c0e8a07f0b81ea89a144cd438d8505cf4d3bcf9a7284e924730c
+    "@sentry/core": "npm:8.35.0"
+    "@sentry/types": "npm:8.35.0"
+    "@sentry/utils": "npm:8.35.0"
+  checksum: 10c0/949873577e3e1654935a5dd9e259f3f6e79dff253806b68811634129815a489318f1051cb7d82db4000e3f5bff03c776456cb5fcaeca1beec5d45916d11c4037
   languageName: node
   linkType: hard
 
-"@sentry-internal/replay-canvas@npm:7.116.0":
-  version: 7.116.0
-  resolution: "@sentry-internal/replay-canvas@npm:7.116.0"
+"@sentry-internal/feedback@npm:8.35.0":
+  version: 8.35.0
+  resolution: "@sentry-internal/feedback@npm:8.35.0"
   dependencies:
-    "@sentry/core": "npm:7.116.0"
-    "@sentry/replay": "npm:7.116.0"
-    "@sentry/types": "npm:7.116.0"
-    "@sentry/utils": "npm:7.116.0"
-  checksum: 10c0/1b582d247b0a7a3c62ea838e70fa81ca9de55bc1c0a9b46ed2c1da9948fde04464bae188417836b9dd353a6efe04316461e4e97ab6888376e326866d41c4b544
+    "@sentry/core": "npm:8.35.0"
+    "@sentry/types": "npm:8.35.0"
+    "@sentry/utils": "npm:8.35.0"
+  checksum: 10c0/861ba92c85e19fb3096018928a28f6d8a1deb5f1ae163fe8c881a5db5dd14d44be0461c8d5133905ee0def6d388da7b54f1ea2c3b2a611dab096e47b0ef835ba
   languageName: node
   linkType: hard
 
-"@sentry-internal/tracing@npm:7.116.0":
-  version: 7.116.0
-  resolution: "@sentry-internal/tracing@npm:7.116.0"
+"@sentry-internal/replay-canvas@npm:8.35.0":
+  version: 8.35.0
+  resolution: "@sentry-internal/replay-canvas@npm:8.35.0"
   dependencies:
-    "@sentry/core": "npm:7.116.0"
-    "@sentry/types": "npm:7.116.0"
-    "@sentry/utils": "npm:7.116.0"
-  checksum: 10c0/fe7d8f43642236d6c832c48d411d3a1fd2bf7c509967bdc7d1c5d25149f70882a614061b652c9c4d443887d660ddc1552ffe72bef5fa8fbb2cea1676a7d5c742
+    "@sentry-internal/replay": "npm:8.35.0"
+    "@sentry/core": "npm:8.35.0"
+    "@sentry/types": "npm:8.35.0"
+    "@sentry/utils": "npm:8.35.0"
+  checksum: 10c0/e4a4e466cc04294174b9b304c7b43e683904c5ffdb408972d95cca999c32de6134f36f7d438d334cf0e5c4ba2f986c0753693b2a8e5e9ebf81e574a433f2f32e
   languageName: node
   linkType: hard
 
-"@sentry/browser@npm:7.116.0":
-  version: 7.116.0
-  resolution: "@sentry/browser@npm:7.116.0"
+"@sentry-internal/replay@npm:8.35.0":
+  version: 8.35.0
+  resolution: "@sentry-internal/replay@npm:8.35.0"
   dependencies:
-    "@sentry-internal/feedback": "npm:7.116.0"
-    "@sentry-internal/replay-canvas": "npm:7.116.0"
-    "@sentry-internal/tracing": "npm:7.116.0"
-    "@sentry/core": "npm:7.116.0"
-    "@sentry/integrations": "npm:7.116.0"
-    "@sentry/replay": "npm:7.116.0"
-    "@sentry/types": "npm:7.116.0"
-    "@sentry/utils": "npm:7.116.0"
-  checksum: 10c0/c54f428c03359a652f3bbdd5598afae47d7475360efdddcc050c5b7e4c55c842d41ee1b21aa8355a8991178c942e7e2ba7a9782ece8793077ad90891a0be7c06
+    "@sentry-internal/browser-utils": "npm:8.35.0"
+    "@sentry/core": "npm:8.35.0"
+    "@sentry/types": "npm:8.35.0"
+    "@sentry/utils": "npm:8.35.0"
+  checksum: 10c0/8b3cbfa7c9aa8bedc8c9bf41460aadb2baddacd5ac7d9d6b2b42a833a51f73c6f061352142e67e1b2cfd21c80e6dbe43bea812f66acff44db3a3a8cf31829b25
   languageName: node
   linkType: hard
 
-"@sentry/core@npm:7.116.0":
-  version: 7.116.0
-  resolution: "@sentry/core@npm:7.116.0"
+"@sentry/browser@npm:8.35.0":
+  version: 8.35.0
+  resolution: "@sentry/browser@npm:8.35.0"
   dependencies:
-    "@sentry/types": "npm:7.116.0"
-    "@sentry/utils": "npm:7.116.0"
-  checksum: 10c0/572593d4d86f8239bc53362c9273ea3dfddc44a438e0227297491167b78450f939d11ecb6708438583d2dc0897cb702aaf795cf18d2ef9c9773c55428666b228
+    "@sentry-internal/browser-utils": "npm:8.35.0"
+    "@sentry-internal/feedback": "npm:8.35.0"
+    "@sentry-internal/replay": "npm:8.35.0"
+    "@sentry-internal/replay-canvas": "npm:8.35.0"
+    "@sentry/core": "npm:8.35.0"
+    "@sentry/types": "npm:8.35.0"
+    "@sentry/utils": "npm:8.35.0"
+  checksum: 10c0/91fc8c2f70e09a76cb25d013b47b1d6819b200af421bc9f0d49eae722e7526831d25fac3289bd2fbcface0f45bedb9616769daf28019b57061d300e8fa9ac5d2
   languageName: node
   linkType: hard
 
-"@sentry/integrations@npm:7.116.0":
-  version: 7.116.0
-  resolution: "@sentry/integrations@npm:7.116.0"
+"@sentry/core@npm:8.35.0":
+  version: 8.35.0
+  resolution: "@sentry/core@npm:8.35.0"
   dependencies:
-    "@sentry/core": "npm:7.116.0"
-    "@sentry/types": "npm:7.116.0"
-    "@sentry/utils": "npm:7.116.0"
-    localforage: "npm:^1.8.1"
-  checksum: 10c0/dc3321fae83c9ba8c8ce5a26e315f87c1490d7a1b549053287fef3049e65025f2f7c1dc61c10dd62a133c2912e8c1564fd0192a4680833af8e84e56fcbb843cd
+    "@sentry/types": "npm:8.35.0"
+    "@sentry/utils": "npm:8.35.0"
+  checksum: 10c0/93f2dd5a08484712d895b110f7f4c364e7cf43aef770a05e089584ec4decf95fac5a6fe255714aa216f1f2ac65b38306138307f9a84235a3090659fa53e4c074
   languageName: node
   linkType: hard
 
-"@sentry/replay@npm:7.116.0":
-  version: 7.116.0
-  resolution: "@sentry/replay@npm:7.116.0"
+"@sentry/node@npm:^8.35.0":
+  version: 8.35.0
+  resolution: "@sentry/node@npm:8.35.0"
   dependencies:
-    "@sentry-internal/tracing": "npm:7.116.0"
-    "@sentry/core": "npm:7.116.0"
-    "@sentry/types": "npm:7.116.0"
-    "@sentry/utils": "npm:7.116.0"
-  checksum: 10c0/a59574bf586cd2713f0020c86adbd21718f30a44a1a281d059d0e8e4566f33313cdd979057efee287b147e57925b7ac5f98eb15c4538ce5bb13a1b3e6eca8009
+    "@opentelemetry/api": "npm:^1.9.0"
+    "@opentelemetry/context-async-hooks": "npm:^1.25.1"
+    "@opentelemetry/core": "npm:^1.25.1"
+    "@opentelemetry/instrumentation": "npm:^0.53.0"
+    "@opentelemetry/instrumentation-amqplib": "npm:^0.42.0"
+    "@opentelemetry/instrumentation-connect": "npm:0.39.0"
+    "@opentelemetry/instrumentation-dataloader": "npm:0.12.0"
+    "@opentelemetry/instrumentation-express": "npm:0.43.0"
+    "@opentelemetry/instrumentation-fastify": "npm:0.40.0"
+    "@opentelemetry/instrumentation-fs": "npm:0.15.0"
+    "@opentelemetry/instrumentation-generic-pool": "npm:0.39.0"
+    "@opentelemetry/instrumentation-graphql": "npm:0.43.0"
+    "@opentelemetry/instrumentation-hapi": "npm:0.41.0"
+    "@opentelemetry/instrumentation-http": "npm:0.53.0"
+    "@opentelemetry/instrumentation-ioredis": "npm:0.43.0"
+    "@opentelemetry/instrumentation-kafkajs": "npm:0.3.0"
+    "@opentelemetry/instrumentation-koa": "npm:0.43.0"
+    "@opentelemetry/instrumentation-lru-memoizer": "npm:0.40.0"
+    "@opentelemetry/instrumentation-mongodb": "npm:0.47.0"
+    "@opentelemetry/instrumentation-mongoose": "npm:0.42.0"
+    "@opentelemetry/instrumentation-mysql": "npm:0.41.0"
+    "@opentelemetry/instrumentation-mysql2": "npm:0.41.0"
+    "@opentelemetry/instrumentation-nestjs-core": "npm:0.40.0"
+    "@opentelemetry/instrumentation-pg": "npm:0.44.0"
+    "@opentelemetry/instrumentation-redis-4": "npm:0.42.0"
+    "@opentelemetry/instrumentation-undici": "npm:0.6.0"
+    "@opentelemetry/resources": "npm:^1.26.0"
+    "@opentelemetry/sdk-trace-base": "npm:^1.26.0"
+    "@opentelemetry/semantic-conventions": "npm:^1.27.0"
+    "@prisma/instrumentation": "npm:5.19.1"
+    "@sentry/core": "npm:8.35.0"
+    "@sentry/opentelemetry": "npm:8.35.0"
+    "@sentry/types": "npm:8.35.0"
+    "@sentry/utils": "npm:8.35.0"
+    import-in-the-middle: "npm:^1.11.2"
+  checksum: 10c0/cd5baa72209a8f78f3c25ee132cebf3d55b58e6faed1c3f83826796b722a7083504ce037ab886e50861ea5d1a861de6c494bfa1e44baffbb564fa47932939990
+  languageName: node
+  linkType: hard
+
+"@sentry/opentelemetry@npm:8.35.0":
+  version: 8.35.0
+  resolution: "@sentry/opentelemetry@npm:8.35.0"
+  dependencies:
+    "@sentry/core": "npm:8.35.0"
+    "@sentry/types": "npm:8.35.0"
+    "@sentry/utils": "npm:8.35.0"
+  peerDependencies:
+    "@opentelemetry/api": ^1.9.0
+    "@opentelemetry/core": ^1.25.1
+    "@opentelemetry/instrumentation": ^0.53.0
+    "@opentelemetry/sdk-trace-base": ^1.26.0
+    "@opentelemetry/semantic-conventions": ^1.27.0
+  checksum: 10c0/cbf311abdef13c5114d7be7bddaae7e92111e6ad6e3d0744c32096399fecdc493eae1788c8222ba9f5000a49f57d8b608671cc98c36af29679a6328c1757b919
   languageName: node
   linkType: hard
 
-"@sentry/types@npm:7.116.0":
-  version: 7.116.0
-  resolution: "@sentry/types@npm:7.116.0"
-  checksum: 10c0/fd44cb44221bb87678cee8ecb89eeddd2e76563367944d0645d1240b30702b45a64ae09b818199ce9178c316a7c181f19f3eb757886f8955dcc205473e644985
+"@sentry/types@npm:8.35.0":
+  version: 8.35.0
+  resolution: "@sentry/types@npm:8.35.0"
+  checksum: 10c0/b28d87ef26d1b889cf7c951a697caf70d9092d84dd1ae777700a0a009da832a8a5c298632dba62fbcb1a3252d011353068c64419e8e952b676f20deca8d03d64
   languageName: node
   linkType: hard
 
-"@sentry/utils@npm:7.116.0":
-  version: 7.116.0
-  resolution: "@sentry/utils@npm:7.116.0"
+"@sentry/utils@npm:8.35.0":
+  version: 8.35.0
+  resolution: "@sentry/utils@npm:8.35.0"
   dependencies:
-    "@sentry/types": "npm:7.116.0"
-  checksum: 10c0/a74094c162f1a34b8448cbb828840fa41100a579db588cb00deaa078ac7ad671bab1932bbbd1c3706e8c9cc3a53382f12bc29474bb81cdc1c9e8ea4095bea191
+    "@sentry/types": "npm:8.35.0"
+  checksum: 10c0/5c1178f0000165d6436d98902bc4107fcdae9aa84c23458b4c6b1a89b4734185292fb776427d6ec8e174e7e6c1c32b7c72585bb3ddd3ddd893dd8e5884c50d67
   languageName: node
   linkType: hard
 
-"@sentry/vue@npm:^7.113.0":
-  version: 7.116.0
-  resolution: "@sentry/vue@npm:7.116.0"
+"@sentry/vue@npm:^8.35.0":
+  version: 8.35.0
+  resolution: "@sentry/vue@npm:8.35.0"
   dependencies:
-    "@sentry/browser": "npm:7.116.0"
-    "@sentry/core": "npm:7.116.0"
-    "@sentry/types": "npm:7.116.0"
-    "@sentry/utils": "npm:7.116.0"
+    "@sentry/browser": "npm:8.35.0"
+    "@sentry/core": "npm:8.35.0"
+    "@sentry/types": "npm:8.35.0"
+    "@sentry/utils": "npm:8.35.0"
   peerDependencies:
+    pinia: 2.x
     vue: 2.x || 3.x
-  checksum: 10c0/51954aa403864fef36f6f71bdb3a1a4231967369b5adb262ae145b07b48d7cf9b3dded0e65134e317e5466b8d4e79243badc3a1ba7e84cdaeef8736a4ce9a18c
+  peerDependenciesMeta:
+    pinia:
+      optional: true
+  checksum: 10c0/48b6e2339cc627175e2a53511b33e049bf25ae78ba0e9403ddadf2ee40a72a9842f4f6159be610ad7a5d751555194b6d482038fcddda1391a3430fb288fc246f
   languageName: node
   linkType: hard
 
@@ -3534,7 +4024,8 @@ __metadata:
     "@nuxt/types": "npm:^2.17.0"
     "@nuxtjs/i18n": "npm:8.0.0"
     "@pinia/nuxt": "npm:0.4.11"
-    "@sentry/vue": "npm:^7.113.0"
+    "@sentry/node": "npm:^8.35.0"
+    "@sentry/vue": "npm:^8.35.0"
     "@tailwindcss/forms": "npm:^0.5.3"
     "@tailwindcss/typography": "npm:^0.5.9"
     "@teritorio/font-teritorio": "npm:^2.5.0"
@@ -3862,6 +4353,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/connect@npm:3.4.36":
+  version: 3.4.36
+  resolution: "@types/connect@npm:3.4.36"
+  dependencies:
+    "@types/node": "npm:*"
+  checksum: 10c0/0dd8fcf576e178e69cbc00d47be69d3198dca4d86734a00fc55de0df147982e0a5f34592117571c5979e92ce8f3e0596e31aa454496db8a43ab90c5ab1068f40
+  languageName: node
+  linkType: hard
+
 "@types/cookie@npm:^0.4.1":
   version: 0.4.1
   resolution: "@types/cookie@npm:0.4.1"
@@ -4187,6 +4687,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/mysql@npm:2.15.26":
+  version: 2.15.26
+  resolution: "@types/mysql@npm:2.15.26"
+  dependencies:
+    "@types/node": "npm:*"
+  checksum: 10c0/3cf279e7db05d56c0544532a4380b9079f579092379a04c8138bd5cf88dda5b31208ac2d23ce7dbf4e3a3f43aaeed44e72f9f19f726518f308efe95a7435619a
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:*":
   version: 20.14.1
   resolution: "@types/node@npm:20.14.1"
@@ -4235,6 +4744,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/pg-pool@npm:2.0.6":
+  version: 2.0.6
+  resolution: "@types/pg-pool@npm:2.0.6"
+  dependencies:
+    "@types/pg": "npm:*"
+  checksum: 10c0/41965d4d0b677c54ce45d36add760e496d356b78019cb062d124af40287cf6b0fd4d86e3b0085f443856c185983a60c8b0795ff76d15683e2a93c62f5ac0125f
+  languageName: node
+  linkType: hard
+
+"@types/pg@npm:*":
+  version: 8.11.10
+  resolution: "@types/pg@npm:8.11.10"
+  dependencies:
+    "@types/node": "npm:*"
+    pg-protocol: "npm:*"
+    pg-types: "npm:^4.0.1"
+  checksum: 10c0/c8800d0ab2c6424308e6c6b40c73f19583ee1aed758462bd07694844b0a551b5841442205a4ee05207b80109ba502f33f20241b1bd9b4902e713611fb9e08f6c
+  languageName: node
+  linkType: hard
+
+"@types/pg@npm:8.6.1":
+  version: 8.6.1
+  resolution: "@types/pg@npm:8.6.1"
+  dependencies:
+    "@types/node": "npm:*"
+    pg-protocol: "npm:*"
+    pg-types: "npm:^2.2.0"
+  checksum: 10c0/8d16660c9a4f050d6d5e391c59f9a62e9d377a2a6a7eb5865f8828082dbdfeab700fd707e585f42d67b29e796b32863aea5bd6d5cbb8ceda2d598da5d0c61693
+  languageName: node
+  linkType: hard
+
 "@types/pug@npm:2.0.10":
   version: 2.0.10
   resolution: "@types/pug@npm:2.0.10"
@@ -4311,6 +4851,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/shimmer@npm:^1.0.2, @types/shimmer@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "@types/shimmer@npm:1.2.0"
+  checksum: 10c0/6f7bfe1b55601cfc3ae713fc74a03341f3834253b8b91cb2add926d5949e4a63f7e666f59c2a6e40a883a5f9e2f3e3af10f9d3aed9b60fced0bda87659e58d8d
+  languageName: node
+  linkType: hard
+
 "@types/sinonjs__fake-timers@npm:8.1.1":
   version: 8.1.1
   resolution: "@types/sinonjs__fake-timers@npm:8.1.1"
@@ -5198,7 +5745,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-import-attributes@npm:^1.9.2":
+"acorn-import-attributes@npm:^1.9.2, acorn-import-attributes@npm:^1.9.5":
   version: 1.9.5
   resolution: "acorn-import-attributes@npm:1.9.5"
   peerDependencies:
@@ -6166,6 +6713,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cjs-module-lexer@npm:^1.2.2":
+  version: 1.4.1
+  resolution: "cjs-module-lexer@npm:1.4.1"
+  checksum: 10c0/5a7d8279629c9ba8ccf38078c2fed75b7737973ced22b9b5a54180efa57fb2fe2bb7bec6aec55e3b8f3f5044f5d7b240347ad9bd285e7c3d0ee5b0a1d0504dfc
+  languageName: node
+  linkType: hard
+
 "clean-regexp@npm:^1.0.0":
   version: 1.0.0
   resolution: "clean-regexp@npm:1.0.0"
@@ -7030,6 +7584,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"debug@npm:^4.3.5":
+  version: 4.3.7
+  resolution: "debug@npm:4.3.7"
+  dependencies:
+    ms: "npm:^2.1.3"
+  peerDependenciesMeta:
+    supports-color:
+      optional: true
+  checksum: 10c0/1471db19c3b06d485a622d62f65947a19a23fbd0dd73f7fd3eafb697eec5360cde447fb075919987899b1a2096e85d35d4eb5a4de09a57600ac9cf7e6c8e768b
+  languageName: node
+  linkType: hard
+
 "decimal.js@npm:^10.4.2":
   version: 10.4.3
   resolution: "decimal.js@npm:10.4.3"
@@ -9799,13 +10365,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"immediate@npm:~3.0.5":
-  version: 3.0.6
-  resolution: "immediate@npm:3.0.6"
-  checksum: 10c0/f8ba7ede69bee9260241ad078d2d535848745ff5f6995c7c7cb41cfdc9ccc213f66e10fa5afb881f90298b24a3f7344b637b592beb4f54e582770cdce3f1f039
-  languageName: node
-  linkType: hard
-
 "immutable@npm:^4.0.0":
   version: 4.3.6
   resolution: "immutable@npm:4.3.6"
@@ -9823,6 +10382,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"import-in-the-middle@npm:^1.11.2, import-in-the-middle@npm:^1.8.1":
+  version: 1.11.2
+  resolution: "import-in-the-middle@npm:1.11.2"
+  dependencies:
+    acorn: "npm:^8.8.2"
+    acorn-import-attributes: "npm:^1.9.5"
+    cjs-module-lexer: "npm:^1.2.2"
+    module-details-from-path: "npm:^1.0.3"
+  checksum: 10c0/9bf95a68c6678b7b2361da73f9047575dee9a3ed932c055ac3376a94580808e3ccfd05a7e38d8fcfea7f805a7e4ac0bea915653627074dc6cb1d800c8319d5f1
+  languageName: node
+  linkType: hard
+
 "imurmurhash@npm:^0.1.4":
   version: 0.1.4
   resolution: "imurmurhash@npm:0.1.4"
@@ -10761,15 +11332,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lie@npm:3.1.1":
-  version: 3.1.1
-  resolution: "lie@npm:3.1.1"
-  dependencies:
-    immediate: "npm:~3.0.5"
-  checksum: 10c0/d62685786590351b8e407814acdd89efe1cb136f05cb9236c5a97b2efdca1f631d2997310ad2d565c753db7596799870140e4777c9c9b8c44a0f6bf42d1804a1
-  languageName: node
-  linkType: hard
-
 "lilconfig@npm:^2.1.0":
   version: 2.1.0
   resolution: "lilconfig@npm:2.1.0"
@@ -10915,15 +11477,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"localforage@npm:^1.8.1":
-  version: 1.10.0
-  resolution: "localforage@npm:1.10.0"
-  dependencies:
-    lie: "npm:3.1.1"
-  checksum: 10c0/00f19f1f97002e6721587ed5017f502d58faf80dae567d5065d4d1ee0caf0762f40d2e2dba7f0ef7d3f14ee6203242daae9ecad97359bfc10ecff36df11d85a3
-  languageName: node
-  linkType: hard
-
 "locate-path@npm:^5.0.0":
   version: 5.0.0
   resolution: "locate-path@npm:5.0.0"
@@ -11623,6 +12176,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"module-details-from-path@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "module-details-from-path@npm:1.0.3"
+  checksum: 10c0/3d881f3410c142e4c2b1307835a2862ba04e5b3ec6e90655614a0ee2c4b299b4c1d117fb525d2435bf436990026f18d338a197b54ad6bd36252f465c336ff423
+  languageName: node
+  linkType: hard
+
 "mri@npm:^1.1.0, mri@npm:^1.2.0":
   version: 1.2.0
   resolution: "mri@npm:1.2.0"
@@ -11658,7 +12218,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ms@npm:2.1.3, ms@npm:^2.1.1":
+"ms@npm:2.1.3, ms@npm:^2.1.1, ms@npm:^2.1.3":
   version: 2.1.3
   resolution: "ms@npm:2.1.3"
   checksum: 10c0/d924b57e7312b3b63ad21fc5b3dc0af5e78d61a1fc7cfb5457edaf26326bf62be5307cc87ffb6862ef1c2b33b0233cdb5d4f01c4c958cc0d660948b65a287a48
@@ -12349,6 +12909,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"obuf@npm:~1.1.2":
+  version: 1.1.2
+  resolution: "obuf@npm:1.1.2"
+  checksum: 10c0/520aaac7ea701618eacf000fc96ae458e20e13b0569845800fc582f81b386731ab22d55354b4915d58171db00e79cfcd09c1638c02f89577ef092b38c65b7d81
+  languageName: node
+  linkType: hard
+
 "ofetch@npm:^1.1.1, ofetch@npm:^1.3.3, ofetch@npm:^1.3.4":
   version: 1.3.4
   resolution: "ofetch@npm:1.3.4"
@@ -12892,6 +13459,55 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pg-int8@npm:1.0.1":
+  version: 1.0.1
+  resolution: "pg-int8@npm:1.0.1"
+  checksum: 10c0/be6a02d851fc2a4ae3e9de81710d861de3ba35ac927268973eb3cb618873a05b9424656df464dd43bd7dc3fc5295c3f5b3c8349494f87c7af50ec59ef14e0b98
+  languageName: node
+  linkType: hard
+
+"pg-numeric@npm:1.0.2":
+  version: 1.0.2
+  resolution: "pg-numeric@npm:1.0.2"
+  checksum: 10c0/43dd9884e7b52c79ddc28d2d282d7475fce8bba13452d33c04ceb2e0a65f561edf6699694e8e1c832ff9093770496363183c950dd29608e1bdd98f344b25bca9
+  languageName: node
+  linkType: hard
+
+"pg-protocol@npm:*":
+  version: 1.7.0
+  resolution: "pg-protocol@npm:1.7.0"
+  checksum: 10c0/c4af854d9b843c808231c0040fed89f2b9101006157df8da2bb2f62a7dde702de748d852228dc22df41cc7ffddfb526af3bcb34b278b581e9f76a060789186c1
+  languageName: node
+  linkType: hard
+
+"pg-types@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "pg-types@npm:2.2.0"
+  dependencies:
+    pg-int8: "npm:1.0.1"
+    postgres-array: "npm:~2.0.0"
+    postgres-bytea: "npm:~1.0.0"
+    postgres-date: "npm:~1.0.4"
+    postgres-interval: "npm:^1.1.0"
+  checksum: 10c0/ab3f8069a323f601cd2d2279ca8c425447dab3f9b61d933b0601d7ffc00d6200df25e26a4290b2b0783b59278198f7dd2ed03e94c4875797919605116a577c65
+  languageName: node
+  linkType: hard
+
+"pg-types@npm:^4.0.1":
+  version: 4.0.2
+  resolution: "pg-types@npm:4.0.2"
+  dependencies:
+    pg-int8: "npm:1.0.1"
+    pg-numeric: "npm:1.0.2"
+    postgres-array: "npm:~3.0.1"
+    postgres-bytea: "npm:~3.0.0"
+    postgres-date: "npm:~2.1.0"
+    postgres-interval: "npm:^3.0.0"
+    postgres-range: "npm:^1.1.1"
+  checksum: 10c0/780fccda2f3fa2a34e85a72e8e7dadb7d88fbe71ce88f126cb3313f333ad836d02488ec4ff3d94d0c1e5846f735d6e6c6281f8059e6b8919d2180429acaec3e2
+  languageName: node
+  linkType: hard
+
 "picocolors@npm:^1.0.0, picocolors@npm:^1.0.1":
   version: 1.0.1
   resolution: "picocolors@npm:1.0.1"
@@ -13482,6 +14098,73 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postgres-array@npm:~2.0.0":
+  version: 2.0.0
+  resolution: "postgres-array@npm:2.0.0"
+  checksum: 10c0/cbd56207e4141d7fbf08c86f2aebf21fa7064943d3f808ec85f442ff94b48d891e7a144cc02665fb2de5dbcb9b8e3183a2ac749959e794b4a4cfd379d7a21d08
+  languageName: node
+  linkType: hard
+
+"postgres-array@npm:~3.0.1":
+  version: 3.0.2
+  resolution: "postgres-array@npm:3.0.2"
+  checksum: 10c0/644aa071f67a66a59f641f8e623887d2b915bc102a32643e2aa8b54c11acd343c5ad97831ea444dd37bd4b921ba35add4aa2cb0c6b76700a8252c2324aeba5b4
+  languageName: node
+  linkType: hard
+
+"postgres-bytea@npm:~1.0.0":
+  version: 1.0.0
+  resolution: "postgres-bytea@npm:1.0.0"
+  checksum: 10c0/febf2364b8a8953695cac159eeb94542ead5886792a9627b97e33f6b5bb6e263bc0706ab47ec221516e79fbd6b2452d668841830fb3b49ec6c0fc29be61892ce
+  languageName: node
+  linkType: hard
+
+"postgres-bytea@npm:~3.0.0":
+  version: 3.0.0
+  resolution: "postgres-bytea@npm:3.0.0"
+  dependencies:
+    obuf: "npm:~1.1.2"
+  checksum: 10c0/41c79cc48aa730c5ba3eda6ab989a940034f07a1f57b8f2777dce56f1b8cca16c5870582932b5b10cc605048aef9b6157e06253c871b4717cafc6d00f55376aa
+  languageName: node
+  linkType: hard
+
+"postgres-date@npm:~1.0.4":
+  version: 1.0.7
+  resolution: "postgres-date@npm:1.0.7"
+  checksum: 10c0/0ff91fccc64003e10b767fcfeefb5eaffbc522c93aa65d5051c49b3c4ce6cb93ab091a7d22877a90ad60b8874202c6f1d0f935f38a7235ed3b258efd54b97ca9
+  languageName: node
+  linkType: hard
+
+"postgres-date@npm:~2.1.0":
+  version: 2.1.0
+  resolution: "postgres-date@npm:2.1.0"
+  checksum: 10c0/00a7472c10788f6b0d08d24108bf1eb80858de1bd6317740198a564918ea4a69b80c98148167b92ae688abd606483020d0de0dd3a36f3ea9a3e26bbeef3464f4
+  languageName: node
+  linkType: hard
+
+"postgres-interval@npm:^1.1.0":
+  version: 1.2.0
+  resolution: "postgres-interval@npm:1.2.0"
+  dependencies:
+    xtend: "npm:^4.0.0"
+  checksum: 10c0/c1734c3cb79e7f22579af0b268a463b1fa1d084e742a02a7a290c4f041e349456f3bee3b4ee0bb3f226828597f7b76deb615c1b857db9a742c45520100456272
+  languageName: node
+  linkType: hard
+
+"postgres-interval@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "postgres-interval@npm:3.0.0"
+  checksum: 10c0/8b570b30ea37c685e26d136d34460f246f98935a1533defc4b53bb05ee23ae3dc7475b718ec7ea607a57894d8c6b4f1adf67ca9cc83a75bdacffd427d5c68de8
+  languageName: node
+  linkType: hard
+
+"postgres-range@npm:^1.1.1":
+  version: 1.1.4
+  resolution: "postgres-range@npm:1.1.4"
+  checksum: 10c0/254494ef81df208e0adeae6b66ce394aba37914ea14c7ece55a45fb6691b7db04bee74c825380a47c887a9f87158fd3d86f758f9cc60b76d3a38ce5aca7912e8
+  languageName: node
+  linkType: hard
+
 "potpack@npm:^2.0.0":
   version: 2.0.0
   resolution: "potpack@npm:2.0.0"
@@ -13947,6 +14630,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"require-in-the-middle@npm:^7.1.1":
+  version: 7.4.0
+  resolution: "require-in-the-middle@npm:7.4.0"
+  dependencies:
+    debug: "npm:^4.3.5"
+    module-details-from-path: "npm:^1.0.3"
+    resolve: "npm:^1.22.8"
+  checksum: 10c0/67c2242ea5b059c2a10c01d4f409233c67278051b47b9bf83198ab7e3ea591ffe3fa1d97912180d7d3d9a5e44490c00c55882b702849d61ac4db87d2c3823cb0
+  languageName: node
+  linkType: hard
+
 "requires-port@npm:^1.0.0":
   version: 1.0.0
   resolution: "requires-port@npm:1.0.0"
@@ -13984,7 +14678,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.22.1, resolve@npm:^1.22.2, resolve@npm:^1.22.4":
+"resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.22.1, resolve@npm:^1.22.2, resolve@npm:^1.22.4, resolve@npm:^1.22.8":
   version: 1.22.8
   resolution: "resolve@npm:1.22.8"
   dependencies:
@@ -13997,7 +14691,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^1.1.7#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>":
+"resolve@patch:resolve@npm%3A^1.1.7#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.8#optional!builtin<compat/resolve>":
   version: 1.22.8
   resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
   dependencies:
@@ -14335,6 +15029,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver@npm:^7.5.2":
+  version: 7.6.3
+  resolution: "semver@npm:7.6.3"
+  bin:
+    semver: bin/semver.js
+  checksum: 10c0/88f33e148b210c153873cb08cfe1e281d518aaa9a666d4d148add6560db5cd3c582f3a08ccb91f38d5f379ead256da9931234ed122057f40bb5766e65e58adaf
+  languageName: node
+  linkType: hard
+
 "send@npm:0.18.0":
   version: 0.18.0
   resolution: "send@npm:0.18.0"
@@ -14517,6 +15220,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"shimmer@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "shimmer@npm:1.2.1"
+  checksum: 10c0/ae8b27c389db2a00acfc8da90240f11577685a8f3e40008f826a3bea8b4f3b3ecd305c26be024b4a0fd3b123d132c1569d6e238097960a9a543b6c60760fb46a
+  languageName: node
+  linkType: hard
+
 "side-channel@npm:^1.0.4":
   version: 1.0.6
   resolution: "side-channel@npm:1.0.6"
@@ -17152,6 +17862,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"xtend@npm:^4.0.0":
+  version: 4.0.2
+  resolution: "xtend@npm:4.0.2"
+  checksum: 10c0/366ae4783eec6100f8a02dff02ac907bf29f9a00b82ac0264b4d8b832ead18306797e283cf19de776538babfdcb2101375ec5646b59f08c52128ac4ab812ed0e
+  languageName: node
+  linkType: hard
+
 "xxhashjs@npm:~0.2.2":
   version: 0.2.2
   resolution: "xxhashjs@npm:0.2.2"

From ae0af9043c01c28d6f65496cdd62d28493548a06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 25 Oct 2024 01:02:59 +0200
Subject: [PATCH 59/81] fix: add sentry server side #337

---
 plugins/{sentry.ts => sentry.client.ts} |  7 +++--
 server/plugins/sentry.ts                | 42 +++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 2 deletions(-)
 rename plugins/{sentry.ts => sentry.client.ts} (81%)
 create mode 100644 server/plugins/sentry.ts

diff --git a/plugins/sentry.ts b/plugins/sentry.client.ts
similarity index 81%
rename from plugins/sentry.ts
rename to plugins/sentry.client.ts
index 7bbd91d5..5bf759e1 100644
--- a/plugins/sentry.ts
+++ b/plugins/sentry.client.ts
@@ -2,7 +2,7 @@ import * as Sentry from '@sentry/vue'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const router = useRouter()
-  const { sentry } = useRuntimeConfig().public
+  const { public: { sentry } } = useRuntimeConfig()
 
   if (!sentry.dsn)
     return
@@ -13,7 +13,10 @@ export default defineNuxtPlugin((nuxtApp) => {
     environment: sentry.environment,
     integrations: [
       Sentry.browserTracingIntegration({ router }),
-      Sentry.replayIntegration(),
+      Sentry.replayIntegration({
+        maskAllText: false,
+        blockAllMedia: false,
+      }),
     ],
 
     // Set tracesSampleRate to 1.0 to capture 100%
diff --git a/server/plugins/sentry.ts b/server/plugins/sentry.ts
new file mode 100644
index 00000000..2dc41a03
--- /dev/null
+++ b/server/plugins/sentry.ts
@@ -0,0 +1,42 @@
+import * as Sentry from '@sentry/node'
+import { H3Error } from 'h3'
+
+export default defineNitroPlugin((nitroApp) => {
+  const { public: { sentry } } = useRuntimeConfig()
+
+  // If no sentry DSN set, ignore and warn in the console
+  if (!sentry.dsn) {
+    console.warn('Sentry DSN not set, skipping Sentry initialization')
+    return
+  }
+
+  // Initialize Sentry
+  Sentry.init({
+    dsn: sentry.dsn,
+    environment: sentry.environment,
+    integrations: [],
+    // Performance Monitoring
+    tracesSampleRate: 1.0, // Change in production!
+    // Set sampling rate for profiling - this is relative to tracesSampleRate
+    profilesSampleRate: 1.0, // Change in production!
+  })
+
+  nitroApp.hooks.hook('error', (error) => {
+    // Do not handle 404s and 422s
+    if (error instanceof H3Error) {
+      if (error.statusCode === 404 || error.statusCode === 422) {
+        return
+      }
+    }
+
+    Sentry.captureException(error)
+  })
+
+  nitroApp.hooks.hook('request', (event) => {
+    event.context.$sentry = Sentry
+  })
+
+  nitroApp.hooks.hookOnce('close', async () => {
+    await Sentry.close(2000)
+  })
+})

From f92a72ce0b81e77f3356f13744b5171db70892bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 25 Oct 2024 01:45:01 +0200
Subject: [PATCH 60/81] fix: wrong hostname containing port #398

---
 server/routes/manifest.webmanifest.ts | 12 ++++--------
 server/routes/sitemap.xml.ts          | 18 +++++++-----------
 2 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/server/routes/manifest.webmanifest.ts b/server/routes/manifest.webmanifest.ts
index 4eac89a0..0a01f4b0 100644
--- a/server/routes/manifest.webmanifest.ts
+++ b/server/routes/manifest.webmanifest.ts
@@ -4,20 +4,16 @@ import { defineEventHandler } from 'h3'
 import { getSettings } from '../../lib/apiSettings'
 import { vidos } from '../../lib/config'
 import { vidoConfigResolve } from '../../plugins/vido-config'
-import type { VidoConfig } from '../../utils/types-config'
 
 async function manifest(
   req: IncomingMessage,
   res: ServerResponse<IncomingMessage>,
 ) {
-  const hostname = (req.headers['x-forwarded-host'] || req.headers.host) as
-    | string
-    | undefined
-  if (hostname) {
-    const vido: VidoConfig = vidoConfigResolve(hostname, vidos())
-    const fetchSettings = getSettings(vido)
+  const hostname = (req.headers['x-forwarded-host'] || req.headers.host)?.toString().split(':')[0]
 
-    const [settings] = await Promise.all([fetchSettings])
+  if (hostname) {
+    const vido = vidoConfigResolve(hostname, vidos())
+    const settings = await getSettings(vido)
 
     res.write(
       JSON.stringify({
diff --git a/server/routes/sitemap.xml.ts b/server/routes/sitemap.xml.ts
index 4d86f122..ae51e324 100644
--- a/server/routes/sitemap.xml.ts
+++ b/server/routes/sitemap.xml.ts
@@ -12,7 +12,6 @@ import { getMenu } from '~/lib/apiMenu'
 import { getPois } from '~/lib/apiPois'
 import { vidos } from '~/lib/config'
 import { vidoConfigResolve } from '~/plugins/vido-config'
-import type { VidoConfig } from '~/utils/types-config'
 
 // Import by node_modules because access to internal module content
 
@@ -20,19 +19,18 @@ async function manifest(
   req: IncomingMessage,
   res: ServerResponse<IncomingMessage>,
 ) {
-  const hostname = (req.headers['x-forwarded-host'] || req.headers.host) as
-    | string
-    | undefined
+  const hostname = (req.headers['x-forwarded-host'] || req.headers.host)?.toString()
+
   if (hostname) {
-    const vido: VidoConfig = vidoConfigResolve(hostname, vidos())
+    const vido = vidoConfigResolve(hostname.split(':')[0], vidos())
 
-    const menu = getMenu(vido).then(menuItem =>
-      menuItem
+    const menu = getMenu(vido)
+      .then(menuItem => menuItem
         .filter(menuItem => menuItem.category && menuItem.id)
         .map(menuCategory => ({
           url: `/${menuCategory.id}/`,
         })),
-    )
+      )
 
     const pois = getPois(vido).then(apiPois =>
       apiPois.features.map(poi => ({
@@ -41,9 +39,7 @@ async function manifest(
       })),
     )
 
-    const entries: SitemapEntry[] = (await Promise.all([menu, pois])).flat(
-      1,
-    )
+    const entries: SitemapEntry[] = (await Promise.all([menu, pois])).flat(1)
 
     entries.push({
       url: '/',

From ad5b825953f0c5e7884bbc2123393b8eb8405961 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 28 Oct 2024 11:26:32 +0100
Subject: [PATCH 61/81] fix: display bicycle style based on config #380

---
 components/MainMap/MapFeatures.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/MainMap/MapFeatures.vue b/components/MainMap/MapFeatures.vue
index eb1f047f..cae652a6 100644
--- a/components/MainMap/MapFeatures.vue
+++ b/components/MainMap/MapFeatures.vue
@@ -156,7 +156,12 @@ export default defineNuxtComponent({
     ...mapState(menuStore, ['isLoadingFeatures']),
 
     availableStyles(): MapStyleEnum[] {
-      return [MapStyleEnum.vector, MapStyleEnum.aerial, MapStyleEnum.bicycle]
+      const styles = [MapStyleEnum.vector, MapStyleEnum.aerial]
+
+      if (this.config!.BICYCLE_STYLE_URL)
+        styles.push(MapStyleEnum.bicycle)
+
+      return styles
     },
 
     // Workaround typing issue

From d5ef09dcd1601f1554465d0d08882a18ad86e803 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 22 Oct 2024 19:41:24 +0200
Subject: [PATCH 62/81] refactor: apply script setup style to openg hour #353

---
 components/Fields/Field.vue        |   3 +-
 components/Fields/OpeningHours.vue | 318 +++++++++++++----------------
 composables/useOpeningHours.ts     |  21 ++
 3 files changed, 160 insertions(+), 182 deletions(-)
 create mode 100644 composables/useOpeningHours.ts

diff --git a/components/Fields/Field.vue b/components/Fields/Field.vue
index 7eee6309..807af690 100644
--- a/components/Fields/Field.vue
+++ b/components/Fields/Field.vue
@@ -10,7 +10,8 @@ import DateRange, { isDateRangeEmpty } from '~/components/Fields/DateRange.vue'
 import Facebook from '~/components/Fields/Facebook.vue'
 import LinkedIn from '~/components/Fields/LinkedIn.vue'
 import Instagram from '~/components/Fields/Instagram.vue'
-import OpeningHours, { isOpeningHoursSupportedOsmTags } from '~/components/Fields/OpeningHours.vue'
+import OpeningHours from '~/components/Fields/OpeningHours.vue'
+import { isOpeningHoursSupportedOsmTags } from '~/composables/useOpeningHours'
 import Phone from '~/components/Fields/Phone.vue'
 import RoutesField from '~/components/Fields/RoutesField.vue'
 import Stars from '~/components/Fields/Stars.vue'
diff --git a/components/Fields/OpeningHours.vue b/components/Fields/OpeningHours.vue
index 7909a4fe..b178d148 100644
--- a/components/Fields/OpeningHours.vue
+++ b/components/Fields/OpeningHours.vue
@@ -1,193 +1,149 @@
-<script lang="ts">
+<script setup lang="ts">
 import type { optional_conf } from 'opening_hours'
 import OpeningHours from 'opening_hours'
-import { mapState } from 'pinia'
-import type { PropType } from 'vue'
-
-import { defineNuxtComponent } from '#app'
+import { storeToRefs } from 'pinia'
 import RelativeDate from '~/components/UI/RelativeDate.vue'
 import { PropertyTranslationsContextEnum } from '~/plugins/property-translations'
-import { siteStore } from '~/stores/site'
-
-const PointTime = [/^collection_times$/, /^service_times$/]
-
-// List of tag keys regex copied from opening_hours.js
-const SupportedOsmKeys = [
-  ...PointTime,
-  /^opening_hours$/,
-  /^opening_hours:.+/,
-  /.+:opening_hours$/,
-  /.+:opening_hours:.+/,
-  /^smoking_hours$/,
-  /^happy_hours$/,
-  /^lit$/,
-]
-
-function isSupportedOsmTags(keys: RegExp[], key: string): boolean {
-  return keys.some(regexKey => regexKey.test(key))
-}
-
-export function isOpeningHoursSupportedOsmTags(key: string): boolean {
-  return isSupportedOsmTags(SupportedOsmKeys, key)
-}
-
-export default defineNuxtComponent({
-  components: {
-    RelativeDate,
-  },
-
-  props: {
-    context: {
-      type: String as PropType<PropertyTranslationsContextEnum>,
-      required: true,
-    },
-    tagKey: {
-      type: String as PropType<string>,
-      required: true,
-    },
-    openingHours: {
-      type: String as PropType<string>,
-      required: true,
-    },
-    baseDate: {
-      type: Date as PropType<Date>,
-      default: () => new Date(),
-    },
-  },
-
-  computed: {
-    ...mapState(siteStore, ['locale', 'settings']),
+import { siteStore as useSiteStore } from '~/stores/site'
+import { PointTime, isSupportedOsmTags } from '~/composables/useOpeningHours'
+
+//
+// Props
+//
+const props = withDefaults(defineProps<{
+  baseDate?: Date
+  context: PropertyTranslationsContextEnum
+  openingHours: string
+  tagKey: string
+}>(), {
+  baseDate: () => new Date(),
+})
 
-    isPointTime(): boolean {
-      return isSupportedOsmTags(PointTime, this.tagKey)
-    },
+//
+// Composables
+//
+const { locale, settings } = storeToRefs(useSiteStore())
+const { t } = useI18n()
 
-    comment() {
-      const oh = this.OpeningHoursFactory()
-      return oh?.getComment(this.baseDate)
-    },
+//
+// Computed
+//
+const isPointTime = computed(() => isSupportedOsmTags(PointTime, props.tagKey))
 
-    isCompact(): boolean {
-      return this.context === PropertyTranslationsContextEnum.Card
-    },
+const comment = computed(() => {
+  const oh = OpeningHoursFactory()
+  return oh?.getComment(props.baseDate)
+})
 
-    pretty(): [string | undefined, string[]][] | undefined {
-      const oh = this.OpeningHoursFactory()
-      if (oh) {
-        let prettyString
-        try {
-          prettyString = oh
-            .prettifyValue({
-              // @ts-expect-error: Fix typings
-              conf: {
-                locale: this.locale || 'en',
-                rule_sep_string: '\n',
-                print_semicolon: false,
-              },
-            })
-            .replace(/(^\w|\s\w)/g, c => c.toUpperCase())
-            .split('\n')
-        }
-        catch (e) {
-          return undefined
-        }
-        if (!this.variable) {
-          return [[undefined, prettyString]]
-        }
-        else {
-          const ret: [string | undefined, string[]][] = []
-          // Stable group by month
-          prettyString
-            .map(
-              row =>
-                (row.includes(': ')
-                  ? [
-                      row.slice(0, row.indexOf(': ')),
-                      row.slice(row.indexOf(': ') + 1 + 1),
-                    ]
-                  : [undefined, row]) as [string | undefined, string],
-            )
-            .forEach(([month, date]) => {
-              const i = ret.findIndex(r => r[0] === month)
-              if (i >= 0)
-                ret[i][1].push(date)
-              else
-                ret.push([month, [date]])
-            })
-          return ret
-        }
-      }
-      else {
-        return undefined
-      }
-    },
+const isCompact = computed(() => props.context === PropertyTranslationsContextEnum.Card)
 
-    variable(): boolean {
-      const oh = this.OpeningHoursFactory()
-      try {
-        return !oh?.isWeekStable()
-      }
-      catch (e) {
-        return false
-      }
-    },
+const variable = computed(() => {
+  const oh = OpeningHoursFactory()
+  try {
+    return !oh?.isWeekStable()
+  }
+  catch (e) {
+    return false
+  }
+})
 
-    nextChange():
-      | undefined
-      | {
-        type: 'opened' | 'openAt'
-        nextChange: Date
-      } {
-      const oh = this.OpeningHoursFactory()
-      if (oh) {
-        try {
-          const nextChange = oh.getNextChange(this.baseDate)
-          if (nextChange) {
-            return {
-              type: oh.getState(this.baseDate) ? 'opened' : 'openAt',
-              nextChange,
-            }
-          }
-        }
-        catch (e) {
-          return undefined
-        }
-      }
+const pretty = computed((): [string | undefined, string[]][] | undefined => {
+  const oh = OpeningHoursFactory()
+  if (oh) {
+    let prettyString
+    try {
+      prettyString = oh
+        .prettifyValue({
+          // @ts-expect-error: Fix typings
+          conf: {
+            locale: locale.value || 'en',
+            rule_sep_string: '\n',
+            print_semicolon: false,
+          },
+        })
+        .replace(/(^\w|\s\w)/g, (c: any) => c.toUpperCase())
+        .split('\n')
+    }
+    catch (e) {
       return undefined
-    },
-  },
+    }
+    if (!variable.value) {
+      return [[undefined, prettyString]]
+    }
+    else {
+      const ret: [string | undefined, string[]][] = []
+      // Stable group by month
+      prettyString
+        .map((row: any) => (
+          row.includes(': ')
+            ? [row.slice(0, row.indexOf(': ')), row.slice(row.indexOf(': ') + 1 + 1)]
+            : [undefined, row]
+        ) as [string | undefined, string])
+        .forEach(([month, date]: any) => {
+          const i = ret.findIndex(r => r[0] === month)
+          if (i >= 0)
+            ret[i][1].push(date)
+          else
+            ret.push([month, [date]])
+        })
+      return ret
+    }
+  }
+  else {
+    return undefined
+  }
+})
 
-  methods: {
-    OpeningHoursFactory(): OpeningHours | undefined {
-      try {
-        // https://github.com/opening-hours/opening_hours.js/issues/428
-        // @ts-expect-error: Fix typings
-        const optionalConf: optional_conf = {
-          tag_key: this.tagKey,
+const nextChange = computed((): { type: 'opened' | 'openAt', nextChange: Date } | undefined => {
+  const oh = OpeningHoursFactory()
+  if (oh) {
+    try {
+      const nextChange = oh.getNextChange(props.baseDate)
+      if (nextChange) {
+        return {
+          type: oh.getState(props.baseDate) ? 'opened' : 'openAt',
+          nextChange,
         }
-        return new OpeningHours(
-          this.openingHours,
-          {
-            lon:
-              (this.settings!.bbox_line.coordinates[0][1]
-              + this.settings!.bbox_line.coordinates[1][1])
-              / 2,
-            lat:
-              (this.settings!.bbox_line.coordinates[0][0]
-              + this.settings!.bbox_line.coordinates[1][0])
-              / 2,
-            address: {
-              country_code: this.settings!.default_country,
-              state: this.settings!.default_country_state_opening_hours,
-            },
-          },
-          optionalConf,
-        )
       }
-      catch (e) {}
-    },
-  },
+    }
+    catch (e) {
+      return undefined
+    }
+  }
+  return undefined
 })
+
+//
+// Methods
+//
+function OpeningHoursFactory(): OpeningHours | undefined {
+  try {
+    // https://github.com/opening-hours/opening_hours.js/issues/428
+    // @ts-expect-error: Fix typings
+    const optionalConf: optional_conf = {
+      tag_key: props.tagKey,
+    }
+    return new OpeningHours(
+      props.openingHours,
+      {
+        lon:
+          (settings.value!.bbox_line.coordinates[0][1]
+          + settings.value!.bbox_line.coordinates[1][1])
+          / 2,
+        lat:
+          (settings.value!.bbox_line.coordinates[0][0]
+          + settings.value!.bbox_line.coordinates[1][0])
+          / 2,
+        address: {
+          country_code: settings.value!.default_country,
+          state: settings.value!.default_country_state_opening_hours,
+        },
+      },
+      optionalConf,
+    )
+  }
+  catch (e) {}
+}
 </script>
 
 <template>
@@ -195,7 +151,7 @@ export default defineNuxtComponent({
     <span hidden>{{ openingHours }}</span>
     <template v-if="nextChange">
       <p v-if="isPointTime" id="next" class="tw-text-emerald-500">
-        {{ $t('openingHours.next') }}
+        {{ t('openingHours.next') }}
         <RelativeDate :date="nextChange.nextChange" />
       </p>
       <template v-else>
@@ -204,10 +160,10 @@ export default defineNuxtComponent({
           id="opened"
           class="tw-text-emerald-500"
         >
-          {{ $t('openingHours.opened') }}
+          {{ t('openingHours.opened') }}
           <template v-if="nextChange.nextChange">
             -
-            {{ $t('openingHours.closeAt') }}
+            {{ t('openingHours.closeAt') }}
             <RelativeDate :date="nextChange.nextChange" />
           </template>
         </p>
@@ -216,10 +172,10 @@ export default defineNuxtComponent({
           id="openAt"
           class="tw-text-red-500"
         >
-          {{ $t('openingHours.closed') }}
+          {{ t('openingHours.closed') }}
           <template v-if="nextChange.nextChange">
             -
-            {{ $t('openingHours.openAt') }}
+            {{ t('openingHours.openAt') }}
             <RelativeDate :date="nextChange.nextChange" />
           </template>
         </p>
@@ -246,7 +202,7 @@ export default defineNuxtComponent({
         </li>
       </ul>
       <template v-if="variable">
-        <p>{{ $t('openingHours.variableWeek') }}</p>
+        <p>{{ t('openingHours.variableWeek') }}</p>
       </template>
     </template>
     <template v-if="isCompact && comment">
diff --git a/composables/useOpeningHours.ts b/composables/useOpeningHours.ts
new file mode 100644
index 00000000..8948a78b
--- /dev/null
+++ b/composables/useOpeningHours.ts
@@ -0,0 +1,21 @@
+export const PointTime = [/^collection_times$/, /^service_times$/]
+
+// List of tag keys regex copied from opening_hours.js
+const SupportedOsmKeys = [
+  ...PointTime,
+  /^opening_hours$/,
+  /^opening_hours:.+/,
+  /.+:opening_hours$/,
+  /.+:opening_hours:.+/,
+  /^smoking_hours$/,
+  /^happy_hours$/,
+  /^lit$/,
+]
+
+export function isSupportedOsmTags(keys: RegExp[], key: string): boolean {
+  return keys.some(regexKey => regexKey.test(key))
+}
+
+export function isOpeningHoursSupportedOsmTags(key: string): boolean {
+  return isSupportedOsmTags(SupportedOsmKeys, key)
+}

From 563208b4d62f9736f66117ab04549ed35826c15c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Rodrigo?= <fred.rodrigo@gmail.com>
Date: Thu, 31 Oct 2024 12:46:22 +0100
Subject: [PATCH 63/81] Fix Sentry env var for Nuxt (#414)

---
 .env.sample        | 4 ++--
 docker-compose.yml | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.env.sample b/.env.sample
index 73338d8d..5950dd0f 100644
--- a/.env.sample
+++ b/.env.sample
@@ -1,3 +1,3 @@
 CONFIG=vidos-config.json
-NUXT_PUBLIC_SENTRY_DSN=
-NUXT_PUBLIC_SENTRY_ENVIRONMENT=production
+SENTRY_DSN=
+SENTRY_ENVIRONMENT=production
diff --git a/docker-compose.yml b/docker-compose.yml
index c844c6fc..bfac80e7 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -14,4 +14,5 @@ services:
       - ./vidos-config.json:/usr/src/app/vidos-config.json
     environment:
       - CONFIG=/usr/src/app/vidos-config.json
-      - SENTRY_DSN=
+      - NUXT_PUBLIC_SENTRY_DSN=${SENTRY_DSN}
+      - NUXT_PUBLIC_SENTRY_ENVIRONMENT=${SENTRY_ENVIRONMENT}

From f9100bbd3bbb0ebface62fc0f4c37cb3870dcee1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 4 Nov 2024 11:10:48 +0100
Subject: [PATCH 64/81] chore: rollback PoiCard closing on map click #401

---
 components/MainMap/MapFeatures.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/MainMap/MapFeatures.vue b/components/MainMap/MapFeatures.vue
index cae652a6..ea5268fd 100644
--- a/components/MainMap/MapFeatures.vue
+++ b/components/MainMap/MapFeatures.vue
@@ -306,6 +306,9 @@ export default defineNuxtComponent({
         this.updateSelectedFeature(vectorTilesPoi2ApiPoi(selectedFeatures[0]), true)
         this.showSelectedFeature()
       }
+      else {
+        this.updateSelectedFeature(null)
+      }
     },
 
     updateSelectedFeature(feature: ApiPoi | null, fetch = false) {

From 90d043a0b486f822404fa86fe052d49289f4bb36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 4 Nov 2024 11:19:30 +0100
Subject: [PATCH 65/81] chore: hide isochrone feature on mobile #401

---
 components/PoisCard/PoiCardContent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/PoisCard/PoiCardContent.vue b/components/PoisCard/PoiCardContent.vue
index a4eaf504..2b4941e5 100644
--- a/components/PoisCard/PoiCardContent.vue
+++ b/components/PoisCard/PoiCardContent.vue
@@ -243,7 +243,7 @@ function trackingPopupEvent(event: 'details' | 'route' | 'explore' | 'favorite'
       </a>
 
       <IsochroneTrigger
-        v-if="isochroneEnabled"
+        v-if="isochroneEnabled && !device.smallScreen"
         class="tw-flex tw-flex-col tw-items-center tw-flex-1 tw-h-full tw-p-2 tw-space-y-2 tw-rounded-lg hover:tw-bg-zinc-100"
         :feature="poi"
       >

From e0f00d7b3be5d7109417b03f72d49985336b8deb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 4 Nov 2024 15:02:56 +0100
Subject: [PATCH 66/81] chore: remove isochrone watcher #401

---
 composables/useIsochrone.ts | 21 +++------------------
 1 file changed, 3 insertions(+), 18 deletions(-)

diff --git a/composables/useIsochrone.ts b/composables/useIsochrone.ts
index aea2e159..742bcb58 100644
--- a/composables/useIsochrone.ts
+++ b/composables/useIsochrone.ts
@@ -26,7 +26,6 @@ export default function useIsochrone() {
   // Composables
   //
   const { config } = useSiteStore()
-  const mapStore = useMapStore()
   // Get feature flag for Vido config
   const enabled = (config?.OPEN_ROUTE_SERVICE_KEY && config?.ISOCHRONE) || false
   const { t, locale } = useI18n()
@@ -37,7 +36,6 @@ export default function useIsochrone() {
   // Data
   //
   const isOverlayOpen = ref(false)
-  const sources = ref<string[]>([])
   const layers = ref<string[]>([])
   const sourceName = 'isochrone'
   const colorExpression = [
@@ -59,8 +57,8 @@ export default function useIsochrone() {
     layers.value.forEach(layerId => map.value.removeLayer(layerId))
     layers.value = []
 
-    sources.value.forEach(sourceId => map.value.removeSource(sourceId))
-    sources.value = []
+    if (map.value.getSource(sourceName))
+      map.value.removeSource(sourceName)
   }
 
   const render = (data: ORSData) => {
@@ -130,7 +128,6 @@ export default function useIsochrone() {
         },
       })
 
-      sources.value.push(sourceName)
       layers.value.push(`${sourceName}-fill`)
       layers.value.push(`${sourceName}-line`)
       layers.value.push(`${sourceName}-symbol`)
@@ -173,23 +170,11 @@ export default function useIsochrone() {
       render(data.value)
   }
 
-  //
-  // Subscribers
-  //
-  mapStore.$onAction(({ name, after }) => {
-    if (name === 'setSelectedFeature') {
-      after((result) => {
-        if (result === undefined) {
-          reset()
-        }
-      })
-    }
-  })
-
   //
   // Watcher
   //
   watch(locale, (newLocale, oldLocale) => {
+    console.log('watch', map.value.getLayer(`${sourceName}-symbol`))
     if (newLocale !== oldLocale && map.value.getLayer(`${sourceName}-symbol`)) {
       // Update symbols translation on locale change
       map.value.setLayoutProperty(`${sourceName}-symbol`, 'text-field', [

From 63efbd10e352737bb70337733f3e7cdab1cbcac3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 4 Nov 2024 16:54:45 +0100
Subject: [PATCH 67/81] fix: fit isochrone to map bounds #401

---
 components/Map/MapBase.vue  | 10 +++++++++-
 composables/useIsochrone.ts |  6 ++++--
 stores/map.ts               |  4 +++-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/components/Map/MapBase.vue b/components/Map/MapBase.vue
index a9da845f..2358eb38 100644
--- a/components/Map/MapBase.vue
+++ b/components/Map/MapBase.vue
@@ -106,9 +106,10 @@ export default defineNuxtComponent({
   },
 
   setup() {
-    const { selectedFeature } = storeToRefs(useMapStore())
+    const { boundOptions, selectedFeature } = storeToRefs(useMapStore())
 
     return {
+      boundOptions,
       selectedFeature,
     }
   },
@@ -136,6 +137,13 @@ export default defineNuxtComponent({
   },
 
   watch: {
+    fitBoundsPaddingOptions: {
+      handler() {
+        this.boundOptions = this.fitBoundsOptions()
+      },
+      immediate: true,
+    },
+
     offMapAttribution() {
       this.$nextTick(() => this.map?.resize())
     },
diff --git a/composables/useIsochrone.ts b/composables/useIsochrone.ts
index 742bcb58..f48828f7 100644
--- a/composables/useIsochrone.ts
+++ b/composables/useIsochrone.ts
@@ -1,5 +1,6 @@
 import type { ExpressionSpecification, LngLatBoundsLike, Map } from 'maplibre-gl'
 import type { FeatureCollection, GeoJsonProperties, Geometry } from 'geojson'
+import { storeToRefs } from 'pinia'
 import { siteStore as useSiteStore } from '~/stores/site'
 import { mapStore as useMapStore } from '~/stores/map'
 
@@ -31,6 +32,7 @@ export default function useIsochrone() {
   const { t, locale } = useI18n()
   const map = useState<Map>('map-instance')
   const profile = useState('isochrone-profile')
+  const { boundOptions } = storeToRefs(useMapStore())
 
   //
   // Data
@@ -54,6 +56,7 @@ export default function useIsochrone() {
   // Methods
   //
   const reset = () => {
+    // FIXME: Issue with HMR, layers is empty but layers and source are still present on map
     layers.value.forEach(layerId => map.value.removeLayer(layerId))
     layers.value = []
 
@@ -68,7 +71,7 @@ export default function useIsochrone() {
       profile.value = data.metadata.query.profile
 
       // Apply Isochrone bbox
-      map.value.fitBounds(data.bbox)
+      map.value.fitBounds(data.bbox, boundOptions?.value)
 
       // Add Isochrone data source
       map.value.addSource(sourceName, {
@@ -174,7 +177,6 @@ export default function useIsochrone() {
   // Watcher
   //
   watch(locale, (newLocale, oldLocale) => {
-    console.log('watch', map.value.getLayer(`${sourceName}-symbol`))
     if (newLocale !== oldLocale && map.value.getLayer(`${sourceName}-symbol`)) {
       // Update symbols translation on locale change
       map.value.setLayoutProperty(`${sourceName}-symbol`, 'text-field', [
diff --git a/stores/map.ts b/stores/map.ts
index af03b478..ebe5f9c3 100644
--- a/stores/map.ts
+++ b/stores/map.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { type LngLatLike, type Marker, Point } from 'maplibre-gl'
+import { type FitBoundsOptions, type LngLatLike, type Marker, Point } from 'maplibre-gl'
 import type { TeritorioCluster } from '@teritorio/maplibre-gl-teritorio-cluster'
 import type { ApiPoi, ApiPoiProperties } from '~/lib/apiPois'
 import type { LatLng, Pitch } from '~/utils/types'
@@ -7,6 +7,7 @@ import { Mode } from '~/utils/types'
 import { pinMarkerRender } from '~/lib/clusters'
 
 interface State {
+  boundOptions?: FitBoundsOptions
   center: LatLng
   mode: Mode
   pinMarker: Marker | null
@@ -17,6 +18,7 @@ interface State {
 
 export const mapStore = defineStore('map', {
   state: (): State => ({
+    boundOptions: undefined,
     center: { lng: 0, lat: 0 },
     mode: Mode.BROWSER,
     pinMarker: null,

From 69d007bd5b344de5b133e056e5e1bcd636b0e191 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 4 Nov 2024 10:42:45 +0100
Subject: [PATCH 68/81] chore: upgrade cluster plugin #417

---
 components/MainMap/MapFeatures.vue |  1 +
 components/Map/MapBase.vue         |  4 +++-
 components/Map/MapPois.vue         |  1 +
 package.json                       |  2 +-
 yarn.lock                          | 34 +++++++++++++++++++++++++-----
 5 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/components/MainMap/MapFeatures.vue b/components/MainMap/MapFeatures.vue
index ea5268fd..62cb0a46 100644
--- a/components/MainMap/MapFeatures.vue
+++ b/components/MainMap/MapFeatures.vue
@@ -245,6 +245,7 @@ export default defineNuxtComponent({
 
       this.teritorioCluster = new TeritorioCluster(map, POI_SOURCE, {
         clusterRenderFn: clusterRender,
+        fitBoundsOptions: this.mapBase?.fitBoundsOptions(),
         initialFeature: this.selectedFeature as unknown as MapGeoJSONFeature,
         markerRenderFn: markerRender,
         markerSize: 32,
diff --git a/components/Map/MapBase.vue b/components/Map/MapBase.vue
index 2358eb38..d3ce6c2e 100644
--- a/components/Map/MapBase.vue
+++ b/components/Map/MapBase.vue
@@ -106,11 +106,12 @@ export default defineNuxtComponent({
   },
 
   setup() {
-    const { boundOptions, selectedFeature } = storeToRefs(useMapStore())
+    const { boundOptions, selectedFeature, teritorioCluster } = storeToRefs(useMapStore())
 
     return {
       boundOptions,
       selectedFeature,
+      teritorioCluster,
     }
   },
 
@@ -140,6 +141,7 @@ export default defineNuxtComponent({
     fitBoundsPaddingOptions: {
       handler() {
         this.boundOptions = this.fitBoundsOptions()
+        this.teritorioCluster?.setBoundsOptions(this.boundOptions)
       },
       immediate: true,
     },
diff --git a/components/Map/MapPois.vue b/components/Map/MapPois.vue
index e78ac3b1..8a0f62cf 100644
--- a/components/Map/MapPois.vue
+++ b/components/Map/MapPois.vue
@@ -102,6 +102,7 @@ export default defineNuxtComponent({
 
       this.teritorioCluster = new TeritorioCluster(map, POI_SOURCE, {
         clusterRenderFn: clusterRender,
+        fitBoundsOptions: this.mapBase?.fitBoundsOptions(),
         markerRenderFn: markerRender,
         markerSize: 32,
         pinMarkerRenderFn: pinMarkerRender,
diff --git a/package.json b/package.json
index 44e57d7c..84240cd6 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "@sentry/vue": "^8.35.0",
     "@tailwindcss/typography": "^0.5.9",
     "@teritorio/map": "^0.12.7",
-    "@teritorio/maplibre-gl-teritorio-cluster": "^0.0.8",
+    "@teritorio/maplibre-gl-teritorio-cluster": "^0.0.10",
     "@teritorio/openmaptiles-gl-language": "^1.5.4",
     "@turf/boolean-intersects": "^6.5.0",
     "@turf/mask": "^7.1.0",
diff --git a/yarn.lock b/yarn.lock
index a9e63563..2858679b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3985,12 +3985,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@teritorio/maplibre-gl-teritorio-cluster@npm:^0.0.8":
-  version: 0.0.8
-  resolution: "@teritorio/maplibre-gl-teritorio-cluster@npm:0.0.8"
+"@teritorio/maplibre-gl-teritorio-cluster@npm:^0.0.10":
+  version: 0.0.10
+  resolution: "@teritorio/maplibre-gl-teritorio-cluster@npm:0.0.10"
   dependencies:
+    "@turf/bbox": "npm:^7.1.0"
+    "@turf/helpers": "npm:^7.1.0"
     maplibre-gl: "npm:^4.7.0"
-  checksum: 10c0/f87519ce64cc49341678b18cbc143ca3b92152d039fd2666ff0e060e985a3cdbeea6979da3fab666c49c8a157b2c7c58e7db1b97bfc2354bddb66e0e82355e2c
+  checksum: 10c0/6c248337ea92e60659e1daf85a5891770a68551af455ff81562444301aa7e4c3ac58ea91af1cd30a5eba09f6b8cfc3484fb1451d2ffe8843740d7b340d299eec
   languageName: node
   linkType: hard
 
@@ -4030,7 +4032,7 @@ __metadata:
     "@tailwindcss/typography": "npm:^0.5.9"
     "@teritorio/font-teritorio": "npm:^2.5.0"
     "@teritorio/map": "npm:^0.12.7"
-    "@teritorio/maplibre-gl-teritorio-cluster": "npm:^0.0.8"
+    "@teritorio/maplibre-gl-teritorio-cluster": "npm:^0.0.10"
     "@teritorio/openmaptiles-gl-language": "npm:^1.5.4"
     "@turf/boolean-intersects": "npm:^6.5.0"
     "@turf/mask": "npm:^7.1.0"
@@ -4137,6 +4139,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@turf/bbox@npm:^7.1.0":
+  version: 7.1.0
+  resolution: "@turf/bbox@npm:7.1.0"
+  dependencies:
+    "@turf/helpers": "npm:^7.1.0"
+    "@turf/meta": "npm:^7.1.0"
+    "@types/geojson": "npm:^7946.0.10"
+    tslib: "npm:^2.6.2"
+  checksum: 10c0/901ed437ad1241b1c7cf76ee3f1dd998b32a59647074216d076a62080281693cc3f1d66d1dedd02fd5617ea57434ec059843bcc275d20f667019f3e1f378b05d
+  languageName: node
+  linkType: hard
+
 "@turf/boolean-disjoint@npm:^6.5.0":
   version: 6.5.0
   resolution: "@turf/boolean-disjoint@npm:6.5.0"
@@ -4254,6 +4268,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@turf/meta@npm:^7.1.0":
+  version: 7.1.0
+  resolution: "@turf/meta@npm:7.1.0"
+  dependencies:
+    "@turf/helpers": "npm:^7.1.0"
+    "@types/geojson": "npm:^7946.0.10"
+  checksum: 10c0/c7aa77ddb28ef5068b031c1b422d2d5dc1df51975f727be42e2d8d500a026a2e667242d6aa06453f757cbd5ead2db0ba6b9a5d2fcf5ab496574cd4c0ae4fe325
+  languageName: node
+  linkType: hard
+
 "@turf/polygon-to-line@npm:^6.5.0":
   version: 6.5.0
   resolution: "@turf/polygon-to-line@npm:6.5.0"

From 1284f90004df0ef0ee23e2e562f0d59535f945c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 5 Nov 2024 10:49:49 +0100
Subject: [PATCH 69/81] fix: remove background-color on field #415

---
 components/Fields/Field.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Fields/Field.vue b/components/Fields/Field.vue
index 807af690..f5d164b0 100644
--- a/components/Fields/Field.vue
+++ b/components/Fields/Field.vue
@@ -314,7 +314,7 @@ export default defineNuxtComponent({
         "
         :href="properties[field.field]"
         class="d-inline-block pa-2 rounded-lg"
-        :style="{ backgroundColor: colorfill, color: '#ffffff' }"
+        :style="{ color: '#ffffff' }"
       >
         <FontAwesomeIcon icon="arrow-circle-down" />
         {{ fieldTranslateK(field.field) }}

From d2f9f35792de64acd06934369524d9aeabf6b385 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Wed, 6 Nov 2024 13:57:38 +0100
Subject: [PATCH 70/81] feat: create feature composable #413

---
 composables/useFeature.ts | 94 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 composables/useFeature.ts

diff --git a/composables/useFeature.ts b/composables/useFeature.ts
new file mode 100644
index 00000000..c875b19c
--- /dev/null
+++ b/composables/useFeature.ts
@@ -0,0 +1,94 @@
+import type { ApiPoi } from '~/lib/apiPois'
+
+type LabelType = 'details' | 'popup'
+interface Options {
+  type?: LabelType
+}
+
+export default function useFeature(feature: Ref<ApiPoi>, options: Options = {
+  type: undefined,
+}) {
+  //
+  // Composables
+  //
+  const { locale, fallbackLocale } = useI18n()
+  //
+  // Data
+  //
+  const fallback = fallbackLocale.value.toString()
+  const { type } = options
+
+  //
+  // Computed
+  //
+  const categoryName = computed(() => {
+    switch (type) {
+      case 'details':
+        return getDetailsClassLabel()
+      case 'popup':
+        return getPopupClassLabel()
+      default:
+        return getClassLabel(locale.value)
+    }
+  })
+
+  const name = computed(() => {
+    switch (type) {
+      case 'details':
+        return feature.value.properties.name ?? getDetailsClassLabel()
+      case 'popup':
+        return feature.value.properties.name ?? getPopupClassLabel()
+      default:
+        return feature.value.properties.name ?? getClassLabel(locale.value)
+    }
+  })
+
+  const seoTitle = computed(() => categoryName.value ? `${categoryName.value} - ${name.value}` : name.value)
+
+  //
+  // Methods
+  //
+  function getClassLabel(lang: string) {
+    return feature.value.properties.editorial?.class_label && feature.value.properties.editorial.class_label[lang]
+      ? feature.value.properties.editorial.class_label[lang]
+      : undefined
+  }
+
+  function getDetailsClassLabel() {
+    if (!feature.value.properties.editorial)
+      return undefined
+
+    if (feature.value.properties.editorial.class_label_details && feature.value.properties.editorial.class_label_details[locale.value])
+      return feature.value.properties.editorial.class_label_details[locale.value]
+
+    if (getClassLabel(locale.value))
+      return getClassLabel(locale.value)
+
+    if (feature.value.properties.editorial.class_label_details && feature.value.properties.editorial.class_label_details[fallback])
+      return feature.value.properties.editorial.class_label_details[fallback]
+
+    return getClassLabel(fallback)
+  }
+
+  function getPopupClassLabel() {
+    if (!feature.value.properties.editorial)
+      return undefined
+
+    if (feature.value.properties.editorial.class_label_popup && feature.value.properties.editorial.class_label_popup[locale.value])
+      return feature.value.properties.editorial.class_label_popup[locale.value]
+
+    if (getClassLabel(locale.value))
+      return getClassLabel(locale.value)
+
+    if (feature.value.properties.editorial.class_label_popup && feature.value.properties.editorial.class_label_popup[fallback])
+      return feature.value.properties.editorial.class_label_popup[fallback]
+
+    return getClassLabel(fallback)
+  }
+
+  return {
+    featureName: name,
+    featureCategoryName: categoryName,
+    featureSeoTitle: seoTitle,
+  }
+}

From 75552d777ee023e5f71028c7c24b65fe378504d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Wed, 6 Nov 2024 15:49:58 +0100
Subject: [PATCH 71/81] chore: use feature composable in components #413

---
 components/PoisCard/PoiCardContent.vue      | 19 +++++----------
 components/PoisCard/PoiCardLight.vue        |  8 +++++--
 components/PoisDetails/PoiDetails.story.vue |  4 +++-
 components/Search/Search.vue                | 17 +++++++-------
 pages/poi/[id]/details.vue                  | 26 ++++++++-------------
 5 files changed, 33 insertions(+), 41 deletions(-)

diff --git a/components/PoisCard/PoiCardContent.vue b/components/PoisCard/PoiCardContent.vue
index 2b4941e5..ec17f41f 100644
--- a/components/PoisCard/PoiCardContent.vue
+++ b/components/PoisCard/PoiCardContent.vue
@@ -43,6 +43,7 @@ const { contribMode, isContribEligible, getContributorFields } = useContrib()
 const { isModeExplorer } = storeToRefs(useMapStore())
 const device = useDevice()
 const { enabled: isochroneEnabled } = useIsochrone()
+const { featureName, featureCategoryName } = useFeature(toRef(() => props.poi), { type: 'popup' })
 
 //
 // Data
@@ -67,10 +68,6 @@ const isFavorite = computed(() => {
   return favoritesIds.value.includes(id.value) || favoriteAddresses.value.has(id.value.toString())
 })
 
-const name = computed(() => {
-  return props.poi.properties.name || props.poi.properties.editorial?.class_label_popup?.fr || props.poi.properties.editorial?.class_label?.fr
-})
-
 const colorFill = computed(() => {
   return props.poi.properties.display?.color_fill || 'black'
 })
@@ -83,10 +80,6 @@ const icon = computed(() => {
   return props.poi.properties.display?.icon
 })
 
-const category = computed(() => {
-  return props.poi.properties.editorial?.class_label_popup?.fr || props.poi.properties.editorial?.class_label?.fr
-})
-
 const description = computed(() => {
   return props.poi.properties.description
 })
@@ -145,8 +138,8 @@ function trackingPopupEvent(event: 'details' | 'route' | 'explore' | 'favorite'
     type: 'popup_event',
     event,
     poiId: id.value,
-    category: category.value || '',
-    title: props.poi.properties?.name,
+    category: featureCategoryName.value || '',
+    title: featureName.value,
   })
 }
 </script>
@@ -155,11 +148,11 @@ function trackingPopupEvent(event: 'details' | 'route' | 'explore' | 'favorite'
   <div>
     <div class="tw-flex tw-items-center tw-justify-between tw-shrink-0">
       <h2
-        v-if="name"
+        v-if="featureName"
         class="tw-block tw-text-xl tw-font-semibold tw-leading-tight"
         :style="`color:${colorLine}`"
       >
-        {{ name }}
+        {{ featureName }}
       </h2>
 
       <client-only>
@@ -205,7 +198,7 @@ function trackingPopupEvent(event: 'details' | 'route' | 'explore' | 'favorite'
         :use-native-alignment="false"
       />
 
-      {{ category }}
+      {{ featureCategoryName }}
     </div>
 
     <p
diff --git a/components/PoisCard/PoiCardLight.vue b/components/PoisCard/PoiCardLight.vue
index e9de3a52..4481be4f 100644
--- a/components/PoisCard/PoiCardLight.vue
+++ b/components/PoisCard/PoiCardLight.vue
@@ -14,12 +14,16 @@ const props = withDefaults(defineProps<{
   notebook: false,
 })
 
+//
+// Composables
+//
+const { featureName } = useFeature(toRef(() => props.poi), { type: 'popup' })
+
 //
 // Data
 //
 const colorFill = ref(props.poi.properties.display?.color_fill || 'black')
 const colorLine = ref(props.poi.properties.display?.color_line || 'black')
-const name = ref(props.poi.properties.name || props.poi.properties.editorial?.class_label_popup?.fr || props.poi.properties.editorial?.class_label?.fr)
 const websiteDetails = ref(props.poi.properties.editorial && props.poi.properties.editorial['website:details'])
 </script>
 
@@ -42,7 +46,7 @@ const websiteDetails = ref(props.poi.properties.editorial && props.poi.propertie
             :image="undefined"
             :text="poi.properties.display?.text"
           />
-          {{ name }}
+          {{ featureName }}
         </h3>
 
         <a
diff --git a/components/PoisDetails/PoiDetails.story.vue b/components/PoisDetails/PoiDetails.story.vue
index 0b8a9c98..c2ec54a6 100644
--- a/components/PoisDetails/PoiDetails.story.vue
+++ b/components/PoisDetails/PoiDetails.story.vue
@@ -14,10 +14,12 @@ const defaultProps = {
   poi: poisDeps.features[0] as ApiPoi,
 }
 
+const { featureSeoTitle } = useFeature(toRef(defaultProps.poi), { type: 'details' })
+
 const props = {
   Default: {
     ...defaultProps,
-    pageTitle: `${defaultProps.poi.properties.classe} - ${defaultProps.poi.properties.name}`,
+    pageTitle: featureSeoTitle.value || '',
   },
 }
 </script>
diff --git a/components/Search/Search.vue b/components/Search/Search.vue
index 4c0dd1f9..bb0068ee 100644
--- a/components/Search/Search.vue
+++ b/components/Search/Search.vue
@@ -83,17 +83,16 @@ export default defineNuxtComponent({
     itemsCartocode(): SearchResult[] {
       const v = this.searchCartocodeResult
       if (v && v.properties.metadata?.id) {
-        const label
-          = v.properties.name || v.properties.editorial?.class_label?.fr
-        if (label) {
-          return [
-            {
-              id: v.properties.metadata?.id,
-              label,
-            },
-          ]
+        const { featureName } = useFeature(toRef(v), { type: 'popup' })
+
+        if (featureName.value) {
+          return [{
+            id: v.properties.metadata?.id,
+            label: featureName.value,
+          }]
         }
       }
+
       return []
     },
 
diff --git a/pages/poi/[id]/details.vue b/pages/poi/[id]/details.vue
index b63bda42..0ceaaeca 100644
--- a/pages/poi/[id]/details.vue
+++ b/pages/poi/[id]/details.vue
@@ -31,7 +31,6 @@ const { $trackingInit } = useNuxtApp()
 //
 // Data
 //
-const poi = ref<ApiPoi>()
 const poiDeps = ref<ApiPoiDeps>()
 
 const fetchPoiPoiDeps = getAsyncDataOrThrows(
@@ -60,25 +59,20 @@ const fetchPoiPoiDeps = getAsyncDataOrThrows(
 
 const [poiPoiDeps] = await Promise.all([fetchPoiPoiDeps])
 
-poi.value = poiPoiDeps.value.poi
-poiDeps.value = poiPoiDeps.value.poiDeps
-
-if (!poi.value) {
-  showError({
+if (!poiPoiDeps.value.poi) {
+  throw createError({
     statusCode: 404,
     statusMessage: 'POI not found. Missing main object.',
   })
 }
 
-//
-// Computed
-//
-const pageTitle = computed(() => {
-  if (!poi.value)
-    return ''
+const poi = ref(poiPoiDeps.value.poi)
+poiDeps.value = poiPoiDeps.value.poiDeps
 
-  return `${poi.value.properties.classe} - ${poi.value.properties.name}`
-})
+const { featureSeoTitle } = useFeature(poi, { type: 'details' })
+
+if (!featureSeoTitle.value)
+  throw createError('Feature has no name')
 
 //
 // Hooks
@@ -89,7 +83,7 @@ onBeforeMount(() => {
 
 useHead(
   headerFromSettings(settings.value!, {
-    title: pageTitle.value,
+    title: featureSeoTitle.value,
     description: {
       fr: poi.value?.properties.description,
     },
@@ -104,7 +98,7 @@ useHead(
     :nav-menu-entries="contents!"
     :poi="poi!"
     :poi-deps="poiDeps"
-    :page-title="pageTitle"
+    :page-title="featureSeoTitle!"
     class="page-details tw-overflow-clip"
   />
 </template>

From 778c5338de8bd72f9d702b6391f7fdd5748ca818 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 7 Nov 2024 00:50:22 +0100
Subject: [PATCH 72/81] refactor: remove unused code #413

---
 components/PoisDetails/PoiDetails.vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/components/PoisDetails/PoiDetails.vue b/components/PoisDetails/PoiDetails.vue
index 673213c6..e2fb8548 100644
--- a/components/PoisDetails/PoiDetails.vue
+++ b/components/PoisDetails/PoiDetails.vue
@@ -123,13 +123,6 @@ export default defineNuxtComponent({
       return this.poi.properties.display?.color_line || '#76009E'
     },
 
-    classLabel(): string | undefined {
-      return (
-        this.poi.properties.editorial?.class_label_details?.fr
-        || this.poi.properties.editorial?.class_label?.fr
-      )
-    },
-
     id(): ApiPoiId {
       return this.poi.properties.metadata.id
     },

From 21549c1b46a8676ea44f13192481b2159ccc7f18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 7 Nov 2024 14:46:58 +0100
Subject: [PATCH 73/81] fix: make persistent layers #421

---
 composables/useIsochrone.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/composables/useIsochrone.ts b/composables/useIsochrone.ts
index f48828f7..b3be1b45 100644
--- a/composables/useIsochrone.ts
+++ b/composables/useIsochrone.ts
@@ -32,13 +32,13 @@ export default function useIsochrone() {
   const { t, locale } = useI18n()
   const map = useState<Map>('map-instance')
   const profile = useState('isochrone-profile')
+  const layers = useState<string[]>('isochrone-layers', () => [])
   const { boundOptions } = storeToRefs(useMapStore())
 
   //
   // Data
   //
   const isOverlayOpen = ref(false)
-  const layers = ref<string[]>([])
   const sourceName = 'isochrone'
   const colorExpression = [
     'match',
@@ -56,7 +56,6 @@ export default function useIsochrone() {
   // Methods
   //
   const reset = () => {
-    // FIXME: Issue with HMR, layers is empty but layers and source are still present on map
     layers.value.forEach(layerId => map.value.removeLayer(layerId))
     layers.value = []
 

From 1eb2cfe87acf417c5eabd2bc50ba45029dc1bf3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 7 Nov 2024 16:33:06 +0100
Subject: [PATCH 74/81] feat: add isochrone remove button #422

---
 components/Home/Home.vue                 |  3 ++
 components/Isochrone/IsochroneStatus.vue | 52 ++++++++++++++++++++++++
 components/PoisCard/PoiCardContent.vue   | 12 ++++--
 composables/useIsochrone.ts              | 11 ++++-
 locales/en-GB.ts                         |  1 +
 locales/es-ES.ts                         |  1 +
 locales/fr-FR.ts                         |  1 +
 7 files changed, 76 insertions(+), 5 deletions(-)
 create mode 100644 components/Isochrone/IsochroneStatus.vue

diff --git a/components/Home/Home.vue b/components/Home/Home.vue
index e30cb927..058ca220 100644
--- a/components/Home/Home.vue
+++ b/components/Home/Home.vue
@@ -29,6 +29,7 @@ import { getHashPart, setHashParts } from '~/utils/url'
 import { flattenFeatures, formatApiAddressToFeature } from '~/utils/utilities'
 import useDevice from '~/composables/useDevice'
 import type { ApiAddrSearchResult, ApiSearchResult } from '~/lib/apiSearch'
+import IsochroneStatus from '~/components/Isochrone/IsochroneStatus.vue'
 
 //
 // Props
@@ -52,6 +53,7 @@ const { $tracking } = useNuxtApp()
 const route = useRoute()
 const router = useRouter()
 const device = useDevice()
+const { isochroneCurrentFeature } = useIsochrone()
 
 //
 // Data
@@ -551,6 +553,7 @@ function handlePoiCardClose() {
           "
           class="tw-hidden md:tw-block flex-shrink-1"
         />
+        <IsochroneStatus v-if="isochroneCurrentFeature" />
         <div class="tw-grow" style="margin-left: 0" />
         <div
           class="tw-flex-none tw-flex" :class="[isBottomMenuOpened && 'hidden']"
diff --git a/components/Isochrone/IsochroneStatus.vue b/components/Isochrone/IsochroneStatus.vue
new file mode 100644
index 00000000..34b1a4dc
--- /dev/null
+++ b/components/Isochrone/IsochroneStatus.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+const { t } = useI18n()
+const { reset, isochroneCurrentFeature } = useIsochrone()
+
+const color = computed(() => isochroneCurrentFeature.value?.properties?.display?.color_fill ?? 'transparent')
+</script>
+
+<template>
+  <div class="tw-relative tw-self-start tw-p-2 tw-bg-white tw-shadow-md tw-rounded-xl tw-pointer-events-auto">
+    <div>
+      <div class="icon">
+        <FontAwesomeIcon color="#000000" icon="clock" size="sm" />
+      </div>
+    </div>
+    <span class="tw-text-sm">{{ t('isochrone.trigger.label') }}</span>
+    <button
+      type="button"
+      class="tw-absolute -tw-top-3 -tw-right-3 tw-pointer-events-auto tw-flex tw-items-center tw-justify-center tw-text-white tw-text-center tw-rounded-full tw-w-7 tw-h-7 tw-border-solid tw-border-2 tw-border-white tw-bg-red-600 hover:tw-bg-red-800"
+      :title="t('isochrone.remove')"
+      :aria-label="t('isochrone.remove')"
+      @click="reset"
+    >
+      <FontAwesomeIcon icon="times" class="tw-text-white" />
+    </button>
+  </div>
+</template>
+
+<style lang="css" scoped>
+div > div,
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+div > div {
+  flex-direction: column;
+}
+
+.icon {
+  border-radius: 100%;
+  background-color: v-bind(color);
+  width: 40px;
+  height: 40px;
+}
+
+svg {
+  color: #fff;
+}
+</style>
diff --git a/components/PoisCard/PoiCardContent.vue b/components/PoisCard/PoiCardContent.vue
index ec17f41f..b9a3f957 100644
--- a/components/PoisCard/PoiCardContent.vue
+++ b/components/PoisCard/PoiCardContent.vue
@@ -42,7 +42,7 @@ const { favoritesIds, favoriteAddresses } = storeToRefs(useFavoriteStore())
 const { contribMode, isContribEligible, getContributorFields } = useContrib()
 const { isModeExplorer } = storeToRefs(useMapStore())
 const device = useDevice()
-const { enabled: isochroneEnabled } = useIsochrone()
+const { enabled: isochroneEnabled, isochroneCurrentFeature } = useIsochrone()
 const { featureName, featureCategoryName } = useFeature(toRef(() => props.poi), { type: 'popup' })
 
 //
@@ -64,6 +64,8 @@ const id = computed(() => {
   return props.poi.properties.metadata.id
 })
 
+const isSameFeatureAsIsochrone = computed(() => isochroneCurrentFeature.value?.properties?.metadata.id === id.value)
+
 const isFavorite = computed(() => {
   return favoritesIds.value.includes(id.value) || favoriteAddresses.value.has(id.value.toString())
 })
@@ -237,10 +239,14 @@ function trackingPopupEvent(event: 'details' | 'route' | 'explore' | 'favorite'
 
       <IsochroneTrigger
         v-if="isochroneEnabled && !device.smallScreen"
-        class="tw-flex tw-flex-col tw-items-center tw-flex-1 tw-h-full tw-p-2 tw-space-y-2 tw-rounded-lg hover:tw-bg-zinc-100"
+        class="tw-flex tw-flex-col tw-items-center tw-flex-1 tw-h-full tw-p-2 tw-space-y-2 tw-rounded-lg"
         :feature="poi"
+        :class="[
+          isSameFeatureAsIsochrone && 'tw-bg-blue-600 tw-text-white hover:tw-bg-blue-500',
+          !isSameFeatureAsIsochrone && 'hover:tw-bg-zinc-100',
+        ]"
       >
-        <FontAwesomeIcon :color="colorLine" icon="clock" size="sm" />
+        <FontAwesomeIcon :color="isSameFeatureAsIsochrone ? '#fff' : colorLine" icon="clock" size="sm" />
         <span class="tw-text-sm">{{ t('isochrone.trigger.label') }}</span>
       </IsochroneTrigger>
 
diff --git a/composables/useIsochrone.ts b/composables/useIsochrone.ts
index b3be1b45..fbd36114 100644
--- a/composables/useIsochrone.ts
+++ b/composables/useIsochrone.ts
@@ -31,8 +31,9 @@ export default function useIsochrone() {
   const enabled = (config?.OPEN_ROUTE_SERVICE_KEY && config?.ISOCHRONE) || false
   const { t, locale } = useI18n()
   const map = useState<Map>('map-instance')
-  const profile = useState('isochrone-profile')
+  const profile = useState<Profile | null>('isochrone-profile', () => null)
   const layers = useState<string[]>('isochrone-layers', () => [])
+  const isochroneCurrentFeature = useState<GeoJSON.Feature | null>(() => null)
   const { boundOptions } = storeToRefs(useMapStore())
 
   //
@@ -61,6 +62,8 @@ export default function useIsochrone() {
 
     if (map.value.getSource(sourceName))
       map.value.removeSource(sourceName)
+
+    isochroneCurrentFeature.value = null
   }
 
   const render = (data: ORSData) => {
@@ -168,8 +171,10 @@ export default function useIsochrone() {
     if (error.value)
       throw createError(error.value)
 
-    if (data.value)
+    if (data.value) {
+      isochroneCurrentFeature.value = feature
       render(data.value)
+    }
   }
 
   //
@@ -187,10 +192,12 @@ export default function useIsochrone() {
   })
 
   return {
+    isochroneCurrentFeature,
     fetchIsochrone,
     enabled,
     isOverlayOpen,
     toggleOverlay,
     profiles,
+    reset,
   }
 }
diff --git a/locales/en-GB.ts b/locales/en-GB.ts
index ee40c621..e0c16402 100644
--- a/locales/en-GB.ts
+++ b/locales/en-GB.ts
@@ -189,6 +189,7 @@ export default defineI18nLocale(() => {
       decline: 'Decline',
     },
     isochrone: {
+      remove: 'Remove travel time',
       trigger: {
         label: 'Travel time',
         title: 'Travel time from this point',
diff --git a/locales/es-ES.ts b/locales/es-ES.ts
index 94886f89..d0cd9d90 100644
--- a/locales/es-ES.ts
+++ b/locales/es-ES.ts
@@ -189,6 +189,7 @@ export default defineI18nLocale(() => {
       decline: 'Descenso',
     },
     isochrone: {
+      remove: 'Eliminar duración de viaje',
       trigger: {
         label: 'Duración de viaje',
         title: 'Duración de viaje desde este punto',
diff --git a/locales/fr-FR.ts b/locales/fr-FR.ts
index b253c501..ab3fef64 100644
--- a/locales/fr-FR.ts
+++ b/locales/fr-FR.ts
@@ -190,6 +190,7 @@ export default defineI18nLocale(() => {
       decline: 'Refuser',
     },
     isochrone: {
+      remove: 'Supprimer le temps de trajet',
       trigger: {
         label: 'Temps de trajet',
         title: 'Temps de trajet depuis ce point',

From 2e1402db8fbff9a042925c1f6c443d06225e745c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?=
 <38253764+wazolab@users.noreply.github.com>
Date: Tue, 12 Nov 2024 21:22:00 +0100
Subject: [PATCH 75/81] Wrong cursor over cluster (#429)

* fix: wrong cursor over cluster #428

* chore: remove unused function #428
---
 components/Map/MapBase.vue |  4 ----
 lib/clusters.ts            |  4 +++-
 lib/markerLayerFactory.ts  | 45 +-------------------------------------
 3 files changed, 4 insertions(+), 49 deletions(-)

diff --git a/components/Map/MapBase.vue b/components/Map/MapBase.vue
index d3ce6c2e..6adbf22f 100644
--- a/components/Map/MapBase.vue
+++ b/components/Map/MapBase.vue
@@ -378,10 +378,6 @@ export default defineNuxtComponent({
 </template>
 
 <style scoped>
-:deep(.cluster-item) {
-  cursor: pointer;
-}
-
 :deep(.cluster-donut) {
   @apply tw-text-sm tw-leading-none tw-font-medium tw-block tw-text-zinc-800;
 }
diff --git a/lib/clusters.ts b/lib/clusters.ts
index b5970a43..872db1cf 100644
--- a/lib/clusters.ts
+++ b/lib/clusters.ts
@@ -89,11 +89,13 @@ export function clusterRender(element: HTMLDivElement, props: MapGeoJSONFeature[
       </text>
     </svg>`
 
-  element.classList.add('cluster-item')
+  element.style.cursor = 'pointer'
   element.innerHTML = html
 }
 
 export function markerRender(element: HTMLDivElement, feature: MapGeoJSONFeature) {
+  element.style.cursor = 'pointer'
+
   if (typeof feature.properties?.metadata === 'string')
     feature.properties.metadata = JSON.parse(feature.properties.metadata)
 
diff --git a/lib/markerLayerFactory.ts b/lib/markerLayerFactory.ts
index 59c98e9f..85f83aab 100644
--- a/lib/markerLayerFactory.ts
+++ b/lib/markerLayerFactory.ts
@@ -1,13 +1,4 @@
-import type {
-  LayerSpecification,
-  Marker,
-  SymbolLayerSpecification,
-} from 'maplibre-gl'
-import { createApp } from 'vue'
-
-import TeritorioIconBadge from '~/components/UI/TeritorioIconBadge.vue'
-import type { TupleLatLng } from '~/utils/types'
-import { createMarker } from '~/composables/useMarker'
+import type { LayerSpecification, SymbolLayerSpecification } from 'maplibre-gl'
 
 export function markerLayerTextFactory(layerTemplate: LayerSpecification, id: string, source: string): LayerSpecification {
   if (layerTemplate.type !== 'symbol') {
@@ -60,37 +51,3 @@ export function markerLayerTextFactory(layerTemplate: LayerSpecification, id: st
     return layer
   }
 }
-
-export function makerHtmlFactory(
-  id: string,
-  latLng: TupleLatLng,
-  colorFill: string,
-  icon: string,
-  thumbnail: string | undefined,
-  size: string | null = null,
-  text?: string,
-): Marker {
-  // Marker
-  const el: HTMLElement = document.createElement('div')
-  el.id = id
-  el.classList.add('maplibregl-marker')
-  el.classList.add('cluster-item')
-
-  const marker = createMarker(latLng, {
-    element: el,
-    ...(thumbnail && {
-      offset: [0, -10],
-    }),
-  })
-
-  // Teritorio badge
-  createApp(TeritorioIconBadge, {
-    colorFill,
-    picto: icon,
-    image: thumbnail,
-    size,
-    text,
-  }).mount(el)
-
-  return marker
-}

From 0f93419ff1a08cc0d646db9a4b0f332bb2839c5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 14 Nov 2024 10:59:22 +0100
Subject: [PATCH 76/81] chore: update @teritorio/maplibre-gl-teritorio-cluster
 plugin

---
 package.json |  2 +-
 yarn.lock    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 84240cd6..72dfda32 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "@sentry/vue": "^8.35.0",
     "@tailwindcss/typography": "^0.5.9",
     "@teritorio/map": "^0.12.7",
-    "@teritorio/maplibre-gl-teritorio-cluster": "^0.0.10",
+    "@teritorio/maplibre-gl-teritorio-cluster": "^0.0.11",
     "@teritorio/openmaptiles-gl-language": "^1.5.4",
     "@turf/boolean-intersects": "^6.5.0",
     "@turf/mask": "^7.1.0",
diff --git a/yarn.lock b/yarn.lock
index 2858679b..99d1ae64 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3985,14 +3985,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@teritorio/maplibre-gl-teritorio-cluster@npm:^0.0.10":
-  version: 0.0.10
-  resolution: "@teritorio/maplibre-gl-teritorio-cluster@npm:0.0.10"
+"@teritorio/maplibre-gl-teritorio-cluster@npm:^0.0.11":
+  version: 0.0.11
+  resolution: "@teritorio/maplibre-gl-teritorio-cluster@npm:0.0.11"
   dependencies:
     "@turf/bbox": "npm:^7.1.0"
     "@turf/helpers": "npm:^7.1.0"
     maplibre-gl: "npm:^4.7.0"
-  checksum: 10c0/6c248337ea92e60659e1daf85a5891770a68551af455ff81562444301aa7e4c3ac58ea91af1cd30a5eba09f6b8cfc3484fb1451d2ffe8843740d7b340d299eec
+  checksum: 10c0/e4c9e0c5af4bb279ce324ad36c5be7d55dad2ee9b5af27e91c025dac156cd34c7ff984531726f9af5258cf592bbeef5128050755718ca8d10deb1cd90d136a8c
   languageName: node
   linkType: hard
 
@@ -4032,7 +4032,7 @@ __metadata:
     "@tailwindcss/typography": "npm:^0.5.9"
     "@teritorio/font-teritorio": "npm:^2.5.0"
     "@teritorio/map": "npm:^0.12.7"
-    "@teritorio/maplibre-gl-teritorio-cluster": "npm:^0.0.10"
+    "@teritorio/maplibre-gl-teritorio-cluster": "npm:^0.0.11"
     "@teritorio/openmaptiles-gl-language": "npm:^1.5.4"
     "@turf/boolean-intersects": "npm:^6.5.0"
     "@turf/mask": "npm:^7.1.0"

From 96ef4f74b888980b574ad4314200df3b3eeb2b3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 18 Nov 2024 14:10:07 +0100
Subject: [PATCH 77/81] fix: handle empty menu #430

---
 stores/menu.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/stores/menu.ts b/stores/menu.ts
index 4c9d0682..54071d6e 100644
--- a/stores/menu.ts
+++ b/stores/menu.ts
@@ -79,8 +79,11 @@ export const menuStore = defineStore('menu', {
 
   actions: {
     async init(config: VidoConfig) {
-      const menuItems = await getMenu(config)
-      this.fetchConfig(menuItems)
+      try {
+        const menuItems = await getMenu(config)
+        this.fetchConfig(menuItems)
+      }
+      catch (err: any) {}
     },
 
     setSelectedCategoryIds(selectedCategoryIds: ApiMenuCategory['id'][]) {

From 055449fa5bcc262832e2f4ec25a5445ace931637 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 18 Nov 2024 18:37:34 +0100
Subject: [PATCH 78/81] chore: remove track of pin marker #427

---
 components/MainMap/MapFeatures.vue |  6 +-----
 stores/map.ts                      | 15 +--------------
 2 files changed, 2 insertions(+), 19 deletions(-)

diff --git a/components/MainMap/MapFeatures.vue b/components/MainMap/MapFeatures.vue
index 62cb0a46..71054dbf 100644
--- a/components/MainMap/MapFeatures.vue
+++ b/components/MainMap/MapFeatures.vue
@@ -124,7 +124,7 @@ export default defineNuxtComponent({
     const device = useDevice()
     const { config } = storeToRefs(useSiteStore())
     const mapStore = useMapStore()
-    const { center, selectedFeature, pinMarker, teritorioCluster } = storeToRefs(mapStore)
+    const { center, selectedFeature, teritorioCluster } = storeToRefs(mapStore)
     const mapStyleLoaded = ref(false)
 
     return {
@@ -134,7 +134,6 @@ export default defineNuxtComponent({
       mapBase: ref<InstanceType<typeof MapBase>>(),
       mapStore,
       mapStyleLoaded,
-      pinMarker,
       selectedFeature,
       teritorioCluster,
     }
@@ -204,9 +203,6 @@ export default defineNuxtComponent({
     },
 
     selectedFeature() {
-      if (this.pinMarker)
-        this.pinMarker.addTo(this.map as Map)
-
       this.showSelectedFeature()
     },
 
diff --git a/stores/map.ts b/stores/map.ts
index ebe5f9c3..e918220c 100644
--- a/stores/map.ts
+++ b/stores/map.ts
@@ -1,16 +1,14 @@
 import { defineStore } from 'pinia'
-import { type FitBoundsOptions, type LngLatLike, type Marker, Point } from 'maplibre-gl'
+import type { FitBoundsOptions } from 'maplibre-gl'
 import type { TeritorioCluster } from '@teritorio/maplibre-gl-teritorio-cluster'
 import type { ApiPoi, ApiPoiProperties } from '~/lib/apiPois'
 import type { LatLng, Pitch } from '~/utils/types'
 import { Mode } from '~/utils/types'
-import { pinMarkerRender } from '~/lib/clusters'
 
 interface State {
   boundOptions?: FitBoundsOptions
   center: LatLng
   mode: Mode
-  pinMarker: Marker | null
   pitch: Pitch
   selectedFeature: ApiPoi | null
   teritorioCluster: TeritorioCluster | null
@@ -21,7 +19,6 @@ export const mapStore = defineStore('map', {
     boundOptions: undefined,
     center: { lng: 0, lat: 0 },
     mode: Mode.BROWSER,
-    pinMarker: null,
     pitch: 0,
     selectedFeature: null,
     teritorioCluster: null,
@@ -36,9 +33,6 @@ export const mapStore = defineStore('map', {
 
   actions: {
     setSelectedFeature(feature: ApiPoi | null) {
-      this.pinMarker?.remove()
-      this.pinMarker = null
-
       if (!feature) {
         this.selectedFeature = null
         this.teritorioCluster?.resetSelectedFeature()
@@ -68,13 +62,6 @@ export const mapStore = defineStore('map', {
           })
 
           goodFeature.properties = cleanProperties
-
-          if (feature.properties.internalType === 'address') {
-            const { coordinates } = feature.geometry as GeoJSON.Point
-            // @ts-expect-error: type is too deep
-            this.pinMarker = pinMarkerRender(coordinates as LngLatLike, new Point(0, 0))
-            this.teritorioCluster?.resetSelectedFeature()
-          }
         }
 
         this.selectedFeature = goodFeature

From 3681b48befa85fa7e3217c2080ea6afc1b18fa7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 19 Nov 2024 02:36:59 +0100
Subject: [PATCH 79/81] fix: set selected feature from search results #427

---
 components/Home/Home.vue           |  6 ++++--
 components/MainMap/MapFeatures.vue |  2 +-
 package.json                       |  2 +-
 yarn.lock                          | 10 +++++-----
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/components/Home/Home.vue b/components/Home/Home.vue
index 058ca220..29005e59 100644
--- a/components/Home/Home.vue
+++ b/components/Home/Home.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { FitBoundsOptions, LngLatBounds } from 'maplibre-gl'
+import type { FitBoundsOptions, LngLatBounds, MapGeoJSONFeature } from 'maplibre-gl'
 import { storeToRefs } from 'pinia'
 import type { MultiPolygon, Polygon } from 'geojson'
 import { decodeBase32 } from 'geohashing'
@@ -43,7 +43,7 @@ const props = defineProps<{
 // Composables
 //
 const mapStore = useMapStore()
-const { center, isModeFavorites, isModeExplorer, isModeExplorerOrFavorites, mode, selectedFeature } = storeToRefs(mapStore)
+const { center, isModeFavorites, isModeExplorer, isModeExplorerOrFavorites, mode, selectedFeature, teritorioCluster } = storeToRefs(mapStore)
 const menuStore = useMenuStore()
 const { apiMenuCategory, features, selectedCategoryIds } = storeToRefs(menuStore)
 const favoriteStore = useFavoriteStore()
@@ -439,6 +439,8 @@ function toggleFavorite(feature: ApiPoi) {
 function searchSelectFeature(feature: ApiPoi) {
   mapStore.setSelectedFeature(feature)
   goToSelectedFeature()
+
+  teritorioCluster.value?.setSelectedFeature(feature as unknown as MapGeoJSONFeature)
 }
 
 const bottomMenuRef = ref<HTMLDivElement>()
diff --git a/components/MainMap/MapFeatures.vue b/components/MainMap/MapFeatures.vue
index 71054dbf..218cc190 100644
--- a/components/MainMap/MapFeatures.vue
+++ b/components/MainMap/MapFeatures.vue
@@ -248,7 +248,7 @@ export default defineNuxtComponent({
         pinMarkerRenderFn: pinMarkerRender,
       })
 
-      this.teritorioCluster.addEventListener('click', (e: Event) => this.updateSelectedFeature((e as CustomEvent).detail.selectedFeature))
+      this.teritorioCluster.addEventListener('feature-click', (e: Event) => this.updateSelectedFeature((e as CustomEvent).detail.selectedFeature))
 
       this.map.on('click', this.onClick)
 
diff --git a/package.json b/package.json
index 72dfda32..7cda06b6 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "@sentry/vue": "^8.35.0",
     "@tailwindcss/typography": "^0.5.9",
     "@teritorio/map": "^0.12.7",
-    "@teritorio/maplibre-gl-teritorio-cluster": "^0.0.11",
+    "@teritorio/maplibre-gl-teritorio-cluster": "^0.0.12",
     "@teritorio/openmaptiles-gl-language": "^1.5.4",
     "@turf/boolean-intersects": "^6.5.0",
     "@turf/mask": "^7.1.0",
diff --git a/yarn.lock b/yarn.lock
index 99d1ae64..8e3dbec5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3985,14 +3985,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@teritorio/maplibre-gl-teritorio-cluster@npm:^0.0.11":
-  version: 0.0.11
-  resolution: "@teritorio/maplibre-gl-teritorio-cluster@npm:0.0.11"
+"@teritorio/maplibre-gl-teritorio-cluster@npm:^0.0.12":
+  version: 0.0.12
+  resolution: "@teritorio/maplibre-gl-teritorio-cluster@npm:0.0.12"
   dependencies:
     "@turf/bbox": "npm:^7.1.0"
     "@turf/helpers": "npm:^7.1.0"
     maplibre-gl: "npm:^4.7.0"
-  checksum: 10c0/e4c9e0c5af4bb279ce324ad36c5be7d55dad2ee9b5af27e91c025dac156cd34c7ff984531726f9af5258cf592bbeef5128050755718ca8d10deb1cd90d136a8c
+  checksum: 10c0/f04440b42d9d5fa1374d512a29cef305f635e97dcfaec07c84e09facb885755c5bbce8c6ed2252e658bf58c7c38ff15fc552f9ac90296576b900ff7613cb0630
   languageName: node
   linkType: hard
 
@@ -4032,7 +4032,7 @@ __metadata:
     "@tailwindcss/typography": "npm:^0.5.9"
     "@teritorio/font-teritorio": "npm:^2.5.0"
     "@teritorio/map": "npm:^0.12.7"
-    "@teritorio/maplibre-gl-teritorio-cluster": "npm:^0.0.11"
+    "@teritorio/maplibre-gl-teritorio-cluster": "npm:^0.0.12"
     "@teritorio/openmaptiles-gl-language": "npm:^1.5.4"
     "@turf/boolean-intersects": "npm:^6.5.0"
     "@turf/mask": "npm:^7.1.0"

From d17e17d090ae722b9c1fd8f6fbf7f0b6e2d45ff0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Wed, 20 Nov 2024 12:15:48 +0100
Subject: [PATCH 80/81] chore: map type too deep

---
 components/Map/Map.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/Map/Map.vue b/components/Map/Map.vue
index ebfcde39..ec162dae 100644
--- a/components/Map/Map.vue
+++ b/components/Map/Map.vue
@@ -251,6 +251,7 @@ export default defineNuxtComponent({
     onMapInit(map: ITMap) {
       this.$emit('mapInit', map)
 
+      // @ts-expect-error: Type is too deep
       this.map = map
       this.languageControl = new OpenMapTilesLanguage({
         defaultLanguage: this.locale || undefined,

From 98f0cf6fdf75e3e4031c280682a892821c55ea0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Rodrigo?= <fred.rodrigo@gmail.com>
Date: Mon, 25 Nov 2024 11:50:54 +0100
Subject: [PATCH 81/81] chore: v1.24.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7cda06b6..6c48a35b 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@teritorio/vido",
   "type": "module",
-  "version": "1.23.1",
+  "version": "1.24.0",
   "private": true,
   "packageManager": "yarn@4.4.1",
   "engines": {