Separate "style" and "metadata" panels

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -16,12 +16,13 @@ const execute = function(val, brew){
 const Snippetbar = createClass({
 	getDefaultProps : function() {
 		return {
-			brew           : {},
-			onInject       : ()=>{},
-			onToggle       : ()=>{},
-			showmeta       : false,
-			showMetaButton : true,
-			renderer       : ''
+			brew            : {},
+			view            : 'text',
+			onViewChange    : ()=>{},
+			onInject        : ()=>{},
+			onToggle        : ()=>{},
+			showEditButtons : true,
+			renderer        : 'legacy'
 		};
 	},
 
@@ -36,12 +37,17 @@ const Snippetbar = createClass({
 	},
 
 	renderSnippetGroups : function(){
-		if(this.props.renderer == 'V3')
-			Snippets = SnippetsV3;
-		else
-			Snippets = SnippetsLegacy;
 
-		return _.map(Snippets, (snippetGroup)=>{
+		if(this.props.view === 'text') {
+			if(this.props.renderer === 'V3')
+				snippets = SnippetsV3;
+			else
+				snippets = SnippetsLegacy;
+		} else {
+			snippets = [];
+		}
+
+		return _.map(snippets, (snippetGroup)=>{
 			return <SnippetGroup
 				brew={this.props.brew}
 				groupName={snippetGroup.groupName}
@@ -53,19 +59,29 @@ const Snippetbar = createClass({
 		});
 	},
 
-	renderMetadataButton : function(){
-		if(!this.props.showMetaButton) return;
-		return <div className={cx('snippetBarButton', 'toggleMeta', { selected: this.props.showmeta })}
-			onClick={this.props.onToggle}>
-			<i className='fas fa-info-circle' />
-			<span className='groupName'>Properties</span>
+	renderEditorButtons : function(){
+		if(!this.props.showEditButtons) return;
+
+		return <div className='editors'>
+			<div className={cx('text', { selected: this.props.view === 'text' })}
+				 onClick={()=>this.props.onViewChange('text')}>
+				<i className='fa fa-beer' />
+			</div>
+			<div className={cx('style', { selected: this.props.view === 'style' })}
+				 onClick={()=>this.props.onViewChange('style')}>
+				<i className='fa fa-paint-brush' />
+			</div>
+			<div className={cx('meta', { selected: this.props.view === 'meta' })}
+				onClick={()=>this.props.onViewChange('meta')}>
+				<i className='fas fa-info-circle' />
+			</div>
 		</div>;
 	},
 
 	render : function(){
 		return <div className='snippetBar'>
 			{this.renderSnippetGroups()}
-			{this.renderMetadataButton()}
+			{this.renderEditorButtons()}
 		</div>;
 	}
 });

client/homebrew/editor/snippetbar/snippetbar.less

@@ -1,12 +1,40 @@
 
 .snippetBar{
-	@height          : 25px;
+	@menuHeight      : 25px;
 	position         : relative;
-	height           : @height;
+	height           : @menuHeight;
 	background-color : #ddd;
+	.editors{
+		position        : absolute;
+		display         : flex;
+		top             : 0px;
+		right           : 0px;
+		height          : @menuHeight;
+		width           : 90px;
+		justify-content : space-between;
+		&>div{
+			height      : @menuHeight;
+			width       : @menuHeight;
+			cursor      : pointer;
+			line-height : @menuHeight;
+			text-align  : center;
+			&:hover,&.selected{
+				background-color : #999;
+			}
+			&.text{
+				.tooltipLeft('Brew Editor');
+			}
+			&.style{
+				.tooltipLeft('Style Editor');
+			}
+			&.meta{
+				.tooltipLeft('Properties');
+			}
+		}
+	}
 	.snippetBarButton{
-		height         : @height;
-		line-height    : @height;
+		height         : @menuHeight;
+		line-height    : @menuHeight;
 		display        : inline-block;
 		padding        : 0px 5px;
 		font-weight    : 800;

client/homebrew/editor/snippetbar/snippets/snippets.js

@@ -66,7 +66,7 @@ module.exports = [
 			{
 				name : 'Auto-incrementing Page Number',
 				icon : 'fas fa-sort-numeric-down',
-				gen  : '{{\npageNumber,auto\n}}\n\n'
+				gen  : '{{pageNumber,auto\n}}\n\n'
 			},
 			{
 				name : 'Link to page',