feat(ui): enhance snapshot display with recent tag and total bytes

Author: stephdl

core/ui/src/components/backup/RestoreSingleInstanceSnapshotSelector.vue

@@ -36,11 +36,18 @@
         @click="deselectOtherSnapshots(snapshot)"
         class="snapshot-tile"
       >
-        <div>
-          {{ formatSnapshotTimestamp(snapshot.timestamp) }}
+        <div class="snapshot-header">
+          <span>{{ formatSnapshotTimestamp(snapshot.timestamp) }}</span>
+          <cv-tag
+            v-if="index == 0"
+            kind="blue"
+            :label="$t('backup.most_recent')"
+            size="sm"
+            class="no-margin"
+          ></cv-tag>
         </div>
-        <div v-if="index == 0" class="secondary-row">
-          {{ $t("backup.most_recent") }}
+        <div class="secondary-row">
+          {{ snapshot.total_bytes | byteFormat }}
         </div>
       </NsTile>
       <infinite-loading
@@ -166,6 +173,12 @@ export default {
   margin-bottom: $spacing-03;
 }
 
+.snapshot-header {
+  display: flex;
+  align-items: center;
+  gap: $spacing-03;
+}
+
 .secondary-row {
   margin-top: $spacing-02;
   color: $ui-04;