feat: features from store

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);
   }
 

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>

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>