From cdc4ddb652c9ed1eae7b24b1446d89941162ed01 Mon Sep 17 00:00:00 2001
From: Sandrine Barrucand <esther.stephan88@gmail.com>
Date: Thu, 27 Aug 2026 11:49:53 +0200
Subject: [PATCH] feat(xo6/backups): add header title (#10303)

---
 .../modules/backup/components/BackupHeader.vue   | 16 +++++++++++++---
 CHANGELOG.unreleased.md                          |  1 +
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/@xen-orchestra/web/src/modules/backup/components/BackupHeader.vue b/@xen-orchestra/web/src/modules/backup/components/BackupHeader.vue
index 3dbd0f4a37..2ff2dad4c3 100644
--- a/@xen-orchestra/web/src/modules/backup/components/BackupHeader.vue
+++ b/@xen-orchestra/web/src/modules/backup/components/BackupHeader.vue
@@ -1,15 +1,24 @@
 <template>
   <div class="breadcrumb-container">
     <UiBreadcrumb :size>
-      <UiLink :size :to="{ name: '/(site)/dashboard' }" icon="fa:satellite">{{ XOA_NAME }}</UiLink>
+      <span class="breadcrumb-item">
+        <VtsIcon name="fa:satellite" size="current" />
+        <UiLink :size :to="{ name: '/(site)/dashboard' }">{{ XOA_NAME }}</UiLink>
+      </span>
       <UiLink :size :to="{ name: '/(site)/backups' }">{{ t('backups') }}</UiLink>
-      <span class="backup-job-name">
+      <span class="breadcrumb-item">
         <VtsIcon name="object:backup-job" size="current" />
         {{ backupJob.name }}
       </span>
     </UiBreadcrumb>
     <UiLink :size :href="newBackupRoute">{{ t('configure-in-xo-5') }}</UiLink>
   </div>
+  <UiHeadBar>
+    <template #icon>
+      <VtsIcon name="object:backup-job" size="current" />
+    </template>
+    {{ backupJob.name }}
+  </UiHeadBar>
   <TabList>
     <RouterLink v-slot="{ isActive, href }" :to="{ name: '/backup/[id]/runs', params: { id: backupJob.id } }" custom>
       <TabItem :active="isActive" :href tag="a">
@@ -50,6 +59,7 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import TabItem from '@core/components/tab/TabItem.vue'
 import TabList from '@core/components/tab/TabList.vue'
 import UiBreadcrumb from '@core/components/ui/breadcrumb/UiBreadcrumb.vue'
+import UiHeadBar from '@core/components/ui/head-bar/UiHeadBar.vue'
 import UiLink from '@core/components/ui/link/UiLink.vue'
 import { useUiStore } from '@core/stores/ui.store.ts'
 import { computed } from 'vue'
@@ -78,7 +88,7 @@ const size = computed(() => (uiStore.isSmall ? 'small' : 'medium'))
   justify-content: space-between;
   overflow-y: auto;
 
-  .backup-job-name {
+  .breadcrumb-item {
     display: flex;
     align-items: center;
     gap: 0.8rem;
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
index 3fd47d7415..1bdf72fb44 100644
--- a/CHANGELOG.unreleased.md
+++ b/CHANGELOG.unreleased.md
@@ -12,6 +12,7 @@
 > Users must be able to say: "Nice enhancement, I'm eager to test it"
 
 - [i18n] Add Arabic and update Czech, Dutch, Finnish, Portuguese (Brasil), Slovak and Swedish translations (PR [#10181](https://github.com/vatesfr/xen-orchestra/pull/10181))
+- [XO6/Backups] Add header title on backup job detail page (PR [#10303](https://github.com/vatesfr/xen-orchestra/pull/10303))
 
 ### Bug fixes