From ad84e31be4519f83974c82c9965f04add2f308dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastian=20Czech?= <czechsebastian@icloud.com>
Date: Thu, 7 Nov 2024 16:53:21 +0100
Subject: [PATCH 01/16] feat(xo-6): create side panel

---
 .../ui/side-panel/ui-side-panel.story.vue     | 60 +++++++++++++++
 .../components/ui/side-panel/UiSidePanel.vue  | 77 +++++++++++++++++++
 2 files changed, 137 insertions(+)
 create mode 100644 @xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
 create mode 100644 @xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
new file mode 100644
index 00000000000..993eb662648
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
@@ -0,0 +1,60 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties, settings }"
+    :params="[
+      prop('state').type('states').enum('normal', 'empty', 'loading', 'error').preset('info').required().widget(),
+      prop('busy').bool().widget(),
+      prop('isError').bool().widget(),
+      setting('actions').widget(text()).preset('Button'),
+      setting('isEmpty').widget(boolean()),
+      slot(),
+      slot('actions').help('Meant to receive UiButton'),
+      slot('content').help('Meant to display cards or other component'),
+    ]"
+    :presets="{
+      Normal: {
+        props: {
+          busy: false,
+          error: false,
+        },
+      },
+    }"
+  >
+    <UiSidePanel v-bind="properties">
+      <template #actions>
+        <UiButton variant="tertiary" size="medium" accent="info">
+          {{ settings.actions }}
+        </UiButton>
+        <UiButton variant="tertiary" size="medium" accent="info">
+          {{ settings.actions }}
+        </UiButton>
+      </template>
+      <template #content>
+        <UiCard v-if="!settings.isEmpty">
+          <div>Content 1</div>
+          <div>Content 2</div>
+          <div>Content 3</div>
+        </UiCard>
+        <UiCard v-if="!settings.isEmpty">
+          <div>Content 1</div>
+          <div>Content 2</div>
+          <div>Content 3</div>
+        </UiCard>
+        <UiCard v-if="!settings.isEmpty">
+          <div>Content 1</div>
+          <div>Content 2</div>
+          <div>Content 3</div>
+        </UiCard>
+      </template>
+    </UiSidePanel>
+  </ComponentStory>
+</template>
+
+<script setup lang="ts">
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { prop, setting, slot } from '@/libs/story/story-param'
+import { boolean, text } from '@/libs/story/story-widget'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import UiSidePanel from '@core/components/ui/side-panel/UiSidePanel.vue'
+</script>
diff --git a/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue b/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
new file mode 100644
index 00000000000..cb5c4bb46f7
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
@@ -0,0 +1,77 @@
+<!-- v1 -->
+<template>
+  <div class="ui-side-panel" :class="{ error: isError }">
+    <div v-if="slots.actions && !props.busy && !isError" class="actions">
+      <slot name="actions" />
+      <UiButtonIcon v-if="moreThanTwoActions" :icon="faEllipsis" accent="info" size="large" />
+    </div>
+    <div v-if="slots.content && !props.busy && !isError" class="content">
+      <slot name="content" />
+    </div>
+    <UiLoader v-if="props.busy" class="loader" />
+    <div v-if="!props.busy && isError" class="error">
+      <div class="typo h4-medium" />
+    </div>
+    <div v-if="!props.busy && !slots.content" class="empty" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiLoader from '@core/components/ui/loader/UiLoader.vue'
+import { faEllipsis } from '@fortawesome/free-solid-svg-icons'
+import { onMounted, ref } from 'vue'
+
+const props = defineProps<{
+  busy?: boolean
+  isError?: boolean
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  content?(): any
+  actions?(): any
+}>()
+
+const moreThanTwoActions = ref(false)
+
+onMounted(() => {
+  if (slots.content) {
+    const contentItems = slots.content()
+    moreThanTwoActions.value = contentItems.length > 2
+  }
+})
+</script>
+
+<style scoped lang="postcss">
+.ui-side-panel {
+  height: 100%;
+  border: 0.1rem solid var(--color-neutral-border);
+  background-color: var(--color-neutral-background-secondary);
+
+  .actions {
+    border-bottom: 0.1rem solid var(--color-neutral-border);
+    background-color: var(--color-neutral-background-primary);
+    display: flex;
+    justify-content: flex-end;
+    padding: 4px 16px;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    padding: 0.8rem;
+    gap: 0.8rem;
+  }
+
+  &.error {
+    color: var(--color-danger-txt-base);
+    background-color: var(--color-danger-background-selected);
+  }
+}
+
+.loader {
+  font-size: 64px;
+  margin: auto;
+}
+</style>

From 6ed923fca48857a54d661b3659f0e8be6ea4619c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastian=20Czech?= <czechsebastian@icloud.com>
Date: Thu, 7 Nov 2024 22:12:13 +0100
Subject: [PATCH 02/16] feat(xo-6): display additional action in dropdown

---
 .../ui/side-panel/ui-side-panel.story.vue     | 43 +++++++++--
 .../components/ui/side-panel/UiSidePanel.vue  | 73 ++++++++++++++++---
 2 files changed, 99 insertions(+), 17 deletions(-)

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
index 993eb662648..0bb33292f85 100644
--- a/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
@@ -5,7 +5,8 @@
       prop('state').type('states').enum('normal', 'empty', 'loading', 'error').preset('info').required().widget(),
       prop('busy').bool().widget(),
       prop('isError').bool().widget(),
-      setting('actions').widget(text()).preset('Button'),
+      setting('action1').widget(text()).preset('Edit'),
+      setting('action2').widget(text()).preset('Delete'),
       setting('isEmpty').widget(boolean()),
       slot(),
       slot('actions').help('Meant to receive UiButton'),
@@ -15,19 +16,46 @@
       Normal: {
         props: {
           busy: false,
-          error: false,
+          isError: false,
+        },
+        settings: {
+          isEmpty: false,
+        },
+      },
+      Empty: {
+        props: {
+          busy: false,
+          isError: false,
+        },
+        settings: {
+          isEmpty: true,
+        },
+      },
+      Error: {
+        props: {
+          busy: false,
+          isError: true,
+        },
+      },
+      Busy: {
+        props: {
+          busy: true,
+          isError: false,
         },
       },
     }"
   >
     <UiSidePanel v-bind="properties">
       <template #actions>
-        <UiButton variant="tertiary" size="medium" accent="info">
-          {{ settings.actions }}
-        </UiButton>
-        <UiButton variant="tertiary" size="medium" accent="info">
-          {{ settings.actions }}
+        <UiButton variant="tertiary" size="medium" accent="info" :left-icon="faEdit"> {{ settings.action1 }}</UiButton>
+        <UiButton variant="tertiary" size="medium" accent="danger" :left-icon="faTrash">
+          {{ settings.action2 }}
         </UiButton>
+        <UiButton variant="tertiary" size="medium" accent="info"> Button 3</UiButton>
+        <UiButton variant="tertiary" size="medium" accent="info"> Button 4</UiButton>
+        <UiButton variant="tertiary" size="medium" accent="info"> Button 5</UiButton>
+        <UiButton variant="tertiary" size="medium" accent="info"> Button 6</UiButton>
+        <UiButton variant="tertiary" size="medium" accent="info"> Button 7</UiButton>
       </template>
       <template #content>
         <UiCard v-if="!settings.isEmpty">
@@ -57,4 +85,5 @@ import { boolean, text } from '@/libs/story/story-widget'
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
 import UiSidePanel from '@core/components/ui/side-panel/UiSidePanel.vue'
+import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons'
 </script>
diff --git a/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue b/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
index cb5c4bb46f7..25bce03cc82 100644
--- a/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
@@ -1,14 +1,21 @@
 <!-- v1 -->
 <template>
   <div class="ui-side-panel" :class="{ error: isError }">
-    <div v-if="slots.actions && !props.busy && !isError" class="actions">
-      <slot name="actions" />
-      <UiButtonIcon v-if="moreThanTwoActions" :icon="faEllipsis" accent="info" size="large" />
+    <div v-if="slots.actions && !props.busy && !isError && !isEmpty" class="actions">
+      <template v-for="(action, index) in actionsToDisplay" :key="index">
+        <component :is="action" />
+      </template>
+      <UiButtonIcon v-if="moreThanTwoActions" :icon="faEllipsis" accent="info" size="large" @click="toggleDropdown" />
+      <div v-if="isDropdownOpen" class="dropdown-menu">
+        <template v-for="(action, index) in additionalActions" :key="'extra-' + index">
+          <component :is="action" class="dropdown-item" />
+        </template>
+      </div>
     </div>
     <div v-if="slots.content && !props.busy && !isError" class="content">
       <slot name="content" />
     </div>
-    <UiLoader v-if="props.busy" class="loader" />
+    <UiLoader v-if="props.busy && !isError" class="loader" />
     <div v-if="!props.busy && isError" class="error">
       <div class="typo h4-medium" />
     </div>
@@ -20,7 +27,7 @@
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import { faEllipsis } from '@fortawesome/free-solid-svg-icons'
-import { onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 
 const props = defineProps<{
   busy?: boolean
@@ -33,19 +40,40 @@ const slots = defineSlots<{
   actions?(): any
 }>()
 
-const moreThanTwoActions = ref(false)
+const isDropdownOpen = ref(false)
 
-onMounted(() => {
-  if (slots.content) {
-    const contentItems = slots.content()
-    moreThanTwoActions.value = contentItems.length > 2
+const moreThanTwoActions = computed(() => {
+  return slots.actions && slots.actions().length > 2
+})
+
+const isEmpty = computed(() => {
+  return slots.content && slots.content().length === 0
+})
+
+const actionsToDisplay = computed(() => {
+  if (slots.actions) {
+    return slots.actions().slice(0, 2)
   }
+  return []
 })
+
+const additionalActions = computed(() => {
+  if (slots.actions) {
+    return slots.actions().slice(2)
+  }
+  return []
+})
+
+const toggleDropdown = () => {
+  isDropdownOpen.value = !isDropdownOpen.value
+}
 </script>
 
 <style scoped lang="postcss">
 .ui-side-panel {
   height: 100%;
+  display: flex;
+  flex-direction: column;
   border: 0.1rem solid var(--color-neutral-border);
   background-color: var(--color-neutral-background-secondary);
 
@@ -68,6 +96,31 @@ onMounted(() => {
     color: var(--color-danger-txt-base);
     background-color: var(--color-danger-background-selected);
   }
+
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background-color: white;
+    border: 1px solid #ddd;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    padding: 8px 0;
+    z-index: 1000;
+  }
+
+  .dropdown-item {
+    padding: 8px 16px;
+    cursor: pointer;
+  }
+
+  .dropdown-item:hover {
+    background-color: #f0f0f0;
+  }
 }
 
 .loader {

From 9745fed5bc6f3abbf6a09faa8fef5c7f4abdae93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastian=20Czech?= <czechsebastian@icloud.com>
Date: Fri, 8 Nov 2024 10:29:55 +0100
Subject: [PATCH 03/16] feat(xo-6): wip

---
 .../ui/side-panel/ui-side-panel.story.vue     | 31 +++---
 .../web-core/lib/assets/no-selection.svg      | 98 +++++++++++++++++++
 .../lib/components/ui/NoDataError.vue         | 27 +++++
 .../components/ui/side-panel/UiSidePanel.vue  | 57 +++--------
 4 files changed, 154 insertions(+), 59 deletions(-)
 create mode 100644 @xen-orchestra/web-core/lib/assets/no-selection.svg
 create mode 100644 @xen-orchestra/web-core/lib/components/ui/NoDataError.vue

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
index 0bb33292f85..8b0f6921276 100644
--- a/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
@@ -2,12 +2,11 @@
   <ComponentStory
     v-slot="{ properties, settings }"
     :params="[
-      prop('state').type('states').enum('normal', 'empty', 'loading', 'error').preset('info').required().widget(),
       prop('busy').bool().widget(),
       prop('isError').bool().widget(),
+      prop('isEmpty').bool().widget(),
       setting('action1').widget(text()).preset('Edit'),
       setting('action2').widget(text()).preset('Delete'),
-      setting('isEmpty').widget(boolean()),
       slot(),
       slot('actions').help('Meant to receive UiButton'),
       slot('content').help('Meant to display cards or other component'),
@@ -17,8 +16,6 @@
         props: {
           busy: false,
           isError: false,
-        },
-        settings: {
           isEmpty: false,
         },
       },
@@ -26,8 +23,6 @@
         props: {
           busy: false,
           isError: false,
-        },
-        settings: {
           isEmpty: true,
         },
       },
@@ -46,7 +41,7 @@
     }"
   >
     <UiSidePanel v-bind="properties">
-      <template #actions>
+      <template v-if="!properties.isEmpty" #actions>
         <UiButton variant="tertiary" size="medium" accent="info" :left-icon="faEdit"> {{ settings.action1 }}</UiButton>
         <UiButton variant="tertiary" size="medium" accent="danger" :left-icon="faTrash">
           {{ settings.action2 }}
@@ -57,20 +52,20 @@
         <UiButton variant="tertiary" size="medium" accent="info"> Button 6</UiButton>
         <UiButton variant="tertiary" size="medium" accent="info"> Button 7</UiButton>
       </template>
-      <template #content>
-        <UiCard v-if="!settings.isEmpty">
+      <template v-if="!properties.isEmpty" #content>
+        <UiCard>
           <div>Content 1</div>
-          <div>Content 2</div>
-          <div>Content 3</div>
-        </UiCard>
-        <UiCard v-if="!settings.isEmpty">
           <div>Content 1</div>
-          <div>Content 2</div>
-          <div>Content 3</div>
-        </UiCard>
-        <UiCard v-if="!settings.isEmpty">
           <div>Content 1</div>
+        </UiCard>
+        <UiCard>
+          <div>Content 2</div>
+          <div>Content 2</div>
           <div>Content 2</div>
+        </UiCard>
+        <UiCard>
+          <div>Content 3</div>
+          <div>Content 3</div>
           <div>Content 3</div>
         </UiCard>
       </template>
@@ -81,7 +76,7 @@
 <script setup lang="ts">
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop, setting, slot } from '@/libs/story/story-param'
-import { boolean, text } from '@/libs/story/story-widget'
+import { text } from '@/libs/story/story-widget'
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
 import UiSidePanel from '@core/components/ui/side-panel/UiSidePanel.vue'
diff --git a/@xen-orchestra/web-core/lib/assets/no-selection.svg b/@xen-orchestra/web-core/lib/assets/no-selection.svg
new file mode 100644
index 00000000000..fdf323b36f6
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/assets/no-selection.svg
@@ -0,0 +1,98 @@
+<svg width="693" height="400" viewBox="0 0 693 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_1388_30647)">
+    <path
+      d="M581.158 42.4604C585.622 74.0215 564.279 68.0764 548.712 65.6362C545.003 65.0535 538.206 70.0386 535.862 71.3699C534.546 66.6955 534.468 67.8679 530.998 63.9607C532.869 69.1024 527.112 71.3932 529.209 74.3993C523.998 74.0288 521.693 62.9409 526.369 38.763C528.426 28.1241 533.791 11.8188 555.756 15.4218C579.552 19.3271 579.76 32.5776 581.158 42.4604Z"
+      fill="#5A5B6C"/>
+    <path
+      d="M549.661 65.6701C560.533 65.6701 569.346 56.8607 569.346 45.9937C569.346 35.1268 560.533 26.3174 549.661 26.3174C538.788 26.3174 529.975 35.1268 529.975 45.9937C529.975 56.8607 538.788 65.6701 549.661 65.6701Z"
+      fill="#A0616A"/>
+    <path
+      d="M523.164 38.9726L532.594 40.413C536.753 37.8095 538.337 33.9465 538.534 29.4055L537.586 41.1755L542.093 41.864C545.035 39.9022 546.35 37.7778 545.558 35.4429L545.005 42.3088C557.019 46.6352 568.664 49.8258 578.495 47.4242C579.002 44.1115 578.85 40.7314 578.05 37.4771C577.249 34.2227 575.816 31.1578 573.83 28.4574C571.845 25.7569 569.347 23.4738 566.478 21.7383C563.61 20.0028 560.428 18.849 557.113 18.3428L552.26 17.6014C548.946 17.0951 545.564 17.2463 542.308 18.0463C539.052 18.8463 535.986 20.2795 533.284 22.264C530.582 24.2485 528.298 26.7455 526.562 29.6123C524.825 32.4792 523.671 35.6598 523.164 38.9726Z"
+      fill="#5A5B6C"/>
+    <path
+      d="M491.45 168.485H39.6699C36.8737 168.481 34.1929 167.37 32.2156 165.393C30.2383 163.417 29.1261 160.737 29.1228 157.943V64.4263C29.1261 61.6314 30.2383 58.9519 32.2156 56.9756C34.1929 54.9993 36.8737 53.8876 39.6699 53.8843H491.45C494.246 53.8876 496.927 54.9993 498.904 56.9756C500.881 58.9519 501.994 61.6314 501.997 64.4263V157.942C501.994 160.737 500.881 163.417 498.904 165.393C496.927 167.37 494.246 168.481 491.45 168.485Z"
+      fill="#E4E4E7"/>
+    <path
+      d="M460.957 161.374H46.7858C43.9895 161.371 41.3087 160.259 39.3315 158.283C37.3542 156.306 36.242 153.627 36.2387 150.832V71.5427C36.242 68.7478 37.3542 66.0683 39.3315 64.092C41.3087 62.1157 43.9895 61.004 46.7858 61.0007H484.336C487.132 61.004 489.813 62.1157 491.79 64.092C493.767 66.0683 494.879 68.7478 494.883 71.5427V127.465C494.873 136.455 491.295 145.074 484.935 151.431C478.575 157.788 469.952 161.364 460.957 161.374Z"
+      fill="white"/>
+    <path
+      d="M406.337 96.9461H280.202C279.48 96.9461 278.788 96.6597 278.278 96.1498C277.768 95.6399 277.481 94.9484 277.481 94.2273C277.481 93.5062 277.768 92.8147 278.278 92.3048C278.788 91.795 279.48 91.5085 280.202 91.5085H406.337C407.058 91.5085 407.75 91.795 408.26 92.3048C408.77 92.8147 409.057 93.5062 409.057 94.2273C409.057 94.9484 408.77 95.6399 408.26 96.1498C407.75 96.6597 407.058 96.9461 406.337 96.9461Z"
+      fill="#8F84FF"/>
+    <path
+      d="M438.263 113.084H248.276C247.554 113.084 246.862 112.797 246.352 112.288C245.842 111.778 245.556 111.086 245.556 110.365C245.556 109.644 245.842 108.952 246.352 108.443C246.862 107.933 247.554 107.646 248.276 107.646H438.263C438.984 107.646 439.676 107.933 440.186 108.443C440.696 108.952 440.983 109.644 440.983 110.365C440.983 111.086 440.696 111.778 440.186 112.288C439.676 112.797 438.984 113.084 438.263 113.084Z"
+      fill="#E4E4E7"/>
+    <path
+      d="M438.263 130.866H248.276C247.554 130.866 246.862 130.58 246.352 130.07C245.842 129.56 245.556 128.868 245.556 128.147C245.556 127.426 245.842 126.735 246.352 126.225C246.862 125.715 247.554 125.428 248.276 125.428H438.263C438.984 125.428 439.676 125.715 440.186 126.225C440.696 126.735 440.983 127.426 440.983 128.147C440.983 128.868 440.696 129.56 440.186 130.07C439.676 130.58 438.984 130.866 438.263 130.866Z"
+      fill="#E4E4E7"/>
+    <path d="M278.525 69.4801H276.975V9.7999H389.085V11.3492H278.525V69.4801Z" fill="#1A1B38"/>
+    <path
+      d="M436.494 -3.05176e-05H395.419C392.747 -3.05176e-05 390.184 1.06094 388.295 2.94948C386.405 4.83802 385.344 7.39942 385.344 10.0702C385.344 12.741 386.405 15.3024 388.295 17.191C390.184 19.0795 392.747 20.1405 395.419 20.1405H436.494C439.166 20.1405 441.729 19.0795 443.619 17.191C445.508 15.3024 446.569 12.741 446.569 10.0702C446.569 7.39942 445.508 4.83802 443.619 2.94948C441.729 1.06094 439.166 -3.05176e-05 436.494 -3.05176e-05Z"
+      fill="#8F84FF"/>
+    <path
+      d="M276.85 79.6172C281.964 79.6172 286.109 75.4742 286.109 70.3635C286.109 65.2528 281.964 61.1098 276.85 61.1098C271.737 61.1098 267.592 65.2528 267.592 70.3635C267.592 75.4742 271.737 79.6172 276.85 79.6172Z"
+      fill="#E4E4E7"/>
+    <path d="M612.242 383.591H603.687L599.616 350.612H612.242V383.591Z" fill="#A0616A"/>
+    <path
+      d="M616.757 398.405H610.622L609.527 392.616L606.723 398.405H590.452C589.672 398.405 588.913 398.156 588.284 397.694C587.656 397.232 587.192 396.581 586.96 395.837C586.728 395.093 586.74 394.294 586.994 393.557C587.249 392.82 587.732 392.184 588.374 391.741L601.367 382.772V376.919L615.033 377.735L616.757 398.405Z"
+      fill="#5A5B6C"/>
+    <path d="M553.341 383.591H544.787L540.715 350.612H553.341V383.591Z" fill="#A0616A"/>
+    <path
+      d="M557.856 398.405H551.721L550.626 392.616L547.822 398.405H531.552C530.772 398.405 530.012 398.156 529.384 397.694C528.756 397.232 528.292 396.581 528.06 395.837C527.827 395.093 527.839 394.294 528.094 393.557C528.348 392.82 528.831 392.184 529.473 391.741L542.466 382.772V376.919L556.133 377.735L557.856 398.405Z"
+      fill="#5A5B6C"/>
+    <path
+      d="M634.32 191.954C634.921 191.109 635.33 190.142 635.517 189.122C635.705 188.102 635.666 187.053 635.404 186.05C635.142 185.046 634.663 184.113 634.001 183.314C633.338 182.516 632.509 181.872 631.571 181.429L610.717 120.424L598.292 126.943L621.841 185.241C621.2 186.865 621.178 188.668 621.778 190.308C622.378 191.948 623.559 193.31 625.097 194.138C626.636 194.965 628.424 195.2 630.124 194.797C631.824 194.395 633.317 193.383 634.32 191.954Z"
+      fill="#A0616A"/>
+    <path
+      d="M503.889 219.187C504.883 218.891 505.8 218.38 506.576 217.691C507.351 217.002 507.966 216.151 508.376 215.199C508.787 214.246 508.984 213.216 508.953 212.179C508.923 211.142 508.665 210.125 508.198 209.199L529.296 148.278L515.489 145.779L498.18 206.223C496.675 207.109 495.548 208.517 495.013 210.179C494.477 211.841 494.57 213.641 495.273 215.239C495.977 216.837 497.243 218.122 498.831 218.85C500.419 219.577 502.218 219.697 503.889 219.187Z"
+      fill="#A0616A"/>
+    <path
+      d="M537.163 182.814C537.163 182.814 592.183 168.773 589.864 173.518C589.864 173.518 606.851 168.263 609.211 203.298L608.464 273.446L611.534 328.209C611.534 328.209 609.663 332.667 611.762 332.277C613.861 331.888 612.107 338.428 612.107 338.428C612.107 338.428 610.339 345.389 612.488 345.223C614.636 345.056 613.086 355.901 613.086 355.901H599.136L572.407 235.834L560.413 279.643C560.413 279.643 561.073 284.338 559.955 284.486C558.836 284.635 559.621 288.01 559.621 288.01L559.201 292.445L553.411 353.577L540.236 354.352C540.236 354.352 540.132 353.011 540.236 349.704C540.312 347.248 541.069 343.324 539.075 340.089C536.861 336.496 535.576 332.34 538.154 327.763C539.939 324.594 537.62 320.23 537.344 316.106C535.603 290.086 533.731 255.362 533.786 226.982C533.788 225.849 532.017 223.018 533.801 223.616C535.585 224.213 533.825 221.061 533.844 219.808C533.878 217.484 536.278 213.432 533.994 213.013C531.71 212.594 534.066 210.785 534.109 209.698C534.559 198.222 535.51 188.773 537.163 182.814Z"
+      fill="#5A5B6C"/>
+    <path
+      d="M561.963 68.1678L539.488 70.4917L537.31 80.9654L515.978 93.9888L523.36 113.939C523.36 113.939 517.364 134.141 534.312 142.244L540.263 159.575L538.166 171.887L537.584 175.304C539.072 178.064 539.333 180.092 536.716 180.404L535.872 185.363C532.12 187.533 532.248 191.391 534.063 195.983L609.239 203.729C612.331 193.636 595.643 160.312 586.764 157.251L587.92 107.464L589.836 74.7088L564.261 77.0327L561.963 68.1678Z"
+      fill="#1A1B38"/>
+    <path
+      d="M583.985 76.1791C585.029 75.4249 586.23 74.9161 587.499 74.6909C588.768 74.4657 590.071 74.5298 591.311 74.8784C592.551 75.2271 593.697 75.8512 594.662 76.7044C595.627 77.5575 596.387 78.6175 596.885 79.8052L610.26 111.708C612.788 112.622 616.945 120.4 615.439 122.392C615.47 124.499 614.739 122.969 616.782 125.892C619.108 126.057 619.715 127.036 618.11 129.06L617.764 131.688L618.711 131.866C621.246 131.957 621.377 132.901 619.795 134.453C620.32 134.768 620.722 135.251 620.937 135.824C621.153 136.397 621.168 137.026 620.98 137.609L619.286 142.877L606.111 149.074L584.438 108.449L580.94 85.9884C580.316 84.2443 580.275 82.3449 580.825 80.5759C581.374 78.8069 582.483 77.2639 583.985 76.1791Z"
+      fill="#1A1B38"/>
+    <path
+      d="M523.92 94.8657C522.736 93.8413 521.272 93.1942 519.717 93.0078C518.162 92.8215 516.587 93.1042 515.194 93.8198C513.801 94.5354 512.655 95.651 511.901 97.0233C511.148 98.3956 510.822 99.9617 510.966 101.52C512.009 112.791 513.12 124.784 513.12 124.784L511.301 156.019L527.863 159.575L528.502 155.096L530.188 154.152L529.007 151.561C529.305 151.591 529.606 151.545 529.883 151.43C530.16 151.314 530.403 151.132 530.592 150.899C530.781 150.666 530.909 150.391 530.966 150.096C531.022 149.802 531.004 149.498 530.914 149.212L529.832 145.779C530.002 145.917 530.212 145.996 530.43 146.005C530.649 146.013 530.864 145.951 531.044 145.827C531.224 145.703 531.359 145.523 531.429 145.316C531.499 145.109 531.499 144.885 531.431 144.677L530.425 141.631L534.82 110.841L525.335 96.4765C524.939 95.8774 524.463 95.3354 523.92 94.8657Z"
+      fill="#1A1B38"/>
+    <path d="M334.325 153.615H332.775V213.295H444.886V211.746H334.325V153.615Z" fill="#1A1B38"/>
+    <path
+      d="M502.37 213.024C502.367 210.354 501.305 207.795 499.416 205.907C497.527 204.019 494.966 202.957 492.295 202.954H451.219C448.547 202.954 445.985 204.015 444.095 205.904C442.206 207.792 441.144 210.354 441.144 213.024C441.144 215.695 442.206 218.257 444.095 220.145C445.985 222.034 448.547 223.095 451.219 223.095H492.295C494.966 223.092 497.527 222.03 499.416 220.142C501.305 218.254 502.367 215.694 502.37 213.024Z"
+      fill="#8F84FF"/>
+    <path
+      d="M334.201 159.405C339.314 159.405 343.459 155.262 343.459 150.151C343.459 145.04 339.314 140.897 334.201 140.897C329.088 140.897 324.943 145.04 324.943 150.151C324.943 155.262 329.088 159.405 334.201 159.405Z"
+      fill="#E4E4E7"/>
+    <path d="M168.045 154.389H169.595V214.07H57.4847V212.52H168.045V154.389Z" fill="#1A1B38"/>
+    <path
+      d="M10.0751 223.869H51.1505C53.8226 223.869 56.3853 222.808 58.2747 220.92C60.1642 219.031 61.2256 216.47 61.2256 213.799C61.2256 211.128 60.1642 208.567 58.2747 206.678C56.3853 204.79 53.8226 203.729 51.1505 203.729H10.0751C7.40302 203.729 4.84038 204.79 2.95093 206.678C1.06149 208.567 0 211.128 0 213.799C0 216.47 1.06149 219.031 2.95093 220.92C4.84038 222.808 7.40302 223.869 10.0751 223.869Z"
+      fill="#8F84FF"/>
+    <path
+      d="M169.899 158.886C175.012 158.886 179.158 154.743 179.158 149.633C179.158 144.522 175.012 140.379 169.899 140.379C164.786 140.379 160.641 144.522 160.641 149.633C160.641 154.743 164.786 158.886 169.899 158.886Z"
+      fill="#E4E4E7"/>
+    <path
+      d="M665.704 399.206H639.984L639.874 399.006C639.545 398.409 639.227 397.778 638.931 397.129C636.281 391.46 635.162 384.976 634.173 379.255L633.429 374.943C633.339 374.421 633.407 373.884 633.624 373.401C633.842 372.917 634.198 372.509 634.648 372.23C635.099 371.95 635.622 371.811 636.152 371.83C636.682 371.85 637.194 372.027 637.622 372.339C641.531 375.182 645.441 378.022 649.353 380.859C650.834 381.936 652.526 383.183 654.146 384.53C654.302 383.771 654.466 383.01 654.629 382.26C654.742 381.742 655.007 381.269 655.39 380.902C655.773 380.536 656.257 380.291 656.779 380.201C657.302 380.111 657.84 380.178 658.324 380.395C658.808 380.612 659.216 380.969 659.497 381.419L662.506 386.251C664.701 389.78 666.638 393.258 666.243 397.008C666.245 397.054 666.242 397.1 666.233 397.145C666.154 397.761 666.008 398.366 665.796 398.95L665.704 399.206Z"
+      fill="#F0F0F0"/>
+    <path
+      d="M691.519 399.762L447.114 400C446.87 399.999 446.637 399.901 446.465 399.728C446.293 399.555 446.196 399.321 446.196 399.078C446.196 398.834 446.293 398.6 446.465 398.427C446.637 398.254 446.87 398.157 447.114 398.155L691.519 397.917C691.763 397.918 691.996 398.016 692.169 398.189C692.341 398.362 692.437 398.596 692.437 398.84C692.437 399.083 692.341 399.317 692.169 399.49C691.996 399.663 691.763 399.761 691.519 399.762Z"
+      fill="#CACACA"/>
+    <path
+      d="M80.6832 138.928C96.0921 138.928 108.584 126.443 108.584 111.041C108.584 95.6396 96.0921 83.1543 80.6832 83.1543C65.2743 83.1543 52.7829 95.6396 52.7829 111.041C52.7829 126.443 65.2743 138.928 80.6832 138.928Z"
+      fill="#F2F2F2"/>
+    <path
+      d="M186.395 96.8H167.986C167.264 96.8 166.573 96.5136 166.062 96.0037C165.552 95.4938 165.266 94.8023 165.266 94.0812C165.266 93.3601 165.552 92.6686 166.062 92.1587C166.573 91.6488 167.264 91.3624 167.986 91.3624H186.395C187.116 91.3624 187.808 91.6488 188.318 92.1587C188.828 92.6686 189.115 93.3601 189.115 94.0812C189.115 94.8023 188.828 95.4938 188.318 96.0037C187.808 96.5136 187.116 96.8 186.395 96.8Z"
+      fill="#8F84FF"/>
+    <path
+      d="M218.321 112.938H136.06C135.339 112.938 134.647 112.651 134.137 112.142C133.626 111.632 133.34 110.94 133.34 110.219C133.34 109.498 133.626 108.806 134.137 108.297C134.647 107.787 135.339 107.5 136.06 107.5H218.321C219.042 107.5 219.734 107.787 220.244 108.297C220.754 108.806 221.041 109.498 221.041 110.219C221.041 110.94 220.754 111.632 220.244 112.142C219.734 112.651 219.042 112.938 218.321 112.938Z"
+      fill="#E4E4E7"/>
+    <path
+      d="M218.321 130.72H136.06C135.339 130.72 134.647 130.433 134.137 129.924C133.626 129.414 133.34 128.722 133.34 128.001C133.34 127.28 133.626 126.588 134.137 126.079C134.647 125.569 135.339 125.282 136.06 125.282H218.321C219.042 125.282 219.734 125.569 220.244 126.079C220.754 126.588 221.041 127.28 221.041 128.001C221.041 128.722 220.754 129.414 220.244 129.924C219.734 130.433 219.042 130.72 218.321 130.72Z"
+      fill="#E4E4E7"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_1388_30647">
+      <rect width="692.437" height="400" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/@xen-orchestra/web-core/lib/components/ui/NoDataError.vue b/@xen-orchestra/web-core/lib/components/ui/NoDataError.vue
new file mode 100644
index 00000000000..16b55e31d03
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/NoDataError.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="no-data">
+    <img alt="" class="img" src="@/assets/undraw-bug-fixing.svg" />
+    <p class="text-error typo h4-medium">{{ $t('error-no-data') }}</p>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.no-data {
+  text-align: center;
+}
+
+.img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1em;
+  width: 17em;
+  height: 13em;
+}
+.text-error {
+  margin: auto;
+  width: 8em;
+  font-style: normal;
+  color: var(--color-danger-txt-base);
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue b/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
index 25bce03cc82..022efa0fba8 100644
--- a/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
@@ -6,26 +6,26 @@
         <component :is="action" />
       </template>
       <UiButtonIcon v-if="moreThanTwoActions" :icon="faEllipsis" accent="info" size="large" @click="toggleDropdown" />
-      <div v-if="isDropdownOpen" class="dropdown-menu">
+      <DropdownList v-if="isDropdownOpen" class="dropdown-menu">
         <template v-for="(action, index) in additionalActions" :key="'extra-' + index">
           <component :is="action" class="dropdown-item" />
         </template>
-      </div>
+      </DropdownList>
     </div>
     <div v-if="slots.content && !props.busy && !isError" class="content">
       <slot name="content" />
     </div>
-    <UiLoader v-if="props.busy && !isError" class="loader" />
+    <VtsStateHero v-if="busy" type="card" busy />
     <div v-if="!props.busy && isError" class="error">
-      <div class="typo h4-medium" />
+      <div v-if="!props.busy && !slots.content" class="empty" />
     </div>
-    <div v-if="!props.busy && !slots.content" class="empty" />
   </div>
 </template>
 
 <script setup lang="ts">
+import DropdownList from '@core/components/dropdown/DropdownList.vue'
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import { faEllipsis } from '@fortawesome/free-solid-svg-icons'
 import { computed, ref } from 'vue'
 
@@ -42,27 +42,13 @@ const slots = defineSlots<{
 
 const isDropdownOpen = ref(false)
 
-const moreThanTwoActions = computed(() => {
-  return slots.actions && slots.actions().length > 2
-})
+const moreThanTwoActions = computed(() => slots.actions?.().length > 2)
 
-const isEmpty = computed(() => {
-  return slots.content && slots.content().length === 0
-})
+const isEmpty = computed(() => slots.content?.().length === 0)
 
-const actionsToDisplay = computed(() => {
-  if (slots.actions) {
-    return slots.actions().slice(0, 2)
-  }
-  return []
-})
+const actionsToDisplay = computed(() => (slots.actions ? slots.actions().slice(0, 2) : []))
 
-const additionalActions = computed(() => {
-  if (slots.actions) {
-    return slots.actions().slice(2)
-  }
-  return []
-})
+const additionalActions = computed(() => (slots.actions ? slots.actions().slice(2) : []))
 
 const toggleDropdown = () => {
   isDropdownOpen.value = !isDropdownOpen.value
@@ -71,7 +57,8 @@ const toggleDropdown = () => {
 
 <style scoped lang="postcss">
 .ui-side-panel {
-  height: 100%;
+  //height: 100%;
+  height: 100vh;
   display: flex;
   flex-direction: column;
   border: 0.1rem solid var(--color-neutral-border);
@@ -93,24 +80,17 @@ const toggleDropdown = () => {
   }
 
   &.error {
-    color: var(--color-danger-txt-base);
+    padding-top: 15rem;
     background-color: var(--color-danger-background-selected);
   }
 
-  .dropdown {
-    position: relative;
-    display: inline-block;
-  }
-
   .dropdown-menu {
     position: absolute;
     top: 100%;
-    left: 0;
-    background-color: white;
-    border: 1px solid #ddd;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-    padding: 8px 0;
+    right: 0;
     z-index: 1000;
+    gap: 0.8rem;
+    padding-inline: 0.8rem;
   }
 
   .dropdown-item {
@@ -122,9 +102,4 @@ const toggleDropdown = () => {
     background-color: #f0f0f0;
   }
 }
-
-.loader {
-  font-size: 64px;
-  margin: auto;
-}
 </style>

From d20ae278d815915c3c780133d036f4f4db647280 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastian=20Czech?= <czechsebastian@icloud.com>
Date: Fri, 8 Nov 2024 10:46:56 +0100
Subject: [PATCH 04/16] feat(xo-6): remove dropdown

---
 .../ui/side-panel/ui-side-panel.story.vue     |  9 +--
 .../components/ui/side-panel/UiSidePanel.vue  | 56 ++-----------------
 2 files changed, 8 insertions(+), 57 deletions(-)

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
index 8b0f6921276..f47fcf99172 100644
--- a/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
@@ -8,7 +8,7 @@
       setting('action1').widget(text()).preset('Edit'),
       setting('action2').widget(text()).preset('Delete'),
       slot(),
-      slot('actions').help('Meant to receive UiButton'),
+      slot('header').help('Meant to receive UiButton'),
       slot('content').help('Meant to display cards or other component'),
     ]"
     :presets="{
@@ -41,16 +41,11 @@
     }"
   >
     <UiSidePanel v-bind="properties">
-      <template v-if="!properties.isEmpty" #actions>
+      <template v-if="!properties.isEmpty" #header>
         <UiButton variant="tertiary" size="medium" accent="info" :left-icon="faEdit"> {{ settings.action1 }}</UiButton>
         <UiButton variant="tertiary" size="medium" accent="danger" :left-icon="faTrash">
           {{ settings.action2 }}
         </UiButton>
-        <UiButton variant="tertiary" size="medium" accent="info"> Button 3</UiButton>
-        <UiButton variant="tertiary" size="medium" accent="info"> Button 4</UiButton>
-        <UiButton variant="tertiary" size="medium" accent="info"> Button 5</UiButton>
-        <UiButton variant="tertiary" size="medium" accent="info"> Button 6</UiButton>
-        <UiButton variant="tertiary" size="medium" accent="info"> Button 7</UiButton>
       </template>
       <template v-if="!properties.isEmpty" #content>
         <UiCard>
diff --git a/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue b/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
index 022efa0fba8..cb568605c96 100644
--- a/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
@@ -1,21 +1,12 @@
 <!-- v1 -->
 <template>
   <div class="ui-side-panel" :class="{ error: isError }">
-    <div v-if="slots.actions && !props.busy && !isError && !isEmpty" class="actions">
-      <template v-for="(action, index) in actionsToDisplay" :key="index">
-        <component :is="action" />
-      </template>
-      <UiButtonIcon v-if="moreThanTwoActions" :icon="faEllipsis" accent="info" size="large" @click="toggleDropdown" />
-      <DropdownList v-if="isDropdownOpen" class="dropdown-menu">
-        <template v-for="(action, index) in additionalActions" :key="'extra-' + index">
-          <component :is="action" class="dropdown-item" />
-        </template>
-      </DropdownList>
+    <div v-if="slots.header && !props.busy && !isError && !isEmpty" class="header">
+      <slot name="header" />
     </div>
     <div v-if="slots.content && !props.busy && !isError" class="content">
       <slot name="content" />
     </div>
-    <VtsStateHero v-if="busy" type="card" busy />
     <div v-if="!props.busy && isError" class="error">
       <div v-if="!props.busy && !slots.content" class="empty" />
     </div>
@@ -23,11 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import DropdownList from '@core/components/dropdown/DropdownList.vue'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
-import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import { faEllipsis } from '@fortawesome/free-solid-svg-icons'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 
 const props = defineProps<{
   busy?: boolean
@@ -36,35 +23,22 @@ const props = defineProps<{
 
 const slots = defineSlots<{
   default(): any
+  header?(): any
   content?(): any
-  actions?(): any
 }>()
 
-const isDropdownOpen = ref(false)
-
-const moreThanTwoActions = computed(() => slots.actions?.().length > 2)
-
 const isEmpty = computed(() => slots.content?.().length === 0)
-
-const actionsToDisplay = computed(() => (slots.actions ? slots.actions().slice(0, 2) : []))
-
-const additionalActions = computed(() => (slots.actions ? slots.actions().slice(2) : []))
-
-const toggleDropdown = () => {
-  isDropdownOpen.value = !isDropdownOpen.value
-}
 </script>
 
 <style scoped lang="postcss">
 .ui-side-panel {
-  //height: 100%;
-  height: 100vh;
+  height: 100%;
   display: flex;
   flex-direction: column;
   border: 0.1rem solid var(--color-neutral-border);
   background-color: var(--color-neutral-background-secondary);
 
-  .actions {
+  .header {
     border-bottom: 0.1rem solid var(--color-neutral-border);
     background-color: var(--color-neutral-background-primary);
     display: flex;
@@ -83,23 +57,5 @@ const toggleDropdown = () => {
     padding-top: 15rem;
     background-color: var(--color-danger-background-selected);
   }
-
-  .dropdown-menu {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    z-index: 1000;
-    gap: 0.8rem;
-    padding-inline: 0.8rem;
-  }
-
-  .dropdown-item {
-    padding: 8px 16px;
-    cursor: pointer;
-  }
-
-  .dropdown-item:hover {
-    background-color: #f0f0f0;
-  }
 }
 </style>

From 534c972fe34dad32c0d07aae05e51f91a48cb4b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastian=20Czech?= <czechsebastian@icloud.com>
Date: Fri, 8 Nov 2024 10:47:51 +0100
Subject: [PATCH 05/16] feat(xo-6): remove duplicated component

---
 .../web-core/lib/assets/no-selection.svg      | 98 -------------------
 1 file changed, 98 deletions(-)
 delete mode 100644 @xen-orchestra/web-core/lib/assets/no-selection.svg

diff --git a/@xen-orchestra/web-core/lib/assets/no-selection.svg b/@xen-orchestra/web-core/lib/assets/no-selection.svg
deleted file mode 100644
index fdf323b36f6..00000000000
--- a/@xen-orchestra/web-core/lib/assets/no-selection.svg
+++ /dev/null
@@ -1,98 +0,0 @@
-<svg width="693" height="400" viewBox="0 0 693 400" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g clip-path="url(#clip0_1388_30647)">
-    <path
-      d="M581.158 42.4604C585.622 74.0215 564.279 68.0764 548.712 65.6362C545.003 65.0535 538.206 70.0386 535.862 71.3699C534.546 66.6955 534.468 67.8679 530.998 63.9607C532.869 69.1024 527.112 71.3932 529.209 74.3993C523.998 74.0288 521.693 62.9409 526.369 38.763C528.426 28.1241 533.791 11.8188 555.756 15.4218C579.552 19.3271 579.76 32.5776 581.158 42.4604Z"
-      fill="#5A5B6C"/>
-    <path
-      d="M549.661 65.6701C560.533 65.6701 569.346 56.8607 569.346 45.9937C569.346 35.1268 560.533 26.3174 549.661 26.3174C538.788 26.3174 529.975 35.1268 529.975 45.9937C529.975 56.8607 538.788 65.6701 549.661 65.6701Z"
-      fill="#A0616A"/>
-    <path
-      d="M523.164 38.9726L532.594 40.413C536.753 37.8095 538.337 33.9465 538.534 29.4055L537.586 41.1755L542.093 41.864C545.035 39.9022 546.35 37.7778 545.558 35.4429L545.005 42.3088C557.019 46.6352 568.664 49.8258 578.495 47.4242C579.002 44.1115 578.85 40.7314 578.05 37.4771C577.249 34.2227 575.816 31.1578 573.83 28.4574C571.845 25.7569 569.347 23.4738 566.478 21.7383C563.61 20.0028 560.428 18.849 557.113 18.3428L552.26 17.6014C548.946 17.0951 545.564 17.2463 542.308 18.0463C539.052 18.8463 535.986 20.2795 533.284 22.264C530.582 24.2485 528.298 26.7455 526.562 29.6123C524.825 32.4792 523.671 35.6598 523.164 38.9726Z"
-      fill="#5A5B6C"/>
-    <path
-      d="M491.45 168.485H39.6699C36.8737 168.481 34.1929 167.37 32.2156 165.393C30.2383 163.417 29.1261 160.737 29.1228 157.943V64.4263C29.1261 61.6314 30.2383 58.9519 32.2156 56.9756C34.1929 54.9993 36.8737 53.8876 39.6699 53.8843H491.45C494.246 53.8876 496.927 54.9993 498.904 56.9756C500.881 58.9519 501.994 61.6314 501.997 64.4263V157.942C501.994 160.737 500.881 163.417 498.904 165.393C496.927 167.37 494.246 168.481 491.45 168.485Z"
-      fill="#E4E4E7"/>
-    <path
-      d="M460.957 161.374H46.7858C43.9895 161.371 41.3087 160.259 39.3315 158.283C37.3542 156.306 36.242 153.627 36.2387 150.832V71.5427C36.242 68.7478 37.3542 66.0683 39.3315 64.092C41.3087 62.1157 43.9895 61.004 46.7858 61.0007H484.336C487.132 61.004 489.813 62.1157 491.79 64.092C493.767 66.0683 494.879 68.7478 494.883 71.5427V127.465C494.873 136.455 491.295 145.074 484.935 151.431C478.575 157.788 469.952 161.364 460.957 161.374Z"
-      fill="white"/>
-    <path
-      d="M406.337 96.9461H280.202C279.48 96.9461 278.788 96.6597 278.278 96.1498C277.768 95.6399 277.481 94.9484 277.481 94.2273C277.481 93.5062 277.768 92.8147 278.278 92.3048C278.788 91.795 279.48 91.5085 280.202 91.5085H406.337C407.058 91.5085 407.75 91.795 408.26 92.3048C408.77 92.8147 409.057 93.5062 409.057 94.2273C409.057 94.9484 408.77 95.6399 408.26 96.1498C407.75 96.6597 407.058 96.9461 406.337 96.9461Z"
-      fill="#8F84FF"/>
-    <path
-      d="M438.263 113.084H248.276C247.554 113.084 246.862 112.797 246.352 112.288C245.842 111.778 245.556 111.086 245.556 110.365C245.556 109.644 245.842 108.952 246.352 108.443C246.862 107.933 247.554 107.646 248.276 107.646H438.263C438.984 107.646 439.676 107.933 440.186 108.443C440.696 108.952 440.983 109.644 440.983 110.365C440.983 111.086 440.696 111.778 440.186 112.288C439.676 112.797 438.984 113.084 438.263 113.084Z"
-      fill="#E4E4E7"/>
-    <path
-      d="M438.263 130.866H248.276C247.554 130.866 246.862 130.58 246.352 130.07C245.842 129.56 245.556 128.868 245.556 128.147C245.556 127.426 245.842 126.735 246.352 126.225C246.862 125.715 247.554 125.428 248.276 125.428H438.263C438.984 125.428 439.676 125.715 440.186 126.225C440.696 126.735 440.983 127.426 440.983 128.147C440.983 128.868 440.696 129.56 440.186 130.07C439.676 130.58 438.984 130.866 438.263 130.866Z"
-      fill="#E4E4E7"/>
-    <path d="M278.525 69.4801H276.975V9.7999H389.085V11.3492H278.525V69.4801Z" fill="#1A1B38"/>
-    <path
-      d="M436.494 -3.05176e-05H395.419C392.747 -3.05176e-05 390.184 1.06094 388.295 2.94948C386.405 4.83802 385.344 7.39942 385.344 10.0702C385.344 12.741 386.405 15.3024 388.295 17.191C390.184 19.0795 392.747 20.1405 395.419 20.1405H436.494C439.166 20.1405 441.729 19.0795 443.619 17.191C445.508 15.3024 446.569 12.741 446.569 10.0702C446.569 7.39942 445.508 4.83802 443.619 2.94948C441.729 1.06094 439.166 -3.05176e-05 436.494 -3.05176e-05Z"
-      fill="#8F84FF"/>
-    <path
-      d="M276.85 79.6172C281.964 79.6172 286.109 75.4742 286.109 70.3635C286.109 65.2528 281.964 61.1098 276.85 61.1098C271.737 61.1098 267.592 65.2528 267.592 70.3635C267.592 75.4742 271.737 79.6172 276.85 79.6172Z"
-      fill="#E4E4E7"/>
-    <path d="M612.242 383.591H603.687L599.616 350.612H612.242V383.591Z" fill="#A0616A"/>
-    <path
-      d="M616.757 398.405H610.622L609.527 392.616L606.723 398.405H590.452C589.672 398.405 588.913 398.156 588.284 397.694C587.656 397.232 587.192 396.581 586.96 395.837C586.728 395.093 586.74 394.294 586.994 393.557C587.249 392.82 587.732 392.184 588.374 391.741L601.367 382.772V376.919L615.033 377.735L616.757 398.405Z"
-      fill="#5A5B6C"/>
-    <path d="M553.341 383.591H544.787L540.715 350.612H553.341V383.591Z" fill="#A0616A"/>
-    <path
-      d="M557.856 398.405H551.721L550.626 392.616L547.822 398.405H531.552C530.772 398.405 530.012 398.156 529.384 397.694C528.756 397.232 528.292 396.581 528.06 395.837C527.827 395.093 527.839 394.294 528.094 393.557C528.348 392.82 528.831 392.184 529.473 391.741L542.466 382.772V376.919L556.133 377.735L557.856 398.405Z"
-      fill="#5A5B6C"/>
-    <path
-      d="M634.32 191.954C634.921 191.109 635.33 190.142 635.517 189.122C635.705 188.102 635.666 187.053 635.404 186.05C635.142 185.046 634.663 184.113 634.001 183.314C633.338 182.516 632.509 181.872 631.571 181.429L610.717 120.424L598.292 126.943L621.841 185.241C621.2 186.865 621.178 188.668 621.778 190.308C622.378 191.948 623.559 193.31 625.097 194.138C626.636 194.965 628.424 195.2 630.124 194.797C631.824 194.395 633.317 193.383 634.32 191.954Z"
-      fill="#A0616A"/>
-    <path
-      d="M503.889 219.187C504.883 218.891 505.8 218.38 506.576 217.691C507.351 217.002 507.966 216.151 508.376 215.199C508.787 214.246 508.984 213.216 508.953 212.179C508.923 211.142 508.665 210.125 508.198 209.199L529.296 148.278L515.489 145.779L498.18 206.223C496.675 207.109 495.548 208.517 495.013 210.179C494.477 211.841 494.57 213.641 495.273 215.239C495.977 216.837 497.243 218.122 498.831 218.85C500.419 219.577 502.218 219.697 503.889 219.187Z"
-      fill="#A0616A"/>
-    <path
-      d="M537.163 182.814C537.163 182.814 592.183 168.773 589.864 173.518C589.864 173.518 606.851 168.263 609.211 203.298L608.464 273.446L611.534 328.209C611.534 328.209 609.663 332.667 611.762 332.277C613.861 331.888 612.107 338.428 612.107 338.428C612.107 338.428 610.339 345.389 612.488 345.223C614.636 345.056 613.086 355.901 613.086 355.901H599.136L572.407 235.834L560.413 279.643C560.413 279.643 561.073 284.338 559.955 284.486C558.836 284.635 559.621 288.01 559.621 288.01L559.201 292.445L553.411 353.577L540.236 354.352C540.236 354.352 540.132 353.011 540.236 349.704C540.312 347.248 541.069 343.324 539.075 340.089C536.861 336.496 535.576 332.34 538.154 327.763C539.939 324.594 537.62 320.23 537.344 316.106C535.603 290.086 533.731 255.362 533.786 226.982C533.788 225.849 532.017 223.018 533.801 223.616C535.585 224.213 533.825 221.061 533.844 219.808C533.878 217.484 536.278 213.432 533.994 213.013C531.71 212.594 534.066 210.785 534.109 209.698C534.559 198.222 535.51 188.773 537.163 182.814Z"
-      fill="#5A5B6C"/>
-    <path
-      d="M561.963 68.1678L539.488 70.4917L537.31 80.9654L515.978 93.9888L523.36 113.939C523.36 113.939 517.364 134.141 534.312 142.244L540.263 159.575L538.166 171.887L537.584 175.304C539.072 178.064 539.333 180.092 536.716 180.404L535.872 185.363C532.12 187.533 532.248 191.391 534.063 195.983L609.239 203.729C612.331 193.636 595.643 160.312 586.764 157.251L587.92 107.464L589.836 74.7088L564.261 77.0327L561.963 68.1678Z"
-      fill="#1A1B38"/>
-    <path
-      d="M583.985 76.1791C585.029 75.4249 586.23 74.9161 587.499 74.6909C588.768 74.4657 590.071 74.5298 591.311 74.8784C592.551 75.2271 593.697 75.8512 594.662 76.7044C595.627 77.5575 596.387 78.6175 596.885 79.8052L610.26 111.708C612.788 112.622 616.945 120.4 615.439 122.392C615.47 124.499 614.739 122.969 616.782 125.892C619.108 126.057 619.715 127.036 618.11 129.06L617.764 131.688L618.711 131.866C621.246 131.957 621.377 132.901 619.795 134.453C620.32 134.768 620.722 135.251 620.937 135.824C621.153 136.397 621.168 137.026 620.98 137.609L619.286 142.877L606.111 149.074L584.438 108.449L580.94 85.9884C580.316 84.2443 580.275 82.3449 580.825 80.5759C581.374 78.8069 582.483 77.2639 583.985 76.1791Z"
-      fill="#1A1B38"/>
-    <path
-      d="M523.92 94.8657C522.736 93.8413 521.272 93.1942 519.717 93.0078C518.162 92.8215 516.587 93.1042 515.194 93.8198C513.801 94.5354 512.655 95.651 511.901 97.0233C511.148 98.3956 510.822 99.9617 510.966 101.52C512.009 112.791 513.12 124.784 513.12 124.784L511.301 156.019L527.863 159.575L528.502 155.096L530.188 154.152L529.007 151.561C529.305 151.591 529.606 151.545 529.883 151.43C530.16 151.314 530.403 151.132 530.592 150.899C530.781 150.666 530.909 150.391 530.966 150.096C531.022 149.802 531.004 149.498 530.914 149.212L529.832 145.779C530.002 145.917 530.212 145.996 530.43 146.005C530.649 146.013 530.864 145.951 531.044 145.827C531.224 145.703 531.359 145.523 531.429 145.316C531.499 145.109 531.499 144.885 531.431 144.677L530.425 141.631L534.82 110.841L525.335 96.4765C524.939 95.8774 524.463 95.3354 523.92 94.8657Z"
-      fill="#1A1B38"/>
-    <path d="M334.325 153.615H332.775V213.295H444.886V211.746H334.325V153.615Z" fill="#1A1B38"/>
-    <path
-      d="M502.37 213.024C502.367 210.354 501.305 207.795 499.416 205.907C497.527 204.019 494.966 202.957 492.295 202.954H451.219C448.547 202.954 445.985 204.015 444.095 205.904C442.206 207.792 441.144 210.354 441.144 213.024C441.144 215.695 442.206 218.257 444.095 220.145C445.985 222.034 448.547 223.095 451.219 223.095H492.295C494.966 223.092 497.527 222.03 499.416 220.142C501.305 218.254 502.367 215.694 502.37 213.024Z"
-      fill="#8F84FF"/>
-    <path
-      d="M334.201 159.405C339.314 159.405 343.459 155.262 343.459 150.151C343.459 145.04 339.314 140.897 334.201 140.897C329.088 140.897 324.943 145.04 324.943 150.151C324.943 155.262 329.088 159.405 334.201 159.405Z"
-      fill="#E4E4E7"/>
-    <path d="M168.045 154.389H169.595V214.07H57.4847V212.52H168.045V154.389Z" fill="#1A1B38"/>
-    <path
-      d="M10.0751 223.869H51.1505C53.8226 223.869 56.3853 222.808 58.2747 220.92C60.1642 219.031 61.2256 216.47 61.2256 213.799C61.2256 211.128 60.1642 208.567 58.2747 206.678C56.3853 204.79 53.8226 203.729 51.1505 203.729H10.0751C7.40302 203.729 4.84038 204.79 2.95093 206.678C1.06149 208.567 0 211.128 0 213.799C0 216.47 1.06149 219.031 2.95093 220.92C4.84038 222.808 7.40302 223.869 10.0751 223.869Z"
-      fill="#8F84FF"/>
-    <path
-      d="M169.899 158.886C175.012 158.886 179.158 154.743 179.158 149.633C179.158 144.522 175.012 140.379 169.899 140.379C164.786 140.379 160.641 144.522 160.641 149.633C160.641 154.743 164.786 158.886 169.899 158.886Z"
-      fill="#E4E4E7"/>
-    <path
-      d="M665.704 399.206H639.984L639.874 399.006C639.545 398.409 639.227 397.778 638.931 397.129C636.281 391.46 635.162 384.976 634.173 379.255L633.429 374.943C633.339 374.421 633.407 373.884 633.624 373.401C633.842 372.917 634.198 372.509 634.648 372.23C635.099 371.95 635.622 371.811 636.152 371.83C636.682 371.85 637.194 372.027 637.622 372.339C641.531 375.182 645.441 378.022 649.353 380.859C650.834 381.936 652.526 383.183 654.146 384.53C654.302 383.771 654.466 383.01 654.629 382.26C654.742 381.742 655.007 381.269 655.39 380.902C655.773 380.536 656.257 380.291 656.779 380.201C657.302 380.111 657.84 380.178 658.324 380.395C658.808 380.612 659.216 380.969 659.497 381.419L662.506 386.251C664.701 389.78 666.638 393.258 666.243 397.008C666.245 397.054 666.242 397.1 666.233 397.145C666.154 397.761 666.008 398.366 665.796 398.95L665.704 399.206Z"
-      fill="#F0F0F0"/>
-    <path
-      d="M691.519 399.762L447.114 400C446.87 399.999 446.637 399.901 446.465 399.728C446.293 399.555 446.196 399.321 446.196 399.078C446.196 398.834 446.293 398.6 446.465 398.427C446.637 398.254 446.87 398.157 447.114 398.155L691.519 397.917C691.763 397.918 691.996 398.016 692.169 398.189C692.341 398.362 692.437 398.596 692.437 398.84C692.437 399.083 692.341 399.317 692.169 399.49C691.996 399.663 691.763 399.761 691.519 399.762Z"
-      fill="#CACACA"/>
-    <path
-      d="M80.6832 138.928C96.0921 138.928 108.584 126.443 108.584 111.041C108.584 95.6396 96.0921 83.1543 80.6832 83.1543C65.2743 83.1543 52.7829 95.6396 52.7829 111.041C52.7829 126.443 65.2743 138.928 80.6832 138.928Z"
-      fill="#F2F2F2"/>
-    <path
-      d="M186.395 96.8H167.986C167.264 96.8 166.573 96.5136 166.062 96.0037C165.552 95.4938 165.266 94.8023 165.266 94.0812C165.266 93.3601 165.552 92.6686 166.062 92.1587C166.573 91.6488 167.264 91.3624 167.986 91.3624H186.395C187.116 91.3624 187.808 91.6488 188.318 92.1587C188.828 92.6686 189.115 93.3601 189.115 94.0812C189.115 94.8023 188.828 95.4938 188.318 96.0037C187.808 96.5136 187.116 96.8 186.395 96.8Z"
-      fill="#8F84FF"/>
-    <path
-      d="M218.321 112.938H136.06C135.339 112.938 134.647 112.651 134.137 112.142C133.626 111.632 133.34 110.94 133.34 110.219C133.34 109.498 133.626 108.806 134.137 108.297C134.647 107.787 135.339 107.5 136.06 107.5H218.321C219.042 107.5 219.734 107.787 220.244 108.297C220.754 108.806 221.041 109.498 221.041 110.219C221.041 110.94 220.754 111.632 220.244 112.142C219.734 112.651 219.042 112.938 218.321 112.938Z"
-      fill="#E4E4E7"/>
-    <path
-      d="M218.321 130.72H136.06C135.339 130.72 134.647 130.433 134.137 129.924C133.626 129.414 133.34 128.722 133.34 128.001C133.34 127.28 133.626 126.588 134.137 126.079C134.647 125.569 135.339 125.282 136.06 125.282H218.321C219.042 125.282 219.734 125.569 220.244 126.079C220.754 126.588 221.041 127.28 221.041 128.001C221.041 128.722 220.754 129.414 220.244 129.924C219.734 130.433 219.042 130.72 218.321 130.72Z"
-      fill="#E4E4E7"/>
-  </g>
-  <defs>
-    <clipPath id="clip0_1388_30647">
-      <rect width="692.437" height="400" fill="white"/>
-    </clipPath>
-  </defs>
-</svg>

From 3cbbc6b513c4658b8727f732bfb346f0effbc6f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastian=20Czech?= <czechsebastian@icloud.com>
Date: Fri, 8 Nov 2024 10:49:10 +0100
Subject: [PATCH 06/16] feat(xo-6): remove duplicated component

---
 .../lib/components/ui/NoDataError.vue         | 27 -------------------
 1 file changed, 27 deletions(-)
 delete mode 100644 @xen-orchestra/web-core/lib/components/ui/NoDataError.vue

diff --git a/@xen-orchestra/web-core/lib/components/ui/NoDataError.vue b/@xen-orchestra/web-core/lib/components/ui/NoDataError.vue
deleted file mode 100644
index 16b55e31d03..00000000000
--- a/@xen-orchestra/web-core/lib/components/ui/NoDataError.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="no-data">
-    <img alt="" class="img" src="@/assets/undraw-bug-fixing.svg" />
-    <p class="text-error typo h4-medium">{{ $t('error-no-data') }}</p>
-  </div>
-</template>
-
-<style scoped lang="postcss">
-.no-data {
-  text-align: center;
-}
-
-.img {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 1em;
-  width: 17em;
-  height: 13em;
-}
-.text-error {
-  margin: auto;
-  width: 8em;
-  font-style: normal;
-  color: var(--color-danger-txt-base);
-}
-</style>

From dccac09cb251e69bddc93828174077a84d43bff3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastian=20Czech?= <czechsebastian@icloud.com>
Date: Wed, 13 Nov 2024 16:48:13 +0100
Subject: [PATCH 07/16] feat(xo-lite): feedback

---
 .../ui-panel.story.vue}                       | 56 ++++++-------------
 .../UiSidePanel.vue => panel/UiPanel.vue}     | 32 +++++------
 2 files changed, 31 insertions(+), 57 deletions(-)
 rename @xen-orchestra/lite/src/stories/web-core/ui/{side-panel/ui-side-panel.story.vue => panel/ui-panel.story.vue} (52%)
 rename @xen-orchestra/web-core/lib/components/ui/{side-panel/UiSidePanel.vue => panel/UiPanel.vue} (57%)

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/panel/ui-panel.story.vue
similarity index 52%
rename from @xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/panel/ui-panel.story.vue
index f47fcf99172..c3ea870b6ca 100644
--- a/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/panel/ui-panel.story.vue
@@ -2,68 +2,40 @@
   <ComponentStory
     v-slot="{ properties, settings }"
     :params="[
-      prop('busy').bool().widget(),
-      prop('isError').bool().widget(),
-      prop('isEmpty').bool().widget(),
+      prop('error').bool().widget(),
       setting('action1').widget(text()).preset('Edit'),
       setting('action2').widget(text()).preset('Delete'),
       slot(),
-      slot('header').help('Meant to receive UiButton'),
-      slot('content').help('Meant to display cards or other component'),
+      slot('header').help('Meant to receive UiButton or other information'),
     ]"
     :presets="{
       Normal: {
         props: {
-          busy: false,
-          isError: false,
-          isEmpty: false,
-        },
-      },
-      Empty: {
-        props: {
-          busy: false,
-          isError: false,
-          isEmpty: true,
+          error: false,
         },
       },
       Error: {
         props: {
-          busy: false,
-          isError: true,
-        },
-      },
-      Busy: {
-        props: {
-          busy: true,
-          isError: false,
+          error: true,
         },
       },
     }"
   >
-    <UiSidePanel v-bind="properties">
-      <template v-if="!properties.isEmpty" #header>
+    <UiButton variant="primary" size="medium" accent="info" @click="toggle()">Toggle</UiButton>
+    <UiSidePanel v-bind="properties" :error="properties.error">
+      <template #header>
         <UiButton variant="tertiary" size="medium" accent="info" :left-icon="faEdit"> {{ settings.action1 }}</UiButton>
         <UiButton variant="tertiary" size="medium" accent="danger" :left-icon="faTrash">
           {{ settings.action2 }}
         </UiButton>
       </template>
-      <template v-if="!properties.isEmpty" #content>
-        <UiCard>
+      <VtsLoadingHero type="card" :disabled="isReady">
+        <UiCard v-if="!properties.error">
           <div>Content 1</div>
           <div>Content 1</div>
           <div>Content 1</div>
         </UiCard>
-        <UiCard>
-          <div>Content 2</div>
-          <div>Content 2</div>
-          <div>Content 2</div>
-        </UiCard>
-        <UiCard>
-          <div>Content 3</div>
-          <div>Content 3</div>
-          <div>Content 3</div>
-        </UiCard>
-      </template>
+      </VtsLoadingHero>
     </UiSidePanel>
   </ComponentStory>
 </template>
@@ -72,8 +44,14 @@
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop, setting, slot } from '@/libs/story/story-param'
 import { text } from '@/libs/story/story-widget'
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiSidePanel from '@core/components/ui/side-panel/UiSidePanel.vue'
+import UiSidePanel from '@core/components/ui/panel/UiPanel.vue'
 import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { useToggle } from '@vueuse/core'
+import { computed } from 'vue'
+
+const [isToggled, toggle] = useToggle()
+const isReady = computed(() => isToggled.value)
 </script>
diff --git a/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue b/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue
similarity index 57%
rename from @xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
rename to @xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue
index cb568605c96..cdb80949a22 100644
--- a/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue
@@ -1,37 +1,28 @@
-<!-- v1 -->
+<!-- wip -->
 <template>
-  <div class="ui-side-panel" :class="{ error: isError }">
-    <div v-if="slots.header && !props.busy && !isError && !isEmpty" class="header">
+  <div class="ui-panel" :class="{ error: props.error }">
+    <div v-if="slots.header" class="header">
       <slot name="header" />
     </div>
-    <div v-if="slots.content && !props.busy && !isError" class="content">
-      <slot name="content" />
-    </div>
-    <div v-if="!props.busy && isError" class="error">
-      <div v-if="!props.busy && !slots.content" class="empty" />
+    <div class="content">
+      <slot />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-
 const props = defineProps<{
-  busy?: boolean
-  isError?: boolean
+  error?: boolean
 }>()
 
 const slots = defineSlots<{
   default(): any
   header?(): any
-  content?(): any
 }>()
-
-const isEmpty = computed(() => slots.content?.().length === 0)
 </script>
 
 <style scoped lang="postcss">
-.ui-side-panel {
+.ui-panel {
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -43,7 +34,9 @@ const isEmpty = computed(() => slots.content?.().length === 0)
     background-color: var(--color-neutral-background-primary);
     display: flex;
     justify-content: flex-end;
-    padding: 4px 16px;
+    align-items: center;
+    gap: 1.6rem;
+    padding: 0.4rem 1.6rem;
   }
 
   .content {
@@ -54,8 +47,11 @@ const isEmpty = computed(() => slots.content?.().length === 0)
   }
 
   &.error {
-    padding-top: 15rem;
     background-color: var(--color-danger-background-selected);
+
+    .content {
+      padding-top: 15rem;
+    }
   }
 }
 </style>

From 9962cca6fc2280e6b8b7e1c3937b159d26d6db71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastian=20Czech?= <czechsebastian@icloud.com>
Date: Thu, 7 Nov 2024 16:53:21 +0100
Subject: [PATCH 08/16] feat(xo-6): create side panel

---
 .../ui/side-panel/ui-side-panel.story.vue     | 60 +++++++++++++++
 .../components/ui/side-panel/UiSidePanel.vue  | 77 +++++++++++++++++++
 2 files changed, 137 insertions(+)
 create mode 100644 @xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
 create mode 100644 @xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
new file mode 100644
index 00000000000..993eb662648
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
@@ -0,0 +1,60 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties, settings }"
+    :params="[
+      prop('state').type('states').enum('normal', 'empty', 'loading', 'error').preset('info').required().widget(),
+      prop('busy').bool().widget(),
+      prop('isError').bool().widget(),
+      setting('actions').widget(text()).preset('Button'),
+      setting('isEmpty').widget(boolean()),
+      slot(),
+      slot('actions').help('Meant to receive UiButton'),
+      slot('content').help('Meant to display cards or other component'),
+    ]"
+    :presets="{
+      Normal: {
+        props: {
+          busy: false,
+          error: false,
+        },
+      },
+    }"
+  >
+    <UiSidePanel v-bind="properties">
+      <template #actions>
+        <UiButton variant="tertiary" size="medium" accent="info">
+          {{ settings.actions }}
+        </UiButton>
+        <UiButton variant="tertiary" size="medium" accent="info">
+          {{ settings.actions }}
+        </UiButton>
+      </template>
+      <template #content>
+        <UiCard v-if="!settings.isEmpty">
+          <div>Content 1</div>
+          <div>Content 2</div>
+          <div>Content 3</div>
+        </UiCard>
+        <UiCard v-if="!settings.isEmpty">
+          <div>Content 1</div>
+          <div>Content 2</div>
+          <div>Content 3</div>
+        </UiCard>
+        <UiCard v-if="!settings.isEmpty">
+          <div>Content 1</div>
+          <div>Content 2</div>
+          <div>Content 3</div>
+        </UiCard>
+      </template>
+    </UiSidePanel>
+  </ComponentStory>
+</template>
+
+<script setup lang="ts">
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { prop, setting, slot } from '@/libs/story/story-param'
+import { boolean, text } from '@/libs/story/story-widget'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import UiSidePanel from '@core/components/ui/side-panel/UiSidePanel.vue'
+</script>
diff --git a/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue b/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
new file mode 100644
index 00000000000..cb5c4bb46f7
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
@@ -0,0 +1,77 @@
+<!-- v1 -->
+<template>
+  <div class="ui-side-panel" :class="{ error: isError }">
+    <div v-if="slots.actions && !props.busy && !isError" class="actions">
+      <slot name="actions" />
+      <UiButtonIcon v-if="moreThanTwoActions" :icon="faEllipsis" accent="info" size="large" />
+    </div>
+    <div v-if="slots.content && !props.busy && !isError" class="content">
+      <slot name="content" />
+    </div>
+    <UiLoader v-if="props.busy" class="loader" />
+    <div v-if="!props.busy && isError" class="error">
+      <div class="typo h4-medium" />
+    </div>
+    <div v-if="!props.busy && !slots.content" class="empty" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiLoader from '@core/components/ui/loader/UiLoader.vue'
+import { faEllipsis } from '@fortawesome/free-solid-svg-icons'
+import { onMounted, ref } from 'vue'
+
+const props = defineProps<{
+  busy?: boolean
+  isError?: boolean
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  content?(): any
+  actions?(): any
+}>()
+
+const moreThanTwoActions = ref(false)
+
+onMounted(() => {
+  if (slots.content) {
+    const contentItems = slots.content()
+    moreThanTwoActions.value = contentItems.length > 2
+  }
+})
+</script>
+
+<style scoped lang="postcss">
+.ui-side-panel {
+  height: 100%;
+  border: 0.1rem solid var(--color-neutral-border);
+  background-color: var(--color-neutral-background-secondary);
+
+  .actions {
+    border-bottom: 0.1rem solid var(--color-neutral-border);
+    background-color: var(--color-neutral-background-primary);
+    display: flex;
+    justify-content: flex-end;
+    padding: 4px 16px;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    padding: 0.8rem;
+    gap: 0.8rem;
+  }
+
+  &.error {
+    color: var(--color-danger-txt-base);
+    background-color: var(--color-danger-background-selected);
+  }
+}
+
+.loader {
+  font-size: 64px;
+  margin: auto;
+}
+</style>

From 3d26260a92f5f0e60a98138a14484c73095c8a22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastian=20Czech?= <czechsebastian@icloud.com>
Date: Thu, 7 Nov 2024 22:12:13 +0100
Subject: [PATCH 09/16] feat(xo-6): display additional action in dropdown

---
 .../ui/side-panel/ui-side-panel.story.vue     | 43 +++++++++--
 .../components/ui/side-panel/UiSidePanel.vue  | 73 ++++++++++++++++---
 2 files changed, 99 insertions(+), 17 deletions(-)

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
index 993eb662648..0bb33292f85 100644
--- a/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
@@ -5,7 +5,8 @@
       prop('state').type('states').enum('normal', 'empty', 'loading', 'error').preset('info').required().widget(),
       prop('busy').bool().widget(),
       prop('isError').bool().widget(),
-      setting('actions').widget(text()).preset('Button'),
+      setting('action1').widget(text()).preset('Edit'),
+      setting('action2').widget(text()).preset('Delete'),
       setting('isEmpty').widget(boolean()),
       slot(),
       slot('actions').help('Meant to receive UiButton'),
@@ -15,19 +16,46 @@
       Normal: {
         props: {
           busy: false,
-          error: false,
+          isError: false,
+        },
+        settings: {
+          isEmpty: false,
+        },
+      },
+      Empty: {
+        props: {
+          busy: false,
+          isError: false,
+        },
+        settings: {
+          isEmpty: true,
+        },
+      },
+      Error: {
+        props: {
+          busy: false,
+          isError: true,
+        },
+      },
+      Busy: {
+        props: {
+          busy: true,
+          isError: false,
         },
       },
     }"
   >
     <UiSidePanel v-bind="properties">
       <template #actions>
-        <UiButton variant="tertiary" size="medium" accent="info">
-          {{ settings.actions }}
-        </UiButton>
-        <UiButton variant="tertiary" size="medium" accent="info">
-          {{ settings.actions }}
+        <UiButton variant="tertiary" size="medium" accent="info" :left-icon="faEdit"> {{ settings.action1 }}</UiButton>
+        <UiButton variant="tertiary" size="medium" accent="danger" :left-icon="faTrash">
+          {{ settings.action2 }}
         </UiButton>
+        <UiButton variant="tertiary" size="medium" accent="info"> Button 3</UiButton>
+        <UiButton variant="tertiary" size="medium" accent="info"> Button 4</UiButton>
+        <UiButton variant="tertiary" size="medium" accent="info"> Button 5</UiButton>
+        <UiButton variant="tertiary" size="medium" accent="info"> Button 6</UiButton>
+        <UiButton variant="tertiary" size="medium" accent="info"> Button 7</UiButton>
       </template>
       <template #content>
         <UiCard v-if="!settings.isEmpty">
@@ -57,4 +85,5 @@ import { boolean, text } from '@/libs/story/story-widget'
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
 import UiSidePanel from '@core/components/ui/side-panel/UiSidePanel.vue'
+import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons'
 </script>
diff --git a/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue b/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
index cb5c4bb46f7..25bce03cc82 100644
--- a/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
@@ -1,14 +1,21 @@
 <!-- v1 -->
 <template>
   <div class="ui-side-panel" :class="{ error: isError }">
-    <div v-if="slots.actions && !props.busy && !isError" class="actions">
-      <slot name="actions" />
-      <UiButtonIcon v-if="moreThanTwoActions" :icon="faEllipsis" accent="info" size="large" />
+    <div v-if="slots.actions && !props.busy && !isError && !isEmpty" class="actions">
+      <template v-for="(action, index) in actionsToDisplay" :key="index">
+        <component :is="action" />
+      </template>
+      <UiButtonIcon v-if="moreThanTwoActions" :icon="faEllipsis" accent="info" size="large" @click="toggleDropdown" />
+      <div v-if="isDropdownOpen" class="dropdown-menu">
+        <template v-for="(action, index) in additionalActions" :key="'extra-' + index">
+          <component :is="action" class="dropdown-item" />
+        </template>
+      </div>
     </div>
     <div v-if="slots.content && !props.busy && !isError" class="content">
       <slot name="content" />
     </div>
-    <UiLoader v-if="props.busy" class="loader" />
+    <UiLoader v-if="props.busy && !isError" class="loader" />
     <div v-if="!props.busy && isError" class="error">
       <div class="typo h4-medium" />
     </div>
@@ -20,7 +27,7 @@
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import { faEllipsis } from '@fortawesome/free-solid-svg-icons'
-import { onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 
 const props = defineProps<{
   busy?: boolean
@@ -33,19 +40,40 @@ const slots = defineSlots<{
   actions?(): any
 }>()
 
-const moreThanTwoActions = ref(false)
+const isDropdownOpen = ref(false)
 
-onMounted(() => {
-  if (slots.content) {
-    const contentItems = slots.content()
-    moreThanTwoActions.value = contentItems.length > 2
+const moreThanTwoActions = computed(() => {
+  return slots.actions && slots.actions().length > 2
+})
+
+const isEmpty = computed(() => {
+  return slots.content && slots.content().length === 0
+})
+
+const actionsToDisplay = computed(() => {
+  if (slots.actions) {
+    return slots.actions().slice(0, 2)
   }
+  return []
 })
+
+const additionalActions = computed(() => {
+  if (slots.actions) {
+    return slots.actions().slice(2)
+  }
+  return []
+})
+
+const toggleDropdown = () => {
+  isDropdownOpen.value = !isDropdownOpen.value
+}
 </script>
 
 <style scoped lang="postcss">
 .ui-side-panel {
   height: 100%;
+  display: flex;
+  flex-direction: column;
   border: 0.1rem solid var(--color-neutral-border);
   background-color: var(--color-neutral-background-secondary);
 
@@ -68,6 +96,31 @@ onMounted(() => {
     color: var(--color-danger-txt-base);
     background-color: var(--color-danger-background-selected);
   }
+
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background-color: white;
+    border: 1px solid #ddd;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    padding: 8px 0;
+    z-index: 1000;
+  }
+
+  .dropdown-item {
+    padding: 8px 16px;
+    cursor: pointer;
+  }
+
+  .dropdown-item:hover {
+    background-color: #f0f0f0;
+  }
 }
 
 .loader {

From 3f179617fd891d18accb9891d92fa30ca0fe9e0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastian=20Czech?= <czechsebastian@icloud.com>
Date: Fri, 8 Nov 2024 10:29:55 +0100
Subject: [PATCH 10/16] feat(xo-6): wip

---
 .../ui/side-panel/ui-side-panel.story.vue     | 31 +++---
 .../web-core/lib/assets/no-selection.svg      | 98 +++++++++++++++++++
 .../lib/components/ui/NoDataError.vue         | 27 +++++
 .../components/ui/side-panel/UiSidePanel.vue  | 57 +++--------
 4 files changed, 154 insertions(+), 59 deletions(-)
 create mode 100644 @xen-orchestra/web-core/lib/assets/no-selection.svg
 create mode 100644 @xen-orchestra/web-core/lib/components/ui/NoDataError.vue

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
index 0bb33292f85..8b0f6921276 100644
--- a/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
@@ -2,12 +2,11 @@
   <ComponentStory
     v-slot="{ properties, settings }"
     :params="[
-      prop('state').type('states').enum('normal', 'empty', 'loading', 'error').preset('info').required().widget(),
       prop('busy').bool().widget(),
       prop('isError').bool().widget(),
+      prop('isEmpty').bool().widget(),
       setting('action1').widget(text()).preset('Edit'),
       setting('action2').widget(text()).preset('Delete'),
-      setting('isEmpty').widget(boolean()),
       slot(),
       slot('actions').help('Meant to receive UiButton'),
       slot('content').help('Meant to display cards or other component'),
@@ -17,8 +16,6 @@
         props: {
           busy: false,
           isError: false,
-        },
-        settings: {
           isEmpty: false,
         },
       },
@@ -26,8 +23,6 @@
         props: {
           busy: false,
           isError: false,
-        },
-        settings: {
           isEmpty: true,
         },
       },
@@ -46,7 +41,7 @@
     }"
   >
     <UiSidePanel v-bind="properties">
-      <template #actions>
+      <template v-if="!properties.isEmpty" #actions>
         <UiButton variant="tertiary" size="medium" accent="info" :left-icon="faEdit"> {{ settings.action1 }}</UiButton>
         <UiButton variant="tertiary" size="medium" accent="danger" :left-icon="faTrash">
           {{ settings.action2 }}
@@ -57,20 +52,20 @@
         <UiButton variant="tertiary" size="medium" accent="info"> Button 6</UiButton>
         <UiButton variant="tertiary" size="medium" accent="info"> Button 7</UiButton>
       </template>
-      <template #content>
-        <UiCard v-if="!settings.isEmpty">
+      <template v-if="!properties.isEmpty" #content>
+        <UiCard>
           <div>Content 1</div>
-          <div>Content 2</div>
-          <div>Content 3</div>
-        </UiCard>
-        <UiCard v-if="!settings.isEmpty">
           <div>Content 1</div>
-          <div>Content 2</div>
-          <div>Content 3</div>
-        </UiCard>
-        <UiCard v-if="!settings.isEmpty">
           <div>Content 1</div>
+        </UiCard>
+        <UiCard>
+          <div>Content 2</div>
+          <div>Content 2</div>
           <div>Content 2</div>
+        </UiCard>
+        <UiCard>
+          <div>Content 3</div>
+          <div>Content 3</div>
           <div>Content 3</div>
         </UiCard>
       </template>
@@ -81,7 +76,7 @@
 <script setup lang="ts">
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop, setting, slot } from '@/libs/story/story-param'
-import { boolean, text } from '@/libs/story/story-widget'
+import { text } from '@/libs/story/story-widget'
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
 import UiSidePanel from '@core/components/ui/side-panel/UiSidePanel.vue'
diff --git a/@xen-orchestra/web-core/lib/assets/no-selection.svg b/@xen-orchestra/web-core/lib/assets/no-selection.svg
new file mode 100644
index 00000000000..fdf323b36f6
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/assets/no-selection.svg
@@ -0,0 +1,98 @@
+<svg width="693" height="400" viewBox="0 0 693 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_1388_30647)">
+    <path
+      d="M581.158 42.4604C585.622 74.0215 564.279 68.0764 548.712 65.6362C545.003 65.0535 538.206 70.0386 535.862 71.3699C534.546 66.6955 534.468 67.8679 530.998 63.9607C532.869 69.1024 527.112 71.3932 529.209 74.3993C523.998 74.0288 521.693 62.9409 526.369 38.763C528.426 28.1241 533.791 11.8188 555.756 15.4218C579.552 19.3271 579.76 32.5776 581.158 42.4604Z"
+      fill="#5A5B6C"/>
+    <path
+      d="M549.661 65.6701C560.533 65.6701 569.346 56.8607 569.346 45.9937C569.346 35.1268 560.533 26.3174 549.661 26.3174C538.788 26.3174 529.975 35.1268 529.975 45.9937C529.975 56.8607 538.788 65.6701 549.661 65.6701Z"
+      fill="#A0616A"/>
+    <path
+      d="M523.164 38.9726L532.594 40.413C536.753 37.8095 538.337 33.9465 538.534 29.4055L537.586 41.1755L542.093 41.864C545.035 39.9022 546.35 37.7778 545.558 35.4429L545.005 42.3088C557.019 46.6352 568.664 49.8258 578.495 47.4242C579.002 44.1115 578.85 40.7314 578.05 37.4771C577.249 34.2227 575.816 31.1578 573.83 28.4574C571.845 25.7569 569.347 23.4738 566.478 21.7383C563.61 20.0028 560.428 18.849 557.113 18.3428L552.26 17.6014C548.946 17.0951 545.564 17.2463 542.308 18.0463C539.052 18.8463 535.986 20.2795 533.284 22.264C530.582 24.2485 528.298 26.7455 526.562 29.6123C524.825 32.4792 523.671 35.6598 523.164 38.9726Z"
+      fill="#5A5B6C"/>
+    <path
+      d="M491.45 168.485H39.6699C36.8737 168.481 34.1929 167.37 32.2156 165.393C30.2383 163.417 29.1261 160.737 29.1228 157.943V64.4263C29.1261 61.6314 30.2383 58.9519 32.2156 56.9756C34.1929 54.9993 36.8737 53.8876 39.6699 53.8843H491.45C494.246 53.8876 496.927 54.9993 498.904 56.9756C500.881 58.9519 501.994 61.6314 501.997 64.4263V157.942C501.994 160.737 500.881 163.417 498.904 165.393C496.927 167.37 494.246 168.481 491.45 168.485Z"
+      fill="#E4E4E7"/>
+    <path
+      d="M460.957 161.374H46.7858C43.9895 161.371 41.3087 160.259 39.3315 158.283C37.3542 156.306 36.242 153.627 36.2387 150.832V71.5427C36.242 68.7478 37.3542 66.0683 39.3315 64.092C41.3087 62.1157 43.9895 61.004 46.7858 61.0007H484.336C487.132 61.004 489.813 62.1157 491.79 64.092C493.767 66.0683 494.879 68.7478 494.883 71.5427V127.465C494.873 136.455 491.295 145.074 484.935 151.431C478.575 157.788 469.952 161.364 460.957 161.374Z"
+      fill="white"/>
+    <path
+      d="M406.337 96.9461H280.202C279.48 96.9461 278.788 96.6597 278.278 96.1498C277.768 95.6399 277.481 94.9484 277.481 94.2273C277.481 93.5062 277.768 92.8147 278.278 92.3048C278.788 91.795 279.48 91.5085 280.202 91.5085H406.337C407.058 91.5085 407.75 91.795 408.26 92.3048C408.77 92.8147 409.057 93.5062 409.057 94.2273C409.057 94.9484 408.77 95.6399 408.26 96.1498C407.75 96.6597 407.058 96.9461 406.337 96.9461Z"
+      fill="#8F84FF"/>
+    <path
+      d="M438.263 113.084H248.276C247.554 113.084 246.862 112.797 246.352 112.288C245.842 111.778 245.556 111.086 245.556 110.365C245.556 109.644 245.842 108.952 246.352 108.443C246.862 107.933 247.554 107.646 248.276 107.646H438.263C438.984 107.646 439.676 107.933 440.186 108.443C440.696 108.952 440.983 109.644 440.983 110.365C440.983 111.086 440.696 111.778 440.186 112.288C439.676 112.797 438.984 113.084 438.263 113.084Z"
+      fill="#E4E4E7"/>
+    <path
+      d="M438.263 130.866H248.276C247.554 130.866 246.862 130.58 246.352 130.07C245.842 129.56 245.556 128.868 245.556 128.147C245.556 127.426 245.842 126.735 246.352 126.225C246.862 125.715 247.554 125.428 248.276 125.428H438.263C438.984 125.428 439.676 125.715 440.186 126.225C440.696 126.735 440.983 127.426 440.983 128.147C440.983 128.868 440.696 129.56 440.186 130.07C439.676 130.58 438.984 130.866 438.263 130.866Z"
+      fill="#E4E4E7"/>
+    <path d="M278.525 69.4801H276.975V9.7999H389.085V11.3492H278.525V69.4801Z" fill="#1A1B38"/>
+    <path
+      d="M436.494 -3.05176e-05H395.419C392.747 -3.05176e-05 390.184 1.06094 388.295 2.94948C386.405 4.83802 385.344 7.39942 385.344 10.0702C385.344 12.741 386.405 15.3024 388.295 17.191C390.184 19.0795 392.747 20.1405 395.419 20.1405H436.494C439.166 20.1405 441.729 19.0795 443.619 17.191C445.508 15.3024 446.569 12.741 446.569 10.0702C446.569 7.39942 445.508 4.83802 443.619 2.94948C441.729 1.06094 439.166 -3.05176e-05 436.494 -3.05176e-05Z"
+      fill="#8F84FF"/>
+    <path
+      d="M276.85 79.6172C281.964 79.6172 286.109 75.4742 286.109 70.3635C286.109 65.2528 281.964 61.1098 276.85 61.1098C271.737 61.1098 267.592 65.2528 267.592 70.3635C267.592 75.4742 271.737 79.6172 276.85 79.6172Z"
+      fill="#E4E4E7"/>
+    <path d="M612.242 383.591H603.687L599.616 350.612H612.242V383.591Z" fill="#A0616A"/>
+    <path
+      d="M616.757 398.405H610.622L609.527 392.616L606.723 398.405H590.452C589.672 398.405 588.913 398.156 588.284 397.694C587.656 397.232 587.192 396.581 586.96 395.837C586.728 395.093 586.74 394.294 586.994 393.557C587.249 392.82 587.732 392.184 588.374 391.741L601.367 382.772V376.919L615.033 377.735L616.757 398.405Z"
+      fill="#5A5B6C"/>
+    <path d="M553.341 383.591H544.787L540.715 350.612H553.341V383.591Z" fill="#A0616A"/>
+    <path
+      d="M557.856 398.405H551.721L550.626 392.616L547.822 398.405H531.552C530.772 398.405 530.012 398.156 529.384 397.694C528.756 397.232 528.292 396.581 528.06 395.837C527.827 395.093 527.839 394.294 528.094 393.557C528.348 392.82 528.831 392.184 529.473 391.741L542.466 382.772V376.919L556.133 377.735L557.856 398.405Z"
+      fill="#5A5B6C"/>
+    <path
+      d="M634.32 191.954C634.921 191.109 635.33 190.142 635.517 189.122C635.705 188.102 635.666 187.053 635.404 186.05C635.142 185.046 634.663 184.113 634.001 183.314C633.338 182.516 632.509 181.872 631.571 181.429L610.717 120.424L598.292 126.943L621.841 185.241C621.2 186.865 621.178 188.668 621.778 190.308C622.378 191.948 623.559 193.31 625.097 194.138C626.636 194.965 628.424 195.2 630.124 194.797C631.824 194.395 633.317 193.383 634.32 191.954Z"
+      fill="#A0616A"/>
+    <path
+      d="M503.889 219.187C504.883 218.891 505.8 218.38 506.576 217.691C507.351 217.002 507.966 216.151 508.376 215.199C508.787 214.246 508.984 213.216 508.953 212.179C508.923 211.142 508.665 210.125 508.198 209.199L529.296 148.278L515.489 145.779L498.18 206.223C496.675 207.109 495.548 208.517 495.013 210.179C494.477 211.841 494.57 213.641 495.273 215.239C495.977 216.837 497.243 218.122 498.831 218.85C500.419 219.577 502.218 219.697 503.889 219.187Z"
+      fill="#A0616A"/>
+    <path
+      d="M537.163 182.814C537.163 182.814 592.183 168.773 589.864 173.518C589.864 173.518 606.851 168.263 609.211 203.298L608.464 273.446L611.534 328.209C611.534 328.209 609.663 332.667 611.762 332.277C613.861 331.888 612.107 338.428 612.107 338.428C612.107 338.428 610.339 345.389 612.488 345.223C614.636 345.056 613.086 355.901 613.086 355.901H599.136L572.407 235.834L560.413 279.643C560.413 279.643 561.073 284.338 559.955 284.486C558.836 284.635 559.621 288.01 559.621 288.01L559.201 292.445L553.411 353.577L540.236 354.352C540.236 354.352 540.132 353.011 540.236 349.704C540.312 347.248 541.069 343.324 539.075 340.089C536.861 336.496 535.576 332.34 538.154 327.763C539.939 324.594 537.62 320.23 537.344 316.106C535.603 290.086 533.731 255.362 533.786 226.982C533.788 225.849 532.017 223.018 533.801 223.616C535.585 224.213 533.825 221.061 533.844 219.808C533.878 217.484 536.278 213.432 533.994 213.013C531.71 212.594 534.066 210.785 534.109 209.698C534.559 198.222 535.51 188.773 537.163 182.814Z"
+      fill="#5A5B6C"/>
+    <path
+      d="M561.963 68.1678L539.488 70.4917L537.31 80.9654L515.978 93.9888L523.36 113.939C523.36 113.939 517.364 134.141 534.312 142.244L540.263 159.575L538.166 171.887L537.584 175.304C539.072 178.064 539.333 180.092 536.716 180.404L535.872 185.363C532.12 187.533 532.248 191.391 534.063 195.983L609.239 203.729C612.331 193.636 595.643 160.312 586.764 157.251L587.92 107.464L589.836 74.7088L564.261 77.0327L561.963 68.1678Z"
+      fill="#1A1B38"/>
+    <path
+      d="M583.985 76.1791C585.029 75.4249 586.23 74.9161 587.499 74.6909C588.768 74.4657 590.071 74.5298 591.311 74.8784C592.551 75.2271 593.697 75.8512 594.662 76.7044C595.627 77.5575 596.387 78.6175 596.885 79.8052L610.26 111.708C612.788 112.622 616.945 120.4 615.439 122.392C615.47 124.499 614.739 122.969 616.782 125.892C619.108 126.057 619.715 127.036 618.11 129.06L617.764 131.688L618.711 131.866C621.246 131.957 621.377 132.901 619.795 134.453C620.32 134.768 620.722 135.251 620.937 135.824C621.153 136.397 621.168 137.026 620.98 137.609L619.286 142.877L606.111 149.074L584.438 108.449L580.94 85.9884C580.316 84.2443 580.275 82.3449 580.825 80.5759C581.374 78.8069 582.483 77.2639 583.985 76.1791Z"
+      fill="#1A1B38"/>
+    <path
+      d="M523.92 94.8657C522.736 93.8413 521.272 93.1942 519.717 93.0078C518.162 92.8215 516.587 93.1042 515.194 93.8198C513.801 94.5354 512.655 95.651 511.901 97.0233C511.148 98.3956 510.822 99.9617 510.966 101.52C512.009 112.791 513.12 124.784 513.12 124.784L511.301 156.019L527.863 159.575L528.502 155.096L530.188 154.152L529.007 151.561C529.305 151.591 529.606 151.545 529.883 151.43C530.16 151.314 530.403 151.132 530.592 150.899C530.781 150.666 530.909 150.391 530.966 150.096C531.022 149.802 531.004 149.498 530.914 149.212L529.832 145.779C530.002 145.917 530.212 145.996 530.43 146.005C530.649 146.013 530.864 145.951 531.044 145.827C531.224 145.703 531.359 145.523 531.429 145.316C531.499 145.109 531.499 144.885 531.431 144.677L530.425 141.631L534.82 110.841L525.335 96.4765C524.939 95.8774 524.463 95.3354 523.92 94.8657Z"
+      fill="#1A1B38"/>
+    <path d="M334.325 153.615H332.775V213.295H444.886V211.746H334.325V153.615Z" fill="#1A1B38"/>
+    <path
+      d="M502.37 213.024C502.367 210.354 501.305 207.795 499.416 205.907C497.527 204.019 494.966 202.957 492.295 202.954H451.219C448.547 202.954 445.985 204.015 444.095 205.904C442.206 207.792 441.144 210.354 441.144 213.024C441.144 215.695 442.206 218.257 444.095 220.145C445.985 222.034 448.547 223.095 451.219 223.095H492.295C494.966 223.092 497.527 222.03 499.416 220.142C501.305 218.254 502.367 215.694 502.37 213.024Z"
+      fill="#8F84FF"/>
+    <path
+      d="M334.201 159.405C339.314 159.405 343.459 155.262 343.459 150.151C343.459 145.04 339.314 140.897 334.201 140.897C329.088 140.897 324.943 145.04 324.943 150.151C324.943 155.262 329.088 159.405 334.201 159.405Z"
+      fill="#E4E4E7"/>
+    <path d="M168.045 154.389H169.595V214.07H57.4847V212.52H168.045V154.389Z" fill="#1A1B38"/>
+    <path
+      d="M10.0751 223.869H51.1505C53.8226 223.869 56.3853 222.808 58.2747 220.92C60.1642 219.031 61.2256 216.47 61.2256 213.799C61.2256 211.128 60.1642 208.567 58.2747 206.678C56.3853 204.79 53.8226 203.729 51.1505 203.729H10.0751C7.40302 203.729 4.84038 204.79 2.95093 206.678C1.06149 208.567 0 211.128 0 213.799C0 216.47 1.06149 219.031 2.95093 220.92C4.84038 222.808 7.40302 223.869 10.0751 223.869Z"
+      fill="#8F84FF"/>
+    <path
+      d="M169.899 158.886C175.012 158.886 179.158 154.743 179.158 149.633C179.158 144.522 175.012 140.379 169.899 140.379C164.786 140.379 160.641 144.522 160.641 149.633C160.641 154.743 164.786 158.886 169.899 158.886Z"
+      fill="#E4E4E7"/>
+    <path
+      d="M665.704 399.206H639.984L639.874 399.006C639.545 398.409 639.227 397.778 638.931 397.129C636.281 391.46 635.162 384.976 634.173 379.255L633.429 374.943C633.339 374.421 633.407 373.884 633.624 373.401C633.842 372.917 634.198 372.509 634.648 372.23C635.099 371.95 635.622 371.811 636.152 371.83C636.682 371.85 637.194 372.027 637.622 372.339C641.531 375.182 645.441 378.022 649.353 380.859C650.834 381.936 652.526 383.183 654.146 384.53C654.302 383.771 654.466 383.01 654.629 382.26C654.742 381.742 655.007 381.269 655.39 380.902C655.773 380.536 656.257 380.291 656.779 380.201C657.302 380.111 657.84 380.178 658.324 380.395C658.808 380.612 659.216 380.969 659.497 381.419L662.506 386.251C664.701 389.78 666.638 393.258 666.243 397.008C666.245 397.054 666.242 397.1 666.233 397.145C666.154 397.761 666.008 398.366 665.796 398.95L665.704 399.206Z"
+      fill="#F0F0F0"/>
+    <path
+      d="M691.519 399.762L447.114 400C446.87 399.999 446.637 399.901 446.465 399.728C446.293 399.555 446.196 399.321 446.196 399.078C446.196 398.834 446.293 398.6 446.465 398.427C446.637 398.254 446.87 398.157 447.114 398.155L691.519 397.917C691.763 397.918 691.996 398.016 692.169 398.189C692.341 398.362 692.437 398.596 692.437 398.84C692.437 399.083 692.341 399.317 692.169 399.49C691.996 399.663 691.763 399.761 691.519 399.762Z"
+      fill="#CACACA"/>
+    <path
+      d="M80.6832 138.928C96.0921 138.928 108.584 126.443 108.584 111.041C108.584 95.6396 96.0921 83.1543 80.6832 83.1543C65.2743 83.1543 52.7829 95.6396 52.7829 111.041C52.7829 126.443 65.2743 138.928 80.6832 138.928Z"
+      fill="#F2F2F2"/>
+    <path
+      d="M186.395 96.8H167.986C167.264 96.8 166.573 96.5136 166.062 96.0037C165.552 95.4938 165.266 94.8023 165.266 94.0812C165.266 93.3601 165.552 92.6686 166.062 92.1587C166.573 91.6488 167.264 91.3624 167.986 91.3624H186.395C187.116 91.3624 187.808 91.6488 188.318 92.1587C188.828 92.6686 189.115 93.3601 189.115 94.0812C189.115 94.8023 188.828 95.4938 188.318 96.0037C187.808 96.5136 187.116 96.8 186.395 96.8Z"
+      fill="#8F84FF"/>
+    <path
+      d="M218.321 112.938H136.06C135.339 112.938 134.647 112.651 134.137 112.142C133.626 111.632 133.34 110.94 133.34 110.219C133.34 109.498 133.626 108.806 134.137 108.297C134.647 107.787 135.339 107.5 136.06 107.5H218.321C219.042 107.5 219.734 107.787 220.244 108.297C220.754 108.806 221.041 109.498 221.041 110.219C221.041 110.94 220.754 111.632 220.244 112.142C219.734 112.651 219.042 112.938 218.321 112.938Z"
+      fill="#E4E4E7"/>
+    <path
+      d="M218.321 130.72H136.06C135.339 130.72 134.647 130.433 134.137 129.924C133.626 129.414 133.34 128.722 133.34 128.001C133.34 127.28 133.626 126.588 134.137 126.079C134.647 125.569 135.339 125.282 136.06 125.282H218.321C219.042 125.282 219.734 125.569 220.244 126.079C220.754 126.588 221.041 127.28 221.041 128.001C221.041 128.722 220.754 129.414 220.244 129.924C219.734 130.433 219.042 130.72 218.321 130.72Z"
+      fill="#E4E4E7"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_1388_30647">
+      <rect width="692.437" height="400" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/@xen-orchestra/web-core/lib/components/ui/NoDataError.vue b/@xen-orchestra/web-core/lib/components/ui/NoDataError.vue
new file mode 100644
index 00000000000..16b55e31d03
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/NoDataError.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="no-data">
+    <img alt="" class="img" src="@/assets/undraw-bug-fixing.svg" />
+    <p class="text-error typo h4-medium">{{ $t('error-no-data') }}</p>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.no-data {
+  text-align: center;
+}
+
+.img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1em;
+  width: 17em;
+  height: 13em;
+}
+.text-error {
+  margin: auto;
+  width: 8em;
+  font-style: normal;
+  color: var(--color-danger-txt-base);
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue b/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
index 25bce03cc82..022efa0fba8 100644
--- a/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
@@ -6,26 +6,26 @@
         <component :is="action" />
       </template>
       <UiButtonIcon v-if="moreThanTwoActions" :icon="faEllipsis" accent="info" size="large" @click="toggleDropdown" />
-      <div v-if="isDropdownOpen" class="dropdown-menu">
+      <DropdownList v-if="isDropdownOpen" class="dropdown-menu">
         <template v-for="(action, index) in additionalActions" :key="'extra-' + index">
           <component :is="action" class="dropdown-item" />
         </template>
-      </div>
+      </DropdownList>
     </div>
     <div v-if="slots.content && !props.busy && !isError" class="content">
       <slot name="content" />
     </div>
-    <UiLoader v-if="props.busy && !isError" class="loader" />
+    <VtsStateHero v-if="busy" type="card" busy />
     <div v-if="!props.busy && isError" class="error">
-      <div class="typo h4-medium" />
+      <div v-if="!props.busy && !slots.content" class="empty" />
     </div>
-    <div v-if="!props.busy && !slots.content" class="empty" />
   </div>
 </template>
 
 <script setup lang="ts">
+import DropdownList from '@core/components/dropdown/DropdownList.vue'
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import { faEllipsis } from '@fortawesome/free-solid-svg-icons'
 import { computed, ref } from 'vue'
 
@@ -42,27 +42,13 @@ const slots = defineSlots<{
 
 const isDropdownOpen = ref(false)
 
-const moreThanTwoActions = computed(() => {
-  return slots.actions && slots.actions().length > 2
-})
+const moreThanTwoActions = computed(() => slots.actions?.().length > 2)
 
-const isEmpty = computed(() => {
-  return slots.content && slots.content().length === 0
-})
+const isEmpty = computed(() => slots.content?.().length === 0)
 
-const actionsToDisplay = computed(() => {
-  if (slots.actions) {
-    return slots.actions().slice(0, 2)
-  }
-  return []
-})
+const actionsToDisplay = computed(() => (slots.actions ? slots.actions().slice(0, 2) : []))
 
-const additionalActions = computed(() => {
-  if (slots.actions) {
-    return slots.actions().slice(2)
-  }
-  return []
-})
+const additionalActions = computed(() => (slots.actions ? slots.actions().slice(2) : []))
 
 const toggleDropdown = () => {
   isDropdownOpen.value = !isDropdownOpen.value
@@ -71,7 +57,8 @@ const toggleDropdown = () => {
 
 <style scoped lang="postcss">
 .ui-side-panel {
-  height: 100%;
+  //height: 100%;
+  height: 100vh;
   display: flex;
   flex-direction: column;
   border: 0.1rem solid var(--color-neutral-border);
@@ -93,24 +80,17 @@ const toggleDropdown = () => {
   }
 
   &.error {
-    color: var(--color-danger-txt-base);
+    padding-top: 15rem;
     background-color: var(--color-danger-background-selected);
   }
 
-  .dropdown {
-    position: relative;
-    display: inline-block;
-  }
-
   .dropdown-menu {
     position: absolute;
     top: 100%;
-    left: 0;
-    background-color: white;
-    border: 1px solid #ddd;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-    padding: 8px 0;
+    right: 0;
     z-index: 1000;
+    gap: 0.8rem;
+    padding-inline: 0.8rem;
   }
 
   .dropdown-item {
@@ -122,9 +102,4 @@ const toggleDropdown = () => {
     background-color: #f0f0f0;
   }
 }
-
-.loader {
-  font-size: 64px;
-  margin: auto;
-}
 </style>

From 996d3334bec43d72e6db02123faf84bd4a978dea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastian=20Czech?= <czechsebastian@icloud.com>
Date: Fri, 8 Nov 2024 10:46:56 +0100
Subject: [PATCH 11/16] feat(xo-6): remove dropdown

---
 .../ui/side-panel/ui-side-panel.story.vue     |  9 +--
 .../components/ui/side-panel/UiSidePanel.vue  | 56 ++-----------------
 2 files changed, 8 insertions(+), 57 deletions(-)

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
index 8b0f6921276..f47fcf99172 100644
--- a/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
@@ -8,7 +8,7 @@
       setting('action1').widget(text()).preset('Edit'),
       setting('action2').widget(text()).preset('Delete'),
       slot(),
-      slot('actions').help('Meant to receive UiButton'),
+      slot('header').help('Meant to receive UiButton'),
       slot('content').help('Meant to display cards or other component'),
     ]"
     :presets="{
@@ -41,16 +41,11 @@
     }"
   >
     <UiSidePanel v-bind="properties">
-      <template v-if="!properties.isEmpty" #actions>
+      <template v-if="!properties.isEmpty" #header>
         <UiButton variant="tertiary" size="medium" accent="info" :left-icon="faEdit"> {{ settings.action1 }}</UiButton>
         <UiButton variant="tertiary" size="medium" accent="danger" :left-icon="faTrash">
           {{ settings.action2 }}
         </UiButton>
-        <UiButton variant="tertiary" size="medium" accent="info"> Button 3</UiButton>
-        <UiButton variant="tertiary" size="medium" accent="info"> Button 4</UiButton>
-        <UiButton variant="tertiary" size="medium" accent="info"> Button 5</UiButton>
-        <UiButton variant="tertiary" size="medium" accent="info"> Button 6</UiButton>
-        <UiButton variant="tertiary" size="medium" accent="info"> Button 7</UiButton>
       </template>
       <template v-if="!properties.isEmpty" #content>
         <UiCard>
diff --git a/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue b/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
index 022efa0fba8..cb568605c96 100644
--- a/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
@@ -1,21 +1,12 @@
 <!-- v1 -->
 <template>
   <div class="ui-side-panel" :class="{ error: isError }">
-    <div v-if="slots.actions && !props.busy && !isError && !isEmpty" class="actions">
-      <template v-for="(action, index) in actionsToDisplay" :key="index">
-        <component :is="action" />
-      </template>
-      <UiButtonIcon v-if="moreThanTwoActions" :icon="faEllipsis" accent="info" size="large" @click="toggleDropdown" />
-      <DropdownList v-if="isDropdownOpen" class="dropdown-menu">
-        <template v-for="(action, index) in additionalActions" :key="'extra-' + index">
-          <component :is="action" class="dropdown-item" />
-        </template>
-      </DropdownList>
+    <div v-if="slots.header && !props.busy && !isError && !isEmpty" class="header">
+      <slot name="header" />
     </div>
     <div v-if="slots.content && !props.busy && !isError" class="content">
       <slot name="content" />
     </div>
-    <VtsStateHero v-if="busy" type="card" busy />
     <div v-if="!props.busy && isError" class="error">
       <div v-if="!props.busy && !slots.content" class="empty" />
     </div>
@@ -23,11 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import DropdownList from '@core/components/dropdown/DropdownList.vue'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
-import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import { faEllipsis } from '@fortawesome/free-solid-svg-icons'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 
 const props = defineProps<{
   busy?: boolean
@@ -36,35 +23,22 @@ const props = defineProps<{
 
 const slots = defineSlots<{
   default(): any
+  header?(): any
   content?(): any
-  actions?(): any
 }>()
 
-const isDropdownOpen = ref(false)
-
-const moreThanTwoActions = computed(() => slots.actions?.().length > 2)
-
 const isEmpty = computed(() => slots.content?.().length === 0)
-
-const actionsToDisplay = computed(() => (slots.actions ? slots.actions().slice(0, 2) : []))
-
-const additionalActions = computed(() => (slots.actions ? slots.actions().slice(2) : []))
-
-const toggleDropdown = () => {
-  isDropdownOpen.value = !isDropdownOpen.value
-}
 </script>
 
 <style scoped lang="postcss">
 .ui-side-panel {
-  //height: 100%;
-  height: 100vh;
+  height: 100%;
   display: flex;
   flex-direction: column;
   border: 0.1rem solid var(--color-neutral-border);
   background-color: var(--color-neutral-background-secondary);
 
-  .actions {
+  .header {
     border-bottom: 0.1rem solid var(--color-neutral-border);
     background-color: var(--color-neutral-background-primary);
     display: flex;
@@ -83,23 +57,5 @@ const toggleDropdown = () => {
     padding-top: 15rem;
     background-color: var(--color-danger-background-selected);
   }
-
-  .dropdown-menu {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    z-index: 1000;
-    gap: 0.8rem;
-    padding-inline: 0.8rem;
-  }
-
-  .dropdown-item {
-    padding: 8px 16px;
-    cursor: pointer;
-  }
-
-  .dropdown-item:hover {
-    background-color: #f0f0f0;
-  }
 }
 </style>

From 6ee86524630f7fefa76596abe7c4b8ace1a0b668 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastian=20Czech?= <czechsebastian@icloud.com>
Date: Fri, 8 Nov 2024 10:47:51 +0100
Subject: [PATCH 12/16] feat(xo-6): remove duplicated component

---
 .../web-core/lib/assets/no-selection.svg      | 98 -------------------
 1 file changed, 98 deletions(-)
 delete mode 100644 @xen-orchestra/web-core/lib/assets/no-selection.svg

diff --git a/@xen-orchestra/web-core/lib/assets/no-selection.svg b/@xen-orchestra/web-core/lib/assets/no-selection.svg
deleted file mode 100644
index fdf323b36f6..00000000000
--- a/@xen-orchestra/web-core/lib/assets/no-selection.svg
+++ /dev/null
@@ -1,98 +0,0 @@
-<svg width="693" height="400" viewBox="0 0 693 400" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g clip-path="url(#clip0_1388_30647)">
-    <path
-      d="M581.158 42.4604C585.622 74.0215 564.279 68.0764 548.712 65.6362C545.003 65.0535 538.206 70.0386 535.862 71.3699C534.546 66.6955 534.468 67.8679 530.998 63.9607C532.869 69.1024 527.112 71.3932 529.209 74.3993C523.998 74.0288 521.693 62.9409 526.369 38.763C528.426 28.1241 533.791 11.8188 555.756 15.4218C579.552 19.3271 579.76 32.5776 581.158 42.4604Z"
-      fill="#5A5B6C"/>
-    <path
-      d="M549.661 65.6701C560.533 65.6701 569.346 56.8607 569.346 45.9937C569.346 35.1268 560.533 26.3174 549.661 26.3174C538.788 26.3174 529.975 35.1268 529.975 45.9937C529.975 56.8607 538.788 65.6701 549.661 65.6701Z"
-      fill="#A0616A"/>
-    <path
-      d="M523.164 38.9726L532.594 40.413C536.753 37.8095 538.337 33.9465 538.534 29.4055L537.586 41.1755L542.093 41.864C545.035 39.9022 546.35 37.7778 545.558 35.4429L545.005 42.3088C557.019 46.6352 568.664 49.8258 578.495 47.4242C579.002 44.1115 578.85 40.7314 578.05 37.4771C577.249 34.2227 575.816 31.1578 573.83 28.4574C571.845 25.7569 569.347 23.4738 566.478 21.7383C563.61 20.0028 560.428 18.849 557.113 18.3428L552.26 17.6014C548.946 17.0951 545.564 17.2463 542.308 18.0463C539.052 18.8463 535.986 20.2795 533.284 22.264C530.582 24.2485 528.298 26.7455 526.562 29.6123C524.825 32.4792 523.671 35.6598 523.164 38.9726Z"
-      fill="#5A5B6C"/>
-    <path
-      d="M491.45 168.485H39.6699C36.8737 168.481 34.1929 167.37 32.2156 165.393C30.2383 163.417 29.1261 160.737 29.1228 157.943V64.4263C29.1261 61.6314 30.2383 58.9519 32.2156 56.9756C34.1929 54.9993 36.8737 53.8876 39.6699 53.8843H491.45C494.246 53.8876 496.927 54.9993 498.904 56.9756C500.881 58.9519 501.994 61.6314 501.997 64.4263V157.942C501.994 160.737 500.881 163.417 498.904 165.393C496.927 167.37 494.246 168.481 491.45 168.485Z"
-      fill="#E4E4E7"/>
-    <path
-      d="M460.957 161.374H46.7858C43.9895 161.371 41.3087 160.259 39.3315 158.283C37.3542 156.306 36.242 153.627 36.2387 150.832V71.5427C36.242 68.7478 37.3542 66.0683 39.3315 64.092C41.3087 62.1157 43.9895 61.004 46.7858 61.0007H484.336C487.132 61.004 489.813 62.1157 491.79 64.092C493.767 66.0683 494.879 68.7478 494.883 71.5427V127.465C494.873 136.455 491.295 145.074 484.935 151.431C478.575 157.788 469.952 161.364 460.957 161.374Z"
-      fill="white"/>
-    <path
-      d="M406.337 96.9461H280.202C279.48 96.9461 278.788 96.6597 278.278 96.1498C277.768 95.6399 277.481 94.9484 277.481 94.2273C277.481 93.5062 277.768 92.8147 278.278 92.3048C278.788 91.795 279.48 91.5085 280.202 91.5085H406.337C407.058 91.5085 407.75 91.795 408.26 92.3048C408.77 92.8147 409.057 93.5062 409.057 94.2273C409.057 94.9484 408.77 95.6399 408.26 96.1498C407.75 96.6597 407.058 96.9461 406.337 96.9461Z"
-      fill="#8F84FF"/>
-    <path
-      d="M438.263 113.084H248.276C247.554 113.084 246.862 112.797 246.352 112.288C245.842 111.778 245.556 111.086 245.556 110.365C245.556 109.644 245.842 108.952 246.352 108.443C246.862 107.933 247.554 107.646 248.276 107.646H438.263C438.984 107.646 439.676 107.933 440.186 108.443C440.696 108.952 440.983 109.644 440.983 110.365C440.983 111.086 440.696 111.778 440.186 112.288C439.676 112.797 438.984 113.084 438.263 113.084Z"
-      fill="#E4E4E7"/>
-    <path
-      d="M438.263 130.866H248.276C247.554 130.866 246.862 130.58 246.352 130.07C245.842 129.56 245.556 128.868 245.556 128.147C245.556 127.426 245.842 126.735 246.352 126.225C246.862 125.715 247.554 125.428 248.276 125.428H438.263C438.984 125.428 439.676 125.715 440.186 126.225C440.696 126.735 440.983 127.426 440.983 128.147C440.983 128.868 440.696 129.56 440.186 130.07C439.676 130.58 438.984 130.866 438.263 130.866Z"
-      fill="#E4E4E7"/>
-    <path d="M278.525 69.4801H276.975V9.7999H389.085V11.3492H278.525V69.4801Z" fill="#1A1B38"/>
-    <path
-      d="M436.494 -3.05176e-05H395.419C392.747 -3.05176e-05 390.184 1.06094 388.295 2.94948C386.405 4.83802 385.344 7.39942 385.344 10.0702C385.344 12.741 386.405 15.3024 388.295 17.191C390.184 19.0795 392.747 20.1405 395.419 20.1405H436.494C439.166 20.1405 441.729 19.0795 443.619 17.191C445.508 15.3024 446.569 12.741 446.569 10.0702C446.569 7.39942 445.508 4.83802 443.619 2.94948C441.729 1.06094 439.166 -3.05176e-05 436.494 -3.05176e-05Z"
-      fill="#8F84FF"/>
-    <path
-      d="M276.85 79.6172C281.964 79.6172 286.109 75.4742 286.109 70.3635C286.109 65.2528 281.964 61.1098 276.85 61.1098C271.737 61.1098 267.592 65.2528 267.592 70.3635C267.592 75.4742 271.737 79.6172 276.85 79.6172Z"
-      fill="#E4E4E7"/>
-    <path d="M612.242 383.591H603.687L599.616 350.612H612.242V383.591Z" fill="#A0616A"/>
-    <path
-      d="M616.757 398.405H610.622L609.527 392.616L606.723 398.405H590.452C589.672 398.405 588.913 398.156 588.284 397.694C587.656 397.232 587.192 396.581 586.96 395.837C586.728 395.093 586.74 394.294 586.994 393.557C587.249 392.82 587.732 392.184 588.374 391.741L601.367 382.772V376.919L615.033 377.735L616.757 398.405Z"
-      fill="#5A5B6C"/>
-    <path d="M553.341 383.591H544.787L540.715 350.612H553.341V383.591Z" fill="#A0616A"/>
-    <path
-      d="M557.856 398.405H551.721L550.626 392.616L547.822 398.405H531.552C530.772 398.405 530.012 398.156 529.384 397.694C528.756 397.232 528.292 396.581 528.06 395.837C527.827 395.093 527.839 394.294 528.094 393.557C528.348 392.82 528.831 392.184 529.473 391.741L542.466 382.772V376.919L556.133 377.735L557.856 398.405Z"
-      fill="#5A5B6C"/>
-    <path
-      d="M634.32 191.954C634.921 191.109 635.33 190.142 635.517 189.122C635.705 188.102 635.666 187.053 635.404 186.05C635.142 185.046 634.663 184.113 634.001 183.314C633.338 182.516 632.509 181.872 631.571 181.429L610.717 120.424L598.292 126.943L621.841 185.241C621.2 186.865 621.178 188.668 621.778 190.308C622.378 191.948 623.559 193.31 625.097 194.138C626.636 194.965 628.424 195.2 630.124 194.797C631.824 194.395 633.317 193.383 634.32 191.954Z"
-      fill="#A0616A"/>
-    <path
-      d="M503.889 219.187C504.883 218.891 505.8 218.38 506.576 217.691C507.351 217.002 507.966 216.151 508.376 215.199C508.787 214.246 508.984 213.216 508.953 212.179C508.923 211.142 508.665 210.125 508.198 209.199L529.296 148.278L515.489 145.779L498.18 206.223C496.675 207.109 495.548 208.517 495.013 210.179C494.477 211.841 494.57 213.641 495.273 215.239C495.977 216.837 497.243 218.122 498.831 218.85C500.419 219.577 502.218 219.697 503.889 219.187Z"
-      fill="#A0616A"/>
-    <path
-      d="M537.163 182.814C537.163 182.814 592.183 168.773 589.864 173.518C589.864 173.518 606.851 168.263 609.211 203.298L608.464 273.446L611.534 328.209C611.534 328.209 609.663 332.667 611.762 332.277C613.861 331.888 612.107 338.428 612.107 338.428C612.107 338.428 610.339 345.389 612.488 345.223C614.636 345.056 613.086 355.901 613.086 355.901H599.136L572.407 235.834L560.413 279.643C560.413 279.643 561.073 284.338 559.955 284.486C558.836 284.635 559.621 288.01 559.621 288.01L559.201 292.445L553.411 353.577L540.236 354.352C540.236 354.352 540.132 353.011 540.236 349.704C540.312 347.248 541.069 343.324 539.075 340.089C536.861 336.496 535.576 332.34 538.154 327.763C539.939 324.594 537.62 320.23 537.344 316.106C535.603 290.086 533.731 255.362 533.786 226.982C533.788 225.849 532.017 223.018 533.801 223.616C535.585 224.213 533.825 221.061 533.844 219.808C533.878 217.484 536.278 213.432 533.994 213.013C531.71 212.594 534.066 210.785 534.109 209.698C534.559 198.222 535.51 188.773 537.163 182.814Z"
-      fill="#5A5B6C"/>
-    <path
-      d="M561.963 68.1678L539.488 70.4917L537.31 80.9654L515.978 93.9888L523.36 113.939C523.36 113.939 517.364 134.141 534.312 142.244L540.263 159.575L538.166 171.887L537.584 175.304C539.072 178.064 539.333 180.092 536.716 180.404L535.872 185.363C532.12 187.533 532.248 191.391 534.063 195.983L609.239 203.729C612.331 193.636 595.643 160.312 586.764 157.251L587.92 107.464L589.836 74.7088L564.261 77.0327L561.963 68.1678Z"
-      fill="#1A1B38"/>
-    <path
-      d="M583.985 76.1791C585.029 75.4249 586.23 74.9161 587.499 74.6909C588.768 74.4657 590.071 74.5298 591.311 74.8784C592.551 75.2271 593.697 75.8512 594.662 76.7044C595.627 77.5575 596.387 78.6175 596.885 79.8052L610.26 111.708C612.788 112.622 616.945 120.4 615.439 122.392C615.47 124.499 614.739 122.969 616.782 125.892C619.108 126.057 619.715 127.036 618.11 129.06L617.764 131.688L618.711 131.866C621.246 131.957 621.377 132.901 619.795 134.453C620.32 134.768 620.722 135.251 620.937 135.824C621.153 136.397 621.168 137.026 620.98 137.609L619.286 142.877L606.111 149.074L584.438 108.449L580.94 85.9884C580.316 84.2443 580.275 82.3449 580.825 80.5759C581.374 78.8069 582.483 77.2639 583.985 76.1791Z"
-      fill="#1A1B38"/>
-    <path
-      d="M523.92 94.8657C522.736 93.8413 521.272 93.1942 519.717 93.0078C518.162 92.8215 516.587 93.1042 515.194 93.8198C513.801 94.5354 512.655 95.651 511.901 97.0233C511.148 98.3956 510.822 99.9617 510.966 101.52C512.009 112.791 513.12 124.784 513.12 124.784L511.301 156.019L527.863 159.575L528.502 155.096L530.188 154.152L529.007 151.561C529.305 151.591 529.606 151.545 529.883 151.43C530.16 151.314 530.403 151.132 530.592 150.899C530.781 150.666 530.909 150.391 530.966 150.096C531.022 149.802 531.004 149.498 530.914 149.212L529.832 145.779C530.002 145.917 530.212 145.996 530.43 146.005C530.649 146.013 530.864 145.951 531.044 145.827C531.224 145.703 531.359 145.523 531.429 145.316C531.499 145.109 531.499 144.885 531.431 144.677L530.425 141.631L534.82 110.841L525.335 96.4765C524.939 95.8774 524.463 95.3354 523.92 94.8657Z"
-      fill="#1A1B38"/>
-    <path d="M334.325 153.615H332.775V213.295H444.886V211.746H334.325V153.615Z" fill="#1A1B38"/>
-    <path
-      d="M502.37 213.024C502.367 210.354 501.305 207.795 499.416 205.907C497.527 204.019 494.966 202.957 492.295 202.954H451.219C448.547 202.954 445.985 204.015 444.095 205.904C442.206 207.792 441.144 210.354 441.144 213.024C441.144 215.695 442.206 218.257 444.095 220.145C445.985 222.034 448.547 223.095 451.219 223.095H492.295C494.966 223.092 497.527 222.03 499.416 220.142C501.305 218.254 502.367 215.694 502.37 213.024Z"
-      fill="#8F84FF"/>
-    <path
-      d="M334.201 159.405C339.314 159.405 343.459 155.262 343.459 150.151C343.459 145.04 339.314 140.897 334.201 140.897C329.088 140.897 324.943 145.04 324.943 150.151C324.943 155.262 329.088 159.405 334.201 159.405Z"
-      fill="#E4E4E7"/>
-    <path d="M168.045 154.389H169.595V214.07H57.4847V212.52H168.045V154.389Z" fill="#1A1B38"/>
-    <path
-      d="M10.0751 223.869H51.1505C53.8226 223.869 56.3853 222.808 58.2747 220.92C60.1642 219.031 61.2256 216.47 61.2256 213.799C61.2256 211.128 60.1642 208.567 58.2747 206.678C56.3853 204.79 53.8226 203.729 51.1505 203.729H10.0751C7.40302 203.729 4.84038 204.79 2.95093 206.678C1.06149 208.567 0 211.128 0 213.799C0 216.47 1.06149 219.031 2.95093 220.92C4.84038 222.808 7.40302 223.869 10.0751 223.869Z"
-      fill="#8F84FF"/>
-    <path
-      d="M169.899 158.886C175.012 158.886 179.158 154.743 179.158 149.633C179.158 144.522 175.012 140.379 169.899 140.379C164.786 140.379 160.641 144.522 160.641 149.633C160.641 154.743 164.786 158.886 169.899 158.886Z"
-      fill="#E4E4E7"/>
-    <path
-      d="M665.704 399.206H639.984L639.874 399.006C639.545 398.409 639.227 397.778 638.931 397.129C636.281 391.46 635.162 384.976 634.173 379.255L633.429 374.943C633.339 374.421 633.407 373.884 633.624 373.401C633.842 372.917 634.198 372.509 634.648 372.23C635.099 371.95 635.622 371.811 636.152 371.83C636.682 371.85 637.194 372.027 637.622 372.339C641.531 375.182 645.441 378.022 649.353 380.859C650.834 381.936 652.526 383.183 654.146 384.53C654.302 383.771 654.466 383.01 654.629 382.26C654.742 381.742 655.007 381.269 655.39 380.902C655.773 380.536 656.257 380.291 656.779 380.201C657.302 380.111 657.84 380.178 658.324 380.395C658.808 380.612 659.216 380.969 659.497 381.419L662.506 386.251C664.701 389.78 666.638 393.258 666.243 397.008C666.245 397.054 666.242 397.1 666.233 397.145C666.154 397.761 666.008 398.366 665.796 398.95L665.704 399.206Z"
-      fill="#F0F0F0"/>
-    <path
-      d="M691.519 399.762L447.114 400C446.87 399.999 446.637 399.901 446.465 399.728C446.293 399.555 446.196 399.321 446.196 399.078C446.196 398.834 446.293 398.6 446.465 398.427C446.637 398.254 446.87 398.157 447.114 398.155L691.519 397.917C691.763 397.918 691.996 398.016 692.169 398.189C692.341 398.362 692.437 398.596 692.437 398.84C692.437 399.083 692.341 399.317 692.169 399.49C691.996 399.663 691.763 399.761 691.519 399.762Z"
-      fill="#CACACA"/>
-    <path
-      d="M80.6832 138.928C96.0921 138.928 108.584 126.443 108.584 111.041C108.584 95.6396 96.0921 83.1543 80.6832 83.1543C65.2743 83.1543 52.7829 95.6396 52.7829 111.041C52.7829 126.443 65.2743 138.928 80.6832 138.928Z"
-      fill="#F2F2F2"/>
-    <path
-      d="M186.395 96.8H167.986C167.264 96.8 166.573 96.5136 166.062 96.0037C165.552 95.4938 165.266 94.8023 165.266 94.0812C165.266 93.3601 165.552 92.6686 166.062 92.1587C166.573 91.6488 167.264 91.3624 167.986 91.3624H186.395C187.116 91.3624 187.808 91.6488 188.318 92.1587C188.828 92.6686 189.115 93.3601 189.115 94.0812C189.115 94.8023 188.828 95.4938 188.318 96.0037C187.808 96.5136 187.116 96.8 186.395 96.8Z"
-      fill="#8F84FF"/>
-    <path
-      d="M218.321 112.938H136.06C135.339 112.938 134.647 112.651 134.137 112.142C133.626 111.632 133.34 110.94 133.34 110.219C133.34 109.498 133.626 108.806 134.137 108.297C134.647 107.787 135.339 107.5 136.06 107.5H218.321C219.042 107.5 219.734 107.787 220.244 108.297C220.754 108.806 221.041 109.498 221.041 110.219C221.041 110.94 220.754 111.632 220.244 112.142C219.734 112.651 219.042 112.938 218.321 112.938Z"
-      fill="#E4E4E7"/>
-    <path
-      d="M218.321 130.72H136.06C135.339 130.72 134.647 130.433 134.137 129.924C133.626 129.414 133.34 128.722 133.34 128.001C133.34 127.28 133.626 126.588 134.137 126.079C134.647 125.569 135.339 125.282 136.06 125.282H218.321C219.042 125.282 219.734 125.569 220.244 126.079C220.754 126.588 221.041 127.28 221.041 128.001C221.041 128.722 220.754 129.414 220.244 129.924C219.734 130.433 219.042 130.72 218.321 130.72Z"
-      fill="#E4E4E7"/>
-  </g>
-  <defs>
-    <clipPath id="clip0_1388_30647">
-      <rect width="692.437" height="400" fill="white"/>
-    </clipPath>
-  </defs>
-</svg>

From 0bd05f0c2ca454e0a442ee9e40cf52e92b83b97f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastian=20Czech?= <czechsebastian@icloud.com>
Date: Fri, 8 Nov 2024 10:49:10 +0100
Subject: [PATCH 13/16] feat(xo-6): remove duplicated component

---
 .../lib/components/ui/NoDataError.vue         | 27 -------------------
 1 file changed, 27 deletions(-)
 delete mode 100644 @xen-orchestra/web-core/lib/components/ui/NoDataError.vue

diff --git a/@xen-orchestra/web-core/lib/components/ui/NoDataError.vue b/@xen-orchestra/web-core/lib/components/ui/NoDataError.vue
deleted file mode 100644
index 16b55e31d03..00000000000
--- a/@xen-orchestra/web-core/lib/components/ui/NoDataError.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="no-data">
-    <img alt="" class="img" src="@/assets/undraw-bug-fixing.svg" />
-    <p class="text-error typo h4-medium">{{ $t('error-no-data') }}</p>
-  </div>
-</template>
-
-<style scoped lang="postcss">
-.no-data {
-  text-align: center;
-}
-
-.img {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 1em;
-  width: 17em;
-  height: 13em;
-}
-.text-error {
-  margin: auto;
-  width: 8em;
-  font-style: normal;
-  color: var(--color-danger-txt-base);
-}
-</style>

From 28d0c7cb26a23eabbacc44fb41752a22c4c85c9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastian=20Czech?= <czechsebastian@icloud.com>
Date: Wed, 13 Nov 2024 17:04:17 +0100
Subject: [PATCH 14/16] feat(xo-lite): delete duplicate

---
 .../ui/side-panel/ui-side-panel.story.vue     | 79 -------------------
 .../components/ui/side-panel/UiSidePanel.vue  | 61 --------------
 2 files changed, 140 deletions(-)
 delete mode 100644 @xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
 delete mode 100644 @xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
deleted file mode 100644
index f47fcf99172..00000000000
--- a/@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <ComponentStory
-    v-slot="{ properties, settings }"
-    :params="[
-      prop('busy').bool().widget(),
-      prop('isError').bool().widget(),
-      prop('isEmpty').bool().widget(),
-      setting('action1').widget(text()).preset('Edit'),
-      setting('action2').widget(text()).preset('Delete'),
-      slot(),
-      slot('header').help('Meant to receive UiButton'),
-      slot('content').help('Meant to display cards or other component'),
-    ]"
-    :presets="{
-      Normal: {
-        props: {
-          busy: false,
-          isError: false,
-          isEmpty: false,
-        },
-      },
-      Empty: {
-        props: {
-          busy: false,
-          isError: false,
-          isEmpty: true,
-        },
-      },
-      Error: {
-        props: {
-          busy: false,
-          isError: true,
-        },
-      },
-      Busy: {
-        props: {
-          busy: true,
-          isError: false,
-        },
-      },
-    }"
-  >
-    <UiSidePanel v-bind="properties">
-      <template v-if="!properties.isEmpty" #header>
-        <UiButton variant="tertiary" size="medium" accent="info" :left-icon="faEdit"> {{ settings.action1 }}</UiButton>
-        <UiButton variant="tertiary" size="medium" accent="danger" :left-icon="faTrash">
-          {{ settings.action2 }}
-        </UiButton>
-      </template>
-      <template v-if="!properties.isEmpty" #content>
-        <UiCard>
-          <div>Content 1</div>
-          <div>Content 1</div>
-          <div>Content 1</div>
-        </UiCard>
-        <UiCard>
-          <div>Content 2</div>
-          <div>Content 2</div>
-          <div>Content 2</div>
-        </UiCard>
-        <UiCard>
-          <div>Content 3</div>
-          <div>Content 3</div>
-          <div>Content 3</div>
-        </UiCard>
-      </template>
-    </UiSidePanel>
-  </ComponentStory>
-</template>
-
-<script setup lang="ts">
-import ComponentStory from '@/components/component-story/ComponentStory.vue'
-import { prop, setting, slot } from '@/libs/story/story-param'
-import { text } from '@/libs/story/story-widget'
-import UiButton from '@core/components/ui/button/UiButton.vue'
-import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiSidePanel from '@core/components/ui/side-panel/UiSidePanel.vue'
-import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons'
-</script>
diff --git a/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue b/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
deleted file mode 100644
index cb568605c96..00000000000
--- a/@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!-- v1 -->
-<template>
-  <div class="ui-side-panel" :class="{ error: isError }">
-    <div v-if="slots.header && !props.busy && !isError && !isEmpty" class="header">
-      <slot name="header" />
-    </div>
-    <div v-if="slots.content && !props.busy && !isError" class="content">
-      <slot name="content" />
-    </div>
-    <div v-if="!props.busy && isError" class="error">
-      <div v-if="!props.busy && !slots.content" class="empty" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  busy?: boolean
-  isError?: boolean
-}>()
-
-const slots = defineSlots<{
-  default(): any
-  header?(): any
-  content?(): any
-}>()
-
-const isEmpty = computed(() => slots.content?.().length === 0)
-</script>
-
-<style scoped lang="postcss">
-.ui-side-panel {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  border: 0.1rem solid var(--color-neutral-border);
-  background-color: var(--color-neutral-background-secondary);
-
-  .header {
-    border-bottom: 0.1rem solid var(--color-neutral-border);
-    background-color: var(--color-neutral-background-primary);
-    display: flex;
-    justify-content: flex-end;
-    padding: 4px 16px;
-  }
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    padding: 0.8rem;
-    gap: 0.8rem;
-  }
-
-  &.error {
-    padding-top: 15rem;
-    background-color: var(--color-danger-background-selected);
-  }
-}
-</style>

From 0aee141b4f80d58b64f1ef6b1c7d78ec0435dd27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastian=20Czech?= <czechsebastian@icloud.com>
Date: Wed, 13 Nov 2024 17:09:29 +0100
Subject: [PATCH 15/16] feat(xo-lite): change toggle

---
 .../lite/src/stories/web-core/ui/panel/ui-panel.story.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/panel/ui-panel.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/panel/ui-panel.story.vue
index c3ea870b6ca..af6907cb270 100644
--- a/@xen-orchestra/lite/src/stories/web-core/ui/panel/ui-panel.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/panel/ui-panel.story.vue
@@ -21,9 +21,9 @@
       },
     }"
   >
-    <UiButton variant="primary" size="medium" accent="info" @click="toggle()">Toggle</UiButton>
     <UiSidePanel v-bind="properties" :error="properties.error">
       <template #header>
+        <UiButton variant="tertiary" size="medium" accent="info" @click="toggle()">Toggle</UiButton>
         <UiButton variant="tertiary" size="medium" accent="info" :left-icon="faEdit"> {{ settings.action1 }}</UiButton>
         <UiButton variant="tertiary" size="medium" accent="danger" :left-icon="faTrash">
           {{ settings.action2 }}

From 8e6bfc98d0760c5f0420a368745390102d440d92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastian=20Czech?= <czechsebastian@icloud.com>
Date: Thu, 14 Nov 2024 09:30:35 +0100
Subject: [PATCH 16/16] feat(xo-lite): feedback

---
 @xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue b/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue
index cdb80949a22..bbb0c10e60d 100644
--- a/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue
@@ -1,6 +1,6 @@
 <!-- wip -->
 <template>
-  <div class="ui-panel" :class="{ error: props.error }">
+  <div class="ui-panel" :class="{ error }">
     <div v-if="slots.header" class="header">
       <slot name="header" />
     </div>
@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{
+defineProps<{
   error?: boolean
 }>()