Few improvments

src/app/appWindow.ts

@@ -36,9 +36,10 @@ export default class AppWindow {
             height: 800,
             minWidth: 600,
             minHeight: 500,
-            frame: false,
-            transparent: true,
+            frame: process.platform === 'darwin',
+            transparent: process.platform === 'darwin',
             title: 'Squid',
+            titleBarStyle: 'hiddenInset',
             icon: path.resolve('src/app/ui/assets/logo.png'),
             show: false,
             //backgroundColor: '#0F0F0F',

src/ui/App.vue

@@ -3,10 +3,11 @@
         <top-nav />
         <div @click.right.prevent="openContextMenu" class="main">
             <div class="tabs">
-                <tab v-for="terminal in terminals" @switch="switchTab" :key="terminal.index" :index="terminal.index" :current="current" />
+                <tab v-for="terminal in terminals" @switch="switchTab" @close="closeTab" :key="terminal.index" :index="terminal.index" :current="current" />
             </div>
             <terminal v-for="terminal in this.terminals" :key="terminal.index" :index="terminal.index" :current="current"/>
         </div>
+        <div class="border" />
     </div>
 </template>
 
@@ -85,11 +86,37 @@
          */
         private closeCurrentTab(): void {
 
-            // Remove the current terminal
+            // Close the current tab
+            this.closeTab(this.current);
+        }
+
+        /**
+         * Switch tab
+         *
+         * @param number
+         * @return void
+         */
+        private switchTab(id: number): void {
+
+            this.current = id;
+        }
+
+        /**
+         * Close the tab with the specified id
+         *
+         * @param number
+         * @return void
+         */
+        private closeTab(id: number): void {
+
+            // Remove the terminal
             for(let i = 0; i < this.terminals.length; i++) {
 
-                if(this.terminals[i].index === this.current)
+                if(this.terminals[i].index === id) {
+
                     this.terminals.splice(i, 1);
+                    return;
+                }
             }
 
             if(this.terminals.length === 0) {
@@ -105,17 +132,6 @@
             this.current = newCurrent;
         }
 
-        /**
-         * Switch tab
-         *
-         * @param number
-         * @return void
-         */
-        private switchTab(id: number): void {
-
-            this.current = id;
-        }
-
         /**
          * Open the context menu
          *
@@ -144,6 +160,18 @@
         user-select: none;
     }
 
+    .border {
+
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border: 1px solid #646464;
+        pointer-events: none;
+        z-index: 100;
+    }
+
     *:focus {
 
         outline: none;
@@ -164,7 +192,7 @@
         justify-content: space-around;
         align-items: center;
         height: 30px;
-        border-bottom: 1px solid #646464;
+        border-bottom: 1px solid #212121;
     }
 
     ::-webkit-scrollbar {

src/ui/components/Tab.vue

@@ -1,5 +1,8 @@
 <template>
-    <div @click.left="switchTab" :class="'tab ' + (isActive ? 'active' : '')" :id="'tab-' + this.index">Terminal {{ this.index }}</div>
+    <div @click.left="switchTab" :class="'tab ' + (isActive ? 'active' : '')" :id="'tab-' + this.index">
+        <p class="tab-title">Terminal {{ this.index }}</p>
+        <button @click="close" type="button" class="tab-close"><svg height="10" width="10"><path d="M 0,0 0,0.7 4.3,5 0,9.3 0,10 0.7,10 5,5.7 9.3,10 10,10 10,9.3 5.7,5 10,0.7 10,0 9.3,0 5,4.3 0.7,0 Z"></path></svg></button>
+    </div>
 </template>
 
 <script lang="ts">
@@ -34,6 +37,16 @@
 
             return this.current === this.index;
         }
+
+        /**
+         * Close this terminal
+         *
+         * @return void
+         */
+        private close(): void {
+
+            this.$emit('close', this.index);
+        }
     }
 </script>
 
@@ -45,10 +58,28 @@
         font-size: 14px;
         width: 100%;
         cursor: pointer;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
 
         &.active {
 
             color: #fff;
         }
+
+        .tab-close {
+
+            border: none;
+            background: none;
+            fill: #646464;
+            margin-left: 20px;
+            cursor: pointer;
+
+            &:hover {
+
+                fill: #ffffff;
+            }
+        }
     }
 </style>