adding and closing tabs; saving of queries

src/components/Tabs.vue

@@ -2,19 +2,39 @@
    <div>
     <div id="tabs__header">
       <div
-        v-for="tab in tabs"
+        v-for="(tab, index) in tabs"
         :key="tab.id"
         @click="selectTab(tab.id)"
-        :class='{"tab__selected": (tab.id === selectedIndex)}'
+        :class="[{'tab__selected': (tab.id === selectedIndex)}, 'tab']"
       >
-        {{ tab.name }}
+        <div class="tab-name">
+          <span v-show="tab.isUnsaved">*</span>
+          <span v-if="tab.name">{{ tab.name }}</span>
+          <span v-else class="tab-untitled">{{ tab.tempName }}</span>
+        </div>
+        <div>
+          <svg
+            class="close-icon"
+            @click.stop="closeTab(index)"
+            width="10"
+            height="10"
+            viewBox="0 0 14 14"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"
+              fill="#A2B1C6"/>
+          </svg>
+        </div>
       </div>
     </div>
     <tab-content
-      v-for="tab in tabs"
+      v-for="(tab, index) in tabs"
       :key="tab.id"
-      :is-active="tab.isActive"
-      :name="tab.name"
+      :id="tab.id"
+      :init-name="tab.name"
+      :tab-index="index"
     />
   </div>
 </template>
@@ -28,19 +48,22 @@ export default {
   },
   data () {
     return {
-      selectedIndex: 0,
-      tabs: [
-        { id: 1, name: 'New query', isActive: true },
-        { id: 2, name: 'New query 2', isActive: false }
-      ]
+    }
+  },
+  computed: {
+    tabs () {
+      return this.$store.state.tabs
+    },
+    selectedIndex () {
+      return this.$store.state.currentTabId
     }
   },
   methods: {
     selectTab (id) {
-      this.selectedIndex = id
-      this.tabs.forEach(tab => {
-        tab.isActive = (tab.id === id)
-      })
+      this.$store.commit('setCurrentTabId', id)
+    },
+    closeTab (index) {
+      this.$store.commit('deleteTab', index)
     }
   }
 }
@@ -50,8 +73,10 @@ export default {
 #tabs__header {
   display: flex;
   margin: 0;
+  max-width: 100%;
+  overflow: hidden;
 }
-#tabs__header div {
+#tabs__header .tab {
   height: 36px;
   background-color: var(--color-bg-light);
   border-right: 1px solid var(--color-border-light);
@@ -62,7 +87,18 @@ export default {
   padding: 0 12px;
   box-sizing: border-box;
   position: relative;
+  max-width: 200px;
+  display: flex;
+  flex-shrink: 1;
+  min-width: 0;
 }
+#tabs__header .tab-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 1;
+}
+
 #tabs__header div:hover {
   cursor: pointer;
 }
@@ -84,4 +120,13 @@ export default {
   top: 0;
   left: 0;
 }
+
+.close-icon {
+  margin-left: 5px;
+}
+
+.close-icon:hover path {
+  fill: var(--color-text-base);
+  cursor: pointer;
+}
 </style>