add Recipes(scaffolding)

Gulpfile.js

@@ -42,8 +42,8 @@ gulp.task('styl', function () {
     .pipe(styl())
     .pipe(autoprefixer())
     .pipe(gulp.dest('src'))
-    .pipe(notify('Stylus!!'))
     .pipe(livereload())
+    .pipe(notify('Stylus!!'))
 })
 
 gulp.task('bs', function () {
@@ -57,7 +57,7 @@ gulp.task('bs', function () {
 })
 
 gulp.task('inject', function (cb) {
-  runSequence('inject-main', 'inject-popup', cb)
+  runSequence(['inject-main', 'inject-popup'], cb)
 })
 
 gulp.task('inject-main', function () {
@@ -71,6 +71,13 @@ gulp.task('inject-main', function () {
     .pipe(gulp.dest('src/browser/main/'))
 })
 
+gulp.task('watch-main', function () {
+  gulp.watch(
+    ['src/browser/main/index.inject.html', 'src/browser/main/**/*.js', 'src/browser/main/**/*.css', 'src/browser/shared/**/*.js', 'src/browser/shared/**/*.css'], ['inject-main'])
+
+  gulp.watch('src/**/*.styl', ['styl'])
+  livereload.listen()
+})
 gulp.task('inject-popup', function () {
   return gulp.src('src/browser/popup/index.inject.html')
     .pipe(inject(gulp.src(['src/browser/popup/**/*.js', 'src/browser/popup/**/*.css', 'src/browser/shared/**/*.js', 'src/browser/shared/**/*.css'], {read: false}), {

build.config.js

@@ -39,6 +39,10 @@ module.exports = {
     {
       name: 'angular-hotkeys',
       src: 'node_modules/angular-hotkeys/build/hotkeys.js'
+    },
+    {
+      name: 'marked',
+      src: 'node_modules/marked/lib/marked.js'
     }
   ]
 }

package.json

@@ -66,6 +66,7 @@
     "gulp-stylus": "^2.0.3",
     "gulp-template": "^3.0.0",
     "gulp-uglify": "^1.2.0",
+    "marked": "^0.3.3",
     "merge-stream": "^0.1.7",
     "moment": "^2.10.3",
     "run-sequence": "^1.1.0",

src/browser/main/config/states.js

@@ -86,4 +86,26 @@ angular.module('codexen')
         }
       })
 
+      /* Recipes */
+      .state('recipes', {
+        url: '/recipes',
+        views: {
+          'main-view': {
+            templateUrl: 'tpls/states/recipes.list.tpl.html',
+            controller: 'RecipesListController as vm'
+          }
+        },
+        resolve: {
+          myRecipes: function (Recipe) {
+            return Recipe.findMine().then(function (res) {
+              return res.data
+            })
+          }
+        }
+      })
+      .state('recipes.detail', {
+        url: '/:id',
+        templateUrl: 'tpls/states/recipes.detail.html',
+        controller: 'RecipesDetailController as vm'
+      })
   })

src/browser/main/controllers/directives/SideNavController.js

@@ -31,6 +31,5 @@ angular.module('codexen')
     $scope.$on('userSignOut', function () {
       vm.isAuthenticated = false
       vm.currentUser = null
-
     })
   })

src/browser/main/controllers/modals/DeleteRecipeModalController.js

@@ -0,0 +1,16 @@
+/* global angular */
+angular.module('codexen')
+  .controller('DeleteRecipeModalController', function ($modalInstance, Recipe, recipe) {
+    var vm = this
+
+    vm.submit = function () {
+      Recipe.delete(recipe.id)
+        .success(function (recipe) {
+          $modalInstance.close(recipe)
+        })
+    }
+
+    vm.cancel = function () {
+      $modalInstance.dismiss()
+    }
+  })

src/browser/main/controllers/modals/EditRecipeModalController.js

@@ -0,0 +1,42 @@
+/* global angular */
+angular.module('codexen')
+  .controller('EditRecipeModalController', function (Recipe, Tag, $modalInstance, recipe) {
+    var vm = this
+
+    vm.recipe = recipe
+
+    vm.submit = function () {
+      var params = {
+        title: vm.recipe.title,
+        content: vm.recipe.content,
+        Tags: angular.isArray(vm.recipe.Tags) ? vm.recipe.Tags.map(function (tag) { return tag.name }) : []
+      }
+
+      Recipe.update(vm.recipe.id, params)
+        .success(function (data) {
+          $modalInstance.close(data)
+        })
+    }
+
+    // vm.tags = []
+    vm.tagCandidates = []
+    vm.refreshTagCandidates = function (tagName) {
+      if (tagName == null || tagName === '') return null
+      return Tag.findByName(tagName)
+        .success(function (data) {
+          console.log('tags fetched!!', data)
+          vm.tagCandidates = data
+        })
+    }
+    vm.transform = function (tagName) {
+      return {
+        id: 0,
+        name: tagName
+      }
+    }
+
+    vm.cancel = function () {
+      $modalInstance.dismiss()
+    }
+
+  })

src/browser/main/controllers/modals/EditSnippetModalController.js

@@ -17,6 +17,7 @@ angular.module('codexen')
       Snippet.update(vm.snippet.id, params)
         .success(function (data) {
           console.log('updated res :', data)
+          $rootScope.$broadcast('snippetUpdated', snippet)
           $modalInstance.close(data)
         })
     }

src/browser/main/controllers/modals/NewRecipeModalController.js

@@ -0,0 +1,42 @@
+/* global angular */
+angular.module('codexen')
+  .controller('NewRecipeModalController', function (Recipe, Tag, $modalInstance) {
+    var vm = this
+
+    vm.content = ''
+
+    vm.submit = function () {
+      var params = {
+        title: vm.title,
+        content: vm.content,
+        Tags: angular.isArray(vm.Tags) ? vm.Tags.map(function (tag) { return tag.name }) : []
+      }
+
+      Recipe.create(params)
+        .success(function (data) {
+          $modalInstance.close(data)
+        })
+    }
+
+    // vm.tags = []
+    vm.tagCandidates = []
+    vm.refreshTagCandidates = function (tagName) {
+      if (tagName == null || tagName === '') return null
+      return Tag.findByName(tagName)
+        .success(function (data) {
+          console.log('tags fetched!!', data)
+          vm.tagCandidates = data
+        })
+    }
+    vm.transform = function (tagName) {
+      return {
+        id: 0,
+        name: tagName
+      }
+    }
+
+    vm.cancel = function () {
+      $modalInstance.dismiss()
+    }
+
+  })

src/browser/main/controllers/modals/NewSnippetModalController.js

@@ -1,6 +1,6 @@
 /* global angular */
 angular.module('codexen')
-  .controller('NewSnippetModalController', function ($modalInstance, aceModes, $log, Snippet, $rootScope, Tag) {
+  .controller('NewSnippetModalController', function ($modalInstance, aceModes, $log, Snippet, Tag) {
     var vm = this
 
     vm.aceModes = aceModes

src/browser/main/controllers/states/RecipesDetailController.js

@@ -0,0 +1,32 @@
+/* global angular */
+angular.module('codexen')
+  .controller('RecipesDetailController', function (Recipe, $state, $rootScope, $scope, Modal) {
+    var vm = this
+
+    vm.isLoaded = false
+
+    var recipeId = $state.params.id
+
+    Recipe.show(recipeId)
+      .success(function (data) {
+        vm.recipe = data
+        vm.isLoaded = true
+      })
+
+    $scope.$on('taggingRequested', function (e) {
+      e.stopPropagation()
+      e.preventDefault()
+      Modal.editRecipe(angular.copy(vm.recipe))
+        .then(function (recipe) {
+          console.log('edited', recipe)
+        }, function () {
+          console.log('edit recipe modal dismissed')
+        })
+    })
+
+    $scope.$on('recipeUpdated', function (e, recipe) {
+      console.log('event received', recipe)
+      if (recipe.id === vm.recipe.id) vm.recipe = recipe
+    })
+
+  })

src/browser/main/controllers/states/RecipesListController.js

@@ -0,0 +1,98 @@
+/* global angular */
+angular.module('codexen')
+  .controller('RecipesListController', function (Recipe, $state, $scope, $filter, myRecipes, User, $auth) {
+    var vm = this
+
+
+    vm.recipes = myRecipes
+
+    vm.searchRecipes = searchRecipes
+    vm.searchRecipes()
+
+    vm.isAuthenticated = $auth.isAuthenticated()
+    var reloadUser = function () {
+      if (vm.isAuthenticated) {
+        User.me().success(function (data) {
+          vm.currentUser = data
+        })
+      }
+    }
+    reloadUser()
+
+    $scope.$on('$stateChangeSuccess', function (e, toState, toParams) {
+      if (!toState.name.match(/recipes/)) return null
+
+      vm.recipeId = parseInt(toParams.id, 10)
+
+      if (!vm.recipeId && vm.filtered && vm.filtered[0]) {
+        $state.go('recipes.detail', {id: vm.filtered[0].id})
+      }
+    })
+
+    $scope.$on('recipeUpdated', function (e, recipe) {
+      if (!myRecipes.some(function (_recipe, index) {
+        if (_recipe.id === recipe.id) {
+          myRecipes[index] = recipe
+          return true
+        }
+        return false
+      })) myRecipes.unshift(recipe)
+
+      searchRecipes()
+      vm.recipeId = recipe.id
+      $state.go('recipes.detail', {id: recipe.id})
+    })
+
+    $scope.$on('recipeDeleted', function () {
+      if ($state.is('recipes.detail')) {
+        var currentRecipeId = parseInt($state.params.id, 10)
+        // Delete recipe from recipe list
+        for (var i = 0; i < vm.recipes.length; i++) {
+          if (vm.recipes[i].id === currentRecipeId) {
+            vm.recipes.splice(i, 1)
+            break
+          }
+        }
+        // Delete recipe from `filtered list`
+        // And redirect `next filtered recipe`
+        for (i = 0; i < vm.filtered.length; i++) {
+          if (vm.filtered[i].id === currentRecipeId) {
+            if (vm.filtered[i + 1] != null) $state.go('recipes.detail', {id: vm.filtered[i + 1].id})
+            else if (vm.filtered[i - 1] != null) $state.go('recipes.detail', {id: vm.filtered[i - 1].id})
+            else $state.go('recipes')
+
+            vm.filtered.splice(i, 1)
+            break
+          }
+        }
+
+      }
+    })
+
+    $scope.$on('tagSelected', function (e, tag) {
+      e.stopPropagation()
+      $scope.$apply(function () {
+        vm.search = '#' + tag.name
+        searchRecipes()
+      })
+    })
+
+    function loadRecipes () {
+      if ($auth.isAuthenticated) {
+        Recipe.findMine()
+          .success(function (data) {
+            vm.recipes = data
+          })
+      } else {
+        vm.recipes = void 0
+      }
+    }
+
+    function searchRecipes () {
+      vm.filtered = $filter('filter')(myRecipes, vm.search)
+      if (vm.search && vm.filtered && vm.filtered[0] && (!vm.recipeId || vm.recipeId !== vm.filtered[0].id)) {
+        $state.go('recipes.detail', {id: vm.filtered[0].id})
+      }
+    }
+
+  })

src/browser/main/controllers/states/SnippetsDetailController.js

@@ -17,8 +17,8 @@ angular.module('codexen')
       e.stopPropagation()
       e.preventDefault()
       Modal.editSnippet(angular.copy(vm.snippet))
-        .result.then(function (snippet) {
-        $rootScope.$broadcast('snippetUpdated', snippet)
+        .then(function (snippet) {
+          console.log('edited', snippet)
         }, function () {
           console.log('edit snippet modal dismissed')
         })

src/browser/main/controllers/states/SnippetsListController.js

@@ -1,10 +1,8 @@
 /* global angular */
 angular.module('codexen')
-  .controller('SnippetsListController', function ($auth, Snippet, $scope, $state, $scope, $filter, mySnippets, User) {
+  .controller('SnippetsListController', function ($auth, Snippet, $scope, $state, $filter, mySnippets, User) {
     var vm = this
 
-    vm.isLoading = false
-
     vm.snippetId = parseInt($state.params.id)
 
     vm.snippets = mySnippets
@@ -33,14 +31,13 @@ angular.module('codexen')
     $scope.$on('$stateChangeSuccess', function (e, toState, toParams) {
       if (!toState.name.match(/snippets/)) return null
 
-      vm.snippetId = parseInt(toParams.id)
+      vm.snippetId = parseInt(toParams.id, 10)
 
       if (!vm.snippetId && vm.filtered[0]) {
         $state.go('snippets.detail', {id: vm.filtered[0].id})
       }
     })
 
-
     $scope.$on('snippetUpdated', function (e, snippet) {
       if (!mySnippets.some(function (_snippet, index) {
         if (_snippet.id === snippet.id) {
@@ -57,7 +54,7 @@ angular.module('codexen')
 
     $scope.$on('snippetDeleted', function () {
       if ($state.is('snippets.detail')) {
-        var currentSnippetId = parseInt($state.params.id)
+        var currentSnippetId = parseInt($state.params.id, 10)
         // Delete snippet from snippet list
         for (var i = 0; i < vm.snippets.length; i++) {
           if (vm.snippets[i].id === currentSnippetId) {
@@ -67,7 +64,7 @@ angular.module('codexen')
         }
         // Delete snippet from `filtered list`
         // And redirect `next filtered snippet`
-        for (var i = 0; i < vm.filtered.length; i++) {
+        for (i = 0; i < vm.filtered.length; i++) {
           if (vm.filtered[i].id === currentSnippetId) {
             if (vm.filtered[i + 1] != null) $state.go('snippets.detail', {id: vm.filtered[i + 1].id})
             else if (vm.filtered[i - 1] != null) $state.go('snippets.detail', {id: vm.filtered[i - 1].id})

src/browser/main/directives/btn-delete-recipe.js

@@ -0,0 +1,19 @@
+/* global angular */
+angular.module('codexen')
+  .directive('btnDeleteRecipe', function (Modal, $rootScope) {
+    return {
+      scope: {
+        recipe: '=btnDeleteRecipe'
+      },
+      link: function (scope, el) {
+        el.on('click', function () {
+          Modal.deleteRecipe(scope.recipe)
+            .then(function (recipe) {
+              console.log('deleted', recipe)
+            }, function () {
+              console.log('delete snippet modal dismissed')
+            })
+        })
+      }
+    }
+  })

src/browser/main/directives/btn-edit-recipe.js

@@ -0,0 +1,14 @@
+/* global angular */
+angular.module('codexen')
+  .directive('btnEditRecipe', function (Modal) {
+    return {
+      scope: {
+        recipe: '=btnEditRecipe'
+      },
+      link: function (scope, el) {
+        el.on('click', function () {
+          Modal.editRecipe(angular.copy(scope.recipe))
+        })
+      }
+    }
+  })

src/browser/main/directives/btn-edit-snippet.js

@@ -1,6 +1,6 @@
 /* global angular */
 angular.module('codexen')
-  .directive('btnEditSnippet', function (Modal, $rootScope) {
+  .directive('btnEditSnippet', function (Modal) {
     return {
       scope: {
         snippet: '=btnEditSnippet'
@@ -8,11 +8,6 @@ angular.module('codexen')
       link: function (scope, el) {
         el.on('click', function () {
           Modal.editSnippet(angular.copy(scope.snippet))
-            .result.then(function (snippet) {
-            $rootScope.$broadcast('snippetUpdated', snippet)
-          }, function () {
-            console.log('edit snippet modal dismissed')
-          })
         })
       }
     }

src/browser/main/directives/btn-new-recipe.js

@@ -0,0 +1,12 @@
+/* global angular */
+angular.module('codexen')
+  .directive('btnNewRecipe', function (Modal) {
+    return {
+      restrict: 'A',
+      link: function (scope, el) {
+        el.on('click', function () {
+          Modal.newRecipe()
+        })
+      }
+    }
+  })

src/browser/main/directives/btn-new-snippet.js

@@ -5,11 +5,6 @@ angular.module('codexen')
       link: function (scope, el) {
         el.on('click', function () {
           Modal.newSnippet()
-            .result.then(function (snippet) {
-            $rootScope.$broadcast('snippetUpdated', snippet)
-          }, function () {
-            console.log('new snippet modal dismissed')
-          })
         })
       }
     }

src/browser/main/directives/recipe-item.js

@@ -0,0 +1,19 @@
+/* global angular */
+angular.module('codexen')
+  .directive('recipeItem', function (Modal, $rootScope) {
+    return {
+      restrict: 'A',
+      transclude: true,
+      template: '<div ng-transclude></div>',
+      scope: {
+        recipe: '=recipeItem'
+      },
+      link: function (scope, elem) {
+        scope.$on('taggingRequested', function (e) {
+          e.stopPropagation()
+          e.preventDefault()
+          Modal.editRecipe(angular.copy(scope.recipe))
+        })
+      }
+    }
+  })

src/browser/main/directives/snippet-item.js

@@ -13,11 +13,6 @@ angular.module('codexen')
           e.stopPropagation()
           e.preventDefault()
           Modal.editSnippet(angular.copy(scope.snippet))
-            .result.then(function (snippet) {
-            $rootScope.$broadcast('snippetUpdated', snippet)
-          }, function () {
-            console.log('edit snippet modal dismissed')
-          })
         })
       }
     }

src/browser/main/index.html

@@ -33,34 +33,46 @@
     <script src="../vendor/satellizer.js"></script>
     <script src="../vendor/angular-md5.js"></script>
     <script src="../vendor/moment.js"></script>
+    <script src="../vendor/marked.js"></script>
 
     <!-- inject:js -->
     <script src="app.js"></script>
     <script src="config/states.js"></script>
-    <script src="controllers/AppController.js"></script>
+    <script src="directives/btn-delete-recipe.js"></script>
     <script src="directives/btn-delete-snippet.js"></script>
+    <script src="directives/btn-edit-recipe.js"></script>
     <script src="directives/btn-edit-snippet.js"></script>
+    <script src="directives/btn-new-recipe.js"></script>
     <script src="directives/btn-new-snippet.js"></script>
+    <script src="directives/recipe-item.js"></script>
     <script src="directives/side-nav.js"></script>
     <script src="directives/snippet-item.js"></script>
     <script src="directives/tag-item.js"></script>
     <script src="directives/tag-list.js"></script>
+    <script src="controllers/AppController.js"></script>
     <script src="filters/from-now.js"></script>
     <script src="filters/search-snippets.js"></script>
+    <script src="services/Marked.js"></script>
     <script src="services/Modal.js"></script>
+    <script src="services/Recipe.js"></script>
     <script src="services/Settings.js"></script>
     <script src="services/Tag.js"></script>
     <script src="services/User.js"></script>
     <script src="controllers/directives/SideNavController.js"></script>
+    <script src="controllers/modals/DeleteRecipeModalController.js"></script>
+    <script src="controllers/modals/DeleteSnippetModalController.js"></script>
+    <script src="controllers/modals/EditRecipeModalController.js"></script>
+    <script src="controllers/modals/EditSnippetModalController.js"></script>
+    <script src="controllers/modals/NewRecipeModalController.js"></script>
+    <script src="controllers/modals/NewSnippetModalController.js"></script>
     <script src="controllers/states/AuthRegisterController.js"></script>
     <script src="controllers/states/AuthSignInController.js"></script>
     <script src="controllers/states/HomeController.js"></script>
+    <script src="controllers/states/RecipesDetailController.js"></script>
+    <script src="controllers/states/RecipesListController.js"></script>
     <script src="controllers/states/SettingsController.js"></script>
     <script src="controllers/states/SnippetsDetailController.js"></script>
     <script src="controllers/states/SnippetsListController.js"></script>
-    <script src="controllers/modals/DeleteSnippetModalController.js"></script>
-    <script src="controllers/modals/EditSnippetModalController.js"></script>
-    <script src="controllers/modals/NewSnippetModalController.js"></script>
     <script src="../shared/shared.js"></script>
     <script src="../shared/config/ace.js"></script>
     <script src="../shared/config/env.js"></script>

src/browser/main/index.inject.html

@@ -31,6 +31,7 @@
     <script src="../vendor/satellizer.js"></script>
     <script src="../vendor/angular-md5.js"></script>
     <script src="../vendor/moment.js"></script>
+    <script src="../vendor/marked.js"></script>
 
     <!-- inject:js -->
     <!-- endinject -->

src/browser/main/services/Marked.js

@@ -0,0 +1,18 @@
+/* global angular  marked*/
+angular.module('codexen')
+  .filter('marked', function () {
+    marked.setOptions({
+      renderer: new marked.Renderer(),
+      gfm: true,
+      tables: true,
+      breaks: false,
+      pedantic: false,
+      sanitize: true,
+      smartLists: true,
+      smartypants: false
+    })
+
+    return function(input) {
+      return marked(input)
+    }
+  })

src/browser/main/services/Modal.js

@@ -1,10 +1,51 @@
 /* global angular */
 angular.module('codexen')
-  .factory('Modal', function ($modal) {
+  .factory('Modal', function ($modal, $rootScope) {
+    /* Recipe */
+    var newRecipe = function () {
+      return $modal.open({
+        templateUrl: 'tpls/modals/new-recipe-modal.html',
+        controller: 'NewRecipeModalController as vm'
+      }).result.then(function (recipe) {
+        $rootScope.$broadcast('recipeUpdated', recipe)
+      })
+    }
+
+    var editRecipe = function (recipe) {
+      return $modal.open({
+        resolve: {
+          recipe: function () {
+            return recipe
+          }
+        },
+        templateUrl: 'tpls/modals/edit-recipe-modal.html',
+        controller: 'EditRecipeModalController as vm'
+      }).result.then(function (recipe) {
+        $rootScope.$broadcast('recipeUpdated', recipe)
+      })
+    }
+
+    var deleteRecipe = function (recipe) {
+      return $modal.open({
+        resolve: {
+          recipe: function () {
+            return recipe
+          }
+        },
+        templateUrl: 'tpls/modals/delete-recipe-modal.html',
+        controller: 'DeleteRecipeModalController as vm'
+      }).result.then(function (recipe) {
+        $rootScope.$broadcast('recipeDeleted', recipe)
+      })
+    }
+
+    /* Snippet */
     var newSnippet = function () {
       return $modal.open({
         templateUrl: 'tpls/modals/new-snippet-modal.tpl.html',
         controller: 'NewSnippetModalController as vm'
+      }).result.then(function (snippet) {
+        $rootScope.$broadcast('snippetUpdated', snippet)
       })
     }
 
@@ -17,6 +58,8 @@ angular.module('codexen')
         },
         templateUrl: 'tpls/modals/edit-snippet-modal.tpl.html',
         controller: 'EditSnippetModalController as vm'
+      }).result.then(function (snippet) {
+        $rootScope.$broadcast('snippetUpdated', snippet)
       })
     }
 
@@ -29,10 +72,15 @@ angular.module('codexen')
         },
         templateUrl: 'tpls/modals/delete-snippet-modal.tpl.html',
         controller: 'DeleteSnippetModalController as vm'
+      }).result.then(function (snippet) {
+        $rootScope.$broadcast('snippetDeleted', snippet)
       })
     }
 
     return {
+      newRecipe: newRecipe,
+      editRecipe: editRecipe,
+      deleteRecipe: deleteRecipe,
       newSnippet: newSnippet,
       editSnippet: editSnippet,
       deleteSnippet: deleteSnippet

src/browser/main/services/Recipe.js

@@ -0,0 +1,52 @@
+/* global angular */
+angular.module('codexen')
+  .factory('Recipe', function ($http, $auth, apiUrl) {
+    var findByUser = function (user) {
+      var url = apiUrl + 'recipes/search'
+
+      return $http.get(url, {
+        params: {
+          user: user
+        }
+      })
+    }
+
+    var findMine = function (params) {
+      var url = apiUrl + 'recipes/my'
+
+      return $http.get(url, {params: params})
+    }
+
+    var create = function (params) {
+      var url = apiUrl + 'recipes/create'
+
+      return $http.post(url, params)
+    }
+
+    var show = function (id, params) {
+      var url = apiUrl + 'recipes/id/' + id
+
+      return $http.get(url, {params: params})
+    }
+
+    var update = function (id, params) {
+      var url = apiUrl + 'recipes/id/' + id
+
+      return $http.put(url, params)
+    }
+
+    var destroy = function (id) {
+      var url = apiUrl + 'recipes/id/' + id
+
+      return $http.delete(url)
+    }
+
+    return {
+      findByUser: findByUser,
+      findMine: findMine,
+      create: create,
+      show: show,
+      delete: destroy,
+      update: update
+    }
+  })

src/browser/main/styles/app.css

@@ -2,17 +2,43 @@
   height: 200px;
 }
 #side-view .nav-control-group {
-  margin: 0 5px;
+  margin: auto 10px;
+}
+#side-view .new-block {
+  margin: 20px auto;
+}
+#side-view .new-block button {
+  padding: 10px inherit;
+}
+#side-view .new-block button:nth-child(1) {
+  width: 147px;
+  padding-left: 15px;
+  text-align: left;
+}
+#side-view .new-block button:nth-child(2) {
+  width: 33px;
+}
+#side-view .new-block .success-menu {
+  background-color: #167b59;
+}
+#side-view .new-block .success-menu a {
+  padding: 5px 15px;
+  color: #fff;
+}
+#side-view .new-block .success-menu a.hover,
+#side-view .new-block .success-menu a:hover {
+  background-color: #22bd89;
+}
+#side-view .new-block .success-menu a.focus,
+#side-view .new-block .success-menu a:focus {
+  background-color: #20b482;
 }
 #side-view ul.nav.nav-pills {
   margin-top: 10px;
 }
-#side-view ul.nav.nav-pills li hr {
-  margin: 5px 0;
-  border-top: none;
-  border-bottom: solid 1px #001a20;
-}
 #side-view ul.nav.nav-pills li a {
+  padding: 12px 15px;
+  margin-bottom: 7px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   -webkit-transition: 0.2s;

src/browser/main/styles/directives/side-nav.styl

@@ -1,14 +1,31 @@
 #side-view
   .nav-control-group
-    margin 0 5px
+    margin auto 10px
+  .new-block
+    margin 20px auto
+    button
+      padding 10px inherit
+    button:nth-child(1)
+      width 147px
+      padding-left 15px
+      text-align left
+    button:nth-child(2)
+      width 33px
+    .success-menu
+      background-color darken($brand-success, 35%)
+      a
+        padding 5px 15px
+        color $textColorSelected
+        &.hover, &:hover
+          background-color $brand-success
+        &.focus, &:focus
+          background-color darken($brand-success, 5%)
+
   ul.nav.nav-pills
     margin-top 10px
-    li hr
-      margin: 5px 0
-      border-top none
-      border-bottom solid 1px $baseBorderColor
-
     li a
+      padding 12px 15px
+      margin-bottom 7px
       border-top-right-radius 0
       border-bottom-right-radius 0
       transition 0.2s

src/browser/main/tpls/directives/side-nav.tpl.html

@@ -3,7 +3,7 @@
     <img width="30" class="img-circle" ng-src="http://www.gravatar.com/avatar/{{ vm.currentUser.email | gravatar }}">
     <a href ng-bind="vm.currentUser.name"></a>
     <span class="nav-control-group pull-right">
-      <a ui-sref="settings" class="btn btn-sm btn-default" ui-sref-active="active"}"><i class="fa fa-gears fa-fw"></i></a>
+      <a ui-sref="settings" class="btn btn-sm btn-default" ui-sref-active="active"><i class="fa fa-gears fa-fw"></i></a>
       <a href class="btn btn-sm btn-default" ng-click="vm.signOut()"><i class="fa fa-sign-out fa-fw"></i></a>
     </span>
 
@@ -19,17 +19,27 @@
   </div>
 </div>
 
+<div class="new-block">
+  <div class="btn-group" dropdown>
+     <button btn-new-snippet type="button" class="btn btn-success"><i class="fa fa-plus-square-o fa-fw"></i> New Snippet</button>
+     <button type="button" class="btn btn-success dropdown-toggle" dropdown-toggle>
+       <span class="caret"></span>
+       <span class="sr-only">Split button!</span>
+     </button>
+     <ul class="dropdown-menu success-menu" role="menu">
+       <li><a href btn-new-recipe><i class="fa fa-bookmark-o fa-fw"></i> New Recipe</a></li>
+     </ul>
+   </div>
+</div>
+
 <ul class="nav nav-pills nav-stacked">
-  <li>
-    <a btn-new-snippet href="#"><i class="fa fa-plus-square-o"></i> New Snippet</a>
-  </li>
-  <li class="divider"><hr></li>
-  <li>
+  <li ui-sref-active="active">
+    <a ui-sref="home"><i class="fa fa-home fa-fw"></i> Home</a>
   </li>
   <li ui-sref-active="active">
-    <a ui-sref="home"><i class="fa fa-home"></i> Home</a>
+    <a ui-sref="snippets"><i class="fa fa-code fa-fw"></i> Snippets</a>
   </li>
   <li ui-sref-active="active">
-    <a ui-sref="snippets"><i class="fa fa-code"></i> Snippets</a>
+    <a ui-sref="recipes"><i class="fa fa-bookmark-o fa-fw"></i> Recipes</a>
   </li>
 </ul>

src/browser/main/tpls/modals/delete-recipe-modal.html

@@ -0,0 +1,19 @@
+<div class="new-snippet-modal">
+  <div class="modal-header">
+    <h4>Delete Recipe</h4>
+  </div>
+
+  <div class="modal-body">
+    <p>
+      Are you sure to delete it?
+    </p>
+    <blockquote>
+      Snippets of this recipe will not be removed.
+    </blockquote>
+  </div>
+
+  <div class="modal-footer">
+    <button ng-click="vm.submit()" type="button" name="button" class="btn btn-danger">Delete It</button>
+    <button ng-click="vm.cancel()" type="button" name="button" class="btn btn-default">Cancel</button>
+  </div>
+</div>

src/browser/main/tpls/modals/edit-recipe-modal.html

@@ -0,0 +1,62 @@
+<div class="new-snippet-modal">
+  <div class="modal-header">
+    <h4>New Recipe</h4>
+  </div>
+
+  <div class="modal-body">
+    <div class="form-group">
+      <input ng-model="vm.recipe.title" type="text" class="form-control" placeholder="Title">
+    </div>
+
+  <tabset>
+    <tab>
+      <tab-heading>
+        <i class="glyphicon glyphicon-bell"></i> Markdown
+      </tab-heading>
+
+      <div class="form-group">
+        <span>
+          <button class="btn btn-default">Add Snippet</button>
+        </span>
+      </div>
+
+      <div class="form-group">
+        <div
+          ui-ace="{
+            mode: 'Markdown',
+            theme: 'solarized_dark',
+            useWrapMode: true
+          }"
+          ng-model="vm.recipe.content"
+        ></div>
+      </div>
+    </tab>
+    <tab>
+      <tab-heading>
+        <i class=""></i> Preview
+      </tab-heading>
+      <div class="panel panel-default">
+        <div class="panel-body">
+          <div ng-bind-html="vm.recipe.content | marked"></div>
+        </div>
+      </div>
+    </tab>
+  </tabset>
+
+    <div class="form-group">
+      <ui-select multiple tagging="vm.transform" tagging-tokens="SPACE|,|/" ng-model="vm.recipe.Tags" theme="bootstrap">
+        <ui-select-match placeholder="Tags...">{{$item.name}}</ui-select-match>
+        <ui-select-choices repeat="tag in vm.tagCandidates" refresh="vm.refreshTagCandidates($select.search)"
+         refresh-delay="100">
+          <div><span ng-bind-html="tag.name | highlight: $select.search"></span><span ng-if="tag.isTag">(new)</span></div>
+        </ui-select-choices>
+      </ui-select>
+    </div>
+
+  </div>
+
+  <div class="modal-footer">
+    <button ng-click="vm.submit()" type="button" name="button" class="btn btn-primary">Submit</button>
+    <button ng-click="vm.cancel()" type="button" name="button" class="btn btn-default">Cancel</button>
+  </div>
+</div>

src/browser/main/tpls/modals/new-recipe-modal.html

@@ -0,0 +1,62 @@
+<div class="new-snippet-modal">
+  <div class="modal-header">
+    <h4>New Recipe</h4>
+  </div>
+
+  <div class="modal-body">
+    <div class="form-group">
+      <input ng-model="vm.title" type="text" class="form-control" placeholder="Title">
+    </div>
+
+  <tabset>
+    <tab>
+      <tab-heading>
+        <i class="glyphicon glyphicon-bell"></i> Markdown
+      </tab-heading>
+
+      <div class="form-group">
+        <span>
+          <button class="btn btn-default">Add Snippet</button>
+        </span>
+      </div>
+
+      <div class="form-group">
+        <div
+          ui-ace="{
+            mode: 'Markdown',
+            theme: 'solarized_dark',
+            useWrapMode: true
+          }"
+          ng-model="vm.content"
+        ></div>
+      </div>
+    </tab>
+    <tab>
+      <tab-heading>
+        <i class=""></i> Preview
+      </tab-heading>
+      <div class="panel panel-default">
+        <div class="panel-body">
+          <div ng-bind-html="vm.content | marked"></div>
+        </div>
+      </div>
+    </tab>
+  </tabset>
+
+    <div class="form-group">
+      <ui-select multiple tagging="vm.transform" tagging-tokens="SPACE|,|/" ng-model="vm.Tags" theme="bootstrap">
+        <ui-select-match placeholder="Tags...">{{$item.name}}</ui-select-match>
+        <ui-select-choices repeat="tag in vm.tagCandidates" refresh="vm.refreshTagCandidates($select.search)"
+         refresh-delay="100">
+          <div><span ng-bind-html="tag.name | highlight: $select.search"></span><span ng-if="tag.isTag">(new)</span></div>
+        </ui-select-choices>
+      </ui-select>
+    </div>
+
+  </div>
+
+  <div class="modal-footer">
+    <button ng-click="vm.submit()" type="button" name="button" class="btn btn-primary">Submit</button>
+    <button ng-click="vm.cancel()" type="button" name="button" class="btn btn-default">Cancel</button>
+  </div>
+</div>

src/browser/main/tpls/states/home.tpl.html

@@ -1,5 +1,5 @@
 <div class="home-state">
-  <h1 class="jumbotron">Codexen App <small>v0.1</small></h1>
+  <h1 class="jumbotron">Codexen App <small>v0.2</small></h1>
   <p>
     App for Code snippets<br>
   </p>

src/browser/main/tpls/states/recipes.detail.html

@@ -0,0 +1,33 @@
+<div class="snippets-detail-state">
+
+  <div class="detail-header">
+    <span class="detail-header-title">
+      <small>callsign</small>
+      <span ng-bind="vm.recipe.title"></span>
+      <small><span ng-bind="vm.recipe.updatedAt|fromNow"></span> <i class="fa fa-clock-o"></i></small>
+    </span>
+    <span class="detail-header-control pull-right">
+      <!-- <button type="button" name="button" class="btn btn-default"><i class="fa fa-share"></i></button> -->
+      <button btn-edit-recipe="vm.recipe" type="button" name="button" class="btn btn-default"><i class="fa fa-edit"></i></button>
+      <button btn-delete-recipe="vm.recipe" type="button" name="button" class="btn btn-danger"><i class="fa fa-trash"></i></button>
+    </span>
+  </div>
+
+  <div class="detail-body">
+
+    <div ng-if="!vm.isLoaded" class="">
+      Loadding
+    </div>
+
+    <div ng-if="vm.isLoaded" class="">
+
+      <div tag-list="vm.recipe.Tags"></div>
+
+      <div class="panel panel-default">
+        <div class="panel-body">
+          <div ng-bind-html="vm.recipe.content | marked"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/browser/main/tpls/states/recipes.list.tpl.html

@@ -0,0 +1,62 @@
+<div class="snippets-list-state">
+
+  <div class="left-pane">
+    <div class="snippet-search">
+
+      <div class="input-group">
+        <input ng-model="vm.search" ng-change="vm.searchRecipes()" type="text" name="name" class="form-control" placeholder="Search ..." autocomplete="off">
+        <span class="input-group-btn">
+          <button btn-new-recipe class="btn btn-default" type="button">
+            <i class="fa fa-plus-square-o"></i>
+          </button>
+        </span>
+      </div>
+    </div>
+    <ul class="snippet-list">
+
+      <li ng-if="vm.isLoading" class="message-item">
+        <h4>
+          Loading
+        </h4>
+      </li>
+
+      <li ng-if="!vm.isLoading && 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.isLoading && 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 recipe-item="recipe" ng-repeat="recipe in vm.filtered" ui-sref="recipes.detail({id:recipe.id})" ng-class="{active:vm.recipeId===recipe.id}">
+        <div class="media">
+          <div class="media-left">
+            <img width="25" height="25" class="img-circle" ng-src="http://www.gravatar.com/avatar/{{ vm.currentUser.email | gravatar }}" alt="" />
+          </div>
+          <div class="media-body">
+            <p ng-bind="recipe.title"></p>
+            <p class="created-at">
+              <span ng-bind="recipe.updatedAt|fromNow"></span>
+            </p>
+          </div>
+        </div>
+        <div tag-list="recipe.Tags"></div>
+      </li>
+    </ul>
+  </div>
+
+  <div class="right-pane">
+    <div ng-if="'recipes'|isState">
+      No snippet selected.
+    </div>
+    <div ui-view></div>
+  </div>
+
+
+</div>

src/browser/main/tpls/states/snippets.list.tpl.html

@@ -2,7 +2,14 @@
 
   <div class="left-pane">
     <div class="snippet-search">
+      <div class="input-group">
         <input ng-model="vm.search" ng-change="vm.searchSnippets()" type="text" name="name" class="form-control" placeholder="Search ..." autocomplete="off">
+        <span class="input-group-btn">
+          <button btn-new-snippet class="btn btn-default" type="button">
+            <i class="fa fa-plus-square-o"></i>
+          </button>
+        </span>
+      </div>
     </div>
     <ul class="snippet-list">