Remove all usage of old table action pattern

dashboard/src/views/BackupAppArchivesView.vue

@@ -5,9 +5,9 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { Button, ButtonGroup, TableView, InputDialog } from '@cloudron/pankow';
+import { Button, Menu, TableView, InputDialog } from '@cloudron/pankow';
 import { prettyLongDate } from '@cloudron/pankow/utils';
-import { API_ORIGIN, SECRET_PLACEHOLDER } from '../constants.js';
+import { API_ORIGIN } from '../constants.js';
 import AppRestoreDialog from  '../components/AppRestoreDialog.vue';
 import Section from  '../components/Section.vue';
 import ArchivesModel from '../models/ArchivesModel.js';
@@ -34,6 +34,26 @@ const columns = {
   actions: {}
 };
 
+const actionMenuModel = ref([]);
+const actionMenuElement = useTemplateRef('actionMenuElement');
+function onActionMenu(archive, event) {
+  actionMenuModel.value = [{
+    icon: 'fa-solid fa-history',
+    label: t('backups.restoreArchiveDialog.restoreAction'),
+    action: onRestore.bind(null, archive),
+  }, {
+    icon: 'fa-solid fa-file-alt',
+    label: t('backups.listing.tooltipDownloadBackupConfig'),
+    action: onDownloadConfig.bind(null, archive),
+  }, {
+    icon: 'fa-solid fa-trash-alt',
+    label: t('main.action.remove'),
+    action: onRemove.bind(null, archive),
+  }];
+
+  actionMenuElement.value.open(event, event.currentTarget);
+}
+
 const busy = ref(true);
 const archives = ref([]);
 
@@ -98,6 +118,8 @@ onMounted(async () => {
 
 <template>
   <div class="content">
+    <Menu ref="actionMenuElement" :model="actionMenuModel" />
+
     <Section :title="$t('backups.archives.title')">
       <InputDialog ref="inputDialog"/>
       <AppRestoreDialog ref="restoreDialog"/>
@@ -119,12 +141,8 @@ onMounted(async () => {
         <template #creationTime="archive">{{ prettyLongDate(archive.creationTime) }}</template>
 
         <template #actions="archive">
-          <div class="table-actions">
-            <ButtonGroup>
-              <Button tool secondary small icon="fa-solid fa-history" v-tooltip="'Restore from Archive'" @click.stop="onRestore(archive)"></Button>
-              <Button tool secondary small icon="fa-solid fa-file-alt" v-tooltip="$t('backups.listing.tooltipDownloadBackupConfig')" @click.stop="onDownloadConfig(archive)"></Button>
-            </ButtonGroup>
-            <Button tool danger small icon="fa-solid fa-trash-alt" v-tooltip="'Delete Archive'" @click.stop="onRemove(archive)"></Button>
+          <div style="text-align: right;">
+            <Button tool plain secondary @click.capture="onActionMenu(archive, $event)" icon="fa-solid fa-ellipsis" />
           </div>
         </template>
       </TableView>

dashboard/src/views/BackupListView.vue

@@ -74,7 +74,6 @@ function onActionMenu(backup, event) {
   actionMenuElement.value.open(event, event.currentTarget);
 }
 
-
 const busy = ref(true);
 const backups = ref([]);
 const taskLogsMenu = ref([]);