Merge branch 'dev'

* dev: リアルタイム(SocketIO)実装 / Markdown style改善 Conflicts: package.json
リアルタイム(SocketIO)実装 / Markdown style改善
2025-12-14 18:26:26 +00:00 · 2015-09-08 15:30:02 +09:00 · 2015-09-08 15:28:36 +09:00 · 2015-09-06 19:48:44 +09:00 · 2015-09-06 12:19:20 +09:00 · 2015-09-06 12:18:54 +09:00
46 changed files with 622 additions and 250 deletions
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,3 +1,6 @@
 [submodule "browser/ace"]
 	path = browser/ace
 	url = https://github.com/ajaxorg/ace-builds.git
 [submodule "browser/electron-stylus"]
 	path = browser/electron-stylus
 	url = https://github.com/Rokt33r/electron-stylus.git
--- a/Lato-Regular.ttf
+++ b/Lato-Regular.ttf
--- a/Lato-Regular.woff
+++ b/Lato-Regular.woff
--- a/Lato-Regular.woff2
+++ b/Lato-Regular.woff2
--- a/browser/electron-stylus
+++ b/browser/electron-stylus
--- a/browser/finder/Components/FinderDetail.jsx
+++ b/browser/finder/Components/FinderDetail.jsx
@@ -2,10 +2,9 @@ var React = require('react/addons')
 var CodeViewer = require('../../main/Components/CodeViewer')
-var Markdown = require('../../main/Mixins/Markdown')
+var MarkdownPreview = require('../../main/Components/MarkdownPreview')
 module.exports = React.createClass({
  mixins: [Markdown],
  propTypes: {
    currentArticle: React.PropTypes.object
  },
@@ -28,7 +27,7 @@ module.exports = React.createClass({
          <div className='FinderDetail'>
            <div className='header'><i className='fa fa-file-text-o fa-fw'/> {article.title}</div>
            <div className='content'>
-              <div className='marked' dangerouslySetInnerHTML={{__html: ' ' + this.markdown(article.content)}}></div>
+              <MarkdownPreview className='marked' content={article.content}/>
            </div>
          </div>
        )
--- a/browser/finder/index.electron.html
+++ b/browser/finder/index.electron.html
@@ -8,6 +8,17 @@
  <link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css" media="screen" title="no title" charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico">
  <style>
  @font-face {
    font-family: 'Lato';
    src: url('../../Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('../../Lato-Regular.woff') format('woff'), /* Modern Browsers */
         url('../../Lato-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
  }
  </style>
  <script>
  document.addEventListener('mousewheel', function(e) {
    if(e.deltaY % 1 !== 0) {
@@ -47,14 +58,13 @@
      }
    });
  }
  require('electron-stylus')(__dirname + '/../styles/finder/index.styl')
  </script>
 </head>
 <body>
  <div id="content"></div>
  <script src="../ace/src-min/ace.js"></script>
  <script>
    require('../electron-stylus')(__dirname + '/../styles/finder/index.styl', 'finderCss')
    require('node-jsx').install({ harmony: true, extension: '.jsx' })
    require('./index.jsx')
  </script>
--- a/browser/main/Components/AboutModal.jsx
+++ b/browser/main/Components/AboutModal.jsx
@@ -1,6 +1,3 @@
 var remote = require('remote')
 var version = remote.getGlobal('version')
 var React = require('react/addons')
 var ExternalLink = require('../Mixins/ExternalLink')
@@ -19,8 +16,9 @@ module.exports = React.createClass({
    }
  },
  render: function () {
    var version = global.version
    return (
-      <div className='AboutModal modal'>
+      <div className='PreferencesModal sideNavModal modal'>
        <div className='about1'>
          <img className='logo' src='resources/favicon-230x230.png'/>
          <div className='appInfo'>Boost {version == null || version.length === 0 ? 'DEV version' : 'v' + version}</div>
--- a/browser/main/Components/AddMemberModal.jsx
+++ b/browser/main/Components/AddMemberModal.jsx
@@ -7,8 +7,6 @@ var Hq = require('../Services/Hq')
 var KeyCaster = require('../Mixins/KeyCaster')
 var UserStore = require('../Stores/UserStore')
 var getOptions = function (input, callback) {
  Hq.searchUser(input)
    .then(function (res) {
@@ -58,7 +56,6 @@ module.exports = React.createClass({
        })
        .then(function (res) {
          console.log(res.body)
          UserStore.Actions.addMember(res.body)
          this.props.close()
        }.bind(this))
        .catch(function (err) {
--- a/browser/main/Components/CodeDeleteModal.jsx
+++ b/browser/main/Components/CodeDeleteModal.jsx
@@ -25,7 +25,7 @@ module.exports = React.createClass({
  },
  submit: function () {
    var planet = this.props.planet
-    Hq.destroyCode(planet.userName, planet.name, this.props.code.localId)
+    Hq.destroyCode(planet.Owner.name, planet.name, this.props.code.localId)
      .then(function (res) {
        PlanetStore.Actions.destroyCode(res.body)
        this.props.close()
--- a/browser/main/Components/CodeForm.jsx
+++ b/browser/main/Components/CodeForm.jsx
@@ -15,14 +15,14 @@ var getOptions = function (input, callback) {
  Hq.searchTag(input)
    .then(function (res) {
      callback(null, {
-          options: res.body.map(function (tag) {
+        options: res.body.map(function (tag) {
-            return {
+          return {
-              label: tag.name,
+            label: tag.name,
-              value: tag.name
+            value: tag.name
-            }
+          }
-          }),
+        }),
-          complete: false
+        complete: false
-        })
+      })
    })
    .catch(function (err) {
      console.log(err)
@@ -88,18 +88,18 @@ module.exports = React.createClass({
      return tag.value
    })
    if (this.props.code == null) {
-      Hq.createCode(planet.userName, planet.name, this.state.code)
+      Hq.createCode(planet.Owner.name, planet.name, this.state.code)
        .then(function (res) {
          var code = res.body
          PlanetStore.Actions.updateCode(code)
          this.props.close()
-          this.props.transitionTo('codes', {userName: planet.userName, planetName: planet.name, localId: code.localId})
+          this.props.transitionTo('codes', {userName: planet.Owner.name, planetName: planet.name, localId: code.localId})
        }.bind(this))
        .catch(function (err) {
          console.error(err)
        })
    } else {
-      Hq.updateCode(planet.userName, planet.name, this.props.code.localId, this.state.code)
+      Hq.updateCode(planet.Owner.name, planet.name, this.props.code.localId, this.state.code)
        .then(function (res) {
          var code = res.body
          PlanetStore.Actions.updateCode(code)
--- a/browser/main/Components/EditProfileModal.jsx
+++ b/browser/main/Components/EditProfileModal.jsx
@@ -69,7 +69,6 @@ module.exports = React.createClass({
    this.setState({
      passwordSubmitStatus: 'sending'
    }, function () {
      console.log(this.state.password)
      Hq.changePassword(this.state.password)
        .then(function (res) {
          this.setState({
@@ -103,9 +102,9 @@ module.exports = React.createClass({
    }
    return (
-      <div className='EditProfileModal modal tabModal'>
+      <div className='EditProfileModal sideNavModal modal'>
        <div className='leftPane'>
-          <div className='tabLabel'>Edit profile</div>
+          <div className='modalLabel'>Edit profile</div>
          <div className='tabList'>
            <button className={this.state.currentTab === 'userInfo' ? 'active' : ''} onClick={this.selectTab('userInfo')}><i className='fa fa-user fa-fw'/> User Info</button>
            <button className={this.state.currentTab === 'password' ? 'active' : ''} onClick={this.selectTab('password')}><i className='fa fa-lock fa-fw'/> Password</button>
@@ -119,7 +118,7 @@ module.exports = React.createClass({
  },
  renderUserInfoTab: function () {
    return (
-      <div className='userInfoTab'>
+      <div className='userInfoTab tab'>
        <div className='formField'>
          <label>Profile Name</label>
          <input valueLink={this.linkState('user.profileName')}/>
@@ -142,18 +141,18 @@ module.exports = React.createClass({
  },
  renderPasswordTab: function () {
    return (
-      <div className='passwordTab'>
+      <div className='passwordTab tab'>
        <div className='formField'>
          <label>Current password</label>
-          <input valueLink={this.linkState('password.currentPassword')}/>
+          <input type='password' valueLink={this.linkState('password.currentPassword')}/>
        </div>
        <div className='formField'>
          <label>New password</label>
-          <input valueLink={this.linkState('password.newPassword')}/>
+          <input type='password' valueLink={this.linkState('password.newPassword')}/>
        </div>
        <div className='formField'>
          <label>Confirmation</label>
-          <input valueLink={this.linkState('password.passwordConfirmation')}/>
+          <input type='password' valueLink={this.linkState('password.passwordConfirmation')}/>
        </div>
        <div className='formConfirm'>
--- a/browser/main/Components/HomeNavigator.jsx
+++ b/browser/main/Components/HomeNavigator.jsx
@@ -11,7 +11,7 @@ var Modal = require('../Mixins/Modal')
 var UserStore = require('../Stores/UserStore')
-var AboutModal = require('./AboutModal')
+var PreferencesModal = require('./PreferencesModal')
 var PlanetCreateModal = require('./PlanetCreateModal')
 var TeamCreateModal = require('./TeamCreateModal')
 var LogoutModal = require('./LogoutModal')
@@ -65,8 +65,8 @@ module.exports = React.createClass({
  openTeamCreateModal: function () {
    this.openModal(TeamCreateModal, {user: this.state.currentUser, transitionTo: this.transitionTo})
  },
-  openAboutModal: function () {
+  openPreferencesModal: function () {
-    this.openModal(AboutModal)
+    this.openModal(PreferencesModal)
  },
  openPlanetCreateModal: function () {
    this.openModal(PlanetCreateModal, {transitionTo: this.transitionTo})
@@ -94,15 +94,18 @@ module.exports = React.createClass({
    var params = this.getParams()
    if (this.state.currentUser == null) {
-      return (
+      return null
        <div className='HomeNavigator'>
        </div>
      )
    }
-    var planets = (this.state.currentUser.Planets.concat(this.state.currentUser.Teams.reduce(function (planets, team) {
+    var planets = this.state.currentUser.Planets.map(function (planet) {
-      return team.Planets == null ? planets : planets.concat(team.Planets)
+      planet.userName = this.state.currentUser.name
-    }, []))).map(function (planet, index) {
+      return planet
    }.bind(this)).concat(this.state.currentUser.Teams.reduce(function (_planets, team) {
      return _planets.concat(team.Planets == null ? [] : team.Planets.map(function (planet) {
        planet.userName = team.name
        return planet
      }))
    }, [])).map(function (planet, index) {
      return (
        <li userName={planet.userName} planetName={planet.name} key={planet.id} className={params.userName === planet.userName && params.planetName === planet.name ? 'active' : ''}>
          <Link to='planet' params={{userName: planet.userName, planetName: planet.name}}>
@@ -168,7 +171,7 @@ module.exports = React.createClass({
        <ul className='controlGroup'>
          <li>
-            <button onClick={this.openAboutModal}><i className='fa fa-info-circle fa-fw'/> About this app</button>
+            <button onClick={this.openPreferencesModal}><i className='fa fa-gears fa-fw'/> Preferences</button>
          </li>
          <li>
            <button onClick={this.handleLogoutClick}><i className='fa fa-sign-out fa-fw'/> Log out</button>
--- a/browser/main/Components/LogoutModal.jsx
+++ b/browser/main/Components/LogoutModal.jsx
@@ -2,6 +2,8 @@
 var React = require('react')
 var socket = require('../Services/socket')
 var KeyCaster = require('../Mixins/KeyCaster')
 module.exports = React.createClass({
@@ -23,6 +25,8 @@ module.exports = React.createClass({
  logout: function () {
    localStorage.removeItem('currentUser')
    localStorage.removeItem('token')
    socket.reconnect()
    this.props.transitionTo('login')
    this.props.close()
  },
--- a/browser/main/Components/NoteDeleteModal.jsx
+++ b/browser/main/Components/NoteDeleteModal.jsx
@@ -25,7 +25,7 @@ module.exports = React.createClass({
  },
  submit: function () {
    var planet = this.props.planet
-    Hq.destroyNote(planet.userName, planet.name, this.props.note.localId)
+    Hq.destroyNote(planet.Owner.name, planet.name, this.props.note.localId)
      .then(function (res) {
        PlanetStore.Actions.destroyNote(res.body)
        this.props.close()
--- a/browser/main/Components/NoteForm.jsx
+++ b/browser/main/Components/NoteForm.jsx
@@ -16,14 +16,14 @@ var getOptions = function (input, callback) {
  Hq.searchTag(input)
    .then(function (res) {
      callback(null, {
-          options: res.body.map(function (tag) {
+        options: res.body.map(function (tag) {
-            return {
+          return {
-              label: tag.name,
+            label: tag.name,
-              value: tag.name
+            value: tag.name
-            }
+          }
-          }),
+        }),
-          complete: false
+        complete: false
-        })
+      })
    })
    .catch(function (err) {
      console.log(err)
@@ -89,18 +89,18 @@ module.exports = React.createClass({
    })
    if (this.props.note == null) {
-      Hq.createNote(planet.userName, planet.name, this.state.note)
+      Hq.createNote(planet.Owner.name, planet.name, this.state.note)
        .then(function (res) {
          var note = res.body
          PlanetStore.Actions.updateNote(note)
          this.props.close()
-          this.props.transitionTo('notes', {userName: planet.userName, planetName: planet.name, localId: note.localId})
+          this.props.transitionTo('notes', {userName: planet.Owner.name, planetName: planet.name, localId: note.localId})
        }.bind(this))
        .catch(function (err) {
          console.error(err)
        })
    } else {
-      Hq.updateNote(planet.userName, planet.name, this.props.note.localId, this.state.note)
+      Hq.updateNote(planet.Owner.name, planet.name, this.props.note.localId, this.state.note)
        .then(function (res) {
          var note = res.body
          PlanetStore.Actions.updateNote(note)
--- a/browser/main/Components/PlanetArticleDetail.jsx
+++ b/browser/main/Components/PlanetArticleDetail.jsx
@@ -66,7 +66,7 @@ module.exports = React.createClass({
          <div className='detailHeader'>
            <div className='itemLeft'>
              <ProfileImage className='profileImage' size='25' email={article.User.email}/>
-              <i className='fa fa-file-text-o fa-fw'></i>
+              <i className='fa fa-code fa-fw'></i>
            </div>
            <div className='itemRight'>
--- a/browser/main/Components/PlanetArticleList.jsx
+++ b/browser/main/Components/PlanetArticleList.jsx
@@ -18,7 +18,6 @@ module.exports = React.createClass({
      return function (e) {
        var params = this.getParams()
        document.getElementById('articleEditButton').focus()
        this.transitionTo('codes', {
          userName: params.userName,
          planetName: params.planetName,
@@ -31,7 +30,6 @@ module.exports = React.createClass({
      return function (e) {
        var params = this.getParams()
        document.getElementById('articleEditButton').focus()
        this.transitionTo('notes', {
          userName: params.userName,
          planetName: params.planetName,
--- a/browser/main/Components/PlanetCreateModal.jsx
+++ b/browser/main/Components/PlanetCreateModal.jsx
@@ -25,7 +25,8 @@ module.exports = React.createClass({
        name: '',
        public: true
      },
-      ownerName: ownerName
+      ownerName: ownerName,
      error: null
    }
  },
  componentDidMount: function () {
@@ -42,7 +43,7 @@ module.exports = React.createClass({
    }
  },
  handleSubmit: function () {
-    this.setState({errorMessage: null}, function () {
+    this.setState({error: null}, function () {
      Hq.createPlanet(this.state.ownerName, this.state.planet)
        .then(function (res) {
          var planet = res.body
@@ -50,15 +51,28 @@ module.exports = React.createClass({
          PlanetStore.Actions.update(planet)
          if (this.props.transitionTo != null) {
-            this.props.transitionTo('planetHome', {userName: planet.userName, planetName: planet.name})
+            this.props.transitionTo('planetHome', {userName: planet.Owner.name, planetName: planet.name})
          }
          this.props.close()
        }.bind(this))
        .catch(function (err) {
          console.error(err)
-          if (err.status === 403) {
+
-            this.setState({errorMessage: err.response.body.message})
+          if (err.status == null) return this.setState({error: {message: 'Check your network connection'}})
          switch (err.status) {
            case 403:
              this.setState({error: err.response.body})
              break
            case 422:
              this.setState({error: {message: 'Planet name should be Alphanumeric with _, -'}})
              break
            case 409:
              this.setState({error: {message: 'The entered name already in use'}})
              break
            default:
              this.setState({error: {message: 'Unexpected error occured! please try again'}})
          }
        }.bind(this))
    })
@@ -86,7 +100,7 @@ module.exports = React.createClass({
          </select>
        </div>
-        {this.state.errorMessage != null ? (<p className='errorAlert'>{this.state.errorMessage}</p>) : null}
+        {this.state.error != null ? (<p className='errorAlert'>{this.state.error.message != null ? this.state.error.message : 'Error message undefined'}</p>) : null}
        <button onClick={this.handleSubmit} className='submitButton'>
          <i className='fa fa-check'/>
--- a/browser/main/Components/PlanetHeader.jsx
+++ b/browser/main/Components/PlanetHeader.jsx
@@ -46,7 +46,7 @@ module.exports = React.createClass({
  },
  render: function () {
    var currentPlanetName = this.props.currentPlanet.name
-    var currentUserName = this.props.currentPlanet.userName
+    var currentUserName = this.props.currentPlanet.Owner.name
    return (
      <div className='PlanetHeader'>
--- a/browser/main/Components/PlanetNavigator.jsx
+++ b/browser/main/Components/PlanetNavigator.jsx
@@ -10,11 +10,20 @@ module.exports = React.createClass({
  mixins: [Modal, Navigation],
  propTypes: {
    planet: React.PropTypes.shape({
-      name: React.PropTypes.string
+      name: React.PropTypes.string,
      Owner: React.PropTypes.shape({
        id: React.PropTypes.number,
        userType: React.PropTypes.string
      })
    }),
    search: React.PropTypes.string,
    toggleCodeFilter: React.PropTypes.func,
-    toggleNoteFilter: React.PropTypes.func
+    toggleNoteFilter: React.PropTypes.func,
    currentUser: React.PropTypes.shape({
      id: React.PropTypes.number,
      userType: React.PropTypes.string,
      Teams: React.PropTypes.array
    })
  },
  getInitialState: function () {
    return {
@@ -24,6 +33,17 @@ module.exports = React.createClass({
  openLaunchModal: function () {
    this.openModal(LaunchModal, {planet: this.props.planet, transitionTo: this.transitionTo})
  },
  isMyPlanet: function () {
    if (this.props.currentUser == null) return false
    if (this.props.planet.Owner.userType === 'person' && this.props.planet.Owner.id !== this.props.currentUser.id) return false
    if (this.props.planet.Owner.userType === 'team' && !this.props.currentUser.Teams.some(function (team) {
      if (team.id === this.props.planet.Owner.id) return true
      return false
    }.bind(this))) return false
    return true
  },
  render: function () {
    var keywords = this.props.search.split(' ')
    var usingCodeFilter = keywords.some(function (keyword) {
@@ -37,9 +57,11 @@ module.exports = React.createClass({
    return (
      <div className='PlanetNavigator'>
-        <button onClick={this.openLaunchModal} className='launchButton btn-primary btn-block'>
+        {this.isMyPlanet() ? (
-          <i className='fa fa-rocket fa-fw'/> Launch
+          <button onClick={this.openLaunchModal} className='launchButton btn-primary btn-block'>
-        </button>
+            <i className='fa fa-rocket fa-fw'/> Launch
          </button>
        ) : null}
        <nav className='articleFilters'>
          <a className={usingCodeFilter && !usingNoteFilter ? 'active' : ''} onClick={this.props.toggleCodeFilter}>
            <i className='fa fa-code fa-fw'/> Codes
--- a/browser/main/Components/PlanetSettingModal.jsx
+++ b/browser/main/Components/PlanetSettingModal.jsx
@@ -14,7 +14,9 @@ module.exports = React.createClass({
    planet: React.PropTypes.shape({
      name: React.PropTypes.string,
      public: React.PropTypes.bool,
-      userName: React.PropTypes.string
+      Owner: React.PropTypes.shape({
        name: React.PropTypes.string
      })
    })
  },
  getInitialState: function () {
@@ -58,18 +60,44 @@ module.exports = React.createClass({
  handleSavePlanetProfile: function (e) {
    var planet = this.props.planet
-    this.setState({profileSubmitStatus: 'sending'}, function () {
+    this.setState({profileFormStatus: 'sending', profileFormError: null}, function () {
-      Hq.updatePlanet(planet.userName, planet.name, this.state.planet)
+      Hq.updatePlanet(planet.Owner.name, planet.name, this.state.planet)
        .then(function (res) {
          var planet = res.body
-
+          console.log(planet)
-          this.setState({profileSubmitStatus: 'done'})
+          this.setState({profileFormStatus: 'done'})
          PlanetStore.Actions.update(planet)
          this.props.close()
        }.bind(this))
        .catch(function (err) {
          this.setState({profileSubmitStatus: 'error'})
          console.error(err)
          var newState = {
            profileFormStatus: 'error'
          }
          if (err.status == null) {
            newState.profileFormError = {message: 'Check your network connection'}
            return this.setState(newState)
          }
          switch (err.status) {
            case 403:
              newState.profileFormError = err.response.body
              this.setState(newState)
              break
            case 422:
              newState.profileFormError = {message: 'Planet name should be Alphanumeric with _, -'}
              this.setState(newState)
              break
            case 409:
              newState.profileFormError = {message: 'The entered name already in use'}
              this.setState(newState)
              break
            default:
              newState.profileFormError = {message: 'Undefined error please try again'}
              this.setState(newState)
          }
        }.bind(this))
    })
  },
@@ -77,7 +105,7 @@ module.exports = React.createClass({
    var planet = this.props.planet
    this.setState({deleteSubmitStatus: 'sending'}, function () {
-      Hq.destroyPlanet(planet.userName, planet.name)
+      Hq.destroyPlanet(planet.Owner.name, planet.name)
        .then(function (res) {
          var planet = res.body
@@ -99,9 +127,9 @@ module.exports = React.createClass({
    content = this.state.currentTab === 'profile' ? this.renderPlanetProfileTab() : this.renderPlanetDeleteTab()
    return (
-      <div className='PlanetSettingModal modal tabModal'>
+      <div className='PlanetSettingModal sideNavModal modal'>
        <div className='leftPane'>
-          <h1 className='tabLabel'>Planet setting</h1>
+          <h1 className='modalLabel'>Planet setting</h1>
          <nav className='tabList'>
            <button onClick={this.activePlanetProfile} className={this.state.currentTab === 'profile' ? 'active' : ''}><i className='fa fa-globe fa-fw'/> Planet profile</button>
            <button onClick={this.activePlanetDelete} className={this.state.currentTab === 'delete' ? 'active' : ''}><i className='fa fa-trash fa-fw'/> Delete Planet</button>
@@ -116,7 +144,7 @@ module.exports = React.createClass({
  },
  renderPlanetProfileTab: function () {
    return (
-      <div className='planetProfileTab'>
+      <div className='planetProfileTab tab'>
        <div className='formField'>
          <label>Planet name </label>
          <input valueLink={this.linkState('planet.name')}/>
@@ -130,22 +158,22 @@ module.exports = React.createClass({
        <div className='formConfirm'>
          <button onClick={this.handleSavePlanetProfile} className='saveButton btn-primary'>Save</button>
-          <div className={'alertInfo' + (this.state.profileSubmitStatus === 'sending' ? '' : ' hide')}>on Sending...</div>
+          <div className={'alertInfo' + (this.state.profileFormStatus === 'sending' ? '' : ' hide')}>on Sending...</div>
-          <div className={'alertError' + (this.state.profileSubmitStatus === 'error' ? '' : ' hide')}>Connection failed.. Try again.</div>
+          <div className={'alertError' + (this.state.profileFormStatus === 'error' ? '' : ' hide')}>{this.state.profileFormError != null ? this.state.profileFormError.message : 'Unexpected error occured! please try again'}</div>
-          <div className={'alertSuccess' + (this.state.profileSubmitStatus === 'done' ? '' : ' hide')}>Successfully done!!</div>
+          <div className={'alertSuccess' + (this.state.profileFormStatus === 'done' ? '' : ' hide')}>Successfully done!!</div>
        </div>
      </div>
    )
  },
  renderPlanetDeleteTab: function () {
-    var disabled = !this.state.deleteConfirmation.match(new RegExp('^' + this.props.planet.userName + '/' + this.props.planet.name + '$'))
+    var disabled = !this.state.deleteConfirmation.match(new RegExp('^' + this.props.planet.Owner.name + '/' + this.props.planet.name + '$'))
    return (
-      <div className='planetDeleteTab'>
+      <div className='planetDeleteTab tab'>
-        <p>Are you sure to destroy <strong>'{this.props.planet.userName + '/' + this.props.planet.name}'</strong>?</p>
+        <p>Are you sure to destroy <strong>'{this.props.planet.Owner.name + '/' + this.props.planet.name}'</strong>?</p>
-        <p>If you are sure, write <strong>'{this.props.planet.userName + '/' + this.props.planet.name}'</strong> to input below and click <strong>'{this.state.randomDeleteText}'</strong> button.</p>
+        <p>If you are sure, write <strong>'{this.props.planet.Owner.name + '/' + this.props.planet.name}'</strong> to input below and click <strong>'{this.state.randomDeleteText}'</strong> button.</p>
        <input valueLink={this.linkState('deleteConfirmation')} placeholder='userName/planetName'/>
        <div className='formConfirm'>
          <button disabled={disabled} onClick={this.handleDeletePlanetClick}>{this.state.randomDeleteText}</button>
--- a/browser/main/Components/PreferencesModal.jsx
+++ b/browser/main/Components/PreferencesModal.jsx
@@ -0,0 +1,112 @@
 var ipc = require('ipc')
 var remote = require('remote')
 var React = require('react/addons')
 var LinkedState = require('../Mixins/LinkedState')
 var ExternalLink = require('../Mixins/ExternalLink')
 var KeyCaster = require('../Mixins/KeyCaster')
 module.exports = React.createClass({
  mixins: [LinkedState, ExternalLink, KeyCaster('aboutModal')],
  propTypes: {
    close: React.PropTypes.func
  },
  getInitialState: function () {
    var keymap = remote.getGlobal('keymap')
    console.log(keymap)
    return {
      currentTab: 'settings',
      keymap: keymap
    }
  },
  onKeyCast: function (e) {
    switch (e.status) {
      case 'closeModal':
        this.props.close()
        break
    }
  },
  activeSettings: function () {
    this.setState({currentTab: 'settings'})
  },
  activeAbout: function () {
    this.setState({currentTab: 'about'})
  },
  saveKeymap: function () {
    ipc.send('hotkeyUpdated', JSON.stringify(this.state.keymap))
  },
  render: function () {
    var content = this.state.currentTab === 'settings' ? this.renderSettingsTab() : this.renderAboutTab()
    return (
      <div className='PreferencesModal sideNavModal modal'>
        <div className='leftPane'>
          <h1 className='modalLabel'>Preferences</h1>
          <nav className='tabList'>
            <button onClick={this.activeSettings} className={this.state.currentTab === 'settings' ? 'active' : ''}><i className='fa fa-gear fa-fw'/> Settings</button>
            <button onClick={this.activeAbout} className={this.state.currentTab === 'about' ? 'active' : ''}><i className='fa fa-info-circle fa-fw'/> About this app</button>
          </nav>
        </div>
        <div className='rightPane'>
          {content}
        </div>
      </div>
    )
  },
  renderSettingsTab: function () {
    return (
      <div className='settingsTab tab'>
        <div className='categoryLabel'>Hotkey</div>
        <div className='formField'>
          <label>Toggle finder</label>
          <input valueLink={this.linkState('keymap.toggleFinder')}/>
        </div>
        <div className='formConfirm'>
          <button onClick={this.saveKeymap}>Save</button>
        </div>
        <div className='example'>
          <h3>Example</h3>
          <ul>
            <li><code>0</code> to <code>9</code></li>
            <li><code>A</code> to <code>Z</code></li>
            <li><code>F1</code> to <code>F24</code></li>
            <li>Punctuations like <code>~</code>, <code>!</code>, <code>@</code>, <code>#</code>, <code>$</code>, etc.</li>
            <li><code>Plus</code></li>
            <li><code>Space</code></li>
            <li><code>Backspace</code></li>
            <li><code>Delete</code></li>
            <li><code>Insert</code></li>
            <li><code>Return</code> (or <code>Enter</code> as alias)</li>
            <li><code>Up</code>, <code>Down</code>, <code>Left</code> and <code>Right</code></li>
            <li><code>Home</code> and <code>End</code></li>
            <li><code>PageUp</code> and <code>PageDown</code></li>
            <li><code>Escape</code> (or <code>Esc</code> for short)</li>
            <li><code>VolumeUp</code>, <code>VolumeDown</code> and <code>VolumeMute</code></li>
            <li><code>MediaNextTrack</code>, <code>MediaPreviousTrack</code>, <code>MediaStop</code> and <code>MediaPlayPause</code></li>
          </ul>
        </div>
      </div>
    )
  },
  renderAboutTab: function () {
    var version = global.version
    return (
      <div className='aboutTab tab'>
        <div className='about1'>
          <img className='logo' src='resources/favicon-230x230.png'/>
          <div className='appInfo'>Boost {version == null || version.length === 0 ? 'DEV version' : 'v' + version}</div>
        </div>
        <div className='about2'>
          <div className='externalLabel'>External links</div>
          <ul className='externalList'>
            <li><a onClick={this.openExternal} href='http://b00st.io'>Boost Homepage <i className='fa fa-external-link'/></a></li>
            <li><a onClick={this.openExternal} href='http://boostio.github.io/regulations.html'>Regulation <i className='fa fa-external-link'/></a></li>
            <li><a onClick={this.openExternal} href='http://boostio.github.io/privacypolicies.html'>Private policy <i className='fa fa-external-link'/></a></li>
          </ul>
        </div>
      </div>
    )
  }
 })
--- a/browser/main/Components/TeamCreateModal.jsx
+++ b/browser/main/Components/TeamCreateModal.jsx
@@ -3,6 +3,7 @@
 var React = require('react/addons')
 var Hq = require('../Services/Hq')
 var socket = require('../Services/socket')
 var LinkedState = require('../Mixins/LinkedState')
 var KeyCaster = require('../Mixins/KeyCaster')
@@ -22,7 +23,8 @@ module.exports = React.createClass({
    return {
      team: {
        name: ''
-      }
+      },
      error: null
    }
  },
  componentDidMount: function () {
@@ -39,29 +41,45 @@ module.exports = React.createClass({
    }
  },
  handleSubmit: function () {
-    Hq.createTeam(this.props.user.name, this.state.team)
+    this.setState({error: null}, function () {
-      .then(function (res) {
+      Hq.createTeam(this.props.user.name, this.state.team)
-        var currentUser = JSON.parse(localStorage.getItem('currentUser'))
+        .then(function (res) {
-        var team = res.body
+          var currentUser = JSON.parse(localStorage.getItem('currentUser'))
          var team = res.body
-        currentUser.Teams.push(team)
+          currentUser.Teams.push(team)
-        localStorage.setItem('currentUser', JSON.stringify(currentUser))
+          localStorage.setItem('currentUser', JSON.stringify(currentUser))
-        UserStore.Actions.update(currentUser)
+          socket.reconnect(currentUser)
          UserStore.Actions.update(currentUser)
-        if (this.props.transitionTo != null) {
+          if (this.props.transitionTo != null) {
-          this.props.transitionTo('userHome', {userName: team.name})
+            this.props.transitionTo('userHome', {userName: team.name})
-        }
+          }
-        this.props.close()
+          this.props.close()
-      }.bind(this))
+        }.bind(this))
-      .catch(function (err) {
+        .catch(function (err) {
-        console.error(err)
+          console.error(err)
-      })
+
          if (err.status == null) return this.setState({error: {message: 'Check your network connection'}})
          switch (err.status) {
            case 422:
              this.setState({error: {message: 'Team name should be Alphanumeric with _, -'}})
              break
            case 409:
              this.setState({error: {message: 'The entered name already in use'}})
              break
            default:
              this.setState({error: {message: 'Error message undefined'}})
          }
        }.bind(this))
    })
  },
  render: function () {
    return (
      <div className='TeamCreateModal modal'>
        <input ref='teamName' valueLink={this.linkState('team.name')} className='nameInput stripInput' placeholder='Create new team'/>
-
+        {this.state.error != null ? (<p className='errorAlert'>{this.state.error.message != null ? this.state.error.message : 'Unintended error occured'}</p>) : null}
        <button onClick={this.handleSubmit} className='submitButton'>
          <i className='fa fa-check'/>
        </button>
--- a/browser/main/Components/TeamSettingsModal.jsx
+++ b/browser/main/Components/TeamSettingsModal.jsx
@@ -43,12 +43,9 @@ module.exports = React.createClass({
    close: React.PropTypes.func
  },
  getInitialState: function () {
    var team = this.props.team
    return {
      currentTab: 'teamInfo',
-      team: {
+      team: this.props.team,
        profileName: team.profileName
      },
      userSubmitStatus: null,
      member: {
        name: '',
@@ -65,17 +62,10 @@ module.exports = React.createClass({
    }
  },
  onUserChange: function (res) {
    var member
    switch (res.status) {
-      case 'memberAdded':
+      case 'userUpdated':
-        member = res.data
+        var user = res.data
-        if (member.TeamMember.TeamId === this.props.team.id) {
+        if (user.id === this.props.team.id) {
          this.forceUpdate()
        }
        break
      case 'memberRemoved':
        member = res.data
        if (member.TeamMember.TeamId === this.props.team.id) {
          this.forceUpdate()
        }
        break
@@ -116,8 +106,7 @@ module.exports = React.createClass({
          role: this.state.member.role
        })
        .then(function (res) {
-          UserStore.Actions.addMember(res.body)
+          this.setState({updatingMember: false, team: res.body})
          this.setState({updatingMember: false})
        }.bind(this))
        .catch(function (err) {
          console.error(err)
@@ -135,8 +124,7 @@ module.exports = React.createClass({
            role: role
          })
          .then(function (res) {
-            UserStore.Actions.addMember(res.body)
+            this.setState({updatingMember: false, team: res.body})
            this.setState({updatingMember: false})
          }.bind(this))
          .catch(function (err) {
            console.error(err)
@@ -153,8 +141,7 @@ module.exports = React.createClass({
            userName: memberName
          })
          .then(function (res) {
-            UserStore.Actions.removeMember(res.body)
+            this.setState({updatingMember: false, team: res.body})
            this.setState({updatingMember: false})
          }.bind(this))
          .catch(function (err) {
            console.error(err)
@@ -176,9 +163,9 @@ module.exports = React.createClass({
    }
    return (
-      <div className='TeamSettingsModal modal tabModal'>
+      <div className='TeamSettingsModal sideNavModal modal'>
        <div className='leftPane'>
-          <div className='tabLabel'>Team settings</div>
+          <div className='modalLabel'>Team settings</div>
          <div className='tabList'>
            <button className={this.state.currentTab === 'teamInfo' ? 'active' : ''} onClick={this.selectTab('teamInfo')}><i className='fa fa-info-circle fa-fw'/> Team Info</button>
            <button className={this.state.currentTab === 'members' ? 'active' : ''} onClick={this.selectTab('members')}><i className='fa fa-users fa-fw'/> Members</button>
@@ -192,7 +179,7 @@ module.exports = React.createClass({
  },
  renderTeamInfoTab: function () {
    return (
-      <div className='userInfoTab'>
+      <div className='userInfoTab tab'>
        <div className='formField'>
          <label>Profile Name</label>
          <input valueLink={this.linkState('team.profileName')}/>
@@ -212,7 +199,7 @@ module.exports = React.createClass({
  renderMembersTab: function () {
    var currentUser = JSON.parse(localStorage.getItem('currentUser'))
-    var members = this.props.team.Members.map(function (member) {
+    var members = this.state.team.Members.map(function (member) {
      var isCurrentUser = currentUser.id === member.id
      return (
        <tr>
@@ -239,7 +226,7 @@ module.exports = React.createClass({
    var belowLimit = members.length < 5
    return (
-      <div className='membersTab'>
+      <div className='membersTab tab'>
        <table className='memberTable'>
          <thead>
            <tr>
--- a/browser/main/Containers/LoginContainer.jsx
+++ b/browser/main/Containers/LoginContainer.jsx
@@ -6,6 +6,7 @@ var Link = ReactRouter.Link
 var AuthFilter = require('../Mixins/AuthFilter')
 var LinkedState = require('../Mixins/LinkedState')
 var Hq = require('../Services/Hq')
 var socket = require('../Services/socket')
 module.exports = React.createClass({
  mixins: [LinkedState, ReactRouter.Navigation, AuthFilter.OnlyGuest],
@@ -47,6 +48,7 @@ module.exports = React.createClass({
        .then(function (res) {
          localStorage.setItem('token', res.body.token)
          localStorage.setItem('currentUser', JSON.stringify(res.body.user))
          socket.reconnect()
          this.transitionTo('userHome', {userName: res.body.user.name})
        }.bind(this))
--- a/browser/main/Containers/MainContainer.jsx
+++ b/browser/main/Containers/MainContainer.jsx
@@ -9,6 +9,7 @@ var Navigation = ReactRouter.Navigation
 var State = ReactRouter.State
 var Hq = require('../Services/Hq')
 var socket = require('../Services/socket')
 var Modal = require('../Mixins/Modal')
@@ -17,7 +18,7 @@ var UserStore = require('../Stores/UserStore')
 var ContactModal = require('../Components/ContactModal')
 function fetchPlanet (userName, planetName) {
-  Hq.fetchPlanet(userName, planetName)
+  return Hq.fetchPlanet(userName, planetName)
    .then(function (res) {
      var planet = res.body
@@ -29,8 +30,9 @@ function fetchPlanet (userName, planetName) {
        note.type = 'note'
      })
      console.log('planet-' + planet.id + ' fetched!')
      localStorage.setItem('planet-' + planet.id, JSON.stringify(planet))
      return planet
    })
    .catch(function (err) {
      console.error(err)
@@ -55,22 +57,20 @@ module.exports = React.createClass({
        return
      } else {
        this.transitionTo('home')
        return
      }
    }
    Hq.getUser()
      .then(function (res) {
        var user = res.body
        localStorage.setItem('currentUser', JSON.stringify(user))
        UserStore.Actions.update(user)
        user.Planets.forEach(function (planet) {
-          fetchPlanet(planet.userName, planet.name)
+          fetchPlanet(user.name, planet.name)
        })
        user.Teams.forEach(function (team) {
          team.Planets.forEach(function (planet) {
-            fetchPlanet(planet.userName, planet.name)
+            fetchPlanet(team.name, planet.name)
          })
        })
      })
--- a/browser/main/Containers/PlanetContainer.jsx
+++ b/browser/main/Containers/PlanetContainer.jsx
@@ -41,10 +41,10 @@ module.exports = React.createClass({
      var planet = this.state.planet
      switch (article.type) {
        case 'code':
-          this.transitionTo('codes', {userName: planet.userName, planetName: planet.name, localId: article.localId})
+          this.transitionTo('codes', {userName: planet.Owner.name, planetName: planet.name, localId: article.localId})
          break
        case 'note':
-          this.transitionTo('notes', {userName: planet.userName, planetName: planet.name, localId: article.localId})
+          this.transitionTo('notes', {userName: planet.Owner.name, planetName: planet.name, localId: article.localId})
          break
      }
    }
@@ -55,7 +55,7 @@ module.exports = React.createClass({
      return
    }
-    if (nextProps.params.userName !== this.state.planet.userName || nextProps.params.planetName !== this.state.planet.name) {
+    if (nextProps.params.userName !== this.state.planet.Owner.name || nextProps.params.planetName !== this.state.planet.name) {
      this.setState({
        planet: null
      }, function () {
@@ -96,14 +96,14 @@ module.exports = React.createClass({
          if (this.state.planet.name === planet.name) {
            this.setState({planet: planet})
          } else {
-            this.transitionTo('planetHome', {userName: planet.userName, planetName: planet.name})
+            this.transitionTo('planetHome', {userName: planet.Owner.name, planetName: planet.name})
          }
        }
        break
      case 'destroyed':
        planet = res.data
        if (this.state.planet.id === planet.id) {
-          this.transitionTo('userHome', {userName: this.state.planet.userName})
+          this.transitionTo('userHome', {userName: this.state.planet.Owner.name})
        }
        break
      case 'codeUpdated':
@@ -399,7 +399,8 @@ module.exports = React.createClass({
          showAll={this.showAll}
          toggleCodeFilter={this.toggleCodeFilter}
          toggleNoteFilter={this.toggleNoteFilter}
-          planet={this.state.planet}/>
+          planet={this.state.planet}
          currentUser={this.state.currentUser}/>
        <PlanetArticleList showOnlyWithTag={this.applyTagFilter} ref='list' articles={filteredArticles}/>
--- a/browser/main/Containers/SignupContainer.jsx
+++ b/browser/main/Containers/SignupContainer.jsx
@@ -6,10 +6,12 @@ var Link = ReactRouter.Link
 var AuthFilter = require('../Mixins/AuthFilter')
 var LinkedState = require('../Mixins/LinkedState')
 var ExternalLink = require('../Mixins/ExternalLink')
 var Hq = require('../Services/Hq')
 var socket = require('../Services/socket')
 module.exports = React.createClass({
-  mixins: [LinkedState, ReactRouter.Navigation, AuthFilter.OnlyGuest],
+  mixins: [LinkedState, ReactRouter.Navigation, AuthFilter.OnlyGuest, ExternalLink],
  getInitialState: function () {
    return {
      user: {},
@@ -32,6 +34,7 @@ module.exports = React.createClass({
        .then(function (res) {
          localStorage.setItem('token', res.body.token)
          localStorage.setItem('currentUser', JSON.stringify(res.body.user))
          socket.reconnect()
          this.transitionTo('userHome', {userName: res.body.user.name})
        }.bind(this))
@@ -129,7 +132,7 @@ module.exports = React.createClass({
          </div>
        </form>
-        <p className='alert'>会員登録することで、当サイトの利用規約及びCookieの使用を含むデータに関するポリシーに同意するものとします。</p>
+        <p className='alert'>会員登録することで、<a onClick={this.openExternal} href='http://boostio.github.io/regulations.html'>当サイトの利用規約</a>及び<a onClick={this.openExternal} href='http://boostio.github.io/privacypolicies.html'>Cookieの使用を含むデータに関するポリシー</a>に同意するものとします。</p>
      </div>
    )
  }
--- a/browser/main/Containers/UserContainer.jsx
+++ b/browser/main/Containers/UserContainer.jsx
@@ -230,7 +230,7 @@ module.exports = React.createClass({
    var userPlanets = user.Planets.map(function (planet) {
      return (
        <li key={'planet-' + planet.id}>
-          <Link to='planet' params={{userName: planet.userName, planetName: planet.name}}>{planet.userName}/{planet.name}</Link>
+          <Link to='planet' params={{userName: user.name, planetName: planet.name}}>{user.name}/{planet.name}</Link>
          &nbsp;{!planet.public ? (<i className='fa fa-lock'/>) : null}
        </li>
      )
@@ -288,7 +288,7 @@ module.exports = React.createClass({
    var userPlanets = user.Planets.map(function (planet) {
      return (
        <li key={'planet-' + planet.id}>
-          <Link to='planet' params={{userName: planet.userName, planetName: planet.name}}>{planet.userName}/{planet.name}</Link>
+          <Link to='planet' params={{userName: user.name, planetName: planet.name}}>{user.name}/{planet.name}</Link>
          &nbsp;{!planet.public ? (<i className='fa fa-lock'/>) : null}
        </li>
      )
@@ -311,14 +311,14 @@ module.exports = React.createClass({
      var planets = (team.Planets == null ? [] : team.Planets).map(function (planet) {
        return (
          <li key={'planet-' + planet.id}>
-            <Link to='planet' params={{userName: planet.userName, planetName: planet.name}}>{planet.userName}/{planet.name}</Link>
+            <Link to='planet' params={{userName: team.name, planetName: planet.name}}>{team.name}/{planet.name}</Link>
            &nbsp;{!planet.public ? (<i className='fa fa-lock'/>) : null}
          </li>
        )
      })
      return (
      <div key={'user-' + team.id} className='planetGroup'>
-        <div className='planetGroupLabel'>{team.name}</div>
+        <div className='planetGroupLabel'>{team.profileName} <small>@{team.name}</small></div>
        <ul className='planets'>
          {planets}
          {isOwner ? (<li><button onClick={this.openPlanetCreateModalWithOwnerName(team.name)} className='createPlanetButton'><i className='fa fa-plus-square-o'/> Create new planet</button></li>) : null}
@@ -353,7 +353,7 @@ module.exports = React.createClass({
        <div className='planetList'>
          <div className='planetLabel'>{planetCount} {planetCount > 1 ? 'Planets' : 'Planet'}</div>
          <div className='planetGroup'>
-            <div className='planetGroupLabel'>{user.profileName}</div>
+            <div className='planetGroupLabel'>{user.profileName} <small>@{user.name}</small></div>
            <ul className='planets'>
              {userPlanets}
              {isOwner ? (<li><button onClick={this.openPlanetCreateModalWithOwnerName(user.name)} className='createPlanetButton'><i className='fa fa-plus-square-o'/> Create new planet</button></li>) : null}
--- a/browser/main/Services/socket.js
+++ b/browser/main/Services/socket.js
@@ -0,0 +1,64 @@
 /* global localStorage */
 var config = require('../../../config')
 var UserStore = require('../Stores/UserStore')
 var PlanetStore = require('../Stores/PlanetStore')
 var io = require('socket.io-client')(config.apiUrl)
 io.on('connected', function (data) {
  console.log('connected by WS')
  reconnect()
 })
 io.on('userUpdated', function (data) {
  console.log('userUpdated')
  UserStore.Actions.update(data)
 })
 // Planet
 io.on('planetUpdated', function (data) {
  console.log('planetUpdated')
  PlanetStore.Actions.update(data)
 })
 io.on('planetDestroyed', function (data) {
  console.log('planetDestroyed')
  PlanetStore.Actions.destroy(data)
 })
 // Article
 io.on('codeUpdated', function (data) {
  console.log('codeUpdated')
  PlanetStore.Actions.updateCode(data)
 })
 io.on('codeDestroyed', function (data) {
  console.log('codeDestroyed')
  PlanetStore.Actions.destroyCode(data)
 })
 io.on('noteUpdated', function (data) {
  console.log('noteUpdated')
  PlanetStore.Actions.updateNote(data)
 })
 io.on('noteDestroyed', function (data) {
  console.log('noteDestroyed')
  PlanetStore.Actions.destroyNote(data)
 })
 var reconnect = function (currentUser) {
  if (currentUser == null) currentUser = JSON.parse(localStorage.getItem('currentUser'))
  if (currentUser != null) {
    var rooms = ['user:' + currentUser.id].concat(currentUser.Teams.map(function (team) {
      return 'user:' + team.id
    }))
    io.emit('room:sync', {rooms: rooms})
  } else {
    io.emit('room:sync', {rooms: []})
  }
 }
 module.exports = {
  io: io,
  reconnect: reconnect
 }
--- a/browser/main/Stores/PlanetStore.js
+++ b/browser/main/Stores/PlanetStore.js
@@ -19,39 +19,59 @@ module.exports = Reflux.createStore({
  mixins: [Helper],
  listenables: [actions],
  Actions: actions,
  /*
    Planet must be updated like below
    Planet
      Codes
        Tags
        User
      Notes
        Tags
        User
      Owner
  */
  onUpdate: function (planet) {
    // Copy the planet object
    var aPlanet = Object.assign({}, planet)
    delete aPlanet.Codes
    delete aPlanet.Notes
    delete aPlanet.Owner
    // Check if the planet should be updated to currentUser
    var currentUser = JSON.parse(localStorage.getItem('currentUser'))
-    var ownedByCurrentUser = currentUser.id === aPlanet.OwnerId
+    var currentUserMustBeUpdated = false
    var ownedByCurrentUser = currentUser.id === aPlanet.OwnerId
    if (ownedByCurrentUser) {
      currentUser.Planets = this.updateItemToTargetArray(aPlanet, currentUser.Planets)
-    }
+      currentUserMustBeUpdated = true
-
+    } else {
    if (!ownedByCurrentUser) {
      var team = null
-      currentUser.Teams.some(function (_team) {
+      if (currentUser.Teams.some(function (_team) {
        if (_team.id === aPlanet.OwnerId) {
          team = _team
          return true
        }
-        return
+        return false
-      })
+      })) {
      if (team) {
        team.Planets = this.updateItemToTargetArray(aPlanet, team.Planets)
        currentUserMustBeUpdated = true
      }
    }
    // Update currentUser
-    localStorage.setItem('currentUser', JSON.stringify(currentUser))
+    if (currentUserMustBeUpdated) {
-    UserStore.Actions.update(currentUser)
+      UserStore.Actions.update(currentUser)
    }
    planet.Codes.forEach(function (code) {
      code.type = 'code'
    })
    planet.Notes.forEach(function (note) {
      note.type = 'note'
    })
    // Update the planet
    localStorage.setItem('planet-' + planet.id, JSON.stringify(planet))
--- a/browser/main/Stores/UserStore.js
+++ b/browser/main/Stores/UserStore.js
@@ -4,18 +4,19 @@ var Reflux = require('reflux')
 var actions = Reflux.createActions([
  'update',
-  'destroy',
+  'destroy'
  'addMember',
  'removeMember'
 ])
 module.exports = Reflux.createStore({
  listenables: [actions],
  onUpdate: function (user) {
-    var currentUser = JSON.parse(localStorage.getItem('currentUser'))
+    if (this.socket == null) this.socket = require('../Services/socket')
    var currentUser = JSON.parse(localStorage.getItem('currentUser'))
    if (currentUser.id === user.id) {
      localStorage.setItem('currentUser', JSON.stringify(user))
      this.socket.reconnect(user)
    }
    if (user.userType === 'team') {
@@ -53,17 +54,5 @@ module.exports = Reflux.createStore({
      data: user
    })
  },
  onAddMember: function (member) {
    this.trigger({
      status: 'memberAdded',
      data: member
    })
  },
  onRemoveMember: function (member) {
    this.trigger({
      status: 'memberRemoved',
      data: member
    })
  },
  Actions: actions
 })
--- a/browser/main/index.electron.html
+++ b/browser/main/index.electron.html
@@ -1,16 +1,55 @@
 <!DOCTYPE html>
 <html>
 <head>
  <script>
  var version = require('remote').getGlobal('version')
  document.title = 'Boost ' + ((version == null || version.length === 0) ? 'DEV version' : 'v' + version)
  </script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
  <link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css" media="screen" title="no title" charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico">
  <style>
  @font-face {
    font-family: 'Lato';
    src: url('../../Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('../../Lato-Regular.woff') format('woff'), /* Modern Browsers */
         url('../../Lato-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
  }
  #loadingCover{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 65px 0;
    font-family: sans-serif;
  }
  #loadingCover img{
    display: block;
    margin: 75px auto 5px;
    width: 160px;
    height: 160px;
  }
  #loadingCover .message{
    font-size: 30px;
    text-align: center;
    line-height: 1.6;
    font-weight: 100;
    color: #888;
  }
  </style>
 </head>
 <body>
  <div id="loadingCover">
    <img src="resources/favicon-230x230.png">
    <div class='message'>Loading...</div>
  </div>
  <div id="content"></div>
  <script>
  if (!Object.assign) {
    Object.defineProperty(Object, 'assign', {
@@ -45,13 +84,14 @@
    });
  }
  require('electron-stylus')(__dirname + '/../styles/main/index.styl')
  </script>
 </head>
 <body>
  <div id="content"></div>
  <script src="../ace/src-min/ace.js"></script>
  <script>
    var version = require('remote').require('app').getVersion()
    global.version = version
    document.title = 'Boost ' + ((version == null || version.length === 0) ? 'DEV version' : 'v' + version)
    require('../electron-stylus')(__dirname + '/../styles/main/index.styl', 'mainCss')
    // require('../electron-stylus')(__dirname + '/../styles/main/index.styl')
    require('node-jsx').install({ harmony: true, extension: '.jsx' })
    require('./index.jsx')
  </script>
--- a/browser/main/index.jsx
+++ b/browser/main/index.jsx
@@ -34,7 +34,13 @@ var routes = (
    </Route>
  </Route>
 )
 var loadingCover = document.getElementById('loadingCover')
 ReactRouter.run(routes, ReactRouter.HashLocation, function (Root) {
  React.render(<Root/>, document.getElementById('content'))
  if (loadingCover != null) {
    loadingCover.parentNode.removeChild(loadingCover)
    loadingCover = null
  }
 })
--- a/browser/styles/main/containers/UserContainer.styl
+++ b/browser/styles/main/containers/UserContainer.styl
@@ -294,6 +294,9 @@
        .planetGroupLabel
          font-size 1.1em
          margin-bottom 15px
          small
            font-size 0.8em
            color inactiveTextColor
        .planets
          margin-left 15px
          li
--- a/browser/styles/main/index.styl
+++ b/browser/styles/main/index.styl
@@ -7,9 +7,9 @@ global-reset()
@import './containers/*'
 html, body
-    width 100%
+  width 100%
-    height 100%
+  height 100%
-    overflow hidden
+  overflow hidden
 body
  font-family "Lato"
--- a/browser/styles/mixins/marked.styl
+++ b/browser/styles/mixins/marked.styl
@@ -5,28 +5,29 @@ marked()
    margin 15px 0
  h1
    font-size 2em
-    margin 0 auto 0.67em
+    border-bottom solid 2px borderColor
    margin 0.67em auto
  h2
    font-size 1.5em
-    margin 0 auto 0.83em
+    margin 0.83em auto
  h3
    font-size 1.17em
-    margin 0 auto 1em
+    margin 1em auto
  h4
    font-size 1em
-    margin 0 auto 1.33em
+    margin 1.33em auto
  h5
    font-size 0.83em
-    margin 0 auto 1.67em
+    margin 1.67em auto
  h6
    font-size 0.67em
    margin 2.33em auto
  h1, h2, h3, h4, h5, h6
-    font-weight 400
+    font-weight 700
-    line-height 1.4em
+    line-height 1.8em
  p
-    line-height 1.4em
+    line-height 1.8em
-    margin-bottom 15px
+    margin-bottom 25px
  img
    max-width 100%
  strong
@@ -42,6 +43,7 @@ marked()
  ul
    list-style-type disc
    padding-left 35px
    margin-bottom 25px
    li
      display list-item
      margin 15px 0
@@ -52,6 +54,7 @@ marked()
  ol
    list-style-type decimal
    padding-left 35px
    margin-bottom 25px
    li
      display list-item
      margin 15px 0
@@ -63,12 +66,14 @@ marked()
    font-size 0.9em
    color black
    text-decoration none
    background-color #F6F6F6
  pre
    padding 5px
    border solid 1px borderColor
    border-radius 5px
    overflow-x auto
-    margin-bottom 15px
+    margin-bottom 25px
    background-color #F6F6F6
    &>code
      padding 0
      border none
--- a/browser/styles/shared/modal.styl
+++ b/browser/styles/shared/modal.styl
@@ -32,14 +32,14 @@
      .modal-control
        float right
-  .tabModal
+  .sideNavModal
    height 500px
    .leftPane
      absolute top bottom left
      width 175px
      padding 20px
      border-right solid 1px borderColor
-      .tabLabel
+      .modalLabel
        font-size 1.5em
        margin-top 25px
        margin-bottom 35px
@@ -57,9 +57,7 @@
      left 175px
      padding 15px
      overflow-y auto
-
+    .tab
  .EditProfileModal, .PlanetSettingModal, .TeamSettingsModal
    .userInfoTab, .passwordTab, .planetProfileTab, .userInfoTab, .membersTab
      padding-top 45px
      .formField
        position relative
@@ -97,7 +95,7 @@
          float right
          padding 12px 10px
          border-radius 5px
-          width 200px
+          width 320px
          font-size 1em
          overflow-x hidden
          white-space nowrap
@@ -111,6 +109,33 @@
          alertSuccess()
        .alertError
          alertError()
  .PreferencesModal
    .settingsTab
      .categoryLabel
        font-size 1.5em
        margin-bottom 25px
      .example
        marked()
    .aboutTab
      padding-top 30px
      .about1
        margin-bottom 25px
        .logo
          display block
          margin 0 auto
        .appInfo
          font-size 1.5em
          text-align center
      .about2
        width 200px
        margin 0 auto
        .externalLabel
          font-size 1.2em
          margin-bottom 15px
        .externalList
          li
            margin-bottom 15px
  .PlanetSettingModal
    .planetDeleteTab
      padding-top 65px
      p
@@ -139,7 +164,7 @@
          float right
          padding 12px 10px
          border-radius 5px
-          width 200px
+          width 320px
          font-size 1em
          overflow-x hidden
          white-space nowrap
@@ -153,6 +178,7 @@
          alertSuccess()
        .alertError
          alertError()
  .TeamSettingsModal
    .membersTab
      .memberTable
        width 100%
@@ -262,25 +288,6 @@
    border-radius 5px
    marked()
  .AboutModal
    width 320px
    .about1
      margin-bottom 25px
      .logo
        display block
        margin 0 auto
      .appInfo
        font-size 1.5em
        text-align center
    .about2
      width 200px
      margin 0 auto
      .externalLabel
        font-size 1.2em
        margin-bottom 15px
      .externalList
        li
          margin-bottom 15px
  .PlanetCreateModal.modal, .TeamCreateModal.modal, .AddMemberModal.modal
    padding 60px 0
--- a/config.js
+++ b/config.js
@@ -1,4 +1,5 @@
 module.exports = {
-  apiUrl: 'http://codexen-server-dev2.elasticbeanstalk.com/'
+  // apiUrl: 'https://api.b00st.io/'
  apiUrl: 'https://api2.b00st.io/'
  // apiUrl: 'http://localhost:8000/'
 }
--- a/main.js
+++ b/main.js
@@ -4,6 +4,7 @@ var Menu = require('menu')
 var MenuItem = require('menu-item')
 var Tray = require('tray')
 var ipc = require('ipc')
 var jetpack = require('fs-jetpack')
 require('crash-reporter').start()
@@ -19,7 +20,6 @@ var update = null
 // })
 var version = app.getVersion()
 global.version = version
 var versionText = (version == null || version.length === 0) ? 'DEV version' : 'v' + version
 var nn = require('node-notifier')
 var autoUpdater = require('auto-updater')
@@ -27,6 +27,7 @@ var path = require('path')
 autoUpdater
  .on('error', function (err, message) {
    console.error(message)
    nn.notify({
      title: 'Error! ' + versionText,
      icon: path.join(__dirname, 'browser/main/resources/favicon-230x230.png'),
@@ -34,11 +35,7 @@ autoUpdater
    })
  })
  .on('checking-for-update', function () {
-    nn.notify({
+    // Connecting
      title: 'Boost launched!! ' + versionText,
      icon: path.join(__dirname, 'browser/main/resources/favicon-230x230.png'),
      message: 'Checking update is available....'
    })
  })
  .on('update-available', function () {
    nn.notify({
@@ -85,7 +82,7 @@ app.on('ready', function () {
  Menu.setApplicationMenu(menu)
  // menu end
  appIcon = new Tray(__dirname + '/tray-icon.png')
-  appIcon.setToolTip('Codexen')
+  appIcon.setToolTip('Boost')
  var trayMenu = new Menu()
  trayMenu.append(new MenuItem({
@@ -131,9 +128,10 @@ app.on('ready', function () {
    'zoom-factor': 1.0,
    'always-on-top': true,
    'web-preferences': {
-        'overlay-scrollbars': true,
+      'overlay-scrollbars': true,
-        'skip-taskbar': true
+      'skip-taskbar': true
-      }
+    },
    'standard-window': false
  })
  popUpWindow.loadUrl('file://' + __dirname + '/browser/finder/index.electron.html')
@@ -141,15 +139,53 @@ app.on('ready', function () {
  popUpWindow.on('blur', function () {
    popUpWindow.hide()
  })
  popUpWindow.setVisibleOnAllWorkspaces(true)
  var globalShortcut = require('global-shortcut')
  console.log('jetpack launch')
  var userDataPath = app.getPath('userData')
  if (!jetpack.cwd(userDataPath).exists('keymap.json')) {
    jetpack.cwd(userDataPath).file('keymap.json', {content: '{}'})
  }
  try {
    global.keymap = JSON.parse(jetpack.cwd(userDataPath).read('keymap.json', 'utf-8'))
  } catch (err) {
    jetpack.cwd(userDataPath).file('keymap.json', {content: '{}'})
    global.keymap = {}
  }
  if (global.keymap.toggleFinder == null) global.keymap.toggleFinder = 'ctrl+tab+shift'
  var toggleFinderKey = global.keymap.toggleFinder
-  globalShortcut.register('ctrl+tab+shift', function () {
+  try {
-    if (mainWindow != null && !mainWindow.isFocused()) {
+    globalShortcut.register(toggleFinderKey, function () {
-      mainWindow.hide()
+      if (mainWindow != null && !mainWindow.isFocused()) {
        mainWindow.hide()
      }
      popUpWindow.show()
    })
  } catch (err) {
    console.log(err.name)
  }
  ipc.on('hotkeyUpdated', function (event, newKeymap) {
    console.log('got new keymap')
    console.log(newKeymap)
    globalShortcut.unregisterAll()
    global.keymap = JSON.parse(newKeymap)
    jetpack.cwd(userDataPath).file('keymap.json', {content: JSON.stringify(global.keymap)})
    var toggleFinderKey = global.keymap.toggleFinder != null ? global.keymap.toggleFinder : 'ctrl+tab+shift'
    try {
      globalShortcut.register(toggleFinderKey, function () {
        if (mainWindow != null && !mainWindow.isFocused()) {
          mainWindow.hide()
        }
        popUpWindow.show()
      })
    } catch (err) {
      console.log(err.name)
    }
    popUpWindow.show()
  })
  global.hideFinder = function () {
@@ -167,8 +203,9 @@ function makeNewMainWindow () {
    height: 720,
    'zoom-factor': 1.0,
    'web-preferences': {
-        'overlay-scrollbars': true
+      'overlay-scrollbars': true
-      }
+    },
    'standard-window': false
  })
  if (update != null) {
    mainWindow.webContents.on('did-finish-load', function () {
--- a/modules/menu-template.js
+++ b/modules/menu-template.js
@@ -5,7 +5,7 @@ module.exports = [
    label: 'Electron',
    submenu: [
      {
-        label: 'About Electron',
+        label: 'About Boost',
        selector: 'orderFrontStandardAboutPanel:'
      },
      {
@@ -19,7 +19,7 @@ module.exports = [
        type: 'separator'
      },
      {
-        label: 'Hide Electron',
+        label: 'Hide Boost',
        accelerator: 'Command+H',
        selector: 'hide:'
      },
@@ -89,13 +89,13 @@ module.exports = [
        click: function () {
          BrowserWindow.getFocusedWindow().reload()
        }
-      // },
+      },
-      // {
+      {
-      //   label: 'Toggle DevTools',
+        label: 'Toggle DevTools',
-      //   accelerator: 'Alt+Command+I',
+        accelerator: 'Alt+Command+I',
-      //   click: function () {
+        click: function () {
-      //     BrowserWindow.getFocusedWindow().toggleDevTools()
+          BrowserWindow.getFocusedWindow().toggleDevTools()
-      //   }
+        }
      }
    ]
  },
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "boost",
-  "version": "0.2.6",
+  "version": "0.3.0",
  "description": "Boost App",
  "main": "main.js",
  "scripts": {
@@ -31,8 +31,8 @@
  },
  "homepage": "https://github.com/Rokt33r/codexen-app#readme",
  "dependencies": {
    "electron-stylus": "^0.1.0",
    "font-awesome": "^4.3.0",
    "fs-jetpack": "^0.7.0",
    "markdown-it": "^4.3.1",
    "md5": "^2.0.0",
    "moment": "^2.10.3",
@@ -43,6 +43,7 @@
    "react-router": "^0.13.3",
    "react-select": "^0.5.4",
    "reflux": "^0.2.8",
    "stylus": "^0.52.0",
    "superagent": "^1.2.0",
    "superagent-promise": "^1.0.3"
  },
--- a/tray-icon.png
+++ b/tray-icon.png
--- a/tray-icon@2x.png
+++ b/tray-icon@2x.png
--- a/tray-icon@4x.png
+++ b/tray-icon@4x.png
Author	SHA1	Message	Date
Rokt33r	3f54eb52b2	Merge branch 'dev' * dev: リアルタイム(SocketIO)実装 / Markdown style改善 Conflicts: package.json	2015-09-08 15:30:02 +09:00
Rokt33r	a3847ce1c9	リアルタイム(SocketIO)実装 / Markdown style改善	2015-09-08 15:28:36 +09:00
Rokt33r	1e7415b692	fix version 0.2.11	2015-09-06 19:48:44 +09:00
Rokt33r	ff950ef28a	Merge branch 'dev' * dev: improve markdown style	2015-09-06 12:19:20 +09:00
Rokt33r	51bd12c6cf	improve markdown style	2015-09-06 12:18:54 +09:00
Rokt33r	5fa37dbffb	Merge branch 'dev' * dev: version 0.2.10 - Hotkeyの設定機能 - Stylus refactor	2015-09-02 01:02:32 +09:00
Rokt33r	c6307e4ad3	version 0.2.10 - Hotkeyの設定機能 - Stylus refactor	2015-09-02 01:02:04 +09:00
Rokt33r	06a54d451c	Merge branch 'dev' * dev: 0.2.9 API server changed, bump electron version 0.31.0	2015-08-31 01:34:15 +09:00
Rokt33r	e317075815	0.2.9 API server changed, bump electron version 0.31.0	2015-08-31 01:33:32 +09:00
Rokt33r	45541a255b	Merge branch 'dev' * dev: - StylusでコンパイルされたCSSをCachingする(ロディングが短くなる) - Planet name changeのときにエラーハンドリング追加 + Bug fix - TeamのMemberを編集する場合、自分を編集することはできない - FinderにMarkdownのリンクがちゃんと外部に飛ぶように - Tray iconがちゃんと表示 - ArticleDetailのCodeアイコンがちゃんと表示されない	2015-08-30 05:31:13 +09:00
Rokt33r	3ab423d695	- StylusでコンパイルされたCSSをCachingする(ロディングが短くなる) - Planet name changeのときにエラーハンドリング追加 + Bug fix - TeamのMemberを編集する場合、自分を編集することはできない - FinderにMarkdownのリンクがちゃんと外部に飛ぶように - Tray iconがちゃんと表示 - ArticleDetailのCodeアイコンがちゃんと表示されない	2015-08-30 05:30:54 +09:00
Rokt33r	345d7b427a	Merge branch 'dev' * dev: Loading font 微調整	2015-08-26 18:27:42 +09:00
Rokt33r	de6d6b692e	Loading font 微調整	2015-08-26 18:27:19 +09:00
Rokt33r	b2845e2284	Merge branch 'dev' * dev: version 0.2.7 - Planet, Team作成の時Error message表示 - MarkdownのCode blockの背景を薄い灰色にする - 権限なしのPlanetには - SignUpに規約/Privacyの外部リンク追加 - Loading画面追加 - Font 添付(Lato regular) - UserContainerでのTeam Label変更	2015-08-26 18:23:04 +09:00
Rokt33r	47383c347c	version 0.2.7 - Planet, Team作成の時Error message表示 - MarkdownのCode blockの背景を薄い灰色にする - 権限なしのPlanetには - SignUpに規約/Privacyの外部リンク追加 - Loading画面追加 - Font 添付(Lato regular) - UserContainerでのTeam Label変更	2015-08-26 18:22:46 +09:00