feat(config): added color picker

Author: heristop

app/components/AppFooter.vue

@@ -2,12 +2,14 @@
 
 <template>
   <footer class="footer w-full text-center py-4">
-    <p class="flex items-center align-middle justify-center text-stone-800 dark:text-white text-sm justify-center gap-2">
-      Made by <a
+    <p class="flex items-center justify-center text-stone-800 dark:text-white text-sm gap-2">
+      <span>Made by <a
         href="https://heristop.github.io/about"
         target="_blank"
         class="text-stone-700 dark:text-stone-400 hover:text-stone-400 dark:hover:text-stone-500 transition-colors duration-300 font-bold"
-      >heristop</a> <span class="text-3xl front-bold">·</span> <span class="ml-1">Deployed on NuxtHub</span>
+      >heristop</a></span>
+      <span class="text-3xl font-bold">·</span>
+      <span>Deployed on NuxtHub</span>
     </p>
   </footer>
 </template>

app/components/EditableLabel.vue

@@ -1,32 +1,50 @@
 <script setup lang="ts">
-import { ref, onMounted, nextTick } from 'vue'
+import { ref, watch } from 'vue'
 
 const props = defineProps<{
   value: string
   isEditing: boolean
+  isEditMode: boolean
 }>()
 
 const emit = defineEmits<{
   (e: 'update:value', value: string): void
   (e: 'update:isEditing', value: boolean): void
+  (e: 'double-click'): void
 }>()
 
 const inputRef = ref<HTMLInputElement | null>(null)
 const inputValue = ref(props.value)
 
-onMounted(() => {
-  if (props.isEditing) {
-    nextTick(() => {
+watch(() => props.isEditing, (newValue) => {
+  if (newValue) {
+    setTimeout(() => {
       inputRef.value?.focus()
       inputRef.value?.select()
     })
   }
 })
 
+watch(() => props.value, (newValue) => {
+  inputValue.value = newValue
+})
+
 const finishEditing = () => {
   emit('update:value', inputValue.value)
   emit('update:isEditing', false)
 }
+
+const cancelEditing = () => {
+  inputValue.value = props.value
+  emit('update:isEditing', false)
+}
+
+const handleDoubleClick = (event: MouseEvent) => {
+  if (!props.isEditMode) {
+    event.stopPropagation()
+    emit('double-click')
+  }
+}
 </script>
 
 <template>
@@ -37,42 +55,13 @@ const finishEditing = () => {
     class="edit-input"
     @blur="finishEditing"
     @keyup.enter="finishEditing"
-    @keyup.esc="finishEditing"
-    @dbclick="finishEditing"
+    @keyup.esc="cancelEditing"
   >
   <span
     v-else
     class="node-text cursor-text"
-    @click="$emit('update:isEditing', true)"
+    @dblclick="handleDoubleClick"
   >
     {{ value }}
   </span>
 </template>
-
-<style scoped>
-.edit-input {
-  text-align: center;
-  background: rgba(255, 255, 255, 0.1);
-  border: none;
-  border-bottom: 1px solid white;
-  color: white;
-  outline: none;
-  transition: all 0.3s;
-  padding: 2px 4px;
-  border-radius: 2px;
-}
-
-.edit-input:focus {
-  background: rgba(255, 255, 255, 0.2);
-  border-bottom: 2px solid white;
-  outline: none;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.node-text {
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-</style>

app/components/ProjectPanel.vue

@@ -506,7 +506,6 @@ onMounted(() => {
       class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
     >
       <div class="bg-white dark:bg-stone-800 p-6 rounded-lg shadow-xl w-full max-w-lg relative">
-        <!-- Bouton pour fermer la modale -->
         <button
           class="absolute top-4 right-4 text-stone-400 hover:text-stone-600 dark:text-stone-300 dark:hover:text-white transition-colors duration-300"
           aria-label="Close Modal"

app/components/TreeNode.vue

@@ -37,8 +37,11 @@ const displayContent = computed({
   },
 })
 
+const isDraggable = computed(() => !store.isEditingMode && !isEditing.value)
+
 const handleLabelUpdate = (newValue: string) => {
   displayContent.value = newValue
+  isEditing.value = false
 }
 
 watch(() => store.displayLabel, () => {
@@ -97,6 +100,12 @@ const getUniqueKeyName = (base: string, type: 'key' | 'name') => {
   return newName
 }
 
+const handleLabelDoubleClick = () => {
+  if (!store.isEditingMode) {
+    isEditing.value = true
+  }
+}
+
 const addChildNode = (event: MouseEvent) => {
   event.stopPropagation()
 
@@ -142,6 +151,11 @@ const deleteNode = (event: MouseEvent) => {
 }
 
 const handleDragStart = (event: DragEvent) => {
+  if (!isDraggable.value) {
+    event.preventDefault()
+    return
+  }
+
   if (isDragging.value) {
     return
   }
@@ -151,6 +165,11 @@ const handleDragStart = (event: DragEvent) => {
 }
 
 const handleDrop = (event: DragEvent) => {
+  if (store.isEditingMode) {
+    event.preventDefault()
+    return
+  }
+
   event.preventDefault()
   event.stopPropagation()
   const draggedKey = event.dataTransfer?.getData('text/plain')
@@ -161,22 +180,15 @@ const handleDrop = (event: DragEvent) => {
 }
 
 const handleDragOver = (event: DragEvent) => {
-  event.preventDefault()
+  if (!store.isEditingMode) {
+    event.preventDefault()
+  }
 }
 
 const handleTitleClick = (event: MouseEvent) => {
   event.stopPropagation()
 }
 
-watch(() => [props.node.status, store.statuses], () => {
-  nodeStatus.value = props.node.status || store.statuses[0]?.name || ''
-  checkIfSuccessNode(props.node)
-}, { immediate: true })
-
-onMounted(() => {
-  updateParentStatus()
-})
-
 const nodeStyle = computed(() => {
   const baseFlex = 1
   const childCount = props.node.children ? props.node.children.length : 0
@@ -193,7 +205,6 @@ const handleClick = (event: MouseEvent) => {
 
   if (!props.node.children || !props.node.children.length) {
     updateStatus()
-
     return
   }
 }
@@ -232,6 +243,15 @@ const applySuccessAnimation = (node: Section) => {
   applyToParents(node)
   isSuccessNode.value = true
 }
+
+watch(() => [props.node.status, store.statuses], () => {
+  nodeStatus.value = props.node.status || store.statuses[0]?.name || ''
+  checkIfSuccessNode(props.node)
+}, { immediate: true })
+
+onMounted(() => {
+  updateParentStatus()
+})
 </script>
 
 <template>
@@ -240,7 +260,7 @@ const applySuccessAnimation = (node: Section) => {
     :class="{ 'success-animation': isSuccessNode }"
     :style="nodeStyle"
     :data-node-key="node.key"
-    :draggable="!store.isEditingMode && !isEditing"
+    :draggable="isDraggable"
     @dragstart="handleDragStart"
     @drop="handleDrop"
     @dragover="handleDragOver"
@@ -295,12 +315,12 @@ const applySuccessAnimation = (node: Section) => {
       </span>
 
       <EditableLabel
-        :key="store.displayLabel"
         :value="displayContent"
         :is-editing="isEditing"
-        class="truncate dark:text-stone-100"
+        :is-edit-mode="store.isEditingMode"
         @update:value="handleLabelUpdate"
         @update:is-editing="isEditing = $event"
+        @double-click="handleLabelDoubleClick"
       />
 
       <div