[UI] Show the connected/disconnected status in the `Nav` icon.

platypush/backend/http/webapp/src/Events.vue

@@ -181,6 +181,11 @@ export default {
   created() {
     bus.on('subscribe', this.subscribe)
     bus.on('unsubscribe', this.unsubscribe)
+
+    this.$watch('opened', (open) => {
+      bus.emit(open ? 'connect' : 'disconnect')
+    })
+
     this.init()
   },
 }

platypush/backend/http/webapp/src/components/Nav.vue

@@ -3,6 +3,9 @@
     <div class="toggler" @click="collapsed = !collapsed">
       <i class="fas fa-bars" />
       <span class="hostname" v-if="hostname" v-text="hostname" />
+      <i class="icon status fas fa-circle"
+         :class="{ok: connected, error: !connected}"
+         :title="connected ? 'Connected' : 'Disconnected'" />
     </div>
 
     <ul class="plugins" v-if="selectedPanel === 'settings'">
@@ -76,6 +79,7 @@
 import icons from '@/assets/icons.json'
 import Utils from "@/Utils";
 import configSections from '@/components/panels/Settings/sections.json';
+import { bus } from "@/bus";
 
 export default {
   name: "Nav",
@@ -137,11 +141,18 @@ export default {
 
       return name
     },
+
+    setConnected(connected) {
+      return () => {
+        this.connected = connected
+      }
+    },
   },
 
   data() {
     return {
       collapsed: true,
+      connected: false,
       icons: icons,
       host: null,
       configSections: configSections,
@@ -150,6 +161,8 @@ export default {
 
   mounted() {
     this.collapsed = this.collapsedDefault
+    bus.on('connect', this.setConnected(true))
+    bus.on('disconnect', this.setConnected(false))
   },
 }
 </script>
@@ -239,10 +252,26 @@ nav {
     background: $nav-toggler-bg;
     display: flex;
     font-size: 1.5em;
+    position: relative;
     cursor: pointer;
     padding: 0.4em;
     align-items: center;
     box-shadow: $nav-toggler-shadow;
+
+    .icon.status {
+      position: absolute;
+      top: calc($toggler-height / 2 + 0.3em);
+      right: 0.5em;
+      font-size: 0.5em;
+
+      &.ok {
+        color: $ok-fg;
+      }
+
+      &.error {
+        color: $error-fg;
+      }
+    }
   }
 
   .hostname {
@@ -328,6 +357,11 @@ nav {
         background: $nav-toggler-collapsed-mobile-bg;
         color: $nav-toggler-collapsed-mobile-fg;
       }
+
+      .icon.status {
+        top: 0.75em;
+        left: 2em;
+      }
     }
 
     .footer {

platypush/backend/http/webapp/src/components/panels/Entities/Index.vue

@@ -39,7 +39,7 @@
               </span>
 
               <span class="section center">
-                <div class="title" v-text="pluginDisplayName(group.name)" />
+                <div class="title" v-text="group.name" />
               </span>
 
               <span class="section right">

platypush/backend/http/webapp/src/style/themes/light.scss

@@ -6,6 +6,7 @@ $default-bg-4: #f1f3f2 !default;
 $default-bg-5: #edf0ee !default;
 $default-bg-6: #e4eae8 !default;
 $default-bg-7: #e4e4e4 !default;
+$ok-fg: #17ad17 !default;
 $error-fg: #ad1717 !default;
 
 $default-fg: black !default;