component for header user login init

src/app.coffee

@@ -1,4 +1,6 @@
-firebase = require './modules/firebase'
+user = require './modules/user'
+
+header = require './components/header'
 
 document.title = 'BurnChart: GitHub Burndown Chart as a Service'
 
@@ -6,9 +8,11 @@ App = Ractive.extend
     
     template: require './templates/layout'
 
-    init: ->
-        # Login user.
-        firebase.login (err) ->
-            throw err if err
+    'components':
+        'Header': header
+
+    # TODO: observe Model Ractive data.
+    'data':
+        'user': user.data
 
 module.exports = new App()

src/components/header.coffee

@@ -0,0 +1,10 @@
+firebase = require '../modules/firebase'
+
+module.exports = Ractive.extend
+
+    'template': require '../templates/header'
+
+    init: ->
+        # # Login user.
+        # firebase.login (err) ->
+        #     throw err if err

src/templates/header.mustache

@@ -0,0 +1,22 @@
+<div id="head">
+    <div class="right">
+        {{#user}}
+            {{user.displayName}} logged in
+        {{else}}
+            <a href="#" class="github"><span class="icon github"></span> Sign In</a>
+        {{/user}}
+    </div>
+
+    <h1><span class="icon fire-station"></span></h1>
+
+    <div class="q">
+        <span class="icon search"></span>
+        <span class="icon down-open"></span>
+        <input type="text" placeholder="Jump to...">
+    </div>
+
+    <ul>
+        <li><a href="#" class="add"><span class="icon plus-circled"></span> Add a Project</a></li>
+        <li><a href="#" class="faq">FAQ</a></li>
+    </ul>
+</div>

src/templates/layout.mustache

@@ -1,21 +1,4 @@
-<div id="head">
-    <div class="right">
-        <a href="#" class="github"><span class="icon github"></span> Sign In</a>
-    </div>
-
-    <h1><span class="icon fire-station"></span></h1>
-
-    <div class="q">
-        <span class="icon search"></span>
-        <span class="icon down-open"></span>
-        <input type="text" placeholder="Jump to...">
-    </div>
-
-    <ul>
-        <li><a href="#" class="add"><span class="icon plus-circled"></span> Add a Project</a></li>
-        <li><a href="#" class="faq">FAQ</a></li>
-    </ul>
-</div>
+<Header/>
 
 <div id="title">
     <div class="wrap">