Use ActionBar in remaining lists

dashboard/src/components/SystemBackupList.vue

@@ -5,9 +5,10 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { Button, Menu, FormGroup, TextInput, Checkbox, TableView, Dialog } from '@cloudron/pankow';
+import { Button, FormGroup, TextInput, Checkbox, TableView, Dialog } from '@cloudron/pankow';
 import { prettyLongDate, prettyFileSize } from '@cloudron/pankow/utils';
 import { TASK_TYPES } from '../constants.js';
+import ActionBar from  '../components/ActionBar.vue';
 import Section from  '../components/Section.vue';
 import BackupsModel from '../models/BackupsModel.js';
 import BackupSitesModel from '../models/BackupSitesModel.js';
@@ -56,10 +57,8 @@ const columns = {
   actions: {}
 };
 
-const actionMenuModel = ref([]);
-const actionMenuElement = useTemplateRef('actionMenuElement');
-function onActionMenu(backup, event) {
-  actionMenuModel.value = [{
+function createActionMenu(backup) {
+  return [{
     icon: 'fa-solid fa-circle-info',
     label: t('backups.archives.info'),
     action: onInfo.bind(null, backup),
@@ -72,8 +71,6 @@ function onActionMenu(backup, event) {
     label: t('backups.listing.tooltipDownloadBackupConfig'),
     action: onDownloadConfig.bind(null, backup),
   }];
-
-  actionMenuElement.value.open(event, event.currentTarget);
 }
 
 const busy = ref(true);
@@ -243,8 +240,6 @@ defineExpose({ refresh });
 
 <template>
   <Section :title="$t('backups.listing.title')">
-    <Menu ref="actionMenuElement" :model="actionMenuModel" />
-
     <BackupInfoDialog ref="infoDialog" />
 
     <Dialog ref="editDialog"
@@ -294,9 +289,7 @@ defineExpose({ refresh });
       <template #site="backup">{{ backup.site.name }}</template>
 
       <template #actions="backup">
-        <div style="text-align: right;">
-          <Button tool plain secondary @click.capture="onActionMenu(backup, $event)" icon="fa-solid fa-ellipsis" />
-        </div>
+        <ActionBar :actions="createActionMenu(backup)"/>
       </template>
     </TableView>
   </Section>