From 12ab1d2d8a6f865693c9896d253c0faa8406691e Mon Sep 17 00:00:00 2001
From: Pranav C <61551451+pranavxc@users.noreply.github.com>
Date: Thu, 15 Jul 2021 16:31:36 +0530
Subject: [PATCH] fix: Bulk add users

Enabled option to add bulk add user with comma separated emails

re #300

Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com>
---
 .../nc-gui/components/auth/userManagement.vue |   22 +-
 .../project/spreadsheet/components/extras.vue |   96 ++
 .../components/spreadsheetNavDrawer.vue       |   81 +-
 packages/nc-gui/layouts/default.vue           | 1194 +++++++++--------
 packages/nc-gui/nuxt.config.js                |    1 +
 packages/nc-gui/pages/projects/index.vue      |    2 +-
 packages/nc-gui/plugins/globalEventBus.js     |    9 +
 packages/nc-gui/static/lang/en.json           |    1 +
 packages/nc-gui/static/lang/fr.json           |    1 +
 packages/nc-gui/static/lang/ja.json           |    1 +
 packages/nc-gui/static/lang/zh.json           |    2 +-
 packages/nc-lib-gui/package.json              |    2 +-
 .../src/lib/noco/rest/RestAuthCtrlEE.ts       |  103 +-
 13 files changed, 823 insertions(+), 692 deletions(-)
 create mode 100644 packages/nc-gui/components/project/spreadsheet/components/extras.vue
 create mode 100644 packages/nc-gui/plugins/globalEventBus.js

diff --git a/packages/nc-gui/components/auth/userManagement.vue b/packages/nc-gui/components/auth/userManagement.vue
index b19e893d54..43e5f5d092 100644
--- a/packages/nc-gui/components/auth/userManagement.vue
+++ b/packages/nc-gui/components/auth/userManagement.vue
@@ -346,7 +346,7 @@
     ></dlg-label-submit-cancel>
 
 
-    <v-dialog v-model="userEditDialog" :width="invite_token ? 700 :480" @close="invite_token = null">
+    <v-dialog v-model="userEditDialog" :width="invite_token ? 700 :700" @close="invite_token = null">
       <v-card v-if="selectedUser" class="px-15 py-5 " style="min-height: 100%">
         <h4 class="text-center text-capitalize mt-2 d-100 display-1">
           <template v-if="invite_token">Copy Invite Token</template>
@@ -388,7 +388,10 @@
 
           <p class="caption grey--text mt-3"> Looks like you have not configured mailer yet! <br>Please copy above
             invite
-            link and send it to {{ invite_token && invite_token.email }}.</p>
+            link and send it to {{ invite_token && (invite_token.email || invite_token.emails && invite_token.emails.join(', ')) }}.</p>
+
+          <!--          todo: show error message if failed-->
+
         </div>
         <template v-else>
           <v-form v-model="valid" @submit.prevent="saveUser">
@@ -403,6 +406,8 @@
                   v-model="selectedUser.email"
                   :rules="emailRules"
                   @input="edited=true"
+                  validate-on-blur
+                  hint="You can add multiple comma(,) separated emails"
                   label="Email"></v-text-field>
               </v-col>
               <v-col cols="12">
@@ -476,14 +481,21 @@ export default {
     valid: null,
     emailRules: [
       v => !!v || 'E-mail is required',
-      v => isEmail(v) || 'E-mail must be valid'
+      v => {
+        const invalidEmails = (v||'').split(/\s*,\s*/).filter(e => !isEmail(e));
+        return !invalidEmails.length || `"${invalidEmails.join(', ')}" - invalid email`
+      }
     ],
     userList: []
   }),
   async created() {
+    this.$eventBus.$on('show-add-user', this.addUser);
     await this.loadUsers();
     await this.loadRoles();
   },
+  beforeDestroy() {
+    this.$eventBus.$off('show-add-user', this.addUser);
+  },
   methods: {
     simpleAnim() {
       var count = 30;
@@ -619,7 +631,7 @@ export default {
     addUser() {
       this.invite_token = null;
       this.selectedUser = {
-        roles: 'creator,editor'
+        roles: 'editor'
       }
       this.userEditDialog = true
     },
@@ -733,7 +745,7 @@ export default {
         this.selectedUser = this.users[i];
       }
     }
-  }
+  },
 }
 </script>
 
diff --git a/packages/nc-gui/components/project/spreadsheet/components/extras.vue b/packages/nc-gui/components/project/spreadsheet/components/extras.vue
new file mode 100644
index 0000000000..cf6c6862d0
--- /dev/null
+++ b/packages/nc-gui/components/project/spreadsheet/components/extras.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="wrapper">
+
+
+    <div class="d-flex justify-end">
+      <v-list
+        width="100%"
+        class="
+          flex-shrink-1
+          text-left
+          elevation-1
+          rounded-sm
+          community-card
+          item
+        "
+        :class="{ active: showCommunity }"
+        dense
+      >
+        <v-list-item
+          dense
+          target="_blank"
+          href="https://calendly.com/nocodb"
+        >
+          <!-- Book a Free DEMO -->
+          <v-list-item-title>
+            <v-icon class="mr-1" small :color="textColors[3]">mdi-calendar-month
+            </v-icon>
+            <span class="caption" :title="$t('projects.show_community_message_2')">{{
+                $t('projects.show_community_message_2')
+              }}</span></v-list-item-title>
+        </v-list-item>
+        <v-divider></v-divider>
+        <v-list-item dense href="https://discord.gg/5RgZmkW" target="_blank">
+          <!-- Get your questions answered -->
+          <v-list-item-title>
+            <v-icon class="mr-1" small :color="textColors[0]">mdi-discord</v-icon>
+            <span class="caption" :title="$t('projects.show_community_message_3_short')">{{
+                $t('projects.show_community_message_3_short')
+              }}</span>
+          </v-list-item-title>
+        </v-list-item>
+        <v-divider></v-divider>
+        <v-list-item dense href="https://twitter.com/NocoDB" target="_blank">
+          <!-- Follow NocoDB -->
+          <v-list-item-title>
+            <v-icon class="mr-1" small :color="textColors[1]">mdi-twitter</v-icon>
+            <span class="caption" title="$t('projects.show_community_message_4')"> {{
+                $t('projects.show_community_message_4')
+              }}</span></v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </div>
+
+
+    <sponsor-mini
+      :class="{ active: !showCommunity }" class="item" :nav="true"></sponsor-mini>
+  </div>
+</template>
+
+<script>
+import SponsorMini from "~/components/sponsorMini";
+import colors from "~/mixins/colors";
+
+export default {
+  name: "extras",
+  data: () => ({
+    showCommunity: true
+  }),
+  mixins: [colors],
+  components: {SponsorMini},
+  mounted() {
+    setInterval(() => this.showCommunity = !this.showCommunity, 60000)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.wrapper {
+  position: relative;
+
+  .item {
+    z-index: -1;
+    opacity: 0;
+    position: absolute;
+    transition: .6s opacity;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    &.active {
+      z-index: 1;
+      position: relative;
+      opacity: 1;
+    }
+  }
+}
+</style>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue b/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
index f4c9166cc3..a3ebfb269d 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
@@ -29,7 +29,7 @@
                     x-small
                     v-if="viewIcons[view.show_as]"
                     :color="viewIcons[view.show_as].color"
-                    >{{ viewIcons[view.show_as].icon }}
+                  >{{ viewIcons[view.show_as].icon }}
                   </v-icon>
                   <v-icon color="primary" small v-else>mdi-table</v-icon>
                 </v-list-item-icon>
@@ -49,7 +49,7 @@
                           @blur="updateViewName(view)"
                         />
                         <template v-else
-                          ><span v-on="on">{{ view.alias || view.title }}</span></template
+                        ><span v-on="on">{{ view.alias || view.title }}</span></template
                         >
                       </div>
                     </template>
@@ -93,13 +93,14 @@
                   </x-icon>
                 </template>
                 <v-icon v-if="view.id === selectedViewId" small class="check-icon"
-                  >mdi-check-bold</v-icon
+                >mdi-check-bold
+                </v-icon
                 >
               </v-list-item>
             </v-list-item-group>
           </v-list>
           <template v-if="hideViews && _isUIAllowed('virtualViewsCreateOrEdit')">
-            <v-divider class="advance-menu-divider"> </v-divider>
+            <v-divider class="advance-menu-divider"></v-divider>
 
             <v-list
               dense
@@ -121,7 +122,7 @@
                       @mouseleave="overShieldIcon = false"
                       icon-class="ml-2"
                       small
-                      >mdi-shield-lock-outline
+                    >mdi-shield-lock-outline
                     </x-icon>
                   </template>
                   <!-- Only visible to Creator -->
@@ -137,7 +138,7 @@
                       <v-icon color="blue" x-small>mdi-grid-large</v-icon>
                     </v-list-item-icon>
                     <v-list-item-title
-                      ><span class="font-weight-regular">
+                    ><span class="font-weight-regular">
                         <!-- Grid -->
                         {{ $t('nav_drawer.virtual_views.grid') }}
                       </span></v-list-item-title
@@ -156,7 +157,7 @@
                       <v-icon color="orange" x-small>mdi-camera-image</v-icon>
                     </v-list-item-icon>
                     <v-list-item-title
-                      ><span class="font-weight-regular">
+                    ><span class="font-weight-regular">
                         <!-- Gallery -->
 
                         {{ $t('nav_drawer.virtual_views.gallery') }}
@@ -183,7 +184,7 @@
                       <v-icon x-small>mdi-calendar</v-icon>
                     </v-list-item-icon>
                     <v-list-item-title
-                      ><span class="font-weight-regular">
+                    ><span class="font-weight-regular">
                         <!-- Calendar -->
                         {{ $t('nav_drawer.virtual_views.calendar') }}
                       </span></v-list-item-title
@@ -208,7 +209,7 @@
                       <v-icon x-small>mdi-tablet-dashboard</v-icon>
                     </v-list-item-icon>
                     <v-list-item-title
-                      ><span class="font-weight-regular">
+                    ><span class="font-weight-regular">
                         <!-- Kanban -->
                         {{ $t('nav_drawer.virtual_views.kanban') }}
                       </span></v-list-item-title
@@ -233,7 +234,7 @@
                       <v-icon x-small class="mt-n1">mdi-form-select</v-icon>
                     </v-list-item-icon>
                     <v-list-item-title
-                      ><span class="font-weight-regular">
+                    ><span class="font-weight-regular">
                         <!-- Form -->
 
                         {{ $t('nav_drawer.virtual_views.form') }}
@@ -256,9 +257,13 @@
           v-if="time - $store.state.windows.miniSponsorCard > 15 * 60 * 1000"
         >
           <v-icon small class="close-icon" @click="hideMiniSponsorCard"
-            >mdi-close-circle-outline</v-icon
+          >mdi-close-circle-outline
+          </v-icon
           >
-          <sponsor-mini :nav="true"></sponsor-mini>
+
+
+          <extras></extras>
+
         </div>
         <!--<div class="text-center">
           <v-hover >
@@ -285,7 +290,7 @@
               <span
                 class="body-2 grey--text"
                 @dblclick="$emit('update:showAdvanceOptions', !showAdvanceOptions)"
-                >Advanced</span
+              >Advanced</span
               >
               <v-tooltip top>
                 <template v-slot:activator="{ on }">
@@ -296,7 +301,7 @@
                     @mouseleave="overAdvShieldIcon = false"
                     icon-class="ml-2"
                     small
-                    >mdi-shield-lock-outline
+                  >mdi-shield-lock-outline
                   </x-icon>
                 </template>
                 <span class="caption">
@@ -338,28 +343,6 @@
                 </v-list>
               </v-menu>
             </v-list-item>
-            <!--              </template>-->
-            <!--              <v-card dense class="backgroundColor">-->
-            <!--                <v-container fluid @click.stop>-->
-
-            <!--                  <v-text-field-->
-            <!--                    label="Password"-->
-            <!--                    hint="Enter shared view password"-->
-            <!--                    flat-->
-            <!--                    solo-->
-            <!--                    dense-->
-            <!--                    v-model="sharedViewPassword"-->
-            <!--                  ></v-text-field>-->
-            <!--                  <div class="text-right">-->
-            <!--                    <v-btn small color="primary" @click="genShareLink()">Create</v-btn>-->
-            <!--                  </div>-->
-            <!--                </v-container>-->
-            <!--              </v-card>-->
-
-            <!--            </v-menu>-->
-            <!--              </template>-->
-            <!--              Generate shared view url-->
-            <!--            </v-tooltip>-->
 
             <v-tooltip bottom>
               <template v-slot:activator="{ on }">
@@ -407,12 +390,12 @@
           </p>
           <div style="border-radius: 4px" class="share-link-box body-2 pa-2 d-flex align-center">
             {{ shareLink.url }}
-            <v-spacer> </v-spacer>
+            <v-spacer></v-spacer>
             <a :href="shareLink.url" style="text-decoration: none" target="_blank">
               <v-icon small class="mx-2">mdi-open-in-new</v-icon>
             </a>
             <v-icon small class="pointer" @click="copyShareUrlToClipboard"
-              >mdi-content-copy
+            >mdi-content-copy
             </v-icon>
           </div>
 
@@ -461,11 +444,11 @@
 
 <script>
 import CreateViewDialog from '@/components/project/spreadsheet/dialog/createViewDialog';
-import SponsorMini from '@/components/sponsorMini';
+import Extras from "~/components/project/spreadsheet/components/extras";
 
 export default {
   name: 'spreadsheetNavDrawer',
-  components: { SponsorMini, CreateViewDialog },
+  components: {Extras, CreateViewDialog},
   props: {
     showAdvanceOptions: Boolean,
     hideViews: Boolean,
@@ -505,11 +488,11 @@ export default {
     overShieldIcon: false,
     viewsList: [],
     viewIcons: {
-      grid: { icon: 'mdi-grid-large', color: 'blue' },
-      form: { icon: 'mdi-form-select', color: 'pink' },
-      calendar: { icon: 'mdi-calendar', color: 'purple' },
-      gallery: { icon: 'mdi-camera-image', color: 'orange' },
-      kanban: { icon: 'mdi-tablet-dashboard', color: 'green' },
+      grid: {icon: 'mdi-grid-large', color: 'blue'},
+      form: {icon: 'mdi-form-select', color: 'pink'},
+      calendar: {icon: 'mdi-calendar', color: 'purple'},
+      gallery: {icon: 'mdi-camera-image', color: 'orange'},
+      kanban: {icon: 'mdi-tablet-dashboard', color: 'green'},
     },
     copyViewRef: null,
     shareLink: {},
@@ -592,7 +575,7 @@ export default {
     async saveShareLinkPassword() {
       try {
         await this.$store.dispatch('sqlMgr/ActSqlOp', [
-          { dbAlias: this.nodes.dbAlias },
+          {dbAlias: this.nodes.dbAlias},
           'updateSharedViewLinkPassword',
           {
             id: this.shareLink.id,
@@ -639,7 +622,7 @@ export default {
     },
     async updateViewName(view) {
       try {
-        await this.sqlOp({ dbAlias: this.nodes.dbAlias }, 'xcVirtualTableRename', {
+        await this.sqlOp({dbAlias: this.nodes.dbAlias}, 'xcVirtualTableRename', {
           id: view.id,
           title: view.title,
           alias: view.alias,
@@ -661,7 +644,7 @@ export default {
     },
     async deleteView(view) {
       try {
-        await this.sqlOp({ dbAlias: this.nodes.dbAlias }, 'xcVirtualTableDelete', {
+        await this.sqlOp({dbAlias: this.nodes.dbAlias}, 'xcVirtualTableDelete', {
           id: view.id,
           title: view.alias || view.title,
           parent_model_title: this.table,
@@ -675,7 +658,7 @@ export default {
     async genShareLink() {
       this.showShareModel = true;
       const sharedViewUrl = await this.$store.dispatch('sqlMgr/ActSqlOp', [
-        { dbAlias: this.nodes.dbAlias },
+        {dbAlias: this.nodes.dbAlias},
         'createSharedViewLink',
         {
           model_name: this.table,
diff --git a/packages/nc-gui/layouts/default.vue b/packages/nc-gui/layouts/default.vue
index e42034fc73..832be8515a 100644
--- a/packages/nc-gui/layouts/default.vue
+++ b/packages/nc-gui/layouts/default.vue
@@ -34,675 +34,674 @@
         </template>
       </v-toolbar-title>
 
-      <span class="caption grey--text ml-3" v-show="$nuxt.$loading.show">Loading <v-icon small color="grey">mdi-spin mdi-loading</v-icon></span>
+      <v-toolbar-items class="ml-3">
 
-      <!--      <gh-btns-star-->
-      <!--        @click.native="githubClickHandler"-->
-      <!--        class="black&#45;&#45;text"-->
-      <!--        icon="mark-github" slug="nocodb/nocodb" show-count></gh-btns-star>-->
-      <!--
+        <gh-btns-star
+          icon="mark-github" slug="nocodb/nocodb" show-count class="mr-3 align-self-center"></gh-btns-star>
+      </v-toolbar-items>
+        <!-- <template v-if="!isThisMobile ">
 
-            <x-icon key="discord-dash" iconClass="ml-4" @click="openDiscord" tooltip="Discord Chat (^⇧D)">mdi-discord
-            </x-icon>
 
-            <a href="https://twitter.com/xgenecloud" target="_blank">
-              <x-icon key="twitter-dash" iconClass="ml-4" tooltip="Twitter">
-                mdi-twitter
-              </x-icon>
-            </a>
+                  <a class="align-self-center" style="" target="_blank" href="https://calendly.com/nocodb">
+
+                    <x-icon size="20" tooltip="Book a free demo" color="white" icon.class="mr-3">mdi-calendar-month</x-icon>
+
+                  </a>
+
+                  <a href="https://twitter.com/NocoDB" target="_blank" class="align-self-center" style="">
+                    <v-icon size="20" color="white" class="mr-3">mdi-twitter</v-icon>
+                  </a>
+                  &lt;!&ndash;            <v-menu offset-y>&ndash;&gt;
+                  &lt;!&ndash;              <template v-slot:activator="{on}">&ndash;&gt;
+                  &lt;!&ndash;                href="https://discord.gg/5RgZmkW"&ndash;&gt;
+                  <a target="_blank" class="align-self-center" style="" href="https://discord.gg/5RgZmkW">
+                    <v-icon size="20" color="white" class="mr-3">mdi-discord</v-icon>
+                  </a>
+                  &lt;!&ndash;              </template>&ndash;&gt;
+                  &lt;!&ndash;              <discord></discord>&ndash;&gt;
+                  &lt;!&ndash;            </v-menu>&ndash;&gt;
+                </template>
 
-            <a href="https://calendly.com/xgenecloud/demo" target="_blank">
-              <x-icon iconClass="ml-4" tooltip="Book a demo">
-                mdi-video-outline
+              </v-toolbar-items>-->
+        <span class="caption grey--text ml-3" v-show="$nuxt.$loading.show">Loading <v-icon small color="grey">mdi-spin mdi-loading</v-icon></span>
+
+        <!--      <gh-btns-star-->
+        <!--        @click.native="githubClickHandler"-->
+        <!--        class="black&#45;&#45;text"-->
+        <!--        icon="mark-github" slug="nocodb/nocodb" show-count></gh-btns-star>-->
+        <!--
+
+              <x-icon key="discord-dash" iconClass="ml-4" @click="openDiscord" tooltip="Discord Chat (^⇧D)">mdi-discord
               </x-icon>
-            </a>-->
-
-      <!--      <x-btn btn.class=" mr-4" small text-->
-      <!--             tooltip="We'll help you get started over a video call"-->
-      <!--             @click="openUrl('https://calendly.com/xgenecloud/demo')">-->
-      <!--        <v-icon-->
-
-      <!--          color="">-->
-      <!--          mdi-video-outline-->
-      <!--        </v-icon> &nbsp; Free Demo-->
-      <!--      </x-btn>-->
-      <span v-shortkey="[ 'ctrl','shift', 'd']"
-            @shortkey="openDiscord"></span>
-
-
-      <v-spacer></v-spacer>
-      <div style="position: absolute; top:0;left:0;width:100%; pointer-events: none" class="d-flex align-center">
-        <h5 class="text-center mx-auto mb-0 mt-1 title font-weight-bold text-capitalize"
-            v-if="isDashboard && $store.getters['project/GtrProjectName'] !== '__project__'">
-          <v-icon small class="mr-2\1" color="grey lighten-2">
-            mdi-folder-outline
-          </v-icon>
-          {{ $store.getters['project/GtrProjectName'] }}
-          <!--     <v-icon small color="grey lighten-2">
-                 mdi-menu-down
-               </v-icon>-->
-          <v-tooltip bottom>
-            <template v-slot:activator="{on}">
-              <v-icon style="pointer-events:all" x-small v-on="on" color="grey lighten-2">
-                mdi-information-outline
-              </v-icon>
-            </template>
-            Project name
-          </v-tooltip>
-        </h5>
-      </div>
-      <v-spacer></v-spacer>
-
-
-      <v-toolbar-items class="hidden-sm-and-down">
-
-
-        <!--        <x-icon-->
-        <!--          :iconClass="isDashboard ? 'mr-4 mt-n1':'mr-4 mt-n1 '" @click="loadChat" color="#2196f3 #2196f3"-->
-        <!--          v-if="!$store.state.windows.isComp"-->
-        <!--          tooltip="Facing any issues ? Chat with us<br>We can help you right away">-->
-        <!--          mdi-account-tie-voice-->
-        <!--        </x-icon>-->
-
-
-        <!--        <x-icon iconClass="mr-4" v-if="$store.getters['project/GtrProjectJson']" @click="environmentDialog = true" tooltip="Environments">-->
-        <!--          mdi-eye-outline-->
-        <!--        </x-icon>-->
-
-        <!--        <x-icon iconClass="mr-4" v-if="isDashboard"-->
-        <!--                @click="codeGenerateMvc()"-->
-        <!--                tooltip="Generate REST Code (^⇧G)"-->
-        <!--                color="success success">-->
-        <!--          mdi-language-javascript-->
-        <!--        </x-icon>-->
-        <!--        <span v-shortkey="['ctrl','shift','m']" v-if="isDashboard"  @shortkey="codeGenerateMvc()"></span>-->
-
-        <!--        <x-icon iconClass="mr-4"-->
-        <!--                v-if="isDashboard"-->
-        <!--                @click="codeGenerateMvcGql()"-->
-        <!--                color="accent accent"-->
-        <!--                tooltip="Generate GraphQL Code (^⇧G)">-->
-        <!--          mdi-language-javascript-->
-        <!--        </x-icon>-->
-        <!--        <span v-shortkey="['ctrl','shift','q']" v-if="isDashboard"  @shortkey="codeGenerateMvcGql()"></span>-->
-
-        <!--        <x-icon iconClass="mr-4"-->
-        <!--                v-if="isDashboard"-->
-        <!--                @click="codeClear()"-->
-        <!--                color="error error"-->
-        <!--                tooltip="Delete all code (^⇧G)">-->
-        <!--          mdi-delete-variant-->
-        <!--        </x-icon>-->
-        <!--        <span v-shortkey="['ctrl','shift','c']" v-if="isDashboard"  @shortkey="codeClear()"></span>-->
-
-        <template v-if="isDashboard">
-
-          <template v-if="!isThisMobile ">
-
-
-            <a class="align-self-center" style="" target="_blank" href="https://calendly.com/xgenecloud/demo">
-
-              <x-icon size="20" tooltip="Book a free demo" color="white" icon.class="mr-3">mdi-calendar-month</x-icon>
-
-            </a>
-
-            <a href="https://twitter.com/NocoDB" target="_blank" class="align-self-center" style="">
-              <v-icon size="20" color="white" class="mr-3">mdi-twitter</v-icon>
-            </a>
-            <!--            <v-menu offset-y>-->
-            <!--              <template v-slot:activator="{on}">-->
-            <!--                href="https://discord.gg/5RgZmkW"-->
-            <a target="_blank" class="align-self-center" style="" href="https://discord.gg/5RgZmkW">
-              <v-icon size="20" color="white" class="mr-3">mdi-discord</v-icon>
-            </a>
-            <!--              </template>-->
-            <!--              <discord></discord>-->
-            <!--            </v-menu>-->
-          </template>
 
-          <gh-btns-star
-            icon="mark-github" slug="nocodb/nocodb" show-count class="mr-1 align-self-center"></gh-btns-star>
-          <!--      <github-button v-show="$store.state.isLoaded" class="mt-2 mr-md-2" href="https://github.com/nocodb/nocodb"-->
-          <!--                     data-color-scheme="no-preference: light; light: light; dark: light;" data-size="large"-->
-          <!--                     data-show-count="true" aria-label="Star nocodb/nocodb on GitHub">Star-->
-          <!--      </github-button>-->
-
-
-          <!-- <v-menu offset-y>
-             <template v-slot:activator="{on}">
-               <div class="align-self-center" v-on="on">
-                 <v-icon small color="" class="mr-1 heart-anim">mdi-heart</v-icon>
-                 <span class="body-2">Community</span>
-                 <v-icon small>mdi-menu-down</v-icon>
-               </div>
-             </template>
-
-
-             <v-list dense>
-               <v-list-item>
-                 <v-icon small class="mr-1">mdi-github</v-icon>
-                 <span class="caption text-capitalize">Github</span>
-               </v-list-item>
-               <v-list-item>
-                 <v-icon small class="mr-1">mdi-discord</v-icon>
-                 <span class="caption text-capitalize">Discord</span>
-               </v-list-item>
-
-               <v-list-item>
-                 <v-icon small class="mr-1">mdi-discord</v-icon>
-                 <span class="caption text-capitalize">Discord</span>
-               </v-list-item>
-             </v-list>
-           </v-menu>
- -->
-          <!--
-           <v-menu offset-y v-if="rolesList">
-                      <template v-slot:activator="{on}">
-                        <div class="d-flex align-center">
-                          <v-btn small outlined v-on="on">
-                            <v-icon small class="mr-1">mdi-drama-masks</v-icon>
-                            <span>Preview as</span>
-                            <v-icon small>mdi-menu-down</v-icon>
-                          </v-btn>
-                        </div>
-                      </template>
-
-
-                      <v-list dense>
-                        <v-list-item v-for="role in rolesList" @click="setPreviewUSer(role.title)" :key="role.title">
-                          <v-icon small class="mr-1">{{ roleIcon[role.title] }}</v-icon>
-                          <span class="caption text-capitalize">{{ role.title }}</span>
-                        </v-list-item>
-                        <template v-if="previewAs">
-                          <v-divider></v-divider>
-                          <v-list-item @click="setPreviewUSer(null)">
-                            <v-icon small class="mr-1">mdi-close</v-icon>
-                            <span class="caption">Reset Preview</span>
-                          </v-list-item>
+              <a href="https://twitter.com/xgenecloud" target="_blank">
+                <x-icon key="twitter-dash" iconClass="ml-4" tooltip="Twitter">
+                  mdi-twitter
+                </x-icon>
+              </a>
+
+              <a href="https://calendly.com/nocodb" target="_blank">
+                <x-icon iconClass="ml-4" tooltip="Book a demo">
+                  mdi-video-outline
+                </x-icon>
+              </a>-->
+
+        <!--      <x-btn btn.class=" mr-4" small text-->
+        <!--             tooltip="We'll help you get started over a video call"-->
+        <!--             @click="openUrl('https://calendly.com/nocodb')">-->
+        <!--        <v-icon-->
+
+        <!--          color="">-->
+        <!--          mdi-video-outline-->
+        <!--        </v-icon> &nbsp; Free Demo-->
+        <!--      </x-btn>-->
+        <span v-shortkey="[ 'ctrl','shift', 'd']"
+              @shortkey="openDiscord"></span>
+
+
+        <v-spacer></v-spacer>
+        <div style="position: absolute; top:0;left:0;width:100%; pointer-events: none" class="d-flex align-center">
+          <h5 class="text-center mx-auto mb-0 mt-1 title font-weight-bold text-capitalize"
+              v-if="isDashboard && $store.getters['project/GtrProjectName'] !== '__project__'">
+            <v-icon small class="mr-2\1" color="grey lighten-2">
+              mdi-folder-outline
+            </v-icon>
+            {{ $store.getters['project/GtrProjectName'] }}
+            <v-tooltip bottom>
+              <template v-slot:activator="{on}">
+                <v-icon style="pointer-events:all" x-small v-on="on" color="grey lighten-2">
+                  mdi-information-outline
+                </v-icon>
+              </template>
+              Project name
+            </v-tooltip>
+          </h5>
+        </div>
+
+
+        <v-spacer></v-spacer>
+
+
+        <v-toolbar-items class="hidden-sm-and-down">
+
+          <div>
+            <x-btn v-if="_isUIAllowed('add-user')" @click="rolesTabAdd" small color="white" btn-class="primary--text">
+              <v-icon small class="mr-1">mdi-account-supervisor-outline</v-icon>
+              Share
+            </x-btn>
+          </div>
+
+
+          <!--        <x-icon iconClass="mr-4" v-if="isDashboard"-->
+          <!--                @click="codeGenerateMvc()"-->
+          <!--                tooltip="Generate REST Code (^⇧G)"-->
+          <!--                color="success success">-->
+          <!--          mdi-language-javascript-->
+          <!--        </x-icon>-->
+          <!--        <span v-shortkey="['ctrl','shift','m']" v-if="isDashboard"  @shortkey="codeGenerateMvc()"></span>-->
+
+          <!--        <x-icon iconClass="mr-4"-->
+          <!--                v-if="isDashboard"-->
+          <!--                @click="codeGenerateMvcGql()"-->
+          <!--                color="accent accent"-->
+          <!--                tooltip="Generate GraphQL Code (^⇧G)">-->
+          <!--          mdi-language-javascript-->
+          <!--        </x-icon>-->
+          <!--        <span v-shortkey="['ctrl','shift','q']" v-if="isDashboard"  @shortkey="codeGenerateMvcGql()"></span>-->
+
+          <!--        <x-icon iconClass="mr-4"-->
+          <!--                v-if="isDashboard"-->
+          <!--                @click="codeClear()"-->
+          <!--                color="error error"-->
+          <!--                tooltip="Delete all code (^⇧G)">-->
+          <!--          mdi-delete-variant-->
+          <!--        </x-icon>-->
+          <!--        <span v-shortkey="['ctrl','shift','c']" v-if="isDashboard"  @shortkey="codeClear()"></span>-->
+
+          <template v-if="isDashboard">
+
+            <!--      <github-button v-show="$store.state.isLoaded" class="mt-2 mr-md-2" href="https://github.com/nocodb/nocodb"-->
+            <!--                     data-color-scheme="no-preference: light; light: light; dark: light;" data-size="large"-->
+            <!--                     data-show-count="true" aria-label="Star nocodb/nocodb on GitHub">Star-->
+            <!--      </github-button>-->
+
+
+            <!-- <v-menu offset-y>
+               <template v-slot:activator="{on}">
+                 <div class="align-self-center" v-on="on">
+                   <v-icon small color="" class="mr-1 heart-anim">mdi-heart</v-icon>
+                   <span class="body-2">Community</span>
+                   <v-icon small>mdi-menu-down</v-icon>
+                 </div>
+               </template>
+
+
+               <v-list dense>
+                 <v-list-item>
+                   <v-icon small class="mr-1">mdi-github</v-icon>
+                   <span class="caption text-capitalize">Github</span>
+                 </v-list-item>
+                 <v-list-item>
+                   <v-icon small class="mr-1">mdi-discord</v-icon>
+                   <span class="caption text-capitalize">Discord</span>
+                 </v-list-item>
+
+                 <v-list-item>
+                   <v-icon small class="mr-1">mdi-discord</v-icon>
+                   <span class="caption text-capitalize">Discord</span>
+                 </v-list-item>
+               </v-list>
+             </v-menu>
+   -->
+            <!--
+             <v-menu offset-y v-if="rolesList">
+                        <template v-slot:activator="{on}">
+                          <div class="d-flex align-center">
+                            <v-btn small outlined v-on="on">
+                              <v-icon small class="mr-1">mdi-drama-masks</v-icon>
+                              <span>Preview as</span>
+                              <v-icon small>mdi-menu-down</v-icon>
+                            </v-btn>
+                          </div>
                         </template>
-                      </v-list>
-                    </v-menu>
 
-          -->
 
-          <v-tooltip bottom>
-            <template v-slot:activator="{ on }">
-              <v-icon v-on="on" class="mt-1 ml-3" size="22" @click="$store.commit('windows/MutToggleTheme')">
-                mdi-format-color-fill
-              </v-icon>
-            </template>
-            Change theme (^⇧M)
-          </v-tooltip>
-
-          <span v-shortkey="[ 'ctrl','shift', 'b']"
-                @shortkey="changeTheme"></span>
-          <v-tooltip bottom>
-            <template v-slot:activator="{ on }">
-              <v-icon @dblclick="showAppStore=true" @click="changeTheme" v-on="on" size="20"
-                      class="ml-3"> {{ $vuetify.theme.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}
-              </v-icon>
-            </template>
-            <span class="caption">
+                        <v-list dense>
+                          <v-list-item v-for="role in rolesList" @click="setPreviewUSer(role.title)" :key="role.title">
+                            <v-icon small class="mr-1">{{ roleIcon[role.title] }}</v-icon>
+                            <span class="caption text-capitalize">{{ role.title }}</span>
+                          </v-list-item>
+                          <template v-if="previewAs">
+                            <v-divider></v-divider>
+                            <v-list-item @click="setPreviewUSer(null)">
+                              <v-icon small class="mr-1">mdi-close</v-icon>
+                              <span class="caption">Reset Preview</span>
+                            </v-list-item>
+                          </template>
+                        </v-list>
+                      </v-menu>
+
+            -->
+
+            <v-tooltip bottom>
+              <template v-slot:activator="{ on }">
+                <v-icon v-on="on" class="mt-1 ml-3" size="22" @click="$store.commit('windows/MutToggleTheme')">
+                  mdi-format-color-fill
+                </v-icon>
+              </template>
+              Change theme (^⇧M)
+            </v-tooltip>
+
+            <span v-shortkey="[ 'ctrl','shift', 'b']"
+                  @shortkey="changeTheme"></span>
+            <v-tooltip bottom>
+              <template v-slot:activator="{ on }">
+                <v-icon @dblclick="showAppStore=true" @click="changeTheme" v-on="on" size="20"
+                        class="ml-3"> {{ $vuetify.theme.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}
+                </v-icon>
+              </template>
+              <span class="caption">
               {{ $vuetify.theme.dark ? 'Click for light theme' : 'Click for dark theme' }}
               <i></i>
             </span>
-          </v-tooltip>
-
-
-          <!--          <template v-if="isDocker">-->
-          <!--            <x-btn text btn.class="caption font-weight-bold px-2" tooltip="Metadata Operations"-->
-          <!--                   @click="xcMetaTabAdd">-->
-
-          <!--              <v-icon class="mt-n1">-->
-          <!--                mdi-file-table-box-multiple-outline-->
-          <!--              </v-icon> &nbsp;-->
-          <!--              Meta-->
-          <!--            </x-btn>-->
-
-
-          <!--            <x-btn text btn.class="caption font-weight-bold px-2" tooltip="Change Environment"-->
-          <!--                   @click="showChangeEnv = true">-->
-
-          <!--              <v-icon>-->
-          <!--                mdi-test-tube-->
-          <!--              </v-icon> &nbsp;-->
-          <!--              Change Env-->
-          <!--            </x-btn>-->
-          <!--          </template>-->
-
-
-          <span v-shortkey="[ 'ctrl','shift', 'd']"
-                @shortkey="$router.push('/')"></span>
-
-          <x-btn text btn.class="caption font-weight-bold px-2 text-capitalize" v-if="showAirtabLikeLink > 2"
-                 tooltip="Data (^⇧D)"
-                 to="/datatable">
-
-            <v-icon size="20">
-              mdi-table
-            </v-icon> &nbsp;
-            Data
-          </x-btn>
-
-          <!--          v-if="showAppStore"-->
+            </v-tooltip>
+
+
+            <!--          <template v-if="isDocker">-->
+            <!--            <x-btn text btn.class="caption font-weight-bold px-2" tooltip="Metadata Operations"-->
+            <!--                   @click="xcMetaTabAdd">-->
+
+            <!--              <v-icon class="mt-n1">-->
+            <!--                mdi-file-table-box-multiple-outline-->
+            <!--              </v-icon> &nbsp;-->
+            <!--              Meta-->
+            <!--            </x-btn>-->
+
+
+            <!--            <x-btn text btn.class="caption font-weight-bold px-2" tooltip="Change Environment"-->
+            <!--                   @click="showChangeEnv = true">-->
+
+            <!--              <v-icon>-->
+            <!--                mdi-test-tube-->
+            <!--              </v-icon> &nbsp;-->
+            <!--              Change Env-->
+            <!--            </x-btn>-->
+            <!--          </template>-->
+
+
+            <span v-shortkey="[ 'ctrl','shift', 'd']"
+                  @shortkey="$router.push('/')"></span>
+
+            <x-btn text btn.class="caption font-weight-bold px-2 text-capitalize" v-if="showAirtabLikeLink > 2"
+                   tooltip="Data (^⇧D)"
+                   to="/datatable">
+
+              <v-icon size="20">
+                mdi-table
+              </v-icon> &nbsp;
+              Data
+            </x-btn>
+
+            <!--          v-if="showAppStore"-->
 
-          <!--       <x-btn text btn.class="caption font-weight-bold px-2 text-capitalize"
-                        tooltip="App store"
-                        @click="appsTabAdd()">
+            <!--       <x-btn text btn.class="caption font-weight-bold px-2 text-capitalize"
+                          tooltip="App store"
+                          @click="appsTabAdd()">
 
-                   <v-icon size="16" class="mt-n1">
-                     mdi-storefront-outline
-                   </v-icon> &nbsp;
-                   App Store
-                 </x-btn>-->
+                     <v-icon size="16" class="mt-n1">
+                       mdi-storefront-outline
+                     </v-icon> &nbsp;
+                     App Store
+                   </x-btn>-->
 
-          <!--          <x-btn text btn.class="caption font-weight-bold px-2 text-capitalize" tooltip="Meta Management"-->
-          <!--                 @dblclick="showAppStoreIcon"-->
-          <!--                 @click="disableOrEnableModelTabAdd()">-->
+            <!--          <x-btn text btn.class="caption font-weight-bold px-2 text-capitalize" tooltip="Meta Management"-->
+            <!--                 @dblclick="showAppStoreIcon"-->
+            <!--                 @click="disableOrEnableModelTabAdd()">-->
 
-          <!--            <v-icon size="20">mdi-table-multiple-->
-          <!--            </v-icon> &nbsp;-->
-          <!--            Meta-->
-          <!--          </x-btn>-->
+            <!--            <v-icon size="20">mdi-table-multiple-->
+            <!--            </v-icon> &nbsp;-->
+            <!--            Meta-->
+            <!--          </x-btn>-->
 
-          <!--          <x-btn text btn.class="caption font-weight-bold px-2 text-capitalize" tooltip="Roles & Users Management"-->
-          <!--                 @click="rolesTabAdd()">-->
+            <!--          <x-btn text btn.class="caption font-weight-bold px-2 text-capitalize" tooltip="Roles & Users Management"-->
+            <!--                 @click="rolesTabAdd()">-->
 
-          <!--            <v-icon size="20">-->
-          <!--              mdi-account-group-->
-          <!--            </v-icon> &nbsp;-->
-          <!--            Team-->
-          <!--          </x-btn>-->
+            <!--            <v-icon size="20">-->
+            <!--              mdi-account-group-->
+            <!--            </v-icon> &nbsp;-->
+            <!--            Team-->
+            <!--          </x-btn>-->
 
-          <x-btn
-            v-if="!$store.state.windows.nc"
-            text btn.class="caption font-weight-bold px-2 text-capitalize" tooltip="Enable/Disable Models"
-            @click="cronTabAdd()">
+            <x-btn
+              v-if="!$store.state.windows.nc"
+              text btn.class="caption font-weight-bold px-2 text-capitalize" tooltip="Enable/Disable Models"
+              @click="cronTabAdd()">
 
-            <v-icon size="20">mdi-timetable
-            </v-icon> &nbsp;
-            Crons
-          </x-btn>
-          <!--          <x-btn text btn.class="caption font-weight-bold px-2" tooltip="ACL Management"-->
-          <!--                 @click="aclTabAdd()">-->
+              <v-icon size="20">mdi-timetable
+              </v-icon> &nbsp;
+              Crons
+            </x-btn>
+            <!--          <x-btn text btn.class="caption font-weight-bold px-2" tooltip="ACL Management"-->
+            <!--                 @click="aclTabAdd()">-->
 
-          <!--            <v-icon>-->
-          <!--              mdi-shield-edit-outline-->
-          <!--            </v-icon> &nbsp;-->
-          <!--            ACL-->
-          <!--          </x-btn>-->
+            <!--            <v-icon>-->
+            <!--              mdi-shield-edit-outline-->
+            <!--            </v-icon> &nbsp;-->
+            <!--            ACL-->
+            <!--          </x-btn>-->
 
-          <!--          <span v-shortkey="['ctrl','shift','g']" @shortkey="graphqlClientTabAdd()"></span>-->
-
-
-          <!--          <x-btn v-if="isGql" text btn.class="caption font-weight-bold px-2" tooltip="GraphQL Client (^⇧G)"-->
-          <!--                 @click="graphqlClientTabAdd()">-->
-
-          <!--          <v-icon tooltip="GraphQL Client (^⇧G)"-->
-          <!--                  v-if="!$store.state.windows.nc && isGql"-->
-          <!--                  @click="graphqlClientTabAdd()" class="ml-3 " size="20">-->
-          <!--            mdi-graphql-->
-          <!--          </v-icon>-->
-          <!--          <v-icon tooltip="GraphQL Client (^⇧G)"-->
-          <!--                  v-if="isRest"-->
-          <!--                  @click="swaggerClientTabAdd()" class="ml-3 " size="20">-->
-          <!--            mdi-code-json-->
-          <!--          </v-icon>-->
-          <!--            &nbsp;-->
-          <!--            GraphiQL-->
-          <!--          </x-btn>-->
-          <span v-shortkey="['ctrl','shift','g']" @shortkey="graphqlClientTabAdd()"></span>
-
-
-          <!--          <x-btn v-if="isGrpc" text btn.class="caption font-weight-bold px-2" tooltip="GraphQL Client (^⇧G)"-->
-          <!--                 @click="grpcTabAdd()">-->
-
-          <v-icon
-            v-if="!$store.state.windows.nc && isGrpc"
-            size="20" class="ml-3 " tooltip="GraphQL Client (^⇧G)"
-            @click="grpcTabAdd()">
-            mdi-alpha-g-circle-outline
-          </v-icon>
-          <!--            &nbsp;-->
-          <!--            gRPC-->
-          <!--          </x-btn>-->
-
-
-          <!--          <x-icon iconClass="mr-4" @click="apiClientTabAdd()" tooltip="API Client (^⇧A)">mdi-send-->
-          <!--          </x-icon>-->
-
-          <!--          <x-btn text @click="apiClientSwaggerTabAdd()" tooltip="API Client (^⇧A)"-->
-          <!--                 btn.class="caption font-weight-bold px-2">-->
-
-
-          <v-icon class="ml-3 "
-                  v-if="!$store.state.windows.nc" size="20" @click="apiClientSwaggerTabAdd()"
-                  tooltip="API Client (^⇧A)">mdi-code-json
-          </v-icon>
-          <!--            &nbsp; REST Client-->
-          <!--          </x-btn>-->
-
-          <!--          <x-icon iconClass="mr-4" tooltip="Feed (^⇧F)" @click="feedDialog = true">mdi-glasses</x-icon>-->
-          <!--          <span v-shortkey="['ctrl','shift','f']" @shortkey="feedDialog = true"></span>-->
-
-
-          <span v-shortkey="['ctrl','shift','a']" @shortkey="apiClientTabAdd()"></span>
-
-          <!--          <x-btn text btn.class="caption font-weight-bold px-2" @click="terminalTabAdd()"-->
-          <!--                 tooltip="API Generator Console (^⇧T)">-->
-
-          <!--            <v-icon key="terminal-dash">-->
-          <!--              mdi-console-->
-          <!--            </v-icon>&nbsp;-->
-          <!--            {{ isDocker ? 'Docker Console' : 'API Generator' }}-->
-          <!--          </x-btn>-->
-
-          <span v-shortkey="[ 'ctrl','shift', 'c']"
-                @shortkey="settingsDialog = true"></span>
-
-
-          <!--          <span v-shortkey="[ 'ctrl','shift', 'd']"-->
-          <!--                @shortkey="openDiscord"></span>-->
-
-
-          <!--          <x-icon key="discord-dash" iconClass="mr-4" @click="openDiscord" tooltip="Discord Chat (^⇧D)">mdi-discord-->
-          <!--          </x-icon>-->
-
-
-          <!--          <x-icon key="github-dash" iconClass="mr-4" @click="openGithub" tooltip="Github">mdi-github-circle-->
-          <!--          </x-icon>-->
-          <!--          <span v-shortkey="[ 'ctrl','shift', 'm']"
-                          @shortkey="$store.commit('windows/MutToggleTheme')"></span>
-
-                    <v-tooltip bottom>
-                      <template v-slot:activator="{ on }">
-                        <v-icon v-on="on" class="mt-1 ml-3" size="22" @click="$store.commit('windows/MutToggleTheme')">
-                          mdi-format-color-fill
-                        </v-icon>
-                      </template>
-                      Change theme (^⇧M)
-                    </v-tooltip>
-
-                    <span v-shortkey="[ 'ctrl','shift', 'b']"
-                          @shortkey="changeTheme"></span>
-                    <v-tooltip bottom>
-                      <template v-slot:activator="{ on }">
-                        <v-icon @dblclick="showAppStore=true" @click="changeTheme" v-on="on" size="23"
-                                :style="$vuetify.theme.dark ? {}:{color:'lightgrey'}"
-                                class="ml-3">mdi-bat
-                        </v-icon>
-                      </template>
-                      <h3 class="pa-3">
-                        {{ $vuetify.theme.dark ? 'It does come in Black (^⇧B)' : 'Does it come in Black ? (^⇧B)' }}
-                        <i></i>
-                      </h3>
-                    </v-tooltip>-->
-
-          <!--          <v-tooltip bottom>-->
-          <!--            <template v-slot:activator="{ on }">-->
-          <!--              <v-icon @click="toggleOutputWindow" class=" ml-3"-->
-          <!--                      v-on="on"-->
-          <!--                      :style="$store.state.windows.outputWindow ? {}:{color:'lightgrey'}">-->
-          <!--                mdi-page-layout-body-->
-          <!--              </v-icon>-->
-          <!--            </template>-->
-          <!--            <span>Toggle output window  (^⇧O)</span>-->
-          <!--          </v-tooltip>-->
-
-          <span v-shortkey="[ 'ctrl','shift', 'o']"
-                @shortkey="toggleOutputWindow"></span>
-
-
-          <!--          <v-tooltip bottom>-->
-          <!--            <template v-slot:activator="{ on }">-->
-          <!--              <v-icon @click="toggleLogWindow" class="ml-4 "-->
-          <!--                      v-on="on"-->
-          <!--                      :style="$store.state.windows.logWindow ? {}:{color:'lightgrey'}">-->
-          <!--                mdi-page-layout-footer-->
-          <!--              </v-icon>-->
-          <!--            </template>-->
-          <!--            <span>Toggle log window  (^⇧L)</span>-->
-          <!--          </v-tooltip>-->
-          <span v-shortkey="[ 'ctrl','shift', 'l']"
-                @shortkey="toggleLogWindow"></span>
+            <!--          <span v-shortkey="['ctrl','shift','g']" @shortkey="graphqlClientTabAdd()"></span>-->
 
 
-          <!--          <v-icon v-if="_isDev" @click="dialogDebugShow">mdi-view-headline</v-icon>-->
-        </template>
-        <template v-else>
-
-          <!--          <x-icon iconClass="mr-4" @click="apiClientSwaggerOpen()" v-if="!$store.state.windows.isComp"-->
-          <!--                  tooltip="API Client (^⇧A)">mdi-code-json-->
-          <!--          </x-icon>-->
+            <!--          <x-btn v-if="isGql" text btn.class="caption font-weight-bold px-2" tooltip="GraphQL Client (^⇧G)"-->
+            <!--                 @click="graphqlClientTabAdd()">-->
 
+            <!--          <v-icon tooltip="GraphQL Client (^⇧G)"-->
+            <!--                  v-if="!$store.state.windows.nc && isGql"-->
+            <!--                  @click="graphqlClientTabAdd()" class="ml-3 " size="20">-->
+            <!--            mdi-graphql-->
+            <!--          </v-icon>-->
+            <!--          <v-icon tooltip="GraphQL Client (^⇧G)"-->
+            <!--                  v-if="isRest"-->
+            <!--                  @click="swaggerClientTabAdd()" class="ml-3 " size="20">-->
+            <!--            mdi-code-json-->
+            <!--          </v-icon>-->
+            <!--            &nbsp;-->
+            <!--            GraphiQL-->
+            <!--          </x-btn>-->
+            <span v-shortkey="['ctrl','shift','g']" @shortkey="graphqlClientTabAdd()"></span>
 
-          <!--          <x-icon iconClass="mr-4" tooltip="Feed (^⇧F)" @click="feedDialog = true">mdi-glasses</x-icon>-->
-          <!--          <span v-shortkey="['ctrl','shift','f']" @shortkey="feedDialog = true"></span>-->
 
-          <!--          <x-icon iconClass="mr-4" @click="settingsTabAdd" size="20" tooltip="Tool Settings (^⇧C)">mdi-cog-->
-          <!--          </x-icon>-->
-          <!--          <x-icon iconClass="mr-4" @click="settingsDialog = true" tooltip="Tool Settings (^⇧C)">mdi-cog-->
-          <!--          </x-icon>-->
-          <!--          <span v-shortkey="[ 'ctrl','shift', 'c']"-->
-          <!--                @shortkey="settingsDialog = true"></span>   -->
-          <span v-shortkey="[ 'ctrl','shift', 'c']"
-                @shortkey="settingsTabAdd"></span>
+            <!--          <x-btn v-if="isGrpc" text btn.class="caption font-weight-bold px-2" tooltip="GraphQL Client (^⇧G)"-->
+            <!--                 @click="grpcTabAdd()">-->
 
-          <span v-shortkey="[ 'ctrl','shift', 'b']"
-                @shortkey="changeTheme"></span>
+            <v-icon
+              v-if="!$store.state.windows.nc && isGrpc"
+              size="20" class="ml-3 " tooltip="GraphQL Client (^⇧G)"
+              @click="grpcTabAdd()">
+              mdi-alpha-g-circle-outline
+            </v-icon>
+            <!--            &nbsp;-->
+            <!--            gRPC-->
+            <!--          </x-btn>-->
 
-          <!--          <span v-shortkey="[ 'ctrl','shift', 'd']"-->
-          <!--                @shortkey="openDiscord"></span>-->
 
+            <!--          <x-icon iconClass="mr-4" @click="apiClientTabAdd()" tooltip="API Client (^⇧A)">mdi-send-->
+            <!--          </x-icon>-->
 
-          <!--          <x-icon key="discord" iconClass="mr-4" @click="openDiscord" tooltip="Discord Chat (^⇧D)">mdi-discord-->
-          <!--          </x-icon>-->
-          <!--          <x-icon key="github" iconClass="mr-4" @click="openGithub" tooltip="Github">mdi-github-circle-->
-          <!--          </x-icon>-->
+            <!--          <x-btn text @click="apiClientSwaggerTabAdd()" tooltip="API Client (^⇧A)"-->
+            <!--                 btn.class="caption font-weight-bold px-2">-->
 
-          <v-tooltip bottom>
-            <template v-slot:activator="{ on }">
-              <v-icon @click="changeTheme" v-on="on" size="23" :style="$vuetify.theme.dark ? {}:{color:'lightgrey'}">
-                mdi-bat
-              </v-icon>
-            </template>
-            <h3 class="pa-3">
-              {{ $vuetify.theme.dark ? 'It does come in Black (^⇧B)' : 'Does it come in Black ? (^⇧B)' }}
-              <i></i>
-            </h3>
-          </v-tooltip>
-          <!--          <notification></notification>-->
 
-          <!--          <v-icon v-if="_isDev" @click="dialogDebugShow">mdi-view-headline</v-icon>-->
-        </template>
+            <v-icon class="ml-3 "
+                    v-if="!$store.state.windows.nc" size="20" @click="apiClientSwaggerTabAdd()"
+                    tooltip="API Client (^⇧A)">mdi-code-json
+            </v-icon>
+            <!--            &nbsp; REST Client-->
+            <!--          </x-btn>-->
 
-        <!--        <v-btn text active-class to="/how-it-works" v-if="!user && !isThisMobile">-->
-        <!--          <b>How it works</b>-->
-        <!--        </v-btn>-->
+            <!--          <x-icon iconClass="mr-4" tooltip="Feed (^⇧F)" @click="feedDialog = true">mdi-glasses</x-icon>-->
+            <!--          <span v-shortkey="['ctrl','shift','f']" @shortkey="feedDialog = true"></span>-->
 
-        <!--        <v-btn text class="ml-1" to="/pricing" v-if="!isThisMobile">-->
-        <!--          <b>Pricing</b>-->
-        <!--        </v-btn>-->
 
+            <span v-shortkey="['ctrl','shift','a']" @shortkey="apiClientTabAdd()"></span>
 
-        <!--        <v-btn text class="ml-1" to="/user/authentication/signin" v-if="!user && !isThisMobile">-->
-        <!--          <b>Log in</b>-->
-        <!--        </v-btn>-->
-        <!--        <v-btn text class="ml-3  elevation-0 "-->
-        <!--               to="/user/authentication/signup" v-if="!user && !isThisMobile">-->
-        <!--          <b>SIGN UP</b>-->
-        <!--        </v-btn>-->
+            <!--          <x-btn text btn.class="caption font-weight-bold px-2" @click="terminalTabAdd()"-->
+            <!--                 tooltip="API Generator Console (^⇧T)">-->
 
-        <!--        <v-btn text class=""-->
-        <!--               to="/referral" v-if="user && !isThisMobile">-->
-        <!--          <b>Refer</b>-->
-        <!--        </v-btn>-->
+            <!--            <v-icon key="terminal-dash">-->
+            <!--              mdi-console-->
+            <!--            </v-icon>&nbsp;-->
+            <!--            {{ isDocker ? 'Docker Console' : 'API Generator' }}-->
+            <!--          </x-btn>-->
 
-        <!--        <v-btn text class=""-->
-        <!--               to="/visits" v-if="user && !isThisMobile">-->
-        <!--          <b>Your Rewards</b>-->
-        <!--        </v-btn>-->
-        <span v-shortkey="['ctrl', 'shift', 't']"
-              @shortkey="terminalTabAdd()" tooltip="Terminal"></span>
+            <span v-shortkey="[ 'ctrl','shift', 'c']"
+                  @shortkey="settingsDialog = true"></span>
 
-        <!--        <x-icon key="settings-dash" iconClass="mr-1 ml-4" @click="settingsDialog = true" tooltip="Tool Settings (^⇧C)">-->
-        <!--          mdi-cog-->
-        <!--        </x-icon>-->
-        <!--        <x-icon key="settings-dash" iconClass="mr-1 ml-4"  size="20" @click="settingsTabAdd" tooltip="Tool Settings (^⇧C)">-->
-        <!--          mdi-cog-->
-        <!--        </x-icon>-->
 
-        <notification class="mx-2"></notification>
+            <!--          <span v-shortkey="[ 'ctrl','shift', 'd']"-->
+            <!--                @shortkey="openDiscord"></span>-->
 
 
-        <v-menu offset-y open-on-hover
-                v-if="isAuthenticated">
+            <!--          <x-icon key="discord-dash" iconClass="mr-4" @click="openDiscord" tooltip="Discord Chat (^⇧D)">mdi-discord-->
+            <!--          </x-icon>-->
 
-          <template v-slot:activator="{ on }">
-            <v-btn text v-on="on" class="font-weight-bold" v-ge="['Profile','']">
 
-              <v-icon v-if="role && roleIcon[role]" size="20">{{ roleIcon[role] }}</v-icon>
-              <v-icon v-else size="20">mdi-account-circle</v-icon>
-              <v-icon small>arrow_drop_down</v-icon>
-            </v-btn>
+            <!--          <x-icon key="github-dash" iconClass="mr-4" @click="openGithub" tooltip="Github">mdi-github-circle-->
+            <!--          </x-icon>-->
+            <!--          <span v-shortkey="[ 'ctrl','shift', 'm']"
+                            @shortkey="$store.commit('windows/MutToggleTheme')"></span>
 
+                      <v-tooltip bottom>
+                        <template v-slot:activator="{ on }">
+                          <v-icon v-on="on" class="mt-1 ml-3" size="22" @click="$store.commit('windows/MutToggleTheme')">
+                            mdi-format-color-fill
+                          </v-icon>
+                        </template>
+                        Change theme (^⇧M)
+                      </v-tooltip>
+
+                      <span v-shortkey="[ 'ctrl','shift', 'b']"
+                            @shortkey="changeTheme"></span>
+                      <v-tooltip bottom>
+                        <template v-slot:activator="{ on }">
+                          <v-icon @dblclick="showAppStore=true" @click="changeTheme" v-on="on" size="23"
+                                  :style="$vuetify.theme.dark ? {}:{color:'lightgrey'}"
+                                  class="ml-3">mdi-bat
+                          </v-icon>
+                        </template>
+                        <h3 class="pa-3">
+                          {{ $vuetify.theme.dark ? 'It does come in Black (^⇧B)' : 'Does it come in Black ? (^⇧B)' }}
+                          <i></i>
+                        </h3>
+                      </v-tooltip>-->
+
+            <!--          <v-tooltip bottom>-->
+            <!--            <template v-slot:activator="{ on }">-->
+            <!--              <v-icon @click="toggleOutputWindow" class=" ml-3"-->
+            <!--                      v-on="on"-->
+            <!--                      :style="$store.state.windows.outputWindow ? {}:{color:'lightgrey'}">-->
+            <!--                mdi-page-layout-body-->
+            <!--              </v-icon>-->
+            <!--            </template>-->
+            <!--            <span>Toggle output window  (^⇧O)</span>-->
+            <!--          </v-tooltip>-->
+
+            <span v-shortkey="[ 'ctrl','shift', 'o']"
+                  @shortkey="toggleOutputWindow"></span>
+
+
+            <!--          <v-tooltip bottom>-->
+            <!--            <template v-slot:activator="{ on }">-->
+            <!--              <v-icon @click="toggleLogWindow" class="ml-4 "-->
+            <!--                      v-on="on"-->
+            <!--                      :style="$store.state.windows.logWindow ? {}:{color:'lightgrey'}">-->
+            <!--                mdi-page-layout-footer-->
+            <!--              </v-icon>-->
+            <!--            </template>-->
+            <!--            <span>Toggle log window  (^⇧L)</span>-->
+            <!--          </v-tooltip>-->
+            <span v-shortkey="[ 'ctrl','shift', 'l']"
+                  @shortkey="toggleLogWindow"></span>
+
+
+            <!--          <v-icon v-if="_isDev" @click="dialogDebugShow">mdi-view-headline</v-icon>-->
+          </template>
+          <template v-else>
+
+            <!--          <x-icon iconClass="mr-4" @click="apiClientSwaggerOpen()" v-if="!$store.state.windows.isComp"-->
+            <!--                  tooltip="API Client (^⇧A)">mdi-code-json-->
+            <!--          </x-icon>-->
+
+
+            <!--          <x-icon iconClass="mr-4" tooltip="Feed (^⇧F)" @click="feedDialog = true">mdi-glasses</x-icon>-->
+            <!--          <span v-shortkey="['ctrl','shift','f']" @shortkey="feedDialog = true"></span>-->
+
+            <!--          <x-icon iconClass="mr-4" @click="settingsTabAdd" size="20" tooltip="Tool Settings (^⇧C)">mdi-cog-->
+            <!--          </x-icon>-->
+            <!--          <x-icon iconClass="mr-4" @click="settingsDialog = true" tooltip="Tool Settings (^⇧C)">mdi-cog-->
+            <!--          </x-icon>-->
+            <!--          <span v-shortkey="[ 'ctrl','shift', 'c']"-->
+            <!--                @shortkey="settingsDialog = true"></span>   -->
+            <span v-shortkey="[ 'ctrl','shift', 'c']"
+                  @shortkey="settingsTabAdd"></span>
+
+            <span v-shortkey="[ 'ctrl','shift', 'b']"
+                  @shortkey="changeTheme"></span>
+
+            <!--          <span v-shortkey="[ 'ctrl','shift', 'd']"-->
+            <!--                @shortkey="openDiscord"></span>-->
+
+
+            <!--          <x-icon key="discord" iconClass="mr-4" @click="openDiscord" tooltip="Discord Chat (^⇧D)">mdi-discord-->
+            <!--          </x-icon>-->
+            <!--          <x-icon key="github" iconClass="mr-4" @click="openGithub" tooltip="Github">mdi-github-circle-->
+            <!--          </x-icon>-->
+
+            <v-tooltip bottom>
+              <template v-slot:activator="{ on }">
+                <v-icon @click="changeTheme" v-on="on" size="23" :style="$vuetify.theme.dark ? {}:{color:'lightgrey'}">
+                  mdi-bat
+                </v-icon>
+              </template>
+              <h3 class="pa-3">
+                {{ $vuetify.theme.dark ? 'It does come in Black (^⇧B)' : 'Does it come in Black ? (^⇧B)' }}
+                <i></i>
+              </h3>
+            </v-tooltip>
+            <!--          <notification></notification>-->
+
+            <!--          <v-icon v-if="_isDev" @click="dialogDebugShow">mdi-view-headline</v-icon>-->
           </template>
-          <v-list dense>
-            <v-list-item dense to="/user/settings" v-if="userAuthIsEmail">
-              <v-list-item-title v-ge="['Settings','']">
-                <v-icon small>mdi-cog</v-icon> &nbsp; <span class="font-weight-regular">Settings</span>
-              </v-list-item-title>
-            </v-list-item>
-            <v-divider v-if="userAuthIsEmail"></v-divider>
 
-            <template v-if="isDocker">
+          <!--        <v-btn text active-class to="/how-it-works" v-if="!user && !isThisMobile">-->
+          <!--          <b>How it works</b>-->
+          <!--        </v-btn>-->
 
-              <!--              <v-list-item @click="xcMetaTabAdd" v-ge="['Meta add','']">-->
-              <!--                <v-list-item-title>-->
+          <!--        <v-btn text class="ml-1" to="/pricing" v-if="!isThisMobile">-->
+          <!--          <b>Pricing</b>-->
+          <!--        </v-btn>-->
 
-              <!--                  <v-icon small>mdi-file-table-box-multiple-outline</v-icon>&nbsp; Export/Import Metadata-->
-              <!--                </v-list-item-title>-->
-              <!--              </v-list-item>-->
-              <!--              <v-list-item @click="showChangeEnv = true" v-ge="['Change env','']">-->
-              <!--                <v-list-item-title>-->
 
-              <!--                  <v-icon small>mdi-test-tube</v-icon>&nbsp; Change Environment-->
-              <!--                </v-list-item-title>-->
-              <!--              </v-list-item>-->
-              <!--              <v-list-item @click="terminalTabAdd()" v-ge="[isDocker ? 'Docker Console' : 'API Generator','']">
-                              <v-list-item-title>
+          <!--        <v-btn text class="ml-1" to="/user/authentication/signin" v-if="!user && !isThisMobile">-->
+          <!--          <b>Log in</b>-->
+          <!--        </v-btn>-->
+          <!--        <v-btn text class="ml-3  elevation-0 "-->
+          <!--               to="/user/authentication/signup" v-if="!user && !isThisMobile">-->
+          <!--          <b>SIGN UP</b>-->
+          <!--        </v-btn>-->
 
+          <!--        <v-btn text class=""-->
+          <!--               to="/referral" v-if="user && !isThisMobile">-->
+          <!--          <b>Refer</b>-->
+          <!--        </v-btn>-->
 
-                                <v-icon small key="terminal-dash">
-                                  mdi-console
-                                </v-icon>&nbsp;
-                                {{ isDocker ? 'Docker Console' : 'API Generator' }}
+          <!--        <v-btn text class=""-->
+          <!--               to="/visits" v-if="user && !isThisMobile">-->
+          <!--          <b>Your Rewards</b>-->
+          <!--        </v-btn>-->
+          <span v-shortkey="['ctrl', 'shift', 't']"
+                @shortkey="terminalTabAdd()" tooltip="Terminal"></span>
 
-                              </v-list-item-title>
-                            </v-list-item>-->
+          <!--        <x-icon key="settings-dash" iconClass="mr-1 ml-4" @click="settingsDialog = true" tooltip="Tool Settings (^⇧C)">-->
+          <!--          mdi-cog-->
+          <!--        </x-icon>-->
+          <!--        <x-icon key="settings-dash" iconClass="mr-1 ml-4"  size="20" @click="settingsTabAdd" tooltip="Tool Settings (^⇧C)">-->
+          <!--          mdi-cog-->
+          <!--        </x-icon>-->
 
+          <notification class="mx-2"></notification>
 
-              <v-list-item dense @click.stop="$toast.success('Auth token copied to clipboard').goAway(3000)"
-                           v-clipboard="this.$store.state.users.token">
-                <v-list-item-title>
 
+          <v-menu offset-y open-on-hover
+                  v-if="isAuthenticated">
+
+            <template v-slot:activator="{ on }">
+              <v-btn text v-on="on" class="font-weight-bold" v-ge="['Profile','']">
 
-                  <v-icon small key="terminal-dash">
-                    mdi-console
-                  </v-icon>&nbsp;
-                  <span class="font-weight-regular">Copy auth token</span>
+                <v-icon v-if="role && roleIcon[role]" size="20">{{ roleIcon[role] }}</v-icon>
+                <v-icon v-else size="20">mdi-account-circle</v-icon>
+                <v-icon small>arrow_drop_down</v-icon>
+              </v-btn>
 
+            </template>
+            <v-list dense>
+              <v-list-item dense to="/user/settings" v-if="userAuthIsEmail">
+                <v-list-item-title v-ge="['Settings','']">
+                  <v-icon small>mdi-cog</v-icon> &nbsp; <span class="font-weight-regular">Settings</span>
                 </v-list-item-title>
               </v-list-item>
-              <!--
-                            <v-list-item dense @click.stop="projectInfoTabAdd">
-                              <v-list-item-title>
-
-                                <v-icon small key="terminal-dash">
-                                  mdi-information-outline
-                                </v-icon>&nbsp;
-                                <span class="font-weight-regular">Project Info</span>
-
-                              </v-list-item-title>
-                            </v-list-item>-->
-              <v-list-item v-if="swaggerOrGraphiqlUrl" dense
-                           @click.stop="openUrl(`${$axios.defaults.baseURL}${swaggerOrGraphiqlUrl}`)">
-                <v-list-item-title>
+              <v-divider v-if="userAuthIsEmail"></v-divider>
 
-                  <v-icon small key="terminal-dash">
-                    {{ isGql ? 'mdi-graphql' : 'mdi-code-json' }}
-                  </v-icon>&nbsp;
-                  <span class="font-weight-regular">
-                    {{ isGql ? 'GraphQL APIs' : 'Swagger APIs Doc' }}</span>
+              <template v-if="isDocker">
 
-                </v-list-item-title>
-              </v-list-item>
+                <!--              <v-list-item @click="xcMetaTabAdd" v-ge="['Meta add','']">-->
+                <!--                <v-list-item-title>-->
 
-              <v-list-item dense @click.stop="settingsTabAdd">
-                <v-list-item-title>
+                <!--                  <v-icon small>mdi-file-table-box-multiple-outline</v-icon>&nbsp; Export/Import Metadata-->
+                <!--                </v-list-item-title>-->
+                <!--              </v-list-item>-->
+                <!--              <v-list-item @click="showChangeEnv = true" v-ge="['Change env','']">-->
+                <!--                <v-list-item-title>-->
 
-                  <v-icon small key="terminal-dash">
-                    mdi-cog
-                  </v-icon>&nbsp;
-                  <span class="font-weight-regular">Themes</span>
+                <!--                  <v-icon small>mdi-test-tube</v-icon>&nbsp; Change Environment-->
+                <!--                </v-list-item-title>-->
+                <!--              </v-list-item>-->
+                <!--              <v-list-item @click="terminalTabAdd()" v-ge="[isDocker ? 'Docker Console' : 'API Generator','']">
+                                <v-list-item-title>
 
-                </v-list-item-title>
-              </v-list-item>
 
+                                  <v-icon small key="terminal-dash">
+                                    mdi-console
+                                  </v-icon>&nbsp;
+                                  {{ isDocker ? 'Docker Console' : 'API Generator' }}
 
-              <v-list-item v-if="isDashboard" dense @click="copyProjectInfo" v-ge="['Sign Out','']">
-                <v-list-item-title>
+                                </v-list-item-title>
+                              </v-list-item>-->
 
-                  <v-icon small>info</v-icon>&nbsp; <span class="font-weight-regular">Copy Project info</span>
-                </v-list-item-title>
-              </v-list-item>
 
-              <v-list-item dense @click="MtdSignOut" v-ge="['Sign Out','']">
-                <v-list-item-title>
+                <v-list-item dense @click.stop="$toast.success('Auth token copied to clipboard').goAway(3000)"
+                             v-clipboard="this.$store.state.users.token">
+                  <v-list-item-title>
 
-                  <v-icon small>mdi-logout</v-icon>&nbsp; <span class="font-weight-regular">Sign Out</span>
-                </v-list-item-title>
-              </v-list-item>
-            </template>
-          </v-list>
-        </v-menu>
-        <v-menu offset-y v-else open-on-hover>
 
-          <template v-slot:activator="{ on }">
-            <v-btn text v-on="on" class=" font-weight-bold" v-ge="['Profile','']">
-              <!--              Menu-->
-              <v-icon>mdi-account</v-icon>
-              <v-icon>arrow_drop_down</v-icon>
-            </v-btn>
+                    <v-icon small key="terminal-dash">
+                      mdi-console
+                    </v-icon>&nbsp;
+                    <span class="font-weight-regular">Copy auth token</span>
 
-          </template>
-          <v-list dense>
-            <v-list-item dense v-if="!user && !isThisMobile" to="/user/authentication/signup">
-              <v-list-item-title>
-                <v-icon small>mdi-account-plus-outline</v-icon> &nbsp; <span class="font-weight-regular">Sign Up</span>
-              </v-list-item-title>
-            </v-list-item>
-            <v-list-item dense v-if="!user && !isThisMobile" to="/user/authentication/signin">
-              <v-list-item-title>
-                <v-icon small>mdi-login</v-icon> &nbsp; <span class="font-weight-regular">Login</span>
-              </v-list-item-title>
-            </v-list-item>
-            <!--            <v-list-item @click="openPricingPage">-->
-            <!--              <v-list-item-title>-->
-
-            <!--                <v-icon small>mdi-currency-usd</v-icon>&nbsp; Pricing-->
-            <!--              </v-list-item-title>-->
-            <!--            </v-list-item>-->
-            <!--            <v-list-item @click="openHowItWorks">-->
-            <!--              <v-list-item-title>-->
-            <!--                <v-icon small>mdi-help-circle</v-icon> &nbsp; How it works-->
-            <!--              </v-list-item-title>-->
-            <!--            </v-list-item>-->
-          </v-list>
-        </v-menu>
+                  </v-list-item-title>
+                </v-list-item>
+                <!--
+                              <v-list-item dense @click.stop="projectInfoTabAdd">
+                                <v-list-item-title>
 
+                                  <v-icon small key="terminal-dash">
+                                    mdi-information-outline
+                                  </v-icon>&nbsp;
+                                  <span class="font-weight-regular">Project Info</span>
 
-      </v-toolbar-items>
+                                </v-list-item-title>
+                              </v-list-item>-->
+                <v-list-item v-if="swaggerOrGraphiqlUrl" dense
+                             @click.stop="openUrl(`${$axios.defaults.baseURL}${swaggerOrGraphiqlUrl}`)">
+                  <v-list-item-title>
+
+                    <v-icon small key="terminal-dash">
+                      {{ isGql ? 'mdi-graphql' : 'mdi-code-json' }}
+                    </v-icon>&nbsp;
+                    <span class="font-weight-regular">
+                    {{ isGql ? 'GraphQL APIs' : 'Swagger APIs Doc' }}</span>
+
+                  </v-list-item-title>
+                </v-list-item>
+
+                <v-list-item dense @click.stop="settingsTabAdd">
+                  <v-list-item-title>
+
+                    <v-icon small key="terminal-dash">
+                      mdi-cog
+                    </v-icon>&nbsp;
+                    <span class="font-weight-regular">Themes</span>
+
+                  </v-list-item-title>
+                </v-list-item>
+
+
+                <v-list-item v-if="isDashboard" dense @click="copyProjectInfo" v-ge="['Sign Out','']">
+                  <v-list-item-title>
+
+                    <v-icon small>info</v-icon>&nbsp; <span class="font-weight-regular">Copy Project info</span>
+                  </v-list-item-title>
+                </v-list-item>
+
+                <v-list-item dense @click="MtdSignOut" v-ge="['Sign Out','']">
+                  <v-list-item-title>
+
+                    <v-icon small>mdi-logout</v-icon>&nbsp; <span class="font-weight-regular">Sign Out</span>
+                  </v-list-item-title>
+                </v-list-item>
+              </template>
+            </v-list>
+          </v-menu>
+          <v-menu offset-y v-else open-on-hover>
+
+            <template v-slot:activator="{ on }">
+              <v-btn text v-on="on" class=" font-weight-bold" v-ge="['Profile','']">
+                <!--              Menu-->
+                <v-icon>mdi-account</v-icon>
+                <v-icon>arrow_drop_down</v-icon>
+              </v-btn>
+
+            </template>
+            <v-list dense>
+              <v-list-item dense v-if="!user && !isThisMobile" to="/user/authentication/signup">
+                <v-list-item-title>
+                  <v-icon small>mdi-account-plus-outline</v-icon> &nbsp; <span
+                  class="font-weight-regular">Sign Up</span>
+                </v-list-item-title>
+              </v-list-item>
+              <v-list-item dense v-if="!user && !isThisMobile" to="/user/authentication/signin">
+                <v-list-item-title>
+                  <v-icon small>mdi-login</v-icon> &nbsp; <span class="font-weight-regular">Login</span>
+                </v-list-item-title>
+              </v-list-item>
+              <!--            <v-list-item @click="openPricingPage">-->
+              <!--              <v-list-item-title>-->
+
+              <!--                <v-icon small>mdi-currency-usd</v-icon>&nbsp; Pricing-->
+              <!--              </v-list-item-title>-->
+              <!--            </v-list-item>-->
+              <!--            <v-list-item @click="openHowItWorks">-->
+              <!--              <v-list-item-title>-->
+              <!--                <v-icon small>mdi-help-circle</v-icon> &nbsp; How it works-->
+              <!--              </v-list-item-title>-->
+              <!--            </v-list-item>-->
+            </v-list>
+          </v-menu>
+
+
+        </v-toolbar-items>
     </v-app-bar>
 
     <v-main class="pb-0 mb-0">
@@ -885,7 +884,8 @@ export default {
     snackbar: false,
     timeout: 10000,
     text: 'contact@senseprofit.com',
-    rolesList: null
+    rolesList: null,
+
   }),
   computed: {
     ...mapGetters({
@@ -1193,7 +1193,9 @@ export default {
         item._nodes.type = 'roles';
         this.$store.dispatch("tabs/ActAddTab", item);
       }
-
+      setTimeout(() => {
+        this.$eventBus.$emit('show-add-user');
+      }, 200)
     },
     settingsTabAdd() {
       const tabIndex = this.tabs.findIndex(el => el.key === `projectSettings`);
diff --git a/packages/nc-gui/nuxt.config.js b/packages/nc-gui/nuxt.config.js
index c4c5205f79..6f4488f95a 100644
--- a/packages/nc-gui/nuxt.config.js
+++ b/packages/nc-gui/nuxt.config.js
@@ -55,6 +55,7 @@ export default {
     "@/plugins/vueClipboard",
     "@/plugins/globalComponentLoader",
     "@/plugins/globalMixin",
+    "@/plugins/globalEventBus",
     "~/plugins/i18n.js",
     {src: '~plugins/projectLoader.js', ssr: false}
   ],
diff --git a/packages/nc-gui/pages/projects/index.vue b/packages/nc-gui/pages/projects/index.vue
index 5655077e22..8ece789f0c 100644
--- a/packages/nc-gui/pages/projects/index.vue
+++ b/packages/nc-gui/pages/projects/index.vue
@@ -508,7 +508,7 @@
         <v-list-item
           dense
           target="_blank"
-          href="https://calendly.com/xgenecloud/demo"
+          href="https://calendly.com/nocodb"
         >
           <v-list-item-icon>
             <v-icon class="ml-2" :color="textColors[3]"
diff --git a/packages/nc-gui/plugins/globalEventBus.js b/packages/nc-gui/plugins/globalEventBus.js
new file mode 100644
index 0000000000..8f11f14f89
--- /dev/null
+++ b/packages/nc-gui/plugins/globalEventBus.js
@@ -0,0 +1,9 @@
+import Vue from 'vue';
+
+const GlobalPlugins = {
+  install(v) {
+    v.prototype.$eventBus = new Vue();
+  },
+};
+
+Vue.use(GlobalPlugins);
diff --git a/packages/nc-gui/static/lang/en.json b/packages/nc-gui/static/lang/en.json
index e95bc79012..739d627e1f 100644
--- a/packages/nc-gui/static/lang/en.json
+++ b/packages/nc-gui/static/lang/en.json
@@ -22,6 +22,7 @@
   "projects.show_community_message_1_2": "us on Github",
   "projects.show_community_message_2": "Book a Free DEMO",
   "projects.show_community_message_3": "Get your questions answered",
+  "projects.show_community_message_3_short": "Join Discord",
   "projects.show_community_message_4": "Follow NocoDB",
   "projects.search.no_result": "Your search for {search} found no results",
   "projects.ext_db.title.edit": "Edit Project",
diff --git a/packages/nc-gui/static/lang/fr.json b/packages/nc-gui/static/lang/fr.json
index b7dd8500b1..bcc64a4fa7 100644
--- a/packages/nc-gui/static/lang/fr.json
+++ b/packages/nc-gui/static/lang/fr.json
@@ -22,6 +22,7 @@
   "projects.show_community_message_1_2": "sur Github",
   "projects.show_community_message_2": "Planifier une démo gratuite",
   "projects.show_community_message_3": "Obtenir des réponses à vos questions",
+  "projects.show_community_message_3_short": "Join Discord",
   "projects.show_community_message_4": "Suivre NocoDB",
   "projects.search.no_result": "Votre recherche pour {search} n'a renvoyée aucun résultat",
   "projects.ext_db.title.edit": "Editer le projet",
diff --git a/packages/nc-gui/static/lang/ja.json b/packages/nc-gui/static/lang/ja.json
index 7f1c5c77f1..68c0fd7837 100644
--- a/packages/nc-gui/static/lang/ja.json
+++ b/packages/nc-gui/static/lang/ja.json
@@ -22,6 +22,7 @@
   "projects.show_community_message_1_2": "us on Github",
   "projects.show_community_message_2": "Book a Free DEMO",
   "projects.show_community_message_3": "Get your questions answered",
+  "projects.show_community_message_3_short": "Join Discord",
   "projects.show_community_message_4": "Follow NocoDB",
   "projects.search.no_result": "Your search for {search} found no results",
   "projects.ext_db.title.edit": "Edit Project",
diff --git a/packages/nc-gui/static/lang/zh.json b/packages/nc-gui/static/lang/zh.json
index e15214a35e..756569b975 100644
--- a/packages/nc-gui/static/lang/zh.json
+++ b/packages/nc-gui/static/lang/zh.json
@@ -22,6 +22,7 @@
     "projects.show_community_message_1_2": "us on Github",
     "projects.show_community_message_2": "Book a Free DEMO",
     "projects.show_community_message_3": "Get your questions answered",
+    "projects.show_community_message_3_short": "Join Discord",
     "projects.show_community_message_4": "Follow NocoDB",
     "projects.search.no_result": "Your search for {search} found no results",
     "projects.ext_db.title.edit": "Edit Project",
@@ -128,4 +129,3 @@
     "management.meta.operation_4.desc": "Import project meta zip file and restart.",
     "management.meta.operation_5.desc": "Clear all metadata from meta tables."
   }
-  
\ No newline at end of file
diff --git a/packages/nc-lib-gui/package.json b/packages/nc-lib-gui/package.json
index 24d0218b88..c1bd7dbe1d 100644
--- a/packages/nc-lib-gui/package.json
+++ b/packages/nc-lib-gui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nc-lib-gui",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "> TODO: description",
   "author": "“pranavxc” <pranavxc@gmail.com>",
   "homepage": "https://gitlab.com/xgenecloud-ts/xgenecloud-ts#readme",
diff --git a/packages/nocodb/src/lib/noco/rest/RestAuthCtrlEE.ts b/packages/nocodb/src/lib/noco/rest/RestAuthCtrlEE.ts
index 4f4347d275..b0b035aa6c 100644
--- a/packages/nocodb/src/lib/noco/rest/RestAuthCtrlEE.ts
+++ b/packages/nocodb/src/lib/noco/rest/RestAuthCtrlEE.ts
@@ -11,15 +11,17 @@ export default class RestAuthCtrlEE extends RestAuthCtrl {
 
   protected async addAdmin(req, res, next): Promise<any> {
 
-    // if (!this.config?.mailer || !this.emailClient) {
-    //   return next(new Error('SMTP config is not found'));
-    // }
+    const emails = (req.body.email || '').split(/\s*,\s*/).map(v => v.trim());
 
-    const email = req.body.email;
-
-    if (!email || !validator.isEmail(email)) {
+    // check for invalid emails
+    const invalidEmails = emails.filter(v => !validator.isEmail(v))
+    if (!emails.length) {
       return next(new Error('Invalid email address'));
     }
+    if (invalidEmails.length) {
+      return next(new Error('Invalid email address : ' + invalidEmails.join(', ')));
+    }
+
 
     // todo: handle roles which contains super
     if (!req.session?.passport?.user?.roles?.owner && req.body.roles.indexOf('owner') > -1) {
@@ -27,45 +29,68 @@ export default class RestAuthCtrlEE extends RestAuthCtrl {
     }
 
     const invite_token = uuidv4();
+    const error = [];
 
-    const user = await this.users.where({email}).first();
-    if (user) {
-      if (!await this.xcMeta.isUserHaveAccessToProject(req.body.project_id, user.id)) {
-        await this.xcMeta.projectAddUser(req.body.project_id, user.id, 'editor');
-      }
-    } else {
-      try {
-        await this.users.insert({
-          invite_token,
-          invite_token_expires: new Date(Date.now() + (24 * 60 * 60 * 1000)),
-          email,
-          roles: 'user'
-        });
-
-        const {id} = await this.users.where({email}).first();
-        await this.xcMeta.projectAddUser(req.body.project_id, id, req.body.roles);
-
+    for (const email of emails) {
 
-        if (!await this.sendInviteEmail(email, invite_token, req)) {
-          res.json({invite_token, email})
+      // add user to project if user already exist
+      const user = await this.users.where({email}).first();
+      if (user) {
+        if (!await this.xcMeta.isUserHaveAccessToProject(req.body.project_id, user.id)) {
+          await this.xcMeta.projectAddUser(req.body.project_id, user.id, 'editor');
+        }
+        this.xcMeta.audit(req.body.project_id, null, 'nc_audit', {
+          op_type: 'AUTHENTICATION',
+          op_sub_type: 'INVITE',
+          user: req.user.email,
+          description: `invited ${email} to ${req.body.project_id} project `, ip: req.clientIp
+        })
+      } else {
+        try {
+          // create new user with invite token
+          await this.users.insert({
+            invite_token,
+            invite_token_expires: new Date(Date.now() + (24 * 60 * 60 * 1000)),
+            email,
+            roles: 'user'
+          });
+
+          const {id} = await this.users.where({email}).first();
+          // add user to project
+          await this.xcMeta.projectAddUser(req.body.project_id, id, req.body.roles);
+
+          Tele.emit('evt', {evt_type: 'project:invite'})
+          this.xcMeta.audit(req.body.project_id, null, 'nc_audit', {
+            op_type: 'AUTHENTICATION',
+            op_sub_type: 'INVITE',
+            user: req.user.email,
+            description: `invited ${email} to ${req.body.project_id} project `, ip: req.clientIp
+          })
+          // in case of single user check for smtp failure
+          // and send back token if failed
+          if (emails.length === 1 && !await this.sendInviteEmail(email, invite_token, req)) {
+            return res.json({invite_token, email});
+          } else {
+            this.sendInviteEmail(email, invite_token, req)
+          }
+        } catch (e) {
+          if (emails.length === 1) {
+            return next(e);
+          } else {
+            error.push({email, error: e.message})
+          }
         }
-      } catch (e) {
-        return next(e);
       }
-    }
-
 
-    Tele.emit('evt', {evt_type: 'project:invite'})
-    this.xcMeta.audit(req.body.project_id, null, 'nc_audit', {
-      op_type: 'AUTHENTICATION',
-      op_sub_type: 'INVITE',
-      user: req.user.email,
-      description: `invited ${email} to ${req.body.project_id} project `, ip: req.clientIp
-    })
+    }
 
-    res.json({
-      msg: 'success'
-    })
+    if (emails.length === 1) {
+      res.json({
+        msg: 'success'
+      })
+    } else {
+      return res.json({invite_token, emails, error});
+    }
   }
 
   protected async updateAdmin(req, res, next): Promise<any> {