add start guid

src/components/MainMenu.vue

@@ -8,7 +8,7 @@
       <button
         v-if="$store.state.tabs.length > 0"
         class="primary"
-        :disabled="!$store.state.currentTab.isUnsaved"
+        :disabled="$store.state.currentTab && !$store.state.currentTab.isUnsaved"
         @click="saveQuery"
       >
         Save
@@ -23,6 +23,9 @@ import { nanoid } from 'nanoid'
 
 export default {
   name: 'MainMenu',
+  created () {
+    this.$root.$on('createNewQuery', this.createNewQuery)
+  },
   methods: {
     createNewQuery () {
       const tab = {

src/components/Tabs.vue

@@ -1,6 +1,6 @@
 <template>
-   <div>
-    <div id="tabs__header">
+   <div id="tabs-container">
+    <div id="tabs__header" v-if="tabs.length > 0">
       <div
         v-for="(tab, index) in tabs"
         :key="tab.id"
@@ -36,6 +36,11 @@
       :init-name="tab.name"
       :tab-index="index"
     />
+    <div v-if="tabs.length === 0" id="start-guid">
+      <span class="link" @click="$root.$emit('createNewQuery')">Create</span>
+      a new query from scratch or open the one from
+      <router-link class="link" to="/my-queries">My queries</router-link>
+    </div>
   </div>
 </template>
 
@@ -70,6 +75,10 @@ export default {
 </script>
 
 <style>
+#tabs-container {
+  position: relative;
+  height: 100%;
+}
 #tabs__header {
   display: flex;
   margin: 0;
@@ -129,4 +138,18 @@ export default {
   fill: var(--color-text-base);
   cursor: pointer;
 }
+#start-guid {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--color-text-base);
+  font-size: 14px;
+  text-align: center;
+}
+.link {
+  color: var(--color-accent);
+  text-decoration: none;
+  cursor: pointer;
+}
 </style>

src/views/Editor.vue

@@ -5,12 +5,12 @@
       :before="{ size: 20, max: 30 }"
       :after="{ size: 80, max: 100 }"
     >
-      <div slot="left-pane">
+      <template #left-pane>
         <schema />
-      </div>
-      <div slot="right-pane">
+      </template>
+      <template #right-pane>
         <tabs />
-      </div>
+      </template>
     </splitpanes>
   </div>
 </template>