add note mode tab

browser/main/Detail/MarkdownNoteDetail.js

@@ -318,6 +318,16 @@ class MarkdownNoteDetail extends React.Component {
           value={this.state.note.tags}
           onChange={(e) => this.handleChange(e)}
         />
+
+        <div styleName='mode-tab'>
+          <div styleName='active'>
+            <img styleName='item-star' src='../resources/icon/icon-WYSIWYG-on.svg' />
+          </div>
+          <div>
+            <img styleName='item-star' src='../resources/icon/icon-code-off.svg' />
+          </div>
+        </div>
+
         <TodoListPercentage
           percentageOfTodo={getTodoPercentageOfCompleted(note.content)}
         />

browser/main/Detail/MarkdownNoteDetail.styl

@@ -34,6 +34,28 @@
 .body-noteEditor
   absolute top bottom left right
 
+.mode-tab
+  border 1px solid #eee
+  height 34px
+  display flex
+  align-items center
+  div
+    width 100px
+    height 100%
+    background-color #f9f9f9
+    display flex
+    align-items center
+    justify-content center
+    cursor pointer
+    &:first-child
+      border-right 1px solid #eee
+    img
+      transform scale(0.7)
+  .active
+    background-color #fff
+    box-shadow 2px 0px 7px #eee
+    z-index 1
+  
 body[data-theme="white"]
   .root
     box-shadow $note-detail-box-shadow

browser/main/Detail/TagSelect.styl

@@ -6,6 +6,7 @@
   width 100%
   overflow-x scroll
   white-space nowrap
+  margin-right 10px
 
 .root::-webkit-scrollbar
   display none