[UI Nav] Moved Extensions panel from the plugins list to the footer.

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

@@ -42,6 +42,15 @@
     </ul>
 
     <ul class="footer">
+      <li :class="{selected: selectedPanel === 'extensions'}" title="Extensions" @click="onItemClick('extensions')">
+        <a href="/#extensions">
+          <span class="icon">
+            <i class="fa fa-puzzle-piece" />
+          </span>
+          <span class="name" v-if="!collapsed">Extensions</span>
+        </a>
+      </li>
+
       <li :class="{selected: selectedPanel === 'settings'}" title="Settings" @click="onItemClick('settings')">
         <a href="/#settings">
           <span class="icon">
@@ -102,7 +111,6 @@ export default {
       }
 
       let panelNames = Object.keys(this.panels).sort()
-      panelNames = prepend(panelNames, 'extensions')
       panelNames = prepend(panelNames, 'execute')
       panelNames = prepend(panelNames, 'entities')
       return panelNames
@@ -126,8 +134,6 @@ export default {
         return 'Home'
       if (name === 'execute')
         return 'Execute'
-      if (name === 'extensions')
-        return 'Extensions'
 
       return name
     },
@@ -151,8 +157,8 @@ export default {
 <!--suppress SassScssResolvedByNameOnly -->
 <style lang="scss" scoped>
 $toggler-height: 2em;
-$footer-collapsed-height: 4em;
-$footer-expanded-height: 7.1em;
+$footer-collapsed-height: 7.5em;
+$footer-expanded-height: 11em;
 
 nav {
   @media screen and (max-width: #{$tablet - 1px}) {

platypush/backend/http/webapp/src/views/Panel.vue

@@ -16,6 +16,12 @@
       </div>
     </div>
 
+    <div class="canvas" v-else-if="selectedPanel === 'extensions'">
+      <div class="panel">
+        <Extensions />
+      </div>
+    </div>
+
     <div class="canvas" v-else>
       <div class="panel" :class="{hidden: name !== selectedPanel}" v-for="(panel, name) in components" :key="name">
         <component :is="panel.component" :config="panel.config" :plugin-name="name" v-if="name === selectedPanel" />
@@ -29,12 +35,13 @@ import { defineAsyncComponent, shallowRef } from "vue";
 import Utils from '@/Utils'
 import Loading from "@/components/Loading";
 import Nav from "@/components/Nav";
+import Extensions from "@/components/panels/Extensions/Index";
 import Settings from "@/components/panels/Settings/Index";
 
 export default {
   name: 'Panel',
   mixins: [Utils],
-  components: {Settings, Nav, Loading},
+  components: {Extensions, Settings, Nav, Loading},
 
   data() {
     return {
@@ -95,7 +102,6 @@ export default {
     initializeDefaultViews() {
       this.plugins.entities = {}
       this.plugins.execute = {}
-      this.plugins.extensions = {}
     },
   },