From fa22d11beeb316f4f4c07fbf0b685a74ad6b98c3 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 17:10:08 +0200
Subject: [PATCH] refactor: update MessageListGroup to new requests messages

---
 app/overrides.d.ts                            |  6 ++
 app/src/components/MessageListGroup.vue       | 59 ++++++++++---------
 app/src/components/globals/YListGroupItem.vue |  5 +-
 app/src/helpers/yunohostArguments.ts          |  1 +
 4 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/app/overrides.d.ts b/app/overrides.d.ts
index 4287f72e..a730147d 100644
--- a/app/overrides.d.ts
+++ b/app/overrides.d.ts
@@ -15,3 +15,9 @@ declare module 'vue-router' {
     breadcrumb?: string[]
   }
 }
+
+declare module 'bootstrap-vue-next' {
+  interface BaseColorVariant {
+    best: unknown
+  }
+}
diff --git a/app/src/components/MessageListGroup.vue b/app/src/components/MessageListGroup.vue
index 98355c97..6e49d278 100644
--- a/app/src/components/MessageListGroup.vue
+++ b/app/src/components/MessageListGroup.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { BListGroup, ColorVariant } from 'bootstrap-vue-next'
-import { computed, nextTick, watch, ref } from 'vue'
+import { watchThrottled } from '@vueuse/core'
+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) {
-  watch(() => props.messages, scrollToEnd, { deep: true })
-}
+const auto = ref(props.autoScroll)
+const reducedMessages = ref<RequestMessage[]>([...props.messages])
 
-const reducedMessages = computed(() => {
-  const len = props.messages.length
-  if (!props.limit || len <= props.limit) {
-    return props.messages
-  }
-  return props.messages.slice(len - props.limit)
-})
+watchThrottled(
+  () => props.messages,
+  (messages) => {
+    const len = messages.length
+    if (!props.limit || len <= props.limit) {
+      reducedMessages.value = [...messages]
+    } else {
+      reducedMessages.value = messages.slice(len - props.limit)
+    }
+    if (auto.value) nextTick(scrollToEnd)
+  },
+  { throttle: 300, deep: true },
+)
 
 function scrollToEnd() {
-  if (!auto.value) return
-  nextTick(() => {
-    rootElem.value!.$el.scrollTo(
-      0,
-      rootElem.value!.$el.lastElementChild.offsetTop,
-    )
-  })
+  const elem = rootElem.value?.$el
+  elem?.scrollTo(0, elem.lastElementChild.offsetTop)
 }
 
-function onScroll(e: Event) {
-  const target = e.target as HTMLElement
-  auto.value = target.scrollHeight === target.scrollTop + target.clientHeight
+function onScroll() {
+  if (!props.autoScroll) return
+  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" />
diff --git a/app/src/components/globals/YListGroupItem.vue b/app/src/components/globals/YListGroupItem.vue
index 73f8c080..b0d5e809 100644
--- a/app/src/components/globals/YListGroupItem.vue
+++ b/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;
     }
   }
 
diff --git a/app/src/helpers/yunohostArguments.ts b/app/src/helpers/yunohostArguments.ts
index 0dad0202..dae9ad90 100644
--- a/app/src/helpers/yunohostArguments.ts
+++ b/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