Move app start/stop back to the main toolbar

dashboard/src/views/AppConfigureView.vue

@@ -151,6 +151,47 @@ function isViewEnabled(view, errorState) {
   return false;
 }
 
+const TARGET_RUN_STATE = {
+  START: Symbol('start'),
+  STOP: Symbol('stop'),
+};
+
+function targetRunState() {
+  // if we have an error, we want to retry the pending state, otherwise toggle the runstate
+  if (app.value.error) {
+    if (app.value.error.details.installationState === ISTATES.PENDING_START) return TARGET_RUN_STATE.START;
+    else return TARGET_RUN_STATE.STOP;
+  } else {
+    if (app.value.runState === RSTATES.STOPPED) return TARGET_RUN_STATE.START;
+    else return TARGET_RUN_STATE.STOP;
+  }
+}
+
+const toggleRunStateBusy = ref(false);
+async function onStartApp() {
+  toggleRunStateBusy.value = true;
+
+  const [error] = await appsModel.start(app.value.id);
+  if (error) {
+    toggleRunStateBusy.value = false;
+    return console.error(error);
+  }
+
+  setTimeout(() => toggleRunStateBusy.value = false, 3000);
+}
+
+async function onStopApp() {
+  toggleRunStateBusy.value = true;
+
+  const [error] = await appsModel.stop(app.value.id);
+  if (error) {
+    toggleRunStateBusy.value = false;
+    return console.error(error);
+  }
+
+  setTimeout(() => toggleRunStateBusy.value = false, 3000);
+}
+
 async function onStopAppTask() {
   if (!app.value.taskId) return;
 
@@ -261,6 +302,14 @@ onBeforeUnmount(() => {
         <div class="titlebar-toolbar">
           <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>
+
+          <!--
+          TODO check if this should be shown on stop confirmation
+      <div>{{ $t('app.uninstall.startStop.description') }}</div>
+          -->
+          <Button v-if="!app.progress && targetRunState() === TARGET_RUN_STATE.START" secondary plain tool icon="fa-solid fa-circle-play" :loading="toggleRunStateBusy" :disabled="toggleRunStateBusy" v-tooltip="$t('app.uninstall.startStop.startAction')" @click="onStartApp()"/>
+          <Button v-else-if="!app.progress" secondary plain tool icon="fa-solid fa-circle-stop" :loading="toggleRunStateBusy" :disabled="toggleRunStateBusy" v-tooltip="$t('app.uninstall.startStop.stopAction')" @click="onStopApp()"/>
+
           <ButtonGroup>
             <Button secondary tool :href="`/logs.html?appId=${app.id}`" target="_blank" v-tooltip="$t('app.logsActionTooltip')" icon="fa-solid fa-align-left" />
             <Button secondary tool v-if="app.type !== APP_TYPES.PROXIED" :href="`/terminal.html?id=${app.id}`" target="_blank" v-tooltip="$t('app.terminalActionTooltip')" icon="fa fa-terminal" />