filemanager: Always show app or volume name

frontend/src/views/Home.vue

@@ -95,6 +95,10 @@
           />
         </div>
         <div class="main-view-col" style="max-width: 300px;">
+          <div class="title-bar">
+            <a v-show="appLink" :href="appLink" target="_blank">{{ title }}</a>
+            <span v-show="!appLink">{{ title }}</span>
+          </div>
           <PreviewPanel :item="activeItem || activeDirectoryItem" :fallback-icon="fallbackIcon"/>
         </div>
       </div>
@@ -180,6 +184,7 @@ export default {
       accessToken: localStorage.token,
       apiOrigin: API_ORIGIN || '',
       title: 'Cloudron',
+      appLink: '',
       resourceType: '',
       resourceId: '',
       visible: true,
@@ -427,7 +432,7 @@ export default {
       this.items = await this.directoryModel.listFiles(this.cwd);
 
       const tmp = this.cwd.split('/').slice(1);
-      let name = this.title;
+      let name = '';
       if (tmp.length >= 1 && tmp[tmp.length-1]) name = tmp[tmp.length-1];
 
       this.activeDirectoryItem = {
@@ -506,6 +511,7 @@ export default {
         label: 'git'
       }];
 
+      this.appLink = `https://${result.body.fqdn}`;
       this.title = `${result.body.label || result.body.fqdn} (${result.body.manifest.title})`;
     } else if (type === 'volume') {
       let error, result;
@@ -587,6 +593,22 @@ export default {
   padding: 0 10px
 }
 
+.title-bar {
+  text-align: center;
+  font-size: 20px;
+  margin-bottom: 20px;
+  color: #607d8b;
+}
+
+.title-bar > a {
+  color: #607d8b;
+}
+
+.title-bar > a:hover {
+  color: black;
+  text-decoration: none;
+}
+
 .main-view-col {
   overflow: auto;
   flex-grow: 1;