Use ActionBar in oidc clients list

dashboard/src/views/OpenIdView.vue

@@ -5,7 +5,8 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { Button, ClipboardButton, SingleSelect, Menu, Dialog, TableView, FormGroup, TextInput, InputGroup, InputDialog } from '@cloudron/pankow';
+import { Button, ClipboardButton, SingleSelect, Dialog, TableView, FormGroup, TextInput, InputGroup, InputDialog } from '@cloudron/pankow';
+import ActionBar from '../components/ActionBar.vue';
 import Section from '../components/Section.vue';
 import DashboardModel from '../models/DashboardModel.js';
 import UserDirectoryModel from '../models/UserDirectoryModel.js';
@@ -18,22 +19,18 @@ const columns = {
   actions: {}
 };
 
-const actionMenuModel = ref([]);
-const actionMenuElement = useTemplateRef('actionMenuElement');
-function onActionMenu(client, event) {
-  actionMenuModel.value = [{
+function createActionMenu(client) {
+  return [{
     icon: 'fa-solid fa-pencil-alt',
     label: t('main.action.edit'),
+    quickAction: true,
     action: onEdit.bind(null, client),
-  }, {
-    separator: true,
   }, {
     icon: 'fa-solid fa-trash-alt',
     label: t('main.action.remove'),
+    quickAction: true,
     action: onRemove.bind(null, client),
   }];
-
-  actionMenuElement.value.open(event, event.currentTarget);
 }
 
 const inputDialog = useTemplateRef('inputDialog');
@@ -154,7 +151,6 @@ onMounted(async () => {
 
 <template>
   <div class="content">
-    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
 
     <Dialog ref="newSetDialog"
@@ -251,9 +247,7 @@ onMounted(async () => {
 
       <TableView :columns="columns" :model="clients" :placeholder="$t('oidc.clients.empty')">
         <template #actions="client">
-          <div style="text-align: right;">
-            <Button tool plain secondary @click.capture="onActionMenu(client, $event)" icon="fa-solid fa-ellipsis" />
-          </div>
+          <ActionBar :actions="createActionMenu(client)"/>
         </template>
       </TableView>
     </Section>