feat(xo-6): locales migration

@xen-orchestra/lite/src/stories/web-core/ui/card/ui-card-item.story.vue

@@ -0,0 +1,64 @@
+<template>
+  <ComponentStory v-slot="{ properties }" :params="[prop('horizontal').bool().widget()]">
+    <UiCard class="card">
+      <UiCardItem v-bind="properties">
+        Uuid
+        <template #content>
+          <div>71df26a2-678a-49c7-8232-8ebcac4987ab</div>
+        </template>
+        <template #actions>
+          <UiButtonIcon :icon="faCopy" size="small" accent="info" />
+        </template>
+      </UiCardItem>
+      <UiCardItem v-bind="properties">
+        network Name
+        <template #content>
+          <UiObjectLink route="`/vm/test/console`">
+            <template #icon>
+              <UiComplexIcon size="medium">
+                <VtsIcon :icon="faNetworkWired" accent="current" />
+                <VtsIcon accent="success" :icon="faCircle" :overlay-icon="faCheck" />
+              </UiComplexIcon>
+            </template>
+            Network Name
+          </UiObjectLink>
+        </template>
+        <template #actions>
+          <UiButtonIcon :icon="faCopy" size="small" accent="info" />
+        </template>
+      </UiCardItem>
+      <UiCardItem v-bind="properties">
+        Status
+        <template #content>
+          <VtsIcon accent="success" :icon="faCircle" :overlay-icon="faCheck" />
+          <div>Connected</div>
+        </template>
+        <template #actions>
+          <UiButtonIcon :icon="faCopy" size="small" accent="info" />
+          <UiButtonIcon :icon="faEllipsis" size="small" accent="info" />
+        </template>
+      </UiCardItem>
+    </UiCard>
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import UiCard from '@/components/ui/UiCard.vue'
+import { prop } from '@/libs/story/story-param'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiCardItem from '@core/components/ui/card-item/UiCardItem.vue'
+import UiComplexIcon from '@core/components/ui/complex-icon/UiComplexIcon.vue'
+import UiObjectLink from '@core/components/ui/object-link/UiObjectLink.vue'
+import { faCheck, faCircle, faCopy, faEllipsis, faNetworkWired } from '@fortawesome/free-solid-svg-icons'
+</script>
+
+<style lang="postcss" scoped>
+.card {
+  width: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+</style>

@xen-orchestra/web-core/lib/components/ui/card-item/UiCardItem.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="ui-card-item typo p3-regular">
+    <div class="title">
+      <slot />
+    </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+    <div v-if="slots.actions" class="actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  icon?: any
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  content(): any
+  actions?(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.ui-card-item {
+  display: flex;
+  align-items: center;
+  gap: 3rem;
+  width: 100%;
+
+  .content {
+    display: flex;
+    gap: 0.8rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .actions {
+    display: flex;
+    gap: 0.8rem;
+    margin-left: auto;
+  }
+}
+</style>