Tabbed interface for having multiple queries open at the same time.

.eslintrc

@@ -0,0 +1,79 @@
+{
+  "extends": "eslint:recommended",
+  "parser": "babel-eslint",
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "globals": {
+    "__DEV__": true
+  },
+  "plugins": [
+    "react"
+  ],
+  "ecmaFeatures": {
+    "jsx": true
+  },
+  "rules": {
+    "react/jsx-no-undef": 2,
+    "react/jsx-uses-vars": 2,
+    "react/no-unknown-property": 1,
+
+    "no-alert": 2,
+    "no-array-constructor": 2,
+    "no-caller": 2,
+    "no-catch-shadow": 2,
+    "no-empty-label": 2,
+    "no-eval": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-implied-eval": 2,
+    "no-iterator": 2,
+    "no-label-var": 2,
+    "no-labels": 2,
+    "no-lone-blocks": 2,
+    "no-loop-func": 2,
+    "no-multi-spaces": 2,
+    "no-multi-str": 2,
+    "no-native-reassign": 2,
+    "no-new": 2,
+    "no-new-func": 2,
+    "no-new-object": 2,
+    "no-new-wrappers": 2,
+    "no-octal-escape": 2,
+    "no-process-exit": 2,
+    "no-proto": 2,
+    "no-return-assign": 2,
+    "no-script-url": 2,
+    "no-sequences": 2,
+    "no-shadow": 2,
+    "no-shadow-restricted-names": 2,
+    "no-spaced-func": 2,
+    "no-trailing-spaces": 2,
+    "no-undef-init": 2,
+    "no-unused-vars": [2, {"args": "after-used", "argsIgnorePattern": "^_"}],
+    "no-unused-expressions": 2,
+    "no-with": 2,
+    "camelcase": [2, {"properties": "never"}],
+    "comma-spacing": 2,
+    "consistent-return": 2,
+    "curly": [2, "multi-line"],
+    "dot-notation": [2, { "allowKeywords": true }],
+    "eol-last": 2,
+    "no-extra-parens": [2, "functions"],
+    "eqeqeq": 2,
+    "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
+    "new-cap": 0,
+    "new-parens": 2,
+    "quotes": [2, "single"],
+    "semi": 2,
+    "semi-spacing": [2, {"before": false, "after": true}],
+    "space-infix-ops": 2,
+    "space-return-throw-case": 2,
+    "space-unary-ops": [2, { "words": true, "nonwords": false }],
+    "yoda": [2, "never"],
+
+    "no-script-url": 0,
+    "no-console": 0
+  }
+}

.gitignore

@@ -1,3 +1,6 @@
+# Tags
+tags
+
 # Logs
 logs
 *.log

app/app.css

@@ -38,6 +38,70 @@ body {
   flex-direction: column;
 }
 
+.tab-bar {
+  width: 100%;
+  height: 46px;
+  overflow-y: visible;
+  overflow-x: scroll;
+}
+
+.tab-bar-inner {
+  width: auto;
+  max-width: 10000px;
+  display: flex;
+  height: 45px;
+  border-bottom: solid 1px #efefef;
+  background-color: #fcfcfc;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.tab-bar li {
+  display: flex;
+  list-style-type: none;
+  width: 150px;
+  flex-basis: 150px;
+  flex-shrink: 0;
+}
+
+.tab-bar li > a {
+  width: 100%;
+  color: #999;
+  font-size: .8em;
+  background-color: #fcfcfc;
+  text-decoration: none;
+  display: block;
+  padding: 15px;
+  text-align: center;
+  border-right: solid 1px #efefef;
+}
+
+.tab-bar li:last-child > a {
+  /*border-right: none;*/
+}
+
+.tab-bar li.active {
+  height: 47px;
+}
+
+.tab-bar li.active > a {
+  color: black;
+  background-color: white;
+  border-bottom: none;
+}
+
+.tabs {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.tabs__tab {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
 #graphiql-container {
   flex: 1;
 }