From b0ef9238ffb1c050e2343a5a3a606c1a403ccd0a Mon Sep 17 00:00:00 2001
From: Girish Ramakrishnan <girish@cloudron.io>
Date: Sat, 14 Feb 2026 18:31:06 +0100
Subject: [PATCH] Show proper title/description for the new start/stop section

---
 dashboard/src/components/app/Uninstall.vue | 18 ++++++++++++------
 dashboard/src/views/AppConfigureView.vue   | 14 +++++++++++++-
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/dashboard/src/components/app/Uninstall.vue b/dashboard/src/components/app/Uninstall.vue
index 558ce325f..3fd093a11 100644
--- a/dashboard/src/components/app/Uninstall.vue
+++ b/dashboard/src/components/app/Uninstall.vue
@@ -7,7 +7,7 @@ const t = i18n.t;
 import { ref, onMounted, useTemplateRef } from 'vue';
 import { Button, InputDialog, Spinner } from '@cloudron/pankow';
 import { prettyLongDate } from '@cloudron/pankow/utils';
-import { APP_TYPES, RSTATES } from '../../constants.js';
+import { APP_TYPES, RSTATES, ISTATES } from '../../constants.js';
 import AppsModel from '../../models/AppsModel.js';
 
 const appsModel = AppsModel.create();
@@ -116,12 +116,18 @@ onMounted(async () => {
   <div>
     <InputDialog ref="inputDialog" />
 
-    <div v-if="app.type !== APP_TYPES.PROXIED">
-      <div>{{ $t('app.uninstall.startStop.description') }}</div>
+    <div v-if="app.type !== APP_TYPES.PROXIED && targetRunState() === TARGET_RUN_STATE.START">
+      <label>{{ $t('app.start.title') }}</label>
+      <div v-html="$t('app.start.description')"></div>
       <br/>
-      <Button v-if="!app.progress && targetRunState() === TARGET_RUN_STATE.START" primary :loading="toggleRunStateBusy" :disabled="toggleRunStateBusy" @click="onStartApp()">{{ $t('app.uninstall.startStop.startAction') }}</Button>
-      <Button v-else-if="!app.progress" primary :loading="toggleRunStateBusy" :disabled="toggleRunStateBusy" @click="onStopApp()">{{ $t('app.uninstall.startStop.stopAction') }}</Button>
-      <Spinner v-else />
+      <Button primary :loading="toggleRunStateBusy" :disabled="toggleRunStateBusy" @click="onStartApp()">{{ $t('app.start.action') }}</Button>
+    </div>
+
+    <div v-if="app.type !== APP_TYPES.PROXIED && targetRunState() === TARGET_RUN_STATE.STOP">
+      <label>{{ $t('app.stop.title') }}</label>
+      <div v-html="$t('app.stop.description')"></div>
+      <br/>
+      <Button primary :loading="toggleRunStateBusy" :disabled="toggleRunStateBusy" @click="onStopApp()">{{ $t('app.stop.action') }}</Button>
     </div>
 
     <hr style="margin-top: 20px"/>
diff --git a/dashboard/src/views/AppConfigureView.vue b/dashboard/src/views/AppConfigureView.vue
index 5529e8fdf..6e84a5f0e 100644
--- a/dashboard/src/views/AppConfigureView.vue
+++ b/dashboard/src/views/AppConfigureView.vue
@@ -228,6 +228,17 @@ async function onRestartApp() {
   busyRestart.value = false;
 }
 
+const busyStart = ref(false);
+
+async function onStartApp() {
+  busyStart.value = true;
+
+  const [error] = await appsModel.start(id.value);
+  if (error) return console.error(error);
+
+  setTimeout(() => busyStart.value = false, 3000);
+}
+
 onMounted(async () => {
   const tmp = window.location.hash.slice('#/app/'.length);
   if (!tmp) return;
@@ -306,7 +317,8 @@ onBeforeUnmount(() => {
           <Button v-if="app.taskId" danger tool plain icon="fa-solid fa-xmark" v-tooltip="'Cancel Task'" :loading="busyStopTask" :disabled="busyStopTask" @click="onStopAppTask()"/>
           <Button :menu="views" secondary class="pankow-no-desktop" tool>{{ views.find(v => v.id === currentView).label }}</Button>
 
-          <Button v-if="!app.progress" secondary tool icon="fa-solid fa-arrows-rotate" :loading="busyRestart" :disabled="busyRestart" v-tooltip="$t('filemanager.toolbar.restartApp')" @click="onRestartApp()"/>
+          <Button v-if="!app.progress && app.runState !== RSTATES.STOPPED" secondary tool icon="fa-solid fa-arrows-rotate" :loading="busyRestart" :disabled="busyRestart" v-tooltip="$t('filemanager.toolbar.restartApp')" @click="onRestartApp()"/>
+          <Button v-if="!app.progress && app.runState === RSTATES.STOPPED" secondary tool icon="fa-solid fa-circle-play" :loading="busyStart" :disabled="busyStart" v-tooltip="$t('app.start.action')" @click="onStartApp()"/>
 
           <ButtonGroup>
             <Button secondary tool :href="`/logs.html?appId=${app.id}`" target="_blank" v-tooltip="$t('app.logsActionTooltip')" icon="fa-solid fa-align-left" />