Move most all table views to new action menu pattern

dashboard/src/components/PrivateRegistry.vue

@@ -5,7 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef, inject } from 'vue';
-import { Button, TableView, InputDialog } from '@cloudron/pankow';
+import { Button, Menu, TableView, InputDialog } from '@cloudron/pankow';
 import Section from '../components/Section.vue';
 import DockerRegistryDialog from '../components/DockerRegistryDialog.vue';
 import DockerRegistriesModel from '../models/DockerRegistriesModel.js';
@@ -26,6 +26,24 @@ const columns = {
   actions: {}
 };
 
+const actionMenuModel = ref([]);
+const actionMenuElement = useTemplateRef('actionMenuElement');
+function onActionMenu(registry, event) {
+  actionMenuModel.value = [{
+    icon: 'fa-solid fa-pencil-alt',
+    label: t('main.action.edit'),
+    action: onEditOrAdd.bind(null, registry),
+  }, {
+    separator: true,
+  }, {
+    icon: 'fa-solid fa-trash-alt',
+    label: t('main.action.remove'),
+    action: onRemove.bind(null, registry),
+  }];
+
+  actionMenuElement.value.open(event, event.currentTarget);
+}
+
 const features = inject('features');
 const subscriptionRequiredDialog = inject('subscriptionRequiredDialog');
 
@@ -67,6 +85,7 @@ onMounted(async () => {
 
 <template>
   <Section :title="$t('settings.privateDockerRegistry.title')" :title-badge="features.privateDockerRegistry ? 'Upgrade' : ''">
+    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
     <DockerRegistryDialog ref="dialog" @success="refresh()"/>
 
@@ -79,9 +98,8 @@ onMounted(async () => {
 
     <TableView :columns="columns" :model="registries">
       <template #actions="registry">
-        <div class="table-actions">
-          <Button small tool secondary @click="onEditOrAdd(registry)" icon="fa fa-pencil-alt" />
-          <Button small tool danger @click="onRemove(registry)" icon="far fa-trash-alt" />
+        <div style="text-align: right;">
+          <Button tool plain secondary @click.capture="onActionMenu(registry, $event)" icon="fa-solid fa-ellipsis" />
         </div>
       </template>
     </TableView>