Use ActionBar in apps list

dashboard/src/views/AppsView.vue

@@ -5,8 +5,9 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, computed, useTemplateRef, onActivated, onDeactivated, inject } from 'vue';
-import { Button, Menu, SingleSelect, Icon, TableView, TextInput, ProgressBar } from '@cloudron/pankow';
+import { Button, SingleSelect, Icon, TableView, TextInput, ProgressBar } from '@cloudron/pankow';
 import { API_ORIGIN, APP_TYPES, HSTATES, ISTATES, RSTATES } from '../constants.js';
+import ActionBar from '../components/ActionBar.vue';
 import AppsModel from '../models/AppsModel.js';
 import ApplinksModel from '../models/ApplinksModel.js';
 import DomainsModel from '../models/DomainsModel.js';
@@ -95,20 +96,26 @@ const listColumns = {
     },
   },
   checklist: {},
-  actions: {}
+  actions: {
+    width: '100px',
+  }
 };
 
-const actionMenuModel = ref([]);
-const actionMenuElement = useTemplateRef('actionMenuElement');
-function onActionMenu(app, event) {
-  actionMenuModel.value = [{
+function createAppActionMenu(app) {
+  return [{
     icon: 'fa-solid fa-arrow-up',
     label: t('app.updateAvailableTooltip'),
     visible: !!app.updateInfo,
     href: `#/app/${app.id}/updates`,
+  }, {
+    icon: 'fa-solid fa-cog',
+    label: t('app.configureTooltip'),
+    href: `#/app/${app.id}/info`,
+    quickAction: true,
+    visible: isOperator(app),
   }, {
     separator: true,
-    visible: !!app.updateInfo,
+    visible: isOperator(app) || !!app.updateInfo,
   }, {
     icon: 'fa-solid fa-align-left',
     label: t('app.logsActionTooltip'),
@@ -128,8 +135,16 @@ function onActionMenu(app, event) {
     target: '_blank',
     href: '/filemanager.html#/home/app/' + app.id,
   }];
+}
 
-  actionMenuElement.value.open(event, event.currentTarget);
+function createAppLinkActionMenu(app) {
+  return [{
+    icon: 'fa-solid fa-cog',
+    label: t('app.configureTooltip'),
+    quickAction: true,
+    visible: isOperator(app),
+    action: openAppEdit.bind(null, app),
+  }];
 }
 
 const filteredApps = computed(() => {
@@ -301,7 +316,6 @@ onDeactivated(() => {
 
 <template>
   <div ref="view" class="content-large">
-    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <ApplinkDialog ref="applinkDialog" @success="refreshApps"/>
     <PostInstallDialog ref="postInstallDialog"/>
 
@@ -381,11 +395,8 @@ onDeactivated(() => {
             </div>
           </template>
           <template #actions="app">
-            <div style="text-align: right;">
-              <!-- TODO v-tooltip="$t('app.configureTooltip')" but needs pankow fix -->
-              <Button class="action-button" tool plain secondary @click="openAppEdit(app, $event)"  :href="`#/app/${app.id}/info`" icon="fa-solid fa-cog" />
-              <Button tool plain secondary @click.capture="onActionMenu(app, $event)" icon="fa-solid fa-ellipsis" />
-            </div>
+            <ActionBar v-if="app.type === APP_TYPES.LINK" :actions="createAppLinkActionMenu(app)" />
+            <ActionBar v-else :actions="createAppActionMenu(app)" />
           </template>
         </TableView>
       </div>