add snippet list

src/states/snippets/list.js

@@ -0,0 +1,40 @@
+/* global angular */
+angular.module('codexen.states')
+  .controller('SnippetsListController', function ($auth, Snippet, $scope) {
+    var vm = this
+
+    vm.isLoaded = false
+
+    var laodSnippets = function () {
+      if ($auth.isAuthenticated) {
+        console.log($auth.getPayload())
+        var userId = $auth.getPayload().sub
+        Snippet.findByUser(userId)
+          .success(function (data) {
+            console.log('snippets fetched', data.snippets)
+            vm.isLoaded = true
+            vm.snippets = data.snippets
+            vm.isGuest = false
+          })
+      }else {
+        vm.isLoaded = true
+        vm.isGuest = true
+        vm.snippets = void 0
+      }
+    }
+
+    laodSnippets()
+
+    $scope.$on('userSignIn', function () {
+      laodSnippets()
+    })
+
+    $scope.$on('userSignOut', function () {
+      laodSnippets()
+    })
+
+    $scope.$on('snippetUpdated', function () {
+      laodSnippets()
+    })
+
+  })

src/states/snippets/list.tpl.html

@@ -0,0 +1,51 @@
+<div class="snippets-list-state">
+
+  <div class="left-pane">
+    <ul class="snippet-list">
+
+      <li ng-if="!vm.isLoaded" class="message-item">
+        <h4>
+          Loading
+        </h4>
+      </li>
+
+      <li ng-if="vm.isLoaded && vm.snippets==0 && !vm.isGuest" class="message-item">
+        <h4>
+          Empty List
+        </h4>
+        <button btn-new-snippet class="btn btn-default"><i class="fa fa-plus-square-o"></i> New Snippet</button>
+      </li>
+
+      <li ng-if="vm.isLoaded && vm.isGuest" class="message-item">
+        <h4>
+          Sign In to access
+        </h4>
+        <a ui-sref="auth.signin" class="btn btn-default"><i class="fa fa-signin"></i> Sign In</a>
+      </li>
+
+      <li ng-repeat="snippet in vm.snippets">
+        <div class="media">
+          <div class="media-left">
+            <img width="25" height="25" src="http://www.gravatar.com/avatar/ea0b6ad1c11700120d1af08810caa19d" alt="" />
+          </div>
+          <div class="media-body">
+            <h4 ng-bind="snippet.title"></h4>
+            <p class="created-at">created at <span ng-bind="snippet.createdAt"></span></p>
+          </div>
+        </div>
+        <p ng-bind="snippet.description"></p>
+        <p>
+          <a ng-repeat="tag in snippet.tags" ng-bind="tag.name" href="#" class="label label-default"></a>
+        </p>
+      </li>
+    </ul>
+  </div>
+
+  <div class="right-pane">
+    <div class="">
+
+    </div>
+  </div>
+
+
+</div>

src/states/snippets/snippets.scss

@@ -0,0 +1,51 @@
+@import "../../variables";
+@import "../../mixins";
+
+$left-pane-width: 275px;
+
+
+$pane-border-color: $border-color;
+$snippet-list-border-color: $border-color;
+$snippet-list-item-hover-bg: #EEE;
+
+.snippets-list-state{
+  position: absolute;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+  .left-pane{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: $left-pane-width;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border-right: solid 1px $pane-border-color;
+    .snippet-list{
+      list-style: none;
+      padding: 0;
+      li{
+        padding: 5px;
+        border-bottom: solid 1px $snippet-list-border-color;
+        h4{
+          margin: 0;
+        }
+        &:hover{
+          background-color: $snippet-list-item-hover-bg;
+        }
+        p{
+          margin:0;
+        }
+      }
+    }
+  }
+  .right-pane{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: $left-pane-width;
+    right: 0;
+  }
+}