backups: fix display of preserved and label

dashboard/src/components/app/Backups.vue

@@ -25,27 +25,25 @@ const tasksModel = TasksModel.create();
 const props = defineProps([ 'app' ]);
 
 const columns = ref({
-  preserveSecs: {
-    label: '',
-    icon: 'fa-solid fa-archive',
-    width: '40px',
-    sort: true
-  },
-  packageVersion: {
-    label: t('main.table.version'),
-    sort: true,
+  creationTime: {
+    label: t('main.table.created'),
+    sort(a, b) {
+      return new Date(a) - new Date(b);
+    }
   },
   site: {
     label: t('backup.target.label'),
-    sort: true,
+    sort(a, b) {
+      return b.name <= a.name ? 1 : -1;
+    },
   },
   size: {
     label: t('backup.target.size'),
     sort: true,
     hideMobile: true,
   },
-  creationTime: {
-    label: t('app.backups.backups.time'),
+  packageVersion: {
+    label: t('main.table.version'),
     sort: true,
   },
   actions: {
@@ -392,11 +390,12 @@ onMounted(async () => {
     <br/>
 
     <TableView :model="backups" :columns="columns" :busy="busy" :placeholder="$t('backups.listing.noBackups')" style="max-height: 400px;" >
-      <template #preserveSecs="backup">
-        <Icon icon="fa-solid fa-archive" v-show="backup.preserveSecs === -1" />
-      </template>
       <template #creationTime="backup">
-        {{ prettyLongDate(backup.creationTime) }} <b v-show="backup.label">({{ backup.label }})</b>
+        <div>
+          {{ prettyLongDate(backup.creationTime) }}
+          <span v-if="backup.preserveSecs === -1" class="text-muted"> Preserved</span>
+          <div v-if="backup.label"><b>{{ backup.label }}</b></div>
+        </div>
       </template>
       <template #site="backup">
         {{ backup.site.name }}