From d153a734cbff2778c36da5db9b4e921000c3118c Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Wed, 26 Feb 2025 14:58:05 +0100
Subject: [PATCH] Fix spacing in Terminal view

---
 dashboard/src/components/Terminal.vue | 42 +++++++++++++++++----------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/dashboard/src/components/Terminal.vue b/dashboard/src/components/Terminal.vue
index 712bba9e3..55ea49ce6 100644
--- a/dashboard/src/components/Terminal.vue
+++ b/dashboard/src/components/Terminal.vue
@@ -1,12 +1,12 @@
 <script>
 
-import { fetcher, Button, Dialog, FileUploader, InputDialog, MainLayout, TopBar } from 'pankow';
+import { fetcher, Button, ButtonGroup, Dialog, FileUploader, InputDialog, MainLayout, TopBar } from 'pankow';
 
 import '@xterm/xterm/css/xterm.css';
 import { Terminal } from '@xterm/xterm';
 import { AttachAddon } from '@xterm/addon-attach';
 import { FitAddon } from '@xterm/addon-fit';
-
+import { ISTATES, RSTATES, HSTATES } from '../constants.js';
 import AppsModel from '../models/AppsModel.js';
 import { createDirectoryModel } from '../models/DirectoryModel.js';
 
@@ -16,6 +16,7 @@ export default {
   name: 'Terminal',
   components: {
     Button,
+    ButtonGroup,
     Dialog,
     FileUploader,
     InputDialog,
@@ -37,6 +38,7 @@ export default {
       schedulerMenuModel: [],
       id: '',
       name: '',
+      link: '',
       socket: null,
       terminal: null,
       downloadFileDownloadUrl: ''
@@ -234,6 +236,7 @@ export default {
     }
 
     this.name = `${app.label || app.fqdn} (${app.manifest.title})`;
+    this.link = (app.installationState !== ISTATES.INSTALLED || app.health !== HSTATES.HEALTHY || app.runState === RSTATES.STOPPED) ? '' : `https://${app.fqdn}`;
     this.addons = app.manifest.addons;
     this.manifestVersion = app.manifest.manifestVersion;
     this.showFilemanager = !!app.manifest.addons.localstorage;
@@ -287,25 +290,31 @@ export default {
     <template #header>
       <TopBar class="navbar">
         <template #left>
-          <span class="title">{{ name }}</span>
+          <a class="title" :href="link" target="_blank">{{ name }}</a>
         </template>
         <template #right>
-          <!-- Scheduler/cron tasks -->
-          <Button success :menu="schedulerMenuModel" v-show="usesAddon('scheduler')" @click="onSchedulerMenu">{{ $t('terminal.scheduler') }}</Button>
+          <ButtonGroup>
+            <!-- Scheduler/cron tasks -->
+            <Button success :menu="schedulerMenuModel" v-if="usesAddon('scheduler')" @click="onSchedulerMenu">{{ $t('terminal.scheduler') }}</Button>
 
-          <!-- addon actions -->
-          <Button success @click="terminalInject('mysql')" v-show="usesAddon('mysql')" :disabled="!connected">MySQL</Button>
-          <Button success @click="terminalInject('postgresql')" v-show="usesAddon('postgresql')" :disabled="!connected">Postgres</Button>
-          <Button success @click="terminalInject('mongodb')" v-show="usesAddon('mongodb')" :disabled="!connected">MongoDB</Button>
-          <Button success @click="terminalInject('redis')" v-show="usesAddon('redis')" :disabled="!connected">Redis</Button>
+            <!-- addon actions -->
+            <Button success @click="terminalInject('mysql')" v-if="usesAddon('mysql')" :disabled="!connected">MySQL</Button>
+            <Button success @click="terminalInject('postgresql')" v-if="usesAddon('postgresql')" :disabled="!connected">Postgres</Button>
+            <Button success @click="terminalInject('mongodb')" v-if="usesAddon('mongodb')" :disabled="!connected">MongoDB</Button>
+            <Button success @click="terminalInject('redis')" v-if="usesAddon('redis')" :disabled="!connected">Redis</Button>
+          </ButtonGroup>
 
-          <!-- upload/download actions -->
-          <Button style="margin-left: 20px;" :disabled="!connected" @click="onUpload" icon="fa-solid fa-upload">{{ $t('terminal.uploadTo', { path: '/app/data/' }) }}</Button>
-          <Button :disabled="!connected" @click="onDownload" icon="fa-solid fa-download">{{ $t('terminal.downloadAction') }}</Button>
+          <ButtonGroup>
+            <!-- upload/download actions -->
+            <Button style="margin-left: 20px;" :disabled="!connected" @click="onUpload" icon="fa-solid fa-upload">{{ $t('terminal.uploadTo', { path: '/app/data/' }) }}</Button>
+            <Button :disabled="!connected" @click="onDownload" icon="fa-solid fa-download">{{ $t('terminal.downloadAction') }}</Button>
+          </ButtonGroup>
 
-          <Button style="margin-left: 20px;" :title="$t('filemanager.toolbar.restartApp')" secondary tool :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp"/>
-          <Button v-show="showFilemanager" :href="'/filemanager.html#/home/app/' + id" target="_blank" secondary tool icon="fa-solid fa-folder" :title="$t('filemanager.title')" />
-          <Button :href="'/logs.html?appId=' + id" target="_blank" secondary tool icon="fa-solid fa-align-left" :title="$t('logs.title')" />
+          <ButtonGroup>
+            <Button style="margin-left: 20px;" :title="$t('filemanager.toolbar.restartApp')" secondary tool :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp"/>
+            <Button v-if="showFilemanager" :href="'/filemanager.html#/home/app/' + id" target="_blank" secondary tool icon="fa-solid fa-folder" :title="$t('filemanager.title')" />
+            <Button :href="'/logs.html?appId=' + id" target="_blank" secondary tool icon="fa-solid fa-align-left" :title="$t('logs.title')" />
+          </ButtonGroup>
         </template>
       </TopBar>
     </template>
@@ -331,6 +340,7 @@ body {
 
 .title {
   font-size: 20px;
+  color: var(--pankow-color-text);
 }
 
 .pankow-top-bar {