Merge branch 'master' into headerNaxExtension

client/admin/admin.jsx

@@ -1,47 +1,48 @@
-require('./admin.less');
-const React = require('react');
-const createClass = require('create-react-class');
-
+import './admin.less';
+import React, { useEffect, useState } from 'react';
 const BrewUtils = require('./brewUtils/brewUtils.jsx');
 const NotificationUtils = require('./notificationUtils/notificationUtils.jsx');
+import AuthorUtils from './authorUtils/authorUtils.jsx';
 
-const tabGroups = ['brew', 'notifications'];
+const tabGroups = ['brew', 'notifications', 'authors'];
 
-const Admin = createClass({
-	getDefaultProps : function() {
-		return {};
-	},
+const Admin = ()=>{
+	const [currentTab, setCurrentTab] = useState('brew');
 
-	getInitialState : function(){
-		return ({
-			currentTab : 'brew'
-		});
-	},
+	useEffect(()=>{
+		setCurrentTab(localStorage.getItem('hbAdminTab'));
+	}, []);
 
-	handleClick : function(newTab){
-		if(this.state.currentTab === newTab) return;
-		this.setState({
-			currentTab : newTab
-		});
-	},
+	useEffect(()=>{
+		localStorage.setItem('hbAdminTab', currentTab);
+	}, [currentTab]);
 
-	render : function(){
-		return <div className='admin'>
+	return (
+		<div className='admin'>
 			<header>
 				<div className='container'>
 					<i className='fas fa-rocket' />
-					homebrewery admin
+					The Homebrewery Admin Page
+					<a href='/'>back to homepage</a>
 				</div>
 			</header>
 			<main className='container'>
 				<nav className='tabs'>
-					{tabGroups.map((tab, idx)=>{ return <button className={tab===this.state.currentTab ? 'active' : ''} key={idx} onClick={()=>{ return this.handleClick(tab); }}>{tab.toUpperCase()}</button>; })}
+					{tabGroups.map((tab, idx)=>(
+						<button
+							className={tab === currentTab ? 'active' : ''}
+							key={idx}
+							onClick={()=>setCurrentTab(tab)}>
+							{tab.toUpperCase()}
+						</button>
+					))}
 				</nav>
-				{this.state.currentTab==='brew' && <BrewUtils />}
-				{this.state.currentTab==='notifications' && <NotificationUtils />}
+				{currentTab === 'brew' && <BrewUtils />}
+				{currentTab === 'notifications' && <NotificationUtils />}
+				{currentTab === 'authors' && <AuthorUtils />}
 			</main>
-		</div>;
-	}
-});
+		</div>
+	);
+};
 
 module.exports = Admin;

client/admin/admin.less

@@ -22,7 +22,7 @@ body {
 }
 
 :where(.admin) {
-
+	padding-bottom : 50px;
 	header {
 		padding          : 20px 0px;
 		margin-bottom    : 30px;
@@ -30,6 +30,7 @@ body {
 		color            : white;
 		background-color : @red;
 		i { margin-right : 30px; }
+		a { float : right; }
 	}
 
 	hr { margin : 30px 0px; }
@@ -48,21 +49,23 @@ body {
 		}
 
 		dl {
-			@maxItemWidth : 132px;
+			display               : grid;
+			grid-template-columns : 120px 1fr;
+			row-gap               : 10px;
+			align-items           : center;
+			justify-items         : start;
+			padding-top           : 0.5em;
 			dt {
-				float      : left;
-				width      : @maxItemWidth;
-				clear      : left;
-				text-align : right;
+				float       : left;
+				clear       : left;
+				height      : fit-content;
+				font-weight : 900;
+				text-align  : right;
 				&::after { content : ' : '; }
 			}
-			dd {
-				height      : 1em;
-				padding     : 0 0 0.5em 0;
-				margin-left : @maxItemWidth + 6px;
-			}
+			dd { height      : fit-content; }
 		}
-
+		
 		.tabs button {
 			margin-right     : 3px;
 			margin-left      : 3px;
@@ -90,11 +93,45 @@ body {
 		}
 	}
 
+	table {
+		padding    : 10px;
+
+		tr {
+			border-bottom : 1px solid;
+			&:last-of-type { border : none; }
+			&:nth-child(even) { background : #DDDDDD; }
+		}
+
+		thead {
+			background    : rgb(193,236,230);
+			border-bottom : 2px solid;
+		}
+        
+		th, td {
+			padding        : 5px 10px;
+			vertical-align : middle;
+			text-align     : center;
+			border-right   : 1px solid;
+
+			&:last-child { border-right : none; }
+		}
+
+		th { font-weight : 900; }
+
+		td {
+			&:first-child {
+				font-weight  : 900;
+				text-align   : left;
+			}
+		}
+	}
+
 	.error {
-		background: rgb(178, 54, 54);
-		color:white;
-		font-weight: 900;
-		margin-block:10px;
-		padding:10px;
+		float        : right;
+		padding      : 10px;
+		margin-block : 10px;
+		font-weight  : 900;
+		color        : white;
+		background   : rgb(178, 54, 54);
 	}
 }

client/admin/authorUtils/authorLookup/authorLookup.jsx

@@ -0,0 +1,87 @@
+import './authorLookup.less';
+
+import React from 'react';
+import request from 'superagent';
+
+const authorLookup = ()=>{
+	const [author, setAuthor] = React.useState('');
+	const [searching, setSearching] = React.useState(false);
+	const [results, setResults] = React.useState([]);
+
+	const lookup = async ()=>{
+		if(!author) return;
+
+		setSearching(true);
+		setResults([]);
+
+		const brews = await request.get(`/admin/user/list/${author}`);
+		setResults(brews.body);
+		setSearching(false);
+	};
+
+	const renderResults = ()=>{
+		if(results.length == 0) return <>
+			<h2>Results</h2>
+			<p>None found.</p>
+		</>;
+
+		return <>
+			<h2>{`Results - ${results.length} brews` }</h2>
+			<table className='resultsTable'>
+				<thead>
+					<tr>
+						<th>Title</th>
+						<th>Share</th>
+						<th>Edit</th>
+						<th>Last Update</th>
+						<th>Storage</th>
+					</tr>
+				</thead>
+				<tbody>
+					{results
+						.sort((a, b)=>{         // Sort brews from most recently updated
+							if(a.updatedAt > b.updatedAt) return -1;
+							return 1;
+						})
+						.map((brew, idx)=>{
+							return <tr key={idx}>
+								<td><strong>{brew.title}</strong></td>
+								<td><a href={`/share/${brew.shareId}`}>{brew.shareId}</a></td>
+								<td>{brew.editId}</td>
+								<td style={{ width: '200px' }}>{brew.updatedAt}</td>
+								<td>{brew.googleId ? 'Google' : 'Homebrewery'}</td>
+							</tr>;
+						})}
+				</tbody>
+			</table>
+		</>;
+	};
+
+	const handleKeyPress = (evt)=>{
+		if(evt.key === 'Enter') return lookup();
+	};
+
+	const handleChange = (evt)=>{
+		setAuthor(evt.target.value);
+	};
+
+	return (
+		<div className='authorLookup'>
+			<div className='authorLookupInputs'>
+				<h2>Author Lookup</h2>
+				<label className='field'>
+					Author Name:
+					<input className='fieldInput' value={author} onKeyDown={handleKeyPress} onChange={handleChange} />
+					<button onClick={lookup}>
+						<i className={`fas ${searching ? 'fa-spin fa-spinner' : 'fa-search'}`} />
+					</button>
+				</label>
+			</div>
+			<div className='authorLookupResults'>
+				{renderResults()}
+			</div>
+		</div>
+	);
+};
+
+module.exports = authorLookup;

client/admin/authorUtils/authorLookup/authorLookup.less

@@ -0,0 +1,29 @@
+.authorLookup {
+	position       : relative;
+	display        : flex;
+	flex-direction : column;
+
+	.field {
+		display               : flex;
+		gap                   : 5px;
+		align-items           : center;
+		justify-items         : stretch;
+		width                 : 100%;
+		margin-bottom         : 20px;
+   
+	
+		input {
+			height        : 33px;
+			padding       : 0px 10px;
+			margin-bottom : unset;
+			font-family   : monospace;
+		}
+	
+		button {
+			width: 50px;
+				
+			i { margin-right : 10px; }
+		}
+	}
+
+}

client/admin/authorUtils/authorUtils.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import AuthorLookup from './authorLookup/authorLookup.jsx';
+
+const authorUtils = ()=>{
+	return (
+		<section className='authorUtils'>
+			<AuthorLookup />
+		</section>
+	);
+};
+
+module.exports = authorUtils;

client/admin/brewUtils/brewCleanup/brewCleanup.jsx

@@ -1,10 +1,8 @@
-require('./brewCleanup.less');
 const React       = require('react');
 const createClass = require('create-react-class');
 
 const request = require('superagent');
 
-
 const BrewCleanup = createClass({
 	displayName : 'BrewCleanup',
 	getDefaultProps(){
@@ -39,9 +37,9 @@ const BrewCleanup = createClass({
 		if(!this.state.primed) return;
 
 		if(!this.state.count){
-			return <div className='removeBox'>No Matching Brews found.</div>;
+			return <div className='result noBrews'>No Matching Brews found.</div>;
 		}
-		return <div className='removeBox'>
+		return <div className='result'>
 			<button onClick={this.cleanup} className='remove'>
 				{this.state.pending
 					? <i className='fas fa-spin fa-spinner' />
@@ -52,7 +50,7 @@ const BrewCleanup = createClass({
 		</div>;
 	},
 	render(){
-		return <div className='BrewCleanup'>
+		return <div className='brewUtil brewCleanup'>
 			<h2> Brew Cleanup </h2>
 			<p>Removes very short brews to tidy up the database</p>
 
@@ -65,7 +63,7 @@ const BrewCleanup = createClass({
 			{this.renderPrimed()}
 
 			{this.state.error
-				&& <div className='error'>{this.state.error.toString()}</div>
+				&& <div className='error noBrews'>{this.state.error.toString()}</div>
 			}
 		</div>;
 	}

client/admin/brewUtils/brewCleanup/brewCleanup.less

@@ -1,9 +0,0 @@
-.BrewCleanup {
-	.removeBox {
-		margin-top : 20px;
-		button {
-			margin-right     : 10px;
-			background-color : @red;
-		}
-	}
-}

client/admin/brewUtils/brewCompress/brewCompress.jsx

@@ -1,10 +1,7 @@
-require('./brewCompress.less');
 const React       = require('react');
 const createClass = require('create-react-class');
-
 const request = require('superagent');
 
-
 const BrewCompress = createClass({
 	displayName : 'BrewCompress',
 	getDefaultProps(){
@@ -53,9 +50,9 @@ const BrewCompress = createClass({
 		if(!this.state.primed) return;
 
 		if(!this.state.count){
-			return <div className='removeBox'>No Matching Brews found.</div>;
+			return <div className='result noBrews'>No Matching Brews found.</div>;
 		}
-		return <div className='removeBox'>
+		return <div className='result'>
 			<button onClick={this.cleanup} className='remove'>
 				{this.state.pending
 					? <i className='fas fa-spin fa-spinner' />
@@ -69,7 +66,7 @@ const BrewCompress = createClass({
 		</div>;
 	},
 	render(){
-		return <div className='BrewCompress'>
+		return <div className='brewUtil brewCompress'>
 			<h2> Brew Compression </h2>
 			<p>Compresses the text in brews to binary</p>
 

client/admin/brewUtils/brewCompress/brewCompress.less

@@ -1,9 +0,0 @@
-.BrewCompress {
-	.removeBox {
-		margin-top : 20px;
-		button {
-			margin-right     : 10px;
-			background-color : @red;
-		}
-	}
-}

client/admin/brewUtils/brewLookup/brewLookup.jsx

@@ -1,5 +1,3 @@
-require('./brewLookup.less');
-
 const React = require('react');
 const createClass = require('create-react-class');
 const cx    = require('classnames');
@@ -55,7 +53,7 @@ const BrewLookup = createClass({
 
 	renderFoundBrew(){
 		const brew = this.state.foundBrew;
-		return <div className='foundBrew'>
+		return <div className='result'>
 			<dl>
 				<dt>Title</dt>
 				<dd>{brew.title}</dd>
@@ -90,7 +88,7 @@ const BrewLookup = createClass({
 	},
 
 	render(){
-		return <div className='brewLookup'>
+		return <div className='brewUtil brewLookup'>
 			<h2>Brew Lookup</h2>
 			<input type='text' value={this.state.query} onChange={this.handleChange} placeholder='edit or share id' />
 			<button onClick={this.lookup}>
@@ -106,7 +104,7 @@ const BrewLookup = createClass({
 
 			{this.state.foundBrew
 				? this.renderFoundBrew()
-				: <div className='noBrew'>No brew found.</div>
+				: <div className='result noBrew'>No brew found.</div>
 			}
 		</div>;
 	}

client/admin/brewUtils/brewLookup/brewLookup.less

@@ -1,6 +0,0 @@
-.brewLookup {
-    .cleanButton {
-        display : inline-block;
-        width   : 100%;
-    }
-}

client/admin/brewUtils/brewUtils.jsx

@@ -1,6 +1,6 @@
 const React = require('react');
 const createClass = require('create-react-class');
-
+require('./brewUtils.less');
 
 const BrewCleanup = require('./brewCleanup/brewCleanup.jsx');
 const BrewLookup = require('./brewLookup/brewLookup.jsx');

client/admin/brewUtils/brewUtils.less

@@ -0,0 +1,29 @@
+.brewUtil {
+	.result {
+		margin-top : 20px;
+		button {
+			margin-right     : 10px;
+			background-color : @red;
+		}
+	}
+	.cleanButton {
+		display : inline-block;
+		width   : 100%;
+	}
+}
+
+.stats {
+	position : relative;
+	
+	.pending {
+		position : absolute;
+		top      : 0.5em;
+		left     : 100px;
+		width    : 100%;
+		height   : 100%;
+	}
+
+	&:has(.pending) { opacity : 0.5; }
+
+	dl { grid-template-columns : 200px 250px; }
+}

client/admin/brewUtils/stats/stats.jsx

@@ -1,11 +1,8 @@
-require('./stats.less');
 const React       = require('react');
 const createClass = require('create-react-class');
-const cx          = require('classnames');
 
 const request = require('superagent');
 
-
 const Stats = createClass({
 	displayName : 'Stats',
 	getDefaultProps(){
@@ -14,7 +11,8 @@ const Stats = createClass({
 	getInitialState(){
 		return {
 			stats : {
-				totalBrews : 0
+				totalBrews          : 0,
+				totalPublishedBrews : 0
 			},
 			fetching : false
 		};
@@ -29,11 +27,13 @@ const Stats = createClass({
 			.finally(()=>this.setState({ fetching: false }));
 	},
 	render(){
-		return <div className='Stats'>
+		return <div className='brewUtil stats'>
 			<h2> Stats </h2>
 			<dl>
 				<dt>Total Brew Count</dt>
 				<dd>{this.state.stats.totalBrews}</dd>
+				<dt>Total Brews Published</dt>
+				<dd>{this.state.stats.totalPublishedBrews}</dd>
 			</dl>
 
 			{this.state.fetching

client/admin/brewUtils/stats/stats.less

@@ -1,13 +0,0 @@
-
-.Stats {
-	position : relative;
-	
-	.pending {
-		position         : absolute;
-		top              : 0px;
-		left             : 0px;
-		width            : 100%;
-		height           : 100%;
-		background-color : rgba(238,238,238, 0.5);
-	}
-}

client/admin/notificationUtils/notificationAdd/notificationAdd.less

@@ -6,18 +6,21 @@
 
 	.field {
 		display               : grid;
-		grid-template-columns : 120px 150px;
+		grid-template-columns : 120px 200px;
 		align-items           : center;
 		justify-items         : stretch;
 		width                 : 100%;
 		margin-bottom         : 20px;
-   
-	
+
 		input {
 			height        : 33px;
 			padding       : 0px 10px;
 			margin-bottom : unset;
 			font-family   : monospace;
+
+			&[type="date"] {
+				width:14ch;
+			}
 		}
 	
 		textarea {

client/admin/notificationUtils/notificationLookup/notificationLookup.less

@@ -1,8 +1,8 @@
-
 .notificationLookup {
 	width     : 450px;
 	height	  : fit-content;
 
+	.noNotification { margin-block : 20px; }
 	.notificationList {
 		display        : flex;
 		flex-direction : column;
@@ -30,11 +30,6 @@
 				font-size   : 20px;
 				font-weight : 900;
 			}
-
-			dl dt{
-				font-weight: 900;
-			}
 		}
 	}
-	.noNotification { margin-block : 20px; }
 }

client/components/combobox.jsx

@@ -45,6 +45,7 @@ const Combobox = createClass({
 	},
 	handleDropdown : function(show){
 		this.setState({
+			value        : show ? '' : this.props.default,
 			showDropdown : show,
 			inputFocused : this.props.autoSuggest.clearAutoSuggestOnClick ? show : false
 		});
@@ -58,10 +59,10 @@ const Combobox = createClass({
 			this.props.onEntry(e);
 		});
 	},
-	handleSelect : function(e){
+	handleSelect : function(value, data=value){
 		this.setState({
-			value : e.currentTarget.getAttribute('data-value')
-		}, ()=>{this.props.onSelect(this.state.value);});
+			value : value
+		}, ()=>{this.props.onSelect(data);});
 		;
 	},
 	renderTextInput : function(){
@@ -78,10 +79,11 @@ const Combobox = createClass({
 						if(!e.target.checkValidity()){
 							this.setState({
 								value : this.props.default
-							}, ()=>this.props.onEntry(e));
+							});
 						}
 					}}
 				/>
+				<i className='fas fa-caret-down'/>
 			</div>
 		);
 	},
@@ -92,11 +94,10 @@ const Combobox = createClass({
 			const filterOn = _.isString(this.props.autoSuggest.filterOn) ? [this.props.autoSuggest.filterOn] : this.props.autoSuggest.filterOn;
 			const filteredArrays = filterOn.map((attr)=>{
 				const children = dropdownChildren.filter((item)=>{
-					if(suggestMethod === 'includes'){
+					if(suggestMethod === 'includes')
 						return item.props[attr]?.toLowerCase().includes(this.state.value.toLowerCase());
-					} else if(suggestMethod === 'startsWith'){
+					if(suggestMethod === 'startsWith')
 						return item.props[attr]?.toLowerCase().startsWith(this.state.value.toLowerCase());
-					}
 				});
 				return children;
 			});
@@ -111,7 +112,7 @@ const Combobox = createClass({
 	},
 	render : function () {
 		const dropdownChildren = this.state.options.map((child, i)=>{
-			const clone = React.cloneElement(child, { onClick: (e)=>this.handleSelect(e) });
+			const clone = React.cloneElement(child, { onClick: ()=>this.handleSelect(child.props.value, child.props.data) });
 			return clone;
 		});
 		return (

client/components/combobox.less

@@ -1,50 +1,46 @@
 .dropdown-container {
-    position:relative;
-    input {
-        width: 100%;
-    }
-    .dropdown-options {
-        position:absolute;
-        background-color: white;
-        z-index: 100;
-        width: 100%;
-        border: 1px solid gray;
-        overflow-y: auto;
-        max-height: 200px;
+	position : relative;
+	input { width : 100%; }
+	.item i {
+		position : absolute;
+		right    : 10px;
+		color    : black;
+	}
+	.dropdown-options {
+		position         : absolute;
+		z-index          : 100;
+		width            : 100%;
+		max-height       : 200px;
+		overflow-y       : auto;
+		background-color : white;
+		border           : 1px solid gray;
 
-        &::-webkit-scrollbar {
-          width: 14px;
-        }
-        &::-webkit-scrollbar-track {
-          background: #ffffff;
-        }
-        &::-webkit-scrollbar-thumb {
-          background-color: #949494;
-          border-radius: 10px;
-          border: 3px solid #ffffff;
-        }
-
-        .item {
-            position:relative;
-            font-size: 11px;
-            font-family: Open Sans;
-            padding: 5px;
-            cursor: default;
-            margin: 0 3px;
-            //border-bottom: 1px solid darkgray;
-            &:hover {
-                filter: brightness(120%);
-                background-color: rgb(163, 163, 163);
-            }
-            .detail {
-                width:100%;
-                text-align: left;
-                color: rgb(124, 124, 124);
-                font-style:italic;
-                font-size: 9px;
-            }
-        }
-
-    }
+		&::-webkit-scrollbar { width : 14px; }
+		&::-webkit-scrollbar-track { background : #FFFFFF; }
+		&::-webkit-scrollbar-thumb {
+			background-color : #949494;
+			border           : 3px solid #FFFFFF;
+			border-radius    : 10px;
+		}
 
+		.item {
+			position    : relative;
+			padding     : 5px;
+			margin      : 0 3px;
+			font-family : "Open Sans";
+			font-size   : 11px;
+			cursor      : default;
+			&:hover {
+				background-color : rgb(163, 163, 163);
+				filter           : brightness(120%);
+			}
+			.detail {
+				width      : 100%;
+				font-size  : 9px;
+				font-style : italic;
+				color      : rgb(124, 124, 124);
+				text-align : left;
+			}
+		}
+	}
 }

client/homebrew/editor/editor.jsx

@@ -456,6 +456,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

@@ -40,6 +40,7 @@ const MetadataEditor = createClass({
 				theme       : '5ePHB',
 				lang        : 'en'
 			},
+
 			onChange    : ()=>{},
 			reportError : ()=>{}
 		};
@@ -47,7 +48,7 @@ const MetadataEditor = createClass({
 
 	getInitialState : function(){
 		return {
-			showThumbnail : true
+			showThumbnail     : true
 		};
 	},
 
@@ -67,6 +68,11 @@ const MetadataEditor = createClass({
 		const inputRules = validations[name] ?? [];
 		const validationErr = inputRules.map((rule)=>rule(e.target.value)).filter(Boolean);
 
+		const debouncedReportValidity = _.debounce((target, errMessage) => {
+			callIfExists(target, 'setCustomValidity', errMessage);
+			callIfExists(target, 'reportValidity');
+		}, 300); // 300ms debounce delay, adjust as needed
+
 		// if no validation rules, save to props
 		if(validationErr.length === 0){
 			callIfExists(e.target, 'setCustomValidity', '');
@@ -74,14 +80,16 @@ const MetadataEditor = createClass({
 				...this.props.metadata,
 				[name] : e.target.value
 			});
+			return true;
 		} else {
 			// if validation issues, display built-in browser error popup with each error.
 			const errMessage = validationErr.map((err)=>{
 				return `- ${err}`;
 			}).join('\n');
 
-			callIfExists(e.target, 'setCustomValidity', errMessage);
-			callIfExists(e.target, 'reportValidity');
+			
+			debouncedReportValidity(e.target, errMessage);
+			return false;
 		}
 	},
 
@@ -112,6 +120,14 @@ const MetadataEditor = createClass({
 	handleTheme : function(theme){
 		this.props.metadata.renderer = theme.renderer;
 		this.props.metadata.theme    = theme.path;
+
+		this.props.onChange(this.props.metadata, 'theme');
+	},
+
+	handleThemeWritein : function(e) {
+		const shareId = e.target.value.split('/').pop(); //Extract just the ID if a URL was pasted in
+		this.props.metadata.theme = shareId;
+
 		this.props.onChange(this.props.metadata, 'theme');
 	},
 
@@ -200,7 +216,7 @@ const MetadataEditor = createClass({
 				if(theme.path == this.props.metadata.shareId) return;
 				const preview = theme.thumbnail || `/themes/${theme.renderer}/${theme.path}/dropdownPreview.png`;
 				const texture = theme.thumbnail || `/themes/${theme.renderer}/${theme.path}/dropdownTexture.png`;
-				return <div className='item' key={`${renderer}_${theme.name}`} onClick={()=>this.handleTheme(theme)} title={''}>
+				return <div className='item' key={`${renderer}_${theme.name}`} value={`${theme.author ?? renderer} : ${theme.name}`} data={theme} title={''}>
 					{theme.author ?? renderer} : {theme.name}
 					<div className='texture-container'>
 						<img src={texture}/>
@@ -210,26 +226,40 @@ const MetadataEditor = createClass({
 						<img src={preview}/>
 					</div>
 				</div>;
-			});
+			}).filter(Boolean);
 		};
 
 		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}` };
+		const currentThemeDisplay = this.props.themeBundle?.name ? `${this.props.themeBundle.author ?? currentRenderer} : ${this.props.themeBundle.name}` : 'No Theme Selected';
 		let dropdown;
 
 		if(currentRenderer == 'legacy') {
 			dropdown =
-				<Nav.dropdown className='disabled value' trigger='disabled'>
-					<div> {`Themes are not supported in the Legacy Renderer`} <i className='fas fa-caret-down'></i> </div>
-				</Nav.dropdown>;
+				<div className='disabled value' trigger='disabled'>
+					<div> Themes are not supported in the Legacy Renderer </div>
+				</div>;
 		} else {
 			dropdown =
-				<Nav.dropdown className='value' trigger='click'>
-					<div> {currentTheme.author ?? _.upperFirst(currentRenderer)} : {currentTheme.name} <i className='fas fa-caret-down'></i> </div>
-
-					{listThemes(currentRenderer)}
-				</Nav.dropdown>;
+				<div className='value'>
+					<Combobox trigger='click'
+						className='themes-dropdown'
+						default={currentThemeDisplay}
+						placeholder='Select from below, or enter the Share URL or ID of a brew with the meta:theme tag'
+						onSelect={(value)=>this.handleTheme(value)}
+						onEntry={(e)=>{
+							e.target.setCustomValidity('');	//Clear the validation popup while typing
+							if(this.handleFieldChange('theme', e))
+								this.handleThemeWritein(e);
+						}}
+						options={listThemes(currentRenderer)}
+						autoSuggest={{
+							suggestMethod           : 'includes',
+							clearAutoSuggestOnClick : true,
+							filterOn                : ['value', 'title']
+						}}
+					/>
+					<small>Select from the list below (built-in themes and brews you have tagged "meta:theme"), or paste in the Share URL or Share ID of any brew.</small>
+				</div>;
 		}
 
 		return <div className='field themes'>
@@ -244,15 +274,13 @@ const MetadataEditor = createClass({
 			return _.map(langCodes.sort(), (code, index)=>{
 				const localName = new Intl.DisplayNames([code], { type: 'language' });
 				const englishName = new Intl.DisplayNames('en', { type: 'language' });
-				return <div className='item' title={`${englishName.of(code)}`} key={`${index}`} data-value={`${code}`} data-detail={`${localName.of(code)}`}>
-					{`${code}`}
-					<div className='detail'>{`${localName.of(code)}`}</div>
+				return <div className='item' title={englishName.of(code)} key={`${index}`} value={code} detail={localName.of(code)}>
+					{code}
+					<div className='detail'>{localName.of(code)}</div>
 				</div>;
 			});
 		};
 
-		const debouncedHandleFieldChange =  _.debounce(this.handleFieldChange, 500);
-
 		return <div className='field language'>
 			<label>language</label>
 			<div className='value'>
@@ -263,16 +291,15 @@ const MetadataEditor = createClass({
 					onSelect={(value)=>this.handleLanguage(value)}
 					onEntry={(e)=>{
 						e.target.setCustomValidity('');	//Clear the validation popup while typing
-						debouncedHandleFieldChange('lang', e);
+						this.handleFieldChange('lang', e);
 					}}
 					options={listLanguages()}
 					autoSuggest={{
 						suggestMethod           : 'startsWith',
 						clearAutoSuggestOnClick : true,
-						filterOn                : ['data-value', 'data-detail', 'title']
+						filterOn                : ['value', 'detail', 'title']
 					}}
-				>
-				</Combobox>
+				/>
 				<small>Sets the HTML Lang property for your brew. May affect hyphenation or spellcheck.</small>
 			</div>
 
@@ -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>
 

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -1,9 +1,12 @@
 @import 'naturalcrit/styles/colors.less';
 
+.userThemeName {
+	padding-left: 10px;
+	padding-right: 10px;
+}
 
 .metadataEditor {
 	position         : absolute;
-	z-index          : 5;
 	box-sizing       : border-box;
 	width            : 100%;
 	height           : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar.  probably a better way to dynamic get this.
@@ -71,8 +74,7 @@
 			border : 1px solid gray;
 			&:focus { outline : 1px solid #444444; }
 		}
-		&.thumbnail {
-			height      : 1.4em;
+		&.thumbnail, &.themes{
 			label { line-height : 2.0em; }
 			.value {
 				overflow      : hidden;
@@ -88,6 +90,17 @@
 			}
 		}
 
+		&.themes{
+			.value {
+				overflow      : visible;
+				text-overflow : auto;
+			}
+			button {
+				padding-left: 5px;
+				padding-right: 5px;
+			}
+		}
+
 		&.description {
 			flex : 1;
 			textarea.value {
@@ -156,89 +169,73 @@
 	}
 
 	.themes.field {
-		.navDropdownContainer {
+		& .dropdown-container {
 			position         : relative;
 			z-index          : 100;
 			background-color : white;
-			&.disabled {
-				font-style       : italic;
-				color            : dimgray;
-				background-color : darkgray;
-			}
-			& > div:first-child {
-				padding           : 3px 3px;
-				background-color  : inherit;
-				border            : 1px solid gray;
-				i { float	: right; }
-				&:hover {
-					color            : white;
-					background-color : @blue;
+		}
+		& .dropdown-options {
+			overflow-y : visible;
+		}
+		.disabled {
+			font-style       : italic;
+			color            : dimgray;
+			background-color : darkgray;
+		}
+		.item {
+			position          : relative;
+			padding           : 3px 3px;
+			overflow          : visible;
+			background-color  : white;
+			border-top        : 1px solid rgb(118, 118, 118);
+			.preview {
+				position       : absolute;
+				top            : 0;
+				right          : 0;
+				z-index        : 1;
+				display        : flex;
+				flex-direction : column;
+				width          : 200px;
+				overflow       : hidden;
+				color          : black;
+				background     : #CCCCCC;
+				border-radius  : 5px;
+				box-shadow     : 0 0 5px black;
+				opacity        : 0;
+				transition     : opacity 250ms ease;
+				h6 {
+					padding-block  : 0.5em;
+					padding-inline : 1em;
+					font-weight    : 900;
+					border-bottom  : 2px solid hsl(0,0%,40%);
 				}
 			}
-			.navDropdown .item > p {
-				width         : 45%;
-				height        : 1.1em;
-				overflow      : hidden;
-				text-overflow : ellipsis;
-				white-space   : nowrap;
-			}			
-			.navDropdown {
-				position	  : absolute;
-				width		    : 100%;
-				box-shadow	: 0px 5px 10px rgba(0, 0, 0, 0.3);
-				.item {
-					position          : relative;
-					padding           : 3px 3px;
-					overflow          : visible;
-					background-color  : white;
-					border-top        : 1px solid rgb(118, 118, 118);
-					.preview {
-						position       : absolute;
-						top            : 0;
-						right          : 0;
-						z-index        : 1;
-						display        : flex;
-						flex-direction : column;
-						width          : 200px;
-						overflow       : hidden;
-						color          : black;
-						background     : #CCCCCC;
-						border-radius  : 5px;
-						box-shadow     : 0 0 5px black;
-						opacity        : 0;
-						transition     : opacity 250ms ease;
-						h6 {
-							padding-block  : 0.5em;
-							padding-inline : 1em;
-							font-weight    : 900;
-							border-bottom  : 2px solid hsl(0,0%,40%);
-						}
-					}
-					&:hover {
-						color            : white;
-						background-color : @blue;
-					}
-					&:hover > .preview { opacity : 1; }
-					.texture-container {
-						position   : absolute;
-						top        : 0;
-						left       : 0;
-						width      : 100%;
-						height     : 100%;
-						min-height : 100%;
-						overflow   : hidden;
-						> img {
-							position            : absolute;
-							top                 : 0px;
-							right               : 0;
-							width               : 50%;
-							min-height          : 100%;
-							-webkit-mask-image  : linear-gradient(90deg, transparent, black 20%);
-							mask-image          : linear-gradient(90deg, transparent, black 20%);
-						}
-					}
+
+			.texture-container {
+				position   : absolute;
+				top        : 0;
+				left       : 0;
+				width      : 100%;
+				height     : 100%;
+				min-height : 100%;
+				overflow   : hidden;
+				> img {
+					position            : absolute;
+					top                 : 0;
+					right               : 0;
+					width               : 50%;
+					min-height          : 100%;
+					-webkit-mask-image  : linear-gradient(90deg, transparent, black 20%);
+					mask-image          : linear-gradient(90deg, transparent, black 20%);
 				}
 			}
+
+			&:hover {
+				color            : white;
+				background-color : @blue;
+				filter           : unset;
+			}
+			&:hover > .preview { opacity : 1; }
 		}
 	}
 

client/homebrew/editor/metadataEditor/validations.js

@@ -27,6 +27,19 @@ module.exports = {
 		(value)=>{
 			return new RegExp(/^([a-zA-Z]{2,3})(-[a-zA-Z]{4})?(-(?:[0-9]{3}|[a-zA-Z]{2}))?$/).test(value) === false && (value.length > 0) ? 'Invalid language code.' : null;
 		}
+	],
+	theme: [
+		(value) => {
+			const URL = global.config.baseUrl.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'); //Escape any regex characters
+			const shareIDPattern = '[a-zA-Z0-9-_]{12}';
+			const shareURLRegex  = new RegExp(`^${URL}\\/share\\/${shareIDPattern}$`);
+			const shareIDRegex   = new RegExp(`^${shareIDPattern}$`);
+			if (value?.length === 0)       return null;
+			if (shareURLRegex.test(value)) return null;
+			if (shareIDRegex.test(value))  return null;
+
+			return 'Must be a valid Share URL or a 12-character ID.';
+		}	
 	]
 };
 

client/homebrew/navbar/error-navitem.jsx

@@ -116,6 +116,19 @@ const ErrorNavItem = createClass({
 			</Nav.item>;
 		}
 
+		if(HBErrorCode === '10') {
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+				Oops!
+				<div className='errorContainer' onClick={clearError}>
+					Looks like the brew you have selected
+					as a theme is not tagged for use as a
+					theme. Verify that
+					brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
+						{response.body.brewId}</a> has the <span className='lowercase'>meta:theme</span> tag!
+				</div>
+			</Nav.item>;
+		}
+
 		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 			Oops!
 			<div className='errorContainer'>

client/homebrew/pages/editPage/editPage.jsx

@@ -379,7 +379,7 @@ const EditPage = createClass({
 		const title = `${this.props.brew.title} ${systems}`;
 		const text = `Hey guys! I've been working on this homebrew. I'd love your feedback. Check it out.
 
-**[Homebrewery Link](${global.config.publicUrl}/share/${shareLink})**`;
+**[Homebrewery Link](${global.config.baseUrl}/share/${shareLink})**`;
 
 		return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title.toWellFormed())}&text=${encodeURIComponent(text)}`;
 	},
@@ -410,7 +410,7 @@ const EditPage = createClass({
 					<Nav.item color='blue' href={`/share/${shareLink}`}>
 						view
 					</Nav.item>
-					<Nav.item color='blue' onClick={()=>{navigator.clipboard.writeText(`${global.config.publicUrl}/share/${shareLink}`);}}>
+					<Nav.item color='blue' onClick={()=>{navigator.clipboard.writeText(`${global.config.baseUrl}/share/${shareLink}`);}}>
 						copy url
 					</Nav.item>
 					<Nav.item color='blue' href={this.getRedditLink()} newTab={true} rel='noopener noreferrer'>
@@ -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}

client/homebrew/pages/errorPage/errors/errorIndex.js

@@ -3,8 +3,8 @@ const dedent = require('dedent-tabs').default;
 const loginUrl = 'https://www.naturalcrit.com/login';
 
 // Prevent parsing text (e.g. document titles) as markdown
-const escape = (text) => {
-	return text.split('').map(char => `&#${char.charCodeAt(0)};`).join('');
+const escape = (text = '')=>{
+	return text.split('').map((char)=>`&#${char.charCodeAt(0)};`).join('');
 };
 
 //001-050 : Brew errors
@@ -167,6 +167,14 @@ const errorIndex = (props)=>{
 		**Requested access:** ${props.brew.accessType}
 
 		**Brew ID:**  ${props.brew.brewId}`,
+		
+		// Theme Not Valid
+		'10' : dedent`
+		## The selected theme is not tagged as a theme.
+		
+		The brew selected as a theme exists, but has not been marked for use as a theme with the \`theme:meta\` tag.
+		
+		If the selected brew is your document, you may designate it as a theme by adding the \`theme:meta\` tag.`,
 
 		//account page when account is not defined
 		'50' : dedent`

client/homebrew/pages/newPage/newPage.jsx

@@ -233,6 +233,7 @@ const NewPage = createClass({
 					onMetaChange={this.handleMetaChange}
 					renderer={this.state.brew.renderer}
 					userThemes={this.props.userThemes}
+					themeBundle={this.state.themeBundle}
 					snippetBundle={this.state.themeBundle.snippets}
 					onCursorPageChange={this.handleEditorCursorPageChange}
 					onViewPageChange={this.handleEditorViewPageChange}