refactor: use YAlert everywhere

app/src/components/globals/CardForm.vue

@@ -194,14 +194,15 @@ const Fields = createReusableTemplate<{
         </slot>
 
         <slot name="server-error">
-          <BAlert
+          <YAlert
+            v-if="globalErrorFeedback !== ''"
+            alert
             variant="danger"
             class="my-3"
             icon="ban"
-            :model-value="globalErrorFeedback !== ''"
           >
             <div v-html="globalErrorFeedback" />
-          </BAlert>
+          </YAlert>
         </slot>
       </BForm>
 

app/src/components/globals/ViewSearch.vue

@@ -73,12 +73,14 @@ const noItemsMessage = computed(() => {
     <slot name="top" />
 
     <slot name="forced-default">
-      <BAlert v-if="noItemsMessage" :model-value="true" variant="warning">
+      <YAlert
-        <slot name="alert-message">
+        v-if="noItemsMessage"
-          <YIcon iname="exclamation-triangle" />
+        alert
-          {{ noItemsMessage }}
+        icon="exclamation-triangle"
-        </slot>
+        variant="warning"
-      </BAlert>
+      >
+        {{ noItemsMessage }}
+      </YAlert>
       <slot v-else name="default" />
     </slot>
 

app/src/components/globals/YAlert.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ColorVariant } from 'bootstrap-vue-next'
+import { BAlert } from 'bootstrap-vue-next'
 import { computed } from 'vue'
 
 import { DEFAULT_VARIANT_ICON } from '@/helpers/yunohostArguments'
@@ -7,13 +8,13 @@ import { DEFAULT_VARIANT_ICON } from '@/helpers/yunohostArguments'
 const props = withDefaults(
   defineProps<{
     alert?: boolean
-    variant?: ColorVariant
     icon?: string
+    variant?: ColorVariant
   }>(),
   {
     alert: false,
-    variant: 'info',
     icon: undefined,
+    variant: 'info' as const,
   },
 )
 
@@ -24,10 +25,9 @@ const icon = computed(() => {
 
 <template>
   <Component
-    v-bind="$attrs"
+    :is="alert ? BAlert : 'div'"
-    :is="alert ? 'BAlert' : 'div'"
+    :model-value="alert ? true : undefined"
-    :modelValue="alert ? true : null"
+    :variant="alert ? variant : undefined"
-    :variant="alert ? variant : null"
     :class="{ ['alert alert-' + variant]: !alert }"
     class="yuno-alert d-flex flex-column flex-md-row align-items-center"
   >

app/src/components/globals/formItems/ReadOnlyAlertItem.vue

@@ -10,6 +10,7 @@ const props = withDefaults(defineProps<ReadOnlyAlertItemProps>(), {
 })
 
 const icon = computed(() => {
+  // TODO merge with `DEFAULT_VARIANT_ICON`
   const icons = {
     success: 'thumbs-up',
     info: 'info',
@@ -22,14 +23,8 @@ const icon = computed(() => {
 </script>
 
 <template>
-  <BAlert
+  <!-- TODO ally: do we set it as a true alert or is it cosmetic? -->
-    :id="id"
+  <YAlert :id="id" alert :icon="icon" :variant="type">
-    :model-value="true"
-    :variant="type"
-    class="d-flex flex-column flex-md-row align-items-center"
-  >
-    <YIcon :iname="icon" :variant="type" class="me-md-3 mb-md-0 mb-2" />
-
     <VueShowdown :markdown="label" tag="span" class="markdown" />
-  </BAlert>
+  </YAlert>
 </template>

app/src/views/app/AppInstall.vue

@@ -265,10 +265,14 @@ const performInstall = onSubmit(async (onError) => {
 
     <!-- FIXME hum not handled, is it still a thing? -->
     <!-- In case of a custom url with no manifest found -->
-    <BAlert :modelValue="app === null" variant="warning">
+    <YAlert
-      <YIcon iname="exclamation-triangle" />
+      v-if="app === null"
+      alert
+      icon="exclamation-triangle"
+      variant="warning"
+    >
       {{ $t('app_install_custom_no_manifest') }}
-    </BAlert>
+    </YAlert>
   </div>
 </template>
 

app/src/views/backup/BackupInfo.vue

@@ -203,9 +203,9 @@ function downloadBackup() {
         </BListGroup>
 
         <BFormInvalidFeedback id="backup-restore-feedback" :state="isValid">
-          <BAlert :modelValue="true" variant="danger" class="mb-0">
+          <YAlert alert variant="danger" class="mb-0">
             {{ serverError }}
-          </BAlert>
+          </YAlert>
         </BFormInvalidFeedback>
       </BFormCheckboxGroup>
 

app/src/views/backup/BackupList.vue

@@ -28,10 +28,14 @@ const archives = await api
       }"
     />
 
-    <BAlert v-if="!archives.length" :model-value="true" variant="warning">
+    <YAlert
-      <YIcon iname="exclamation-triangle" />
+      v-if="!archives.length"
+      alert
+      icon="exclamation-triangle"
+      variant="warning"
+    >
       {{ $t('items_verbose_count', { items: $t('items.backups', 0) }, 0) }}
-    </BAlert>
+    </YAlert>
 
     <BListGroup v-else>
       <BListGroupItem