From 2284bfad818bd4a99337fe172ab0b1dae1c84f11 Mon Sep 17 00:00:00 2001
From: Didier Lafforgue <ext-didier.lafforgue@swile.co>
Date: Sun, 15 Jun 2025 23:14:56 +0200
Subject: [PATCH 1/2] feat(ui): revamp the list item components (icon + label)

---
 .../editor/assets/remixicons/ri-draggable.svg       |  1 +
 .../assets/remixicons/ri-expand-up-down-line.svg    |  1 -
 .../editor/components/section-list/list-item.vue    | 12 ++++++------
 .../components/section-pane/block-list/index.vue    |  1 +
 .../section-pane/block-list/list-item.vue           | 13 ++++++++-----
 5 files changed, 16 insertions(+), 12 deletions(-)
 create mode 100644 app/frontend/editor/assets/remixicons/ri-draggable.svg
 delete mode 100644 app/frontend/editor/assets/remixicons/ri-expand-up-down-line.svg

diff --git a/app/frontend/editor/assets/remixicons/ri-draggable.svg b/app/frontend/editor/assets/remixicons/ri-draggable.svg
new file mode 100644
index 00000000..89f6046c
--- /dev/null
+++ b/app/frontend/editor/assets/remixicons/ri-draggable.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8.5 7C9.32843 7 10 6.32843 10 5.5C10 4.67157 9.32843 4 8.5 4C7.67157 4 7 4.67157 7 5.5C7 6.32843 7.67157 7 8.5 7ZM8.5 13.5C9.32843 13.5 10 12.8284 10 12C10 11.1716 9.32843 10.5 8.5 10.5C7.67157 10.5 7 11.1716 7 12C7 12.8284 7.67157 13.5 8.5 13.5ZM10 18.5C10 19.3284 9.32843 20 8.5 20C7.67157 20 7 19.3284 7 18.5C7 17.6716 7.67157 17 8.5 17C9.32843 17 10 17.6716 10 18.5ZM15.5 7C16.3284 7 17 6.32843 17 5.5C17 4.67157 16.3284 4 15.5 4C14.6716 4 14 4.67157 14 5.5C14 6.32843 14.6716 7 15.5 7ZM17 12C17 12.8284 16.3284 13.5 15.5 13.5C14.6716 13.5 14 12.8284 14 12C14 11.1716 14.6716 10.5 15.5 10.5C16.3284 10.5 17 11.1716 17 12ZM15.5 20C16.3284 20 17 19.3284 17 18.5C17 17.6716 16.3284 17 15.5 17C14.6716 17 14 17.6716 14 18.5C14 19.3284 14.6716 20 15.5 20Z"></path></svg>
\ No newline at end of file
diff --git a/app/frontend/editor/assets/remixicons/ri-expand-up-down-line.svg b/app/frontend/editor/assets/remixicons/ri-expand-up-down-line.svg
deleted file mode 100644
index 8c478b3e..00000000
--- a/app/frontend/editor/assets/remixicons/ri-expand-up-down-line.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.2072 9.0428 12.0001 2.83569 5.793 9.0428 7.20721 10.457 12.0001 5.66412 16.793 10.457 18.2072 9.0428ZM5.79285 14.9572 12 21.1643 18.2071 14.9572 16.7928 13.543 12 18.3359 7.20706 13.543 5.79285 14.9572Z"></path></svg>
\ No newline at end of file
diff --git a/app/frontend/editor/components/section-list/list-item.vue b/app/frontend/editor/components/section-list/list-item.vue
index 1b927598..33175eb5 100644
--- a/app/frontend/editor/components/section-list/list-item.vue
+++ b/app/frontend/editor/components/section-list/list-item.vue
@@ -1,16 +1,16 @@
 <template>
   <div
-    class="bg-gray-100 rounded-md pr-4 flex items-center text-gray-800"
+    class="bg-gray-100 rounded-md pr-2 flex items-center text-gray-800"
   >
-    <div class="flex flex-col cursor-move px-4 py-3">
-      <uikit-icon name="ri-expand-up-down-line" />
+    <div class="flex flex-col cursor-move px-2 py-3">
+      <uikit-icon name="ri-draggable" />
     </div>
     <router-link
       :to="{ name: 'editSection', params: { sectionId: section.id } }"
-      class="flex flex-col overflow-hidden py-3"
+      class="flex flex-col overflow-hidden py-3 pr-2 leading-none"
     >
-      <span :class="{ 'text-gray-800': label }">{{ name | truncate(40) }}</span>
-      <span class="text-gray-500 text-sm truncate" v-if="label">{{ label | truncate(100) }}</span>
+      <span :class="{ 'text-gray-500 text-sm': label }">{{ name | truncate(40) }}</span>
+      <span class="text-gray-800 truncate" v-if="label">{{ label | truncate(100) }}</span>
     </router-link>
     <uikit-confirmation-button
       @confirm="removeSection(section.id)"
diff --git a/app/frontend/editor/components/section-pane/block-list/index.vue b/app/frontend/editor/components/section-pane/block-list/index.vue
index 7bfc503a..757038ba 100644
--- a/app/frontend/editor/components/section-pane/block-list/index.vue
+++ b/app/frontend/editor/components/section-pane/block-list/index.vue
@@ -47,6 +47,7 @@ export default {
         group: 'description',
         disabled: false,
         ghostClass: 'ghost',
+        handle: '.cursor-move',
       }
     },
   },
diff --git a/app/frontend/editor/components/section-pane/block-list/list-item.vue b/app/frontend/editor/components/section-pane/block-list/list-item.vue
index dcc5d537..4836b00a 100644
--- a/app/frontend/editor/components/section-pane/block-list/list-item.vue
+++ b/app/frontend/editor/components/section-pane/block-list/list-item.vue
@@ -1,14 +1,17 @@
 <template>
   <div
-    class="bg-gray-100 rounded-md px-4 py-3 flex items-center justify-between text-gray-800"
-    :class="{ 'cursor-move': isList }"
+    class="bg-gray-100 rounded-md pr-2 flex items-center text-gray-800"
+    :class="{ 'pl-4': !isList }"
   >
+    <div class="flex flex-col cursor-move px-2 py-3" v-if="isList">
+      <uikit-icon name="ri-draggable" />
+    </div>
     <router-link
       :to="{
         name: 'editSectionBlock',
         params: { sectionBlockId: sectionBlock.id },
       }"
-      class="flex items-center"
+      class="flex items-center py-3 overflow-hidden"
     >
       <div class="h-8 w-8 bg-gray-400 mr-3" v-if="image">
         <img
@@ -18,9 +21,9 @@
           @load="() => (imageLoaded = true)"
         />
       </div>
-      <span>{{ label | truncate(40) }}</span>
+      <span class="truncate">{{ label | truncate(40) }}</span>
     </router-link>
-    <div class="flex items-center">
+    <div class="flex items-center ml-auto pl-2">
       <slot name="actions"></slot>
       <uikit-confirmation-button
         @confirm="removeSectionBlock(sectionBlock.id)"

From 54f01333d7fdc3e8f6d9b085b904785b929e8a5a Mon Sep 17 00:00:00 2001
From: Didier Lafforgue <ext-didier.lafforgue@swile.co>
Date: Mon, 16 Jun 2025 13:33:58 +0200
Subject: [PATCH 2/2] feat(ui): use a smaller font size for the type of a
 section

---
 app/frontend/editor/components/section-list/list-item.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/frontend/editor/components/section-list/list-item.vue b/app/frontend/editor/components/section-list/list-item.vue
index 33175eb5..8c01b902 100644
--- a/app/frontend/editor/components/section-list/list-item.vue
+++ b/app/frontend/editor/components/section-list/list-item.vue
@@ -9,7 +9,7 @@
       :to="{ name: 'editSection', params: { sectionId: section.id } }"
       class="flex flex-col overflow-hidden py-3 pr-2 leading-none"
     >
-      <span :class="{ 'text-gray-500 text-sm': label }">{{ name | truncate(40) }}</span>
+      <span :class="{ 'text-gray-500 text-xs': label }">{{ name | truncate(40) }}</span>
       <span class="text-gray-800 truncate" v-if="label">{{ label | truncate(100) }}</span>
     </router-link>
     <uikit-confirmation-button