Add button for closing a tab (re: vercel#40)

app/css/hyperterm.css

@@ -80,3 +80,8 @@ header {
   opacity: 1;
   pointer-events: inherit;
 }
+
+.icon {
+  vertical-align: middle;
+  fill: currentColor;
+}

app/css/tabs.css

@@ -32,17 +32,18 @@ nav {
   list-style-type: none;
   flex-grow: 1;
   text-align: center;
+  position: relative;
 }
 
 .tabs li.is_active {
   color: #fff;
-  position: relative;
 }
 
 .tabs li span {
+  transition: color .2s ease;
   display: block;
-    border-left: 1px solid transparent;
-    border-right: 1px solid transparent;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
 }
 
 .tabs li.is_active span {
@@ -64,10 +65,52 @@ nav {
   bottom: -1px;
 }
 
-.tabs li:not(.is_active):hover {
+.tabs li:not(.is_active):hover span {
   color: #ccc;
 }
 
 .tabs li.has_activity, .tabs li.has_activity:hover {
   color: #50E3C2;
 }
+
+/* The close button */
+
+.tabs li i {
+  transition: opacity .2s ease,
+              color .2s ease,
+              transform .25s ease,
+              background-color .15s ease;
+  pointer-events: none;
+  position: absolute;
+  right: 7px;
+  top: 7px;
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border-radius: 100%;
+  color: #e9e9e9;
+  opacity: 0;
+  transform: scale(.95);
+}
+
+.tabs li:hover i {
+  opacity: 1;
+  transform: none;
+  pointer-events: all;
+}
+
+.tabs li i:hover {
+  background-color: rgba(255,255,255, .13);
+  color: #fff;
+}
+
+.tabs li i:active {
+  background-color: rgba(255,255,255, .1);
+  color: #909090;
+}
+
+.tabs li i .icon {
+  position: absolute;
+  left: 4px;
+  top: 4px;
+}

app/hyperterm.js

@@ -42,6 +42,7 @@ export default class HyperTerm extends Component {
     this.focusActive = this.focusActive.bind(this);
     this.closeBrowser = this.closeBrowser.bind(this);
     this.onHeaderMouseDown = this.onHeaderMouseDown.bind(this);
+    this.closeTab = this.closeTab.bind(this);
 
     this.moveLeft = this.moveLeft.bind(this);
     this.moveRight = this.moveRight.bind(this);
@@ -62,6 +63,7 @@ export default class HyperTerm extends Component {
               return null != title ? title : 'Shell';
             })}
             onChange={this.onChange}
+            onClose={this.closeTab}
           />
         </header>
 
@@ -109,11 +111,15 @@ export default class HyperTerm extends Component {
     this.rpc.emit('new', { cols: this.state.cols, rows: this.state.rows });
   }
 
-  closeTab () {
+  closeActiveTab () {
+    this.closeTab(this.state.active);
+  }
+
+  closeTab (id) {
     if (this.state.sessions.length) {
-      const uid = this.state.sessions[this.state.active];
+      const uid = this.state.sessions[id];
       this.rpc.emit('exit', { uid });
-      this.onSessionExit(uid);
+      this.onSessionExit({ uid });
     }
   }
 
@@ -222,7 +228,7 @@ export default class HyperTerm extends Component {
     });
 
     this.rpc.on('new tab', this.requestTab.bind(this));
-    this.rpc.on('close tab', this.closeTab.bind(this));
+    this.rpc.on('close tab', this.closeActiveTab.bind(this));
     this.rpc.on('title', this.onRemoteTitle.bind(this));
 
     this.rpc.on('move left', this.moveLeft);

app/tabs.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import classes from 'classnames';
+import Icon from './icon';
 
-export default function ({ data = [], active, activeMarkers = {}, onChange }) {
+export default function ({ data = [], active, activeMarkers = [], onChange, onClose }) {
   return <nav style={{ WebkitAppRegion: 'drag' }}>{
     data.length
       ? 1 === data.length
@@ -13,9 +14,11 @@ export default function ({ data = [], active, activeMarkers = {}, onChange }) {
                 const hasActivity = ~activeMarkers.indexOf(i);
                 return <li
                   key={`tab-${i}`}
-                  className={classes({ is_active: isActive, has_activity: hasActivity })}
-                  onClick={ onChange ? onClick.bind(null, i, onChange, active) : null }>
-                    <span>{ tab }</span>
+                  className={classes({ is_active: isActive, has_activity: hasActivity })}>
+                    <span onClick={ onChange ? onClick.bind(null, i, onChange, active) : null }>{ tab }</span>
+                    <i onClick={ onClose ? onClose.bind(null, i) : null }>
+                      <Icon name='cross' size='6px' />
+                    </i>
                 </li>;
               })
             }