better title update

src/Dashboard.vue

@@ -65,19 +65,16 @@
 
     <template v-if="asciibirdMeta.length">
       <span v-for="(value, key) in asciibirdMeta" :key="key" class="mr-2">
-        
-          <t-button class="p-1" @click="changeTab(key, value)">
-            {{ value.title }}
+        <t-button class="p-1" @click="changeTab(key, value)">
+          {{ value.title }}
 
-              <t-button
-                class="text-sm pl-1 p-1 h-8 rounded-xl text-white border border-transparent shadow-sm hover:bg-blue-500 bg-gray-600"
-                @click="closeTab(key)"
-              >
-                X
-              </t-button>
+          <t-button
+            :class="`(currentTab === key) ? 'text-sm pl-1 p-1 h-8 rounded-xl text-white border border-transparent shadow-sm hover:bg-blue-500 bg-gray-600' : ''`"
+            @click="closeTab(key)"
+          >
+            X
           </t-button>
-
-        
+        </t-button>
       </span>
 
       <Toolbar :canvas-x="canvasX" :canvas-y="canvasY" />
@@ -220,6 +217,11 @@ export default {
     currentAscii() {
       return this.$store.getters.currentAscii;
     },
+    buttonStyle() {
+      return this.currentTab
+        ? `text-sm pl-1 p-1 h-8 rounded-xl text-white border border-transparent shadow-sm hover:bg-blue-500 bg-gray-600`
+        : `text-sm pl-1 p-1 h-8 rounded-xl text-white border border-transparent shadow-sm hover:bg-blue-500 bg-gray-600`;
+    },
   },
   methods: {
     openContextMenu(e) {
@@ -288,7 +290,9 @@ export default {
           "application/gzip"
         );
       } catch (err) {
-        console.log(err);
+        this.$toasted.show(err, {
+          type: "error",
+        });
       }
     },
     startExport(type) {
@@ -298,10 +302,14 @@ export default {
         case "clipboard":
           this.$copyText(ascii.output.join("")).then(
             (e) => {
-              alert("Copied");
+              this.$toasted.show("Copied mIRC to clipboard!", {
+                type: "success",
+              });
             },
             (e) => {
-              alert("Can not copy");
+              this.$toasted.show("Error when copying mIRC to clipboard!", {
+                type: "error",
+              });
             }
           );
           break;
@@ -320,7 +328,7 @@ export default {
     closeTab(key) {
       this.$dialog
         .confirm({
-          title: `Close ${this.currentAscii.title}?`,
+          title: `Close ${this.asciibirdMeta[key].title}?`,
           text: "This action cannot be undone and the ASCII will be gone.",
           icon: "info",
         })

src/ascii.js

@@ -419,7 +419,7 @@ export const parseMircAscii = async (content, title) => {
   store.commit('newAsciibirdMeta', finalAscii);
 
   // Update the browsers title to the ASCII filename
-  document.title = `asciibird - ${store.getters.currentAscii.title}`;
+  
 
   return true;
 };

src/store/index.js

@@ -87,6 +87,7 @@ export default new Vuex.Store({
     },
     changeTab(state, payload) {
       state.tab = payload;
+      document.title = `asciibird - ${state.asciibirdMeta[payload].title}`;
     },
     changeDebugPanelState(state, payload) {
       state.debugPanelState = payload;
@@ -156,6 +157,7 @@ export default new Vuex.Store({
     newAsciibirdMeta(state, payload) {
       state.asciibirdMeta.push(payload);
       state.tab = state.asciibirdMeta.length - 1;
+      document.title = `asciibird - ${state.asciibirdMeta[state.tab].title}`;
     },
     updateToolBarState(state, payload) {
       state.toolbarState = payload;
@@ -211,10 +213,10 @@ export default new Vuex.Store({
       let x = 0;
       let y = 0;
 
-      switch(payload.type) {
+      switch (payload.type) {
         case 'flip':
           tempBlocks = tempBlocks.reverse()
-          for(y = 0; y < tempBlocks.length; y++) {
+          for (y = 0; y < tempBlocks.length; y++) {
             parsedBlocks[y] = tempBlocks[y];
 
             for (x = 0; x < getBlocksWidth(tempBlocks); x++) {
@@ -222,7 +224,7 @@ export default new Vuex.Store({
             }
           }
 
-        break;
+          break;
 
         case 'rotate':
           for (y = 0; y < tempBlocks.length; y++) {
@@ -232,7 +234,7 @@ export default new Vuex.Store({
               parsedBlocks[y][x] = tempBlocks[y][x];
             }
           }
-        break;
+          break;
 
       }
 
@@ -313,6 +315,13 @@ export default new Vuex.Store({
       if (tab === state.tab) {
         state.tab = state.asciibirdMeta.length - 1
       }
+
+      if (state.asciibirdMeta.length) {
+        document.title = `asciibird - ${state.asciibirdMeta[state.tab].title}`;
+      } else {
+        document.title = `asciibird`
+      }
+
     },
   },
   getters: {

src/views/Editor.vue

@@ -405,8 +405,6 @@ export default {
         this.canvas.height = this.currentAscii.height * blockHeight;
 
         this.delayRedrawCanvas();
-
-        document.title = `asciibird - ${this.currentAscii.title}`;
       }
     },
     currentTool() {