Use ActionBar in remaining lists

dashboard/src/views/AppArchiveView.vue

@@ -5,10 +5,11 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { Button, Menu, TableView, InputDialog } from '@cloudron/pankow';
+import { TableView, InputDialog } from '@cloudron/pankow';
 import { prettyLongDate } from '@cloudron/pankow/utils';
 import { API_ORIGIN } from '../constants.js';
 import AppRestoreDialog from  '../components/AppRestoreDialog.vue';
+import ActionBar from  '../components/ActionBar.vue';
 import Section from  '../components/Section.vue';
 import ArchivesModel from '../models/ArchivesModel.js';
 import { download } from '../utils.js';
@@ -36,12 +37,11 @@ const columns = {
   actions: {}
 };
 
-const actionMenuModel = ref([]);
-const actionMenuElement = useTemplateRef('actionMenuElement');
-function onActionMenu(archive, event) {
-  actionMenuModel.value = [{
+function createActionMenu(archive) {
+  return [{
     icon: 'fa-solid fa-history',
     label: t('backups.restoreArchiveDialog.restoreAction'),
+    quickAction: true,
     action: onRestore.bind(null, archive),
   }, {
     separator: true,
@@ -56,8 +56,6 @@ function onActionMenu(archive, event) {
     label: t('main.action.remove'),
     action: onRemove.bind(null, archive),
   }];
-
-  actionMenuElement.value.open(event, event.currentTarget);
 }
 
 const busy = ref(true);
@@ -117,8 +115,6 @@ onMounted(async () => {
 
 <template>
   <div class="content">
-    <Menu ref="actionMenuElement" :model="actionMenuModel" />
-
     <Section :title="$t('backups.archives.title')">
       <InputDialog ref="inputDialog"/>
       <AppRestoreDialog ref="restoreDialog"/>
@@ -138,9 +134,7 @@ onMounted(async () => {
         <template #creationTime="archive">{{ prettyLongDate(archive.creationTime) }}</template>
 
         <template #actions="archive">
-          <div style="text-align: right;">
-            <Button tool plain secondary @click.capture="onActionMenu(archive, $event)" icon="fa-solid fa-ellipsis" />
-          </div>
+          <ActionBar :actions="createActionMenu(archive)"/>
         </template>
       </TableView>
     </Section>