From 4b5df97d89807309e3eba8e26bc5b4920c8dc9c2 Mon Sep 17 00:00:00 2001
From: AlitaBernachot <alita.bernachot@camptocamp.com>
Date: Wed, 31 Jul 2024 12:06:43 +0200
Subject: [PATCH 1/9] feat(draw): activate MyMaps panel on click draw in
 toolbar

---
 src/stores/app.store.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/stores/app.store.ts b/src/stores/app.store.ts
index 656a7ce5..8abd5d6a 100644
--- a/src/stores/app.store.ts
+++ b/src/stores/app.store.ts
@@ -64,7 +64,6 @@ export const useAppStore = defineStore(
 
       if (drawToolbarOpen.value) {
         myMapsOpen.value = true
-        styleEditorOpen.value = false
         layersOpen.value = false
       }
     }

From ef5ca8b6ef90e56273fb4ddfe4ba45d711ebf421 Mon Sep 17 00:00:00 2001
From: AlitaBernachot <alita.bernachot@camptocamp.com>
Date: Wed, 31 Jul 2024 22:44:09 +0200
Subject: [PATCH 2/9] feat(draw): add new drawing panel

---
 src/assets/main.css                           | 68 +++++++++++++
 src/components/common/menu-popup.vue          | 65 ++++++++++++
 src/components/draw/draw-panel-item-sub.vue   | 84 ++++++++++++++++
 src/components/draw/draw-panel-item.vue       | 39 ++++++++
 src/components/draw/draw-panel.vue            | 64 ++++++++++++
 src/components/draw/feature-delete.vue        |  9 ++
 src/components/draw/feature-edit-info.vue     | 11 +++
 src/components/draw/feature-edit-style.vue    | 98 +++++++++++++++++++
 src/components/footer/footer-bar.vue          | 14 ++-
 src/components/header/header-bar.vue          | 33 ++++---
 .../layer-manager/layer-manager.vue           | 40 +++-----
 src/components/my-maps/my-maps-panel.vue      |  3 +
 src/composables/sortable.ts                   | 34 +++++++
 src/stores/app.store.ts                       | 20 ++++
 tailwind.config.cjs                           | 11 +++
 15 files changed, 550 insertions(+), 43 deletions(-)
 create mode 100644 src/components/common/menu-popup.vue
 create mode 100644 src/components/draw/draw-panel-item-sub.vue
 create mode 100644 src/components/draw/draw-panel-item.vue
 create mode 100644 src/components/draw/draw-panel.vue
 create mode 100644 src/components/draw/feature-delete.vue
 create mode 100644 src/components/draw/feature-edit-info.vue
 create mode 100644 src/components/draw/feature-edit-style.vue
 create mode 100644 src/composables/sortable.ts

diff --git a/src/assets/main.css b/src/assets/main.css
index 62e860ab..745ca0a4 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -76,11 +76,32 @@
     outline: none;
   }
 
+  .lux-icon {
+    font-family: 'geoportail-icons-wc';
+  }
+
+  .lux-icon.point::before {
+    content: '\E901';
+  }
+
+  .lux-icon.line::before {
+    content: '\E900';
+  }
+
+  .lux-icon.polygon::before {
+    content: '\E902';
+  }
+
   .lux-btn {
     @apply bg-white border text-primary py-[6px] px-[12px] hover:bg-primary hover:text-white leading-snug focus:bg-[#e6e6e6] focus:border-[#8c8c8c] focus:[color:var(--color-primary)] focus:lux-outlined;
     border: 1px solid var(--button-bg-color);
   }
 
+  .lux-btn-primary {
+    @apply lux-btn bg-primary text-white hover:bg-quaternary;
+    border: 1px solid var(--color-quaternary);
+  }
+
   .lux-btn-grey {
     @apply lux-btn py-[3px] px-[8px];
     background-color: rgb(239, 239, 239);
@@ -306,6 +327,22 @@
   .lux-tooltip {
     @apply relative bg-black bg-opacity-50 rounded text-white p-1.5 opacity-70 whitespace-nowrap;
   }
+  
+  .lux-draw-panel-title {
+    @apply text-white;
+  }
+
+  .lux-drawing-item {
+    @apply my-1;
+  }
+
+  .lux-drawing-item-label {
+    @apply text-white;
+  }
+
+  .lux-drawing-item-content {
+    @apply bg-secondary mt-1 mb-2 p-3;
+  }
 }
 
 .fa-solid {
@@ -327,98 +364,129 @@
     --color-primary: #2980b9;
     --color-secondary: #97bbd3;
     --color-tertiary: #1f5d87;
+    --color-quaternary: #20638f;
     --color-navbar-default: #777;
     --color-btn-ol: #8394a0;
     --main-primary: #2980b9;
     --main-secondary: #97bbd3;
     --main-tertiary: #1f5d87;
+    --main-quaternary: #20638f;
     --tourisme-primary: #e84c3d;
     --tourisme-secondary: #e88c83;
     --tourisme-tertiary: #a50f15;
+    --tourisme-quaternary: #d82a1a;
     --emwelt-primary: #558b2f;
     --emwelt-secondary: #85bb5c;
     --emwelt-tertiary: #255d00;
+    --emwelt-quaternary: #667625;
     --eau-primary: #03a2ac;
     --eau-secondary: #45cdd6;
     --eau-tertiary: #078f98;
+    --eau-quaternary: #02737a;
     --pag-primary: #2b8cbe;
     --pag-secondary: #74a9cf;
     --pag-tertiary: #045a8d;
+    --pag-quaternary: #226d94;
     --agriculture-primary: #f39c11;
     --agriculture-secondary: #ffc363;
     --agriculture-tertiary: #9c6101;
+    --agriculture-quaternary: #c77e0a;
     --lenoz-primary: #f4b72b;
     --lenoz-secondary: #f3d89b;
     --lenoz-tertiary: #b3851d;
+    --lenoz-quaternary: #e0a00c;
     --preizerdaul-primary: #2980b9;
     --preizerdaul-secondary: #97bbd3;
     --preizerdaul-tertiary: #1f5d87;
+    --preizerdaul-quaternary: #821a2c;
     --wellenstein-primary: #7ac573;
     --wellenstein-secondary: #b0e4ab;
     --wellenstein-tertiary: #42803c;
+    --wellenstein-quaternary: #58b64f;
     --lintgen-primary: #f3c531;
     --lintgen-secondary: #f3d89b;
     --lintgen-tertiary: #b3851d;
+    --lintgen-quaternary: #e4b10d;
     --remich-primary: #8ca229;
     --remich-secondary: #bacd63;
     --remich-tertiary: #5c6b1b;
+    --remich-quaternary: #69791f;
     --at-primary: #f4511e;
     --at-secondary: #ff844c;
     --at-tertiary: #b91400;
+    --at-quaternary: #986a34;
     --cadastre_hertzien-primary: #7ac573;
     --cadastre_hertzien-secondary: #b0e4ab;
     --cadastre_hertzien-tertiary: #42803c;
+    --cadastre_hertzien-quaternary: #4f792b;
     --urban_farming-primary: #028349;
     --urban_farming-secondary: #4ab475;
     --urban_farming-tertiary: #005520;
+    --urban_farming-quaternary: #005520;
     --energie-primary: #558b2f;
     --energie-secondary: #85bb5c;
     --energie-tertiary: #255d00;
+    --energie-quaternary: #255d00;
     --atlas_demographique-primary: #f4b72b;
     --atlas_demographique-secondary: #f3d89b;
     --atlas_demographique-tertiary: #b3851d;
+    --atlas_demographique-quaternary: #b3851d;
     --logement-primary: #b0271a;
     --logement-secondary: #e95b43;
     --logement-tertiary: #790000;
+    --logement-quaternary: #790000;
     --np_our-primary: #76b854;
     --np_our-secondary: #a8ea82;
     --np_our-tertiary: #458725;
+    --np_our-quaternary: #458725;
     --geosciences-primary: #895e03;
     --geosciences-secondary: #d7ba87;
     --geosciences-tertiary: #5e4024;
+    --geosciences-quaternary: #5e4024;
     --ahc-primary: #ff5722;
     --ahc-secondary: #ff8a50;
     --ahc-tertiary: #c41c00;
+    --ahc-quaternary: #c41c00;
     --municipalities-primary: #9e9ac8;
     --municipalities-secondary: #cbc9e2;
     --municipalities-tertiary: #756bb1;
+    --municipalities-quaternary: #7e79b6;
     --Amenagement_du_territoire-primary: #f4511e;
     --Amenagement_du_territoire-secondary: #ff844c;
     --Amenagement_du_territoire-tertiary: #b91400;
+    --Amenagement_du_territoire-quaternary: #b91400;
     --Environnement_naturel-primary: #879d31;
     --Environnement_naturel-secondary: #bacd81;
     --Environnement_naturel-tertiary: #627529;
+    --Environnement_naturel-quaternary: #627529;
     --Environnement_humain-primary: #558b2f;
     --Environnement_humain-secondary: #85bb5c;
     --Environnement_humain-tertiary: #255d00;
+    --Environnement_humain-quaternary: #255d00;
     --Occupation_du_sol-primary: #8d6e63;
     --Occupation_du_sol-secondary: #bd9b8f;
     --Occupation_du_sol-tertiary: #5e4238;
+    --Occupation_du_sol-quaternary: #5e4238;
     --intranet-at-primary: #9e9ac8;
     --intranet-at-secondary: #cbc9e2;
     --intranet-at-tertiary: #756bb1;
+    --intranet-at-quaternary: #756bb1;
     --prof-primary: #006d2c;
     --prof-secondary: #99d8c9;
     --prof-tertiary: #238b45;
+    --prof-quaternary: #003a17;
     --go-primary: #555;
     --go-secondary: #bbb;
     --go-tertiary: #756bb1;
+    --go-quaternary: #3b3b3b;
     --sig_secours-primary: #2979ff;
     --sig_secours-secondary: #75a7ff;
     --sig_secours-tertiary: #004ecb;
+    --sig_secours-quaternary: #004ecb;
     --school-primary: #756bb1;
     --school-secondary: #9e9ac8;
     --school-tertiary: #54278f;
+    --school-quaternary: #54278f;
     --button-bg-color: #ccc;
   }
 }
diff --git a/src/components/common/menu-popup.vue b/src/components/common/menu-popup.vue
new file mode 100644
index 00000000..f8a6dcce
--- /dev/null
+++ b/src/components/common/menu-popup.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, shallowRef, ShallowRef } from 'vue'
+
+const props = defineProps<{
+    options: string[]
+    direction?: 'up' | 'down'
+  }>()
+const emit = defineEmits(['change'])
+const isOpen: ShallowRef<boolean> = shallowRef(false)
+const selectedValue: ShallowRef<string | undefined> = shallowRef()
+
+function handleClick(event: MouseEvent) {
+  event.stopPropagation()
+  toggleDropdown()
+}
+
+function toggleDropdown(forceOpen?: boolean) {
+  isOpen.value = forceOpen ?? !isOpen.value
+}
+
+function onClickOpenBtn(event: MouseEvent) {
+  event.stopImmediatePropagation()
+  toggleDropdown()
+}
+
+function onClickItem(event: MouseEvent) {
+  selectedValue.value = (event.target as HTMLElement).dataset.value
+  emit('change', selectedValue.value)
+}
+
+function onClickOutsideOpenBtn() {
+  toggleDropdown(false)
+}
+
+onMounted(() => document.addEventListener('click', onClickOutsideOpenBtn))
+onUnmounted(() => document.removeEventListener('click', onClickOutsideOpenBtn))
+</script>
+
+<template>
+  <div class="lux-menu-popup">
+    <button class="float-right" @click="handleClick">
+      <i class="fa-solid fa-square-caret-down"></i>
+    </button>
+
+    <ul
+        class="lux-menu-popup-list absolute"
+        :class="isOpen ? '' : 'hidden'"
+        tabindex="-1"
+      >
+        <li
+          v-for="option in props.options"
+          :key="option"
+        >
+          <button
+            class="lux-dropdown-list-item"
+            :aria-label="option"
+            :data-value="option"
+            @click="onClickItem"
+          >
+            {{ option }}
+          </button>
+        </li>
+      </ul>
+  </div>
+</template>
diff --git a/src/components/draw/draw-panel-item-sub.vue b/src/components/draw/draw-panel-item-sub.vue
new file mode 100644
index 00000000..1fdbc9ea
--- /dev/null
+++ b/src/components/draw/draw-panel-item-sub.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useTranslation } from 'i18next-vue'
+
+import MenuPopup from '@/components/common/menu-popup.vue'
+
+import FeatureDelete from './feature-delete.vue'
+import FeatureEditInfo from './feature-edit-info.vue'
+import FeatureEditStyle from './feature-edit-style.vue'
+
+const { t } = useTranslation()
+const props = defineProps<{
+  isEditing: boolean
+  feature: string
+}>()
+
+const isEditingInfo = ref(false)
+const isEditingStyle = ref(false)
+const isDeleting = ref(false)
+const isModifiying = computed(
+  () => isEditingInfo.value || isEditingStyle.value || isDeleting.value
+)
+
+function onCancel() {
+  isEditingInfo.value = isEditingStyle.value = isDeleting.value = false
+}
+
+function onSearch() {
+  alert('TODO onSearch')
+}
+
+function onRemove() {
+  isEditingInfo.value = isEditingStyle.value = false
+  isDeleting.value = true
+}
+</script>
+
+<template>
+  <template v-if="!isModifiying">
+    <i
+      class="fa fa-object-ungroup float-right"
+      role="button"
+      v-if="!isModifiying"
+      >&nbsp;</i
+    >
+
+    <div class="min-h-8" v-if="!isModifiying"></div>
+
+    <!-- Default display feature options -->
+    <div v-if="!isModifiying">
+      <button class="lux-btn-primary" v-if="!isEditingStyle">
+        {{ t("Editer l'objet") }}
+      </button>
+      <button class="lux-btn-primary" v-else>
+        {{ t('Terminer édition') }}
+      </button>
+
+      <div class="flex text-primary items-center gap-2 float-right">
+        <button @click="onSearch"><i class="fa fa-search"></i></button>
+        <button @click="() => (isEditingInfo = true)">
+          <i class="fa fa-pencil"></i>
+        </button>
+        <button @click="() => (isEditingStyle = true)">
+          <i class="fa fa-paint-brush"></i>
+        </button>
+        <button @click="onRemove"><i class="fa fa-trash"></i></button>
+        
+        <MenuPopup :options="['toto']" :direction="'down'" />
+      </div>
+    </div>
+  </template>
+
+  <!-- Is modifying feature -->
+  <template v-else>
+    <FeatureEditInfo v-if="isEditingInfo" />
+    <FeatureEditStyle v-if="isEditingStyle" :feature="feature" />
+    <FeatureDelete v-if="isDeleting" />
+
+    <div class="text-right">
+      <button class="lux-btn mr-2" @click="onCancel">{{ t('Cancel') }}</button>
+      <button class="lux-btn-primary">{{ t('Validate') }}</button>
+    </div>
+  </template>
+</template>
diff --git a/src/components/draw/draw-panel-item.vue b/src/components/draw/draw-panel-item.vue
new file mode 100644
index 00000000..c33e7dbd
--- /dev/null
+++ b/src/components/draw/draw-panel-item.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useTranslation } from 'i18next-vue'
+
+import DrawPanelItemSub from './draw-panel-item-sub.vue'
+
+const { t } = useTranslation()
+defineProps<{
+  isOpen: boolean
+  drawingId: number
+  feature: string
+}>()
+</script>
+
+<template>
+  <!-- Drawing type and title -->
+  <button
+    class="lux-drawing-item-label flex items-center gap-1"
+    :aria-expanded="isOpen"
+    :aria-controls="`drawing-item-content-${drawingId}`"
+    @click="$emit('closeFeatureItemSub', !isOpen)"
+  >
+    <span
+      class="sortable-handle drag-handle fa fa-reorder ui-sortable-handle cursor-move"
+    ></span>
+    <span class="lux-icon point" v-if="feature === 'Point'"></span>
+    <span class="lux-icon line" v-if="feature === 'LineString'"></span>
+    <span class="lux-icon polygon" v-if="feature === 'Polygon'"></span>
+    <span>{{ t('desfese') }}</span>
+  </button>
+
+  <!-- Drawing details -->
+  <div
+    v-if="isOpen"
+    class="lux-drawing-item-content"
+    :id="`drawing-item-content-${drawingId}`"
+  >
+    <DrawPanelItemSub :is-editing="false" :feature="feature" />
+  </div>
+</template>
diff --git a/src/components/draw/draw-panel.vue b/src/components/draw/draw-panel.vue
new file mode 100644
index 00000000..3acd44db
--- /dev/null
+++ b/src/components/draw/draw-panel.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useTranslation } from 'i18next-vue'
+
+import MenuPopup from '@/components/common/menu-popup.vue'
+import useSortable from '@/composables/sortable'
+import DrawPanelItem from './draw-panel-item.vue'
+
+const { t } = useTranslation()
+
+const isOpenItemPoint = ref(false)
+const isOpenItemPolygon = ref(false)
+const isOpenItemLineString = ref(false)
+
+onMounted(() => {
+  useSortable(<HTMLElement>document.querySelector('.sortable-features'))
+})
+</script>
+
+<template>
+  <hr class="separator my-5" />
+
+  <div class="lux-draw-panel" data-cy="drawPanel">
+    <div class="lux-draw-panel-title flex">
+      <h5 class="grow">{{ t('Dessins') }}</h5>
+
+      <MenuPopup :options="['toto']" :direction="'down'" />
+    </div>
+
+    <ul class="mx-1 sortable-features">
+      <li class="lux-drawing-item">
+        <DrawPanelItem
+          :is-open="isOpenItemPoint"
+          :drawing-id="32"
+          :feature="'Point'"
+          @closeFeatureItemSub="val => (isOpenItemPoint = val)"
+        />
+      </li>
+      <li class="lux-drawing-item">
+        <DrawPanelItem
+          :is-open="isOpenItemPolygon"
+          :drawing-id="32"
+          :feature="'Polygon'"
+          @closeFeatureItemSub="val => (isOpenItemPolygon = val)"
+        />
+      </li>
+      <li class="lux-drawing-item">
+        <DrawPanelItem
+          :is-open="isOpenItemLineString"
+          :drawing-id="32"
+          :feature="'LineString'"
+          @closeFeatureItemSub="val => (isOpenItemLineString = val)"
+        />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.separator {
+  margin-left: -10px;
+  margin-right: -10px;
+}
+</style>
diff --git a/src/components/draw/feature-delete.vue b/src/components/draw/feature-delete.vue
new file mode 100644
index 00000000..b6cbebaa
--- /dev/null
+++ b/src/components/draw/feature-delete.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { useTranslation } from 'i18next-vue'
+
+const { t } = useTranslation()
+</script>
+
+<template>
+  {{ t('Êtes-vous certain de vouloir effacer cet élément de la carte ?') }}
+</template>
diff --git a/src/components/draw/feature-edit-info.vue b/src/components/draw/feature-edit-info.vue
new file mode 100644
index 00000000..f770b5a5
--- /dev/null
+++ b/src/components/draw/feature-edit-info.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useTranslation } from 'i18next-vue'
+
+const { t } = useTranslation()
+</script>
+
+<template>
+  {{ t('Modification des informations') }}
+  <input type="text" class="block mt-2 mb-4" />
+  <textarea rows="3" class="block mb-4 w-full"></textarea>
+</template>
diff --git a/src/components/draw/feature-edit-style.vue b/src/components/draw/feature-edit-style.vue
new file mode 100644
index 00000000..c6486220
--- /dev/null
+++ b/src/components/draw/feature-edit-style.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { useTranslation } from 'i18next-vue'
+
+const { t } = useTranslation()
+const props = defineProps<{
+  feature: string
+}>()
+</script>
+
+<template>
+  {{ t('Style your drawing') }}
+
+  <template v-if="feature === 'Point'">
+    <div class="flex items-center">
+      <label class="font-bold w-1/3 block" for="inline-full-name">
+        {{ t('Color') }}
+      </label>
+      <div class="md:w-2/3">
+        <input
+          class="leading-tight"
+          id="inline-full-name"
+          type="color"
+          value=""
+        />
+      </div>
+    </div>
+
+    <div class="flex items-center mt-1">
+      <label class="font-bold w-1/3 block" for="inline-full-name">
+        {{ t('Size') }}
+      </label>
+      <div class="md:w-2/3">
+        <span>Slider</span>
+        <input type="number" min="0" max="40" step="1" />
+      </div>
+    </div>
+
+    <div class="flex items-center mt-1 mb-2">
+      <label class="font-bold w-1/3 block" for="inline-full-name">
+        {{ t('Angle') }}
+      </label>
+      <div class="md:w-2/3">
+        <span>Slider</span>
+        <input type="number" min="0" max="40" step="1" />
+      </div>
+    </div>
+  </template>
+
+  <template v-if="feature === 'LineString'">
+    <div class="flex items-center">
+      <label class="font-bold w-1/3 block" for="inline-full-name">
+        {{ t('Color') }}
+      </label>
+      <div class="md:w-2/3">
+        <input
+          class="leading-tight"
+          id="inline-full-name"
+          type="color"
+          value=""
+        />
+      </div>
+    </div>
+
+    <div class="flex items-center mt-1">
+      <label class="font-bold w-1/3 block" for="inline-full-name">
+        {{ t('Stroke width') }}
+      </label>
+      <div class="md:w-2/3">
+        <span>Slider</span>
+        <input type="number" min="0" max="40" step="1" />
+      </div>
+    </div>
+
+    <div class="flex items-center mt-1 mb-2">
+      <label class="font-bold w-1/3 block" for="inline-full-name">
+        {{ t('Style') }}
+      </label>
+      <div class="md:w-2/3">
+        <span>label style todo</span>
+      </div>
+    </div>
+
+    <div class="flex items-center mt-1 mb-2">
+      <label class="font-bold w-1/3 block" for="inline-full-name">
+        {{ t('Show orientation') }}
+      </label>
+      <div class="md:w-2/3">
+        <input type="checkbox" />
+      </div>
+    </div>
+
+    <div class="flex items-center mt-1 mb-2">
+      <button class="lux-btn-primary">
+        {{ t('Changer sens de la ligne') }}
+      </button>
+    </div>
+  </template>
+</template>
diff --git a/src/components/footer/footer-bar.vue b/src/components/footer/footer-bar.vue
index fee150d8..1387cedd 100644
--- a/src/components/footer/footer-bar.vue
+++ b/src/components/footer/footer-bar.vue
@@ -8,9 +8,15 @@ import { useTranslation } from 'i18next-vue'
 import { useAppStore } from '@/stores/app.store'
 
 const { t, i18next } = useTranslation()
-const { setLayersOpen, setDrawToolbarOpen, toggleMyMapsOpen } = useAppStore()
-const { layersOpen, drawToolbarOpen, styleEditorOpen, myMapsOpen } =
-  storeToRefs(useAppStore())
+const appStore = useAppStore()
+const { setLayersOpen, setDrawToolbarOpen, toggleMyMapsOpen } = appStore
+const {
+  layersOpen,
+  drawToolbarOpen,
+  styleEditorOpen,
+  myMapsOpen,
+  themeGridOpen,
+} = storeToRefs(appStore)
 
 function onClickLayersIcon() {
   const open = !layersOpen.value
@@ -20,6 +26,8 @@ function onClickLayersIcon() {
     styleEditorOpen.value = false
     myMapsOpen.value = false
   }
+
+  themeGridOpen.value = false
 }
 </script>
 <template>
diff --git a/src/components/header/header-bar.vue b/src/components/header/header-bar.vue
index 8030e6c3..0a9bfe44 100644
--- a/src/components/header/header-bar.vue
+++ b/src/components/header/header-bar.vue
@@ -10,8 +10,10 @@ import { themeSelectorService } from '../theme-selector/theme-selector.service'
 
 const { t } = useTranslation()
 const appStore = useAppStore()
-const { layersOpen, myLayersTabOpen, themeGridOpen } = storeToRefs(appStore)
-const { setLayersOpen, setMyLayersTabOpen, setThemeGridOpen } = appStore
+const { layersOpen, myLayersTabOpen, myMapsOpen, themeGridOpen } =
+  storeToRefs(appStore)
+const { setLayersOpen, setMyLayersTabOpen, setThemeGridOpen, toggleThemeGrid } =
+  appStore
 const themeStore = useThemeStore()
 const { theme } = storeToRefs(themeStore)
 
@@ -26,18 +28,21 @@ watch(
 )
 
 function onClick() {
-  if (!layersOpen.value) {
-    setLayersOpen(true)
-    myLayersTabOpen.value && setMyLayersTabOpen(false)
-    setThemeGridOpen(true)
-  } else if (layersOpen.value) {
-    if (themeGridOpen.value) {
-      setLayersOpen(false)
-    } else {
-      myLayersTabOpen.value && setMyLayersTabOpen(false)
-      setThemeGridOpen(true)
-    }
-  }
+  // if (!layersOpen.value) {
+  //   setLayersOpen(true)
+  //   myLayersTabOpen.value && setMyLayersTabOpen(false)
+  //   setThemeGridOpen(true)
+  //   myMapsOpen.value = false
+  // } else if (layersOpen.value) {
+  //   if (themeGridOpen.value) {
+  //     setLayersOpen(false)
+  //   } else {
+  //     myLayersTabOpen.value && setMyLayersTabOpen(false)
+  //     setThemeGridOpen(true)
+  //   }
+  // }
+
+  toggleThemeGrid()
 }
 </script>
 
diff --git a/src/components/layer-manager/layer-manager.vue b/src/components/layer-manager/layer-manager.vue
index 41f282dd..663ea169 100644
--- a/src/components/layer-manager/layer-manager.vue
+++ b/src/components/layer-manager/layer-manager.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
 import { computed, onMounted, ShallowRef, shallowRef } from 'vue'
 import { storeToRefs } from 'pinia'
-import Sortable, { SortableEvent } from 'sortablejs'
 import { useTranslation } from 'i18next-vue'
 
 import { useAppStore } from '@/stores/app.store'
 import { useMapStore } from '@/stores/map.store'
 import { useMetadataStore } from '@/stores/metadata.store'
 import type { Layer, LayerId } from '@/stores/map.store.model'
+import useSortable from '@/composables/sortable'
 import { BLANK_BACKGROUNDLAYER } from '@/composables/background-layer/background-layer.model'
 import useMvtStyles from '@/composables/mvt-styles/mvt-styles.composable'
 import { useSliderComparatorStore } from '@/stores/slider-comparator.store'
-import { isFireFox } from '@/services/utils'
 
 import LayerItemBackground from './layer-item/layer-item-background.vue'
 import LayerItem from './layer-item/layer-item.vue'
@@ -40,35 +39,24 @@ const showAddLayerButton = computed(() => !isOffLine.value)
 const emit = defineEmits(['displayCatalog'])
 
 onMounted(() => {
-  const sortableParams = <Sortable.Options>{
-    dragClass: 'lux-sortable-drag',
-    ghostClass: 'lux-sortable-ghost',
-    sort: true,
-    handle: `.${dragHandleClassName}`,
-    forceFallback: isFireFox, // Otherwise, doesnt work for FF
-  }
-  const sortableLayersDOM = document.querySelector('.sortable-layers')
-  const sortableLayers3dDOM = document.querySelector('.sortable-layers-3d')
-
-  sortableLayersDOM &&
-    Sortable.create(<HTMLElement>sortableLayersDOM, {
-      ...sortableParams,
-      ...{ onSort: sortMethod },
-    })
-  sortableLayers3dDOM &&
-    Sortable.create(<HTMLElement>sortableLayers3dDOM, {
-      ...sortableParams,
-      ...{ onSort: sort3dMethod },
-    })
+  const sortableLayersDOM = <HTMLElement>(
+    document.querySelector('.sortable-layers')
+  )
+  const sortableLayers3dDOM = <HTMLElement>(
+    document.querySelector('.sortable-layers-3d')
+  )
+
+  useSortable(sortableLayersDOM, { onSort: sortMethod })
+  useSortable(sortableLayers3dDOM, { onSort: sort3dMethod })
 })
 
-function sortMethod(event: SortableEvent, is3d?: boolean) {
-  const layersIds = [...event.to.children].map(val => Number(val.id)).reverse()
+function sortMethod(elements: HTMLCollection, is3d?: boolean) {
+  const layersIds = [...elements].map(val => Number(val.id)).reverse()
   mapStore.reorderLayers(layersIds, is3d)
 }
 
-function sort3dMethod(event: SortableEvent) {
-  sortMethod(event, true)
+function sort3dMethod(elements: HTMLCollection) {
+  sortMethod(elements, true)
 }
 
 function changeOpacityLayer(layer: Layer, opacity: number) {
diff --git a/src/components/my-maps/my-maps-panel.vue b/src/components/my-maps/my-maps-panel.vue
index b5c1dd98..2833d6bc 100644
--- a/src/components/my-maps/my-maps-panel.vue
+++ b/src/components/my-maps/my-maps-panel.vue
@@ -2,6 +2,7 @@
 import { useTranslation } from 'i18next-vue'
 
 import SidePanelLayout from '@/components/common/side-panel-layout.vue'
+import DrawPanel from '@/components/draw/draw-panel.vue'
 
 import { useAppStore } from '@/stores/app.store'
 
@@ -41,6 +42,8 @@ function clickCreateNewMap() {
           {{ t('Créer une nouvelle carte', { ns: 'client' }) }}
         </button>
       </div>
+
+      <DrawPanel />
     </template>
   </side-panel-layout>
 </template>
diff --git a/src/composables/sortable.ts b/src/composables/sortable.ts
new file mode 100644
index 00000000..38293e4c
--- /dev/null
+++ b/src/composables/sortable.ts
@@ -0,0 +1,34 @@
+import { onMounted } from 'vue'
+import Sortable from 'sortablejs'
+
+import { isFireFox } from '@/services/utils'
+
+export interface SortableParams extends Omit<Sortable.Options, 'onSort'> {
+  onSort: (elements: HTMLCollection) => void
+}
+
+export default function useSortable(
+  element: HTMLElement,
+  params?: SortableParams
+) {
+  let sortable: Sortable | undefined
+  const sortableParams = <Sortable.Options>{
+    dragClass: 'lux-sortable-drag',
+    ghostClass: 'lux-sortable-ghost',
+    sort: true,
+    handle: '.drag-handle',
+    forceFallback: isFireFox, // Otherwise, doesnt work for FF
+  }
+
+  if (params?.onSort) {
+    sortableParams.onSort = event => params.onSort(event.to.children)
+  }
+
+  element &&
+    (sortable = Sortable.create(element, {
+      ...sortableParams,
+      ...((params && (({ onSort, ...rest }) => rest)(params)) || {}), // inline synthax to extract onSort
+    }))
+
+  return sortable
+}
diff --git a/src/stores/app.store.ts b/src/stores/app.store.ts
index 8abd5d6a..5508177d 100644
--- a/src/stores/app.store.ts
+++ b/src/stores/app.store.ts
@@ -35,12 +35,29 @@ export const useAppStore = defineStore(
 
     function setMyLayersTabOpen(open: boolean) {
       myLayersTabOpen.value = open
+
+      if (myLayersTabOpen.value) {
+        themeGridOpen.value = false
+      }
     }
 
     function setThemeGridOpen(open: boolean) {
       themeGridOpen.value = open
     }
 
+    function toggleThemeGrid() {
+      if (themeGridOpen.value) {
+        layersOpen.value = false
+        myMapsOpen.value = false
+        themeGridOpen.value = false
+      } else {
+        themeGridOpen.value = true
+        layersOpen.value = true
+        myMapsOpen.value = false
+        myLayersTabOpen.value && (myLayersTabOpen.value = false)
+      }
+    }
+
     function setRemoteLayersOpen(open: boolean) {
       remoteLayersOpen.value = open
     }
@@ -65,6 +82,7 @@ export const useAppStore = defineStore(
       if (drawToolbarOpen.value) {
         myMapsOpen.value = true
         layersOpen.value = false
+        themeGridOpen.value = false
       }
     }
 
@@ -74,6 +92,7 @@ export const useAppStore = defineStore(
       if (myMapsOpen.value) {
         styleEditorOpen.value = false
         layersOpen.value = false
+        themeGridOpen.value = false
       }
     }
 
@@ -100,6 +119,7 @@ export const useAppStore = defineStore(
       setDrawToolbarOpen,
       isOffLine,
       toggleMyMapsOpen,
+      toggleThemeGrid,
     }
   },
   {}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 85414030..f8fd3087 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -70,6 +70,7 @@ module.exports = {
         primary: 'var(--color-primary)',
         secondary: 'var(--color-secondary)',
         tertiary: 'var(--color-tertiary)',
+        quaternary: 'var(--color-quaternary)',
         ...generateThemeColors(),
       },
       fontFamily: {
@@ -218,6 +219,15 @@ function generateThemeSafelist() {
     `hover:text-${theme}-primary`,
     `after:content-${theme}`,
     `before:content-${theme}`,
+    `${theme}-secondary`,
+    `bg-${theme}-secondary`,
+    `hover:text-${theme}-secondary`,
+    `${theme}-tertiary`,
+    `bg-${theme}-tertiary`,
+    `hover:text-${theme}-tertiary`,
+    `${theme}-quaternary`,
+    `bg-${theme}-quaternary`,
+    `hover:text-${theme}-quaternary`,
   ])
 }
 function generateIconSafelist() {
@@ -232,6 +242,7 @@ function generateThemeColors() {
       [`${theme}-primary`, `var(--${theme}-primary)`],
       [`${theme}-secondary`, `var(--${theme}-secondary)`],
       [`${theme}-tertiary`, `var(--${theme}-tertiary)`],
+      [`${theme}-quaternary`, `var(--${theme}-quaternary)`],
     ])
   )
 }

From 1c20a5699566cb4ec7977b2d3c3cebcf2152882c Mon Sep 17 00:00:00 2001
From: AlitaBernachot <alita.bernachot@camptocamp.com>
Date: Fri, 9 Aug 2024 16:44:29 +0200
Subject: [PATCH 3/9] feat: new dropdown menu

---
 public/assets/locales/app.de.json | 1 +
 public/assets/locales/app.en.json | 1 +
 public/assets/locales/app.fr.json | 1 +
 public/assets/locales/app.lb.json | 1 +
 4 files changed, 4 insertions(+)

diff --git a/public/assets/locales/app.de.json b/public/assets/locales/app.de.json
index 89c5ae13..50d3bbc5 100644
--- a/public/assets/locales/app.de.json
+++ b/public/assets/locales/app.de.json
@@ -4,6 +4,7 @@
   "Change opacity for {{layerName}}": "",
   "Display full description": "",
   "Display informations for \"{{layerName}}\"": "",
+  "Drawings menu": "",
   "Edit the start date": "",
   "Edit the end date": "",
   "Hide full description": "",
diff --git a/public/assets/locales/app.en.json b/public/assets/locales/app.en.json
index 8958a257..72f5997b 100644
--- a/public/assets/locales/app.en.json
+++ b/public/assets/locales/app.en.json
@@ -4,6 +4,7 @@
   "Change opacity for {{layerName}}": "",
   "Display full description": "",
   "Display informations for \"{{layerName}}\"": "",
+  "Drawings menu": "",
   "Edit the start date": "",
   "Edit the end date": "",
   "Hide full description": "",
diff --git a/public/assets/locales/app.fr.json b/public/assets/locales/app.fr.json
index d9c4ca1d..85395a99 100644
--- a/public/assets/locales/app.fr.json
+++ b/public/assets/locales/app.fr.json
@@ -4,6 +4,7 @@
   "Change opacity for {{layerName}}": "Modifier l'opacité pour la couche {{layerName}}",
   "Display full description": "Afficher la description complète",
   "Display informations for \"{{layerName}}\"": "Afficher les informations pour \"{{layerName}}\"",
+  "Drawings menu": "Afficher les options de dessins",
   "Edit the start date": "Modifier la date de début",
   "Edit the end date": "Modifier la date de fin",
   "Hide full description": "Cacher la description complète",
diff --git a/public/assets/locales/app.lb.json b/public/assets/locales/app.lb.json
index 6a084848..0ca0fe4d 100644
--- a/public/assets/locales/app.lb.json
+++ b/public/assets/locales/app.lb.json
@@ -4,6 +4,7 @@
   "Change opacity for {{layerName}}": "",
   "Display full description": "",
   "Display informations for \"{{layerName}}\"": "",
+  "Drawings menu": "",
   "Edit the start date": "",
   "Edit the end date": "",
   "Hide full description": "",

From 19a0098f74087fe2d72d1d41dc63aa2ef1cb319c Mon Sep 17 00:00:00 2001
From: AlitaBernachot <alita.bernachot@camptocamp.com>
Date: Fri, 9 Aug 2024 16:45:00 +0200
Subject: [PATCH 4/9] feat: new dropdown menu

---
 src/assets/main.css                           |  7 +-
 src/assets/ol.css                             |  4 +-
 src/components/common/menu-popup.vue          | 65 ----------------
 .../common/menu-popup/menu-popup-item.vue     | 19 +++++
 .../common/menu-popup/menu-popup.vue          | 76 +++++++++++++++++++
 src/components/draw/draw-panel-item-sub.vue   | 54 +++++++++++--
 src/components/draw/draw-panel.vue            | 27 ++++++-
 7 files changed, 175 insertions(+), 77 deletions(-)
 delete mode 100644 src/components/common/menu-popup.vue
 create mode 100644 src/components/common/menu-popup/menu-popup-item.vue
 create mode 100644 src/components/common/menu-popup/menu-popup.vue

diff --git a/src/assets/main.css b/src/assets/main.css
index 745ca0a4..3292962d 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -343,6 +343,11 @@
   .lux-drawing-item-content {
     @apply bg-secondary mt-1 mb-2 p-3;
   }
+
+  .lux-menu-popup-list {
+    @apply py-1 z-50 absolute text-[color:var(--color-default)] bg-white border-[color:var(--color-border-default)] border-[1px];
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  }
 }
 
 .fa-solid {
@@ -366,7 +371,7 @@
     --color-tertiary: #1f5d87;
     --color-quaternary: #20638f;
     --color-navbar-default: #777;
-    --color-btn-ol: #8394a0;
+    --color-border-default: #8394a0;
     --main-primary: #2980b9;
     --main-secondary: #97bbd3;
     --main-tertiary: #1f5d87;
diff --git a/src/assets/ol.css b/src/assets/ol.css
index 57a86dda..5043dff4 100644
--- a/src/assets/ol.css
+++ b/src/assets/ol.css
@@ -16,7 +16,7 @@
   }
 
   .ol-control button {
-    @apply w-10 h-10 text-xl text-center font-normal indent-0 block ol-btn m-[-1px] p-0 border-[1px] border-[color:var(--color-btn-ol)];
+    @apply w-10 h-10 text-xl text-center font-normal indent-0 block ol-btn m-[-1px] p-0 border-[1px] border-[color:var(--color-border-default)];
     font-family: 'geoportail-icons-wc';
   }
 
@@ -37,7 +37,7 @@
   }
 
   .lux-control {
-    @apply p-0 right-2 z-[2] border-[color:var(--color-btn-ol)] border-[1px];
+    @apply p-0 right-2 z-[2] border-[color:var(--color-border-default)] border-[1px];
   }
 
   .geoportailv3-attribution {
diff --git a/src/components/common/menu-popup.vue b/src/components/common/menu-popup.vue
deleted file mode 100644
index f8a6dcce..00000000
--- a/src/components/common/menu-popup.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import { onMounted, onUnmounted, shallowRef, ShallowRef } from 'vue'
-
-const props = defineProps<{
-    options: string[]
-    direction?: 'up' | 'down'
-  }>()
-const emit = defineEmits(['change'])
-const isOpen: ShallowRef<boolean> = shallowRef(false)
-const selectedValue: ShallowRef<string | undefined> = shallowRef()
-
-function handleClick(event: MouseEvent) {
-  event.stopPropagation()
-  toggleDropdown()
-}
-
-function toggleDropdown(forceOpen?: boolean) {
-  isOpen.value = forceOpen ?? !isOpen.value
-}
-
-function onClickOpenBtn(event: MouseEvent) {
-  event.stopImmediatePropagation()
-  toggleDropdown()
-}
-
-function onClickItem(event: MouseEvent) {
-  selectedValue.value = (event.target as HTMLElement).dataset.value
-  emit('change', selectedValue.value)
-}
-
-function onClickOutsideOpenBtn() {
-  toggleDropdown(false)
-}
-
-onMounted(() => document.addEventListener('click', onClickOutsideOpenBtn))
-onUnmounted(() => document.removeEventListener('click', onClickOutsideOpenBtn))
-</script>
-
-<template>
-  <div class="lux-menu-popup">
-    <button class="float-right" @click="handleClick">
-      <i class="fa-solid fa-square-caret-down"></i>
-    </button>
-
-    <ul
-        class="lux-menu-popup-list absolute"
-        :class="isOpen ? '' : 'hidden'"
-        tabindex="-1"
-      >
-        <li
-          v-for="option in props.options"
-          :key="option"
-        >
-          <button
-            class="lux-dropdown-list-item"
-            :aria-label="option"
-            :data-value="option"
-            @click="onClickItem"
-          >
-            {{ option }}
-          </button>
-        </li>
-      </ul>
-  </div>
-</template>
diff --git a/src/components/common/menu-popup/menu-popup-item.vue b/src/components/common/menu-popup/menu-popup-item.vue
new file mode 100644
index 00000000..8f091af4
--- /dev/null
+++ b/src/components/common/menu-popup/menu-popup-item.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps<{
+  item: {label: string, action?: (event?: MouseEvent) => any}
+}>()
+const emit = defineEmits(['click'])
+
+function onClick() {
+  emit('click', props.item)
+}
+</script>
+
+<template>
+  <button
+      class="lux-dropdown-list-item"
+      @click="onClick"
+    >
+    <slot>{{ item.label }}</slot>
+    </button>
+</template>
diff --git a/src/components/common/menu-popup/menu-popup.vue b/src/components/common/menu-popup/menu-popup.vue
new file mode 100644
index 00000000..296f454d
--- /dev/null
+++ b/src/components/common/menu-popup/menu-popup.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, shallowRef, ShallowRef, Ref, ref, watch } from 'vue'
+
+const props = defineProps<{
+    items: {label: string, action?: (event?: MouseEvent) => any}[]
+    direction?: 'up' | 'down'
+    ariaLabel?: string
+    ariaLabelledby?: string
+  }>()
+const emit = defineEmits(['change'])
+const isOpen: ShallowRef<boolean> = shallowRef(false)
+const selectedValue: ShallowRef<string | undefined> = shallowRef()
+const btnElement: Ref<HTMLElement | null> = ref(null)
+const ddElement: Ref<HTMLElement | null> = ref(null)
+
+function handleClick(event: MouseEvent) {
+  event.stopPropagation()
+  toggleDropdown()
+}
+
+function toggleDropdown(forceOpen?: boolean) {
+  isOpen.value = forceOpen ?? !isOpen.value
+}
+
+function onClickOpenBtn(event: MouseEvent) {
+  event.stopImmediatePropagation()
+  toggleDropdown()
+}
+
+function onClickOutsideOpenBtn() {
+  toggleDropdown(false)
+}
+
+onMounted(() => document.addEventListener('click', onClickOutsideOpenBtn))
+onUnmounted(() => document.removeEventListener('click', onClickOutsideOpenBtn))
+
+watch((isOpen), isOpen => {
+  if (!isOpen) return
+
+  const opener = btnElement.value!
+  const dropdown = ddElement.value!
+  const rect = opener.getBoundingClientRect()
+  const top = props.direction === 'down' ? rect.bottom : rect.top - dropdown.offsetHeight
+
+  dropdown.style.top = `${top}px`
+  dropdown.style.left = `${rect.left + rect.width - dropdown.offsetWidth}px`
+})
+</script>
+
+<template>
+  <div class="lux-menu-popup">
+    <button @click="handleClick" ref="btnElement">
+      <slot></slot>
+    </button>
+
+    <Teleport to="body">
+      <ul
+          :aria-label="ariaLabel"
+          :aria-labelledby="ariaLabelledby"
+          class="lux-menu-popup-list"
+          :class="isOpen ? '' : 'invisible'"
+          ref="ddElement"
+          role="menu"
+        >
+        <li
+          v-for="item in props.items"
+          :key="item.label"
+        >
+          <slot :name="`item`" :item="item">
+            {{ item.label }}
+          </slot>
+        </li>
+      </ul>
+    </Teleport>
+  </div>
+</template>
diff --git a/src/components/draw/draw-panel-item-sub.vue b/src/components/draw/draw-panel-item-sub.vue
index 1fdbc9ea..c76a70b3 100644
--- a/src/components/draw/draw-panel-item-sub.vue
+++ b/src/components/draw/draw-panel-item-sub.vue
@@ -2,18 +2,19 @@
 import { computed, ref } from 'vue'
 import { useTranslation } from 'i18next-vue'
 
-import MenuPopup from '@/components/common/menu-popup.vue'
+import MenuPopup from '@/components/common/menu-popup/menu-popup.vue'
+import MenuPopupItem from '@/components/common/menu-popup/menu-popup-item.vue'
 
 import FeatureDelete from './feature-delete.vue'
 import FeatureEditInfo from './feature-edit-info.vue'
 import FeatureEditStyle from './feature-edit-style.vue'
 
-const { t } = useTranslation()
-const props = defineProps<{
+defineProps<{
   isEditing: boolean
   feature: string
 }>()
 
+const { t } = useTranslation()
 const isEditingInfo = ref(false)
 const isEditingStyle = ref(false)
 const isDeleting = ref(false)
@@ -21,6 +22,14 @@ const isModifiying = computed(
   () => isEditingInfo.value || isEditingStyle.value || isDeleting.value
 )
 
+const drawingMenuOptions = [
+  { label: 'Exporter un GPX', action: () => console.log('TODO')},
+  { label: 'Exporter un KML', action: () => console.log('TODO')},
+  { label: 'Exporter un Shapefile', action: () => console.log('TODO')},
+  { label: 'Changer sens de la ligne', action: () => console.log('TODO')},
+  { label: 'Créer cercle concentrique', action: () => console.log('TODO')}
+]
+
 function onCancel() {
   isEditingInfo.value = isEditingStyle.value = isDeleting.value = false
 }
@@ -33,21 +42,30 @@ function onRemove() {
   isEditingInfo.value = isEditingStyle.value = false
   isDeleting.value = true
 }
+
+function onClickDock() {
+  console.log('TODO')
+}
 </script>
 
 <template>
   <template v-if="!isModifiying">
+    <!-- Attach this UI in a popup under the feature on the map -->
     <i
       class="fa fa-object-ungroup float-right"
       role="button"
       v-if="!isModifiying"
+      @click="onClickDock"
       >&nbsp;</i
     >
 
+    <!-- Spacer -->
     <div class="min-h-8" v-if="!isModifiying"></div>
 
     <!-- Default display feature options -->
     <div v-if="!isModifiying">
+
+      <!-- Button edit feature: EDIT/END EDITION -->
       <button class="lux-btn-primary" v-if="!isEditingStyle">
         {{ t("Editer l'objet") }}
       </button>
@@ -55,22 +73,46 @@ function onRemove() {
         {{ t('Terminer édition') }}
       </button>
 
+      <!-- List of actions on the current feature -->
       <div class="flex text-primary items-center gap-2 float-right">
+
+        <!-- Fit view on current feature -->
         <button @click="onSearch"><i class="fa fa-search"></i></button>
+
+        <!-- Edit current feature -->
         <button @click="() => (isEditingInfo = true)">
           <i class="fa fa-pencil"></i>
         </button>
+
+        <!-- Edit current feature style -->
         <button @click="() => (isEditingStyle = true)">
           <i class="fa fa-paint-brush"></i>
         </button>
+
+        <!-- Remove feature from the map -->
         <button @click="onRemove"><i class="fa fa-trash"></i></button>
-        
-        <MenuPopup :options="['toto']" :direction="'down'" />
+
+        <!-- Menu dropdown with all other possible actions on feature -->
+        <MenuPopup :items="drawingMenuOptions"
+            :direction="'up'"
+            :ariaLabel="t('Drawings menu')"
+            >
+            <!-- Button to open the menu -->
+            <i class="fa-solid fa-square-caret-down hover:text-tertiary"></i>
+            <!-- Loop through items for the menu -->
+            <template #item="{ item }">
+              <MenuPopupItem
+                :item="item"
+                @click="() => item.action && item.action()">
+                {{ t(item.label) }}
+              </MenuPopupItem>
+            </template>
+        </MenuPopup>
       </div>
     </div>
   </template>
 
-  <!-- Is modifying feature -->
+  <!-- UI when user is modifying feature -->
   <template v-else>
     <FeatureEditInfo v-if="isEditingInfo" />
     <FeatureEditStyle v-if="isEditingStyle" :feature="feature" />
diff --git a/src/components/draw/draw-panel.vue b/src/components/draw/draw-panel.vue
index 3acd44db..f5a1e841 100644
--- a/src/components/draw/draw-panel.vue
+++ b/src/components/draw/draw-panel.vue
@@ -2,7 +2,8 @@
 import { onMounted, ref } from 'vue'
 import { useTranslation } from 'i18next-vue'
 
-import MenuPopup from '@/components/common/menu-popup.vue'
+import MenuPopup from '@/components/common/menu-popup/menu-popup.vue'
+import MenuPopupItem from '@/components/common/menu-popup/menu-popup-item.vue'
 import useSortable from '@/composables/sortable'
 import DrawPanelItem from './draw-panel-item.vue'
 
@@ -12,6 +13,14 @@ const isOpenItemPoint = ref(false)
 const isOpenItemPolygon = ref(false)
 const isOpenItemLineString = ref(false)
 
+const drawingMenuOptions = [
+  { label: 'Copier dans ma carte', action: () => console.log('TODO')},
+  { label: 'Effacer tous les dessins', action: () => console.log('TODO')},
+  { label: 'Créer une nouvelle carte à partir de ces dessins', action: () => console.log('TODO')},
+  { label: 'Fusionner des lignes', action: () => console.log('TODO')},
+  { label: 'Couper une ligne', action: () => console.log('TODO')}
+]
+
 onMounted(() => {
   useSortable(<HTMLElement>document.querySelector('.sortable-features'))
 })
@@ -23,8 +32,20 @@ onMounted(() => {
   <div class="lux-draw-panel" data-cy="drawPanel">
     <div class="lux-draw-panel-title flex">
       <h5 class="grow">{{ t('Dessins') }}</h5>
-
-      <MenuPopup :options="['toto']" :direction="'down'" />
+      
+      <MenuPopup :items="drawingMenuOptions"
+            :direction="'down'"
+            :ariaLabel="t('Drawings menu')"
+            >
+            <i class="fa-solid fa-square-caret-down hover:text-tertiary"></i>
+            <template #item="{ item }">
+              <MenuPopupItem
+                :item="item"
+                @click="() => item.action && item.action()">
+                {{ t(item.label) }}
+              </MenuPopupItem>
+            </template>
+      </MenuPopup>
     </div>
 
     <ul class="mx-1 sortable-features">

From c8b082b558f18e803b26ff8046be15a5c0d0bb04 Mon Sep 17 00:00:00 2001
From: AlitaBernachot <alita.bernachot@camptocamp.com>
Date: Fri, 9 Aug 2024 17:37:39 +0200
Subject: [PATCH 5/9] fix: npm run format

---
 src/assets/main.css                           |  2 +-
 .../common/menu-popup/menu-popup-item.vue     |  9 ++--
 .../common/menu-popup/menu-popup.vue          | 51 +++++++++----------
 src/components/draw/draw-panel-item-sub.vue   | 40 +++++++--------
 src/components/draw/draw-panel.vue            | 41 ++++++++-------
 src/components/draw/feature-edit-style.vue    |  2 +-
 src/components/header/header-bar.vue          |  5 +-
 src/composables/sortable.ts                   |  2 +-
 8 files changed, 75 insertions(+), 77 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index 3292962d..12830d92 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -327,7 +327,7 @@
   .lux-tooltip {
     @apply relative bg-black bg-opacity-50 rounded text-white p-1.5 opacity-70 whitespace-nowrap;
   }
-  
+
   .lux-draw-panel-title {
     @apply text-white;
   }
diff --git a/src/components/common/menu-popup/menu-popup-item.vue b/src/components/common/menu-popup/menu-popup-item.vue
index 8f091af4..99254c65 100644
--- a/src/components/common/menu-popup/menu-popup-item.vue
+++ b/src/components/common/menu-popup/menu-popup-item.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const props = defineProps<{
-  item: {label: string, action?: (event?: MouseEvent) => any}
+  item: { label: string; action?: (event?: MouseEvent) => any }
 }>()
 const emit = defineEmits(['click'])
 
@@ -10,10 +10,7 @@ function onClick() {
 </script>
 
 <template>
-  <button
-      class="lux-dropdown-list-item"
-      @click="onClick"
-    >
+  <button class="lux-dropdown-list-item" @click="onClick">
     <slot>{{ item.label }}</slot>
-    </button>
+  </button>
 </template>
diff --git a/src/components/common/menu-popup/menu-popup.vue b/src/components/common/menu-popup/menu-popup.vue
index 296f454d..e00dbec3 100644
--- a/src/components/common/menu-popup/menu-popup.vue
+++ b/src/components/common/menu-popup/menu-popup.vue
@@ -1,15 +1,21 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, shallowRef, ShallowRef, Ref, ref, watch } from 'vue'
+import {
+  onMounted,
+  onUnmounted,
+  shallowRef,
+  ShallowRef,
+  Ref,
+  ref,
+  watch,
+} from 'vue'
 
 const props = defineProps<{
-    items: {label: string, action?: (event?: MouseEvent) => any}[]
-    direction?: 'up' | 'down'
-    ariaLabel?: string
-    ariaLabelledby?: string
-  }>()
-const emit = defineEmits(['change'])
+  items: { label: string; action?: (event?: MouseEvent) => any }[]
+  direction?: 'up' | 'down'
+  ariaLabel?: string
+  ariaLabelledby?: string
+}>()
 const isOpen: ShallowRef<boolean> = shallowRef(false)
-const selectedValue: ShallowRef<string | undefined> = shallowRef()
 const btnElement: Ref<HTMLElement | null> = ref(null)
 const ddElement: Ref<HTMLElement | null> = ref(null)
 
@@ -22,11 +28,6 @@ function toggleDropdown(forceOpen?: boolean) {
   isOpen.value = forceOpen ?? !isOpen.value
 }
 
-function onClickOpenBtn(event: MouseEvent) {
-  event.stopImmediatePropagation()
-  toggleDropdown()
-}
-
 function onClickOutsideOpenBtn() {
   toggleDropdown(false)
 }
@@ -34,13 +35,14 @@ function onClickOutsideOpenBtn() {
 onMounted(() => document.addEventListener('click', onClickOutsideOpenBtn))
 onUnmounted(() => document.removeEventListener('click', onClickOutsideOpenBtn))
 
-watch((isOpen), isOpen => {
+watch(isOpen, isOpen => {
   if (!isOpen) return
 
   const opener = btnElement.value!
   const dropdown = ddElement.value!
   const rect = opener.getBoundingClientRect()
-  const top = props.direction === 'down' ? rect.bottom : rect.top - dropdown.offsetHeight
+  const top =
+    props.direction === 'down' ? rect.bottom : rect.top - dropdown.offsetHeight
 
   dropdown.style.top = `${top}px`
   dropdown.style.left = `${rect.left + rect.width - dropdown.offsetWidth}px`
@@ -55,17 +57,14 @@ watch((isOpen), isOpen => {
 
     <Teleport to="body">
       <ul
-          :aria-label="ariaLabel"
-          :aria-labelledby="ariaLabelledby"
-          class="lux-menu-popup-list"
-          :class="isOpen ? '' : 'invisible'"
-          ref="ddElement"
-          role="menu"
-        >
-        <li
-          v-for="item in props.items"
-          :key="item.label"
-        >
+        :aria-label="ariaLabel"
+        :aria-labelledby="ariaLabelledby"
+        class="lux-menu-popup-list"
+        :class="isOpen ? '' : 'invisible'"
+        ref="ddElement"
+        role="menu"
+      >
+        <li v-for="item in props.items" :key="item.label">
           <slot :name="`item`" :item="item">
             {{ item.label }}
           </slot>
diff --git a/src/components/draw/draw-panel-item-sub.vue b/src/components/draw/draw-panel-item-sub.vue
index c76a70b3..346c36a2 100644
--- a/src/components/draw/draw-panel-item-sub.vue
+++ b/src/components/draw/draw-panel-item-sub.vue
@@ -23,11 +23,11 @@ const isModifiying = computed(
 )
 
 const drawingMenuOptions = [
-  { label: 'Exporter un GPX', action: () => console.log('TODO')},
-  { label: 'Exporter un KML', action: () => console.log('TODO')},
-  { label: 'Exporter un Shapefile', action: () => console.log('TODO')},
-  { label: 'Changer sens de la ligne', action: () => console.log('TODO')},
-  { label: 'Créer cercle concentrique', action: () => console.log('TODO')}
+  { label: 'Exporter un GPX', action: () => console.log('TODO') },
+  { label: 'Exporter un KML', action: () => console.log('TODO') },
+  { label: 'Exporter un Shapefile', action: () => console.log('TODO') },
+  { label: 'Changer sens de la ligne', action: () => console.log('TODO') },
+  { label: 'Créer cercle concentrique', action: () => console.log('TODO') },
 ]
 
 function onCancel() {
@@ -64,7 +64,6 @@ function onClickDock() {
 
     <!-- Default display feature options -->
     <div v-if="!isModifiying">
-
       <!-- Button edit feature: EDIT/END EDITION -->
       <button class="lux-btn-primary" v-if="!isEditingStyle">
         {{ t("Editer l'objet") }}
@@ -75,7 +74,6 @@ function onClickDock() {
 
       <!-- List of actions on the current feature -->
       <div class="flex text-primary items-center gap-2 float-right">
-
         <!-- Fit view on current feature -->
         <button @click="onSearch"><i class="fa fa-search"></i></button>
 
@@ -93,20 +91,22 @@ function onClickDock() {
         <button @click="onRemove"><i class="fa fa-trash"></i></button>
 
         <!-- Menu dropdown with all other possible actions on feature -->
-        <MenuPopup :items="drawingMenuOptions"
-            :direction="'up'"
-            :ariaLabel="t('Drawings menu')"
+        <MenuPopup
+          :items="drawingMenuOptions"
+          :direction="'up'"
+          :ariaLabel="t('Drawings menu')"
+        >
+          <!-- Button to open the menu -->
+          <i class="fa-solid fa-square-caret-down hover:text-tertiary"></i>
+          <!-- Loop through items for the menu -->
+          <template #item="{ item }">
+            <MenuPopupItem
+              :item="item"
+              @click="() => item.action && item.action()"
             >
-            <!-- Button to open the menu -->
-            <i class="fa-solid fa-square-caret-down hover:text-tertiary"></i>
-            <!-- Loop through items for the menu -->
-            <template #item="{ item }">
-              <MenuPopupItem
-                :item="item"
-                @click="() => item.action && item.action()">
-                {{ t(item.label) }}
-              </MenuPopupItem>
-            </template>
+              {{ t(item.label) }}
+            </MenuPopupItem>
+          </template>
         </MenuPopup>
       </div>
     </div>
diff --git a/src/components/draw/draw-panel.vue b/src/components/draw/draw-panel.vue
index f5a1e841..6f773b8f 100644
--- a/src/components/draw/draw-panel.vue
+++ b/src/components/draw/draw-panel.vue
@@ -14,11 +14,14 @@ const isOpenItemPolygon = ref(false)
 const isOpenItemLineString = ref(false)
 
 const drawingMenuOptions = [
-  { label: 'Copier dans ma carte', action: () => console.log('TODO')},
-  { label: 'Effacer tous les dessins', action: () => console.log('TODO')},
-  { label: 'Créer une nouvelle carte à partir de ces dessins', action: () => console.log('TODO')},
-  { label: 'Fusionner des lignes', action: () => console.log('TODO')},
-  { label: 'Couper une ligne', action: () => console.log('TODO')}
+  { label: 'Copier dans ma carte', action: () => console.log('TODO') },
+  { label: 'Effacer tous les dessins', action: () => console.log('TODO') },
+  {
+    label: 'Créer une nouvelle carte à partir de ces dessins',
+    action: () => console.log('TODO'),
+  },
+  { label: 'Fusionner des lignes', action: () => console.log('TODO') },
+  { label: 'Couper une ligne', action: () => console.log('TODO') },
 ]
 
 onMounted(() => {
@@ -32,19 +35,21 @@ onMounted(() => {
   <div class="lux-draw-panel" data-cy="drawPanel">
     <div class="lux-draw-panel-title flex">
       <h5 class="grow">{{ t('Dessins') }}</h5>
-      
-      <MenuPopup :items="drawingMenuOptions"
-            :direction="'down'"
-            :ariaLabel="t('Drawings menu')"
-            >
-            <i class="fa-solid fa-square-caret-down hover:text-tertiary"></i>
-            <template #item="{ item }">
-              <MenuPopupItem
-                :item="item"
-                @click="() => item.action && item.action()">
-                {{ t(item.label) }}
-              </MenuPopupItem>
-            </template>
+
+      <MenuPopup
+        :items="drawingMenuOptions"
+        :direction="'down'"
+        :ariaLabel="t('Drawings menu')"
+      >
+        <i class="fa-solid fa-square-caret-down hover:text-tertiary"></i>
+        <template #item="{ item }">
+          <MenuPopupItem
+            :item="item"
+            @click="() => item.action && item.action()"
+          >
+            {{ t(item.label) }}
+          </MenuPopupItem>
+        </template>
       </MenuPopup>
     </div>
 
diff --git a/src/components/draw/feature-edit-style.vue b/src/components/draw/feature-edit-style.vue
index c6486220..a58855f5 100644
--- a/src/components/draw/feature-edit-style.vue
+++ b/src/components/draw/feature-edit-style.vue
@@ -2,7 +2,7 @@
 import { useTranslation } from 'i18next-vue'
 
 const { t } = useTranslation()
-const props = defineProps<{
+defineProps<{
   feature: string
 }>()
 </script>
diff --git a/src/components/header/header-bar.vue b/src/components/header/header-bar.vue
index 0a9bfe44..f96afcb7 100644
--- a/src/components/header/header-bar.vue
+++ b/src/components/header/header-bar.vue
@@ -10,10 +10,7 @@ import { themeSelectorService } from '../theme-selector/theme-selector.service'
 
 const { t } = useTranslation()
 const appStore = useAppStore()
-const { layersOpen, myLayersTabOpen, myMapsOpen, themeGridOpen } =
-  storeToRefs(appStore)
-const { setLayersOpen, setMyLayersTabOpen, setThemeGridOpen, toggleThemeGrid } =
-  appStore
+const { toggleThemeGrid } = appStore
 const themeStore = useThemeStore()
 const { theme } = storeToRefs(themeStore)
 
diff --git a/src/composables/sortable.ts b/src/composables/sortable.ts
index 38293e4c..9027bd23 100644
--- a/src/composables/sortable.ts
+++ b/src/composables/sortable.ts
@@ -1,4 +1,3 @@
-import { onMounted } from 'vue'
 import Sortable from 'sortablejs'
 
 import { isFireFox } from '@/services/utils'
@@ -27,6 +26,7 @@ export default function useSortable(
   element &&
     (sortable = Sortable.create(element, {
       ...sortableParams,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       ...((params && (({ onSort, ...rest }) => rest)(params)) || {}), // inline synthax to extract onSort
     }))
 

From b67783cca0126eba4cb4871aac777a98e6d3e3ce Mon Sep 17 00:00:00 2001
From: AlitaBernachot <alita.bernachot@camptocamp.com>
Date: Mon, 12 Aug 2024 15:03:07 +0200
Subject: [PATCH 6/9] feat: drawing panel

---
 src/assets/main.css                           | 41 +++++++++++--
 src/assets/ol.css                             |  2 +-
 ...tem-sub.vue => draw-panel-feature-sub.vue} |  4 +-
 src/components/draw/draw-panel-feature.vue    | 61 +++++++++++++++++++
 src/components/draw/draw-panel-item.vue       | 39 ------------
 src/components/draw/draw-panel.vue            | 44 +++++--------
 src/components/draw/feature-edit-info.vue     |  9 ++-
 src/components/draw/feature-edit-style.vue    | 32 ++++------
 .../theme-selector/theme-selector.service.ts  |  2 +-
 .../theme-selector/theme-selector.vue         |  3 +-
 src/main.ts                                   |  6 +-
 src/stores/draw.store.ts                      |  9 ++-
 12 files changed, 145 insertions(+), 107 deletions(-)
 rename src/components/draw/{draw-panel-item-sub.vue => draw-panel-feature-sub.vue} (96%)
 create mode 100644 src/components/draw/draw-panel-feature.vue
 delete mode 100644 src/components/draw/draw-panel-item.vue

diff --git a/src/assets/main.css b/src/assets/main.css
index 12830d92..0f7f00c9 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -94,12 +94,11 @@
 
   .lux-btn {
     @apply bg-white border text-primary py-[6px] px-[12px] hover:bg-primary hover:text-white leading-snug focus:bg-[#e6e6e6] focus:border-[#8c8c8c] focus:[color:var(--color-primary)] focus:lux-outlined;
-    border: 1px solid var(--button-bg-color);
+    border: 1px solid var(--color-gray);
   }
 
   .lux-btn-primary {
-    @apply lux-btn bg-primary text-white hover:bg-quaternary;
-    border: 1px solid var(--color-quaternary);
+    @apply lux-btn bg-primary text-white hover:bg-quaternary border-[1px] border-[color:var(--color-quaternary)];
   }
 
   .lux-btn-grey {
@@ -340,14 +339,46 @@
     @apply text-white;
   }
 
+  .lux-drawing-item-label .selected {
+    @apply bg-tertiary;
+  }
+
   .lux-drawing-item-content {
-    @apply bg-secondary mt-1 mb-2 p-3;
+    @apply mt-1 mb-2 p-3;
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+
+  .lux-drawing-item-content input[type='text'],
+  .lux-drawing-item-content textarea {
+    @apply bg-secondary px-3 py-[6px] text-white;
+  }
+
+  .lux-drawing-item-content input[type='color'],
+  .lux-drawing-item-content input[type='number'] {
+    border: 1px solid rgb(118, 118, 118);
+  }
+
+  .lux-drawing-item-content input[type='number'] {
+    @apply py-[2px] px-1;
   }
 
   .lux-menu-popup-list {
     @apply py-1 z-50 absolute text-[color:var(--color-default)] bg-white border-[color:var(--color-border-default)] border-[1px];
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   }
+
+  .form-control {
+    border: 1px solid var(--color-gray);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  }
+
+  .form-control:focus {
+    border-color: #66afe9;
+    outline: 0;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+      0 0 8px rgba(102, 175, 233, 0.6);
+  }
 }
 
 .fa-solid {
@@ -492,6 +523,6 @@
     --school-secondary: #9e9ac8;
     --school-tertiary: #54278f;
     --school-quaternary: #54278f;
-    --button-bg-color: #ccc;
+    --color-gray: #ccc;
   }
 }
diff --git a/src/assets/ol.css b/src/assets/ol.css
index 5043dff4..a35c78fc 100644
--- a/src/assets/ol.css
+++ b/src/assets/ol.css
@@ -8,7 +8,7 @@
 
   .ol-btn {
     @apply bg-white border text-primary py-[6px] px-[12px] hover:bg-primary hover:text-white leading-snug focus:bg-[#e6e6e6] focus:border-[#8c8c8c] focus:[color:var(--color-primary)] focus:ol-outlined;
-    border: 1px solid var(--button-bg-color);
+    border: 1px solid var(--color-gray);
   }
 
   .ol-control {
diff --git a/src/components/draw/draw-panel-item-sub.vue b/src/components/draw/draw-panel-feature-sub.vue
similarity index 96%
rename from src/components/draw/draw-panel-item-sub.vue
rename to src/components/draw/draw-panel-feature-sub.vue
index 346c36a2..7242e238 100644
--- a/src/components/draw/draw-panel-item-sub.vue
+++ b/src/components/draw/draw-panel-feature-sub.vue
@@ -114,9 +114,9 @@ function onClickDock() {
 
   <!-- UI when user is modifying feature -->
   <template v-else>
-    <FeatureEditInfo v-if="isEditingInfo" />
+    <FeatureEditInfo v-if="isEditingInfo" :feature="feature" />
     <FeatureEditStyle v-if="isEditingStyle" :feature="feature" />
-    <FeatureDelete v-if="isDeleting" />
+    <FeatureDelete v-if="isDeleting" :feature="feature" />
 
     <div class="text-right">
       <button class="lux-btn mr-2" @click="onCancel">{{ t('Cancel') }}</button>
diff --git a/src/components/draw/draw-panel-feature.vue b/src/components/draw/draw-panel-feature.vue
new file mode 100644
index 00000000..9f13d8da
--- /dev/null
+++ b/src/components/draw/draw-panel-feature.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import DrawPanelFeatureSub from './draw-panel-feature-sub.vue'
+
+const props = withDefaults(
+  defineProps<{
+    open?: boolean
+    featureId: number
+    feature: string
+  }>(),
+  {
+    open: true,
+  }
+)
+
+const isOpen = ref(props.open)
+const emit = defineEmits(['closeFeatureItemSub'])
+
+function onClick() {
+  isOpen.value = !isOpen.value
+  emit('closeFeatureItemSub', !isOpen.value)
+}
+</script>
+
+<template>
+  <!-- Drawing type and title -->
+  <button
+    class="lux-drawing-item-label flex items-center gap-1"
+    :aria-expanded="isOpen"
+    :aria-controls="`drawing-item-content-${featureId}`"
+    @click="onClick"
+  >
+    <!-- Dragging button -->
+    <span
+      class="sortable-handle drag-handle fa fa-reorder ui-sortable-handle cursor-move"
+    ></span>
+    <!-- Type of feat. icon -->
+    <span
+      class="lux-icon"
+      :class="{
+        point: feature === 'Point',
+        line: feature === 'LineString',
+        polygon: feature === 'Polygon' || feature === 'Circle',
+      }"
+    ></span>
+    <!-- Feature label -->
+    <span :class="{ selected: isOpen }">
+      {{ feature }}
+    </span>
+  </button>
+
+  <!-- Drawing details -->
+  <div
+    v-if="isOpen"
+    class="lux-drawing-item-content"
+    :id="`drawing-item-content-${featureId}`"
+  >
+    <DrawPanelFeatureSub :is-editing="false" :feature="feature" />
+  </div>
+</template>
diff --git a/src/components/draw/draw-panel-item.vue b/src/components/draw/draw-panel-item.vue
deleted file mode 100644
index c33e7dbd..00000000
--- a/src/components/draw/draw-panel-item.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { useTranslation } from 'i18next-vue'
-
-import DrawPanelItemSub from './draw-panel-item-sub.vue'
-
-const { t } = useTranslation()
-defineProps<{
-  isOpen: boolean
-  drawingId: number
-  feature: string
-}>()
-</script>
-
-<template>
-  <!-- Drawing type and title -->
-  <button
-    class="lux-drawing-item-label flex items-center gap-1"
-    :aria-expanded="isOpen"
-    :aria-controls="`drawing-item-content-${drawingId}`"
-    @click="$emit('closeFeatureItemSub', !isOpen)"
-  >
-    <span
-      class="sortable-handle drag-handle fa fa-reorder ui-sortable-handle cursor-move"
-    ></span>
-    <span class="lux-icon point" v-if="feature === 'Point'"></span>
-    <span class="lux-icon line" v-if="feature === 'LineString'"></span>
-    <span class="lux-icon polygon" v-if="feature === 'Polygon'"></span>
-    <span>{{ t('desfese') }}</span>
-  </button>
-
-  <!-- Drawing details -->
-  <div
-    v-if="isOpen"
-    class="lux-drawing-item-content"
-    :id="`drawing-item-content-${drawingId}`"
-  >
-    <DrawPanelItemSub :is-editing="false" :feature="feature" />
-  </div>
-</template>
diff --git a/src/components/draw/draw-panel.vue b/src/components/draw/draw-panel.vue
index 6f773b8f..b19c1620 100644
--- a/src/components/draw/draw-panel.vue
+++ b/src/components/draw/draw-panel.vue
@@ -1,18 +1,19 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted } from 'vue'
 import { useTranslation } from 'i18next-vue'
 
 import MenuPopup from '@/components/common/menu-popup/menu-popup.vue'
 import MenuPopupItem from '@/components/common/menu-popup/menu-popup-item.vue'
 import useSortable from '@/composables/sortable'
-import DrawPanelItem from './draw-panel-item.vue'
+import { useDrawStore } from '@/stores/draw.store'
 
-const { t } = useTranslation()
+import DrawPanelFeature from './draw-panel-feature.vue'
+import { storeToRefs } from 'pinia'
 
-const isOpenItemPoint = ref(false)
-const isOpenItemPolygon = ref(false)
-const isOpenItemLineString = ref(false)
+const { t } = useTranslation()
 
+const drawStore = useDrawStore()
+const { drawFeatures: features } = storeToRefs(drawStore)
 const drawingMenuOptions = [
   { label: 'Copier dans ma carte', action: () => console.log('TODO') },
   { label: 'Effacer tous les dessins', action: () => console.log('TODO') },
@@ -53,30 +54,13 @@ onMounted(() => {
       </MenuPopup>
     </div>
 
-    <ul class="mx-1 sortable-features">
-      <li class="lux-drawing-item">
-        <DrawPanelItem
-          :is-open="isOpenItemPoint"
-          :drawing-id="32"
-          :feature="'Point'"
-          @closeFeatureItemSub="val => (isOpenItemPoint = val)"
-        />
-      </li>
-      <li class="lux-drawing-item">
-        <DrawPanelItem
-          :is-open="isOpenItemPolygon"
-          :drawing-id="32"
-          :feature="'Polygon'"
-          @closeFeatureItemSub="val => (isOpenItemPolygon = val)"
-        />
-      </li>
-      <li class="lux-drawing-item">
-        <DrawPanelItem
-          :is-open="isOpenItemLineString"
-          :drawing-id="32"
-          :feature="'LineString'"
-          @closeFeatureItemSub="val => (isOpenItemLineString = val)"
-        />
+    <ul class="mx-1 sortable-features" v-if="features.length">
+      <li
+        class="lux-drawing-item"
+        v-for="(feature, index) in features"
+        :key="index"
+      >
+        <DrawPanelFeature :featureId="30" :feature="feature" />
       </li>
     </ul>
   </div>
diff --git a/src/components/draw/feature-edit-info.vue b/src/components/draw/feature-edit-info.vue
index f770b5a5..d65ca142 100644
--- a/src/components/draw/feature-edit-info.vue
+++ b/src/components/draw/feature-edit-info.vue
@@ -2,10 +2,15 @@
 import { useTranslation } from 'i18next-vue'
 
 const { t } = useTranslation()
+
+const props = defineProps<{
+  feature: string
+}>()
+const feature = props.feature
 </script>
 
 <template>
   {{ t('Modification des informations') }}
-  <input type="text" class="block mt-2 mb-4" />
-  <textarea rows="3" class="block mb-4 w-full"></textarea>
+  <input type="text" class="form-control block mt-2 mb-4" v-model="feature" />
+  <textarea rows="3" class="form-control block mb-4 w-full"></textarea>
 </template>
diff --git a/src/components/draw/feature-edit-style.vue b/src/components/draw/feature-edit-style.vue
index a58855f5..d7130092 100644
--- a/src/components/draw/feature-edit-style.vue
+++ b/src/components/draw/feature-edit-style.vue
@@ -12,57 +12,47 @@ defineProps<{
 
   <template v-if="feature === 'Point'">
     <div class="flex items-center">
-      <label class="font-bold w-1/3 block" for="inline-full-name">
+      <label class="font-bold w-1/5 block" for="inline-full-name">
         {{ t('Color') }}
       </label>
       <div class="md:w-2/3">
-        <input
-          class="leading-tight"
-          id="inline-full-name"
-          type="color"
-          value=""
-        />
+        <input class="cursor-pointer" type="color" value="" />
       </div>
     </div>
 
     <div class="flex items-center mt-1">
-      <label class="font-bold w-1/3 block" for="inline-full-name">
+      <label class="font-bold w-1/5 block" for="inline-full-name">
         {{ t('Size') }}
       </label>
       <div class="md:w-2/3">
         <span>Slider</span>
-        <input type="number" min="0" max="40" step="1" />
+        <input class="w-[50px]" type="number" min="0" max="40" step="1" />
       </div>
     </div>
 
     <div class="flex items-center mt-1 mb-2">
-      <label class="font-bold w-1/3 block" for="inline-full-name">
+      <label class="font-bold w-1/5 block" for="inline-full-name">
         {{ t('Angle') }}
       </label>
       <div class="md:w-2/3">
         <span>Slider</span>
-        <input type="number" min="0" max="40" step="1" />
+        <input class="w-[50px]" type="number" min="0" max="40" step="1" />
       </div>
     </div>
   </template>
 
   <template v-if="feature === 'LineString'">
     <div class="flex items-center">
-      <label class="font-bold w-1/3 block" for="inline-full-name">
+      <label class="font-bold w-1/5 block" for="inline-full-name">
         {{ t('Color') }}
       </label>
       <div class="md:w-2/3">
-        <input
-          class="leading-tight"
-          id="inline-full-name"
-          type="color"
-          value=""
-        />
+        <input class="cursor-pointer" type="color" value="" />
       </div>
     </div>
 
     <div class="flex items-center mt-1">
-      <label class="font-bold w-1/3 block" for="inline-full-name">
+      <label class="font-bold w-1/5 block" for="inline-full-name">
         {{ t('Stroke width') }}
       </label>
       <div class="md:w-2/3">
@@ -72,7 +62,7 @@ defineProps<{
     </div>
 
     <div class="flex items-center mt-1 mb-2">
-      <label class="font-bold w-1/3 block" for="inline-full-name">
+      <label class="font-bold w-1/5 block" for="inline-full-name">
         {{ t('Style') }}
       </label>
       <div class="md:w-2/3">
@@ -81,7 +71,7 @@ defineProps<{
     </div>
 
     <div class="flex items-center mt-1 mb-2">
-      <label class="font-bold w-1/3 block" for="inline-full-name">
+      <label class="font-bold w-1/5 block" for="inline-full-name">
         {{ t('Show orientation') }}
       </label>
       <div class="md:w-2/3">
diff --git a/src/components/theme-selector/theme-selector.service.ts b/src/components/theme-selector/theme-selector.service.ts
index 053eb1c1..90346118 100644
--- a/src/components/theme-selector/theme-selector.service.ts
+++ b/src/components/theme-selector/theme-selector.service.ts
@@ -1,7 +1,7 @@
 export class ThemeSelectorService {
   setCurrentThemeColors(themeName: string) {
     const root = document.querySelector(':root') as HTMLElement
-    const colors = ['primary', 'secondary', 'tertiary']
+    const colors = ['primary', 'secondary', 'tertiary', 'quaternary']
     colors.forEach(colorTone => {
       const color = getComputedStyle(root).getPropertyValue(
         `--${themeName}-${colorTone}`
diff --git a/src/components/theme-selector/theme-selector.vue b/src/components/theme-selector/theme-selector.vue
index a75de500..bc8fca0c 100644
--- a/src/components/theme-selector/theme-selector.vue
+++ b/src/components/theme-selector/theme-selector.vue
@@ -4,12 +4,11 @@ import { storeToRefs } from 'pinia'
 
 import useThemes from '@/composables/themes/themes.composable'
 import { useThemeStore } from '@/stores/config.store'
+import { useAppStore } from '@/stores/app.store'
 
 import ThemeGrid from './theme-grid.vue'
 import ThemeSelectorButton from './theme-selector-button.vue'
 
-import { useAppStore } from '@/stores/app.store'
-
 const appStore = useAppStore()
 const { setThemeGridOpen } = appStore
 const { themeGridOpen } = storeToRefs(appStore)
diff --git a/src/main.ts b/src/main.ts
index e716cc75..cfe08cc6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,15 +3,15 @@ import backend from 'i18next-http-backend'
 import I18NextVue from 'i18next-vue'
 
 import { createApp } from 'vue'
+import VueDOMPurifyHTML from 'vue-dompurify-html'
 import { createPinia } from 'pinia'
 
 import { initProjections } from '@/services/projection.utils'
-import App from './App.vue'
-
-import VueDOMPurifyHTML from 'vue-dompurify-html'
 import { useThemeStore } from './stores/config.store'
 import { themesApiFixture } from './__fixtures__/themes.api.fixture'
 
+import App from './App.vue'
+
 import './assets/main.css'
 import './assets/ol.css'
 
diff --git a/src/stores/draw.store.ts b/src/stores/draw.store.ts
index bdeb16f5..f3856048 100644
--- a/src/stores/draw.store.ts
+++ b/src/stores/draw.store.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { Ref, ref } from 'vue'
 
 export type DrawStateActive =
   | undefined
@@ -11,6 +11,12 @@ export type DrawStateActive =
 
 export const useDrawStore = defineStore('draw', () => {
   const drawStateActive = ref<DrawStateActive>(undefined)
+  const drawFeatures: Ref<string[]> = ref([
+    'Point',
+    'Polygon',
+    'LineString',
+    'Circle',
+  ]) // TODO improve typing in an other PR
 
   function toggleActiveState(newState: DrawStateActive) {
     if (drawStateActive.value === newState) {
@@ -21,6 +27,7 @@ export const useDrawStore = defineStore('draw', () => {
   }
 
   return {
+    drawFeatures,
     drawStateActive,
     toggleActiveState,
   }

From b5d66451256be2b926f915c91c97dbbc668e146b Mon Sep 17 00:00:00 2001
From: AlitaBernachot <alita.bernachot@camptocamp.com>
Date: Mon, 12 Aug 2024 18:41:41 +0200
Subject: [PATCH 7/9] feat: features from store

---
 src/assets/main.css                           |   2 +-
 src/components/common/side-panel-layout.vue   |  11 +-
 .../draw/draw-panel-feature-sub.vue           | 126 ----------
 src/components/draw/draw-panel-feature.vue    |  61 -----
 src/components/draw/draw-panel-features.vue   |  65 +++++
 src/components/draw/draw-panel.vue            |  89 +++----
 ...-delete.vue => feature-confirm-delete.vue} |   2 +
 src/components/draw/feature-edit-info.vue     |  22 +-
 .../draw/feature-edit-style-circle.vue        |   7 +
 .../draw/feature-edit-style-line.vue          |   8 +
 .../draw/feature-edit-style-point.vue         |   7 +
 .../draw/feature-edit-style-polygon.vue       |   7 +
 src/components/draw/feature-edit-style.vue    | 235 ++++++++++++------
 src/components/draw/feature-item.vue          |  90 +++++++
 src/components/draw/feature-measurements.vue  |  13 +
 src/components/draw/feature-menu-popup.vue    |  52 ++++
 src/components/draw/feature-sub-content.vue   | 128 ++++++++++
 src/components/draw/feature-sub-wrapper.vue   |  25 ++
 src/components/footer/toolbar-draw.vue        |  11 +-
 .../layer-manager/layer-manager.spec.ts       |   8 +-
 src/components/map/map-popup.vue              |  47 ++++
 .../draw/draw-interaction.composable.ts       |   2 +-
 src/composables/draw/draw.composable.ts       |   7 +-
 .../draw/drawn-features.composable.ts         |  22 +-
 src/stores/draw.store.model.ts                |  15 ++
 src/stores/draw.store.ts                      |  29 ++-
 26 files changed, 758 insertions(+), 333 deletions(-)
 delete mode 100644 src/components/draw/draw-panel-feature-sub.vue
 delete mode 100644 src/components/draw/draw-panel-feature.vue
 create mode 100644 src/components/draw/draw-panel-features.vue
 rename src/components/draw/{feature-delete.vue => feature-confirm-delete.vue} (87%)
 create mode 100644 src/components/draw/feature-edit-style-circle.vue
 create mode 100644 src/components/draw/feature-edit-style-line.vue
 create mode 100644 src/components/draw/feature-edit-style-point.vue
 create mode 100644 src/components/draw/feature-edit-style-polygon.vue
 create mode 100644 src/components/draw/feature-item.vue
 create mode 100644 src/components/draw/feature-measurements.vue
 create mode 100644 src/components/draw/feature-menu-popup.vue
 create mode 100644 src/components/draw/feature-sub-content.vue
 create mode 100644 src/components/draw/feature-sub-wrapper.vue
 create mode 100644 src/components/map/map-popup.vue
 create mode 100644 src/stores/draw.store.model.ts

diff --git a/src/assets/main.css b/src/assets/main.css
index 0f7f00c9..cd1d79f1 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -363,7 +363,7 @@
   }
 
   .lux-menu-popup-list {
-    @apply py-1 z-50 absolute text-[color:var(--color-default)] bg-white border-[color:var(--color-border-default)] border-[1px];
+    @apply py-1 z-50 top-0 left-0 absolute text-[color:var(--color-default)] bg-white border-[color:var(--color-border-default)] border-[1px];
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   }
 
diff --git a/src/components/common/side-panel-layout.vue b/src/components/common/side-panel-layout.vue
index b58f9c46..7a943807 100644
--- a/src/components/common/side-panel-layout.vue
+++ b/src/components/common/side-panel-layout.vue
@@ -9,11 +9,11 @@ const { t } = useTranslation()
 </script>
 
 <template>
-  <div :data-cy="dataCyValue" class="flex flex-col h-full pt-1.5">
+  <div :data-cy="dataCyValue" class="lux-panel flex flex-col h-full pt-1.5">
     <!-- Panel title and close button -->
     <div
       v-if="$slots.header"
-      class="h-16 shrink-0 flex justify-between lux-panel-title"
+      class="lux-panel-title h-16 shrink-0 flex justify-between"
     >
       <slot name="header"></slot>
       <span
@@ -27,12 +27,15 @@ const { t } = useTranslation()
     </div>
 
     <!-- Tabs -->
-    <div v-if="$slots.tabs" class="flex flex-row gap-2 h-10 text-2xl">
+    <div
+      v-if="$slots.tabs"
+      class="lux-panel-tabs flex flex-row gap-2 h-10 text-2xl"
+    >
       <slot name="tabs"></slot>
     </div>
 
     <!-- Panel content -->
-    <div class="relative grow p-2.5 bg-primary overflow-auto">
+    <div class="lux-panel-content relative grow p-2.5 bg-primary overflow-auto">
       <slot name="content" />
     </div>
   </div>
diff --git a/src/components/draw/draw-panel-feature-sub.vue b/src/components/draw/draw-panel-feature-sub.vue
deleted file mode 100644
index 7242e238..00000000
--- a/src/components/draw/draw-panel-feature-sub.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useTranslation } from 'i18next-vue'
-
-import MenuPopup from '@/components/common/menu-popup/menu-popup.vue'
-import MenuPopupItem from '@/components/common/menu-popup/menu-popup-item.vue'
-
-import FeatureDelete from './feature-delete.vue'
-import FeatureEditInfo from './feature-edit-info.vue'
-import FeatureEditStyle from './feature-edit-style.vue'
-
-defineProps<{
-  isEditing: boolean
-  feature: string
-}>()
-
-const { t } = useTranslation()
-const isEditingInfo = ref(false)
-const isEditingStyle = ref(false)
-const isDeleting = ref(false)
-const isModifiying = computed(
-  () => isEditingInfo.value || isEditingStyle.value || isDeleting.value
-)
-
-const drawingMenuOptions = [
-  { label: 'Exporter un GPX', action: () => console.log('TODO') },
-  { label: 'Exporter un KML', action: () => console.log('TODO') },
-  { label: 'Exporter un Shapefile', action: () => console.log('TODO') },
-  { label: 'Changer sens de la ligne', action: () => console.log('TODO') },
-  { label: 'Créer cercle concentrique', action: () => console.log('TODO') },
-]
-
-function onCancel() {
-  isEditingInfo.value = isEditingStyle.value = isDeleting.value = false
-}
-
-function onSearch() {
-  alert('TODO onSearch')
-}
-
-function onRemove() {
-  isEditingInfo.value = isEditingStyle.value = false
-  isDeleting.value = true
-}
-
-function onClickDock() {
-  console.log('TODO')
-}
-</script>
-
-<template>
-  <template v-if="!isModifiying">
-    <!-- Attach this UI in a popup under the feature on the map -->
-    <i
-      class="fa fa-object-ungroup float-right"
-      role="button"
-      v-if="!isModifiying"
-      @click="onClickDock"
-      >&nbsp;</i
-    >
-
-    <!-- Spacer -->
-    <div class="min-h-8" v-if="!isModifiying"></div>
-
-    <!-- Default display feature options -->
-    <div v-if="!isModifiying">
-      <!-- Button edit feature: EDIT/END EDITION -->
-      <button class="lux-btn-primary" v-if="!isEditingStyle">
-        {{ t("Editer l'objet") }}
-      </button>
-      <button class="lux-btn-primary" v-else>
-        {{ t('Terminer édition') }}
-      </button>
-
-      <!-- List of actions on the current feature -->
-      <div class="flex text-primary items-center gap-2 float-right">
-        <!-- Fit view on current feature -->
-        <button @click="onSearch"><i class="fa fa-search"></i></button>
-
-        <!-- Edit current feature -->
-        <button @click="() => (isEditingInfo = true)">
-          <i class="fa fa-pencil"></i>
-        </button>
-
-        <!-- Edit current feature style -->
-        <button @click="() => (isEditingStyle = true)">
-          <i class="fa fa-paint-brush"></i>
-        </button>
-
-        <!-- Remove feature from the map -->
-        <button @click="onRemove"><i class="fa fa-trash"></i></button>
-
-        <!-- Menu dropdown with all other possible actions on feature -->
-        <MenuPopup
-          :items="drawingMenuOptions"
-          :direction="'up'"
-          :ariaLabel="t('Drawings menu')"
-        >
-          <!-- Button to open the menu -->
-          <i class="fa-solid fa-square-caret-down hover:text-tertiary"></i>
-          <!-- Loop through items for the menu -->
-          <template #item="{ item }">
-            <MenuPopupItem
-              :item="item"
-              @click="() => item.action && item.action()"
-            >
-              {{ t(item.label) }}
-            </MenuPopupItem>
-          </template>
-        </MenuPopup>
-      </div>
-    </div>
-  </template>
-
-  <!-- UI when user is modifying feature -->
-  <template v-else>
-    <FeatureEditInfo v-if="isEditingInfo" :feature="feature" />
-    <FeatureEditStyle v-if="isEditingStyle" :feature="feature" />
-    <FeatureDelete v-if="isDeleting" :feature="feature" />
-
-    <div class="text-right">
-      <button class="lux-btn mr-2" @click="onCancel">{{ t('Cancel') }}</button>
-      <button class="lux-btn-primary">{{ t('Validate') }}</button>
-    </div>
-  </template>
-</template>
diff --git a/src/components/draw/draw-panel-feature.vue b/src/components/draw/draw-panel-feature.vue
deleted file mode 100644
index 9f13d8da..00000000
--- a/src/components/draw/draw-panel-feature.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-import DrawPanelFeatureSub from './draw-panel-feature-sub.vue'
-
-const props = withDefaults(
-  defineProps<{
-    open?: boolean
-    featureId: number
-    feature: string
-  }>(),
-  {
-    open: true,
-  }
-)
-
-const isOpen = ref(props.open)
-const emit = defineEmits(['closeFeatureItemSub'])
-
-function onClick() {
-  isOpen.value = !isOpen.value
-  emit('closeFeatureItemSub', !isOpen.value)
-}
-</script>
-
-<template>
-  <!-- Drawing type and title -->
-  <button
-    class="lux-drawing-item-label flex items-center gap-1"
-    :aria-expanded="isOpen"
-    :aria-controls="`drawing-item-content-${featureId}`"
-    @click="onClick"
-  >
-    <!-- Dragging button -->
-    <span
-      class="sortable-handle drag-handle fa fa-reorder ui-sortable-handle cursor-move"
-    ></span>
-    <!-- Type of feat. icon -->
-    <span
-      class="lux-icon"
-      :class="{
-        point: feature === 'Point',
-        line: feature === 'LineString',
-        polygon: feature === 'Polygon' || feature === 'Circle',
-      }"
-    ></span>
-    <!-- Feature label -->
-    <span :class="{ selected: isOpen }">
-      {{ feature }}
-    </span>
-  </button>
-
-  <!-- Drawing details -->
-  <div
-    v-if="isOpen"
-    class="lux-drawing-item-content"
-    :id="`drawing-item-content-${featureId}`"
-  >
-    <DrawPanelFeatureSub :is-editing="false" :feature="feature" />
-  </div>
-</template>
diff --git a/src/components/draw/draw-panel-features.vue b/src/components/draw/draw-panel-features.vue
new file mode 100644
index 00000000..19e04320
--- /dev/null
+++ b/src/components/draw/draw-panel-features.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { onMounted, Ref, ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+
+import useSortable from '@/composables/sortable'
+import { useDrawStore } from '@/stores/draw.store'
+
+import FeatureItem from './feature-item.vue'
+
+const drawStore = useDrawStore()
+const { drawFeatures: features, featureEditionDocked } = storeToRefs(drawStore)
+const currentOpenedFeature: Ref<number | undefined> = ref(undefined)
+const currentEditingFeature: Ref<number | undefined> = ref(undefined)
+
+function onToggleFeatureSub(featureId: number, isOpen: boolean) {
+  // Only one feature details is displayed at once
+  currentOpenedFeature.value = isOpen ? featureId : undefined
+  currentEditingFeature.value = undefined
+}
+
+function onToggleFeatureEdit(featureId: number, isEditing: boolean) {
+  currentEditingFeature.value = isEditing ? featureId : undefined
+  // TODO: continue...
+}
+
+watch(
+  features,
+  (newFeatures, oldFeatures) => {
+    // Last added feature is unfold by default
+    if (oldFeatures === undefined || newFeatures.length > oldFeatures.length) {
+      const currentFeature =
+        newFeatures[oldFeatures === undefined ? 0 : newFeatures.length - 1]
+      currentOpenedFeature.value = currentEditingFeature.value =
+        currentFeature.id
+    }
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  useSortable(<HTMLElement>document.querySelector('.sortable-features'))
+})
+</script>
+
+<template>
+  <ul class="mx-1 sortable-features" v-if="features.length">
+    <li
+      class="lux-drawing-item"
+      v-for="(feature, index) in features"
+      :key="index"
+    >
+      <FeatureItem
+        :isDocked="featureEditionDocked"
+        :isEditing="currentEditingFeature === feature.id"
+        :isOpen="currentOpenedFeature === feature.id"
+        :feature="feature"
+        @toggleFeatureSub="onToggleFeatureSub"
+        @toggleFeatureEdit="onToggleFeatureEdit"
+        @toggleDock="() => (featureEditionDocked = !featureEditionDocked)"
+        @closePopup="() => (featureEditionDocked = false)"
+        @clickDelete="featureId => drawStore.removeFeature(featureId)"
+      />
+    </li>
+  </ul>
+</template>
diff --git a/src/components/draw/draw-panel.vue b/src/components/draw/draw-panel.vue
index b19c1620..8cf5be8f 100644
--- a/src/components/draw/draw-panel.vue
+++ b/src/components/draw/draw-panel.vue
@@ -1,69 +1,72 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
 import { useTranslation } from 'i18next-vue'
 
 import MenuPopup from '@/components/common/menu-popup/menu-popup.vue'
 import MenuPopupItem from '@/components/common/menu-popup/menu-popup-item.vue'
-import useSortable from '@/composables/sortable'
 import { useDrawStore } from '@/stores/draw.store'
 
-import DrawPanelFeature from './draw-panel-feature.vue'
-import { storeToRefs } from 'pinia'
+import DrawPanelFeatures from './draw-panel-features.vue'
 
 const { t } = useTranslation()
 
 const drawStore = useDrawStore()
 const { drawFeatures: features } = storeToRefs(drawStore)
 const drawingMenuOptions = [
-  { label: 'Copier dans ma carte', action: () => console.log('TODO') },
-  { label: 'Effacer tous les dessins', action: () => console.log('TODO') },
+  {
+    label: 'Copier dans ma carte',
+    action: () => alert('TODO: Draw feature click drawingMenuOptions'),
+  },
+  {
+    label: 'Effacer tous les dessins',
+    action: () => alert('TODO: Draw feature click drawingMenuOptions'),
+  },
   {
     label: 'Créer une nouvelle carte à partir de ces dessins',
-    action: () => console.log('TODO'),
+    action: () => alert('TODO: Draw feature click drawingMenuOptions'),
+  },
+  {
+    label: 'Fusionner des lignes',
+    action: () => alert('TODO: Draw feature click drawingMenuOptions'),
+  },
+  {
+    label: 'Couper une ligne',
+    action: () => alert('TODO: Draw feature click drawingMenuOptions'),
   },
-  { label: 'Fusionner des lignes', action: () => console.log('TODO') },
-  { label: 'Couper une ligne', action: () => console.log('TODO') },
 ]
-
-onMounted(() => {
-  useSortable(<HTMLElement>document.querySelector('.sortable-features'))
-})
 </script>
 
 <template>
-  <hr class="separator my-5" />
+  <template v-if="features.length > 0">
+    <hr class="separator my-5" />
 
-  <div class="lux-draw-panel" data-cy="drawPanel">
-    <div class="lux-draw-panel-title flex">
-      <h5 class="grow">{{ t('Dessins') }}</h5>
+    <!-- Title and caret dropdown menu -->
+    <div class="lux-draw-panel absolute w-[93%]" data-cy="drawPanel">
+      <div class="lux-draw-panel-title flex">
+        <h5 class="grow">{{ t('Dessins') }}</h5>
 
-      <MenuPopup
-        :items="drawingMenuOptions"
-        :direction="'down'"
-        :ariaLabel="t('Drawings menu')"
-      >
-        <i class="fa-solid fa-square-caret-down hover:text-tertiary"></i>
-        <template #item="{ item }">
-          <MenuPopupItem
-            :item="item"
-            @click="() => item.action && item.action()"
-          >
-            {{ t(item.label) }}
-          </MenuPopupItem>
-        </template>
-      </MenuPopup>
-    </div>
+        <!-- Dropdown menu -->
+        <MenuPopup
+          :items="drawingMenuOptions"
+          :direction="'down'"
+          :ariaLabel="t('Drawings menu')"
+        >
+          <i class="fa-solid fa-square-caret-down hover:text-tertiary"></i>
+          <template #item="{ item }">
+            <MenuPopupItem
+              :item="item"
+              @click="() => item.action && item.action()"
+            >
+              {{ t(item.label) }}
+            </MenuPopupItem>
+          </template>
+        </MenuPopup>
+      </div>
 
-    <ul class="mx-1 sortable-features" v-if="features.length">
-      <li
-        class="lux-drawing-item"
-        v-for="(feature, index) in features"
-        :key="index"
-      >
-        <DrawPanelFeature :featureId="30" :feature="feature" />
-      </li>
-    </ul>
-  </div>
+      <!-- Drawings/Features list -->
+      <DrawPanelFeatures />
+    </div>
+  </template>
 </template>
 
 <style scoped>
diff --git a/src/components/draw/feature-delete.vue b/src/components/draw/feature-confirm-delete.vue
similarity index 87%
rename from src/components/draw/feature-delete.vue
rename to src/components/draw/feature-confirm-delete.vue
index b6cbebaa..0786e7f0 100644
--- a/src/components/draw/feature-delete.vue
+++ b/src/components/draw/feature-confirm-delete.vue
@@ -6,4 +6,6 @@ const { t } = useTranslation()
 
 <template>
   {{ t('Êtes-vous certain de vouloir effacer cet élément de la carte ?') }}
+
+  <slot name="footer"></slot>
 </template>
diff --git a/src/components/draw/feature-edit-info.vue b/src/components/draw/feature-edit-info.vue
index d65ca142..44f72c27 100644
--- a/src/components/draw/feature-edit-info.vue
+++ b/src/components/draw/feature-edit-info.vue
@@ -1,16 +1,28 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import { useTranslation } from 'i18next-vue'
 
-const { t } = useTranslation()
+import { DrawFeature } from '@/stores/draw.store.model'
 
+const { t } = useTranslation()
 const props = defineProps<{
-  feature: string
+  feature: DrawFeature
 }>()
-const feature = props.feature
+const feat = ref(props.feature)
 </script>
 
 <template>
   {{ t('Modification des informations') }}
-  <input type="text" class="form-control block mt-2 mb-4" v-model="feature" />
-  <textarea rows="3" class="form-control block mb-4 w-full"></textarea>
+  <input
+    type="text"
+    class="form-control block mt-2 mb-4"
+    v-model="feat.label"
+  />
+  <textarea
+    rows="3"
+    class="form-control block w-full"
+    v-model="feat.description"
+  ></textarea>
+
+  <slot name="footer"></slot>
 </template>
diff --git a/src/components/draw/feature-edit-style-circle.vue b/src/components/draw/feature-edit-style-circle.vue
new file mode 100644
index 00000000..fb0af036
--- /dev/null
+++ b/src/components/draw/feature-edit-style-circle.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <slot name="color"></slot>
+  <slot name="lineWidth"></slot>
+  <slot name="transparency"></slot>
+</template>
diff --git a/src/components/draw/feature-edit-style-line.vue b/src/components/draw/feature-edit-style-line.vue
new file mode 100644
index 00000000..9327b261
--- /dev/null
+++ b/src/components/draw/feature-edit-style-line.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <slot name="color"></slot>
+  <slot name="lineWidth"></slot>
+  <slot name="style"></slot>
+  <slot name="orientation"></slot>
+</template>
diff --git a/src/components/draw/feature-edit-style-point.vue b/src/components/draw/feature-edit-style-point.vue
new file mode 100644
index 00000000..2f98e3b1
--- /dev/null
+++ b/src/components/draw/feature-edit-style-point.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <slot name="color"></slot>
+  <slot name="symbole"></slot>
+  <slot name="size"></slot>
+</template>
diff --git a/src/components/draw/feature-edit-style-polygon.vue b/src/components/draw/feature-edit-style-polygon.vue
new file mode 100644
index 00000000..fb0af036
--- /dev/null
+++ b/src/components/draw/feature-edit-style-polygon.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <slot name="color"></slot>
+  <slot name="lineWidth"></slot>
+  <slot name="transparency"></slot>
+</template>
diff --git a/src/components/draw/feature-edit-style.vue b/src/components/draw/feature-edit-style.vue
index d7130092..000392bf 100644
--- a/src/components/draw/feature-edit-style.vue
+++ b/src/components/draw/feature-edit-style.vue
@@ -1,88 +1,183 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useTranslation } from 'i18next-vue'
 
+import { DrawFeature } from '@/stores/draw.store.model'
+
+import FeatureEditStyleCircle from './feature-edit-style-circle.vue'
+import FeatureEditStylePoint from './feature-edit-style-point.vue'
+import FeatureEditStyleLine from './feature-edit-style-line.vue'
+import FeatureEditStylePolygon from './feature-edit-style-polygon.vue'
+
 const { t } = useTranslation()
-defineProps<{
-  feature: string
+const props = defineProps<{
+  feature: DrawFeature
 }>()
+
+const styleComponents = {
+  FeatureEditStyleCircle,
+  FeatureEditStyleLine,
+  FeatureEditStylePoint,
+  FeatureEditStylePolygon,
+}
+// const currentStyleComponent: Ref<keyof typeof styleComponents | undefined> =
+//   ref(undefined)
+
+const currentStyleComponent = computed(() => {
+  const geomType = props.feature.geom
+  if (geomType === 'Point') {
+    return 'FeatureEditStylePoint'
+  }
+
+  if (geomType === 'Circle') {
+    return 'FeatureEditStyleCircle'
+  }
+
+  if (geomType === 'LineString') {
+    return 'FeatureEditStyleLine'
+  }
+
+  if (geomType === 'Polygon') {
+    return 'FeatureEditStylePolygon'
+  }
+
+  return undefined
+})
+
+function onClickChangeOrientation() {}
 </script>
 
 <template>
   {{ t('Style your drawing') }}
 
-  <template v-if="feature === 'Point'">
-    <div class="flex items-center">
-      <label class="font-bold w-1/5 block" for="inline-full-name">
-        {{ t('Color') }}
-      </label>
-      <div class="md:w-2/3">
-        <input class="cursor-pointer" type="color" value="" />
+  <component
+    :is="styleComponents[currentStyleComponent as keyof typeof styleComponents]"
+    :feature="feature"
+  >
+    <template v-slot:color>
+      <div class="flex gap-1 items-center">
+        <label class="font-bold block" for="inline-full-name">
+          {{ t('Color') }}
+        </label>
+        <div class="md:w-2/3">
+          <input class="cursor-pointer" type="color" value="" />
+        </div>
+      </div>
+    </template>
+
+    <template v-slot:size>
+      <div class="flex gap-1 items-center mt-1">
+        <label class="font-bold block" for="inline-full-name">
+          {{ t('Size') }}
+        </label>
+        <div class="md:w-2/3">
+          <input
+            type="range"
+            min="0"
+            max="10"
+            step="1"
+            class="m-2.5 w-16 h-[5px] rounded-lg appearance-none cursor-pointer"
+          />
+          <input class="w-[50px]" type="number" min="0" max="40" step="1" />
+        </div>
       </div>
-    </div>
-
-    <div class="flex items-center mt-1">
-      <label class="font-bold w-1/5 block" for="inline-full-name">
-        {{ t('Size') }}
-      </label>
-      <div class="md:w-2/3">
-        <span>Slider</span>
-        <input class="w-[50px]" type="number" min="0" max="40" step="1" />
+    </template>
+
+    <template v-slot:angle>
+      <div class="flex gap-1 items-center mt-1 mb-2">
+        <label class="font-bold block" for="inline-full-name">
+          {{ t('Angle') }}
+        </label>
+        <div class="md:w-2/3">
+          <input
+            type="range"
+            min="0"
+            max="10"
+            step="1"
+            class="m-2.5 w-16 h-[5px] rounded-lg appearance-none cursor-pointer"
+          />
+          <input class="w-[50px]" type="number" min="0" max="40" step="1" />
+        </div>
       </div>
-    </div>
-
-    <div class="flex items-center mt-1 mb-2">
-      <label class="font-bold w-1/5 block" for="inline-full-name">
-        {{ t('Angle') }}
-      </label>
-      <div class="md:w-2/3">
-        <span>Slider</span>
-        <input class="w-[50px]" type="number" min="0" max="40" step="1" />
+    </template>
+
+    <!-- Symbole for Point -->
+    <template v-slot:symbole>
+      <div class="flex gap-1 items-center mt-1 mb-2">
+        <label class="font-bold block" for="inline-full-name">
+          {{ t('Style') }}
+        </label>
+        <div>
+          <span>label style todo</span>
+        </div>
+      </div>
+    </template>
+
+    <!-- Style for line -->
+    <template v-slot:style>
+      <div class="flex gap-1 items-center mt-1 mb-2">
+        <label class="font-bold block" for="inline-full-name">
+          {{ t('Style') }}
+        </label>
+        <div>
+          <span>label style todo</span>
+        </div>
       </div>
-    </div>
-  </template>
-
-  <template v-if="feature === 'LineString'">
-    <div class="flex items-center">
-      <label class="font-bold w-1/5 block" for="inline-full-name">
-        {{ t('Color') }}
-      </label>
-      <div class="md:w-2/3">
-        <input class="cursor-pointer" type="color" value="" />
+    </template>
+
+    <template v-slot:lineWidth>
+      <div class="flex gap-1 items-center mt-1">
+        <label class="font-bold block" for="inline-full-name">
+          {{ t('Stroke width') }}
+        </label>
+        <div>
+          <input
+            type="range"
+            min="0"
+            max="10"
+            step="1"
+            class="m-2.5 w-16 h-[5px] rounded-lg appearance-none cursor-pointer"
+          />
+          <input type="number" min="0" max="40" step="1" />
+        </div>
       </div>
-    </div>
-
-    <div class="flex items-center mt-1">
-      <label class="font-bold w-1/5 block" for="inline-full-name">
-        {{ t('Stroke width') }}
-      </label>
-      <div class="md:w-2/3">
-        <span>Slider</span>
-        <input type="number" min="0" max="40" step="1" />
+    </template>
+
+    <template v-slot:transparency>
+      <div class="flex gap-1 items-center mt-1">
+        <label class="font-bold block" for="inline-full-name">
+          {{ t('Transparence') }}
+        </label>
+        <div>
+          <input
+            type="range"
+            min="0"
+            max="10"
+            step="1"
+            class="m-2.5 w-16 h-[5px] rounded-lg appearance-none cursor-pointer"
+          />
+          <input type="number" min="0" max="40" step="1" />
+        </div>
       </div>
-    </div>
-
-    <div class="flex items-center mt-1 mb-2">
-      <label class="font-bold w-1/5 block" for="inline-full-name">
-        {{ t('Style') }}
-      </label>
-      <div class="md:w-2/3">
-        <span>label style todo</span>
+    </template>
+
+    <template v-slot:orientation>
+      <div class="flex gap-1 items-center mt-1 mb-2">
+        <label class="font-bold block" for="inline-full-name">
+          {{ t('Show orientation') }}
+        </label>
+        <div>
+          <input type="checkbox" />
+        </div>
       </div>
-    </div>
-
-    <div class="flex items-center mt-1 mb-2">
-      <label class="font-bold w-1/5 block" for="inline-full-name">
-        {{ t('Show orientation') }}
-      </label>
-      <div class="md:w-2/3">
-        <input type="checkbox" />
+
+      <div class="flex gap-1 items-center mt-1 mb-2">
+        <button class="lux-btn-primary" @click="onClickChangeOrientation">
+          {{ t('Changer sens de la ligne') }}
+        </button>
       </div>
-    </div>
-
-    <div class="flex items-center mt-1 mb-2">
-      <button class="lux-btn-primary">
-        {{ t('Changer sens de la ligne') }}
-      </button>
-    </div>
-  </template>
+    </template>
+  </component>
+
+  <slot name="footer"></slot>
 </template>
diff --git a/src/components/draw/feature-item.vue b/src/components/draw/feature-item.vue
new file mode 100644
index 00000000..4445b867
--- /dev/null
+++ b/src/components/draw/feature-item.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { DrawFeature } from '@/stores/draw.store.model'
+
+import FeatureSubContent from './feature-sub-content.vue'
+import FeatureSubWrapper from './feature-sub-wrapper.vue'
+
+const props = withDefaults(
+  defineProps<{
+    isDocked?: boolean
+    isEditing?: boolean
+    isOpen?: boolean
+    feature: DrawFeature
+  }>(),
+  {
+    isDocked: false,
+    isEditing: false,
+    isOpen: false,
+  }
+)
+const emit = defineEmits([
+  'clickDelete',
+  'closePopup',
+  'toggleFeatureSub',
+  'toggleFeatureEdit',
+  'toggleDock',
+])
+
+function onToggleFeatureSub() {
+  emit('toggleFeatureSub', props.feature.id, !props.isOpen)
+}
+
+function onToggleEditFeature() {
+  emit('toggleFeatureEdit', props.feature.id, !props.isEditing)
+
+  alert('TODO: Toggle edition mode')
+}
+
+function onClickDelete() {
+  emit('clickDelete', props.feature.id)
+}
+</script>
+
+<template>
+  <!-- Drawing type and title -->
+  <button
+    class="lux-drawing-item-label flex items-center gap-1"
+    :aria-expanded="isOpen"
+    :aria-controls="`drawing-item-content-${feature.id}`"
+    @click="onToggleFeatureSub"
+  >
+    <!-- Dragging button -->
+    <span
+      class="sortable-handle drag-handle fa fa-reorder ui-sortable-handle cursor-move"
+    ></span>
+    <!-- Type of feat. icon -->
+    <span
+      class="lux-icon"
+      :class="{
+        point: feature.label === 'Point',
+        line: feature.label === 'LineString',
+        polygon: feature.label === 'Polygon' || feature.label === 'Circle',
+      }"
+    ></span>
+    <!-- Feature label -->
+    <span :class="{ selected: isOpen }">
+      {{ feature.label }}
+    </span>
+  </button>
+
+  <!-- Drawing details -->
+  <FeatureSubWrapper
+    v-if="isOpen"
+    :isDocked="isDocked"
+    @closePopup="() => emit('toggleDock')"
+  >
+    <div
+      class="lux-drawing-item-content"
+      :id="`drawing-item-content-${feature.id}`"
+    >
+      <FeatureSubContent
+        :isDocked="isDocked"
+        :isEditingFeature="isEditing"
+        :feature="feature"
+        @toggleEditFeature="onToggleEditFeature"
+        @toggleDock="() => emit('toggleDock')"
+        @clickDelete="onClickDelete"
+      />
+    </div>
+  </FeatureSubWrapper>
+</template>
diff --git a/src/components/draw/feature-measurements.vue b/src/components/draw/feature-measurements.vue
new file mode 100644
index 00000000..8ff9fef8
--- /dev/null
+++ b/src/components/draw/feature-measurements.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { DrawFeature } from '@/stores/draw.store.model'
+
+defineProps<{
+  feature: DrawFeature
+}>()
+</script>
+
+<template>
+  <div>Longueur: todo</div>
+  <div>Area: todo</div>
+  <div>Elevation: todo</div>
+</template>
diff --git a/src/components/draw/feature-menu-popup.vue b/src/components/draw/feature-menu-popup.vue
new file mode 100644
index 00000000..dbb45acf
--- /dev/null
+++ b/src/components/draw/feature-menu-popup.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { useTranslation } from 'i18next-vue'
+
+import MenuPopup from '@/components/common/menu-popup/menu-popup.vue'
+import MenuPopupItem from '@/components/common/menu-popup/menu-popup-item.vue'
+import { DrawFeature } from '@/stores/draw.store.model'
+
+defineProps<{
+  feature: DrawFeature
+}>()
+const { t } = useTranslation()
+
+const drawingMenuOptions = [
+  {
+    label: 'Exporter un GPX',
+    action: () => alert('TODO: Draw feature click drawingMenuOptions'),
+  },
+  {
+    label: 'Exporter un KML',
+    action: () => alert('TODO: Draw feature click drawingMenuOptions'),
+  },
+  {
+    label: 'Exporter un Shapefile',
+    action: () => alert('TODO: Draw feature click drawingMenuOptions'),
+  },
+  {
+    label: 'Changer sens de la ligne',
+    action: () => alert('TODO: Draw feature click drawingMenuOptions'),
+  },
+  {
+    label: 'Créer cercle concentrique',
+    action: () => alert('TODO: Draw feature click drawingMenuOptions'),
+  },
+]
+</script>
+
+<template>
+  <MenuPopup
+    :items="drawingMenuOptions"
+    :direction="'up'"
+    :ariaLabel="t('Drawings menu')"
+  >
+    <!-- Button to open the menu -->
+    <i class="fa-solid fa-square-caret-down hover:text-tertiary"></i>
+    <!-- Loop through items for the menu -->
+    <template #item="{ item }">
+      <MenuPopupItem :item="item" @click="() => item.action && item.action()">
+        {{ t(item.label) }}
+      </MenuPopupItem>
+    </template>
+  </MenuPopup>
+</template>
diff --git a/src/components/draw/feature-sub-content.vue b/src/components/draw/feature-sub-content.vue
new file mode 100644
index 00000000..c04cf21b
--- /dev/null
+++ b/src/components/draw/feature-sub-content.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { Ref, ref } from 'vue'
+import { useTranslation } from 'i18next-vue'
+
+import { DrawFeature } from '@/stores/draw.store.model'
+
+import FeatureMenuPopup from './feature-menu-popup.vue'
+import FeatureConfirmDelete from './feature-confirm-delete.vue'
+import FeatureEditInfo from './feature-edit-info.vue'
+import FeatureEditStyle from './feature-edit-style.vue'
+import FeatureMeasurements from './feature-measurements.vue'
+
+const props = defineProps<{
+  isDocked: boolean
+  isEditingFeature: boolean
+  feature: DrawFeature
+}>()
+const emit = defineEmits(['toggleEditFeature', 'toggleDock', 'clickDelete'])
+const { t } = useTranslation()
+
+const editComponents = {
+  FeatureEditInfo,
+  FeatureEditStyle,
+  FeatureConfirmDelete,
+}
+const currentEditCompKey: Ref<keyof typeof editComponents | undefined> =
+  ref(undefined)
+
+function onClickCancel() {
+  currentEditCompKey.value = undefined
+}
+
+function onClickValidate() {
+  const currentComponent =
+    editComponents[currentEditCompKey.value as keyof typeof editComponents]
+
+  if (currentComponent === FeatureConfirmDelete) {
+    emit('clickDelete')
+  } else {
+    alert('TODO: Draw feature click onClickValidate()')
+  }
+}
+
+function onClickSearch() {
+  alert('TODO: Draw feature click onClickSearch()')
+}
+</script>
+
+<template>
+  <template v-if="!currentEditCompKey">
+    <!-- Icon to attach this UI in a popup under the feature on the map -->
+    <i
+      v-if="!isDocked"
+      class="fa fa-object-ungroup float-right"
+      role="button"
+      @click="() => emit('toggleDock')"
+    ></i>
+
+    <h6 v-if="isDocked">{{ feature.label }}</h6>
+
+    <!-- Spacer -->
+    <div class="min-h-3"></div>
+
+    <FeatureMeasurements :feature="feature" />
+
+    <!-- Default display feature options -->
+    <div class="flex justify-between items-center mt-1">
+      <div>
+        <!-- Button edit feature: EDIT/END EDITION -->
+        <button
+          class="lux-btn-primary"
+          @click="emit('toggleEditFeature', props.feature)"
+        >
+          {{ isEditingFeature ? t('Terminer édition') : t("Editer l'objet") }}
+        </button>
+      </div>
+
+      <div>
+        <!-- List of actions on the current feature -->
+        <div class="flex text-primary items-center gap-1">
+          <!-- Fit view on current feature -->
+          <button @click="onClickSearch"><i class="fa fa-search"></i></button>
+
+          <!-- Edit current feature -->
+          <button @click="() => (currentEditCompKey = 'FeatureEditInfo')">
+            <i class="fa fa-pencil"></i>
+          </button>
+
+          <!-- Edit current feature style -->
+          <button @click="() => (currentEditCompKey = 'FeatureEditStyle')">
+            <i class="fa fa-paint-brush"></i>
+          </button>
+
+          <!-- Remove feature from the map -->
+          <button @click="() => (currentEditCompKey = 'FeatureConfirmDelete')">
+            <i class="fa fa-trash"></i>
+          </button>
+
+          <!-- Menu dropdown with all other possible actions on feature -->
+          <FeatureMenuPopup :feature="feature" />
+        </div>
+      </div>
+    </div>
+  </template>
+
+  <!-- UI when user is modifying feature -->
+  <!-- Include dynamic components: FeatureEditInfo, FeatureEditStyle or FeatureConfirmDelete -->
+  <component
+    v-else
+    :is="editComponents[currentEditCompKey as keyof typeof editComponents]"
+    :feature="feature"
+  >
+    <!-- Dynamic component content here -->
+
+    <!-- Customise footer with Cancel and Validate btns -->
+    <template v-slot:footer>
+      <div class="mt-3 text-right">
+        <button class="lux-btn mr-2" @click="onClickCancel">
+          {{ t('Cancel') }}
+        </button>
+
+        <button class="lux-btn-primary" @click="onClickValidate">
+          {{ t('Validate') }}
+        </button>
+      </div>
+    </template>
+  </component>
+</template>
diff --git a/src/components/draw/feature-sub-wrapper.vue b/src/components/draw/feature-sub-wrapper.vue
new file mode 100644
index 00000000..f78f283d
--- /dev/null
+++ b/src/components/draw/feature-sub-wrapper.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import MapPopup from '@/components/map/map-popup.vue'
+
+defineProps<{
+  isDocked: boolean
+}>()
+
+const emit = defineEmits(['closePopup'])
+
+function onClosePopup() {
+  emit('closePopup')
+}
+</script>
+
+<template>
+  <!-- Display in a popup on the map if is docked -->
+  <MapPopup v-if="isDocked" @closePopup="onClosePopup">
+    <slot></slot>
+  </MapPopup>
+
+  <!-- Display in the drawing features list if not-->
+  <template v-else>
+    <slot></slot>
+  </template>
+</template>
diff --git a/src/components/footer/toolbar-draw.vue b/src/components/footer/toolbar-draw.vue
index 6a0f8fad..942c3066 100644
--- a/src/components/footer/toolbar-draw.vue
+++ b/src/components/footer/toolbar-draw.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import ButtonText from './button-text.vue'
 import { useTranslation } from 'i18next-vue'
+import { storeToRefs } from 'pinia'
+
 import useDraw from '@/composables/draw/draw.composable'
 import { useDrawStore } from '@/stores/draw.store'
-import { storeToRefs } from 'pinia'
+
+import ButtonText from './button-text.vue'
 
 const { t } = useTranslation()
-const { toggleActiveState } = useDrawStore()
-const { drawStateActive } = storeToRefs(useDrawStore())
+const drawStore = useDrawStore()
+const { toggleActiveState } = drawStore
+const { drawStateActive } = storeToRefs(drawStore)
 // keep logic in composable
 useDraw()
 </script>
diff --git a/src/components/layer-manager/layer-manager.spec.ts b/src/components/layer-manager/layer-manager.spec.ts
index 5f9ce38a..08b02b8b 100644
--- a/src/components/layer-manager/layer-manager.spec.ts
+++ b/src/components/layer-manager/layer-manager.spec.ts
@@ -108,7 +108,13 @@ describe('LayerManager', () => {
       })
 
       it('#sortMethod', async () => {
-        await wrapper.vm.sortMethod({ to: { children: [] } })
+        const layerCollection = document.createElement('div')
+        const layer1 = document.createElement('div')
+        const layer2 = document.createElement('div')
+        layerCollection.appendChild(layer1)
+        layerCollection.appendChild(layer2)
+
+        await wrapper.vm.sortMethod(layerCollection.children)
         expect(mapStore.reorderLayers).toHaveBeenCalledTimes(1)
       })
     })
diff --git a/src/components/map/map-popup.vue b/src/components/map/map-popup.vue
new file mode 100644
index 00000000..acd86d8f
--- /dev/null
+++ b/src/components/map/map-popup.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const emit = defineEmits(['closePopup'])
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="popup">
+      <button
+        class="fa-sharp fa-solid fa-close float-right mt-2 hover:text-primary"
+        @click="() => emit('closePopup')"
+      ></button>
+      <slot></slot>
+    </div>
+  </Teleport>
+</template>
+
+<style>
+.popup {
+  @apply absolute bg-white px-2 rounded-lg;
+  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+  top: 50%;
+  left: 50%;
+  min-width: 340px;
+}
+.popup:after,
+.popup:before {
+  top: 100%;
+  border: solid transparent;
+  content: ' ';
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.popup:after {
+  border-top-color: white;
+  border-width: 10px;
+  left: 48px;
+  margin-left: -10px;
+}
+.popup:before {
+  border-top-color: #cccccc;
+  border-width: 11px;
+  left: 48px;
+  margin-left: -11px;
+}
+</style>
diff --git a/src/composables/draw/draw-interaction.composable.ts b/src/composables/draw/draw-interaction.composable.ts
index 7d9660e0..a631cde8 100644
--- a/src/composables/draw/draw-interaction.composable.ts
+++ b/src/composables/draw/draw-interaction.composable.ts
@@ -1,4 +1,4 @@
-import { listen } from 'ol/events.js'
+import { listen } from 'ol/events'
 import Draw, { DrawEvent, Options } from 'ol/interaction/Draw'
 import useMap from '@/composables/map/map.composable'
 import useDrawnFeatures from './drawn-features.composable'
diff --git a/src/composables/draw/draw.composable.ts b/src/composables/draw/draw.composable.ts
index 1493b20a..892fbaac 100644
--- a/src/composables/draw/draw.composable.ts
+++ b/src/composables/draw/draw.composable.ts
@@ -1,8 +1,9 @@
-import { useDrawStore } from '@/stores/draw.store'
 import { watch } from 'vue'
-import useDrawInteraction from './draw-interaction.composable'
-import Draw from 'ol/interaction/Draw'
 import { storeToRefs } from 'pinia'
+import Draw from 'ol/interaction/Draw'
+
+import { useDrawStore } from '@/stores/draw.store'
+import useDrawInteraction from './draw-interaction.composable'
 
 type DrawInteractions = {
   drawPoint: Draw
diff --git a/src/composables/draw/drawn-features.composable.ts b/src/composables/draw/drawn-features.composable.ts
index d6702e06..793eb0ae 100644
--- a/src/composables/draw/drawn-features.composable.ts
+++ b/src/composables/draw/drawn-features.composable.ts
@@ -1,12 +1,18 @@
-import useMap from '../map/map.composable'
+import { storeToRefs } from 'pinia'
 import { Collection, Feature } from 'ol'
 import { Geometry } from 'ol/geom'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
 
+import { useDrawStore } from '@/stores/draw.store'
+import { DrawFeature } from '@/stores/draw.store.model'
+
+import useMap from '../map/map.composable'
+
 const DEFAULT_DRAW_ZINDEX = 1000
 
 export default function useDrawnFeatures() {
+  const drawStore = useDrawStore()
   const map = useMap().getOlMap()
 
   const features = new Collection<Feature<Geometry>>()
@@ -23,6 +29,20 @@ export default function useDrawnFeatures() {
   function addFeature(feature: Feature<Geometry>) {
     //todo: handle mutuability, save to mymaps, encode in URL
     features.push(feature)
+
+    // TODO: to improve saving
+    const geomType = feature.getGeometry()?.getType()
+
+    if (geomType) {
+      const { drawFeatures } = storeToRefs(drawStore)
+      const newFeature = {
+        // TODO: improve feat. creation, move this creation elsewhere
+        id: Math.floor(Math.random() * Date.now()),
+        label: `${geomType as string} ${drawFeatures.value.length + 1}`,
+        geom: geomType,
+      } as unknown as DrawFeature
+      drawFeatures.value = [...drawFeatures.value, newFeature]
+    }
   }
 
   return {
diff --git a/src/stores/draw.store.model.ts b/src/stores/draw.store.model.ts
new file mode 100644
index 00000000..57ddf0c1
--- /dev/null
+++ b/src/stores/draw.store.model.ts
@@ -0,0 +1,15 @@
+export type DrawStateActive =
+  | undefined
+  | 'drawPoint'
+  | 'drawLabel'
+  | 'drawLine'
+  | 'drawCircle'
+  | 'drawPolygon'
+
+export interface DrawFeature {
+  // TODO: to improve
+  id: number
+  label: string
+  description: string
+  geom: string
+}
diff --git a/src/stores/draw.store.ts b/src/stores/draw.store.ts
index f3856048..9714b3ae 100644
--- a/src/stores/draw.store.ts
+++ b/src/stores/draw.store.ts
@@ -1,22 +1,17 @@
 import { defineStore } from 'pinia'
-import { Ref, ref } from 'vue'
+import { ShallowRef, ref } from 'vue'
 
-export type DrawStateActive =
-  | undefined
-  | 'drawPoint'
-  | 'drawLabel'
-  | 'drawLine'
-  | 'drawCircle'
-  | 'drawPolygon'
+import { DrawFeature, DrawStateActive } from './draw.store.model'
 
 export const useDrawStore = defineStore('draw', () => {
   const drawStateActive = ref<DrawStateActive>(undefined)
-  const drawFeatures: Ref<string[]> = ref([
-    'Point',
-    'Polygon',
-    'LineString',
-    'Circle',
+  const drawFeatures: ShallowRef<DrawFeature[]> = ref([
+    // 'Point',
+    // 'Polygon',
+    // 'LineString',
+    // 'Circle',
   ]) // TODO improve typing in an other PR
+  const featureEditionDocked = ref(false)
 
   function toggleActiveState(newState: DrawStateActive) {
     if (drawStateActive.value === newState) {
@@ -26,9 +21,17 @@ export const useDrawStore = defineStore('draw', () => {
     }
   }
 
+  function removeFeature(featureId: number) {
+    drawFeatures.value = drawFeatures.value.filter(
+      feature => feature.id !== featureId
+    )
+  }
+
   return {
     drawFeatures,
     drawStateActive,
+    featureEditionDocked,
+    removeFeature,
     toggleActiveState,
   }
 })

From e5475afe94792940386c5359fb5e283573ecac7e Mon Sep 17 00:00:00 2001
From: AlitaBernachot <alita.bernachot@camptocamp.com>
Date: Wed, 14 Aug 2024 18:02:53 +0200
Subject: [PATCH 8/9] feat: improve opup positioning on map

---
 src/assets/main.css                           | 38 ++++++++++++++++---
 src/components/draw/feature-edit-style.vue    |  2 +
 src/components/draw/feature-item.vue          |  1 +
 src/components/draw/feature-sub-wrapper.vue   | 12 ++++--
 src/components/map/map-popup.vue              | 37 ++++++++++++++++--
 .../draw/drawn-features.composable.ts         | 34 ++++++++++++++++-
 src/stores/draw.store.model.ts                |  4 ++
 7 files changed, 114 insertions(+), 14 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index cd1d79f1..220a0180 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -28,17 +28,33 @@
     @apply text-primary no-underline;
   }
 
+  /*********** Baseline, reset styles ***********/
+  input[type='range'] {
+    @apply cursor-pointer bg-transparent appearance-none;
+  }
+
+  /******** Chrome, Safari, Opera and Edge Chromium styles ********/
+  /* slider track */
+  input[type='range']::-webkit-slider-runnable-track {
+    @apply bg-white h-1 rounded-full;
+  }
+
+  /* slider thumb */
   input[type='range']::-webkit-slider-thumb {
-    @apply bg-tertiary h-4 w-4 rounded-full border-tertiary;
-    -webkit-appearance: none;
+    @apply appearance-none rounded-full w-4 h-4 bg-tertiary;
+    margin-top: -5.6px; /* Centers thumb on the track */
   }
 
-  input[type='range']::-moz-range-thumb {
-    @apply bg-tertiary h-3 w-3 rounded-full border-tertiary;
+  /*********** Firefox styles ***********/
+  /* slider track */
+  input[type='range']::-moz-range-track {
+    @apply bg-white h-1 rounded-full;
   }
 
-  input[type='range']::-ms-thumb {
-    @apply bg-tertiary h-4 w-4 rounded-full border-tertiary;
+  /* slider thumb */
+  input[type='range']::-moz-range-thumb {
+    @apply appearance-none rounded-full w-4 h-4 bg-tertiary;
+    border: none; /*Removes extra border that FF applies*/
   }
 }
 
@@ -379,6 +395,16 @@
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
       0 0 8px rgba(102, 175, 233, 0.6);
   }
+
+  /* slider track */
+  .popup input[type='range']::-webkit-slider-runnable-track {
+    background-color: var(--color-secondary);
+  }
+
+  /* slider track */
+  .popup input[type='range']::-moz-range-track {
+    background-color: var(--color-secondary);
+  }
 }
 
 .fa-solid {
diff --git a/src/components/draw/feature-edit-style.vue b/src/components/draw/feature-edit-style.vue
index 000392bf..3630f436 100644
--- a/src/components/draw/feature-edit-style.vue
+++ b/src/components/draw/feature-edit-style.vue
@@ -181,3 +181,5 @@ function onClickChangeOrientation() {}
 
   <slot name="footer"></slot>
 </template>
+
+<style></style>
diff --git a/src/components/draw/feature-item.vue b/src/components/draw/feature-item.vue
index 4445b867..16149a61 100644
--- a/src/components/draw/feature-item.vue
+++ b/src/components/draw/feature-item.vue
@@ -70,6 +70,7 @@ function onClickDelete() {
   <!-- Drawing details -->
   <FeatureSubWrapper
     v-if="isOpen"
+    :feature="feature"
     :isDocked="isDocked"
     @closePopup="() => emit('toggleDock')"
   >
diff --git a/src/components/draw/feature-sub-wrapper.vue b/src/components/draw/feature-sub-wrapper.vue
index f78f283d..f79a9b5f 100644
--- a/src/components/draw/feature-sub-wrapper.vue
+++ b/src/components/draw/feature-sub-wrapper.vue
@@ -1,11 +1,17 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import MapPopup from '@/components/map/map-popup.vue'
+import useDrawnFeatures from '@/composables/draw/drawn-features.composable'
+import { DrawFeature } from '@/stores/draw.store.model'
 
-defineProps<{
+const props = defineProps<{
   isDocked: boolean
+  feature: DrawFeature
 }>()
-
+const { getFeatCoordinates } = useDrawnFeatures()
 const emit = defineEmits(['closePopup'])
+const popupAnchor = computed(() => getFeatCoordinates(props.feature.olFeature))
 
 function onClosePopup() {
   emit('closePopup')
@@ -14,7 +20,7 @@ function onClosePopup() {
 
 <template>
   <!-- Display in a popup on the map if is docked -->
-  <MapPopup v-if="isDocked" @closePopup="onClosePopup">
+  <MapPopup v-if="isDocked" :anchor="popupAnchor" @closePopup="onClosePopup">
     <slot></slot>
   </MapPopup>
 
diff --git a/src/components/map/map-popup.vue b/src/components/map/map-popup.vue
index acd86d8f..a20b4420 100644
--- a/src/components/map/map-popup.vue
+++ b/src/components/map/map-popup.vue
@@ -1,10 +1,41 @@
 <script setup lang="ts">
+import { onMounted, ref, shallowRef, watchEffect } from 'vue'
+import { Coordinate } from 'ol/coordinate'
+import Overlay from 'ol/Overlay'
+
+import useMap from '@/composables/map/map.composable'
+
+const props = defineProps<{
+  anchor: Coordinate | undefined
+}>()
 const emit = defineEmits(['closePopup'])
+const map = useMap()
+const popupContainer = ref(null)
+const overlay = shallowRef(
+  new Overlay({
+    autoPan: {
+      animation: {
+        duration: 250,
+      },
+    },
+  })
+)
+
+onMounted(() => {
+  if (popupContainer.value) {
+    overlay.value.setElement(popupContainer.value)
+    map.getOlMap().addOverlay(overlay.value)
+  }
+})
+
+watchEffect(() => {
+  overlay.value.setPosition(props.anchor)
+})
 </script>
 
 <template>
   <Teleport to="body">
-    <div class="popup">
+    <div ref="popupContainer" class="popup">
       <button
         class="fa-sharp fa-solid fa-close float-right mt-2 hover:text-primary"
         @click="() => emit('closePopup')"
@@ -16,10 +47,8 @@ const emit = defineEmits(['closePopup'])
 
 <style>
 .popup {
-  @apply absolute bg-white px-2 rounded-lg;
+  @apply absolute bg-white px-2 rounded-lg bottom-3 -left-12;
   filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
-  top: 50%;
-  left: 50%;
   min-width: 340px;
 }
 .popup:after,
diff --git a/src/composables/draw/drawn-features.composable.ts b/src/composables/draw/drawn-features.composable.ts
index 793eb0ae..dfe92113 100644
--- a/src/composables/draw/drawn-features.composable.ts
+++ b/src/composables/draw/drawn-features.composable.ts
@@ -1,6 +1,6 @@
 import { storeToRefs } from 'pinia'
 import { Collection, Feature } from 'ol'
-import { Geometry } from 'ol/geom'
+import { Circle, Geometry, LineString, Point, Polygon } from 'ol/geom'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
 
@@ -8,6 +8,7 @@ import { useDrawStore } from '@/stores/draw.store'
 import { DrawFeature } from '@/stores/draw.store.model'
 
 import useMap from '../map/map.composable'
+import { Coordinate } from 'ol/coordinate'
 
 const DEFAULT_DRAW_ZINDEX = 1000
 
@@ -40,12 +41,43 @@ export default function useDrawnFeatures() {
         id: Math.floor(Math.random() * Date.now()),
         label: `${geomType as string} ${drawFeatures.value.length + 1}`,
         geom: geomType,
+        olFeature: feature,
       } as unknown as DrawFeature
       drawFeatures.value = [...drawFeatures.value, newFeature]
     }
   }
 
+  /**
+   * Get cordinates of a features, used to get anchor for edition popup on the map
+   * @param feature The ol feature to get the coordinates from
+   * @returns The coordinates of the feature or undefined
+   */
+  function getFeatCoordinates(feature: Feature<Geometry>) {
+    const geometry = feature.getGeometry()
+    let coordinates: Coordinate | undefined = undefined
+
+    if (geometry) {
+      switch (geometry.getType()) {
+        case 'Point':
+          coordinates = (<Point>geometry).getFlatCoordinates()
+          break
+        case 'LineString':
+          coordinates = (<LineString>geometry).getFlatMidpoint()
+          break
+        case 'Polygon':
+          coordinates = (<Polygon>geometry).getFlatInteriorPoint()
+          break
+        case 'Circle':
+          coordinates = (<Circle>geometry).getCenter()
+          break
+      }
+    }
+
+    return coordinates
+  }
+
   return {
     addFeature,
+    getFeatCoordinates,
   }
 }
diff --git a/src/stores/draw.store.model.ts b/src/stores/draw.store.model.ts
index 57ddf0c1..f846381a 100644
--- a/src/stores/draw.store.model.ts
+++ b/src/stores/draw.store.model.ts
@@ -1,3 +1,6 @@
+import { Feature } from 'ol'
+import { Geometry } from 'ol/geom'
+
 export type DrawStateActive =
   | undefined
   | 'drawPoint'
@@ -12,4 +15,5 @@ export interface DrawFeature {
   label: string
   description: string
   geom: string
+  olFeature: Feature<Geometry>
 }

From 29107fdecf71b8289d8c894749ff58b21c2a0423 Mon Sep 17 00:00:00 2001
From: AlitaBernachot <alita.bernachot@camptocamp.com>
Date: Fri, 16 Aug 2024 10:04:45 +0200
Subject: [PATCH 9/9] fix: type check

---
 src/components/draw/draw-panel-features.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/draw/draw-panel-features.vue b/src/components/draw/draw-panel-features.vue
index 19e04320..59813f7f 100644
--- a/src/components/draw/draw-panel-features.vue
+++ b/src/components/draw/draw-panel-features.vue
@@ -4,6 +4,7 @@ import { storeToRefs } from 'pinia'
 
 import useSortable from '@/composables/sortable'
 import { useDrawStore } from '@/stores/draw.store'
+import { DrawFeature } from '@/stores/draw.store.model'
 
 import FeatureItem from './feature-item.vue'
 
@@ -53,7 +54,7 @@ onMounted(() => {
         :isDocked="featureEditionDocked"
         :isEditing="currentEditingFeature === feature.id"
         :isOpen="currentOpenedFeature === feature.id"
-        :feature="feature"
+        :feature="<DrawFeature>feature"
         @toggleFeatureSub="onToggleFeatureSub"
         @toggleFeatureEdit="onToggleFeatureEdit"
         @toggleDock="() => (featureEditionDocked = !featureEditionDocked)"