improvement: display chapter title on top of the chapter node

src/features/ePocFlow/nodes/ActivityNode.vue

@@ -127,60 +127,4 @@ const activityIndex = computed(() => {
 .vue-flow__node.selected .node {
     border: 2px dashed var(--editor-blue);
 }
-
-.node.hover:has(.ghost) {
-    &.node-list {
-        padding: 1.5rem;
-    }
-}
-
-.container.hover {
-    .node {
-        transition: all 0.2s ease-in-out;
-        background-color: var(--node-hover);
-        box-shadow: 0 2px 5px 0 var(--shadow-outer);
-    }
-}
-
-.vue-flow__handle {
-    width: 12px;
-    height: 12px;
-    top: calc(30px + 1rem + 1px);
-    &-left {
-        left: -6px;
-    }
-    &-right {
-        right: -6px;
-    }
-}
-
-.not-connected {
-    background-color: var(--editor-red);
-}
-
-.container {
-    position: relative;
-
-    &:hover {
-        .node-title {
-            overflow-x: visible;
-        }
-    }
-}
-
-.node-title {
-    height: 1.5rem;
-    margin: 0;
-    padding: 0.2rem;
-    top: -1.75rem;
-    max-width: calc(60px + 1.8rem);
-    overflow-x: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    position: absolute;
-
-    &.active {
-        color: var(--editor-blue);
-    }
-}
 </style>

src/features/ePocFlow/nodes/ChapterNode.vue

@@ -61,33 +61,42 @@ const connectedBadges = computed(() => getConnectedBadges(currentNode.data.conte
 </script>
 
 <template>
-    <div class="node-chapter">
-        <div v-if="connectedBadges.length > 0" class="badge-notification badge-notification-left">
-            <img src="/img/badge/notification.svg" alt="notification" />
-            <small>{{ connectedBadges.length }}</small>
+    <div>
+        <div class="node-chapter">
+            <div v-if="connectedBadges.length > 0" class="badge-notification badge-notification-left">
+                <img src="/img/badge/notification.svg" alt="notification" />
+                <small>{{ connectedBadges.length }}</small>
+            </div>
+
+            <p
+                class="node-title"
+                :class="{ active: editorStore.openedElementId ? editorStore.openedElementId === props.id : false }"
+            >
+                {{ currentNode.data.formValues.title }}
+            </p>
+            <ContentButton
+                :id="currentNode.data.contentId"
+                :data-testid="`chapter-${currentNode.data.index}`"
+                :icon="currentNode.data.action.icon"
+                :is-draggable="false"
+                :class-list="classList"
+                :is-active="editorStore.openedElementId ? editorStore.openedElementId === currentNode.id : false"
+                :subtitle="subtitle"
+                @click="openForm()"
+                @mousedown="mouseDown"
+                @contextmenu="onContextMenu"
+            />
         </div>
-        <ContentButton
-            :id="currentNode.data.contentId"
-            :data-testid="`chapter-${currentNode.data.index}`"
-            :icon="currentNode.data.action.icon"
-            :is-draggable="false"
-            :class-list="classList"
-            :is-active="editorStore.openedElementId ? editorStore.openedElementId === currentNode.id : false"
-            :subtitle="subtitle"
-            @click="openForm()"
-            @mousedown="mouseDown"
-            @contextmenu="onContextMenu"
+        <!-- ! mousedown.stop important in vue-flow v1.16.4 on non draggable node -->
+        <Handle
+            :data-testid="`source-chapter-${currentNode.data.index}`"
+            type="source"
+            :position="Position.Right"
+            :connectable="!isSource && !editorStore.selectNodeMode"
+            :class="{ 'not-connected': !isSource }"
+            @mousedown.stop
         />
     </div>
-    <!-- ! mousedown.stop important in vue-flow v1.16.4 on non draggable node -->
-    <Handle
-        :data-testid="`source-chapter-${currentNode.data.index}`"
-        type="source"
-        :position="Position.Right"
-        :connectable="!isSource && !editorStore.selectNodeMode"
-        :class="{ 'not-connected': !isSource }"
-        @mousedown.stop
-    />
 </template>
 
 <style scoped lang="scss">

src/features/ePocFlow/nodes/PageNode.vue

@@ -129,70 +129,4 @@ const pageIndex = computed(() => {
             :connectable="connectable && !editorStore.selectNodeMode"
         />
     </div>
-</template>
-
+</template>
\ No newline at end of file
-<style scoped lang="scss">
-.node.hover:has(.ghost) {
-    &.node-list {
-        padding: 1.5rem;
-    }
-}
-
-.container.hover {
-    .node {
-        transition: all 0.2s ease-in-out;
-        box-shadow: 0 2px 5px 0 var(--shadow-outer);
-
-        &:not(.active) {
-            background-color: var(--node-hover);
-        }
-        &.active {
-            // #E1F4FA == node-active
-            background-color: darken(#e1f4fa, 5%);
-        }
-    }
-}
-
-.vue-flow__handle {
-    width: 12px;
-    height: 12px;
-    top: calc(30px + 1rem + 1px);
-    z-index: 20;
-    &-left {
-        left: -6px;
-    }
-    &-right {
-        right: -6px;
-    }
-}
-
-.not-connected {
-    background-color: var(--editor-red);
-}
-
-.container {
-    position: relative;
-
-    &:hover {
-        .node-title {
-            overflow-x: visible;
-        }
-    }
-}
-
-.node-title {
-    height: 1.5rem;
-    margin: 0;
-    padding: 0.2rem;
-    top: -1.75rem;
-    max-width: calc(60px + 1.8rem);
-    overflow-x: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    position: absolute;
-
-    &.active {
-        color: var(--editor-blue);
-    }
-}
-</style>

src/features/ePocFlow/nodes/_nodes.scss

+.node.hover:has(.ghost) {
+  &.node-list {
+    padding: 1.5rem;
+  }
+}
+
+.container.hover {
+  .node {
+    transition: all 0.2s ease-in-out;
+    background-color: var(--node-hover);
+    box-shadow: 0 2px 5px 0 var(--shadow-outer);
+  }
+}
+
+.vue-flow__handle {
+  width: 12px;
+  height: 12px;
+  top: calc(30px + 1rem + 1px);
+  &-left {
+    left: -6px;
+  }
+  &-right {
+    right: -6px;
+  }
+}
+
+.not-connected {
+  background-color: var(--editor-red);
+}
+
+.container {
+  position: relative;
+}
+
+.node-title {
+  height: 1.5rem;
+  margin: 0;
+  padding: 0 0.2rem;
+  top: -1.75rem;
+  max-width: calc(60px + 1.8rem);
+  overflow-x: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  position: absolute;
+
+  border-radius: 4px;
+
+  &.active {
+    color: var(--editor-blue);
+  }
+
+  &:hover {
+    overflow: visible;
+  }
+}

src/global.scss

@@ -9,6 +9,8 @@
 @import '_icon';
 @import '_tinymce';
 
+@import 'src/features/ePocFlow/nodes/_nodes';
+
 html,
 body,
 #app {