[UI] A friendlier representation of an integration's name.

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

@@ -4,6 +4,7 @@ import Clipboard from "@/utils/Clipboard";
 import Cookies from "@/utils/Cookies";
 import DateTime from "@/utils/DateTime";
 import Events from "@/utils/Events";
+import Integrations from "@/utils/Integrations";
 import Notification from "@/utils/Notification";
 import Screen from "@/utils/Screen";
 import Text from "@/utils/Text";
@@ -18,6 +19,7 @@ export default {
     DateTime,
     Events,
     Notification,
+    Integrations,
     Screen,
     Text,
     Types,

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

@@ -36,7 +36,7 @@
           <img :src="icons[name].imgUrl" v-else-if="icons[name]?.imgUrl"  alt="name"/>
           <i class="fas fa-puzzle-piece" v-else />
         </span>
-        <span class="name" v-if="!collapsed" v-text="name == 'entities' ? 'Home' : name" />
+        <span class="name" v-if="!collapsed" v-text="displayName(name)" />
         </a>
       </li>
     </ul>
@@ -112,6 +112,15 @@ export default {
       this.$emit('select', name)
       this.collapsed = this.isMobile() ? true : this.collapsedDefault
     },
+
+    displayName(name) {
+      if (name === 'entities')
+        return 'Home'
+      if (name === 'execute')
+        return 'Execute'
+
+      return name
+    },
   },
 
   data() {
@@ -256,9 +265,9 @@ nav {
       .icon {
         margin-right: 0;
 
-        & img {
+        & img, i {
-          width: 1.25em;
+          width: 1.5em;
-          height: 1.25em;
+          height: 1.5em;
         }
       }
     }

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

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

platypush/backend/http/webapp/src/utils/Integrations.vue

@@ -0,0 +1,18 @@
+<script>
+export default {
+  name: "Integrations",
+  methods: {
+    pluginDisplayName(name) {
+      const words = name.split('.')
+      words.forEach((word, idx) => {
+        words[idx] = word.charAt(0).toUpperCase() + word.slice(1)
+      })
+
+      if (words.length > 1)
+        words[0] = `[${words[0]}]`
+
+      return words.join(' ')
+    },
+  }
+}
+</script>