Show app state in app configure view

dashboard/src/views/AppConfigureView.vue

@@ -19,6 +19,7 @@ import AppsModel from '../models/AppsModel.js';
 import { APP_TYPES, ISTATES, RSTATES, HSTATES } from '../constants.js';
 
 const appsModel = AppsModel.create();
+const installationStateLabel = AppsModel.installationStateLabel;
 
 const id = ref('');
 const app = ref({});
@@ -130,8 +131,13 @@ onBeforeUnmount(() => {
     <div class="configure-inner">
       <div class="titlebar">
         <a class="applink" :href="link || null" target="_blank">
-          <img :src="API_ORIGIN + app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'" style="width: 64px; margin-right: 10px;"/>
-          <h2>{{ app.label || app.fqdn }}</h2>
+          <img :src="API_ORIGIN + app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'" style="height: 64px; width: 64px; margin-right: 10px;"/>
+          <h2>
+            {{ app.label || app.fqdn }}<br/>
+            <div class="statelable">
+              {{ installationStateLabel(app) }} {{ app.message ? ' - ' + app.message : '' }}
+            </div>
+          </h2>
         </a>
 
         <div style="display: flex; gap: 10px; align-items: center;">
@@ -200,9 +206,20 @@ onBeforeUnmount(() => {
 
 .applink {
   display: flex;
+  align-items: center;
   color: var(--pankow-text-color);
 }
 
+.titlebar h2 {
+  padding: 0;
+  margin: 0;
+}
+
+.statelabel {
+  font-size: 12px;
+  margin-top: 6px;
+}
+
 .applink:not([href]) {
   cursor: not-allowed;
 }