From f427d9f1c47ab038aa1e2e929d4229920ccee81b Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Mon, 5 Jan 2026 17:22:53 +0100
Subject: [PATCH] Use ActionBar in apps list

---
 dashboard/src/components/ActionBar.vue |  2 +-
 dashboard/src/views/AppsView.vue       | 39 +++++++++++++++++---------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/dashboard/src/components/ActionBar.vue b/dashboard/src/components/ActionBar.vue
index 6714f8d31..9da661a3a 100644
--- a/dashboard/src/components/ActionBar.vue
+++ b/dashboard/src/components/ActionBar.vue
@@ -25,7 +25,7 @@ function onMenu(event) {
   <div class="action-bar">
     <Menu ref="menuElement" :model="actions" />
     <ButtonGroup class="quick-action-group">
-      <Button tool secondary v-for="quickAction in quickActions" :key="quickAction" :icon="quickAction.icon" @click="quickAction.action()" v-tooltip.top="quickAction.label"/>
+      <Button tool secondary v-for="quickAction in quickActions" :key="quickAction" :icon="quickAction.icon" @click="quickAction.action()" :href="quickAction.href || null" v-tooltip.top="quickAction.label"/>
       <Button tool secondary @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="actions.length > 0 && actions.length !== quickActions.length"/>
     </ButtonGroup>
     <Button tool plain secondary @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="actions.length > 0 && actions.length !== quickActions.length" class="menu-action" />
diff --git a/dashboard/src/views/AppsView.vue b/dashboard/src/views/AppsView.vue
index e9c074fb1..28e65f8be 100644
--- a/dashboard/src/views/AppsView.vue
+++ b/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>