feat: close resource

src/client/index.scss

@@ -200,6 +200,8 @@ select {
     padding: 0.75em;
   }
   .close {
+    background-color: transparent;
+    border: none;
     color: #999999;
     padding: 0.25em;
     visibility: hidden;

src/client/resources.jsx

@@ -11,7 +11,10 @@ import {
 } from 'react-tabs';
 
 import Resource from './resource';
-import {setActiveResourceUri} from './state';
+import {
+  closeResource,
+  setActiveResourceUri,
+} from './state';
 
 const decorate = compose(
   contempo(require('./resources.raw.scss')),
@@ -32,7 +35,16 @@ const Resources = (props) => {
               <span className="wrapper">
                 <span className="icon" />
                 <span className="text">{uri}</span>
-                <span className="close">✕</span>
+                <button
+                  className="close"
+                  onClick={(event) => {
+                    dispatch(closeResource(uri));
+                    event.stopPropagation();
+                  }}
+                  type="button"
+                >
+                  ✕
+                </button>
               </span>
             </Tab>
           ))}

src/client/state.js

@@ -35,6 +35,20 @@ const slice = createSlice({
     resourceUris: [],
   },
   reducers: {
+    closeResource: (state, {payload: uri}) => {
+      const index = state.resourceUris.indexOf(uri);
+      if (-1 !== index) {
+        state.resourceUris.splice(index, 1);
+        if (state.resourceUris.length > 0) {
+          state.activeResourceUri = state.resourceUris[
+            Math.min(state.resourceUris.length - 1, index)
+          ];
+        }
+        else {
+          state.activeResourceUri = '';
+        }
+      }
+    },
     setActiveResourceUri: (state, {payload: uri}) => {
       state.activeResourceUri = uri;
       if (-1 === state.resourceUris.indexOf(uri)) {
@@ -51,6 +65,7 @@ const slice = createSlice({
 });
 
 export const {
+  closeResource,
   setActiveResourceUri,
   setActiveSidebarIndex,
   setIsSidebarExpanded,