Use ActionBar for domain listing

dashboard/src/views/DomainsView.vue

@@ -5,8 +5,9 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef, computed, inject } from 'vue';
-import { Button, TableView, TextInput, InputDialog, Menu } from '@cloudron/pankow';
+import { Button, TableView, TextInput, InputDialog } from '@cloudron/pankow';
 import Certificates from '../components/Certificates.vue';
+import ActionBar from '../components/ActionBar.vue';
 import SyncDns from '../components/SyncDns.vue';
 import DomainDialog from '../components/DomainDialog.vue';
 import DashboardDomain from '../components/DashboardDomain.vue';
@@ -72,17 +73,15 @@ const columns = ref({
     hideMobile: true,
   },
   actions: {
-    label: '',
-    sort: false
+    width: '100px',
   }
 });
 
-const actionMenuModel = ref([]);
-const actionMenuElement = useTemplateRef('actionMenuElement');
-function onActionMenu(domain, event) {
-  actionMenuModel.value = [{
+function createActionMenu(domain) {
+  return [{
     icon: 'fa-solid fa-pencil-alt',
     label: t('main.action.edit'),
+    quickAction: true,
     action: onEdit.bind(null, domain),
   },{
     separator: true,
@@ -98,8 +97,6 @@ function onActionMenu(domain, event) {
     disabled: domain.domain === dashboardDomain.value,
     action: onRemove.bind(null, domain),
   }];
-
-  actionMenuElement.value.open(event, event.currentTarget);
 }
 
 const filteredDomains = computed(() => {
@@ -134,7 +131,6 @@ onMounted(async () => {
 
 <template>
   <div class="content">
-    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
     <DomainDialog ref="domainDialog" @success="refreshDomains()"/>
     <WellKnownDialog ref="wellKnownDialog" @success="refreshDomains()"/>
@@ -159,9 +155,7 @@ onMounted(async () => {
           {{ DomainsModel.prettyProviderName(domain.provider) }}
         </template>
         <template #actions="domain">
-          <div style="text-align: right;">
-            <Button tool plain secondary @click.capture="onActionMenu(domain, $event)" icon="fa-solid fa-ellipsis" />
-          </div>
+          <ActionBar :actions="createActionMenu(domain)" />
         </template>
       </TableView>
     </Section>