master rebase

Author: sylvere-a

@xen-orchestra/web/src/modules/kubernetes/components/list/panel/card/ClusterInfoCard.vue

@@ -1,7 +1,8 @@
 <template>
   <UiPanelCard class="cluster-info-card">
-    <VtsCardObjectTitle
+    <UiPanelCardTitle
       :id="cluster.id"
+      size="medium"
       :label="cluster.name"
       :to="getKubernetesClusterRoute(cluster.id)"
       icon="object:cluster"
@@ -59,10 +60,10 @@ import { clusterStatus } from '@/modules/kubernetes/utils/kubernetes-cluster.uti
 import { getKubernetesClusterRoute } from '@/modules/kubernetes/utils/kubernetes-routes.util.ts'
 import { kubernetesTagsToDisplayStrings } from '@/modules/kubernetes/utils/kubernetes-tags.util.ts'
 import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
-import VtsCardObjectTitle from '@core/components/card-object-title/VtsCardObjectTitle.vue'
 import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
 import VtsTag from '@core/components/tag/VtsTag.vue'
 import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
+import UiPanelCardTitle from '@core/components/ui/panel-card-title/UiPanelCardTitle.vue'
 import UiTagsList from '@core/components/ui/tag/UiTagsList.vue'
 import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import { computed } from 'vue'

@xen-orchestra/web/src/modules/navigation/composables/use-navigation-tree.composable.ts

@@ -1,11 +1,10 @@
 import { useXoKubernetesTreeDefinitions } from '@/modules/kubernetes/composables/xo-kubernetes-tree-definitions.composable.ts'
 import { useXoSiteTreeDefinitions } from '@/modules/site/composables/xo-site-tree-definitions.composable.ts'
-import type { TreeNodeId } from '@core/packages/tree/types.ts'
+import { useTreeCollapse } from '@core/composables/tree-collapse.composable.ts'
 import { useTreeFilter } from '@core/composables/tree-filter.composable.ts'
 import { useTree } from '@core/packages/tree/use-tree.ts'
-import { useLocalStorage } from '@vueuse/core'
 import { logicAnd } from '@vueuse/math'
-import { computed, reactive, ref, watch } from 'vue'
+import { computed } from 'vue'
 
 export function useNavigationTree() {
   const { filter, predicate, isSearching, hasFilter } = useTreeFilter()
@@ -19,23 +18,7 @@ export function useNavigationTree() {
 
   const isReady = logicAnd(isSiteTreeReady, areKubernetesObjectsReady)
 
-  const collapseState = reactive({
-    default: useLocalStorage('site.collapsed', new Set<TreeNodeId>()),
-    filtered: ref(new Set<TreeNodeId>()),
-  })
-
-  watch(filter, () => collapseState.filtered.clear())
-
-  const collapsedIds = computed({
-    get: () => (hasFilter.value ? collapseState.filtered : collapseState.default),
-    set: value => {
-      if (hasFilter.value) {
-        collapseState.filtered = value
-      } else {
-        collapseState.default = value
-      }
-    },
-  })
+  const collapsedIds = useTreeCollapse('site.collapsed', filter, hasFilter)
 
   const { flatNodes, flatNodeIndexById, expandToNode } = useTree(definitions, { collapsedIds })