Display name of write in theme next to write-in

Clear user's active ThemeBundle when an incomplete/broken/invalid writein.

Needs theming help.

client/homebrew/editor/editor.jsx

@@ -454,6 +454,7 @@ const Editor = createClass({
 					rerenderParent={this.rerenderParent} />
 				<MetadataEditor
 					metadata={this.props.brew}
+					themeBundle={this.props.themeBundle}
 					onChange={this.props.onMetaChange}
 					reportError={this.props.reportError}
 					userThemes={this.props.userThemes}/>

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -53,8 +53,8 @@ const MetadataEditor = createClass({
 		return {
 			showThumbnail     : true,
 			showThemeWritein  : mergedThemes[this.props.metadata.renderer][this.props.metadata.theme] ? false : true,
-			lastThemePulldown : mergedThemes[this.props.metadata.renderer][this.props.metadata.theme] ? mergedThemes[this.props.metadata.renderer][this.props.metadata.theme] : '',
-			lastThemeWriteIn  : mergedThemes[this.props.metadata.renderer][this.props.metadata.theme] ? '' : mergedThemes[this.props.metadata.renderer][this.props.metadata.theme]
+			lastThemePulldown : mergedThemes[this.props.metadata.renderer][this.props.metadata.theme] ? mergedThemes[this.props.metadata.renderer][this.props.metadata.theme].path : '',
+			lastThemeWriteIn  : mergedThemes[this.props.metadata.renderer][this.props.metadata.theme] ? '' : this.props.metadata.theme
 		};
 	},
 
@@ -244,7 +244,7 @@ const MetadataEditor = createClass({
 
 		const currentRenderer = this.props.metadata.renderer;
 		const currentTheme    = mergedThemes[`${_.upperFirst(this.props.metadata.renderer)}`][this.props.metadata.theme]
-													?? { name: `!!! Manually selected theme !!! ID=${this.props.metadata.theme}` };
+													?? { name: `${this.props.themeBundle?.path || ''}`, author: '!!!' };
 		let dropdown;
 
 		if(currentRenderer == 'legacy') {
@@ -273,12 +273,15 @@ const MetadataEditor = createClass({
 
 	renderThemeWritein : function(){
 		if(!this.state.showThemeWritein) return;
-		return <input type='text'
+		return <div>
+			<input type='text'
 			default=''
 			placeholder='Enter share id'
 			className='value'
 			defaultValue={this.state.lastThemeWriteIn || this.props.metadata.theme}
-			onChange={(e)=>this.handleThemeWritein(e)} />;
+			onChange={(e)=>this.handleThemeWritein(e)} />
+			<span class='userThemeName'>{`${this.state.lastThemeWriteIn ? this.props.themeBundle?.path || '' : ''}`}</span>
+		</div>;
 	},
 
 	renderLanguageDropdown : function(){

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -1,5 +1,9 @@
 @import 'naturalcrit/styles/colors.less';
 
+.userThemeName {
+	padding-left: 10px;
+	padding-right: 10px;
+}
 
 .metadataEditor {
 	position         : absolute;

client/homebrew/pages/editPage/editPage.jsx

@@ -443,6 +443,7 @@ const EditPage = createClass({
 					reportError={this.errorReported}
 					renderer={this.state.brew.renderer}
 					userThemes={this.props.userThemes}
+					themeBundle={this.state.themeBundle}
 					snippetBundle={this.state.themeBundle.snippets}
 					updateBrew={this.updateBrew}
 					onCursorPageChange={this.handleEditorCursorPageChange}

server/homebrew.api.js

@@ -279,6 +279,7 @@ const api = {
 		let currentTheme;
 		const completeStyles   = [];
 		const completeSnippets = [];
+		let themePath = '';
 
 		while (req.params.id) {
 			//=== User Themes ===//
@@ -292,6 +293,7 @@ const api = {
 
 				currentTheme = req.brew;
 				splitTextStyleAndMetadata(currentTheme);
+				if(themePath === '') themePath = currentTheme.title;
 
 				// 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));
@@ -301,6 +303,7 @@ const api = {
 				req.params.renderer = currentTheme.renderer;
 			} else {
 			//=== Static Themes ===//
+				if(themePath === '') themePath = req.params.id;
 				const localSnippets = `${req.params.renderer}_${req.params.id}`; // Just log the name for loading on client
 				const localStyle    = `@import url(\"/themes/${req.params.renderer}/${req.params.id}/style.css\");`;
 				completeSnippets.push(localSnippets);
@@ -313,7 +316,8 @@ const api = {
 		const returnObj = {
 			// Reverse the order of the arrays so they are listed oldest parent to youngest child.
 			styles   : completeStyles.reverse(),
-			snippets : completeSnippets.reverse()
+			snippets : completeSnippets.reverse(),
+			path     : themePath
 		};
 
 		res.setHeader('Content-Type', 'application/json');

shared/helpers.js

@@ -44,8 +44,13 @@ const fetchThemeBundle = async (obj, renderer, theme)=>{
 			.catch((err)=>{
 				obj.setState({ error: err });
 			});
-	if(!res) return;
-
+	if(!res) {
+		obj.setState((prevState)=>({
+			...prevState,
+			themeBundle : {}
+		}));
+		return;
+	}
 	const themeBundle = res.body;
 	themeBundle.joinedStyles = themeBundle.styles.map((style)=>`<style>${style}</style>`).join('\n\n');
 	obj.setState((prevState)=>({
@@ -54,8 +59,14 @@ const fetchThemeBundle = async (obj, renderer, theme)=>{
 	}));
 };
 
+const fetchBrewAsThemeJSON = async (renderer, theme)=>{
+	if(!renderer || !theme) return;
+
+}
+
 export {
 	splitTextStyleAndMetadata,
 	printCurrentBrew,
 	fetchThemeBundle,
+	fetchBrewAsThemeJSON
 };