Move backup sites view to ActionBar pattern

dashboard/src/views/BackupSitesView.vue

@@ -5,8 +5,9 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef, reactive, inject } from 'vue';
-import { Button, Menu, ProgressBar, InputDialog } from '@cloudron/pankow';
+import { Button, ProgressBar, InputDialog } from '@cloudron/pankow';
 import { prettyLongDate } from '@cloudron/pankow/utils';
+import ActionBar from '../components/ActionBar.vue';
 import Section from  '../components/Section.vue';
 import StateLED from  '../components/StateLED.vue';
 import BackupSiteScheduleDialog from  '../components/BackupSiteScheduleDialog.vue';
@@ -150,11 +151,8 @@ async function onStartCleanup(site) {
   setTimeout(waitForSiteTask.bind(null,site), 2000);
 }
 
-const actionMenuModel = ref([]);
-
-  const actionMenuElement = useTemplateRef('actionMenuElement');
-function onActionMenu(site, event) {
-  actionMenuModel.value = [{
+function createActionMenu(site) {
+  return [{
     icon: 'fa-solid fa-screwdriver-wrench',
     label: t('backups.configAction'),
     visible: profile.value.isAtLeastOwner,
@@ -176,6 +174,7 @@ function onActionMenu(site, event) {
     icon: 'fa-solid fa-plus',
     label: t('backups.listing.backupNow'),
     disabled: !!site.task?.active,
+    quickAction: true,
     action: onStartBackup.bind(null, site),
   }, {
     icon: 'fa-solid fa-broom',
@@ -186,6 +185,7 @@ function onActionMenu(site, event) {
     icon: 'fa-solid fa-sync-alt',
     label: t('backups.location.remount'),
     visible: site.provider === 'sshfs' || site.provider === 'cifs' || site.provider === 'nfs' || site.provider === 'ext4' || site.provider === 'xfs',
+    quickAction: true,
     action: onRemount.bind(null, site),
   }, {
     visible: profile.value.isAtLeastOwner,
@@ -196,8 +196,6 @@ function onActionMenu(site, event) {
     visible: profile.value.isAtLeastOwner,
     action: onRemoveSite.bind(null, site),
   }];
-
-  actionMenuElement.value.open(event, event.currentTarget);
 }
 
 async function waitForSiteTask(site) {
@@ -283,7 +281,6 @@ onMounted(async () => {
 
 <template>
   <div class="content">
-    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
     <BackupSiteAddDialog ref="backupSiteAddDialog" @success="refresh()"/>
     <BackupSiteContentDialog ref="backupSiteContentDialog" @success="refresh()"/>
@@ -305,7 +302,7 @@ onMounted(async () => {
           <div class="backup-site-details">
             <div style="margin-bottom: 5px; display: flex; justify-content: space-between; align-items: baseline;">
               <div><b style="font-size: 18px">{{ site.name }}</b></div>
-              <Button tool plain secondary @click.capture="onActionMenu(site, $event)" icon="fa-solid fa-ellipsis" />
+              <ActionBar :actions="createActionMenu(site)"/>
             </div>
 
             <div v-if="site.encrypted">