First stab of React based app. 2/3rds of the panel are stubbed out.

static/index.html

@@ -173,5 +173,7 @@
 <script src="/js/react.js"></script>
 <script src="/js/JSXTransformer.js"></script>
 <script src="/js/unread.js" type="text/jsx"></script>
+<script src="/js/folder.js" type="text/jsx"></script>
+<script src="/js/app.js" type="text/jsx"></script>
 </body>
 </html>

static/js/app.js

@@ -0,0 +1,15 @@
+/** @jsx React.DOM */
+
+var App = React.createClass({
+  render: function() {
+    return React.DOM.div({className: ''});
+  }
+});
+
+React.renderComponent(
+        React.DOM.div({id: 'layout', className: 'content pure-g'},
+            <UnreadCount source="//mail.z.xinu.tv/unread" />,
+            // TODO make '[all]' be set by clicking folders.
+            <FolderView source="/l/[all]" />),
+        $('body').get(0)
+);

static/js/folder.js

@@ -0,0 +1,64 @@
+/** @jsx React.DOM */
+
+/*
+<div class="email-item email-item-selected pure-g">
+    <div class="pure-u">
+        <img class="email-avatar" alt="Tilo Mitra&#x27;s avatar" height="64" width="64" src="img/common/tilo-avatar.png">
+    </div>
+
+    <div class="pure-u-3-4">
+        <h5 class="email-name">Tilo Mitra</h5>
+        <h4 class="email-subject">Hello from Toronto</h4>
+        <p class="email-desc">
+            Hey, I just wanted to check in with you from Toronto. I got here earlier today.
+        </p>
+    </div>
+</div>
+*/
+
+var FolderView = React.createClass({
+  getInitialState: function() {
+    return {
+      list: {}
+    };
+  },
+
+  componentDidMount: function() {
+    $.get(this.props.source, function(result) {
+        console.log('FolderView $.get', result);
+        this.setState({list: result});
+    }.bind(this));
+  },
+
+  render: function() {
+      // TODO:
+      // - fill this out with data
+      // - make unread conditional
+      // - remove profile pic
+      // - drop message excerpt
+      // - trim 'Re:' from messages and group/thread them.
+    return (
+<div id="list" className="pure-u-1">
+    <div className="email-item email-item-selected pure-g">
+        <div className="pure-u">
+            <img className="email-avatar" alt="Tilo Mitra&#x27;s avatar" height="64" width="64" src="img/common/tilo-avatar.png" />
+        </div>
+
+        <div className="pure-u-3-4">
+            <h5 className="email-name">Tilo Mitra</h5>
+            <h4 className="email-subject">Hello from Toronto</h4>
+            <p className="email-desc">
+                Hey, I just wanted to check in with you from Toronto. I got here earlier today.
+            </p>
+        </div>
+    </div>
+</div>
+);
+  }
+});
+
+React.renderComponent(
+  // TODO make '[all]' be set by clicking folders.
+  <FolderView source="/l/[all]" />,
+  $('#list').get(0)
+);

static/js/unread.js

@@ -1,5 +1,7 @@
 /** @jsx React.DOM */
 
+// TODO rename this nav.
+
 var UnreadCount = React.createClass({
   getInitialState: function() {
     return {
@@ -9,7 +11,7 @@ var UnreadCount = React.createClass({
 
   componentDidMount: function() {
     $.get(this.props.source, function(result) {
-        console.log('$.get', result);
+        console.log('UnreadCount $.get', result);
       this.setState({unreadCount: result});
     }.bind(this));
   },
@@ -28,11 +30,13 @@ var UnreadCount = React.createClass({
         lis.push(dom);
     }
     console.log('Found', lis);
-    return React.DOM.ul({}, lis);
+    // TODO rewrite as JSX template?  How to handle repreating fields?
+    return React.DOM.div({id: 'nav', className: 'pure-u'},
+            React.DOM.div({className: 'nav-inner'},
+              React.DOM.div({
+                  id: 'unread-list',
+                  className: 'pure-menu pure-menu-open'
+              }, React.DOM.ul({},
+                  lis))));
   }
 });
-
-React.renderComponent(
-  <UnreadCount source="//mail.z.xinu.tv/unread" />,
-  $('#unread-list').get(0)
-);