Functional first pass.

Needs:

 - [ ] opinions on UI placement
 - [ ] opinions on best choice for displaying a write-in based User Brew ( flip to writin box? Add to drop-down list? )

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -47,7 +47,8 @@ const MetadataEditor = createClass({
 
 	getInitialState : function(){
 		return {
-			showThumbnail : true
+			showThumbnail    : true,
+			showThemeWritein : false
 		};
 	},
 
@@ -57,6 +58,12 @@ const MetadataEditor = createClass({
 		});
 	},
 
+	toggleThemeWritein : function(){
+		this.setState({
+			showThemeWritein : !this.state.showThemeWritein
+		});
+	},
+
 	renderThumbnail : function(){
 		if(!this.state.showThumbnail) return;
 		return <img className='thumbnail-preview' src={this.props.metadata.thumbnail || homebreweryThumbnail}></img>;
@@ -115,6 +122,12 @@ const MetadataEditor = createClass({
 		this.props.onChange(this.props.metadata, 'theme');
 	},
 
+	handleThemeWritein : function(e) {
+		this.props.metadata.renderer = 'V3';
+		this.props.metadata.theme = e.target.value;
+		this.props.onChange(this.props.metadata, 'theme');
+	},
+
 	handleLanguage : function(languageCode){
 		this.props.metadata.lang = languageCode;
 		this.props.onChange(this.props.metadata);
@@ -213,6 +226,7 @@ const MetadataEditor = createClass({
 			});
 		};
 
+
 		const currentRenderer = this.props.metadata.renderer;
 		const currentTheme    = mergedThemes[`${_.upperFirst(this.props.metadata.renderer)}`][this.props.metadata.theme]
 													?? { name: `!!! THEME MISSING !!! ID=${this.props.metadata.theme}` };
@@ -234,10 +248,23 @@ const MetadataEditor = createClass({
 
 		return <div className='field themes'>
 			<label>theme</label>
-			{dropdown}
+			{!this.state.showThemeWritein?dropdown:''}
+			<button className='display' onClick={this.toggleThemeWritein}>
+				<i className={`fas fa-caret-${this.state.showThemeWritein ? 'right' : 'left'}`} />
+			</button>
+			{this.renderThemeWritein()}
 		</div>;
 	},
 
+	renderThemeWritein : function(){
+		if(!this.state.showThemeWritein) return;
+		return <input type='text'
+			default=''
+			placeholder='Enter share id'
+			                 className='value'
+			onChange={(e)=>this.handleThemeWritein(e)} />;
+	},
+
 	renderLanguageDropdown : function(){
 		const langCodes = ['en', 'de', 'de-ch', 'fr', 'ja', 'es', 'it', 'sv', 'ru', 'zh-Hans', 'zh-Hant'];
 		const listLanguages = ()=>{
@@ -345,7 +372,7 @@ const MetadataEditor = createClass({
 				placeholder='add tag' unique={true}
 				values={this.props.metadata.tags}
 				onChange={(e)=>this.handleFieldChange('tags', e)}
-				/>
+			/>
 
 			<div className='field systems'>
 				<label>systems</label>
@@ -370,7 +397,7 @@ const MetadataEditor = createClass({
 				values={this.props.metadata.invitedAuthors}
 				notes={['Invited author usernames are case sensitive.', 'After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.']}
 				onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}
-				/>
+			/>
 
 			<h2>Privacy</h2>
 

server/homebrew.api.js

@@ -1,6 +1,6 @@
 /* eslint-disable max-lines */
 import _                             from 'lodash';
-import {model as HomebrewModel}      from './homebrew.model.js';
+import { model as HomebrewModel }    from './homebrew.model.js';
 import express                       from 'express';
 import zlib                          from 'zlib';
 import GoogleActions                 from './googleActions.js';
@@ -302,7 +302,7 @@ const api = {
 				splitTextStyleAndMetadata(currentTheme);
 
 				// If there is anything in the snippets or style members, append them to the appropriate array
-				if(currentTheme?.snippets) completeSnippets.push(JSON.parse(currentTheme.snippets));
+				// if(currentTheme?.snippets) completeSnippets.push(JSON.parse(currentTheme.snippets));
 				if(currentTheme?.style) completeStyles.push(`/* From Brew: ${req.protocol}://${req.get('host')}/share/${req.params.id} */\n\n${currentTheme.style}`);
 
 				req.params.id       = currentTheme.theme;