feat(xo-core): add CellObject component

@xen-orchestra/lite/src/stories/web-core/cell-object/cell-object.story.vue

@@ -0,0 +1,25 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties, settings }"
+    :params="[
+      prop('id').str().preset('550e8400-e29b-41d4-a716-446655440000').widget(),
+      prop('copiableId').bool().widget(),
+      slot().help('Meant to receive an ObjectLink component'),
+      setting('slot').preset('Object link').widget(),
+    ]"
+  >
+    <table>
+      <tr>
+        <CellObject v-bind="properties">
+          {{ settings.slot }}
+        </CellObject>
+      </tr>
+    </table>
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { prop, setting, slot } from '@/libs/story/story-param'
+import CellObject from '@core/components/cell-object/CellObject.vue'
+</script>

@xen-orchestra/web-core/lib/components/cell-object/CellObject.vue

@@ -0,0 +1,61 @@
+<!-- v1.0 -->
+<template>
+  <td class="cell-object">
+    <div class="data">
+      <slot />
+      <template v-if="id !== undefined">
+        <span v-tooltip class="id typo p4-regular-italic ellipsis">
+          {{ id }}
+        </span>
+        <UiButton
+          v-if="isSupported && copiableId"
+          :left-icon="faCopy"
+          level="secondary"
+          size="extra-small"
+          :color="copied ? 'success' : 'info'"
+          @click="copy(id)"
+        >
+          {{ copied ? $t('core.copied') : $t('core.copy-id') }}
+        </UiButton>
+      </template>
+    </div>
+  </td>
+</template>
+
+<script lang="ts" setup>
+import UiButton from '@core/components/button/UiButton.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { faCopy } from '@fortawesome/free-solid-svg-icons'
+import { useClipboard } from '@vueuse/core'
+
+defineProps<{
+  id?: string
+  copiableId?: boolean
+}>()
+
+const { isSupported, copy, copied } = useClipboard()
+</script>
+
+<style lang="postcss" scoped>
+.cell-object {
+  padding: 0.8rem;
+  border: 0.1rem solid var(--color-grey-500);
+}
+
+.data {
+  display: flex;
+  gap: 1.6rem;
+  align-items: center;
+}
+
+.id {
+  color: var(--color-grey-300);
+}
+
+.ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+</style>

@xen-orchestra/web-core/lib/locales/en.json

@@ -8,6 +8,8 @@
   "coming-soon": "Coming soon!",
   "console": "Console",
 
+  "core.copied": "Copied",
+  "core.copy-id": "Copy ID",
   "core.close": "Close",
   "core.current": "Current",
   "core.filter": "Filter",

@xen-orchestra/web-core/lib/locales/fr.json

@@ -8,6 +8,8 @@
   "coming-soon": "Bientôt disponible !",
   "console": "Console",
 
+  "core.copied": "Copié",
+  "core.copy-id": "Copier l'ID",
   "core.close": "Fermer",
   "core.current": "Actuel",
   "core.filter": "Filtrer",