From af3a403971b343f5e9cbccbf97c38754d9476b3d Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Tue, 3 May 2022 22:33:05 +1200
Subject: [PATCH] Add moveBrew and moveSource function calls

---
 .../homebrew/editor/snippetbar/snippetbar.jsx  | 18 +++++++++++++++++-
 .../homebrew/editor/snippetbar/snippetbar.less | 18 +++++++++++++++++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index f16ebbbb4..849a9c642 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -61,18 +61,34 @@ const Snippetbar = createClass({
 	},
 
 	toTop : function(){
+		this.props.sourceJump(0);
 		this.props.brewJump(1);
-		this.props.sourceJump(1);
+	},
+
+	moveBrew : function(){
+		this.props.brewJump();
+	},
+
+	moveSource : function(){
+		this.props.sourceJump();
 	},
 
 	renderEditorButtons : function(){
 		if(!this.props.showEditButtons) return;
 
 		return <div className='editors'>
+			<div className={`editorTool fromBrew ${['text'].includes(this.props.view) ? 'active' : ''}`}
+				onClick={this.moveSource} >
+				<i className='fas fa-arrow-left' />
+			</div>
 			<div className={`editorTool toTop ${['text', 'style'].includes(this.props.view) ? 'active' : ''}`}
 				onClick={this.toTop} >
 				<i className='fas fa-arrow-up' />
 			</div>
+			<div className={`editorTool toBrew ${['text'].includes(this.props.view) ? 'active' : ''}`}
+				onClick={this.moveBrew} >
+				<i className='fas fa-arrow-right' />
+			</div>
 			<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
 				onClick={this.props.undo} >
 				<i className='fas fa-undo' />
diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less
index fe374f594..923568e28 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -10,7 +10,7 @@
 		top             : 0px;
 		right           : 0px;
 		height          : @menuHeight;
-		width           : 125px;
+		width           : 175px;
 		justify-content : space-between;
 		&>div{
 			height      : @menuHeight;
@@ -54,6 +54,22 @@
 					color : black;
 				}
 			}
+			&.toBrew{
+				.tooltipLeft('Match Brew to Source');
+				font-size : 0.75em;
+				color     : grey;
+				&.active{
+					color : black;
+				}
+			}
+			&.fromBrew{
+				.tooltipLeft('Match Source to Brew');
+				font-size : 0.75em;
+				color     : grey;
+				&.active{
+					color : black;
+				}
+			}
 			&.divider {
 				background: linear-gradient(#000, #000) no-repeat center/1px 100%;
 				width: 5px;