@xen-orchestra/web-core 0.38.0 → 0.39.1

package/lib/components/card/VtsCardRowKeyValue.vue

@@ -26,17 +26,15 @@ const slots = defineSlots<{
 .vts-card-row-key-value {
   display: flex;
   align-items: center;
-  gap: 1.2rem;
+  gap: 1.6rem;
 
   .key {
-    width: 12rem;
-    min-width: 12rem;
     overflow-wrap: break-word;
     color: var(--color-neutral-txt-secondary);
   }
 
   .value {
-    width: 20rem;
+    max-width: 25rem;
     color: var(--color-neutral-txt-primary);
   }
 

package/lib/components/cell-object/VtsCellObject.vue

@@ -15,7 +15,7 @@
           accent="brand"
           @click="copy(id)"
         >
-          {{ copied ? t('core.copied') : t('core.copy-id') }}
+          {{ copied ? t('copied') : t('action:copy-id') }}
         </UiButton>
       </template>
     </div>

package/lib/components/console/VtsActionsConsole.vue

@@ -8,7 +8,7 @@
     :left-icon="isFullscreen ? 'fa:down-left-and-up-right-to-center' : 'fa:up-right-and-down-left-from-center'"
     @click="toggleFullScreen"
   >
-    {{ t(isFullscreen ? 'exit-fullscreen' : 'fullscreen') }}
+    {{ isFullscreen ? t('exit-fullscreen') : t('fullscreen') }}
   </UiButton>
   <UiButton
     class="button"
@@ -18,7 +18,7 @@
     left-icon="fa:arrow-up-right-from-square"
     @click="openInNewTab"
   >
-    {{ t('open-console-in-new-tab') }}
+    {{ t('action:open-console-in-new-tab') }}
   </UiButton>
   <UiButton
     class="button"
@@ -28,7 +28,7 @@
     left-icon="fa:keyboard"
     @click="sendCtrlAltDel"
   >
-    {{ t('send-ctrl-alt-del') }}
+    {{ t('action:send-ctrl-alt-del') }}
   </UiButton>
 </template>
 

package/lib/components/console/VtsClipboardConsole.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="vts-clipboard-console">
     <UiCardTitle>{{ t('console-clipboard') }}</UiCardTitle>
-    <UiTextarea v-tooltip="t('coming-soon')" accent="brand" disabled :model-value="modelValue" />
+    <UiTextarea v-tooltip="t('coming-soon!')" accent="brand" disabled :model-value="modelValue" />
     <div class="buttons-container">
-      <UiButton v-tooltip="t('coming-soon')" accent="brand" variant="primary" size="medium" disabled>
-        {{ t('send') }}
+      <UiButton v-tooltip="t('coming-soon!')" accent="brand" variant="primary" size="medium" disabled>
+        {{ t('action:send') }}
       </UiButton>
-      <UiButton v-tooltip="t('coming-soon')" accent="brand" variant="secondary" size="medium" disabled>
+      <UiButton v-tooltip="t('coming-soon!')" accent="brand" variant="secondary" size="medium" disabled>
         {{ t('receive') }}
       </UiButton>
     </div>

package/lib/components/copy-button/VtsCopyButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <UiButtonIcon v-tooltip="copied && t('core.copied')" :icon size="small" accent="brand" @click="copy()" />
+  <UiButtonIcon v-tooltip="copied && t('copied')" :icon size="small" accent="brand" @click="copy()" />
 </template>
 
 <script setup lang="ts">

package/lib/components/dropdown/VtsDropdownTitle.vue

@@ -10,10 +10,10 @@
     </div>
     <div v-if="onToggleSelectAll" class="buttons">
       <span v-if="selected !== 'all'" @click="emit('toggleSelectAll', true)">
-        {{ t('core.select.all') }}
+        {{ t('action:select-all') }}
       </span>
       <span v-if="selected !== 'none'" @click="emit('toggleSelectAll', false)">
-        {{ t('core.select.none') }}
+        {{ t('action:select-none') }}
       </span>
     </div>
   </div>

package/lib/components/layout/VtsLayoutSidebar.vue

@@ -6,7 +6,7 @@
     <div v-if="!ui.isMobile" class="lock">
       <UiButtonIcon
         v-tooltip="{
-          content: sidebar.isLocked ? t('core.sidebar.unlock') : t('core.sidebar.lock'),
+          content: sidebar.isLocked ? t('action:sidebar-unlock') : t('action:sidebar-lock'),
           placement: 'right',
         }"
         accent="brand"

package/lib/components/{label-value-list/VtsLabelValueList.vue → recursive-fields/VtsRecursiveFields.vue}

@@ -1,6 +1,6 @@
 <template>
   <template v-for="(value, label) in fields" :key="label">
-    <VtsCardRowKeyValue v-if="isPrimitiveOrBooleanString(value)">
+    <VtsCardRowKeyValue v-if="isPrimitiveOrBoolean(value)">
       <template #key>
         <span class="label">{{ label }}</span>
       </template>
@@ -16,7 +16,7 @@
         <VtsCopyButton :value="String(value)" />
       </template>
     </VtsCardRowKeyValue>
-    <VtsLabelValueList v-else :fields="value" />
+    <VtsRecursiveFields v-else :fields="value" />
   </template>
 </template>
 
@@ -35,8 +35,8 @@ const isBooleanLike = (value: unknown): boolean => typeof value === 'boolean' ||
 
 const toBoolean = (value: unknown): boolean => value === true || value === 'true'
 
-const isPrimitiveOrBooleanString = (value: unknown): boolean =>
-  ['number', 'string'].includes(typeof value) || isBooleanString(value)
+const isPrimitiveOrBoolean = (value: unknown): boolean =>
+  ['number', 'string'].includes(typeof value) || isBooleanLike(value)
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/select/VtsSelect.vue

@@ -28,7 +28,7 @@
           </div>
         </template>
         <UiDropdown v-if="isLoading || options.length === 0" accent="normal" disabled>
-          {{ isLoading ? t('loading') : t('no-results') }}
+          {{ isLoading ? t('loading') : t('no-result') }}
         </UiDropdown>
         <template v-for="option of options" :key="option.id">
           <slot :option="option as FormSelectIdToOption<TSelectId>">

package/lib/components/state-hero/VtsStateHero.vue

@@ -3,7 +3,7 @@
     <UiLoader v-if="type === 'busy'" class="loader" />
     <img v-else-if="imageSrc" :src="imageSrc" :alt="type" class="image" />
     <div v-if="slots.default || success" :class="typoClass" class="content">
-      <div v-if="success">{{ t('all-good') }}</div>
+      <div v-if="success">{{ t('all-good!') }}</div>
       <slot />
     </div>
   </div>

package/lib/components/table/cells/VtsTruncatedTextCell.vue

@@ -13,7 +13,7 @@
         class="typo-body-regular-small button"
         @click="toggleExpanded()"
       >
-        {{ isExpanded ? t('show-less') : t('show-more') }}
+        {{ isExpanded ? t('action:show-less') : t('action:show-more') }}
       </UiButton>
     </div>
   </UiTableCell>

package/lib/components/task/VtsQuickTaskButton.vue

@@ -1,7 +1,7 @@
 <template>
   <UiButtonIcon
     ref="buttonRef"
-    v-tooltip="{ content: t('tasks.quick-view'), placement: 'bottom-end' }"
+    v-tooltip="{ content: t('tasks:overview'), placement: 'bottom-end' }"
     accent="brand"
     :dot="hasNewTask"
     icon="fa:bars-progress"
@@ -18,9 +18,9 @@
 <script lang="ts" setup>
 import VtsBackdrop from '@core/components/backdrop/VtsBackdrop.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import type { Task } from '@core/components/ui/quick-task-item/UiQuickTaskItem.vue'
 import UiQuickTaskPanel from '@core/components/ui/quick-task-panel/UiQuickTaskPanel.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
+import type { Task } from '@core/types/task.type.ts'
 import { unrefElement, watchArray, whenever } from '@vueuse/core'
 import placementJs from 'placement.js'
 import { computed, nextTick, ref } from 'vue'

package/lib/components/task/VtsQuickTaskList.vue

@@ -20,13 +20,14 @@
         <div>{{ t('loading') }}</div>
       </div>
     </li>
-    <li v-else-if="tasks.length === 0" class="typo-body-bold">{{ t('tasks.no-tasks') }}</li>
+    <li v-else-if="tasks.length === 0" class="typo-body-bold">{{ t('no-task') }}</li>
   </ul>
 </template>
 
 <script lang="ts" setup>
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
-import UiQuickTaskItem, { type Task } from '@core/components/ui/quick-task-item/UiQuickTaskItem.vue'
+import UiQuickTaskItem from '@core/components/ui/quick-task-item/UiQuickTaskItem.vue'
+import type { Task } from '@core/types/task.type.ts'
 import { useI18n } from 'vue-i18n'
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
 

package/lib/components/task/VtsQuickTaskTabBar.vue

@@ -1,7 +1,7 @@
 <template>
   <TabList :disabled="loading">
     <TabItem v-bind="tabs.pending.bindings">
-      {{ t('tasks.quick-view.in-progress') }}
+      {{ t('in-progress') }}
       <UiCounter
         v-if="pendingCount !== undefined"
         :value="pendingCount"
@@ -11,7 +11,7 @@
       />
     </TabItem>
     <TabItem v-bind="tabs.success.bindings">
-      {{ t('tasks.quick-view.done') }}
+      {{ t('done') }}
       <UiCounter
         v-if="successCount !== undefined"
         :value="successCount"
@@ -21,7 +21,7 @@
       />
     </TabItem>
     <TabItem v-bind="tabs.failure.bindings">
-      {{ t('tasks.quick-view.failed') }}
+      {{ t('failed') }}
       <UiCounter
         v-if="failureCount !== undefined"
         :value="failureCount"
@@ -32,12 +32,12 @@
     </TabItem>
     <VtsDivider type="tab" />
     <TabItem v-bind="tabs.all.bindings">
-      {{ t('tasks.quick-view.all') }}
+      {{ t('all') }}
     </TabItem>
     <!--
     TODO
     <UiButton :right-icon="faAngleRight" class="see-all" level="tertiary" size="extra-small">
-      {{ t('see-all') }}
+      {{ t('action:see-all') }}
     </UiButton>
     -->
   </TabList>
@@ -48,8 +48,8 @@ import VtsDivider from '@core/components/divider/VtsDivider.vue'
 import TabItem from '@core/components/tab/TabItem.vue'
 import TabList from '@core/components/tab/TabList.vue'
 import UiCounter from '@core/components/ui/counter/UiCounter.vue'
-import type { TaskStatus } from '@core/components/ui/quick-task-item/UiQuickTaskItem.vue'
 import { useTabList } from '@core/composables/tab-list.composable'
+import type { TaskStatus } from '@core/types/task.type.ts'
 import { useI18n } from 'vue-i18n'
 
 export type TaskTab = TaskStatus | 'all'

package/lib/components/ui/account-menu-button/UiAccountMenuButton.vue

@@ -10,7 +10,7 @@ import UiUserLogo from '@core/components/ui/user-logo/UiUserLogo.vue'
 import { useDisabled } from '@core/composables/disabled.composable'
 
 defineProps<{
-  size: 'small' | 'medium'
+  size: 'extra-small' | 'small' | 'medium'
   selected?: boolean
 }>()
 

package/lib/components/ui/breadcrumb/UiBreadcrumb.vue

@@ -1,6 +1,6 @@
 <!-- v2 -->
 <template>
-  <nav class="ui-breadcrumb" :class="className" :aria-label="t('aria.breadcrumb.label')">
+  <nav class="ui-breadcrumb" :class="className" :aria-label="t('aria:breadcrumb:label')">
     <ol>
       <li v-for="child in slots.default()" :key="child.ctx.uid">
         <component :is="child" />

package/lib/components/ui/character-limit/UiCharacterLimit.vue

@@ -1,7 +1,7 @@
 <!-- v1 -->
 <template>
   <span class="ui-character-limit" :class="classes">
-    {{ t('core.character-limit', { count, max }) }}
+    {{ t('character-limit', { count, max }) }}
   </span>
 </template>
 

package/lib/components/ui/circle-progress-bar/UiCircleProgressBar.vue

@@ -46,7 +46,7 @@ const {
 
 const { n } = useI18n()
 
-type CircleProgressBarAccent = 'info' | 'warning' | 'danger'
+export type CircleProgressBarAccent = 'info' | 'warning' | 'danger'
 type CircleProgressBarSize = 'extra-small' | 'small' | 'medium' | 'large'
 
 const circleSizeMap = {

package/lib/components/ui/collapsible-list/UiCollapsibleList.vue

@@ -6,7 +6,7 @@
     </component>
     <div v-if="hasMoreItems" class="footer">
       <UiButton size="small" accent="brand" variant="tertiary" @click="isExpanded = !isExpanded">
-        {{ isExpanded ? t('see-less') : t('see-n-more', { n: remainingItems }) }}
+        {{ isExpanded ? t('action:see-less') : t('action:see-n-more', { n: remainingItems }) }}
       </UiButton>
     </div>
   </div>

package/lib/components/ui/input/UiInput.vue

@@ -4,12 +4,13 @@
     <input
       :id="wrapperController?.id ?? id"
       ref="inputRef"
-      v-model.trim="modelValue"
+      :value="modelValue"
       :disabled
       :required
       :type
       class="typo-body-regular input text-ellipsis"
       v-bind="attrs"
+      @input="event => handleInput(event)"
     />
     <UiButtonIcon
       v-if="!disabled && modelValue && clearable"
@@ -42,7 +43,6 @@ export type InputType = 'text' | 'number' | 'password' | 'search'
 defineOptions({
   inheritAttrs: false,
 })
-
 const {
   accent: _accent,
   required,
@@ -65,6 +65,10 @@ const slots = defineSlots<{
   'right-icon'?(): any
 }>()
 
+function handleInput(event: Event) {
+  modelValue.value = (event.target as HTMLInputElement).value
+}
+
 const attrs = useAttrs()
 
 const inputRef = ref<HTMLInputElement>()
@@ -73,11 +77,11 @@ const wrapperController = inject(IK_INPUT_WRAPPER_CONTROLLER, undefined)
 
 const accent = useMapper<LabelAccent, InputAccent>(
   () => wrapperController?.labelAccent,
-  {
+  () => ({
     neutral: _accent,
     warning: 'warning',
     danger: 'danger',
-  },
+  }),
   'neutral'
 )
 

package/lib/components/ui/log-entry-viewer/UiLogEntryViewer.vue

@@ -80,7 +80,7 @@ watch(
   content => {
     pre.textContent = content.value
   },
-  { immediate: true }
+  { immediate: true, deep: true }
 )
 
 function openRawValueInNewTab() {

package/lib/components/ui/query-search-bar/UiQuerySearchBar.vue

@@ -2,31 +2,31 @@
 <template>
   <form class="ui-query-search-bar" @submit.prevent="emit('search', value)">
     <label v-if="uiStore.isDesktopLarge" :for="id" class="typo-body-regular-small label">
-      {{ t('core.query-search-bar.label') }}
+      {{ t('query-search-bar:label') }}
     </label>
     <UiInput
       :id
       v-model="value"
       type="text"
       accent="brand"
-      :aria-label="uiStore.isMobile ? t('core.query-search-bar.label') : undefined"
+      :aria-label="uiStore.isMobile ? t('query-search-bar:label') : undefined"
       :icon="!uiStore.isMobile ? 'fa:magnifying-glass' : undefined"
-      :placeholder="t('core.query-search-bar.placeholder')"
+      :placeholder="t('query-search-bar:placeholder')"
     />
     <template v-if="!uiStore.isMobile">
       <UiButton size="medium" accent="brand" variant="primary" type="submit" class="action-button">
-        {{ t('core.search') }}
+        {{ t('action:search') }}
       </UiButton>
       <VtsDivider type="stretch" />
       <UiButton
-        v-tooltip="t('coming-soon')"
+        v-tooltip="t('coming-soon!')"
         size="medium"
         accent="brand"
         variant="secondary"
         disabled
         class="action-button"
       >
-        {{ t('core.query-search-bar.use-query-builder') }}
+        {{ t('query-search-bar:use-query-builder') }}
       </UiButton>
     </template>
 

package/lib/components/ui/quick-task-item/UiQuickTaskItem.vue

@@ -13,7 +13,7 @@
           <UiTag v-if="task.tag" accent="neutral" variant="primary">{{ task.tag }}</UiTag>
           <div v-if="hasSubTasks" class="subtasks">
             <VtsIcon name="fa:circle-notch" size="medium" />
-            <span class="typo-body-regular-small">{{ t('tasks.n-subtasks', { n: subTasksCount }) }}</span>
+            <span class="typo-body-regular-small">{{ t('n-subtasks', { n: subTasksCount }) }}</span>
           </div>
         </div>
         <div v-if="task.start" class="line-2 typo-body-regular-small">
@@ -34,22 +34,11 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import VtsQuickTaskList from '@core/components/task/VtsQuickTaskList.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiTag from '@core/components/ui/tag/UiTag.vue'
+import type { Task } from '@core/types/task.type.ts'
 import { useToggle } from '@vueuse/core'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-export type TaskStatus = 'pending' | 'success' | 'failure'
-
-export type Task = {
-  id: string | number
-  name: string
-  status: TaskStatus
-  tag?: string
-  start?: number
-  end?: number
-  subtasks?: Task[]
-}
-
 const props = defineProps<{
   task: Task
 }>()

package/lib/components/ui/quick-task-panel/UiQuickTaskPanel.vue

@@ -15,8 +15,8 @@
 <script lang="ts" setup>
 import VtsQuickTaskList from '@core/components/task/VtsQuickTaskList.vue'
 import VtsQuickTaskTabBar, { type TaskTab } from '@core/components/task/VtsQuickTaskTabBar.vue'
-import type { Task } from '@core/components/ui/quick-task-item/UiQuickTaskItem.vue'
 import { useUiStore } from '@core/stores/ui.store'
+import type { Task } from '@core/types/task.type.ts'
 import { computed, ref } from 'vue'
 
 const props = defineProps<{

package/lib/components/ui/table-pagination/UiTablePagination.vue

@@ -3,7 +3,7 @@
   <div class="ui-table-pagination" :class="className">
     <div class="container">
       <span class="typo-body-regular-small label">
-        {{ t('core.select.n-object-of', { from, to, total }) }}
+        {{ t('action:select-n-objects-of', { from, to, total }) }}
       </span>
       <div class="buttons-container">
         <PaginationButton :disabled="isFirstPage" icon="fa:angle-double-left" @click="emit('first')" />
@@ -13,7 +13,7 @@
       </div>
     </div>
     <div class="container">
-      <span class="typo-body-regular-small label show">{{ t('core.pagination.show-by') }}</span>
+      <span class="typo-body-regular-small label show">{{ t('show-by') }}</span>
       <VtsSelect :id="showBySelectId" accent="brand" class="typo-body-regular-small show-by-select" />
     </div>
   </div>
@@ -54,7 +54,7 @@ const { t } = useI18n()
 const { id: showBySelectId } = useFormSelect([12, 24, 48, -1], {
   model: showBy,
   option: {
-    label: option => (option === -1 ? t('core.pagination.all') : option.toString()),
+    label: option => (option === -1 ? t('pagination:all') : option.toString()),
   },
 })
 </script>

package/lib/components/ui/task-item/UiTaskItem.vue

@@ -1,6 +1,6 @@
 <!-- v10 -->
 <template>
-  <li class="ui-task-item" :data-depth="depth">
+  <li class="ui-task-item" :data-depth="depth" :class="{ selected }">
     <div class="container">
       <div class="tree-section">
         <div class="tree-lines">
@@ -10,7 +10,7 @@
         </div>
         <UiButtonIcon
           v-if="hasSubTasks"
-          v-tooltip="expanded ? t('core.close') : t('core.open')"
+          v-tooltip="expanded ? t('action:close') : t('action:open')"
           accent="brand"
           :icon="expanded ? 'fa:angle-down' : 'fa:angle-right'"
           size="small"
@@ -35,24 +35,19 @@
 
         <div class="content-right typo-body-regular-small">
           <span v-if="task.end">
-            {{ `${t('task.ended')} ${end}` }}
+            {{ `${t('task:ended')} ${end}` }}
           </span>
           <div class="progress">
-            <UiCircleProgressBar
-              v-if="task.progress !== undefined"
-              :accent="progressAccent"
-              size="small"
-              :value="task.progress"
-            />
+            <UiCircleProgressBar :accent="progressAccent" size="small" :value="progress" />
           </div>
           <div class="actions">
-            <UiButtonIcon icon="fa:eye" size="medium" accent="brand" @click="emit('select')" />
+            <UiButtonIcon icon="fa:eye" size="medium" accent="brand" @click="emit('select', task.id)" />
           </div>
         </div>
       </div>
     </div>
     <template v-if="hasSubTasks && expanded">
-      <UiTaskList :tasks="subTasks" :depth />
+      <UiTaskList :tasks="subTasks" :depth :selected-task-id="selectedTaskId" @select="id => emit('select', id)" />
     </template>
   </li>
 </template>
@@ -77,24 +72,26 @@ export type Task = {
   progress?: number
   end?: number
   status: 'failure' | 'interrupted' | 'pending' | 'success'
-  tasks?: Task[]
-  warning?: { data: unknown; message: string }[]
+  subtasks?: Task[]
+  warnings?: { data: unknown; message: string }[]
 }
 
 const { task } = defineProps<{
   task: Task
   depth: number
   expanded?: boolean
+  selected?: boolean
+  selectedTaskId?: string
 }>()
 
 const emit = defineEmits<{
   expand: []
-  select: []
+  select: [id: string]
 }>()
 
 const { t } = useI18n()
 
-const subTasks = computed(() => task.tasks ?? [])
+const subTasks = computed(() => task.subtasks ?? [])
 
 const subTasksCount = computed(() => subTasks.value.length)
 
@@ -104,13 +101,22 @@ const isError = computed(() => task.status === 'failure' || task.status === 'int
 
 const end = useTimeAgo(() => task.end ?? 0)
 
-const hasWarnings = computed(() => task.warning && task.warning.length > 0)
+const hasWarnings = computed(() => task.warnings && task.warnings.length > 0)
 
 const hasInfos = computed(() => task.infos && task.infos.length > 0)
 
 const shouldShowInfos = logicOr(isError, hasWarnings, hasInfos)
 
 const progressAccent = computed(() => (isError.value ? 'danger' : 'info'))
+
+// TODO remove when progress is available for all tasks
+const progress = computed(() => {
+  if (task.status === 'pending' && !task.end) {
+    return task.progress ? task.progress : 0
+  }
+
+  return task.progress ? task.progress : 100
+})
 </script>
 
 <style lang="postcss" scoped>
@@ -119,6 +125,10 @@ const progressAccent = computed(() => (isError.value ? 'danger' : 'info'))
     border-bottom: 0.1rem solid var(--color-neutral-border);
   }
 
+  &.selected {
+    background-color: var(--color-brand-background-selected);
+  }
+
   .container {
     display: flex;
     min-height: 4.8rem;
@@ -134,6 +144,8 @@ const progressAccent = computed(() => (isError.value ? 'danger' : 'info'))
     }
 
     .tree-section {
+      --line-container-base-width: 2.8rem;
+      --line-width: 0.1rem;
       display: flex;
       align-items: center;
       padding-left: 1.6rem;
@@ -142,10 +154,11 @@ const progressAccent = computed(() => (isError.value ? 'danger' : 'info'))
       .tree-lines {
         display: flex;
         align-self: stretch;
+        min-width: calc(var(--line-container-base-width) * v-bind(depth - 1));
       }
 
       .tree-line {
-        flex: 0 0 2.8rem;
+        flex: 0 0 calc(var(--line-container-base-width) + var(--line-width));
         display: flex;
         align-items: center;
         justify-content: center;

package/lib/components/ui/task-list/UiTaskList.vue

@@ -1,24 +1,28 @@
 <template>
-  <ul>
+  <ul class="ui-task-list">
     <UiTaskItem
       v-for="task of tasksItems"
       :key="task.id"
       :task="task.source"
       :expanded="task.flags.expanded"
       :depth="depth + 1"
-      @select="emit('select', task.id)"
+      :selected="selectedTaskId === task.id"
+      :selected-task-id="selectedTaskId"
+      @select="emit('select', $event)"
       @expand="task.toggleFlag('expanded')"
     />
   </ul>
 </template>
 
 <script lang="ts" setup>
-import UiTaskItem, { type Task } from '@core/components/ui/task-item/UiTaskItem.vue'
+import UiTaskItem from '@core/components/ui/task-item/UiTaskItem.vue'
 import { useCollection } from '@core/packages/collection'
+import type { Task } from '@core/types/task.type.ts'
 
 const { tasks, depth = 0 } = defineProps<{
   tasks: Task[]
   depth?: number
+  selectedTaskId?: string
 }>()
 
 const emit = defineEmits<{
@@ -29,3 +33,10 @@ const { items: tasksItems } = useCollection(() => tasks, {
   flags: ['expanded'],
 })
 </script>
+
+<style scoped lang="postcss">
+.ui-task-list {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+</style>