fix links

.gitignore

@@ -1,5 +1,6 @@
-/build
+build/
-/node_modules
+node_modules/
-/electron_build
+electron_build/
 .env
 dist/
+vendor/

Gulpfile.js

@@ -1,116 +1,43 @@
-require('dotenv').load()
-var env = process.env
-
 var gulp = require('gulp')
 var styl = require('gulp-stylus')
 var autoprefixer = require('gulp-autoprefixer')
-var templateCache = require('gulp-angular-templatecache')
-var globby = require('globby')
-var template = require('gulp-template')
 var del = require('del')
 var runSequence = require('run-sequence')
 var plumber = require('gulp-plumber')
 var notify = require('gulp-notify')
-var changed = require('gulp-changed')
+var rename = require('gulp-rename')
 var livereload = require('gulp-livereload')
+var inject = require('gulp-inject')
 
 // for Dist
 var rev = require('gulp-rev')
 var ngAnnotate = require('gulp-ng-annotate')
+var templateCache = require('gulp-angular-templatecache')
 var uglify = require('gulp-uglify')
 var minifyCss = require('gulp-minify-css')
 var merge = require('merge-stream')
 var concat = require('gulp-concat')
-var streamqueue = require('streamqueue')
 var minifyHtml = require('gulp-minify-html')
 
 var config = require('./build.config.js')
 
-gulp.task('js', function () {
+gulp.task('build', function () {
-  return streamqueue({objectMode: true},
+  var tpls = gulp.src(['src/browser/main/**/*.html','!src/browser/main/index.html','!src/browser/main/index.inject.html'])
-    gulp.src('tpls/env.js')
+    .pipe(templateCache({}))
-      .pipe(template({
+    .pipe(concat('tpls.js'))
-        apiUrl: env.BUILD_API_URL
+    .pipe(ngAnnotate())
-      })),
+    .pipe(uglify())
-    gulp.src(['src/**/*.js'])
+    .pipe(gulp.dest('build'))
-  )
+  var js = gulp.src(['src/browser/main/**/*.js', 'src/browser/shared/**/*.js'])
-  .pipe(changed('build'))
+    .pipe(concat('app.js'))
-  .pipe(gulp.dest('build'))
+    .pipe(ngAnnotate())
-})
+    .pipe(uglify())
-
+    .pipe(gulp.dest('build'))
-gulp.task('dist', function () {
+  var css = gulp.src(['src/browser/main/**/*.css', 'src/browser/shared/**/*.css'])
-  var js = streamqueue({objectMode: true},
+    .pipe(concat('all.css'))
-    gulp.src(['src/**/*.js']),
-    gulp.src('tpls/env.js')
-      .pipe(template({
-        apiUrl: env.DIST_API_URL
-      })),
-    gulp.src('src/**/*.tpl.html')
-      .pipe(templateCache())
-  )
-  .pipe(ngAnnotate())
-  .pipe(uglify())
-  .pipe(concat('app.js'))
-  .pipe(gulp.dest('dist'))
-
-  var css = gulp.src('src/styles/main.styl')
-    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
-    .pipe(styl())
-    .pipe(autoprefixer())
     .pipe(minifyCss())
-    .pipe(gulp.dest('dist'))
-
-  var index = gulp.src('src/index.html')
-      .pipe(template({
-        scripts: ['app.js'],
-        styles: ['main.css'],
-        env: 'dist'
-      }))
-      .pipe(minifyHtml())
-      .pipe(gulp.dest('dist'))
-
-  return merge(js, css, index)
-})
-
-gulp.task('styl', function () {
-  return gulp.src('src/styles/main.styl')
-    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
-    .pipe(styl())
-    .pipe(autoprefixer())
     .pipe(gulp.dest('build'))
-    .pipe(notify('Stylus!!'))
+  return merge(tpls, js, css)
-    .pipe(livereload())
-})
-
-gulp.task('tpls', function () {
-  return gulp.src('src/**/*.tpl.html')
-    .pipe(templateCache())
-    .pipe(notify('Tpls Done!! :)'))
-    .pipe(gulp.dest('build'))
-})
-
-gulp.task('index', function () {
-  var files = globby.sync(['build/**/*', '!build/vendor/**/*'])
-
-  var filter = function (files, ext) {
-    return files.filter(function (file) {
-      var reg = new RegExp('.+\.' + ext + '$')
-      return file.match(reg)
-    }).map(function (file) {
-      return file.replace('build/', '')
-    })
-  }
-  var scripts = filter(files, 'js')
-  var styles = filter(files, 'css')
-
-  return gulp.src('src/index.html')
-    .pipe(template({
-      scripts: scripts,
-      styles: styles,
-      env: 'build'
-    }))
-    .pipe(gulp.dest('build'))
-    .pipe(livereload())
 })
 
 gulp.task('vendor', function () {
@@ -125,30 +52,73 @@ gulp.task('vendor', function () {
   vendorFiles.push('node_modules/font-awesome/**/FontAwesome.*')
 
   return gulp.src(vendorFiles)
-    .pipe(gulp.dest('build/vendor'))
+    .pipe(gulp.dest('src/browser/vendor'))
 })
 
-gulp.task('resources', function () {
+gulp.task('styl', function () {
-  return gulp.src('resources/**/*')
+  return gulp.src('src/browser/main/styles/app.styl')
-    .pipe(changed('build/resources'))
+    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
-    .pipe(gulp.dest('build/resources'))
+    .pipe(styl())
+    .pipe(autoprefixer())
+    .pipe(gulp.dest('src/browser/main/styles/'))
+    .pipe(livereload())
+    .pipe(notify('Stylus!!'))
 })
 
-gulp.task('build', function (cb) {
+gulp.task('styl-popup', function () {
-  runSequence(['js', 'styl', 'tpls', 'vendor', 'resources'], 'index', cb)
+  return gulp.src('src/browser/popup/styles/app.styl')
+    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
+    .pipe(styl())
+    .pipe(autoprefixer())
+    .pipe(gulp.dest('src/browser/popup/styles/'))
+    .pipe(livereload())
+    .pipe(notify('Stylus!! @POPUP'))
 })
 
-gulp.task('watch', function (cb) {
+gulp.task('bs', function () {
-  gulp.watch(['.env', 'tpls/env.js', 'src/**/*.js'], ['js'])
+  return gulp.src('src/browser/shared/styles/bootstrap.styl')
+    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
+    .pipe(styl())
+    .pipe(autoprefixer())
+    .pipe(gulp.dest('src/browser/shared/styles'))
+    .pipe(notify('Bootstrap compiled!!'))
+    .pipe(livereload())
+})
 
-  gulp.watch('src/styles/**/*.styl', ['styl'])
+gulp.task('inject', function (cb) {
+  runSequence(['inject-main', 'inject-popup'], cb)
+})
 
-  gulp.watch('src/**/*.tpl.html', ['tpls'])
+gulp.task('inject-main', function () {
+  return gulp.src('src/browser/main/index.inject.html')
+    .pipe(inject(gulp.src(['src/browser/main/**/*.js', 'src/browser/main/**/*.css', 'src/browser/shared/**/*.js', 'src/browser/shared/**/*.css'], {read: false}), {
+      relative: true
+    }))
+    .pipe(rename(function (path) {
+      path.basename = 'index'
+    }))
+    .pipe(gulp.dest('src/browser/main/'))
+})
 
-  gulp.watch(['build/**/*.js', 'src/index.html'], ['index'])
+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/browser/main/styles/**/*.styl', ['styl'])
+  gulp.watch('src/browser/popup/styles/**/*.styl', ['styl-popup'])
+  gulp.watch('src/browser/shared/styles/**/*.styl', ['bs'])
   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}), {
+      relative: true
+    }))
+    .pipe(rename(function (path) {
+      path.basename = 'index'
+    }))
+    .pipe(gulp.dest('src/browser/popup/'))
+})
 
 gulp.task('del', function (cb) {
   del(['build/**/*'], cb)
@@ -157,5 +127,3 @@ gulp.task('del', function (cb) {
 gulp.task('default', function (cb) {
   runSequence('del', 'build', 'watch', cb)
 })
-
-require('./gulp-electron')(gulp)

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'
     }
   ]
 }

electron_src/styles/main.styl

@@ -1,13 +0,0 @@
-@import '../../src/styles/_vars'
-@import '../../src/styles/mixins/*'
-
-@import '../../src/styles/_bootstrap'
-
-@import '../../src/styles/_index'
-@import '../../src/styles/_shared'
-
-@import '../../src/styles/modals/*'
-@import '../../src/styles/directives/*'
-@import '../../src/styles/states/*'
-
-@import '_popup'

gulp-electron.js

@@ -1,139 +0,0 @@
-require('dotenv').load()
-var env = process.env
-
-var styl = require('gulp-stylus')
-var autoprefixer = require('gulp-autoprefixer')
-var templateCache = require('gulp-angular-templatecache')
-var globby = require('globby')
-var template = require('gulp-template')
-var del = require('del')
-var runSequence = require('run-sequence')
-var plumber = require('gulp-plumber')
-var notify = require('gulp-notify')
-var changed = require('gulp-changed')
-var livereload = require('gulp-livereload')
-var merge = require('merge-stream')
-
-var config = require('./build.config.js')
-
-module.exports = function (gulp) {
-
-  gulp.task('elec-env', function () {
-    return gulp.src('tpls/env.js')
-      .pipe(template({
-        apiUrl: env.ELEC_API_URL
-      }))
-      .pipe(gulp.dest('electron_build/config'))
-  })
-
-  gulp.task('elec-js', function () {
-    var main = gulp.src('src/**/*.js')
-      .pipe(changed('electron_build'))
-      .pipe(gulp.dest('electron_build'))
-
-    var electron = gulp.src('electron_src/**/*.js')
-      .pipe(changed('electron_build/electron'))
-      .pipe(gulp.dest('electron_build/electron'))
-
-    return merge(main, electron)
-  })
-
-  gulp.task('elec-styl', function () {
-    return gulp.src('electron_src/styles/main.styl')
-      .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
-      .pipe(styl())
-      .pipe(autoprefixer())
-      .pipe(gulp.dest('electron_build'))
-      .pipe(notify('Stylus!!'))
-      .pipe(livereload())
-  })
-
-  gulp.task('elec-tpls', function () {
-    var main = gulp.src('src/**/*.tpl.html')
-      .pipe(templateCache())
-      .pipe(gulp.dest('electron_build'))
-
-    var electron = gulp.src('electron_src/**/*.tpl.html')
-      .pipe(templateCache())
-      .pipe(gulp.dest('electron_build/electron'))
-
-    return merge(main, electron)
-  })
-
-  gulp.task('elec-index', function () {
-    var files = globby.sync(['electron_build/**/*', '!electron_build/vendor/**/*', '!electron_build/electron/**/*'])
-
-    var filter = function (files, ext) {
-      return files.filter(function (file) {
-        var reg = new RegExp('.+\.' + ext + '$')
-        return file.match(reg)
-      }).map(function (file) {
-        return file.replace('electron_build/', '')
-      })
-    }
-    var scripts = filter(files, 'js')
-    var styles = filter(files, 'css')
-
-    var main = gulp.src('src/index.html')
-      .pipe(template({
-        scripts: scripts,
-        styles: styles,
-        env: 'build'
-      }))
-      .pipe(gulp.dest('electron_build'))
-      .pipe(livereload())
-
-    var electron = gulp.src('electron_src/**/index.html')
-      .pipe(gulp.dest('electron_build/electron'))
-
-    return merge(main, electron)
-  })
-
-  gulp.task('elec-vendor', function () {
-    var vendors = config.vendors
-
-    var vendorFiles = vendors.map(function (vendor) {
-      return vendor.src
-    })
-
-    vendorFiles.push('node_modules/font-awesome/**/font-awesome.css')
-    vendorFiles.push('node_modules/font-awesome/**/fontawesome-webfont.*')
-    vendorFiles.push('node_modules/font-awesome/**/FontAwesome.*')
-
-    return gulp.src(vendorFiles)
-      .pipe(gulp.dest('electron_build/vendor'))
-  })
-
-  gulp.task('elec-resources', function () {
-    return gulp.src('resources/**/*')
-      .pipe(changed('electron_build/resources'))
-      .pipe(gulp.dest('electron_build/resources'))
-  })
-
-  gulp.task('elec-build', function (cb) {
-    runSequence(['elec-env', 'elec-js', 'elec-styl', 'elec-tpls', 'elec-vendor', 'elec-resources'], 'elec-index', cb)
-  })
-
-  gulp.task('elec-watch', function (cb) {
-    gulp.watch(['.env', 'tpls/env.js'], ['elec-env'])
-
-    gulp.watch(['src/**/*.js', 'electron_src/**/*.js'], ['elec-js'])
-
-    gulp.watch(['src/styles/**/*.styl', 'electron_src/styles/**/*.styl'], ['elec-styl'])
-
-    gulp.watch('src/**/*.tpl.html', ['elec-tpls'])
-
-    gulp.watch(['electron_build/**/*.js', 'src/index.html', 'src/index.html', 'electron_src/**/index.html'], ['elec-index'])
-
-    livereload.listen()
-  })
-
-  gulp.task('elec-del', function (cb) {
-    del(['electron_build/**/*'], cb)
-  })
-
-  gulp.task('elec', function (cb) {
-    runSequence('elec-del', 'elec-build', 'elec-watch', cb)
-  })
-
-}

package.json

@@ -1,8 +1,7 @@
 {
-  "name": "codexen-app",
+  "name": "codexen-app-builder",
-  "version": "0.0.1",
+  "version": "0.2.0",
-  "description": "CodeXen App",
+  "description": "CodeXen App Builder",
-  "main": "index.js",
   "scripts": {
     "install": "gulp build",
     "start": "http-server build",
@@ -31,6 +30,11 @@
   },
   "homepage": "https://github.com/Rokt33r/codexen-app#readme",
   "dependencies": {
+    "dotenv": "^1.1.0",
+    "robotjs": "^0.1.2",
+    "node-notifier": "^4.2.1"
+  },
+  "devDependencies": {
     "@rokt33r/ace-builds": "^1.1.9",
     "@rokt33r/angular-ui-ace": "^0.2.3",
     "angular": "^1.3.15",
@@ -39,38 +43,35 @@
     "angular-md5": "^0.1.7",
     "angular-sanitize": "^1.3.15",
     "angular-ui-router": "^0.2.15",
-    "bootstrap-sass": "^3.3.4",
     "bootstrap-styl": "^4.0.4",
     "del": "^1.2.0",
-    "dotenv": "^1.1.0",
-    "electron-prebuilt": "^0.27.2",
-    "electron-rebuild": "^0.2.1",
     "font-awesome": "^4.3.0",
     "globby": "^2.0.0",
     "gulp": "^3.8.11",
     "gulp-angular-templatecache": "^1.6.0",
     "gulp-autoprefixer": "^2.3.0",
+    "gulp-cached": "^1.1.0",
     "gulp-changed": "^1.2.1",
+    "gulp-concat": "^2.5.2",
+    "gulp-inject": "^1.3.1",
     "gulp-livereload": "^3.8.0",
     "gulp-minify-css": "^1.1.1",
+    "gulp-minify-html": "^1.0.3",
     "gulp-ng-annotate": "^0.5.3",
     "gulp-notify": "^2.2.0",
     "gulp-plumber": "^1.0.1",
+    "gulp-remember": "^0.3.0",
+    "gulp-rename": "^1.2.2",
     "gulp-rev": "^4.0.0",
     "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",
-    "node-notifier": "^4.2.1",
-    "robotjs": "^0.1.2",
     "run-sequence": "^1.1.0",
     "satellizer": "^0.10.1",
+    "streamqueue": "^1.1.0",
     "ui-select": "^0.11.2"
-  },
-  "devDependencies": {
-    "gulp-concat": "^2.5.2",
-    "gulp-minify-html": "^1.0.3",
-    "streamqueue": "^1.1.0"
   }
 }

src/browser/main/app.js

@@ -1,5 +1,6 @@
 /* global angular */
 angular.module('codexen', [
+  'codexen.shared',
   'ngSanitize',
   'ui.select',
   'ui.ace',
@@ -8,4 +9,5 @@ angular.module('codexen', [
   'satellizer',
   'angular-md5',
   'templates'])
+  .constant('appName', 'main')
 angular.module('templates', [])

src/browser/main/config/states.js

@@ -1,6 +1,21 @@
 /* global angular */
 angular.module('codexen')
-  .config(function ($stateProvider, $urlRouterProvider) {
+  .config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
+    $httpProvider.interceptors.push(function ($q, $injector) {
+      return {
+        responseError: function (res) {
+          switch (res.status) {
+            case 401:
+              var $state = $injector.get('$state')
+              $state.go('auth.signin')
+              break
+          }
+
+          return $q.reject(res)
+        }
+      }
+    })
+
     $urlRouterProvider
       .when('/auth', '/auth/register')
       .when('/auth/', '/auth/register')
@@ -71,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/AppController.js

@@ -0,0 +1,5 @@
+/* global angular */
+angular.module('codexen')
+  .controller('AppController', function ($scope) {
+
+  })

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

@@ -1,10 +1,13 @@
 /* global angular */
 angular.module('codexen')
-  .controller('SideNavController', function ($auth, User, $rootScope, $scope) {
+  .controller('SideNavController', function ($auth, User, $rootScope, $scope, Modal) {
     var vm = this
 
     vm.isAuthenticated = $auth.isAuthenticated()
 
+    vm.showPP = Modal.showPP
+    vm.showRegulation = Modal.showRegulation
+
     var reloadUser = function () {
       if (vm.isAuthenticated) {
         User.me().success(function (data) {
@@ -16,11 +19,7 @@ angular.module('codexen')
     reloadUser()
 
     vm.signOut = function () {
-      $auth.logout()
+      Modal.signOut()
-        .then(function () {
-          console.log('Sign Out')
-          $rootScope.$broadcast('userSignOut')
-        })
     }
 
     $scope.$on('userSignIn', function () {
@@ -31,6 +30,5 @@ angular.module('codexen')
     $scope.$on('userSignOut', function () {
       vm.isAuthenticated = false
       vm.currentUser = null
-
     })
   })

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

@@ -0,0 +1,17 @@
+/* global angular */
+angular.module('codexen')
+  .controller('AgreementModalController', function ($modalInstance, Modal) {
+    var vm = this
+
+    vm.isAgreement = true
+
+    vm.showPP = Modal.showPP
+
+    vm.submit = function () {
+      $modalInstance.close()
+    }
+
+    vm.cancel = function () {
+      $modalInstance.dismiss('cancel')
+    }
+  })

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/ExpandRecipeModalController.js

@@ -0,0 +1,23 @@
+/* global angular */
+angular.module('codexen')
+  .controller('ExpandRecipeModalController', function (recipe, $modalInstance, $scope, Modal) {
+    var vm = this
+    console.log(recipe)
+
+    vm.recipe = recipe
+
+    vm.cancel = function () {
+      $modalInstance.dismiss('cancel')
+    }
+
+    vm.insert = function (type) {
+      $scope.$broadcast('insertRequested', type)
+    }
+
+    vm.insertSnippet = function () {
+      Modal.selectSnippet()
+        .then(function (snippet) {
+          $scope.$broadcast('insertSnippetRequested', snippet)
+        })
+    }
+  })

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.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.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/modals/PPModalController.js

@@ -0,0 +1,13 @@
+/* global angular */
+angular.module('codexen')
+  .controller('PPModalController', function ($modalInstance, Modal) {
+    var vm = this
+
+    vm.isAgreement = false
+
+    vm.showPP = Modal.showPP
+
+    vm.cancel = function () {
+      $modalInstance.dismiss('cancel')
+    }
+  })

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

@@ -0,0 +1,18 @@
+/* global angular */
+angular.module('codexen')
+  .controller('SelectSnippetModalController', function (Snippet, $modalInstance) {
+    var vm = this
+
+    vm.select = function (snippet) {
+      $modalInstance.close(snippet)
+    }
+
+    vm.cancel = function () {
+      $modalInstance.dismiss('cancel')
+    }
+
+    Snippet.findMine()
+      .success(function (snippets) {
+        vm.snippets = snippets
+      })
+  })

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

@@ -0,0 +1,13 @@
+/* global angular */
+angular.module('codexen')
+  .controller('SignOutModalController', function ($modalInstance) {
+    var vm = this
+
+    vm.submit = function () {
+      $modalInstance.close()
+    }
+
+    vm.cancel = function () {
+      $modalInstance.dismiss('cancel')
+    }
+  })

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

@@ -0,0 +1,23 @@
+/* global angular */
+angular.module('codexen')
+  .controller('AuthRegisterController', function ($auth, $log, $state, $rootScope, Modal) {
+    var vm = this
+    vm.isEmpty = function (obj) {
+      for (var i in obj) if (obj.hasOwnProperty(i)) return false
+      return true
+    }
+    vm.signup = function () {
+      Modal.showAgreement()
+        .then(function () {
+          $auth.signup({
+            email: vm.email,
+            password: vm.password,
+            name: vm.name,
+            profileName: vm.profileName
+          }).then(function (data) {
+            $rootScope.$broadcast('userSignIn')
+            $state.go('home')
+          })
+        })
+    }
+  })

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

@@ -3,13 +3,19 @@ angular.module('codexen')
   .controller('AuthSignInController', function ($auth, $rootScope) {
     var vm = this
 
+    vm.authFailed = false
+
     vm.signIn = function () {
+      vm.authFailed = false
       $auth.login({
         email: vm.email,
         password: vm.password
       }).then(function (data) {
         console.log(data)
         $rootScope.$broadcast('userSignIn')
+      }, function (err) {
+        console.log(err)
+        vm.authFailed = true
       })
     }
   })

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('searchSnippets')(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,11 +17,11 @@ angular.module('codexen')
       e.stopPropagation()
       e.preventDefault()
       Modal.editSnippet(angular.copy(vm.snippet))
-        .result.then(function (snippet) {
+        .then(function (snippet) {
-        $rootScope.$broadcast('snippetUpdated', snippet)
+          console.log('edited', snippet)
-      }, function () {
+        }, function () {
-        console.log('edit snippet modal dismissed')
+          console.log('edit snippet modal dismissed')
-      })
+        })
     })
 
     $scope.$on('snippetUpdated', function (e, snippet) {

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,10 +64,10 @@ 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})
+            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})
+            else if (vm.filtered[i - 1] != null) $state.go('snippets.detail', {id: vm.filtered[i - 1].id})
             else $state.go('snippets')
 
             vm.filtered.splice(i, 1)
@@ -100,7 +97,7 @@ angular.module('codexen')
       }
     }
 
-    function searchSnippets() {
+    function searchSnippets () {
       vm.filtered = $filter('searchSnippets')(mySnippets, vm.search)
       if (vm.search && vm.filtered[0] && (!vm.snippetId || vm.snippetId !== vm.filtered[0].id)) {
         $state.go('snippets.detail', {id: vm.filtered[0].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-delete-snippet.js

@@ -8,8 +8,8 @@ angular.module('codexen')
       link: function (scope, el) {
         el.on('click', function () {
           Modal.deleteSnippet(scope.snippet)
-            .result.then(function (snippet) {
+            .then(function (snippet) {
-              $rootScope.$broadcast('snippetDeleted', snippet)
+              console.log('deleted', snippet)
             }, 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-expand-recipe.js

@@ -0,0 +1,15 @@
+/* global angular */
+angular.module('codexen')
+  .directive('btnExpandRecipe', function (Modal) {
+    return {
+      restrict: 'A',
+      scope: {
+        recipe: '=btnExpandRecipe'
+      },
+      link: function (scope, el) {
+        el.on('click', function () {
+          Modal.expandRecipe(scope.recipe)
+        })
+      }
+    }
+  })

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/filters/marked.js

@@ -0,0 +1,19 @@
+/* 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) {
+      if (!angular.isString(input)) input = ''
+      return marked(input)
+    }
+  })

src/browser/main/index.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html ng-app="codexen">
+  <head>
+    <title>
+      CodeXen App
+    </title>
+
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
+    <meta name="description" content="CodeXen - Short code storage service">
+
+    <title>Codexen!</title>
+
+    <link rel="stylesheet" href="../vendor/css/font-awesome.css" media="screen" title="no title" charset="utf-8">
+
+    <!-- inject:css -->
+    <link rel="stylesheet" href="styles/app.css">
+    <link rel="stylesheet" href="../shared/styles/bootstrap.css">
+    <!-- endinject -->
+
+  </head>
+  <body ng-controller="AppController as app">
+    <div side-nav id="side-view"></div>
+    <div ui-view name="main-view" id="main-view"></div>
+
+    <script src="../vendor/ace.js"></script>
+    <script src="../vendor/angular.js"></script>
+    <script src="../vendor/angular-sanitize.js"></script>
+    <script src="../vendor/angular-ui-router.js"></script>
+    <script src="../vendor/ui-bootstrap-tpls.js"></script>
+    <script src="../vendor/select.js"></script>
+    <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>
+    <script src="../vendor/hotkeys.js" charset="utf-8"></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-expand-recipe.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="filters/from-now.js"></script>
+    <script src="filters/marked.js"></script>
+    <script src="filters/search-snippets.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/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/AgreementModalController.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/ExpandRecipeModalController.js"></script>
+    <script src="controllers/modals/NewRecipeModalController.js"></script>
+    <script src="controllers/modals/NewSnippetModalController.js"></script>
+    <script src="controllers/modals/PPModalController.js"></script>
+    <script src="controllers/modals/SelectSnippetModalController.js"></script>
+    <script src="controllers/modals/SignOutModalController.js"></script>
+    <script src="../shared/shared.js"></script>
+    <script src="../shared/directives/ui-ace.js"></script>
+    <script src="../shared/config/ace.js"></script>
+    <script src="../shared/config/env.js"></script>
+    <script src="../shared/config/satellizer.js"></script>
+    <script src="../shared/services/Snippet.js"></script>
+    <!-- endinject -->
+
+  </body>
+</html>

src/browser/main/index.inject.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html ng-app="codexen">
+  <head>
+    <title>
+      CodeXen App
+    </title>
+
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
+    <meta name="description" content="CodeXen - Short code storage service">
+
+    <title>Codexen!</title>
+
+    <link rel="stylesheet" href="../vendor/css/font-awesome.css" media="screen" title="no title" charset="utf-8">
+
+    <!-- inject:css -->
+    <!-- endinject -->
+
+  </head>
+  <body ng-controller="AppController as app">
+    <div side-nav id="side-view"></div>
+    <div ui-view name="main-view" id="main-view"></div>
+
+    <script src="../vendor/ace.js"></script>
+    <script src="../vendor/angular.js"></script>
+    <script src="../vendor/angular-sanitize.js"></script>
+    <script src="../vendor/angular-ui-router.js"></script>
+    <script src="../vendor/ui-bootstrap-tpls.js"></script>
+    <script src="../vendor/select.js"></script>
+    <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>
+    <script src="../vendor/hotkeys.js" charset="utf-8"></script>
+
+    <!-- inject:js -->
+    <!-- endinject -->
+
+  </body>
+</html>

src/browser/main/services/Modal.js

@@ -0,0 +1,148 @@
+/* global angular */
+angular.module('codexen')
+  .factory('Modal', function ($modal, $rootScope, $auth) {
+    var showAgreement = function () {
+      return $modal.open({
+        templateUrl: 'tpls/modals/regulation.html',
+        controller: 'AgreementModalController as vm'
+      }).result
+    }
+
+    var showRegulation = function () {
+      return $modal.open({
+        templateUrl: 'tpls/modals/regulation.html',
+        controller: 'PPModalController as vm'
+      })
+    }
+
+    var showPP = function () {
+      return $modal.open({
+        templateUrl: 'tpls/modals/pp.html',
+        controller: 'PPModalController as vm'
+      })
+    }
+
+    var signOut = function () {
+      return $modal.open({
+        templateUrl: 'tpls/modals/sign-out-modal.html',
+        controller: 'SignOutModalController as vm'
+      }).result.then(function () {
+        $auth.logout()
+          .then(function () {
+            console.log('Sign Out')
+            $rootScope.$broadcast('userSignOut')
+          })
+      })
+    }
+
+    /* 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 expandRecipe = function (recipe) {
+      return $modal.open({
+        size: 'lg',
+        resolve: {
+          recipe: function () {
+            return recipe
+          }
+        },
+        templateUrl: 'tpls/modals/expand-recipe-modal.html',
+        controller: 'ExpandRecipeModalController as vm'
+      })
+    }
+
+    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)
+      })
+    }
+
+    var editSnippet = function (snippet) {
+      return $modal.open({
+        resolve: {
+          snippet: function () {
+            return snippet
+          }
+        },
+        templateUrl: 'tpls/modals/edit-snippet-modal.tpl.html',
+        controller: 'EditSnippetModalController as vm'
+      }).result.then(function (snippet) {
+        $rootScope.$broadcast('snippetUpdated', snippet)
+      })
+    }
+
+    var deleteSnippet = function (snippet) {
+      return $modal.open({
+        resolve: {
+          snippet: function () {
+            return snippet
+          }
+        },
+        templateUrl: 'tpls/modals/delete-snippet-modal.tpl.html',
+        controller: 'DeleteSnippetModalController as vm'
+      }).result.then(function (snippet) {
+        $rootScope.$broadcast('snippetDeleted', snippet)
+      })
+    }
+
+    var selectSnippet = function (snippet) {
+      return $modal.open({
+        templateUrl: 'tpls/modals/select-snippet-modal.html',
+        controller: 'SelectSnippetModalController as vm'
+      }).result
+    }
+
+    return {
+      showAgreement: showAgreement,
+      showRegulation: showRegulation,
+      showPP: showPP,
+      signOut: signOut,
+      newRecipe: newRecipe,
+      editRecipe: editRecipe,
+      deleteRecipe: deleteRecipe,
+      expandRecipe: expandRecipe,
+      newSnippet: newSnippet,
+      editSnippet: editSnippet,
+      deleteSnippet: deleteSnippet,
+      selectSnippet: selectSnippet
+    }
+  })

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 + 'blueprints/search'
+
+      return $http.get(url, {
+        params: {
+          user: user
+        }
+      })
+    }
+
+    var findMine = function (params) {
+      var url = apiUrl + 'blueprints/my'
+
+      return $http.get(url, {params: params})
+    }
+
+    var create = function (params) {
+      var url = apiUrl + 'blueprints/create'
+
+      return $http.post(url, params)
+    }
+
+    var show = function (id, params) {
+      var url = apiUrl + 'blueprints/id/' + id
+
+      return $http.get(url, {params: params})
+    }
+
+    var update = function (id, params) {
+      var url = apiUrl + 'blueprints/id/' + id
+
+      return $http.put(url, params)
+    }
+
+    var destroy = function (id) {
+      var url = apiUrl + 'blueprints/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

@@ -0,0 +1,552 @@
+.expand-recipe-modal .expand-editor .editor-pane {
+  height: 500px;
+}
+.expand-recipe-modal .expand-editor .editor-pane .ace_editor {
+  height: 500px;
+}
+.expand-recipe-modal .expand-editor .preview-pane {
+  height: 500px;
+  overflow-y: auto;
+}
+.new-snippet-modal .ace_editor {
+  height: 200px;
+}
+.select-snippet-modal .snippet-list {
+  list-style: none;
+  padding: 0;
+}
+.select-snippet-modal .snippet-list li {
+  padding: 10px;
+  border: solid 1px #001a20;
+  background-color: #003b4a;
+  border-radius: 5px;
+  margin-bottom: 5px;
+  cursor: pointer;
+}
+.select-snippet-modal .snippet-list li:hover {
+  background-color: #004b5f;
+}
+.select-snippet-modal .snippet-list li .ace_editor {
+  height: 150px;
+}
+.select-snippet-modal .snippet-list li .call-sign {
+  color: #d5dfe2;
+}
+#side-view .nav-control-group {
+  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 a {
+  padding: 12px 15px;
+  margin-bottom: 7px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  -webkit-transition: 0.2s;
+          transition: 0.2s;
+}
+#side-view ul.nav.nav-pills li.active > a,
+#side-view ul.nav.nav-pills .nav-pills > li.active > a:hover,
+#side-view ul.nav.nav-pills .nav-pills > li.active > a:focus {
+  background-color: #004b5f;
+}
+.botlink {
+  position: absolute;
+  bottom: 0;
+  text-align: center;
+}
+/*
+ * ui-select
+ * http://github.com/angular-ui/ui-select
+ * Version: 0.11.2 - 2015-03-17T04:08:46.478Z
+ * License: MIT
+ */
+.ui-select-highlight {
+  font-weight: bold;
+}
+.ui-select-offscreen {
+  clip: rect(0 0 0 0) !important;
+  width: 1px !important;
+  height: 1px !important;
+  border: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  position: absolute !important;
+  outline: 0 !important;
+  left: 0px !important;
+  top: 0px !important;
+}
+.ng-dirty.ng-invalid > a.select2-choice {
+  border-color: #d44950;
+}
+.select2-result-single {
+  padding-left: 0;
+}
+.select2-locked > .select2-search-choice-close {
+  display: none;
+}
+.select-locked > .ui-select-match-close {
+  display: none;
+}
+body > .select2-container.open {
+  z-index: 9999;
+}
+.selectize-input.selectize-focus {
+  border-color: #007fbb !important;
+}
+.selectize-control > .selectize-input > input {
+  width: 100%;
+}
+.selectize-control > .selectize-dropdown {
+  width: 100%;
+}
+.ng-dirty.ng-invalid > div.selectize-input {
+  border-color: #d44950;
+}
+.btn-default-focus {
+  color: #333;
+  background-color: #ebebeb;
+  border-color: #adadad;
+  text-decoration: none;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6);
+}
+.ui-select-bootstrap .ui-select-toggle {
+  position: relative;
+  border-radius: $input-border-radius;
+}
+.ui-select-bootstrap .ui-select-toggle .ui-select-placeholder {
+  color: #99b2b8;
+}
+.ui-select-bootstrap .ui-select-toggle > .caret {
+  position: absolute;
+  height: 10px;
+  top: 50%;
+  right: 10px;
+  margin-top: -2px;
+}
+.input-group > .ui-select-bootstrap.dropdown {
+/* Instead of relative */
+  position: static;
+}
+.input-group > .ui-select-bootstrap > input.ui-select-search.form-control {
+  border-radius: $input-border-radius;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.ui-select-bootstrap > .ui-select-match > .btn {
+/* Instead of center because of .btn */
+  text-align: left !important;
+  padding-right: 25px;
+  border-radius: $input-border-radius;
+  border: solid 1px #001a20;
+}
+.ui-select-bootstrap > .ui-select-match > .caret {
+  position: absolute;
+  top: 45%;
+  right: 15px;
+}
+.ui-select-bootstrap > .ui-select-choices {
+  width: 100%;
+  height: auto;
+  max-height: 200px;
+  overflow-x: hidden;
+  margin-top: -1px;
+}
+body > .ui-select-bootstrap.open {
+  z-index: 1000;
+}
+.ui-select-multiple.ui-select-bootstrap {
+  height: auto;
+  padding: 3px 3px 0 10px;
+}
+.ui-select-multiple.ui-select-bootstrap.open {
+  border-color: #52dcff;
+  outline: 0;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,220,255,0.6);
+}
+.ui-select-multiple.ui-select-bootstrap input.ui-select-search {
+  background-color: transparent !important;
+  border: none;
+  outline: none;
+  height: 1.666666em;
+  margin-bottom: 3px;
+}
+.ui-select-multiple.ui-select-bootstrap .ui-select-match .close {
+  font-size: 1.6em;
+  line-height: 0.75;
+}
+.ui-select-multiple.ui-select-bootstrap .ui-select-match-item {
+  outline: 0;
+  margin: 0 3px 3px 0;
+}
+.ui-select-multiple .ui-select-match-item {
+  position: relative;
+}
+.ui-select-multiple .ui-select-match-item.dropping-before:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 100%;
+  height: 100%;
+  margin-right: 2px;
+  border-left: 1px solid #428bca;
+}
+.ui-select-multiple .ui-select-match-item.dropping-after:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 100%;
+  height: 100%;
+  margin-left: 2px;
+  border-right: 1px solid #428bca;
+}
+.ui-select-bootstrap .ui-select-choices-row>a {
+  display: block;
+  padding: 3px 20px;
+  clear: both;
+  font-weight: 400;
+  line-height: 1.42857143;
+  color: #99b2b8;
+  white-space: nowrap;
+}
+.ui-select-bootstrap .ui-select-choices-row>a:hover,
+.ui-select-bootstrap .ui-select-choices-row>a:focus {
+  text-decoration: none;
+  color: #fff;
+  background-color: #004b5f;
+}
+.ui-select-bootstrap .ui-select-choices-row.active>a {
+  color: #fff;
+  text-decoration: none;
+  outline: 0;
+  background-color: #004b5f;
+}
+.ui-select-bootstrap .ui-select-choices-row.disabled>a,
+.ui-select-bootstrap .ui-select-choices-row.active.disabled>a {
+  color: #777;
+  cursor: not-allowed;
+  background-color: #fff;
+}
+.ui-select-match.ng-hide-add,
+.ui-select-search.ng-hide-add {
+  display: none !important;
+}
+.ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match {
+  border-color: #d44950;
+}
+.auth-state .panel {
+  margin-top: 50px;
+}
+.auth-state h1 {
+  margin: 15px 0;
+}
+.auth-state .auth-control {
+  margin: 10px 0;
+}
+.home-state {
+  padding: 10px;
+}
+.home-state p {
+  margin: 5px auto 15px;
+}
+.home-state ol {
+  margin: 35px auto;
+}
+.home-state li {
+  margin-bottom: 25px;
+}
+.settings-state .panel {
+  margin-top: 15px;
+}
+.settings-state h1 {
+  margin: 30px 0;
+}
+.settings-state .section h4 {
+  margin-bottom: 15px;
+}
+.snippets-list-state {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.snippets-list-state .left-pane {
+  border-right: 1px solid #001a20;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 275px;
+  overflow: hidden;
+}
+.snippets-list-state .left-pane .snippet-search {
+  position: absolute;
+  top: 0;
+  height: 50px;
+  left: 0;
+  right: 0;
+  border-right: 1px solid #001a20;
+  padding: 7px 5px;
+}
+.snippets-list-state .left-pane .snippet-list {
+  position: absolute;
+  top: 50px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  list-style: none;
+  padding: 0;
+}
+.snippets-list-state .left-pane .snippet-list li {
+  cursor: pointer;
+  padding: 5px;
+  border-right: 1px solid #001a20;
+  border-bottom: 1px solid #001a20;
+}
+.snippets-list-state .left-pane .snippet-list li:nth-child(even) {
+  background-color: #002b36;
+}
+.snippets-list-state .left-pane .snippet-list li:nth-child(odd) {
+  background-color: #00323f;
+}
+.snippets-list-state .left-pane .snippet-list li h4 {
+  margin: 0;
+}
+.snippets-list-state .left-pane .snippet-list li:hover {
+  background-color: #004b5f;
+}
+.snippets-list-state .left-pane .snippet-list li p {
+  margin: 0;
+}
+.snippets-list-state .left-pane .snippet-list li p.call-sign {
+  font-size: 0.8em;
+}
+.snippets-list-state .left-pane .snippet-list li p.created-at {
+  font-size: 0.8em;
+  opacity: 0.8;
+}
+.snippets-list-state .left-pane .snippet-list li.active {
+  color: #fff;
+  background-color: #088cff;
+}
+.snippets-list-state .left-pane .snippet-list li.active a {
+  color: #fff;
+}
+.snippets-list-state .right-pane {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 275px;
+  right: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: #00323f;
+}
+.snippets-detail-state {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  bottom: 0;
+  overflow: hidden;
+}
+.snippets-detail-state .detail-header {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  background-color: #003d4d;
+  padding: 5px 10px;
+  height: 50px;
+  border-bottom: solid 1px #001a20;
+}
+.snippets-detail-state .detail-header .detail-header-title {
+  color: #d5dfe2;
+  line-height: 40px;
+  font-size: 1.2em;
+}
+.snippets-detail-state .detail-header .detail-header-title small {
+  font-size: 0.6em;
+  color: #99b2b8;
+}
+.snippets-detail-state .detail-header .detail-header-control {
+  padding: 3px;
+}
+.snippets-detail-state .detail-body {
+  position: absolute;
+  top: 50px;
+  width: 100%;
+  bottom: 0;
+  padding: 5px 10px;
+  overflow-y: auto;
+}
+.snippets-detail-state .detail-body .ace_editor {
+  min-height: 300px;
+  border: solid 1px $border-color;
+  border-radius: 5px;
+  margin-bottom: 5px;
+}
+.tags {
+  word-break: break-all;
+}
+.tags a {
+  margin: 0 2px;
+}
+#side-view {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 200px;
+  background-color: #002b36;
+  border-right: solid 2px #004b5f;
+  box-sizing: border-box;
+  padding: 10px 0 10px 10px;
+}
+#main-view {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 200px;
+  right: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: $bgDarker;
+}
+.marked h1,
+.marked h2,
+.marked h3,
+.marked h4,
+.marked h5 {
+  margin: 0.75em 0;
+}
+.marked h1:nth-child(1),
+.marked h2:nth-child(1),
+.marked h3:nth-child(1),
+.marked h4:nth-child(1),
+.marked h5:nth-child(1) {
+  margin-top: 0;
+}
+.marked code {
+  background-color: #003644;
+  color: #fff;
+  border: 1px solid #001a20;
+  border-radius: 5px;
+  box-shadow: 0 1px 1px rgba(0,0,0,0.05);
+  padding: 5px;
+  line-height: 200%;
+}
+.marked pre {
+  margin-bottom: 10px;
+  background-color: #003644;
+  color: #fff;
+  border: 1px solid #001a20;
+  border-radius: 5px;
+  box-shadow: 0 1px 1px rgba(0,0,0,0.05);
+  padding: 5px;
+}
+.marked pre >code {
+  background-color: transparent;
+  color: inherit;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+  line-height: inherit;
+}
+.marked blockquote {
+  font-size: 1em;
+  border-left: 5px solid #6494ed;
+}
+.marked a {
+  text-decoration: underline;
+  color: #6494ed;
+}
+.marked table {
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: $line-height-computed;
+  border: 1px solid #001a20;
+  margin-bottom: 10px;
+}
+.marked table > thead > tr > th,
+.marked table > tbody > tr > th,
+.marked table > tfoot > tr > th,
+.marked table > thead > tr > td,
+.marked table > tbody > tr > td,
+.marked table > tfoot > tr > td {
+  padding: 10px;
+  line-height: $line-height-base;
+  vertical-align: top;
+  border-top: 1px solid #001a20;
+  border-right: 1px solid #001a20;
+}
+.marked table > thead > tr > th:nth-last-child(1),
+.marked table > tbody > tr > th:nth-last-child(1),
+.marked table > tfoot > tr > th:nth-last-child(1),
+.marked table > thead > tr > td:nth-last-child(1),
+.marked table > tbody > tr > td:nth-last-child(1),
+.marked table > tfoot > tr > td:nth-last-child(1) {
+  border-right: none;
+}
+.marked table > thead > tr > th {
+  vertical-align: bottom;
+  border-bottom: 2px solid #001a20;
+}
+.marked table > caption + thead,
+.marked table > colgroup + thead,
+.marked table > thead:first-child {
+  background-color: #004b5f;
+}
+.marked table > caption + thead > tr:first-child > th,
+.marked table > colgroup + thead > tr:first-child > th,
+.marked table > thead:first-child > tr:first-child > th,
+.marked table > caption + thead > tr:first-child > td,
+.marked table > colgroup + thead > tr:first-child > td,
+.marked table > thead:first-child > tr:first-child > td {
+  border-top: 0;
+}
+.marked table > tbody >tr:nth-child(odd) {
+  background-color: #002b36;
+}
+.marked table > tbody >tr:nth-child(even) {
+  background-color: #003644;
+}
+.short {
+  height: 500px;
+  overflow-y: auto;
+}

src/browser/main/styles/app.styl

@@ -0,0 +1,105 @@
+@import '../../shared/styles/_vars'
+@import '../../shared/styles/mixins/*'
+
+@import 'modals/*'
+@import 'directives/*'
+@import 'states/*'
+
+#side-view
+  position:absolute
+  top: 0
+  bottom: 0
+  left: 0
+  width: 200px
+  background-color: $baseBackgroundColor
+  border-right solid 2px $backgroundColorSelected
+  box-sizing: border-box
+  padding: 10px 0 10px 10px
+
+#main-view
+  position:absolute
+  top: 0
+  bottom: 0
+  left: 200px
+  right: 0
+  overflow-x: hidden
+  overflow-y: auto
+  background-color $bgDarker
+
+.marked
+  h1, h2, h3, h4, h5
+    margin 0.75em 0
+    &:nth-child(1)
+      margin-top 0
+  code
+    background-color lighten($baseBackgroundColor, 3%)
+    color $textColorSelected
+    border 1px solid $baseBorderColor
+    border-radius 5px
+    box-shadow 0 1px 1px rgba(0, 0, 0, .05)
+    padding 5px
+    line-height 200%
+  pre
+    margin-bottom 10px
+    background-color lighten($baseBackgroundColor, 3%)
+    color $textColorSelected
+    border 1px solid $baseBorderColor
+    border-radius 5px
+    box-shadow 0 1px 1px rgba(0, 0, 0, .05)
+    padding 5px
+    >code
+      background-color transparent
+      color inherit
+      border none
+      border-radius 0
+      box-shadow none
+      padding 0
+      line-height inherit
+  blockquote
+    font-size 1em
+    border-left 5px solid $textColorInfo
+  a
+    text-decoration underline
+    color $textColorInfo
+  table
+    width 100%
+    max-width 100%
+    margin-bottom $line-height-computed
+    border 1px solid $table-border-color
+    margin-bottom 10px
+
+    // Cells
+    > thead,
+    > tbody,
+    > tfoot
+      > tr
+        > th,
+        > td
+          padding 10px
+          line-height $line-height-base
+          vertical-align top
+          border-top 1px solid $table-border-color
+          border-right 1px solid $table-border-color
+          &:nth-last-child(1)
+            border-right none
+    > thead > tr > th
+      vertical-align bottom
+      border-bottom 2px solid $table-border-color
+    > caption + thead,
+    > colgroup + thead,
+    > thead:first-child
+      background-color $backgroundColorSelected
+      > tr:first-child
+        > th,
+        > td
+          border-top 0
+    > tbody
+      >tr
+        &:nth-child(odd)
+          background-color $baseBackgroundColor
+        &:nth-child(even)
+          background-color lighten($baseBackgroundColor, 3%)
+
+.short
+  height 500px
+  overflow-y auto

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

@@ -0,0 +1,38 @@
+#side-view
+  .nav-control-group
+    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 a
+      padding 12px 15px
+      margin-bottom 7px
+      border-top-right-radius 0
+      border-bottom-right-radius 0
+      transition 0.2s
+    li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus{
+      background-color: $backgroundColorSelected
+    }
+.botlink
+  position absolute
+  bottom 0
+  text-align center

src/browser/main/styles/modals/expand-recipe-modal.styl

@@ -0,0 +1,9 @@
+.expand-recipe-modal
+  .expand-editor
+    .editor-pane
+      height 500px
+      .ace_editor
+        height 500px
+    .preview-pane
+      height 500px
+      overflow-y auto

src/browser/main/styles/modals/select-snippet-modal.styl

@@ -0,0 +1,17 @@
+.select-snippet-modal
+  .snippet-list
+    list-style none
+    padding 0
+    li
+      padding 10px
+      border solid 1px $baseBorderColor
+      background-color $backgroundColorHighlight
+      border-radius 5px
+      margin-bottom 5px
+      cursor pointer
+      &:hover
+        background-color $backgroundColorSelected
+      .ace_editor
+        height 150px
+      .call-sign
+        color $textColorHighlight

src/browser/main/styles/states/home.styl

@@ -0,0 +1,8 @@
+.home-state
+  padding 10px
+  p
+    margin 5px auto 15px
+  ol
+    margin 35px auto
+  li
+    margin-bottom 25px

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

@@ -0,0 +1,50 @@
+<div class="current-user">
+  <div ng-if="vm.currentUser">
+    <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 href class="btn btn-sm btn-default" ng-click="vm.signOut()"><i class="fa fa-sign-out fa-fw"></i></a>
+    </span>
+
+  </div>
+  <div ng-if="!vm.currentUser">
+    <span>Guest</span>
+
+    <span class="nav-control-group pull-right">
+      <a class="btn btn-sm btn-default" ui-sref="auth.register"><i class="fa fa-user-plus fa-fw"></i></a>
+      <a class="btn btn-sm btn-default" ui-sref="auth.signin"><i class="fa fa-sign-in fa-fw"></i></a>
+    </span>
+
+  </div>
+</div>
+
+<div class="new-block">
+  <div class="btn-group" dropdown>
+     <button ng-disabled="!vm.isAuthenticated" btn-new-snippet type="button" class="btn btn-success"><i class="fa fa-plus-square-o fa-fw"></i> New Snippet</button>
+     <button ng-disabled="!vm.isAuthenticated" 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 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="snippets"><i class="fa fa-code fa-fw"></i> Snippets</a>
+  </li>
+  <li ui-sref-active="active">
+    <a ui-sref="recipes"><i class="fa fa-bookmark-o fa-fw"></i> Recipes</a>
+  </li>
+</ul>
+
+<div class="botlink">
+<a href ng-click="vm.showRegulation()">利用規約</a><br>
+<a href ng-click="vm.showPP()">プライバシーポリシー</a>
+</div>

src/browser/main/tpls/directives/snippet-view.html

@@ -0,0 +1,14 @@
+<div
+  ui-ace="{
+    showGutter: false,
+    useWrapMode : true,
+    mode:snippet.mode.toLowerCase(),
+    maxLines: -1,
+    theme:'solarized_dark',
+    rendererOptions: {
+        maxLinks: Infinity
+      }
+    }"
+  readonly
+  ng-model="snippet.content"
+  ></div>

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,60 @@
+<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">
+        <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" class="marked"></div>
+        </div>
+      </div>
+    </tab>
+  </tabset>
+
+  <div class="form-group">
+      <button btn-expand-recipe="vm.recipe" class="btn btn-default">Expand Editor</button>
+  </div>
+
+    <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/expand-recipe-modal.html

@@ -0,0 +1,37 @@
+<div class="expand-recipe-modal">
+  <div class="modal-header">
+    <button ng-click="vm.insert('h1')" class="btn btn-default"><i class="fa fa-header fa-fw"></i></button>
+    <button ng-click="vm.insert('ul')" class="btn btn-default"><i class="fa fa-list-ul fa-fw"></i></button>
+    <button ng-click="vm.insert('ol')" class="btn btn-default"><i class="fa fa-list-ol fa-fw"></i></button>
+    <button ng-click="vm.insert('a')" class="btn btn-default"><i class="fa fa-link fa-fw"></i></button>
+    <button ng-click="vm.insert('table')" class="btn btn-default"><i class="fa fa-table fa-fw"></i></button>
+    <button ng-click="vm.insertSnippet()" class="btn btn-default">Insert Snippet</button>
+  </div>
+  <div class="modal-body">
+    <div class="container-fluid expand-editor">
+      <div class="row">
+        <div class="col-xs-6 editor-pane">
+          <div
+            ui-ace="{
+              mode: 'Markdown',
+              theme: 'solarized_dark',
+              useWrapMode: true
+            }"
+            ng-model="vm.recipe.content"
+          ></div>
+        </div>
+
+        <div class="col-xs-6">
+          <div class="panel panel-default preview-pane">
+            <div class="panel-body">
+              <div ng-bind-html="vm.recipe.content | marked" class="marked"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-default" ng-click="vm.cancel()">Close</button>
+  </div>
+</div>

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

@@ -0,0 +1,60 @@
+<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">
+        <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" class="marked"></div>
+        </div>
+      </div>
+    </tab>
+  </tabset>
+
+  <div class="form-group">
+      <button btn-expand-recipe="vm.recipe" class="btn btn-default">Expand Editor</button>
+  </div>
+
+    <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/pp.html

@@ -0,0 +1,121 @@
+<div class="new-snippet-modal">
+  <div class="modal-header">
+    <h4>プライバシーポリシー</h4>
+  </div>
+
+  <div class="modal-body marked short">
+    <h1>CodeXenプライバシーポリシー</h1>
+
+    <p>MAISIN&amp;CO.株式会社（以下、「当社」といいます。）は、本ウェブサイト上で提供するCodeXen（以下、「本サービス」といいます。）におけるプライバシー情報の取扱いについて、以下のとおりプライバシーポリシー（以下「本ポリシー」といいます。）を定めます。</p>
+
+    <h3><a id="user-content-第1条プライバシー情報" class="anchor" href="#第1条プライバシー情報" aria-hidden="true"><span class="octicon octicon-link"></span></a>第1条（プライバシー情報）</h3>
+
+    <p>　プライバシー情報のうち「個人情報」とは、個人情報保護法にいう「個人情報」を指すものとし、生存する個人に関する情報であって、当該情報に含まれる氏名、生年月日、住所、電話番号、連絡先その他の記述等により特定の個人を識別できる情報を指します。</p>
+
+    <p>　プライバシー情報のうち「履歴情報および特性情報」とは、上記に定める「個人情報」以外のものをいい、ご利用頂いたサービスやご購入頂いた商品、ご覧になったページや広告の履歴、ユーザーが検索された検索キーワード、ご利用日時、ご利用の方法、ご利用環境、郵便番号や性別、職業、年齢、ユーザーのIPアドレス、クッキー情報、位置情報、端末の個体識別情報などを指します。</p>
+
+    <h3><a id="user-content-第２条プライバシー情報の収集方法" class="anchor" href="#第２条プライバシー情報の収集方法" aria-hidden="true"><span class="octicon octicon-link"></span></a>第２条（プライバシー情報の収集方法）</h3>
+
+    <p>　当社は、ユーザーが利用登録をする際に氏名、生年月日、住所、電話番号、メールアドレス、銀行口座番号、クレジットカード番号、運転免許証番号などの個人情報をお尋ねすることがあります。また、ユーザーと提携先などとの間でなされたユーザーの個人情報を含む取引記録や、決済に関する情報を当社の提携先（情報提供元，広告主，広告配信先などを含みます。以下、｢提携先｣といいます。）などから収集することがあります。</p>
+
+    <p>　当社は、ユーザーについて、利用したサービスやソフトウエア、購入した商品、閲覧したページや広告の履歴、検索した検索キーワード、利用日時、利用方法、利用環境（携帯端末を通じてご利用の場合の当該端末の通信状態、利用に際しての各種設定情報なども含みます）、IPアドレス、クッキー情報、位置情報、端末の個体識別情報などの履歴情報および特性情報を、ユーザーが当社や提携先のサービスを利用しまたはページを閲覧する際に収集します。</p>
+
+    <h3><a id="user-content-第３条個人情報を収集利用する目的" class="anchor" href="#第３条個人情報を収集利用する目的" aria-hidden="true"><span class="octicon octicon-link"></span></a>第３条（個人情報を収集・利用する目的）</h3>
+
+    <p>　当社が個人情報を収集・利用する目的は、以下のとおりです。</p>
+
+    <p>（1）ユーザーに自分の登録情報の閲覧や修正、利用状況の閲覧を行って頂く為に、氏名、住所、連絡先、支払方法などの登録情報、利用されたサービスや購入された商品、およびそれらの代金などに関する情報を表示する目的</p>
+
+    <p>（2）ユーザーにお知らせや連絡をするためにメールアドレスを利用する場合やユーザーに商品を送付したり必要に応じて連絡したりする為、氏名や住所などの連絡先情報を利用する目的</p>
+
+    <p>（3）ユーザーの本人確認を行うために、氏名、生年月日、住所、電話番号、銀行口座番号、クレジットカード番号、運転免許証番号、配達証明付き郵便の到達結果などの情報を利用する目的</p>
+
+    <p>（4）ユーザーに代金を請求するために、購入された商品名や数量、利用されたサービスの種類や期間、回数、請求金額、氏名、住所、銀行口座番号やクレジットカード番号などの支払に関する情報などを利用する目的</p>
+
+    <p>（5）ユーザーが簡便にデータを入力できるようにする為に、当社に登録されている情報を入力画面に表示させたり、ユーザーのご指示に基づいて他のサービスなど（提携先が提供するものも含みます）に転送したりする目的</p>
+
+    <p>（6）代金の支払を遅滞したり第三者に損害を発生させたりするなど、本サービスの利用規約に違反したユーザーや、不正・不当な目的でサービスを利用しようとするユーザーの利用を停止するために、利用態様、氏名や住所など個人を特定するための情報を利用する目的</p>
+
+    <p>（7）ユーザーからのお問い合わせに対応する為、お問い合わせ内容や代金の請求に関する情報など当社がユーザーに対してサービスを提供するにあたって必要となる情報や、ユーザーのサービス利用状況、連絡先情報などを利用する目的</p>
+
+    <p>（8）利用者の皆様の行動、性別、当社内でのアクセス履歴などを用いたターゲティング広告の配信</p>
+
+    <p>（9）当社上で、個人を特定できない範囲においての統計情報の作成および利用</p>
+
+    <p>（10）当社の他サービスへの情報の連携・情報の共有</p>
+
+    <p>（11）当社の新規開発に必要なデータの解析や分析</p>
+
+    <p>（12）当社が提携している先への個人を特定できず会員の許諾を得た範囲内での情報の提供</p>
+
+    <p>（13）上記の利用目的に付随する目的</p>
+
+    <h3><a id="user-content-第４条個人情報の第三者提供" class="anchor" href="#第４条個人情報の第三者提供" aria-hidden="true"><span class="octicon octicon-link"></span></a>第４条（個人情報の第三者提供）</h3>
+
+    <p>　当社は、次に掲げる場合を除いて、あらかじめユーザーの同意を得ることなく、第三者に個人情報を提供することはありません。ただし、個人情報保護法その他の法令で認められる場合を除きます。</p>
+
+    <p>（1）法令に基づく場合</p>
+
+    <p>（2）人の生命、身体または財産の保護のために必要がある場合であって、本人の同意を得ることが困難であるとき</p>
+
+    <p>（3）公衆衛生の向上または児童の健全な育成の推進のために特に必要がある場合であって、本人の同意を得ることが困難であるとき</p>
+
+    <p>（4）国の機関もしくは地方公共団体またはその委託を受けた者が法令の定める事務を遂行することに対して協力する必要がある場合であって、本人の同意を得ることにより当該事務の遂行に支障を及ぼすおそれがあるとき</p>
+
+    <p>（5）予め次の事項を告知あるいは公表をしている場合</p>
+
+    <ul>
+    <li>利用目的に第三者への提供を含むこと</li>
+    <li>第三者に提供されるデータの項目</li>
+    <li>第三者への提供の手段または方法</li>
+    </ul>
+
+    <p>　前項の定めにかかわらず、次に掲げる場合は第三者には該当しないものとします。</p>
+
+    <p>（ⅰ）当社が利用目的の達成に必要な範囲内において個人情報の取扱いの全部または一部を委託する場合</p>
+
+    <p>（ⅱ）合併その他の事由による事業の承継に伴って個人情報が提供される場合</p>
+
+    <p>（ⅲ）個人情報を特定の者との間で共同して利用する場合であって、その旨並びに共同して利用される個人情報の項目、共同して利用する者の範囲、利用する者の利用目的および当該個人情報の管理について責任を有する者の氏名または名称について、あらかじめ本人に通知し、または本人が容易に知り得る状態に置いているとき</p>
+
+    <h3><a id="user-content-第５条個人情報の開示" class="anchor" href="#第５条個人情報の開示" aria-hidden="true"><span class="octicon octicon-link"></span></a>第５条（個人情報の開示）</h3>
+
+    <p>　当社は、本人から個人情報の開示を求められたときは、本人に対し、一ヶ月以内にこれを開示します。ただし、開示することにより次のいずれかに該当する場合は、その全部または一部を開示しないこともあり、開示しない決定をした場合には、その旨を遅滞なく通知します。なお、個人情報の開示に際しては，１件あたり２，５００円の手数料を申し受けます。</p>
+
+    <p>（1）本人または第三者の生命、身体、財産その他の権利利益を害するおそれがある場合</p>
+
+    <p>（2）当社の業務の適正な実施に著しい支障を及ぼすおそれがある場合</p>
+
+    <p>（3）本人または第三者がその他法令に違反することとなる場合
+        前項の定めにかかわらず、履歴情報および特性情報などの個人情報以外の情報については、原則として開示いたしません。</p>
+
+    <h3><a id="user-content-第６条個人情報の訂正および削除" class="anchor" href="#第６条個人情報の訂正および削除" aria-hidden="true"><span class="octicon octicon-link"></span></a>第６条（個人情報の訂正および削除）</h3>
+
+    <p>　ユーザーは、当社の保有する自己の個人情報が誤った情報である場合には、当社が定める手続きにより、当社に対して個人情報の訂正または削除を請求することができます。</p>
+
+    <p>　当社は、ユーザーから前項の請求を受けてその請求に応じる必要があると判断した場合には、遅滞なく、当該個人情報の訂正または削除を行い、これをユーザーに通知します。</p>
+
+    <h3><a id="user-content-第７条個人情報の利用停止等" class="anchor" href="#第７条個人情報の利用停止等" aria-hidden="true"><span class="octicon octicon-link"></span></a>第７条（個人情報の利用停止等）</h3>
+
+    <p>　当社は、本人から、個人情報が、利用目的の範囲を超えて取り扱われているという理由、または不正の手段により取得されたものであるという理由により、その利用の停止または消去（以下、「利用停止等」といいます。）を求められた場合には、遅滞なく必要な調査を行い、その結果に基づき、個人情報の利用停止等を行い、その旨本人に通知します。ただし、個人情報の利用停止等に多額の費用を有する場合その他利用停止等を行うことが困難な場合であって、本人の権利利益を保護するために必要なこれに代わるべき措置をとれる場合は、この代替策を講じます。</p>
+
+    <h3><a id="user-content-第８条プライバシーポリシーの変更" class="anchor" href="#第８条プライバシーポリシーの変更" aria-hidden="true"><span class="octicon octicon-link"></span></a>第８条（プライバシーポリシーの変更）</h3>
+
+    <p>　本ポリシーの内容は、ユーザーに通知することなく、変更することができるものとします。</p>
+
+    <p>　当社が別途定める場合を除いて、変更後のプライバシーポリシーは、本ウェブサイトに掲載したときから効力を生じるものとします。</p>
+
+    <h3><a id="user-content-第９条お問い合わせ窓口" class="anchor" href="#第９条お問い合わせ窓口" aria-hidden="true"><span class="octicon octicon-link"></span></a>第９条（お問い合わせ窓口）</h3>
+
+    <p>本ポリシーに関するお問い合わせは、下記の窓口までお願い致します。</p>
+
+    <ul>
+    <li>社名：MAISIN&amp;CO.株式会社</li>
+    <li>Eメールアドレス：info@maisin.co</li>
+  </ul>
+  </div>
+
+  <div class="modal-footer">
+    <button ng-click="vm.cancel()" type="button" name="button" class="btn btn-default">Close</button>
+  </div>
+</div>

src/browser/main/tpls/modals/regulation.html

@@ -0,0 +1,264 @@
+<div class="new-snippet-modal">
+  <div class="modal-header">
+    <h4>利用規約</h4>
+  </div>
+
+  <div class="modal-body marked short">
+  <h1>CodeXen利用規約</h1>
+
+  <p>定義</p>
+
+  <p>　この利用規約（以下、「本規約」といいます。）はMAISIN&amp;CO.株式会社（以下、「当社」といいます。）がこのcodexen.github.ioのドメインおよびサブドメインのウェブサイト（以下、「当サイト」といます。）において公開する、またはCodeXen、またはそれに付随する名称で提供するサービス（以下、「本サービス」といいます。）の利用条件を定めるものです。登録ユーザーの皆さま（以下、「ユーザー」といいます。）には、本規約に従って本サービスをご利用頂きます。</p>
+
+  <p>　アプリケーションとは、本サービスの利用を通してユーザーが使用するアプリケーションを意味します。</p>
+
+  <p>作成：平成５月２２日</p>
+
+  <h3><a id="user-content-第1条規約の適用" class="anchor" href="#第1条規約の適用" aria-hidden="true"><span class="octicon octicon-link"></span></a>第1条（規約の適用）</h3>
+
+  <p>　ユーザーが、当サイトにアクセスし、本サービスを利用される場合、本規約に同意したものとみなされます。 本利用規約に同意頂けない場合は、当サイトへのアクセス、または本サービスをご利用頂くことは出来ません。</p>
+
+  <p>　本サービスにつき別途定めるプライバシーポリシー、ガイドラインその他の規約（以下「個別規約」といいます。）も、本規約の一部を構成するものとします。 本規約の定めと個別規約の定めが異なる場合は、当該個別規約の定めが優先して適用されるものとします。</p>
+
+  <h3><a id="user-content-第2条利用登録" class="anchor" href="#第2条利用登録" aria-hidden="true"><span class="octicon octicon-link"></span></a>第2条（利用登録）</h3>
+
+  <p>　登録希望者が当社の定める方法によって利用登録を申請し、当社がこれを承認することによって利用登録が完了するものとします。</p>
+
+  <p>　当社は、利用登録の申請者に以下の事由があると判断した場合、利用登録の申請を承認しないことがあり、その理由については一切の開示義務を負わないものとします。なお、未成年者である場合は、親権者など法定代理人の同意を得たうえで本サービスを利用しなければなりません。</p>
+
+  <p>（1）本規約に違反したことがある者からの申請である場合</p>
+
+  <p>（2）利用登録の申請に際して虚偽の事項を届け出た場合</p>
+
+  <p>（3） 未成年者、成年被後見人、被保佐人または被補助人であり、法定代理人、後見人､保佐人または補助人の同意を得ていなかった場合</p>
+
+  <p>（4）反社会的勢力等である、または資金提供その他を通じて反社会的勢力等の維持、運営もしくは経営に協力もしくは関与する等反社会的勢力との何らかの交流もしくは関与を行っていると当社が判断した場合</p>
+
+  <p>（5）その他、当社が利用登録を相当でないと判断した場合</p>
+
+  <h3><a id="user-content-第3条ユーザーidおよびパスワードの管理" class="anchor" href="#第3条ユーザーidおよびパスワードの管理" aria-hidden="true"><span class="octicon octicon-link"></span></a>第3条（ユーザーIDおよびパスワードの管理）</h3>
+
+  <p>　ユーザーは、自己の責任において、本サービスのユーザーIDおよびパスワードを管理するものとします。</p>
+
+  <p>　ユーザーは、いかなる場合にも、ユーザーIDおよびパスワードを第三者に譲渡または貸与することはできません。当社は、ユーザーIDとパスワードの組み合わせが登録情報と一致してログインされた場合には、そのユーザーIDを登録しているユーザー自身による利用とみなします。</p>
+
+  <h3><a id="user-content-第4条アプリケーションの登録" class="anchor" href="#第4条アプリケーションの登録" aria-hidden="true"><span class="octicon octicon-link"></span></a>第4条（アプリケーションの登録）</h3>
+
+  <p>　ユーザーは、本サービス上に定める当社所定の手続きに従い、アプリケーション毎にその登録を申し込むものとします。ただし、1アカウントにつき登録可能なアプリケーションの数は当社が別途定めるところによるものとします。</p>
+
+  <p>　前項の申込みに対し、本サービス上に登録の完了を示す旨の表示がされた時点をもって、アプリケーションの登録は完了し、ユーザーは当該アプリケーションの利用ができるものとします。 アプリケーションの登録をしたユーザーが、その登録期間中、ユーザー資格を喪失した場合は、その理由を問わず当然に全てのアプリケーションの登録も抹消されるものとし、ユーザーは予めこれに同意するものとします。</p>
+
+  <h3><a id="user-content-第5条利用料金および支払方法" class="anchor" href="#第5条利用料金および支払方法" aria-hidden="true"><span class="octicon octicon-link"></span></a>第5条（利用料金および支払方法）</h3>
+
+  <p>　ユーザーは、本サービス利用の対価として、当社が別途定め、本サービスに表示する利用料金を、当社が指定する方法により支払うものとします。</p>
+
+  <p>　ユーザーが利用料金の支払を遅滞した場合には、支払期日の翌日から、支払いの日までの日数について、年利14.6％の割合による遅延損害金を支払うものとします。その際支払いに伴う手数料等はユーザーが負担することとします。</p>
+
+  <h3><a id="user-content-第6条禁止事項" class="anchor" href="#第6条禁止事項" aria-hidden="true"><span class="octicon octicon-link"></span></a>第6条（禁止事項）</h3>
+
+  <p>　ユーザーは、本サービスの利用にあたり、以下の行為をしてはなりません。</p>
+
+  <p>（1）法令または公序良俗に違反する行為</p>
+
+  <p>（2）犯罪行為に関連する行為</p>
+
+  <p>（3）当社のサーバーまたはネットワークの機能を破壊したり、妨害したりする行為</p>
+
+  <p>（4）当社のサービスの運営を妨害するおそれのある行為</p>
+
+  <p>（5）他のユーザーに関する個人情報等を収集または蓄積する行為</p>
+
+  <p>（6）他のユーザーに成りすます行為</p>
+
+  <p>（7）当社のサービスに関連して、反社会的勢力に対して直接または間接に利益を供与する行為</p>
+
+  <p>（8）当社、本サービスの他の利用者または第三者の知的財産権、肖像権、プライバシー、名誉その他の権利または利益を侵害する行為</p>
+
+  <p>（9）過度に暴力的な表現、露骨な性的表現、人種、国籍、信条、性別、社会的身分、門地等による差別につながる表現、自殺、自傷行為、薬物乱用を誘引または助長する表現、その他反社会的な内容を含み他人に不快感を与える表現を、投稿または送信する行為</p>
+
+  <p>（10）営業、宣伝、広告、勧誘、その他営利を目的とする行為（当社の認めたものを除きます。）、性行為やわいせつな行為を目的とする行為、面識のない異性との出会いや交際を目的とする行為、他のお客様に対する嫌がらせや誹謗中傷を目的とする行為、その他本サービスが予定している利用目的と異なる目的で本サービスを利用する行為</p>
+
+  <p>（11）宗教活動または宗教団体への勧誘行為</p>
+
+  <p>（12）当社の著作物や当サービスのソースコード等を複製・編集し、営利目的の著作物を作成、または販売する行為</p>
+
+  <p>（13）その他、当社が不適切と判断する行為</p>
+
+  <h3><a id="user-content-第7条本サービスの提供の停止等" class="anchor" href="#第7条本サービスの提供の停止等" aria-hidden="true"><span class="octicon octicon-link"></span></a>第7条（本サービスの提供の停止等）</h3>
+
+  <p>　当社は、以下のいずれかの事由があると判断した場合、ユーザーに事前に通知することなく本サービスの全部または一部の提供を停止または中断することができるものとします。</p>
+
+  <p>（1）本サービスにかかるコンピュータシステムの保守点検または更新を行う場合</p>
+
+  <p>（2）地震、落雷、火災、停電または天災などの不可抗力により、本サービスの提供が困難となった場合</p>
+
+  <p>（3）コンピュータまたは通信回線等が事故により停止した場合</p>
+
+  <p>（4）外部から攻撃を受け、本サービスの継続が困難になった場合</p>
+
+  <p>（5）その他、当社が本サービスの提供が困難と判断した場合
+    当社は、本サービスの提供の停止または中断により、ユーザーまたは第三者が被ったいかなる不利益または損害について、理由を問わず一切の責任を負わないものとし、返金も行わないものとします。</p>
+
+  <h3><a id="user-content-第8条コンテンツ及び知的財産権の帰属等" class="anchor" href="#第8条コンテンツ及び知的財産権の帰属等" aria-hidden="true"><span class="octicon octicon-link"></span></a>第8条（コンテンツ及び知的財産権の帰属等）</h3>
+
+  <p>　「コンテンツ」とは、プログラム、ソースコード、API、文章、音楽、音声、画像、動画、その他の情報をいい、本サービスを通じてアクセスすることができるコンテンツを「サービスコンテンツ」、ユーザーが本サービスを利用して送信等したコンテンツ（データ、サービスおよび下記に定めるアプリケーションを含みます。）を「ユーザーコンテンツ」とそれぞれいいます。</p>
+
+  <p>　「知的財産権」とは、著作権、特許権、実用新案権、商標権、意匠権その他の知的財産権をいい、それらの権利を取得しまたはそれらの権利につき登録等を出願する権利を含みます。</p>
+
+  <p>（1）本サービスおよびサービスコンテンツに関する知的財産権その他の権利はすべて当社（または当社に使用許諾している者）に帰属しており、本規約に基づく本サービスの利用の許諾は、本サービスに関する当社（または当社に使用許諾している者）の知的財産権の使用許諾を意味するものではありません。</p>
+
+  <p>（2）当社は、当社が提供するサービスコンテンツについて、ユーザーに対し、本サービスの利用を唯一の目的とする、譲渡および再許諾不可能な非独占的利用権を付与します。 ユーザーは、ユーザーコンテンツを、本サービスが予定している態様を超えて利用（複製、複写、改変、第三者への再許諾その他のあらゆる利用を含みます。）することはできません。</p>
+
+  <p>（3）当社はサービスコンテンツおよびユーザーコンテンツのバックアップを行う義務を負わないものとします。ユーザーは、ユーザーコンテンツのバックアップが必要な場合には、自己の費用と責任でこれを行うものとします。</p>
+
+  <p>（4）当社は、法令または本規約の遵守状況などを確認する必要がある場合、ユーザーコンテンツの内容を確認することができるものとします。</p>
+
+  <p>（5）当社は、本サービスに当社または第三者の広告を掲載することができるものとします。</p>
+
+  <h3><a id="user-content-第9条利用制限および登録抹消" class="anchor" href="#第9条利用制限および登録抹消" aria-hidden="true"><span class="octicon octicon-link"></span></a>第9条（利用制限および登録抹消）</h3>
+
+  <p>　当社は、以下の場合には、事前の通知なく、投稿データを削除し、ユーザーに対して本サービスの全部もしくは一部の利用を制限しまたはユーザーとしての登録を抹消することができるものとします。</p>
+
+  <p>（1）ユーザーが本規約のいずれかの条項に違反した場合</p>
+
+  <p>（2）ユーザーが登録事項に虚偽の事実があることが判明した場合</p>
+
+  <p>（3）破産、民事再生、会社更生または特別清算の手続開始決定等の申立がなされたとき</p>
+
+  <p>（4）ユーザーが登録後1年間以上本サービスの利用がない場合</p>
+
+  <p>（5）当社からの問い合わせその他の回答を求める連絡に対して、ユーザー側から30日間以上応答がない場合</p>
+
+  <p>（6）通常の範囲でのWebブラウザもしくは当社が提供するアプリケーションによる使用以外での特殊なアクセスを行った場合</p>
+
+  <p>（7）大量のリクエストを本サイトに対して発行し、システムに対する負荷をかける行為</p>
+
+  <p>（8）不正アクセスやクラッキングに相当する行為</p>
+
+  <p>（9）法令に触れる行為</p>
+
+  <p>（10）犯罪に関わる行為</p>
+
+  <p>（11）著作権、特許権等の知的財産権を侵害する行為</p>
+
+  <p>（12）公序良俗に反する行為</p>
+
+  <p>（13）社会的に不適切な行動と解される行為</p>
+
+  <p>（14）第6条に該当する場合</p>
+
+  <p>（15）その他、当社が本サービスの利用を適当でないと判断した場合    前項各号のいずれかに該当した場合、ユーザーは，当然に当社に対する一切の債務について期限の利益を失い、その時点において負担する一切の債務を直ちに一括して弁済しなければなりません。
+    当社は、本条に基づき当社が行った行為によりユーザーに生じた損害について、一切の責任を負いません。</p>
+
+  <h3><a id="user-content-第10条一般条項" class="anchor" href="#第10条一般条項" aria-hidden="true"><span class="octicon octicon-link"></span></a>第10条（一般条項）</h3>
+
+  <p>１. 通知</p>
+
+  <p>(1)本サービスに関する当社からユーザーへの通知・連絡は、当社が運営するウェブサイト内の適宜の場所への掲示その他、当社が適当と判断する方法により行なうものとします。 当
+  社からの通知・連絡が不着であったり遅延したりといったことによって生じる損害につい
+  て、当社は一切の責任を負いません。</p>
+
+  <p>(2)本サービスに関するユーザーから当社への通知・連絡は、当社が運営するウェブサイト内
+  の適宜の場所に設置するお問い合わせフォームの送信または当社が指定する方法により行
+  うものとします。ユーザーから通知・連絡があった場合、当社は、当社所定の方法により、
+  ユーザーの本人確認を行うことができるものとします。また、ユーザーからの通知・連絡に対
+  する回答方法については、その都度当社が最適と考える方法により回答することができる
+  ものとし、その回答方法をユーザーが指定することはできないものとします。</p>
+
+  <p>２. 譲渡禁止</p>
+
+  <p>　ユーザーは、当社の書面による事前の承諾なく、本規約に基づく契約上の地位または本規約に基づく権利もしくは義務につき、第三者に対し、譲渡、移転、担保設定、貸与、その他の処分をすることはできません。</p>
+
+  <p>３. 事業譲渡</p>
+
+  <p>　当社が本サービスに係る事業を第三者に譲渡する場合（事業譲渡、会社分割その他本サービスが移転する一切の場合を含む。）には、当該事業の譲渡に伴い、ユーザーの本規約に基づく契約上の地位、本規約に基づく権利・義務およびアカウント登録に伴い登録された情報その他の情報を、当社は当該事業の譲受人に譲渡することができるものとし、ユーザーは、かかる譲渡につき予め承諾するものとします。</p>
+
+  <p>４. 分離可能性</p>
+
+  <p>　本規約のいずれかの条項またはその一部が、消費者契約法その他の法令等により無効と判断された場合であっても、本規約の残りの規定および一部が無効と判断された規定の残りの部分は、継続して有効に存続し、当該無効とされた条項またはその一部を、有効とするために必要な範囲で修正し、最大限、当該無効とされた条項またはその一部の趣旨および法律的経済的に同等の効果が確保されるよう解釈されるものとします。</p>
+
+  <p>５. 定めのない事項等</p>
+
+  <p>　本規約に定めのない事項または本規約の解釈に疑義が生じた場合には（ユーザーは、当社の定めるところに従うものとします。これにより解決しない場合には、）、当社およびユーザーは、信義誠実の原則に従って協議の上速やかに解決を図るものとします。</p>
+
+  <p>６. 準拠および合意管轄</p>
+
+  <p>　本規約は日本法に準拠します。ユーザーは、本規約に関連する紛争については、福岡地方裁判所を第1審の専属的合意管轄裁判所とすることに同意するものとします。</p>
+
+  <h3><a id="user-content-第11条ユーザーの責任" class="anchor" href="#第11条ユーザーの責任" aria-hidden="true"><span class="octicon octicon-link"></span></a>第11条（ユーザーの責任）</h3>
+
+  <p>（1）ユーザーは、本サービスに有効にアカウント登録されている期間内に限り、本規約および当社の定めるところにしたがい、本サービスを利用することができます。</p>
+
+  <p>（2） 本サービスの提供を受けるために必要な、コンピューター、スマートフォンその他の機器、ソフトウェア、通信回線その他の通信環境等は、ユーザーの費用と責任において準備し維持するものとします。当社は、本サービスがあらゆる機器等に適合することを保証するものではありません。</p>
+
+  <p>（3）ユーザーは、自らの責任において本サービスを利用するものとし、本サービスにおいて行った一切の行為およびその結果について一切の責任を負うものとします。</p>
+
+  <p>（4）ユーザーが、当サービスを退会したユーザーのソースコードやapi等を複製・編集等の行為を行う場合は、自らの責任において行うものとし、本サービスにおいて行った一切の行為およびその結果について一切の責任を負うものとします。</p>
+
+  <p>（5）第三者が他のユーザーのメールアドレスやパスワードを使用し、そのユーザーに成りすまし、それが発覚した場合、成りすまし後投稿・編集したコンテンツに対して権利を主張する事はできません。その場合ユーザーと第三者との間でクレーム、トラブル、請求、紛争等（以下、「クレーム等」といいます。）が発生した場合、当該ユーザーと第三者は自己の費用と責任において当該問題等を解決し、且つ、当該損害等を賠償し、当社は一切の責任を負いません。</p>
+
+  <p>（6）ユーザーコンテンツに関して、第三者との間でクレーム等が生じ、又は第三者に損害等を与えた場合には、当該ユーザーは自己の費用と責任において当該クレーム等を解決し、かつ、当該損害等を賠償するものとし、当社は一切の責任を負わないものとします。その他本サービス上での、ユーザー間またはユーザーと第三者間での問題が発生した場合、当該ユーザーは自己の責任と費用において、問題を解決しなければならず、当社は一切の責任を負いません。</p>
+
+  <p>（7）本サービス上でユーザー自身が登録・公開した情報に関しては、当該ユーザーが自己の責任と費用において管理するものとし、当社は一切の責任を負いません。</p>
+
+  <p>（8）ユーザーが退会した後も、本サービス上でユーザー自身が登録・公開した情報に関しては、当該ユーザーが自己の責任に帰属するものとし、当社は一切の責任を負いません。</p>
+
+  <p>（9）ユーザーは、本サービスを利用したことに関連して、当社が直接的もしくは間接的に何らかの損害（弁護士費用の負担を含みます。）を被った場合（当社がユーザーの利用を原因とする請求等を第三者より受けた場合を含みます。）、当社の請求に従って直ちにこれを補償するものとします。</p>
+
+  <h3><a id="user-content-第12条免責事項" class="anchor" href="#第12条免責事項" aria-hidden="true"><span class="octicon octicon-link"></span></a>第12条（免責事項）</h3>
+
+  <p>　本サービスは開発中のものであり、その性質上、バグや瑕疵、誤動作など、正常に動作しない症状等の不具合を含み得るものとして提供され、当社はその正確性・完全性・有用性・信頼性・無害性等に関していかなる保証もいたしません。ユーザーのデータは、予告なく一部または全部削除されたり、当社からユーザーに対してデータ等の削除を要請する場合があります。当社は、バージョン変更によるアップデート後に提供されるCodeXenや他のサービスにおいてデータを引き継ぐ義務を負わないものとします。また、当社は、CodeXenのユーザーが自らのアカウントを削除した後も、そのユーザーが過去に投稿したコンテンツ（ソースコードやコマンド、スニペット等）を削除する義務は負わず、ユーザーは削除を要求する権利を持たない事に同意します。
+  　当社は、次に掲げる事由その他本サービスの利用により発生したユーザー、その他関係者の損害について、 損害発生の理由の如何を問わず（ユーザーのサービス利用能力の欠如に起因するもの、本サービスに対する不正アクセス・ハッキング・改竄等に起因するものも含む）、一切の責任を負いません。</p>
+
+  <p>（1）本サービスの利用、利用不能</p>
+
+  <p>（2）作為不作為、内容を問わず、本サービスの利用・アクセスによって生じた個人的損害、著作権その他知的財産権の侵害</p>
+
+  <p>（3）コンテンツの誤り、不正確性、エラー</p>
+
+  <p>（4）意図する意図しないに関わらず、ファイルの上書きや書き換え、またはそれに伴う操作において、元ファイルの復元が不可能な場合</p>
+
+  <p>（5）本サービスのサーバーもしくは蓄積された全ての個人情報に対する不正アクセス</p>
+
+  <p>（6）本サービスのトランザクションの遅延や中断</p>
+
+  <p>（7）第三者によって本サービスに仕組まれたウイルス、不正なプログラム、またはそれに類するもの</p>
+
+  <p>（8）本サービスへのアクセス・利用により生じるエラー、バグ、コンテンツの欠損・消失・変更・損失・損害</p>
+
+  <p>（9）第三者による中傷、攻撃、勧誘</p>
+
+  <p>（10）ユーザーによるパスワードおよびアカウント情報が通信過程で第三者に解読されたことによりアクセス権の秘密性を守れなかったこと</p>
+
+  <p>（11）天災等の不可抗力、予想外の技術的・セキュリティ上の問題、又は不正アクセス等によりシステムに重大な支障が生じたとき等のやむを得ない事由によって、本サービスの一部又は全部の提供が不可能になったとき</p>
+
+  <p>（12）法律や裁判所の命令によって個人情報の開示を命じられ、又は捜査当局の任意捜査若しくは法律上照会権限、 開示請求権を持つ者によって照会・開示を求められるなど他の優先する利益のために当社が個人情報を開示したこと</p>
+
+  <h3><a id="user-content-第13条ライセンスに関する条項" class="anchor" href="#第13条ライセンスに関する条項" aria-hidden="true"><span class="octicon octicon-link"></span></a>第13条（ライセンスに関する条項）</h3>
+
+  <p>　ユーザーが当社の提供するソースコード、APIを販売、譲渡、またはサブライセンスすることはできません。</p>
+
+  <h3><a id="user-content-第14条サービス内容の変更等" class="anchor" href="#第14条サービス内容の変更等" aria-hidden="true"><span class="octicon octicon-link"></span></a>第14条（サービス内容の変更等）</h3>
+
+  <p>　当社は、ユーザーに通知することなく本サービスの内容・利用料金を変更し、または本サービスの提供を中止することができるものとし、これによってユーザーに生じた損害について一切の責任を負いません。</p>
+
+  <h3><a id="user-content-第15条利用規約の変更" class="anchor" href="#第15条利用規約の変更" aria-hidden="true"><span class="octicon octicon-link"></span></a>第15条（利用規約の変更）</h3>
+
+  <p>　当社は、必要と判断した場合には、ユーザの承諾を得ることなく、本規約を随時変更・改訂することができます。 また、変更・改訂後の本規約が、第15条一項に掲げる方法でユーザーへ通知・連絡を当社が行った時点以降に、ユーザーが当サイトにアクセスし、本サービスを利用される場合、変更・改訂後の利用規約に同意したものとみなされます。 変更・改訂後の本規約に同意頂けない場合は、当サイトへのアクセス、または本サービスをご利用頂くことは出来ません。</p>
+
+  <h3><a id="user-content-第16条個人情報の保護" class="anchor" href="#第16条個人情報の保護" aria-hidden="true"><span class="octicon octicon-link"></span></a>第16条（個人情報の保護）</h3>
+
+  <p>　当社は、<a href ng-click="vm.showPP()">プライバシー・ポリシー（リンク）</a>に従って、ユーザーの個人情報を適切に取り扱います。</p>
+
+  <p>以上</p>
+
+  <p>（平成２７年５月２２日制定）</p>
+
+  </div>
+
+  <div class="modal-footer">
+    <button ng-if="vm.isAgreement" ng-disabled="vm.check" ng-click="vm.submit()" type="button" class="btn btn-primary">同意する</button>
+    <button ng-if="vm.isAgreement" ng-click="vm.cancel()" type="button" name="button" class="btn btn-default">同意しない</button>
+    <button ng-if="!vm.isAgreement" ng-click="vm.cancel()" type="button" name="button" class="btn btn-default">Close</button>
+  </div>
+</div>

src/browser/main/tpls/modals/select-snippet-modal.html

@@ -0,0 +1,25 @@
+<div class="select-snippet-modal">
+  <div class="modal-header">
+    Select a snippet
+  </div>
+  <div class="modal-body">
+    <ul class="snippet-list">
+      <li ng-repeat="snippet in vm.snippets" ng-click="vm.select(snippet)">
+        <p><small>callsign</small> <span ng-bind="snippet.callSign"></span> <small ng-bind="snippet.updatedAt|fromNow" class="call-sign"></small></p>
+        <p ng-bind="snippet.description"></p>
+
+        <div ui-ace="{
+          showGutter: true,
+          useWrapMode : true,
+          mode:snippet.mode.toLowerCase(),
+          theme:'solarized_dark'
+        }"
+        readonly
+        ng-model="snippet.content"></div>
+      </li>
+    </ul>
+  </div>
+  <div class="modal-footer">
+    <button ng-click="vm.cancel()" class="btn btn-default">Cancel</button>
+  </div>
+</div>

src/browser/main/tpls/modals/sign-out-modal.html

@@ -0,0 +1,16 @@
+<div class="new-snippet-modal">
+  <div class="modal-header">
+    <h4>Sign Out</h4>
+  </div>
+
+  <div class="modal-body">
+    <p>
+      Are you sure to sign out?
+    </p>
+  </div>
+
+  <div class="modal-footer">
+    <button ng-click="vm.submit()" type="button" name="button" class="btn btn-danger">Sign Out</button>
+    <button ng-click="vm.cancel()" type="button" name="button" class="btn btn-default">Cancel</button>
+  </div>
+</div>

src/browser/main/tpls/states/auth.signin.tpl.html

@@ -1,4 +1,7 @@
 <form ng-submit="vm.signIn()">
+  <p ng-if="vm.authFailed" class="alert alert-danger">
+    Incorrect email or password entered. Please try again.
+  </p>
   <div class="form-group">
     <label for="email">E-mail</label>
     <input ng-model="vm.email" type="text" id="email" name="name" class="form-control" placeholder="E-mail">

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

@@ -0,0 +1,48 @@
+<div class="home-state">
+  <h1 class="jumbotron">Codexen App <small>v0.1.2</small></h1>
+
+  <h2>About CodeXen</h2>
+
+  <p>
+    CodeXen is short code storage tool make coding more stressless. If you use CodeXen, then you will be disentangled from troublesome organizing a large number of snippets and googling same code many times.
+  </p>
+
+  <ol>
+    <li>
+      <h4>
+        Post your code
+      </h4>
+      <p>
+        Post your commonly used code with description,category,and tags.
+      </p>
+    </li>
+    <li>
+      <h4>
+        Save on cloud
+      </h4>
+      <p>
+        From short snippet to long complex code,CodeXen saves any code simply.
+      </p>
+    </li>
+    <li>
+      <h4>
+        Use code like a magic
+      </h4>
+      <p>
+        CodeXen call code you posted whereever you are.Type [shift+control+tab] simultaneously.
+      </p>
+    </li>
+    <li>
+      <h4>
+        Code Elegantly
+      </h4>
+      <p>
+        That's all!
+        You must be loved with CodeXen. Enjoy coding;)
+      </p>
+    </li>
+  </ol>
+  <p>
+    © 2015 MAISIN&CO.,Inc.
+  </p>
+</div>

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" class="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">
-      <input ng-model="vm.search" ng-change="vm.searchSnippets()" type="text" name="name" class="form-control" placeholder="Search ..." autocomplete="off">
+      <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">
 

src/browser/popup/index.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html ng-app="codexen.popup">
+  <head>
+    <title>
+      CodeXen App
+    </title>
+
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
+    <meta name="description" content="CodeXen - Short code storage service">
+
+    <link rel="stylesheet" href="../vendor/css/font-awesome.css" media="screen" title="no title" charset="utf-8">
+
+    <!-- inject:css -->
+    <link rel="stylesheet" href="styles/app.css">
+    <link rel="stylesheet" href="../shared/styles/bootstrap.css">
+    <!-- endinject -->
+
+  </head>
+  <body class="popup-body" ng-controller="PopUpController">
+
+    <div class="search-block">
+      <input ng-change="filterList(searchNeedle)" search-input id="search-input" type="text" class="form-control" ng-model="searchNeedle" ng-change="refreshResult">
+    </div>
+
+    <div class="result-block row-fluid">
+      <ul id="result-list" class="result-list left-pane">
+        <li ng-click="selectSnippet($index)" ng-repeat="snippet in filteredSnippets" ng-class="{active:$index == selectIndex}"><a href="#"> <small ng-bind="snippet.callSign"></small>&nbsp;/&nbsp;<span ng-bind="snippet.description"></span></a></li>
+      </ul>
+
+      <div class="right-pane">
+        <div class="result-detail-control">
+          <button ng-click="writeCode(selectedItem.content)" id="btnClipboard" type="button" name="button" class="btn btn-default"><i class="fa fa-clipboard"></i></button>
+        </div>
+        <div id="aceView" class="result-detail-content"
+          ui-ace="{
+            showGutter: false,
+            useWrapMode: true,
+            mode:selectedItem.mode.toLowerCase(),
+            onLoad: aceLoaded,
+            theme: 'solarized_dark'
+          }"
+
+          readonly
+          ng-model="selectedItem.content"
+        ></div>
+      </div>
+    </div>
+    <script src="../vendor/ace.js"></script>
+    <script src="../vendor/angular.js" charset="utf-8"></script>
+    <script src="../vendor/satellizer.js"></script>
+    <script src="../vendor/hotkeys.js" charset="utf-8"></script>
+
+    <!-- inject:js -->
+    <script src="popup.js"></script>
+    <script src="services/snippet.js"></script>
+    <script src="../shared/shared.js"></script>
+    <script src="../shared/directives/ui-ace.js"></script>
+    <script src="../shared/config/ace.js"></script>
+    <script src="../shared/config/env.js"></script>
+    <script src="../shared/config/satellizer.js"></script>
+    <script src="../shared/services/Snippet.js"></script>
+    <!-- endinject -->
+  </body>
+</html>

src/browser/popup/index.inject.html

@@ -10,8 +10,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
     <meta name="description" content="CodeXen - Short code storage service">
 
-    <link rel="stylesheet" href="../../vendor/css/font-awesome.css" media="screen" title="no title" charset="utf-8">
+    <link rel="stylesheet" href="../vendor/css/font-awesome.css" media="screen" title="no title" charset="utf-8">
-    <link rel="stylesheet" href="../../main.css" media="screen" title="no title" charset="utf-8">
+
+    <!-- inject:css -->
+    <!-- endinject -->
+
   </head>
   <body class="popup-body" ng-controller="PopUpController">
 
@@ -21,14 +24,12 @@
 
     <div class="result-block row-fluid">
       <ul id="result-list" class="result-list left-pane">
-        <li ng-click="selectSnippet($index)" ng-repeat="snippet in filteredSnippets" ng-class="{active:$index == selectIndex}"><a href="#"> <span ng-bind="snippet.callSign"></span> <small ng-bind="snippet.description"></small></a></li>
+        <li ng-click="selectSnippet($index)" ng-repeat="snippet in filteredSnippets" ng-class="{active:$index == selectIndex}"><a href="#"> <small ng-bind="snippet.callSign"></small>&nbsp;/&nbsp;<span ng-bind="snippet.description"></span></a></li>
       </ul>
 
       <div class="right-pane">
         <div class="result-detail-control">
           <button ng-click="writeCode(selectedItem.content)" id="btnClipboard" type="button" name="button" class="btn btn-default"><i class="fa fa-clipboard"></i></button>
-          <!-- <button ng-click="editSnippet(selectedItem.id)" id="btnEdit" type="button" name="button" class="btn btn-default"><i class="fa fa-edit"></i></button> -->
-          <!-- <button id="btnShare" type="button" name="button" class="btn btn-default"><i class="fa fa-share"></i></button> -->
         </div>
         <div id="aceView" class="result-detail-content"
           ui-ace="{
@@ -44,12 +45,12 @@
         ></div>
       </div>
     </div>
-    <script src="../../vendor/ace.js"></script>
+    <script src="../vendor/ace.js"></script>
-    <script src="../../vendor/angular.js" charset="utf-8"></script>
+    <script src="../vendor/angular.js" charset="utf-8"></script>
-    <script src="../../directives/ui-ace.js"></script>
+    <script src="../vendor/satellizer.js"></script>
-    <script src="../../vendor/satellizer.js"></script>
+    <script src="../vendor/hotkeys.js" charset="utf-8"></script>
-    <script src="../../vendor/hotkeys.js" charset="utf-8"></script>
+
-    <script src="popup.js" charset="utf-8"></script>
+    <!-- inject:js -->
-    <script src="services/snippet.js" charset="utf-8"></script>
+    <!-- endinject -->
   </body>
 </html>

src/browser/popup/popup.js

@@ -6,10 +6,12 @@ var ipc = require('ipc')
 var resultList = document.getElementById('result-list')
 
 angular.module('codexen.popup', [
+  'codexen.shared',
   'ui.ace',
   'satellizer',
   'cfp.hotkeys'
 ])
+.constant('appName', 'popup')
 .controller('PopUpController', function ($scope, Snippet, $auth, $window, hotkeys, $document, $filter) {
   // Setup Events
   remote.getCurrentWindow().on('focus', function () {

src/browser/popup/styles/_popup.styl

@@ -26,6 +26,7 @@
       padding: 0
       border-right: 1px solid $baseBorderColor
       li
+        white-space nowrap
         &:nth-child(even)
           background-color $baseBackgroundColor
         &:nth-child(odd)

src/browser/popup/styles/app.css

@@ -0,0 +1,68 @@
+.popup-body .search-block {
+  padding: 5px;
+  height: 44px;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.popup-body .result-block {
+  position: absolute;
+  top: 44px;
+  bottom: 0;
+  width: 100%;
+  overflow: hidden;
+}
+.popup-body .result-block .left-pane {
+  margin: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 40%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.popup-body .result-block .result-list {
+  list-style: none;
+  padding: 0;
+  border-right: 1px solid #001a20;
+}
+.popup-body .result-block .result-list li {
+  white-space: nowrap;
+}
+.popup-body .result-block .result-list li:nth-child(even) {
+  background-color: #002b36;
+}
+.popup-body .result-block .result-list li:nth-child(odd) {
+  background-color: #00323f;
+}
+.popup-body .result-block .result-list li.active {
+  color: #fff;
+  background-color: #088cff;
+}
+.popup-body .result-block .result-list li a {
+  display: block;
+  padding: 5px 10px;
+  border-bottom: 1px solid #001a20;
+}
+.popup-body .result-block .right-pane {
+  position: absolute;
+  left: 40%;
+  top: 0;
+  bottom: 0;
+  width: 60%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.popup-body .result-block .result-detail-control {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 34px;
+}
+.popup-body .result-block .result-detail-content {
+  position: absolute;
+  top: 34px;
+  bottom: 0;
+  width: 100%;
+}

src/browser/popup/styles/app.styl

@@ -0,0 +1,4 @@
+@import '../../shared/styles/_vars'
+@import '../../shared/styles/mixins/*'
+
+@import '_popup'

src/browser/shared/config/ace.js

@@ -1,3 +1,3 @@
 /* global angular */
-angular.module('codexen')
+angular.module('codexen.shared')
   .constant('aceModes', ['ABAP', 'ABC', 'ActionScript', 'ADA', 'Apache_Conf', 'AsciiDoc', 'Assembly_x86', 'AutoHotKey', 'BatchFile', 'C9Search', 'C_Cpp', 'Cirru', 'Clojure', 'Cobol', 'coffee', 'ColdFusion', 'CSharp', 'CSS', 'Curly', 'D', 'Dart', 'Diff', 'Dockerfile', 'Dot', 'Dummy', 'DummySyntax', 'Eiffel', 'EJS', 'Elixir', 'Elm', 'Erlang', 'Forth', 'FTL', 'Gcode', 'Gherkin', 'Gitignore', 'Glsl', 'golang', 'Groovy', 'HAML', 'Handlebars', 'Haskell', 'haXe', 'HTML', 'HTML_Ruby', 'INI', 'Io', 'Jack', 'Jade', 'Java', 'JavaScript', 'JSON', 'JSONiq', 'JSP', 'JSX', 'Julia', 'LaTeX', 'Lean', 'LESS', 'Liquid', 'Lisp', 'LiveScript', 'LogiQL', 'LSL', 'Lua', 'LuaPage', 'Lucene', 'Makefile', 'Markdown', 'Mask', 'MATLAB', 'MEL', 'MUSHCode', 'MySQL', 'Nix', 'ObjectiveC', 'OCaml', 'Pascal', 'Perl', 'pgSQL', 'PHP', 'Powershell', 'Praat', 'Prolog', 'Properties', 'Protobuf', 'Python', 'R', 'RDoc', 'RHTML', 'Ruby', 'Rust', 'SASS', 'SCAD', 'Scala', 'Scheme', 'SCSS', 'SH', 'SJS', 'Smarty', 'snippets', 'Soy_Template', 'Space', 'SQL', 'SQLServer', 'Stylus', 'SVG', 'Tcl', 'Tex', 'Text', 'Textile', 'Toml', 'Twig', 'Typescript', 'Vala', 'VBScript', 'Velocity', 'Verilog', 'VHDL', 'XML', 'XQuery', 'YAML', 'Django'])

src/browser/shared/config/env.js

@@ -0,0 +1,4 @@
+/* global angular */
+angular.module('codexen.shared')
+  // .constant('apiUrl', 'http://localhost:8000/')
+  .constant('apiUrl', 'http://codexen-server-dev.elasticbeanstalk.com/')

src/browser/shared/config/satellizer.js

@@ -0,0 +1,8 @@
+/* global angular */
+angular.module('codexen.shared')
+  .config(function ($authProvider, $httpProvider, apiUrl) {
+    $authProvider.baseUrl = apiUrl
+
+    $httpProvider.defaults.useXDomain = true
+    delete $httpProvider.defaults.headers.common['X-Requested-With']
+  })

src/browser/shared/directives/ui-ace.js

@@ -338,6 +338,49 @@ angular.module('ui.ace', [])
           acee.focus()
         })
 
+        scope.$on('insertRequested', function (e, req) {
+          var cursor = acee.selection.getCursor()
+          var str = ''
+          if (cursor.column > 0) str += '\n\n'
+
+          switch (req) {
+            case 'h1':
+              acee.insert(str + '# some heading\n\n')
+              break
+            case 'ul':
+              acee.insert(str + '- item1\n- item2\n- item3')
+              break
+            case 'ol':
+              acee.insert(str + '1. item1\n2. item2\n3. item3')
+              break
+            case 'a':
+              acee.insert(str + '[example.com](http://example.com)')
+              break
+            case 'table':
+              acee.insert(str +
+                'First Header  | Second Header\n' +
+                '------------- | -------------\n' +
+                'Content Cell  | Content Cell\n' +
+                'Content Cell  | Content Cell\n')
+          }
+
+          scope.$evalAsync(function () {
+            ngModel.$setViewValue(session.getValue())
+          })
+        })
+
+        scope.$on('insertSnippetRequested', function (e, snippet) {
+          var cursor = acee.selection.getCursor()
+          var str = ''
+          if (cursor.column > 0) str += '\n\n'
+
+          acee.insert(str + '```\n' + snippet.content + '\n```\n> [snippet#' + snippet.id + '](#/snippets/' + snippet.id + ')\n\n')
+
+          scope.$evalAsync(function () {
+            ngModel.$setViewValue(session.getValue())
+          })
+        })
+
       }
     }
   }])

src/browser/shared/services/Snippet.js

@@ -1,5 +1,5 @@
 /* global angular */
-angular.module('codexen')
+angular.module('codexen.shared')
   .factory('Snippet', function ($http, $auth, apiUrl) {
     var findByUser = function (user) {
       var url = apiUrl + 'snippets/search'

src/browser/shared/shared.js

@@ -0,0 +1,3 @@
+angular.module('codexen.shared', [
+  'satellizer'
+])

src/browser/shared/styles/_index.styl

@@ -0,0 +1,24 @@
+html
+  overflow: hidden
+  height: 100%
+
+body
+  height: 100%
+  overflow: auto
+  font-family: "Lato", sans-serif
+  color $textColor
+  background-color: $appBackgroundColor
+
+label
+  font-family: "Lato", sans-serif
+  color $textColor
+
+h1, h2, h3, h4, h5
+  color $textColorHighlight
+  margin 0
+
+textarea
+  resize: vertical
+
+hr
+  border-color $baseBorderColor