feat: add YListItem to display common list fields

app/src/components/globals/YListItem.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    label: string
+    sublabel?: string
+    description?: string
+  }>(),
+  {
+    sublabel: undefined,
+  },
+)
+
+const slots = defineSlots<{
+  default?: any
+}>()
+</script>
+
+<template>
+  <BListGroupItem
+    class="d-flex justify-content-between align-items-center pe-0"
+  >
+    <div>
+      <h5>
+        <strong class="fw-bold">{{ label }}</strong>
+        <small v-if="sublabel" class="ms-1 text-secondary">
+          {{ sublabel }}
+        </small>
+      </h5>
+      <p v-if="description || slots.default" class="m-0">
+        <slot name="default">
+          {{ description }}
+        </slot>
+      </p>
+    </div>
+
+    <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
+  </BListGroupItem>
+</template>
+
+<style lang="scss" scoped></style>

app/src/views/app/AppList.vue

@@ -34,24 +34,14 @@ const [search, filteredApps] = useSearch(apps, (s, app) =>
     </template>
 
     <BListGroup>
-      <BListGroupItem
+      <YListItem
         v-for="{ id, description, label } in filteredApps"
         :key="id"
         :to="{ name: 'app-info', params: { id } }"
-        class="d-flex justify-content-between align-items-center pe-0"
+        :label="label"
-      >
+        :sublabel="id"
-        <div>
+        :description="description"
-          <h5>
+      />
-            <strong class="me-1 fw-bold">{{ label }}</strong>
-            <small class="text-secondary">{{ id }}</small>
-          </h5>
-          <p class="m-0">
-            {{ description }}
-          </p>
-        </div>
-
-        <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
-      </BListGroupItem>
     </BListGroup>
   </ViewSearch>
 </template>

app/src/views/backup/BackupInfo.vue

@@ -168,9 +168,9 @@ function downloadBackup() {
             class="d-flex justify-content-between align-items-center pe-0"
           >
             <div class="me-2">
-              <h5 class="fw-bold">
+              <h5>
-                {{ item.name }}
+                <span class="fw-bold">{{ item.name }}</span>
-                <small v-if="item.size" class="text-secondary">
+                <small v-if="item.size" class="ms-1 text-secondary">
                   ({{ humanSize(item.size) }})
                 </small>
               </h5>
@@ -189,9 +189,9 @@ function downloadBackup() {
             class="d-flex justify-content-between align-items-center pe-0"
           >
             <div class="me-2">
-              <h5 class="fw-bold">
+              <h5>
-                {{ item.name }}
+                <span  class="fw-bold">{{ item.name }}</span>
-                <small class="text-secondary">
+                <small class="ms-1 text-secondary">
                   {{ appName }} ({{ humanSize(item.size) }})
                 </small>
               </h5>

app/src/views/backup/BackupList.vue

@@ -38,26 +38,15 @@ const archives = await api
     </YAlert>
 
     <BListGroup v-else>
-      <BListGroupItem
+      <YListItem
         v-for="{ name, created_at, path, size } in archives"
         :key="name"
         :to="{ name: 'backup-info', params: { name, id } }"
         :title="readableDate(created_at)"
-        class="d-flex justify-content-between align-items-center pe-0"
+        :label="distanceToNow(created_at)"
-      >
+        :sublabel="`${name} (${humanSize(size)})`"
-        <div>
+        :description="path"
-          <h5 class="fw-bold">
+      />
-            {{ distanceToNow(created_at) }}
-            <small class="text-secondary"
-              >{{ name }} ({{ humanSize(size) }})</small
-            >
-          </h5>
-          <p class="mb-0">
-            {{ path }}
-          </p>
-        </div>
-        <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
-      </BListGroupItem>
     </BListGroup>
   </div>
 </template>

app/src/views/service/ServiceList.vue

@@ -39,7 +39,7 @@ const [search, filteredServices] = useSearch(services, (s, service) => {
     items-name="services"
   >
     <BListGroup>
-      <BListGroupItem
+      <YListItem
         v-for="{
           name,
           description,
@@ -48,27 +48,15 @@ const [search, filteredServices] = useSearch(services, (s, service) => {
         } in filteredServices"
         :key="name"
         :to="{ name: 'service-info', params: { name } }"
-        class="d-flex justify-content-between align-items-center pe-0"
+        :label="name"
-      >
+        :sublabel="description"
-        <div>
-          <h5>
-            <span class="fw-bold me-1">{{ name }}</span>
-            <small class="text-secondary">{{ description }}</small>
-          </h5>
-          <p class="m-0">
-            <!-- FIXME +`-emphasis`? + rework emphasis color or text colors -->
-            <span
-              :class="`text-${status === 'running' ? 'success' : 'danger'}`"
       >
+        <span :class="`text-${status === 'running' ? 'success' : 'danger'}`">
           <YIcon :iname="status === 'running' ? 'check-circle' : 'times'" />
           {{ $t(status) }}
         </span>
         {{ $t('since') }} {{ last_state_change }}
-          </p>
+      </YListItem>
-        </div>
-
-        <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
-      </BListGroupItem>
     </BListGroup>
   </ViewSearch>
 </template>

app/src/views/user/UserList.vue

@@ -49,23 +49,14 @@ function downloadExport() {
     </template>
 
     <BListGroup>
-      <BListGroupItem
+      <YListItem
         v-for="user in filteredUsers"
         :key="user.username"
         :to="{ name: 'user-info', params: { name: user.username } }"
-        class="d-flex justify-content-between align-items-center pe-0"
+        :label="user.username"
-      >
+        :sublabel="user.fullname"
-        <div>
+        :description="user.mail"
-          <h5 class="fw-bold">
+      />
-            {{ user.username }}
-            <small class="text-secondary">{{ user.fullname }}</small>
-          </h5>
-          <p class="m-0">
-            {{ user.mail }}
-          </p>
-        </div>
-        <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
-      </BListGroupItem>
     </BListGroup>
   </ViewSearch>
 </template>