From a9049092459aeba0174e602cdb93ae70a0300ee8 Mon Sep 17 00:00:00 2001
From: Matt J <matthieu@probabl.ai>
Date: Tue, 28 Jan 2025 11:49:42 +0100
Subject: [PATCH] wip

---
 skore-ui/src/components/DraggableList.vue  |  2 +-
 skore-ui/src/views/ComponentsView.vue      | 10 ++--
 skore-ui/src/views/project/ProjectView.vue | 55 +++++++++++++---------
 3 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/skore-ui/src/components/DraggableList.vue b/skore-ui/src/components/DraggableList.vue
index 31b45586d..314eccde1 100644
--- a/skore-ui/src/components/DraggableList.vue
+++ b/skore-ui/src/components/DraggableList.vue
@@ -194,7 +194,7 @@ onBeforeUnmount(() => {
           :class="{ visible: dropIndicatorPosition === -1 && index === 0 }"
         />
         <div class="content" :class="{ moving: movingItemIndex === index }">
-          <slot name="item" v-bind="item"></slot>
+          <slot name="item" v-bind="{ item, index }"></slot>
         </div>
         <div class="drop-indicator bottom" :class="{ visible: dropIndicatorPosition === index }" />
       </div>
diff --git a/skore-ui/src/views/ComponentsView.vue b/skore-ui/src/views/ComponentsView.vue
index 197a26e4d..2bd395c4d 100644
--- a/skore-ui/src/views/ComponentsView.vue
+++ b/skore-ui/src/views/ComponentsView.vue
@@ -1314,11 +1314,13 @@ const richText = ref(
             @drop="onItemDrop($event)"
             @dragover.prevent
           >
-            <template #item="{ name: id, color, content }">
-              <div :style="{ backgroundColor: color, color: 'white' }">
-                <div data-drag-image-selector :style="{ backgroundColor: color }">ID: {{ id }}</div>
+            <template #item="{ item }">
+              <div :style="{ backgroundColor: item.color, color: 'white' }">
+                <div data-drag-image-selector :style="{ backgroundColor: item.color }">
+                  ID: {{ item.name }}
+                </div>
                 <ul>
-                  <li v-for="(c, i) in content" :key="i">{{ c }}</li>
+                  <li v-for="(c, i) in item.content" :key="i">{{ c }}</li>
                 </ul>
               </div>
             </template>
diff --git a/skore-ui/src/views/project/ProjectView.vue b/skore-ui/src/views/project/ProjectView.vue
index 8ecfddeef..4d6224700 100644
--- a/skore-ui/src/views/project/ProjectView.vue
+++ b/skore-ui/src/views/project/ProjectView.vue
@@ -104,23 +104,31 @@ onBeforeUnmount(() => {
             @drop="onItemDrop($event)"
             @dragover.prevent
           >
-            <template #item="{ name, mediaType, data, createdAt, updatedAt, updates, note }">
+            <template #item="{ item, index }">
               <ProjectViewCard
-                :key="name"
-                :title="name"
-                :subtitle="getItemSubtitle(createdAt)"
+                :key="item.name"
+                :title="item.name"
+                :subtitle="getItemSubtitle(item.createdAt)"
                 :showActions="props.showCardActions"
-                :updates="updates"
-                :current-update-index="projectStore.getCurrentItemUpdateIndex(name)"
-                :data-name="name"
-                @card-removed="onCardRemoved(name)"
-                @update-selected="projectStore.setCurrentItemUpdateIndex(name, $event)"
+                :updates="item.updates"
+                :current-update-index="projectStore.getCurrentItemUpdateIndex(item.name)"
+                :data-name="item.name"
+                @card-removed="onCardRemoved(item.name)"
+                @update-selected="projectStore.setCurrentItemUpdateIndex(item.name, $event)"
               >
-                <ItemNote :name="name" :note="note" />
-                <MediaWidgetSelector :item="{ name, mediaType, data, createdAt, updatedAt }" />
+                <ItemNote :name="item.name" :note="item.note" />
+                <MediaWidgetSelector
+                  :item="{
+                    name: item.name,
+                    mediaType: item.mediaType,
+                    data: item.data,
+                    createdAt: item.createdAt,
+                    updatedAt: item.updatedAt,
+                  }"
+                />
               </ProjectViewCard>
               <div class="insert-cell-wrapper">
-                <InsertCell @click="console.log('coucou', name)" />
+                <InsertCell @click="console.log('coucou', index)" />
               </div>
             </template>
           </DraggableList>
@@ -228,10 +236,10 @@ main {
       & .editor-container {
         height: 0;
         flex: 1;
-        padding: var(--spacing-24);
+        padding: 0 var(--spacing-20) var(--spacing-20) var(--spacing-20);
 
         & .draggable {
-          min-height: calc(100dvh - var(--editor-height) - var(--spacing-24) * 2);
+          min-height: calc(100dvh - var(--editor-height) - var(--spacing-20) * 2);
         }
 
         & .item-note {
@@ -241,14 +249,6 @@ main {
         & .insert-cell-wrapper {
           position: relative;
 
-          &.first {
-            position: absolute;
-            top: var(--spacing-12);
-            width: 100%;
-            height: var(--spacing-24);
-            margin: 0 var(--spacing-24);
-          }
-
           & .insert-cell {
             position: absolute;
             top: var(--spacing-6);
@@ -260,6 +260,17 @@ main {
               opacity: 1;
             }
           }
+
+          &.first {
+            width: 100%;
+            height: var(--spacing-24);
+
+            & .insert-cell {
+              position: relative;
+              top: var(--spacing-6);
+              padding-left: var(--spacing-12);
+            }
+          }
         }
       }
     }