From 7117d3caed4c6aa4fc04b05be103d22d3e611bcb Mon Sep 17 00:00:00 2001
From: Trevor Buckner <calculuschild@gmail.com>
Date: Tue, 28 Feb 2023 16:26:23 -0500
Subject: [PATCH] Add "beta" badge on snippets marked "experimetal"

---
 .../homebrew/editor/snippetbar/snippetbar.jsx |  3 ++-
 .../editor/snippetbar/snippetbar.less         | 25 +++++++++++++++----
 themes/V3/5ePHB/snippets.js                   |  7 +++---
 themes/V3/Blank/snippets.js                   | 18 +++++++------
 4 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index c03c01212..cfd2d5e91 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -171,7 +171,8 @@ const SnippetGroup = createClass({
 		return _.map(snippets, (snippet)=>{
 			return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
 				<i className={snippet.icon} />
-				{snippet.name}
+				<span className='name'>{snippet.name}</span>
+				{snippet.experimental && <span className='beta'>beta</span>}
 				{snippet.subsnippets && <>
 					<i className='fas fa-caret-right'></i>
 					<div className='dropdown side'>
diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less
index 9c6bf3f08..80444a7e4 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -97,19 +97,34 @@
 			background-color : #ddd;
 			.snippet{
 				.animate(background-color);
-				min-width : max-content;
-				padding   : 5px;
-				cursor    : pointer;
-				font-size : 10px;
+				display     : flex;
+				align-items : center;
+				min-width   : max-content;
+				padding     : 5px;
+				cursor      : pointer;
+				font-size   : 10px;
 				i{
 					margin-right : 8px;
 					font-size    : 1.2em;
 					height       : 1.2em;
 					&~i{
 						margin-right: 0;
-						margin-left: 8px;
+						margin-left: 5px;
 					}
 				}
+				.name {
+					margin-right  : auto;
+				}
+				.beta {
+					color         : white;
+					padding       : 4px 6px;
+					line-height   : 1em;
+					margin-left   : 5px;
+					align-self    : center;
+					background    : grey;
+					border-radius : 12px;
+					font-family   : monospace;
+				}
 				&:hover{
 					background-color : #999;
 					&>.dropdown{
diff --git a/themes/V3/5ePHB/snippets.js b/themes/V3/5ePHB/snippets.js
index 51b91e6b0..c67cc7f3e 100644
--- a/themes/V3/5ePHB/snippets.js
+++ b/themes/V3/5ePHB/snippets.js
@@ -169,9 +169,10 @@ module.exports = [
 				gen  : MonsterBlockGen.monster('monster,frame,wide', 4),
 			},
 			{
-				name : 'Cover Page',
-				icon : 'fac fa-file-c',
-				gen  : CoverPageGen,
+				name         : 'Cover Page',
+				icon         : 'fac fa-file-c',
+				gen          : CoverPageGen,
+				experimental : true
 			},
 			{
 				name : 'Magic Item',
diff --git a/themes/V3/Blank/snippets.js b/themes/V3/Blank/snippets.js
index a8fd2fa2c..bfb43a8c6 100644
--- a/themes/V3/Blank/snippets.js
+++ b/themes/V3/Blank/snippets.js
@@ -102,10 +102,11 @@ module.exports = [
 				gen  : WatercolorGen,
 			},
 			{
-				name        : 'Watercolor Image Mask Edge',
-				icon        : 'fac mask-edge',
-				gen         : ImageMaskGen.edge('bottom'),
-				subsnippets : [
+				name         : 'Watercolor Image Mask Edge',
+				icon         : 'fac mask-edge',
+				gen          : ImageMaskGen.edge('bottom'),
+				experimental : true,
+				subsnippets  : [
 					{
 						name : 'Top',
 						icon : 'fac position-top',
@@ -129,10 +130,11 @@ module.exports = [
 				]
 			},
 			{
-				name        : 'Watercolor Image Mask Corner',
-				icon        : 'fac mask-corner',
-				gen         : ImageMaskGen.corner,
-				subsnippets : [
+				name         : 'Watercolor Image Mask Corner',
+				icon         : 'fac mask-corner',
+				gen          : ImageMaskGen.corner,
+				experimental : true,
+				subsnippets  : [
 					{
 						name : 'Top-Left',
 						icon : 'fac position-top-left',