lots of small tweaks

app/components/RequestBodyEditor.js

@@ -7,7 +7,7 @@ const RequestBodyEditor = ({body, contentType, onChange, className}) => (
     className={className}
     onChange={onChange}
     mode={contentType}
-    lineWrapping={false}
+    lineWrapping={true}
     placeholder="request body here..."
   />
 );

app/components/ResponsePane.js

@@ -7,6 +7,7 @@ import TimeTag from './TimeTag'
 import PreviewModeDropdown from '../components/PreviewModeDropdown'
 import ResponseViewer from '../components/ResponseViewer'
 import {getPreviewModeName} from '../lib/previewModes'
+import {PREVIEW_MODE_SOURCE} from "../lib/previewModes";
 
 const ResponsePane = ({response, previewMode, updatePreviewMode}) => {
   if (!response) {
@@ -23,7 +24,7 @@ const ResponsePane = ({response, previewMode, updatePreviewMode}) => {
 
   return (
     <section className="response-pane pane">
-      <header className="pane__header pane__header--grey">
+      <header className="pane__header">
         {!response ? null : (
           <div>
             <StatusTag
@@ -47,11 +48,21 @@ const ResponsePane = ({response, previewMode, updatePreviewMode}) => {
           <Tab><button>Headers</button></Tab>
         </TabList>
         <TabPanel>
-          <ResponseViewer
-            contentType={response.contentType}
-            previewMode={previewMode}
-            body={response.body}
-          />
+          {response.error ? (
+            <ResponseViewer
+              contentType={response.contentType}
+              previewMode={PREVIEW_MODE_SOURCE}
+              body={response.error}
+              wrap={true}
+            />
+          ) : (
+            <ResponseViewer
+              contentType={response.contentType}
+              previewMode={previewMode}
+              body={response.body}
+              wrap={true} // TODO: Make this a user preference
+            />
+          )}
         </TabPanel>
         <TabPanel className="scrollable pad">
           <table className="wide">

app/components/ResponseViewer.js

@@ -6,7 +6,7 @@ import {PREVIEW_MODE_FRIENDLY, PREVIEW_MODE_SOURCE} from '../lib/previewModes'
 
 class ResponseViewer extends Component {
   render () {
-    const {previewMode, contentType, body} = this.props;
+    const {previewMode, contentType, body, wrap} = this.props;
 
     switch (previewMode) {
       case PREVIEW_MODE_FRIENDLY:
@@ -23,7 +23,7 @@ class ResponseViewer extends Component {
             prettify={true}
             mode={contentType}
             readOnly={true}
-            lineWrapping={false}
+            lineWrapping={wrap}
             placeholder="nothing yet..."
           />
         );
@@ -40,7 +40,10 @@ class ResponseViewer extends Component {
 ResponseViewer.propTypes = {
   body: PropTypes.string.isRequired,
   contentType: PropTypes.string.isRequired,
-  previewMode: PropTypes.string.isRequired
+  previewMode: PropTypes.string.isRequired,
+
+  // Optional
+  wrap: PropTypes.bool
 };
 
 export default ResponseViewer;

app/components/StatusTag.js

@@ -22,14 +22,18 @@ const StatusTag = ({statusMessage, statusCode}) => {
   } else if (statusCode.startsWith('5')) {
     colorClass = 'bg-danger';
     backupStatusMessage = 'ERROR';
+  } else if (statusCode.startsWith('0')) {
+    colorClass = 'bg-danger';
+    backupStatusMessage = 'UNKNOWN';
+    statusCode = '';  // Don't print a 0 status code
   } else {
-    colorClass = 'bg-info';
+    colorClass = 'bg-danger';
     backupStatusMessage = 'UNKNOWN';
   }
 
   return (
     <div className={classnames('tag', colorClass)}>
-      <strong>{statusCode}</strong>&nbsp;{statusMessage || backupStatusMessage}
+      <strong>{statusCode}</strong> {statusMessage || backupStatusMessage}
     </div>
   );
 };

app/css/components/sidebar.scss

@@ -97,7 +97,7 @@
     }
 
     .tag {
-      opacity: 0.4;
+      opacity: 0.5;
       padding-left: 0;
       width: 2.5em;
       text-align: left;

app/css/components/tag.scss

@@ -2,7 +2,6 @@
 @import '../constants/colors';
 
 .tag {
-  font-size: $font-size-sm;
   display: inline-block;
   padding: $padding-sm;
   margin-right: 1em;
@@ -10,7 +9,8 @@
   box-sizing: border-box;
   border-radius: $radius-md;
   text-align: center;
-  background: $hl-lg;
+  background: $hl-sm;
+  border: 1px solid rgba(0, 0, 0, 0.05);
 
   &:last-child {
     margin-right: 0;
@@ -24,5 +24,6 @@
 
   &.tag--no-bg {
     background: transparent;
+    border: 0;
   }
 }

app/css/constants/colors.scss

@@ -23,11 +23,11 @@ $hl-xl: rgba(140, 140, 140, 0.5);
 $hl-xxl: rgba(140, 140, 140, 0.7);
 $hl: rgba(140, 140, 140, 1);
 
-$success: #8cbd55;
-$warning: #f3a031;
+$success: #8fc62b;
+$warning: #ffb241;
 $danger: #ff6d59;
 $surprise: #a086ff;
-$info: #3ca4ba;
+$info: #3eaec5;
 
 .success,
 .method-POST {
@@ -59,6 +59,7 @@ $info: #3ca4ba;
 .bg-success,
 .bg-method-POST {
   background: $success !important;
+  text-shadow: 0 0 0.05em darken($success, 20);
   color: #fff;
 }
 
@@ -67,12 +68,14 @@ $info: #3ca4ba;
 .bg-method-PATCH {
   background: $warning !important;
   color: #fff;
+  text-shadow: 0 0 0.05em darken($warning, 20);
 }
 
 .bg-danger,
 .bg-method-DELETE {
   background: $danger !important;
   color: #fff;
+  text-shadow: 0 0 0.05em darken($danger, 20);
 }
 
 .bg-info,
@@ -80,10 +83,12 @@ $info: #3ca4ba;
 .bg-method-HEAD {
   background: $info !important;
   color: #fff;
+  text-shadow: 0 0 0.05em darken($info, 20);
 }
 
 .bg-surprise,
 .bg-method-GET {
   background: $surprise !important;
   color: #fff;
+  text-shadow: 0 0 0.05em darken($surprise, 20);
 }

app/css/constants/dimensions.scss

@@ -21,7 +21,7 @@ $line-height-sm: $line-height-md * 0.75;
 $line-height-xs: $line-height-md * 0.6;
 
 /* Sidebar */
-$sidebar-width: 20rem;
+$sidebar-width: 19rem;
 
 /* Borders */
 $radius-sm: 0.1rem;
@@ -34,7 +34,8 @@ $dropdown-min-width: 12rem;
 $modal-width: 50rem;
 
 /* Breakpoints */
-$breakpoint-md: 790px;
+$breakpoint-lg: 1100px;
+$breakpoint-md: 800px;
 $breakpoint-sm: 580px;
 
 .txt-xs {

app/css/layout/base.scss

@@ -195,14 +195,20 @@ strong {
   font-weight: 600;
 }
 
-@media (max-width: $breakpoint-md) {
+@media (max-width: $breakpoint-lg) {
   html {
     font-size: $font-size * 0.95;
   }
 }
 
-@media (max-width: $breakpoint-sm) {
+@media (max-width: $breakpoint-md) {
   html {
-    font-size: $font-size * 0.9;
+    font-size: $font-size * 0.90;
+  }
+}
+
+@media (max-width: $breakpoint-sm) {
+  html {
+    font-size: $font-size * 0.85;
   }
 }

app/database/index.js

@@ -40,11 +40,16 @@ export function initDB () {
 
   return new Promise(resolve => {
     const dbPath = getDBFilePath();
-    db = {};
-    for (let i = 0; i < TYPES.length; i++) {
-      db[TYPES[i]] = {};
-    }
     
+    db = {
+      created: Date.now(),
+      entities: {}
+    };
+    
+    for (let i = 0; i < TYPES.length; i++) {
+      db.entities[TYPES[i]] = {};
+    }
+
     fs.readFile(getDBFilePath(), 'utf8', (err, text) => {
       if (!err) {
         // TODO: Better error handling
@@ -53,7 +58,7 @@ export function initDB () {
       }
 
       // Add listeners to do persistence
-      
+
       let timeout = null;
       onChange('DB_WRITER', () => {
         clearTimeout(timeout);
@@ -67,7 +72,7 @@ export function initDB () {
           })
         }, DB_PERSIST_INTERVAL)
       });
-      
+
       // Done
 
       initialized = true;
@@ -90,26 +95,26 @@ export function offChange (id) {
 }
 
 export function get (type, id) {
-  const doc = db[type][id];
+  const doc = db.entities[type][id];
   return new Promise(resolve => resolve(doc));
 }
 
 function all (type) {
   let docs = [];
-  const ids = Object.keys(db[type]);
+  const ids = Object.keys(db.entities[type]);
   for (let i = 0; i < ids.length; i++) {
-    docs.push(db[type][ids[i]]);
+    docs.push(db.entities[type][ids[i]]);
   }
 
   return new Promise(resolve => resolve(docs));
 }
 
 function removeWhere (type, key, value) {
-  const ids = Object.keys(db[type]);
+  const ids = Object.keys(db.entities[type]);
   let docs = [];
 
   for (let i = 0; i < ids.length; i++) {
-    const doc = db[type][ids[i]];
+    const doc = db.entities[type][ids[i]];
     if (doc[key] === value) {
       remove(doc);
     }
@@ -119,25 +124,25 @@ function removeWhere (type, key, value) {
 }
 
 function insert (doc) {
-  db[doc.type][doc._id] = doc;
-  
+  db.entities[doc.type][doc._id] = doc;
+
   Object.keys(changeListeners).map(k => changeListeners[k]('insert', doc));
   return new Promise(resolve => resolve(doc));
 }
 
 function update (doc) {
-  db[doc.type][doc._id] = doc;
-  
+  db.entities[doc.type][doc._id] = doc;
+
   Object.keys(changeListeners).map(k => changeListeners[k]('update', doc));
   return new Promise(resolve => resolve(doc));
 }
 
 function remove (doc) {
-  delete db[doc.type][doc._id];
+  delete db.entities[doc.type][doc._id];
 
   // Also remove children
   TYPES.map(type => removeWhere(type, 'parentId', doc._id));
-  
+
   Object.keys(changeListeners).map(k => changeListeners[k]('remove', doc));
   new Promise(resolve => resolve());
 }
@@ -266,7 +271,8 @@ export function responseCreate (patch = {}) {
     bytes: 0,
     millis: 0,
     headers: [],
-    body: ''
+    body: '',
+    error: ''
   }, patch);
 }
 

app/lib/network.js

@@ -55,7 +55,12 @@ function actuallySend (request, callback) {
   const startTime = Date.now();
   networkRequest(config, function (err, response) {
     if (err) {
-      console.error('Request Failed', err, response);
+      db.responseCreate({
+        parentId: request._id,
+        millis: Date.now() - startTime,
+        error: err.toString()
+      });
+      console.warn(`Request to ${config.url} failed`, err);
     } else {
       db.responseCreate({
         parentId: request._id,