refactor: update MessageListGroup to new requests messages

app/overrides.d.ts

@@ -15,3 +15,9 @@ declare module 'vue-router' {
     breadcrumb?: string[]
   }
 }
+
+declare module 'bootstrap-vue-next' {
+  interface BaseColorVariant {
+    best: unknown
+  }
+}

app/src/components/MessageListGroup.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { BListGroup, ColorVariant } from 'bootstrap-vue-next'
+import { watchThrottled } from '@vueuse/core'
-import { computed, nextTick, watch, ref } from 'vue'
+import type { BListGroup } from 'bootstrap-vue-next'
+import { nextTick, ref } from 'vue'
 
-type ActionMessage = { color: ColorVariant; text: string }
+import type { RequestMessage } from '@/composables/useRequests'
 
 const props = withDefaults(
   defineProps<{
-    messages: ActionMessage[]
+    messages: RequestMessage[]
     fixedHeight?: boolean
     bordered?: boolean
     autoScroll?: boolean
@@ -20,34 +21,35 @@ const props = withDefaults(
   },
 )
 
-const auto = ref(true)
 const rootElem = ref<InstanceType<typeof BListGroup> | null>(null)
 
-if (props.autoScroll) {
+const auto = ref(props.autoScroll)
-  watch(() => props.messages, scrollToEnd, { deep: true })
+const reducedMessages = ref<RequestMessage[]>([...props.messages])
-}
 
-const reducedMessages = computed(() => {
+watchThrottled(
-  const len = props.messages.length
+  () => props.messages,
+  (messages) => {
+    const len = messages.length
     if (!props.limit || len <= props.limit) {
-    return props.messages
+      reducedMessages.value = [...messages]
+    } else {
+      reducedMessages.value = messages.slice(len - props.limit)
     }
-  return props.messages.slice(len - props.limit)
+    if (auto.value) nextTick(scrollToEnd)
-})
+  },
+  { throttle: 300, deep: true },
+)
 
 function scrollToEnd() {
-  if (!auto.value) return
+  const elem = rootElem.value?.$el
-  nextTick(() => {
+  elem?.scrollTo(0, elem.lastElementChild.offsetTop)
-    rootElem.value!.$el.scrollTo(
-      0,
-      rootElem.value!.$el.lastElementChild.offsetTop,
-    )
-  })
 }
 
-function onScroll(e: Event) {
+function onScroll() {
-  const target = e.target as HTMLElement
+  if (!props.autoScroll) return
-  auto.value = target.scrollHeight === target.scrollTop + target.clientHeight
+  const elem = rootElem.value!.$el
+  const { scrollHeight, scrollTop, clientHeight } = elem
+  auto.value = scrollHeight === scrollTop + clientHeight
 }
 </script>
 <template>
@@ -59,14 +61,13 @@ function onScroll(e: Event) {
   >
     <YListGroupItem
       v-if="limit && messages.length > limit"
-      variant="info"
       v-t="'api.partial_logs'"
+      variant="info"
     />
-
     <YListGroupItem
-      v-for="({ color, text }, i) in reducedMessages"
+      v-for="({ variant, text }, i) in reducedMessages"
       :key="i"
-      :variant="color"
+      :variant="variant"
       size="xs"
     >
       <span v-html="text" />

app/src/components/globals/YListGroupItem.vue

@@ -10,7 +10,7 @@ const props = withDefaults(
     icon?: string
     noIcon?: boolean
     noStatus?: boolean
-    size?: Breakpoint
+    size?: Breakpoint | 'xs'
     faded?: boolean
   }>(),
   {
@@ -56,7 +56,6 @@ const class_ = computed(() => {
 
   &-status {
     width: 2rem;
-    min-width: 2rem;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -105,7 +104,7 @@ const class_ = computed(() => {
     }
 
     .yuno-list-group-item-content {
-      color: $black;
+      // color: $black;
     }
   }
 

app/src/helpers/yunohostArguments.ts

@@ -20,6 +20,7 @@ export const DEFAULT_STATUS_ICON = {
   info: 'info',
   light: null,
   dark: null,
+  best: null,
 }
 
 // FORMAT FROM CORE