require('./config/quark');
require('./styles/base.styl');

const React = require('react')
    , Router = require('react-router')
    , { Route, DefaultRoute, RouteHandler, Link } = Router
    , TransitionGroup = require('react/lib/ReactCSSTransitionGroup')
    
    // components
    , { SearchBar, StoryList } = require('./components/index')
  ;

var App = React.createClass({
  
  mixins: [ Router.State ],
  
  render() {
    var routeName = this.getRoutes().reverse()[0].name;
    
    return (
      <div className="storytime">
        <TransitionGroup component="div" transitionName="stpane">
          <RouteHandler key={routeName} />
        </TransitionGroup>
      </div>
    );
  }
});

const Routes = (
  <Route handler={App} path="/">
    <DefaultRoute handler={StoryList} />
  </Route>
);

Router.run(Routes, function (Handler) {
  React.render(<Handler/>, document.getElementById('render-spot'));
});

// add listener to refocus cursor in search input on CMD + L combo
document.addEventListener('keydown', function(e) {
  if(e.metaKey && e.keyCode == 76)
  var input = document.getElementById('searchInput');
  if(input) input.focus();
});
@@ -910,16 +910,69 @@
 );%0A%7D);%0A%0A
+document.addEventListener('keydown', function(e) %7B%0A  
 // add l
@@ -1034,59 +1034,8 @@
 mbo%0A
-document.addEventListener('keydown', function(e) %7B%0A
   if
@@ -1064,17 +1064,21 @@
 e == 76)
-%0A
+ %7B%0A  
   var in
@@ -1123,16 +1123,18 @@
 nput');%0A
+  
   if(inp
@@ -1152,11 +1152,151 @@
 ocus();%0A
+  %7D%0A  // add listener to close panel on ESC regardless of whether input is focused%0A  else if(e.keyCode == 27) %7B%0A    quark.closePopup();%0A  %7D%0A
 %7D);

update global key listener