restructure DONE

browser/main/HomePage/ArticleDetail.js

@@ -0,0 +1,59 @@
+import React, { PropTypes } from 'react'
+import moment from 'moment'
+import { findWhere } from 'lodash'
+import ModeIcon from 'boost/components/ModeIcon'
+import MarkdownPreview from 'boost/components/MarkdownPreview'
+import CodeEditor from 'boost/components/CodeEditor'
+
+export default class ArticleDetail extends React.Component {
+  render () {
+    let { article, status, user } = this.props
+
+    let tags = article.Tags.length > 0 ? article.Tags.map(tag => {
+      return (
+        <a key={tag.id}>{tag.name}</a>
+      )
+    }) : (
+      <span className='noTags'>Not tagged yet</span>
+    )
+    let folder = findWhere(user.Folders, {id: article.FolderId})
+    let folderName = folder != null ? folder.name : '(unknown)'
+
+    return (
+      <div className='ArticleDetail show'>
+        <div className='detailInfo'>
+          <div className='left'>
+            <div className='info'>
+              <i className='fa fa-fw fa-square'/> {folderName}&nbsp;
+              by {article.User.profileName}&nbsp;
+              Created {moment(article.createdAt).format('YYYY/MM/DD')}&nbsp;
+              Updated {moment(article.updatedAt).format('YYYY/MM/DD')}
+            </div>
+            <div className='tags'><i className='fa fa-fw fa-tags'/>{tags}</div>
+          </div>
+
+          <div className='right'>
+            <button><i className='fa fa-fw fa-edit'/></button>
+            <button><i className='fa fa-fw fa-trash'/></button>
+            <button><i className='fa fa-fw fa-share-alt'/></button>
+          </div>
+        </div>
+        <div className='detailBody'>
+          <div className='detailPanel'>
+            <div className='header'>
+              <ModeIcon className='mode' mode={article.mode}/>
+              <div className='title'>{article.title}</div>
+            </div>
+            {article.mode === 'markdown' ? <MarkdownPreview content={article.content}/> : <CodeEditor readOnly={true} onChange={this.handleContentChange} mode={article.mode} code={article.content}/>}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+ArticleDetail.propTypes = {
+  article: PropTypes.shape(),
+  status: PropTypes.shape(),
+  user: PropTypes.shape()
+}

browser/main/HomePage/ArticleList.js

@@ -0,0 +1,66 @@
+import React, { PropTypes } from 'react'
+import ProfileImage from 'boost/components/ProfileImage'
+import ModeIcon from 'boost/components/ModeIcon'
+import moment from 'moment'
+import { IDLE_MODE, CREATE_MODE, EDIT_MODE } from '../actions'
+
+export default class ArticleList extends React.Component {
+  render () {
+    let { articles, status } = this.props
+
+    let articlesEl = articles.map(article => {
+      let tags = Array.isArray(article.Tags) && article.Tags.length > 0 ? article.Tags.map(tag => {
+        return (
+          <a key={tag.id}>#{tag.name}</a>
+        )
+      }) : (
+        <span>Not tagged yet</span>
+      )
+
+      return (
+        <div key={'article-' + article.id}>
+          <div className={'articleItem' + (false ? ' active' : '')}>
+            <div className='top'>
+              <i className='fa fa-fw fa-square'/>
+              by <ProfileImage className='profileImage' size='20' email={article.User.email}/> {article.User.profileName}
+            <span className='updatedAt'>{article.status != null ? article.status : moment(article.updatedAt).fromNow()}</span>
+            </div>
+            <div className='middle'>
+              <ModeIcon className='mode' mode={article.mode}/> <div className='title'>{article.status !== 'new' ? article.title : '(New article)'}</div>
+            </div>
+            <div className='bottom'>
+              <div className='tags'><i className='fa fa-fw fa-tags'/>{tags}</div>
+            </div>
+          </div>
+          <div className='divider'></div>
+        </div>
+      )
+    })
+
+    return (
+      <div className='ArticleList'>
+        { status.mode === 'CREATE_MODE' ? (
+          <div key={'article-' + article.id}>
+            <div className={'articleItem'}>
+              <div className='top'>
+              <span className='updatedAt'>{}</span>
+              </div>
+              <div className='middle'>
+                <ModeIcon className='mode' mode={article.mode}/> <div className='title'>'(New article)'</div>
+              </div>
+              <div className='bottom'>
+                <div className='tags'><i className='fa fa-fw fa-tags'/></div>
+              </div>
+            </div>
+            <div className='divider'></div>
+          </div>
+        ) : null}
+        {articlesEl}
+      </div>
+    )
+  }
+}
+
+ArticleList.propTypes = {
+  articles: PropTypes.array
+}

browser/main/HomePage/ArticleNavigator.js

@@ -0,0 +1,74 @@
+import React, { PropTypes } from 'react'
+import ProfileImage from 'boost/components/ProfileImage'
+import { findWhere } from 'lodash'
+
+export default class ArticleNavigator extends React.Component {
+  render () {
+    let { user, status } = this.props
+    if (user == null) return (<div className='ArticleNavigator'/>)
+
+    let activeFolder = findWhere(user.Folders, {id: status.folderId})
+
+    let folders = user.Folders.map(folder => {
+      return (
+        <button key={'folder-' + folder.id} className={activeFolder != null && activeFolder.id === folder.id ? 'active' : ''}><i className='fa fa-fw fa-square'/> {folder.name}</button>
+      )
+    })
+
+    let members = Array.isArray(user.Members) ? user.Members.sort((a, b) => {
+      return new Date(a._pivot_createdAt) - new Date(b._pivot_createdAt)
+    }).map(member => {
+      return (
+        <div key={'member-' + member.id}>
+          <ProfileImage className='memberImage' email={member.email} size='22'/>
+          <div className='memberProfileName'>{member.profileName}</div>
+        </div>
+      )
+    }) : null
+
+    return (
+      <div className='ArticleNavigator'>
+        <div className='userInfo'>
+          <div className='userProfileName'>{user.profileName}</div>
+          <div className='userName'>{user.name}</div>
+          <button className='settingBtn'><i className='fa fa-fw fa-chevron-down'/></button>
+        </div>
+
+        <div className='controlSection'>
+          <button className='newPostBtn'>New Post</button>
+        </div>
+
+        <div className='folders'>
+          <div className='header'>
+            <div className='title'>Folders</div>
+            <button className='addBtn'><i className='fa fa-fw fa-plus'/></button>
+          </div>
+          <div className='folderList'>
+            <button className={activeFolder == null ? 'active' : ''}>All folders</button>
+            {folders}
+          </div>
+        </div>
+
+        {user.userType === 'team' ? (
+          <div className='members'>
+            <div className='header'>
+              <div className='title'>Members</div>
+              <button className='addBtn'><i className='fa fa-fw fa-plus'/></button>
+            </div>
+            <div className='memberList'>
+              {members}
+            </div>
+          </div>
+        ) : null}
+
+      </div>
+    )
+  }
+}
+
+ArticleNavigator.propTypes = {
+  user: PropTypes.object,
+  state: PropTypes.shape({
+    folderId: PropTypes.number
+  })
+}

browser/main/HomePage/ArticleTopBar.js

@@ -0,0 +1,27 @@
+import React, { PropTypes } from 'react'
+import ExternalLink from 'boost/components/ExternalLink'
+
+const ArticleTopBar = React.createClass({
+  render () {
+    return (
+      <div className='ArticleTopBar'>
+        <div className='left'>
+          <div className='search'>
+            <i className='fa fa-search fa-fw' />
+            <input placeholder='Search' type='text'/>
+          </div>
+          <button className='refreshBtn'><i className='fa fa-fw fa-refresh'/></button>
+        </div>
+        <div className='right'>
+          <button>?</button>
+          <button>i</button>
+          <ExternalLink className='logo' href='http://b00st.io'>
+            <img src='../../resources/favicon-230x230.png' width='44' height='44'/>
+          </ExternalLink>
+        </div>
+      </div>
+    )
+  }
+})
+
+export default ArticleTopBar

browser/main/HomePage/UserNavigator.js

@@ -0,0 +1,50 @@
+import React, { Component, PropTypes } from 'react'
+import { Link } from 'react-router'
+import ProfileImage from 'boost/components/ProfileImage'
+import { openModal } from 'boost/modal'
+import CreateNewTeam from 'boost/components/modal/CreateNewTeam'
+
+export default class UserNavigator extends Component {
+  handleClick (e) {
+    openModal(CreateNewTeam)
+  }
+
+  // for dev
+  componentDidMount () {
+    // openModal(CreateNewTeam)
+  }
+
+  renderUserList () {
+    var users = this.props.users.map((user, index) => (
+      <li key={'user-' + user.id}>
+        <Link to={'/users/' + user.id} activeClassName='active'>
+          <ProfileImage email={user.email} size='44'/>
+          <div className='userTooltip'>{user.name}</div>
+          {index < 9 ? <div className='keyLabel'>{'⌘' + (index + 1)}</div> : null}
+        </Link>
+      </li>
+    ))
+
+    return (
+      <ul className='userList'>
+        {users}
+      </ul>
+    )
+  }
+
+  render () {
+    return (
+      <div className='UserNavigator'>
+        {this.renderUserList()}
+        <button className='createTeamBtn' onClick={e => this.handleClick(e)}>
+          +
+          <div className='tooltip'>Create a new team</div>
+        </button>
+      </div>
+    )
+  }
+}
+
+UserNavigator.propTypes = {
+  users: PropTypes.array
+}