Have a fallback preview of the current folder

src/views/Home.vue

@@ -18,7 +18,7 @@
           <DirectoryView @selection-changed="onSelectionChanged" @item-activated="onItemActivated" :context-menu="contextMenuModel" :items="items"/>
         </div>
         <div class="main-view-col" style="max-width: 300px;">
-          <PreviewPanel :item="activeItem"/>
+          <PreviewPanel :item="activeItem || activeDirectoryItem"/>
         </div>
       </div>
     </template>
@@ -65,7 +65,8 @@ export default {
   data() {
     return {
       currentPath: '/',
-      activeItem: {},
+      activeItem: null,
+      activeDirectoryItem: {},
       items: [],
       apps: [],
       selectedAppId: '',
@@ -111,7 +112,7 @@ export default {
       this.$router.push('/login');
     },
     onSelectionChanged(items) {
-      this.activeItem = items[0] || {};
+      this.activeItem = items[0] || null;
     },
     onGoUp() {
       this.currentPath = sanitize(this.currentPath.split('/').slice(0, -1).join('/'));
@@ -135,6 +136,18 @@ export default {
           icon: `/mime-types/${i.mimeType === 'inode/symlink' ? 'none' : i.mimeType.split('/').join('-')}.svg`
         };
       });
+
+      const tmp = this.currentPath.split('/').slice(1);
+      let name = this.activeApp.fqdn;
+      if (tmp.length > 1) name = tmp[tmp.length-2];
+
+      this.activeDirectoryItem = {
+        id: name,
+        name: name,
+        type: 'directory',
+        mimeType: 'inode/directory',
+        icon: '/mime-types/inode-directory.svg'
+      };
     },
     async loadApp(appId) {
       this.activeApp = this.apps.find(a => a.id === appId);