Use ActionBar in API tokens list

dashboard/src/components/ApiTokens.vue

@@ -6,9 +6,10 @@ const t = i18n.t;
 
 import moment from 'moment-timezone';
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { Button, Menu, ClipboardButton, Dialog, InputDialog, FormGroup, Radiobutton, TableView, TextInput, InputGroup } from '@cloudron/pankow';
+import { Button, ClipboardButton, Dialog, InputDialog, FormGroup, Radiobutton, TableView, TextInput, InputGroup } from '@cloudron/pankow';
 import { prettyLongDate } from '@cloudron/pankow/utils';
 import { TOKEN_TYPES } from '../constants.js';
+import ActionBar from './ActionBar.vue';
 import Section from './Section.vue';
 import TokensModel from '../models/TokensModel.js';
 
@@ -44,19 +45,15 @@ const columns = {
     hideMobile: true,
     sort: true
   },
-  actions: {}
+  actions: {},
 };
 
-const actionMenuModel = ref([]);
-const actionMenuElement = useTemplateRef('actionMenuElement');
-function onActionMenu(apiToken, event) {
-  actionMenuModel.value = [{
+function createActionMenu(apiToken) {
+  return [{
     icon: 'fa-solid fa-trash-alt',
     label: t('main.action.remove'),
     action: onRevokeToken.bind(null, apiToken),
   }];
-
-  actionMenuElement.value.open(event, event.currentTarget);
 }
 
 const form = useTemplateRef('form');
@@ -129,7 +126,6 @@ onMounted(async () => {
 
 <template>
   <div>
-    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
 
     <Dialog ref="newDialog"
@@ -200,9 +196,7 @@ onMounted(async () => {
           <span v-else>{{ '*' }}</span>
         </template>
         <template #actions="apiToken">
-          <div style="text-align: right;">
-            <Button tool plain secondary @click.capture="onActionMenu(apiToken, $event)" icon="fa-solid fa-ellipsis" />
-          </div>
+          <ActionBar :actions="createActionMenu(apiToken)" />
         </template>
       </TableView>
     </Section>