Merge branch 'master' of https://github.com/naturalcrit/homebrewery into snippet-bar-wrapping

client/admin/admin.jsx

@@ -2,35 +2,44 @@ require('./admin.less');
 const React = require('react');
 const createClass = require('create-react-class');
 
+const BrewUtils = require('./brewUtils/brewUtils.jsx');
+const NotificationUtils = require('./notificationUtils/notificationUtils.jsx');
 
-const BrewCleanup = require('./brewCleanup/brewCleanup.jsx');
-const BrewLookup = require('./brewLookup/brewLookup.jsx');
-const BrewCompress = require ('./brewCompress/brewCompress.jsx');
-const Stats = require('./stats/stats.jsx');
+const tabGroups = ['brew', 'notifications'];
 
 const Admin = createClass({
 	getDefaultProps : function() {
 		return {};
 	},
 
+	getInitialState : function(){
+		return ({
+			currentTab : 'brew'
+		});
+	},
+
+	handleClick : function(newTab){
+		if(this.state.currentTab === newTab) return;
+		this.setState({
+			currentTab : newTab
+		});
+	},
+
 	render : function(){
 		return <div className='admin'>
-
 			<header>
 				<div className='container'>
 					<i className='fas fa-rocket' />
 					homebrewery admin
 				</div>
 			</header>
-			<div className='container'>
-				<Stats />
-				<hr />
-				<BrewLookup />
-				<hr />
-				<BrewCleanup />
-				<hr />
-				<BrewCompress />
-			</div>
+			<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>; })}
+				</nav>
+				{this.state.currentTab==='brew' && <BrewUtils />}
+				{this.state.currentTab==='notifications' && <NotificationUtils />}
+			</main>
 		</div>;
 	}
 });

client/admin/admin.less

@@ -6,39 +6,95 @@
 
 @import 'font-awesome/css/font-awesome.css';
 
-html,body, #reactContainer, .naturalCrit{
-	min-height : 100%;
-}
+html,body, #reactContainer, .naturalCrit { min-height : 100%; }
 
 @sidebarWidth : 250px;
 
-body{
-	background-color : #eee;
-	font-family      : 'Open Sans', sans-serif;
-	color            : #4b5055;
-	font-weight      : 100;
-	text-rendering   : optimizeLegibility;
-	margin           : 0;
+body {
+	height           : 100%;
 	padding          : 0;
-	height : 100%;
+	margin           : 0;
+	font-family      : 'Open Sans', sans-serif;
+	font-weight      : 100;
+	color            : #4B5055;
+	background-color : #EEEEEE;
+	text-rendering   : optimizeLegibility;
 }
 
-.admin{
+:where(.admin) {
 
-	header{
+	header {
+		padding          : 20px 0px;
+		margin-bottom    : 30px;
+		font-size        : 2em;
+		color            : white;
 		background-color : @red;
-		font-size: 2em;
-		padding : 20px 0px;
-		color : white;
-		margin-bottom: 30px;
-		i{
-			margin-right: 30px;
+		i { margin-right : 30px; }
+	}
+
+	hr { margin : 30px 0px; }
+
+	:where(.container) {
+		input {
+			height        : 33px;
+			padding       : 0px 10px;
+			margin-bottom : 20px;
+			font-family   : monospace;
+		}
+
+		button {
+			height         : 37px;
+			vertical-align : middle;
+		}
+
+		dl {
+			@maxItemWidth : 132px;
+			dt {
+				float      : left;
+				width      : @maxItemWidth;
+				clear      : left;
+				text-align : right;
+				&::after { content : ' : '; }
+			}
+			dd {
+				height      : 1em;
+				padding     : 0 0 0.5em 0;
+				margin-left : @maxItemWidth + 6px;
+			}
+		}
+
+		.tabs button {
+			margin-right     : 3px;
+			margin-left      : 3px;
+			color            : black;
+			background-color : #EEEEEE;
+			border           : 1px solid #444444;
+			border-radius    : 5px;
+			&:hover {
+				color            : #EEEEEE;
+				background-color : #444444;
+			}
+			&.active {
+				margin-right     : 2px;
+				margin-left      : 2px;
+				text-decoration  : underline;
+				background-color : #CCCCCC;
+				border           : 2px solid #444444;
+			}
+		}
+
+		.notificationUtils {
+			display         : flex;
+			gap             : 50px;
+			justify-content : space-between;
 		}
 	}
 
-	hr{
-		margin : 30px 0px;
+	.error {
+		background: rgb(178, 54, 54);
+		color:white;
+		font-weight: 900;
+		margin-block:10px;
+		padding:10px;
 	}
-
-
 }

client/admin/brewCleanup/brewCleanup.less

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

client/admin/brewCompress/brewCompress.less

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

client/admin/brewLookup/brewLookup.less

@@ -1,30 +0,0 @@
-
-.brewLookup{
-	input{
-		height        : 33px;
-		margin-bottom : 20px;
-		padding       : 0px 10px;
-		font-family   : monospace;
-	}
-	button{
-		vertical-align : middle;
-		height         : 37px;
-	}
-	dl{
-		@maxItemWidth : 132px;
-		dt{
-			float      : left;
-			clear      : left;
-			width      : @maxItemWidth;
-			text-align : right;
-			&::after {
-				content: " : ";
-			}
-		}
-		dd{
-			height      : 1em;
-			margin-left : @maxItemWidth + 6px;
-			padding     : 0 0 0.5em 0;
-		}
-	}
-}

client/admin/brewUtils/brewCleanup/brewCleanup.less

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

client/admin/brewUtils/brewCompress/brewCompress.less

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

client/admin/brewUtils/brewLookup/brewLookup.jsx

@@ -1,4 +1,3 @@
-require('./brewLookup.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const cx    = require('classnames');

client/admin/brewUtils/brewUtils.jsx

@@ -0,0 +1,24 @@
+const React = require('react');
+const createClass = require('create-react-class');
+
+
+const BrewCleanup = require('./brewCleanup/brewCleanup.jsx');
+const BrewLookup = require('./brewLookup/brewLookup.jsx');
+const BrewCompress = require ('./brewCompress/brewCompress.jsx');
+const Stats = require('./stats/stats.jsx');
+
+const BrewUtils = createClass({
+	render : function(){
+		return <>
+			<Stats />
+			<hr />
+			<BrewLookup />
+			<hr />
+			<BrewCleanup />
+			<hr />
+			<BrewCompress />
+		</>;
+	}
+});
+
+module.exports = BrewUtils;

client/admin/brewUtils/stats/stats.less

@@ -0,0 +1,13 @@
+
+.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.jsx

@@ -0,0 +1,109 @@
+require('./notificationAdd.less');
+const React = require('react');
+const { useState, useRef } = require('react');
+const request = require('superagent');
+
+const NotificationAdd = ()=>{
+	const [notificationResult, setNotificationResult] = useState(null);
+	const [searching, setSearching] = useState(false);
+	const [error, setError] = useState(null);
+
+	const dismissKeyRef = useRef(null);
+	const titleRef = useRef(null);
+	const textRef = useRef(null);
+	const startAtRef = useRef(null);
+	const stopAtRef = useRef(null);
+
+	const saveNotification = async ()=>{
+		const dismissKey = dismissKeyRef.current.value;
+		const title = titleRef.current.value;
+		const text = textRef.current.value;
+		const startAt = new Date(startAtRef.current.value);
+		const stopAt = new Date(stopAtRef.current.value);
+
+		// Basic validation
+		if(!dismissKey || !title || !text || isNaN(startAt.getTime()) || isNaN(stopAt.getTime())) {
+			setError('All fields are required');
+			return;
+		}
+		if(startAt >= stopAt) {
+			setError('End date must be after the start date!');
+			return;
+		}
+
+		const data = {
+			dismissKey,
+			title,
+			text,
+			startAt : startAt?.toISOString() ?? '',
+			stopAt  : stopAt?.toISOString() ?? '',
+		};
+
+		try {
+			setSearching(true);
+			setError(null);
+			const response = await request.post('/admin/notification/add').send(data);
+			console.log(response.body);
+
+			// Reset form fields
+			dismissKeyRef.current.value = '';
+			titleRef.current.value = '';
+			textRef.current.value = '';
+
+			setNotificationResult('Notification successfully created.');
+			setSearching(false);
+		} catch (err) {
+			console.log(err.response.body.message);
+			setError(`Error saving notification: ${err.response.body.message}`);
+			setSearching(false);
+		}
+	};
+
+	return (
+		<div className='notificationAdd'>
+			<h2>Add Notification</h2>
+
+			<label className='field'>
+				Dismiss Key:
+				<input className='fieldInput' type='text' ref={dismissKeyRef} required
+					placeholder='GOOGLEDRIVENOTIF'
+				/>
+			</label>
+
+			<label className='field'>
+				Title:
+				<input className='fieldInput' type='text' ref={titleRef} required
+					placeholder='Stop using Google Drive as image host'
+				/>
+			</label>
+
+			<label className='field'>
+				Text:
+				<textarea className='fieldInput' type='text' ref={textRef} required
+					placeholder='Google Drive is not an image hosting site, you should not use it as such.'
+				>
+				</textarea>
+			</label>
+
+			<label className='field'>
+				Start Date:
+				<input type='date' className='fieldInput' ref={startAtRef} required/>
+			</label>
+
+			<label className='field'>
+				End Date:
+				<input type='date' className='fieldInput' ref={stopAtRef} required/>
+			</label>
+
+			<div className='notificationResult'>{notificationResult}</div>
+
+			<button className='notificationSave' onClick={saveNotification} disabled={searching}>
+				<i className={`fas ${searching ? 'fa-spin fa-spinner' : 'fa-save'}`}/>
+				Save Notification
+			</button>
+			{error && <div className='error'>{error}</div>}
+		</div>
+	);
+};
+
+module.exports = NotificationAdd;

client/admin/notificationUtils/notificationAdd/notificationAdd.less

@@ -0,0 +1,37 @@
+.notificationAdd {
+	position       : relative;
+	display        : flex;
+	flex-direction : column;
+	width          : 500px;
+
+	.field {
+		display               : grid;
+		grid-template-columns : 120px 150px;
+		align-items           : center;
+		justify-items         : stretch;
+		width                 : 100%;
+		margin-bottom         : 20px;
+   
+	
+		input {
+			height        : 33px;
+			padding       : 0px 10px;
+			margin-bottom : unset;
+			font-family   : monospace;
+		}
+	
+		textarea {
+			width      : 50ch;
+			min-height : 7em;
+			max-height : 20em;
+			resize     : vertical;
+			padding	   : 10px;
+		}
+	}
+
+	button {
+	width: 200px;
+		
+		i { margin-right : 10px; }
+	}
+}

client/admin/notificationUtils/notificationLookup/notificationLookup.jsx

@@ -0,0 +1,105 @@
+require('./notificationLookup.less');
+
+const React = require('react');
+const { useState } = require('react');
+const request = require('superagent');
+const Moment = require('moment');
+
+const NotificationDetail = ({ notification, onDelete })=>(
+	<>
+		<dl>
+			<dt>Key</dt>
+			<dd>{notification.dismissKey}</dd>
+
+			<dt>Title</dt>
+			<dd>{notification.title || 'No Title'}</dd>
+
+			<dt>Text</dt>
+			<dd>{notification.text || 'No Text'}</dd>
+
+			<dt>Created</dt>
+			<dd>{Moment(notification.createdAt).format('LLLL')}</dd>
+
+			<dt>Start</dt>
+			<dd>{Moment(notification.startAt).format('LLLL') || 'No Start Time'}</dd>
+
+			<dt>Stop</dt>
+			<dd>{Moment(notification.stopAt).format('LLLL') || 'No End Time'}</dd>
+		</dl>
+		<button onClick={()=>onDelete(notification.dismissKey)}>DELETE</button>
+	</>
+);
+
+const NotificationLookup = ()=>{
+	const [searching, setSearching] = useState(false);
+	const [error, setError] = useState(null);
+	const [notifications, setNotifications] = useState([]);
+
+	const lookupAll = async ()=>{
+		setSearching(true);
+		setError(null);
+
+		try {
+			const res = await request.get('/admin/notification/all');
+			setNotifications(res.body || []);
+		} catch (err) {
+			console.log(err);
+			setError(`Error looking up notifications: ${err.response.body.message}`);
+		} finally {
+			setSearching(false);
+		}
+	};
+
+	const deleteNotification = async (dismissKey)=>{
+		if(!dismissKey) return;
+
+		const confirmed = window.confirm(
+			`Really delete notification ${dismissKey}?`
+		);
+		if(!confirmed) {
+			console.log('Delete notification cancelled');
+			return;
+		}
+		console.log('Delete notification confirm');
+		try {
+			await request.delete(`/admin/notification/delete/${dismissKey}`);
+			lookupAll();
+		} catch (err) {
+			console.log(err);
+			setError(`Error deleting notification: ${err.response.body.message}`);
+		};
+	};
+
+	const renderNotificationsList = ()=>{
+		if(error)
+			return <div className='error'>{error}</div>;
+
+		if(notifications.length === 0)
+			return <div className='noNotification'>No notifications available.</div>;
+
+		return (
+			<ul className='notificationList'>
+				{notifications.map((notification)=>(
+					<li key={notification.dismissKey} >
+						<details>
+							<summary>{notification.title || 'No Title'}</summary>
+							<NotificationDetail notification={notification} onDelete={deleteNotification} />
+						</details>
+					</li>
+				))}
+			</ul>
+		);
+	};
+
+	return (
+		<div className='notificationLookup'>
+			<h2>Check all Notifications</h2>
+			<button onClick={lookupAll}>
+				<i className={`fas ${searching ? 'fa-spin fa-spinner' : 'fa-search'}`} />
+			</button>
+			{renderNotificationsList()}
+		</div>
+	);
+};
+
+module.exports = NotificationLookup;

client/admin/notificationUtils/notificationLookup/notificationLookup.less

@@ -0,0 +1,40 @@
+
+.notificationLookup {
+	width     : 450px;
+	height	  : fit-content;
+
+	.notificationList {
+		display        : flex;
+		flex-direction : column;
+		max-height     : 500px;
+		margin-block   : 20px;
+		overflow       : auto;
+		border         : 1px solid;
+		border-radius  : 5px;
+		
+		li {
+			padding    : 10px;
+			background : #CCCCCC;
+				
+			&:nth-child(even) { background : #DDDDDD; }
+			&:first-child {
+				border-top-left-radius  : 5px;
+				border-top-right-radius : 5px;
+			}
+			&:last-child {
+				border-bottom-right-radius : 5px;
+				border-bottom-left-radius  : 5px;
+			}
+				
+			summary {
+				font-size   : 20px;
+				font-weight : 900;
+			}
+
+			dl dt{
+				font-weight: 900;
+			}
+		}
+	}
+	.noNotification { margin-block : 20px; }
+}

client/admin/notificationUtils/notificationUtils.jsx

@@ -0,0 +1,15 @@
+const React = require('react');
+
+const NotificationLookup = require('./notificationLookup/notificationLookup.jsx');
+const NotificationAdd = require('./notificationAdd/notificationAdd.jsx');
+
+const NotificationUtils = ()=>{
+	return (
+		<section className='notificationUtils'>
+			<NotificationAdd />
+			<NotificationLookup />
+		</section>
+	);
+};
+
+module.exports = NotificationUtils;

client/admin/stats/stats.less

@@ -1,28 +0,0 @@
-
-.Stats{
-	position : relative;
-	.pending{
-		position         : absolute;
-		top              : 0px;
-		left             : 0px;
-		height           : 100%;
-		width            : 100%;
-		background-color : rgba(238,238,238, 0.5);
-	}
-	dl{
-		@maxItemWidth : 132px;
-		dt{
-			float      : left;
-			clear      : left;
-			width      : @maxItemWidth;
-			text-align : right;
-			&::after {
-				content: " : ";
-			}
-		}
-		dd{
-			margin  : 0 0 0 @maxItemWidth + 10px;
-			padding : 0 0 0.5em 0;
-		}
-	}
-}

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -1,12 +1,13 @@
 /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
 require('./brewRenderer.less');
 const React = require('react');
-const { useState, useRef, useEffect } = React;
+const { useState, useRef, useCallback, useMemo } = React;
 const _ = require('lodash');
 
 const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
 const Markdown = require('naturalcrit/markdown.js');
 const ErrorBar = require('./errorBar/errorBar.jsx');
+const ToolBar  = require('./toolBar/toolBar.jsx');
 
 //TODO: move to the brew renderer
 const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx');
@@ -43,27 +44,29 @@ const BrewPage = (props)=>{
 
 
 //v=====--------------------< Brew Renderer Component >-------------------=====v//
-const renderedPages = [];
+let renderedPages = [];
 let rawPages      = [];
 
 const BrewRenderer = (props)=>{
 	props = {
-		text              : '',
-		style             : '',
-		renderer          : 'legacy',
-		theme             : '5ePHB',
-		lang              : '',
-		errors            : [],
-		currentEditorPage : 0,
-		themeBundle       : {},
+		text                       : '',
+		style                      : '',
+		renderer                   : 'legacy',
+		theme                      : '5ePHB',
+		lang                       : '',
+		errors                     : [],
+		currentEditorCursorPageNum : 1,
+		currentEditorViewPageNum   : 1,
+		currentBrewRendererPageNum : 1,
+		themeBundle                : {},
+		onPageChange               : ()=>{},
 		...props
 	};
 
 	const [state, setState] = useState({
-		viewablePageNumber : 0,
-		height             : PAGE_HEIGHT,
-		isMounted          : false,
-		visibility         : 'hidden',
+		isMounted  : false,
+		visibility : 'hidden',
+		zoom       : 100
 	});
 
 	const mainRef  = useRef(null);
@@ -74,49 +77,27 @@ const BrewRenderer = (props)=>{
 		rawPages = props.text.split(/^\\page$/gm);
 	}
 
-	useEffect(()=>{ // Unmounting steps
-		return ()=>{window.removeEventListener('resize', updateSize);};
-	}, []);
+	const updateCurrentPage = useCallback(_.throttle((e)=>{
+		const { scrollTop, clientHeight, scrollHeight } = e.target;
+		const totalScrollableHeight = scrollHeight - clientHeight;
+		const currentPageNumber = Math.max(Math.ceil((scrollTop / totalScrollableHeight) * rawPages.length), 1);
 
-	const updateSize = ()=>{
-		setState((prevState)=>({
-			...prevState,
-			height : mainRef.current.parentNode.clientHeight,
-		}));
-	};
-
-	const handleScroll = (e)=>{
-		const target = e.target;
-		setState((prevState)=>({
-			...prevState,
-			viewablePageNumber : Math.floor(target.scrollTop / target.scrollHeight * rawPages.length)
-		}));
-	};
+		props.onPageChange(currentPageNumber);
+	}, 200), []);
 
 	const isInView = (index)=>{
 		if(!state.isMounted)
 			return false;
 
-		if(index == props.currentEditorPage)	//Already rendered before this step
+		if(index == props.currentEditorCursorPageNum - 1)	//Already rendered before this step
 			return false;
 
-		if(Math.abs(index - state.viewablePageNumber) <= 3)
+		if(Math.abs(index - props.currentBrewRendererPageNum - 1) <= 3)
 			return true;
 
 		return false;
 	};
 
-	const renderPageInfo = ()=>{
-		return <div className='pageInfo' ref={mainRef}>
-			<div>
-				{props.renderer}
-			</div>
-			<div>
-				{state.viewablePageNumber + 1} / {rawPages.length}
-			</div>
-		</div>;
-	};
-
 	const renderDummyPage = (index)=>{
 		return <div className='phb page' id={`p${index + 1}`} key={index}>
 			<i className='fas fa-spinner fa-spin' />
@@ -148,7 +129,7 @@ const BrewRenderer = (props)=>{
 			renderedPages.length = 0;
 
 		// Render currently-edited page first so cross-page effects (variables, links) can propagate out first
-		renderedPages[props.currentEditorPage] = renderPage(rawPages[props.currentEditorPage], props.currentEditorPage);
+		renderedPages[props.currentEditorCursorPageNum - 1] = renderPage(rawPages[props.currentEditorCursorPageNum - 1], props.currentEditorCursorPageNum - 1);
 
 		_.forEach(rawPages, (page, index)=>{
 			if((isInView(index) || !renderedPages[index]) && typeof window !== 'undefined'){
@@ -170,8 +151,6 @@ const BrewRenderer = (props)=>{
 
 	const frameDidMount = ()=>{	//This triggers when iFrame finishes internal "componentDidMount"
 		setTimeout(()=>{	//We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame
-			updateSize();
-			window.addEventListener('resize', updateSize);
 			renderPages(); //Make sure page is renderable before showing
 			setState((prevState)=>({
 				...prevState,
@@ -186,11 +165,28 @@ const BrewRenderer = (props)=>{
 		document.dispatchEvent(new MouseEvent('click'));
 	};
 
+	//Toolbar settings:
+	const handleZoom = (newZoom)=>{
+		setState((prevState)=>({
+			...prevState,
+			zoom : newZoom
+		}));
+	};
+
+	const styleObject = {};
+
+	if(global.config.deployment) {
+		styleObject.backgroundImage = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40px' width='200px'><text x='0' y='15' fill='%23fff7' font-size='20'>${global.config.deployment}</text></svg>")`;
+	}
+
+	const renderedStyle = useMemo(()=> renderStyle(), [props.style?.length, props.themeBundle]);
+	renderedPages = useMemo(() => renderPages(), [props.text?.length]);
+
 	return (
 		<>
 			{/*render dummy page while iFrame is mounting.*/}
 			{!state.isMounted
-				? <div className='brewRenderer' onScroll={handleScroll}>
+				? <div className='brewRenderer' onScroll={updateCurrentPage}>
 					<div className='pages'>
 						{renderDummyPage(1)}
 					</div>
@@ -198,35 +194,37 @@ const BrewRenderer = (props)=>{
 				: null}
 
 			<ErrorBar errors={props.errors} />
-			<div className='popups'>
+			<div className='popups' ref={mainRef}>
 				<RenderWarnings />
 				<NotificationPopup />
 			</div>
 
+			<ToolBar onZoomChange={handleZoom} currentPage={props.currentBrewRendererPageNum}  totalPages={rawPages.length}/>
+
 			{/*render in iFrame so broken code doesn't crash the site.*/}
 			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
 				style={{ width: '100%', height: '100%', visibility: state.visibility }}
 				contentDidMount={frameDidMount}
 				onClick={()=>{emitClick();}}
 			>
-				<div className={'brewRenderer'}
-					onScroll={handleScroll}
+				<div className={`brewRenderer ${global.config.deployment && 'deployment'}`}
+					onScroll={updateCurrentPage}
 					onKeyDown={handleControlKeys}
 					tabIndex={-1}
-					style={{ height: state.height }}>
+					style={ styleObject }>
+
 					{/* Apply CSS from Style tab and render pages from Markdown tab */}
 					{state.isMounted
 						&&
 						<>
-							{renderStyle()}
-							<div className='pages' lang={`${props.lang || 'en'}`}>
-								{renderPages()}
+							{renderedStyle}
+							<div className='pages' lang={`${props.lang || 'en'}`} style={{ zoom: `${state.zoom}%` }}>
+								{renderedPages}
 							</div>
 						</>
 					}
 				</div>
 			</Frame>
-			{renderPageInfo()}
 		</>
 	);
 };

client/homebrew/brewRenderer/brewRenderer.less

@@ -1,8 +1,13 @@
 @import (multiple, less) 'shared/naturalcrit/styles/reset.less';
 
 .brewRenderer {
-	will-change : transform;
-	overflow-y  : scroll;
+	overflow-y    : scroll;
+	will-change   : transform;
+	padding-top   : 30px;
+	height        : 100vh;
+	&.deployment {
+		background-color: darkred;
+	}
 	:where(.pages) {
 		margin : 30px 0px;
 		& > :where(.page) {
@@ -14,66 +19,32 @@
 			box-shadow    : 1px 4px 14px #000000;
 		}
 	}
-
 	&::-webkit-scrollbar {
-		width: 20px;
-		&:horizontal{
-			height: 20px;
-			width:auto;
+		width : 20px;
+		&:horizontal {
+			width  : auto;
+			height : 20px;
 		}
 		&-thumb {
-			background: linear-gradient(90deg, #d3c1af 15px, #00000000 15px);
-			&:horizontal{
-				background: linear-gradient(0deg, #d3c1af 15px, #00000000 15px);
-			}
-		}
-		&-corner {
-			visibility: hidden;
+			background : linear-gradient(90deg, #D3C1AF 15px, #00000000 15px);
+			&:horizontal { background : linear-gradient(0deg, #D3C1AF 15px, #00000000 15px); }
 		}
+		&-corner { visibility : hidden; }
 	}
-	
-
-
-
-
 }
+
 .pane { position : relative; }
-.pageInfo {
-	position         : absolute;
-	right            : 17px;
-	bottom           : 0;
-	z-index          : 1000;
-	font-size        : 10px;
-	font-weight      : 800;
-	color            : white;
-	background-color : #333333;
-	div {
-		display          : inline-block;
-		padding          : 8px 10px;
-		&:not(:last-child) { border-right : 1px solid #666666; }
-	}
-}
-.ppr_msg {
-	position         : absolute;
-	bottom           : 0;
-	left             : 0px;
-	z-index          : 1000;
-	padding          : 8px 10px;
-	font-size        : 10px;
-	font-weight      : 800;
-	color            : white;
-	background-color : #333333;
-}
 
 @media print {
+	.toolBar { display : none; }
 	.brewRenderer {
-		height: 100%;
-		overflow-y: unset;
+		height      : 100%;
+		padding-top : unset;
+		overflow-y  : unset;
 		.pages {
-			margin: 0px;
-			&>.page {
-				box-shadow: unset;
-			}
+			margin : 0px;
+			zoom: 100% !important;
+			& > .page { box-shadow : unset; }
 		}
 	}
 }

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -4,7 +4,7 @@ const _     = require('lodash');
 
 import Dialog from '../../../components/dialog.jsx';
 
-const DISMISS_KEY = 'dismiss_notification12-04-23';
+const DISMISS_KEY = 'dismiss_notification01-10-24';
 const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
 
 const NotificationPopup = ()=>{
@@ -15,11 +15,12 @@ const NotificationPopup = ()=>{
 			<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
 		</div>
 		<ul>
-			<li key='psa'>
-				<em>Don't store IMAGES in Google Drive</em><br />
-				Google Drive is not an image service, and will block images from being used
-				in brews if they get more views than expected. Google has confirmed they won't fix
-				this, so we recommend you look for another image hosting service such as imgur, ImgBB or Google Photos.
+			<li key='Vault'>
+				<em>Search brews with our new page!</em><br />
+				We have been working very hard in making this possible, now you can share your work and look at it in the new <a href='/vault'>Vault</a> page!
+				All PUBLISHED brews will be available to anyone searching there, by title or author, and filtering by renderer.
+
+				More features will be coming.
 			</li>
 
 			<li key='googleDriveFolder'>

client/homebrew/brewRenderer/notificationPopup/notificationPopup.less

@@ -1,9 +1,10 @@
 .popups {
 	position         : fixed;
-	top              : @navbarHeight;
+	top              : calc(@navbarHeight + @viewerToolsHeight);
 	right            : 24px;
 	z-index          : 10001;
 	width            : 450px;
+	margin-top       : 5px;
 }
 
 .notificationPopup {

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -0,0 +1,164 @@
+require('./toolBar.less');
+const React = require('react');
+const { useState, useEffect } = React;
+const _ = require('lodash');
+
+
+const MAX_ZOOM = 300;
+const MIN_ZOOM = 10;
+
+const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
+
+	const [zoomLevel, setZoomLevel] = useState(100);
+	const [pageNum, setPageNum]     = useState(currentPage);
+	const [toolsVisible, setToolsVisible] = useState(true);
+
+	useEffect(()=>{
+		onZoomChange(zoomLevel);
+	}, [zoomLevel]);
+
+	useEffect(()=>{
+		setPageNum(currentPage);
+	}, [currentPage]);
+
+	const handleZoomButton = (zoom)=>{
+		setZoomLevel(_.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
+	};
+
+	const handlePageInput = (pageInput)=>{
+		if(/[0-9]/.test(pageInput))
+			setPageNum(parseInt(pageInput)); // input type is 'text', so `page` comes in as a string, not number.
+	};
+
+	const scrollToPage = (pageNumber)=>{
+		pageNumber = _.clamp(pageNumber, 1, totalPages);
+		const iframe = document.getElementById('BrewRenderer');
+		const brewRenderer = iframe?.contentWindow?.document.querySelector('.brewRenderer');
+		const page = brewRenderer?.querySelector(`#p${pageNumber}`);
+		page?.scrollIntoView({ block: 'start' });
+		setPageNum(pageNumber);
+	};
+
+
+	const calculateChange = (mode)=>{
+		const iframe = document.getElementById('BrewRenderer');
+		const iframeWidth = iframe.getBoundingClientRect().width;
+		const iframeHeight = iframe.getBoundingClientRect().height;
+		const pages = iframe.contentWindow.document.getElementsByClassName('page');
+
+		let desiredZoom = 0;
+
+		if(mode == 'fill'){
+			// find widest page, in case pages are different widths, so that the zoom is adapted to not cut the widest page off screen.
+			const widestPage = _.maxBy([...pages], 'offsetWidth').offsetWidth;
+
+			desiredZoom = (iframeWidth / widestPage) * 100;
+
+		} else if(mode == 'fit'){
+			// find the page with the largest single dim (height or width) so that zoom can be adapted to fit it.
+			const minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth, iframeHeight / page.offsetHeight), Infinity);
+
+			desiredZoom = minDimRatio * 100;
+		}
+
+		const margin = 5;  // extra space so page isn't edge to edge (not truly "to fill")
+
+		const deltaZoom = (desiredZoom - zoomLevel) - margin;
+		return deltaZoom;
+	};
+
+	return (
+		<div className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`}>
+			<button className='toggleButton' title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{setToolsVisible(!toolsVisible);}}><i className='fas fa-glasses' /></button>
+			{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
+			<div className='group'>
+				<button
+					id='fill-width'
+					className='tool'
+					onClick={()=>handleZoomButton(zoomLevel + calculateChange('fill'))}
+				>
+					<i className='fac fit-width' />
+				</button>
+				<button
+					id='zoom-to-fit'
+					className='tool'
+					onClick={()=>handleZoomButton(zoomLevel + calculateChange('fit'))}
+				>
+					<i className='fac zoom-to-fit' />
+				</button>
+				<button
+					id='zoom-out'
+					className='tool'
+					onClick={()=>handleZoomButton(zoomLevel - 20)}
+					disabled={zoomLevel <= MIN_ZOOM}
+				>
+					<i className='fas fa-magnifying-glass-minus' />
+				</button>
+				<input
+					id='zoom-slider'
+					className='range-input tool'
+					type='range'
+					name='zoom'
+					list='zoomLevels'
+					min={MIN_ZOOM}
+					max={MAX_ZOOM}
+					step='1'
+					value={zoomLevel}
+					onChange={(e)=>handleZoomButton(parseInt(e.target.value))}
+				/>
+				<datalist id='zoomLevels'>
+					<option value='100' />
+				</datalist>
+
+				<button
+					id='zoom-in'
+					className='tool'
+					onClick={()=>handleZoomButton(zoomLevel + 20)}
+					disabled={zoomLevel >= MAX_ZOOM}
+				>
+					<i className='fas fa-magnifying-glass-plus' />
+				</button>
+			</div>
+
+			{/*v=====----------------------< Page Controls >---------------------=====v*/}
+			<div className='group'>
+				<button
+					id='previous-page'
+					className='previousPage tool'
+					onClick={()=>scrollToPage(pageNum - 1)}
+					disabled={pageNum <= 1}
+				>
+					<i className='fas fa-arrow-left'></i>
+				</button>
+
+				<div className='tool'>
+					<input
+						id='page-input'
+						className='text-input'
+						type='text'
+						name='page'
+						inputMode='numeric'
+						pattern='[0-9]'
+						value={pageNum}
+						onClick={(e)=>e.target.select()}
+						onChange={(e)=>handlePageInput(e.target.value)}
+						onBlur={()=>scrollToPage(pageNum)}
+						onKeyDown={(e)=>e.key == 'Enter' && scrollToPage(pageNum)}
+					/>
+					<span id='page-count'>/ {totalPages}</span>
+				</div>
+
+				<button
+					id='next-page'
+					className='tool'
+					onClick={()=>scrollToPage(pageNum + 1)}
+					disabled={pageNum >= totalPages}
+				>
+					<i className='fas fa-arrow-right'></i>
+				</button>
+			</div>
+		</div>
+	);
+};
+
+module.exports = ToolBar;

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -0,0 +1,128 @@
+@import (less) './client/icons/customIcons.less';
+
+.toolBar {
+	position         : absolute;
+	z-index          : 1;
+	box-sizing       : border-box;
+	display          : flex;
+	flex-wrap        : wrap;
+	gap              : 8px 30px;
+	align-items      : center;
+	justify-content  : center;
+	width            : 100%;
+	height           : auto;
+	padding          : 2px 0;
+	font-family      : 'Open Sans', sans-serif;
+	color            : #CCCCCC;
+	background-color : #555555;
+	& > *:not(.toggleButton) {
+		opacity: 1;
+		transition: all .2s ease;
+	}
+
+	.group {
+		box-sizing       : border-box;
+		display          : flex;
+		gap              : 0 3px;
+		align-items      : center;
+		justify-content  : center;
+		height           : 28px;
+	}
+
+	.tool {
+		display     : flex;
+		align-items : center;
+	}
+
+	input {
+		position       : relative;
+		height         : 1.5em;
+		padding        : 2px 5px;
+		font-family    : 'Open Sans', sans-serif;
+		color          : #000000;
+		background     : #EEEEEE;
+		border         : 1px solid gray;
+		&:focus { outline : 1px solid #D3D3D3; }
+
+		// `.range-input` if generic to all range inputs, or `#zoom-slider` if only for zoom slider
+		&.range-input {
+			padding      : 2px 0;
+			color        : #D3D3D3;
+			accent-color : #D3D3D3;
+  
+			&::-webkit-slider-thumb, &::-moz-slider-thumb { 
+				width            : 5px;
+				height           : 5px;
+				cursor           : pointer;
+				outline          : none;
+			}
+
+			&:hover::after {
+				position         : absolute;
+				bottom           : -30px;
+				left             : 50%;
+				z-index          : 1;
+				display          : grid;
+				place-items      : center;
+				width            : 4ch;
+				height           : 1.2lh;
+				pointer-events   : none;
+				content          : attr(value);
+				background-color : #555555;
+				border           : 1px solid #A1A1A1;
+				transform        : translate(-50%, 50%);
+			}
+		}
+
+		// `.text-input` if generic to all range inputs, or `#page-input` if only for current page input
+		&#page-input {
+			width        : 4ch;
+			margin-right : 1ch;
+			text-align   : center;
+		}
+	}
+
+	button {
+		box-sizing       : content-box;
+		display          : flex;
+		align-items      : center;
+		justify-content  : center;
+		width            : auto;
+		min-width        : 46px;
+		height           : 100%;
+		padding          : 0 0px;
+		font-weight      : unset;
+		color            : inherit;
+		background-color : unset;
+		&:hover { background-color : #444444; }
+		&:focus { outline : 1px solid #D3D3D3; }
+		&:disabled {
+			color            : #777777;
+			background-color : unset !important;
+		}
+		i {
+			font-size:1.2em;
+		}
+	}
+
+	&.hidden {
+		width: 32px;
+		transition: all .3s ease;
+		flex-wrap:nowrap;
+		overflow: hidden;
+		background-color: unset;
+		opacity: .5;
+		& > *:not(.toggleButton) {
+			opacity: 0;
+			transition: all .2s ease;
+		}
+	}
+}
+
+button.toggleButton {
+	z-index : 5;
+	position:absolute;
+	left: 0;
+	width: 32px;
+	min-width: unset;
+}

client/homebrew/editor/editor.jsx

@@ -1,9 +1,8 @@
-/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
+/*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/
 require('./editor.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
-const cx = require('classnames');
 const dedent = require('dedent-tabs').default;
 const Markdown = require('../../../shared/naturalcrit/markdown.js');
 
@@ -22,6 +21,7 @@ const DEFAULT_STYLE_TEXT = dedent`
 					color: black;
 				}`;
 
+let isJumping = false;
 
 const Editor = createClass({
 	displayName     : 'Editor',
@@ -37,8 +37,15 @@ const Editor = createClass({
 			onMetaChange  : ()=>{},
 			reportError   : ()=>{},
 
+			onCursorPageChange : ()=>{},
+			onViewPageChange   : ()=>{},
+
 			editorTheme : 'default',
-			renderer    : 'legacy'
+			renderer    : 'legacy',
+
+			currentEditorCursorPageNum : 1,
+			currentEditorViewPageNum   : 1,
+			currentBrewRendererPageNum : 1,
 		};
 	},
 	getInitialState : function() {
@@ -56,12 +63,16 @@ const Editor = createClass({
 	isMeta  : function() {return this.state.view == 'meta';},
 
 	componentDidMount : function() {
+
 		this.updateEditorSize();
 		this.highlightCustomMarkdown();
 		window.addEventListener('resize', this.updateEditorSize);
 		document.getElementById('BrewRenderer').addEventListener('keydown', this.handleControlKeys);
 		document.addEventListener('keydown', this.handleControlKeys);
 
+		this.codeEditor.current.codeMirror.on('cursorActivity', (cm)=>{this.updateCurrentCursorPage(cm.getCursor());});
+		this.codeEditor.current.codeMirror.on('scroll', _.throttle(()=>{this.updateCurrentViewPage(this.codeEditor.current.getTopVisibleLine());}, 200));
+
 		const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY);
 		if(editorTheme) {
 			this.setState({
@@ -75,29 +86,37 @@ const Editor = createClass({
 	},
 
 	componentDidUpdate : function(prevProps, prevState, snapshot) {
+
 		this.highlightCustomMarkdown();
-		if(prevProps.moveBrew !== this.props.moveBrew) {
+		if(prevProps.moveBrew !== this.props.moveBrew)
 			this.brewJump();
-		};
-		if(prevProps.moveSource !== this.props.moveSource) {
+
+		if(prevProps.moveSource !== this.props.moveSource)
 			this.sourceJump();
-		};
+
+		if(this.props.liveScroll) {
+			if(prevProps.currentBrewRendererPageNum !== this.props.currentBrewRendererPageNum) {
+				this.sourceJump(this.props.currentBrewRendererPageNum, false);
+			} else if(prevProps.currentEditorViewPageNum !== this.props.currentEditorViewPageNum) {
+				this.brewJump(this.props.currentEditorViewPageNum, false);
+			} else if(prevProps.currentEditorCursorPageNum !== this.props.currentEditorCursorPageNum) {
+				this.brewJump(this.props.currentEditorCursorPageNum, false);
+			}
+		}
 	},
 
 	handleControlKeys : function(e){
-		if(!(e.ctrlKey || e.metaKey)) return;
-		console.log(e);
+		if(!(e.ctrlKey && e.metaKey && e.shiftKey)) return;
 		const LEFTARROW_KEY = 37;
 		const RIGHTARROW_KEY = 39;
-		if (e.shiftKey && (e.keyCode == RIGHTARROW_KEY)) this.brewJump();
-		if (e.shiftKey && (e.keyCode == LEFTARROW_KEY)) this.sourceJump();
-		if ((e.keyCode == LEFTARROW_KEY) || (e.keyCode == RIGHTARROW_KEY)) {
+		if(e.keyCode == RIGHTARROW_KEY) this.brewJump();
+		if(e.keyCode == LEFTARROW_KEY) this.sourceJump();
+		if(e.keyCode == LEFTARROW_KEY || e.keyCode == RIGHTARROW_KEY) {
 			e.stopPropagation();
 			e.preventDefault();
 		}
 	},
 
-
 	updateEditorSize : function() {
 		if(this.codeEditor.current) {
 			let paneHeight = this.editor.current.parentNode.clientHeight;
@@ -106,6 +125,20 @@ const Editor = createClass({
 		}
 	},
 
+	updateCurrentCursorPage : function(cursor) {
+		const lines = this.props.brew.text.split('\n').slice(0, cursor.line + 1);
+		const pageRegex = this.props.brew.renderer == 'V3' ? /^\\page$/ : /\\page/;
+		const currentPage = lines.reduce((count, line)=>count + (pageRegex.test(line) ? 1 : 0), 1);
+		this.props.onCursorPageChange(currentPage);
+	},
+
+	updateCurrentViewPage : function(topScrollLine) {
+		const lines = this.props.brew.text.split('\n').slice(0, topScrollLine + 1);
+		const pageRegex = this.props.brew.renderer == 'V3' ? /^\\page$/ : /\\page/;
+		const currentPage = lines.reduce((count, line)=>count + (pageRegex.test(line) ? 1 : 0), 1);
+		this.props.onViewPageChange(currentPage);
+	},
+
 	handleInject : function(injectText){
 		this.codeEditor.current?.injectText(injectText, false);
 	},
@@ -114,19 +147,10 @@ const Editor = createClass({
 		this.props.setMoveArrows(newView === 'text');
 		this.setState({
 			view : newView
-		}, this.updateEditorSize);	//TODO: not sure if updateeditorsize needed
-	},
-
-	getCurrentPage : function(){
-		const lines = this.props.brew.text.split('\n').slice(0, this.codeEditor.current.getCursorPosition().line + 1);
-		return _.reduce(lines, (r, line)=>{
-			if(
-				(this.props.renderer == 'legacy' && line.indexOf('\\page') !== -1)
-				||
-				(this.props.renderer == 'V3' && line.match(/^\\page$/))
-			) r++;
-			return r;
-		}, 1);
+		}, ()=>{
+			this.codeEditor.current?.codeMirror.focus();
+			this.updateEditorSize();
+		});	//TODO: not sure if updateeditorsize needed
 	},
 
 	highlightCustomMarkdown : function(){
@@ -136,8 +160,18 @@ const Editor = createClass({
 
 			codeMirror.operation(()=>{ // Batch CodeMirror styling
 
+				const foldLines = [];
+
 				//reset custom text styles
-				const customHighlights = codeMirror.getAllMarks().filter((mark)=>!mark.__isFold); //Don't undo code folding
+				const customHighlights = codeMirror.getAllMarks().filter((mark)=>{
+					// Record details of folded sections
+					if(mark.__isFold) {
+						const fold = mark.find();
+						foldLines.push({ from: fold.from?.line, to: fold.to?.line });
+					}
+					return !mark.__isFold;
+				}); //Don't undo code folding
+
 				for (let i=customHighlights.length - 1;i>=0;i--) customHighlights[i].clear();
 
 				let editorPageCount = 2; // start page count from page 2
@@ -149,6 +183,11 @@ const Editor = createClass({
 					codeMirror.removeLineClass(lineNumber, 'text');
 					codeMirror.removeLineClass(lineNumber, 'wrap', 'sourceMoveFlash');
 
+					// Don't process lines inside folded text
+					// If the current lineNumber is inside any folded marks, skip line styling
+					if(foldLines.some((fold)=>lineNumber >= fold.from && lineNumber <= fold.to))
+						return;
+
 					// Styling for \page breaks
 					if((this.props.renderer == 'legacy' && line.includes('\\page')) ||
 				     (this.props.renderer == 'V3'     && line.match(/^\\page$/))) {
@@ -172,7 +211,7 @@ const Editor = createClass({
 
 						// definition lists
 						if(line.includes('::')){
-							if(/^:*$/.test(line) == true){ return };
+							if(/^:*$/.test(line) == true){ return; };
 							const regex = /^([^\n]*?:?\s?)(::[^\n]*)(?:\n|$)/ymd;  // the `d` flag, for match indices, throws an ESLint error.
 							let match;
 							while ((match = regex.exec(line)) != null){
@@ -180,10 +219,10 @@ const Editor = createClass({
 								codeMirror.markText({ line: lineNumber, ch: match.indices[1][0] }, { line: lineNumber, ch: match.indices[1][1] }, { className: 'dt-highlight' });
 								codeMirror.markText({ line: lineNumber, ch: match.indices[2][0] }, { line: lineNumber, ch: match.indices[2][1] }, { className: 'dd-highlight' });
 								const ddIndex = match.indices[2][0];
-								let colons = /::/g;
-								let colonMatches = colons.exec(match[2]);
+								const colons = /::/g;
+								const colonMatches = colons.exec(match[2]);
 								if(colonMatches !== null){
-									codeMirror.markText({ line: lineNumber, ch: colonMatches.index + ddIndex }, { line: lineNumber, ch: colonMatches.index + colonMatches[0].length + ddIndex }, { className: 'dl-colon-highlight'} )
+									codeMirror.markText({ line: lineNumber, ch: colonMatches.index + ddIndex }, { line: lineNumber, ch: colonMatches.index + colonMatches[0].length + ddIndex }, { className: 'dl-colon-highlight' });
 								}
 							}
 						}
@@ -193,12 +232,12 @@ const Editor = createClass({
 							let startIndex = line.indexOf('^');
 							const superRegex = /\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^/gy;
 							const subRegex   = /\^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^\^/gy;
-							
+
 							while (startIndex >= 0) {
 								superRegex.lastIndex = subRegex.lastIndex = startIndex;
 								let isSuper = false;
-								let match = subRegex.exec(line) || superRegex.exec(line);
-								if (match) {
+								const match = subRegex.exec(line) || superRegex.exec(line);
+								if(match) {
 									isSuper = !subRegex.lastIndex;
 									codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: isSuper ? 'superscript' : 'subscript' });
 								}
@@ -248,20 +287,20 @@ const Editor = createClass({
 
 							while (startIndex >= 0) {
 								emojiRegex.lastIndex = startIndex;
-								let match = emojiRegex.exec(line);
-								if (match) {
+								const match = emojiRegex.exec(line);
+								if(match) {
 									let tokens = Markdown.marked.lexer(match[0]);
-									tokens = tokens[0].tokens.filter(t => t.type == 'emoji')
-									if (!tokens.length)
+									tokens = tokens[0].tokens.filter((t)=>t.type == 'emoji');
+									if(!tokens.length)
 										return;
 
-									let startPos = { line: lineNumber, ch: match.index };
-									let endPos   = { line: lineNumber, ch: match.index + match[0].length };
+									const startPos = { line: lineNumber, ch: match.index };
+									const endPos   = { line: lineNumber, ch: match.index + match[0].length };
 
 									// Iterate over conflicting marks and clear them
-									var marks = codeMirror.findMarks(startPos, endPos);
+									const marks = codeMirror.findMarks(startPos, endPos);
 									marks.forEach(function(marker) {
-										marker.clear();
+										if(!marker.__isFold) marker.clear();
 									});
 									codeMirror.markText(startPos, endPos, { className: 'emoji' });
 								}
@@ -274,75 +313,93 @@ const Editor = createClass({
 		}
 	},
 
-	brewJump : function(targetPage=this.getCurrentPage()){
-		if(!window) return;
-		// console.log(`Scroll to: p${targetPage}`);
+	brewJump : function(targetPage=this.props.currentEditorCursorPageNum, smooth=true){
+		if(!window || !this.isText() || isJumping)
+			return;
+
+		// Get current brewRenderer scroll position and calculate target position
 		const brewRenderer = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0];
 		const currentPos = brewRenderer.scrollTop;
 		const targetPos = window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`).getBoundingClientRect().top;
-		const interimPos = targetPos >= 0 ? -30 : 30;
 
-		const bounceDelay = 100;
-		const scrollDelay = 500;
-
-		if(!this.throttleBrewMove) {
-			this.throttleBrewMove = _.throttle((currentPos, interimPos, targetPos)=>{
-				brewRenderer.scrollTo({ top: currentPos + interimPos, behavior: 'smooth' });
-				setTimeout(()=>{
-					brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'smooth', block: 'start' });
-				}, bounceDelay);
-			}, scrollDelay, { leading: true, trailing: false });
+		const checkIfScrollComplete = ()=>{
+			let scrollingTimeout;
+			clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs
+			scrollingTimeout = setTimeout(()=>{
+				isJumping = false;
+				brewRenderer.removeEventListener('scroll', checkIfScrollComplete);
+			}, 150);	// If 150 ms pass without a brewRenderer scroll event, assume scrolling is done
 		};
-		this.throttleBrewMove(currentPos, interimPos, targetPos);
 
-		// const hashPage = (page != 1) ? `p${page}` : '';
-		// window.location.hash = hashPage;
+		isJumping = true;
+		checkIfScrollComplete();
+		brewRenderer.addEventListener('scroll', checkIfScrollComplete);
+
+		if(smooth) {
+			const bouncePos   = targetPos >= 0 ? -30 : 30; //Do a little bounce before scrolling
+			const bounceDelay = 100;
+			const scrollDelay = 500;
+
+			if(!this.throttleBrewMove) {
+				this.throttleBrewMove = _.throttle((currentPos, bouncePos, targetPos)=>{
+					brewRenderer.scrollTo({ top: currentPos + bouncePos, behavior: 'smooth' });
+					setTimeout(()=>{
+						brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'smooth', block: 'start' });
+					}, bounceDelay);
+				}, scrollDelay, { leading: true, trailing: false });
+			};
+			this.throttleBrewMove(currentPos, bouncePos, targetPos);
+		} else {
+			brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'instant', block: 'start' });
+		}
 	},
 
-	sourceJump : function(targetLine=null){
-		if(this.isText()) {
-			if(targetLine == null) {
-				targetLine = 0;
+	sourceJump : function(targetPage=this.props.currentBrewRendererPageNum, smooth=true){
+		if(!this.isText() || isJumping)
+			return;
 
-				const pageCollection = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('page');
-				const brewRendererHeight = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0).getBoundingClientRect().height;
+		const textSplit  = this.props.renderer == 'V3' ? /^\\page$/gm : /\\page/;
+		const textString = this.props.brew.text.split(textSplit).slice(0, targetPage-1).join(textSplit);
+		const targetLine = textString.match('\n') ? textString.split('\n').length - 1 : -1;
 
-				let currentPage = 1;
-				for (const page of pageCollection) {
-					if(page.getBoundingClientRect().bottom > (brewRendererHeight / 2)) {
-						currentPage = parseInt(page.id.slice(1)) || 1;
-						break;
-					}
+		let currentY = this.codeEditor.current.codeMirror.getScrollInfo().top;
+		let targetY  = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
+
+		const checkIfScrollComplete = ()=>{
+			let scrollingTimeout;
+			clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs
+			scrollingTimeout = setTimeout(()=>{
+				isJumping = false;
+				this.codeEditor.current.codeMirror.off('scroll', checkIfScrollComplete);
+			}, 150); // If 150 ms pass without a scroll event, assume scrolling is done
+		};
+
+		isJumping = true;
+		checkIfScrollComplete();
+		this.codeEditor.current.codeMirror.on('scroll', checkIfScrollComplete);
+
+		if(smooth) {
+			//Scroll 1/10 of the way every 10ms until 1px off.
+			const incrementalScroll = setInterval(()=>{
+				currentY += (targetY - currentY) / 10;
+				this.codeEditor.current.codeMirror.scrollTo(null, currentY);
+
+				// Update target: target height is not accurate until within +-10 lines of the visible window
+				if(Math.abs(targetY - currentY > 100))
+					targetY = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
+
+				// End when close enough
+				if(Math.abs(targetY - currentY) < 1) {
+					this.codeEditor.current.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
+					this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
+					this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
+					clearInterval(incrementalScroll);
 				}
-
-				const textSplit = this.props.renderer == 'V3' ? /^\\page$/gm : /\\page/;
-				const textString = this.props.brew.text.split(textSplit).slice(0, currentPage-1).join(textSplit);
-				const textPosition = textString.length;
-				const lineCount = textString.match('\n') ? textString.slice(0, textPosition).split('\n').length : 0;
-
-				targetLine = lineCount - 1; //Scroll to `\page`, which is one line back.
-
-				let currentY = this.codeEditor.current.codeMirror.getScrollInfo().top;
-				let targetY  = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
-
-				//Scroll 1/10 of the way every 10ms until 1px off.
-				const incrementalScroll = setInterval(()=>{
-					currentY += (targetY - currentY) / 10;
-					this.codeEditor.current.codeMirror.scrollTo(null, currentY);
-
-					// Update target: target height is not accurate until within +-10 lines of the visible window
-					if(Math.abs(targetY - currentY > 100))
-						targetY = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
-
-					// End when close enough
-					if(Math.abs(targetY - currentY) < 1) {
-						this.codeEditor.current.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
-						this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
-						this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
-						clearInterval(incrementalScroll);
-					}
-				}, 10);
-			}
+			}, 10);
+		} else {
+			this.codeEditor.current.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
+			this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
+			this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
 		}
 	},
 
@@ -443,7 +500,9 @@ const Editor = createClass({
 					currentEditorTheme={this.state.editorTheme}
 					updateEditorTheme={this.updateEditorTheme}
 					snippetBundle={this.props.snippetBundle}
-					cursorPos={this.codeEditor.current?.getCursorPosition() || {}} />
+					cursorPos={this.codeEditor.current?.getCursorPosition() || {}}
+					updateBrew={this.props.updateBrew}
+				/>
 
 				{this.renderEditor()}
 			</div>

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -304,17 +304,14 @@ const MetadataEditor = createClass({
 						onChange={(e)=>this.handleRenderer('V3', e)} />
 					V3
 				</label>
-
-				<a href='/legacy' target='_blank' rel='noopener noreferrer'>
-					Click here to see the demo page for the old Legacy renderer!
-				</a>
+				<small><a href='/legacy' target='_blank' rel='noopener noreferrer'>Click here to see the demo page for the old Legacy renderer!</a></small>
 			</div>
 		</div>;
 	},
 
 	render : function(){
 		return <div className='metadataEditor'>
-			<h1 className='sectionHead'>Brew</h1>
+			<h1>Properties Editor</h1>
 
 			<div className='field title'>
 				<label>title</label>
@@ -362,9 +359,7 @@ const MetadataEditor = createClass({
 
 			{this.renderRenderOptions()}
 
-			<hr/>
-
-			<h1 className='sectionHead'>Authors</h1>
+			<h2>Authors</h2>
 
 			{this.renderAuthors()}
 
@@ -375,15 +370,13 @@ const MetadataEditor = createClass({
 				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)}/>
 
-			<hr/>
-
-			<h1 className='sectionHead'>Privacy</h1>
+			<h2>Privacy</h2>
 
 			<div className='field publish'>
 				<label>publish</label>
 				<div className='value'>
 					{this.renderPublish()}
-					<small>Published homebrews will be publicly viewable and searchable (eventually...)</small>
+					<small>Published brews are searchable in <a href='/vault'>the Vault</a> and visible on your user page.  Unpublished brews are not indexed in the Vault or visible on your user page, but can still be shared and indexed by search engines.  You can unpublish a brew any time.</small>
 				</div>
 			</div>
 

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -1,5 +1,6 @@
 @import 'naturalcrit/styles/colors.less';
 
+
 .metadataEditor {
 	position         : absolute;
 	z-index          : 5;
@@ -9,12 +10,19 @@
 	padding          : 25px;
 	overflow-y       : auto;
 	background-color : #999999;
+	font-size		 : 13px;
 
-	.sectionHead {
+	h1 {
+		margin: 0 0 40px;
+		font-weight: bold;
+		text-transform: uppercase;
+	}
+	
+	h2 {
 		margin      : 20px 0;
-		font-weight : 1000;
-
-		&:first-of-type { margin-top : 0; }
+		font-weight : bold;
+		border-bottom: 2px solid gray;
+		color: #555;
 	}
 
 	& > div { margin-bottom : 10px; }
@@ -43,15 +51,21 @@
 		min-width     : 200px;
 		& > label {
 			width          : 80px;
-			font-size      : 11px;
 			font-weight    : 800;
 			line-height    : 1.8em;
 			text-transform : uppercase;
+			font-size: .9em;
 		}
 		& > .value {
 			flex           : 1 1 auto;
 			width          : 50px;
 			&:invalid { background : #FFB9B9; }
+			small {
+				display     : block;
+				font-size   : 0.9em;
+				font-style  : italic;
+				line-height : 1.4em;
+			}
 		}
 		input[type='text'], textarea {
 			border : 1px solid gray;
@@ -78,7 +92,6 @@
 			textarea.value {
 				height      : auto;
 				font-family : 'Open Sans', sans-serif;
-				font-size   : 0.8em;
 				resize      : none;
 			}
 		}
@@ -87,12 +100,6 @@
 			z-index   : 200;
 			max-width : 150px;
 		}
-		small {
-			display     : inline-block;
-			font-size   : 0.6em;
-			font-style  : italic;
-			line-height : 1.4em;
-		}
 	}
 
 
@@ -113,18 +120,13 @@
 			display        : inline-flex;
 			align-items    : center;
 			margin-right   : 15px;
-			font-size      : 0.7em;
+			font-size      : 0.9em;
 			font-weight    : 800;
 			white-space    : nowrap;
 			vertical-align : middle;
 			cursor         : pointer;
 			user-select    : none;
 		}
-		a {
-			display     : inline-flex;
-			font-size   : 0.7em;
-			font-weight : 800;
-		}
 		input {
 			margin         : 3px;
 			vertical-align : middle;
@@ -149,12 +151,10 @@
 		}
 	}
 	.authors.field .value {
-		font-size      : 0.8em;
 		line-height    : 1.5em;
 	}
 
 	.themes.field {
-		font-size : 13.33px;
 		.navDropdownContainer {
 			position         : relative;
 			z-index          : 100;
@@ -165,9 +165,9 @@
 				background-color : darkgray;
 			}
 			& > div:first-child {
-				padding           : 6px 3px;
+				padding           : 3px 3px;
 				background-color  : inherit;
-				border            : 2px solid rgb(118,118,118);
+				border            : 1px solid gray;
 				i { float	: right; }
 				&:hover {
 					color            : white;
@@ -240,6 +240,7 @@
 			}
 		}
 	}
+
 	.field .list {
 		display   : flex;
 		flex      : 1 0;
@@ -258,15 +259,15 @@
 			color      : white;
 			text-align : center;
 			cursor     : pointer;
-
+	
 			i {
 				position  : relative;
 				top       : 50%;
 				transform : translateY(-50%);
 			}
-
+	
 			&:not(:last-child) { border-right : 1px solid black; }
-
+	
 			&:last-child { border-radius : 0 0.5em 0.5em 0; }
 		}
 
@@ -277,8 +278,7 @@
 			background-color : #DDDDDD;
 			border-radius    : 0.5em;
 
-			.icon {
-				#groupedIcon; }
+			.icon { #groupedIcon; }
 		}
 
 		.input-group {
@@ -294,17 +294,30 @@
 				height    : 100%;
 			}
 
-			.invalid:focus { background-color : pink; }
+			.input-group {
+				height : ~'calc(.9em + 4px + .6em)';
 
-			.icon {
-				#groupedIcon;
-				top       : -0.54em;
-				right     : 1px;
-				height    : 97%;
-				font-size : 0.8em;
+				input { border-radius : 0.5em 0 0 0.5em; }
 
-				i { font-size : 1.125em; }
+				input:last-child { border-radius : 0.5em; }
+
+				.value {
+					width     : 7.5vw;
+					min-width : 75px;
+					height    : 100%;
+				}
+
+				.invalid:focus { background-color : pink; }
+
+				.icon {
+					#groupedIcon;
+					top       : -0.54em;
+					right     : 1px;
+					height    : 97%;
+
+					i { font-size : 1.125em; }
+				}
 			}
 		}
 	}
-}
+}

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -1,10 +1,12 @@
-/*eslint max-lines: ["warn", {"max": 250, "skipBlankLines": true, "skipComments": true}]*/
+/*eslint max-lines: ["warn", {"max": 350, "skipBlankLines": true, "skipComments": true}]*/
 require('./snippetbar.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
 const cx    = require('classnames');
 
+import { loadHistory } from '../../utils/versionHistory.js';
+
 //Import all themes
 const ThemeSnippets = {};
 ThemeSnippets['Legacy_5ePHB'] = require('themes/Legacy/5ePHB/snippets.js');
@@ -38,7 +40,8 @@ const Snippetbar = createClass({
 			unfoldCode        : ()=>{},
 			updateEditorTheme : ()=>{},
 			cursorPos         : {},
-			snippetBundle     : []
+			snippetBundle     : [],
+			updateBrew        : ()=>{}
 		};
 	},
 
@@ -46,31 +49,54 @@ const Snippetbar = createClass({
 		return {
 			renderer      : this.props.renderer,
 			themeSelector : false,
-			snippets      : []
+			snippets      : [],
+			showHistory   : false,
+			historyExists : false,
+			historyItems  : []
 		};
 	},
 
-	componentDidMount : async function() {
+	componentDidMount : async function(prevState) {
 		const snippets = this.compileSnippets();
 		this.setState({
 			snippets : snippets
 		});
 	},
 
-	componentDidUpdate : async function(prevProps) {
+	componentDidUpdate : async function(prevProps, prevState) {
 		if(prevProps.renderer != this.props.renderer || prevProps.theme != this.props.theme || prevProps.snippetBundle != this.props.snippetBundle) {
-			const snippets = this.compileSnippets();
 			this.setState({
-				snippets : snippets
+				snippets : this.compileSnippets()
+			});
+		};
+
+		// Update history list if it has changed
+		const checkHistoryItems = await loadHistory(this.props.brew);
+
+		// If all items have the noData property, there is no saved data
+		const checkHistoryExists = !checkHistoryItems.every((historyItem)=>{
+			return historyItem?.noData;
+		});
+		if(prevState.historyExists != checkHistoryExists){
+			this.setState({
+				historyExists : checkHistoryExists
+			});
+		}
+
+		// If any history items have changed, update the list
+		if(checkHistoryExists && checkHistoryItems.some((historyItem, index)=>{
+			return index >= prevState.historyItems.length || !_.isEqual(historyItem, prevState.historyItems[index]);
+		})){
+			this.setState({
+				historyItems : checkHistoryItems
 			});
 		}
 	},
 
-
 	mergeCustomizer : function(oldValue, newValue, key) {
 		if(key == 'snippets') {
 			const result = _.reverse(_.unionBy(_.reverse(newValue), _.reverse(oldValue), 'name')); // Join snippets together, with preference for the child theme over the parent theme
-			return _.filter(result, 'gen'); //Only keep snippets with a 'gen' property.
+			return result.filter((snip)=>snip.gen || snip.subsnippets);
 		}
 	},
 
@@ -141,6 +167,41 @@ const Snippetbar = createClass({
 		</div>
 	},
 
+	replaceContent : function(item){
+		return this.props.updateBrew(item);
+	},
+
+	toggleHistoryMenu : function(){
+		this.setState({
+			showHistory : !this.state.showHistory
+		});
+	},
+
+	renderHistoryItems : function() {
+		if(!this.state.historyExists) return;
+
+		return <div className='dropdown'>
+			{_.map(this.state.historyItems, (item, index)=>{
+				if(item.noData || !item.savedAt) return;
+
+				const saveTime = new Date(item.savedAt);
+				const diffMs = new Date() - saveTime;
+				const diffSecs = Math.floor(diffMs / 1000);
+
+				let diffString = `about ${diffSecs} seconds ago`;
+
+				if(diffSecs > 60) diffString = `about ${Math.floor(diffSecs / 60)} minutes ago`;
+				if(diffSecs > (60 * 60)) diffString = `about ${Math.floor(diffSecs / (60 * 60))} hours ago`;
+				if(diffSecs > (24 * 60 * 60)) diffString = `about ${Math.floor(diffSecs / (24 * 60 * 60))} days ago`;
+				if(diffSecs > (7 * 24 * 60 * 60)) diffString = `about ${Math.floor(diffSecs / (7 * 24 * 60 * 60))} weeks ago`;
+
+				return <div className='snippet' key={index} onClick={()=>{this.replaceContent(item);}} >
+					<i className={`fas fa-${index+1}`} />
+					<span className='name' title={saveTime.toISOString()}>v{item.version} : {diffString}</span>
+				</div>;
+			})}
+		</div>;
+	},
 
 	renderEditorButtons : function(){
 		if(!this.props.showEditButtons) return;
@@ -162,6 +223,28 @@ const Snippetbar = createClass({
 		}
 
 		return <div className='editors'>
+			<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
+				onClick={this.toggleHistoryMenu} >
+				<i className='fas fa-clock-rotate-left' />
+				{ this.state.showHistory && this.renderHistoryItems() }
+			</div>
+			<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
+				onClick={this.props.undo} >
+				<i className='fas fa-undo' />
+			</div>
+			<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`}
+				onClick={this.props.redo} >
+				<i className='fas fa-redo' />
+			</div>
+			<div className='divider'></div>
+			{foldButtons}
+			<div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`}
+				onClick={this.toggleThemeSelector} >
+				<i className='fas fa-palette' />
+				{this.state.themeSelector && this.renderThemeSelector()}
+			</div>
+
+			<div className='divider'></div>
 			<div className={cx('text', { selected: this.props.view === 'text' })}
 				 onClick={()=>this.props.onViewChange('text')}>
 				<i className='fa fa-beer' />
@@ -230,8 +313,9 @@ const SnippetGroup = createClass({
 		return _.map(snippets, (snippet)=>{
 			return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
 				<i className={snippet.icon} />
-				<span className='name'title={snippet.name}>{snippet.name}</span>
+				<span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span>
 				{snippet.experimental && <span className='beta'>beta</span>}
+				{snippet.disabled     && <span className='beta' title="temporarily disabled due to large slowdown; under re-design">disabled</span>}
 				{snippet.subsnippets && <>
 					<i className='fas fa-caret-right'></i>
 					<div className='dropdown side'>

client/homebrew/editor/snippetbar/snippetbar.less

@@ -59,6 +59,21 @@
 				font-size : 0.75em;
 				color     : inherit;
 			}
+			&.history {
+				.tooltipLeft('History');
+				font-size : 0.75em;
+				color     : grey;
+				position  : relative;
+				&.active {
+					color : inherit;
+				}
+				&>.dropdown{
+					right         : -1px;
+					&>.snippet{
+						padding-right : 10px;
+					}
+				}
+			}
 			&.editorTheme {
 				.tooltipLeft('Editor Themes');
 				font-size : 0.75em;
@@ -170,6 +185,7 @@
 					}
 				}
 				.name { margin-right : auto; }
+				.disabled { text-decoration: line-through; }
 				.beta {
 					align-self    : center;
 					padding       : 4px 6px;

client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx

@@ -128,7 +128,7 @@ const StringArrayEditor = createClass({
 
 		return <div className='field'>
 			<label>{this.props.label}</label>
-			<div style={{ flex: '1 0' }}>
+			<div style={{ flex: '1 0' }} className='value'>
 				<div className='list'>
 					{valueElements}
 					<div className='input-group'>

client/homebrew/homebrew.jsx

@@ -10,6 +10,7 @@ const UserPage = require('./pages/userPage/userPage.jsx');
 const SharePage = require('./pages/sharePage/sharePage.jsx');
 const NewPage = require('./pages/newPage/newPage.jsx');
 const ErrorPage = require('./pages/errorPage/errorPage.jsx');
+const VaultPage = require('./pages/vaultPage/vaultPage.jsx');
 const AccountPage = require('./pages/accountPage/accountPage.jsx');
 
 const WithRoute = (props)=>{
@@ -71,6 +72,7 @@ const Homebrew = createClass({
 						<Route path='/new/:id' element={<WithRoute el={NewPage} brew={this.props.brew} userThemes={this.props.userThemes}/>} />
 						<Route path='/new' element={<WithRoute el={NewPage} userThemes={this.props.userThemes}/> } />
 						<Route path='/user/:username' element={<WithRoute el={UserPage} brews={this.props.brews} />} />
+						<Route path='/vault' element={<WithRoute el={VaultPage}/>}/>
 						<Route path='/changelog' element={<WithRoute el={SharePage} brew={this.props.brew} disableMeta={true} />} />
 						<Route path='/faq' element={<WithRoute el={SharePage} brew={this.props.brew} disableMeta={true} />} />
 						<Route path='/migrate' element={<WithRoute el={SharePage} brew={this.props.brew} disableMeta={true} />} />

client/homebrew/navbar/editTitle.navitem.jsx

@@ -1,34 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const cx = require('classnames');
-const Nav = require('naturalcrit/nav/nav.jsx');
-
-const MAX_TITLE_LENGTH = 50;
-
-
-const EditTitle = createClass({
-	displayName     : 'EditTitleNavItem',
-	getDefaultProps : function() {
-		return {
-			title    : '',
-			onChange : function(){}
-		};
-	},
-
-	handleChange : function(e){
-		if(e.target.value.length > MAX_TITLE_LENGTH) return;
-		this.props.onChange(e.target.value);
-	},
-	render : function(){
-		return <Nav.item className='editTitle'>
-			<input placeholder='Brew Title' type='text' value={this.props.title} onChange={this.handleChange} />
-
-			<div className={cx('charCount', { 'max': this.props.title.length >= MAX_TITLE_LENGTH })}>
-				{this.props.title.length}/{MAX_TITLE_LENGTH}
-			</div>
-		</Nav.item>;
-	},
-
-});
-
-module.exports = EditTitle;

client/homebrew/navbar/error-navitem.jsx

@@ -111,7 +111,7 @@ const ErrorNavItem = createClass({
 					Looks like there was a problem retreiving
 					the theme, or a theme that it inherits,
 					for this brew. Verify that brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
-					{response.body.brewId}</a> still exists!
+						{response.body.brewId}</a> still exists!
 				</div>
 			</Nav.item>;
 		}

client/homebrew/navbar/navbar.less

@@ -1,6 +1,7 @@
 @import 'naturalcrit/styles/colors.less';
 
 @navbarHeight : 28px;
+@viewerToolsHeight : 32px;
 
 @keyframes pinkColoring {
 	0% { color : pink; }
@@ -34,6 +35,11 @@
 		display     : flex;
 		align-items : center;
 		&:last-child .navItem { border-left : 1px solid #666666; }
+
+		&:has(.brewTitle) {
+			flex-grow : 1;
+			min-width : 300px; 
+		}
 	}
 	// "NaturalCrit" logo
 	.navLogo {
@@ -68,6 +74,10 @@
 	.navItem {
 		#backgroundColorsHover;
 		.animate(background-color);
+		display          : flex;
+		align-items      : center;
+		justify-content  : center;
+		height           : 100%;
 		padding          : 8px 12px;
 		font-size        : 10px;
 		font-weight      : 800;
@@ -93,39 +103,20 @@
 				animation-duration : 2s;
 			}
 		}
-		&.editTitle {  // this is not needed at all currently - you used to be able to edit the title via the navbar.
-			padding : 2px 12px;
-			input {
-				width            : 250px;
-				padding          : 2px;
-				margin           : 0;
-				font-family      : 'Open Sans', sans-serif;
-				font-size        : 12px;
-				font-weight      : 800;
-				color            : white;
-				text-align       : center;
-				background-color : transparent;
-				border           : 1px solid @blue;
-				outline          : none;
-			}
-			.charCount {
-				display        : inline-block;
-				margin-left    : 8px;
-				color          : #666666;
-				text-align     : right;
-				vertical-align : bottom;
-				&.max { color : @red; }
-			}
-		}
 		&.brewTitle {
-			flex-grow        : 1;
+			display          : block;
+			width            : 100%;
+			overflow         : hidden;
 			font-size        : 12px;
 			font-weight      : 800;
 			color            : white;
 			text-align       : center;
-			text-transform   : initial;
-			background-color : transparent;
+			text-overflow    : ellipsis;
+			text-transform   : initial;	
+			white-space      : nowrap;
+			background-color : transparent;		
 		}
+
 		// "The Homebrewery" logo
 		&.homebrewLogo {
 			.animate(color);
@@ -239,23 +230,25 @@
 	}
 	.navDropdownContainer {
 		position : relative;
+		height   : 100%;
+
 		.navDropdown {
-			position: absolute;
-			top: 28px;
-			right: 0px;
-			z-index: 10000;
-			width: max-content;
-			min-width:100%;
-			max-height: calc(100vh - 28px);
-			overflow: hidden auto;
-			display: flex;
-			flex-direction: column;
-			align-items: flex-end;
+			position       : absolute;
+			//top: 28px;
+			right          : 0px;
+			z-index        : 10000;
+			display        : flex;
+			flex-direction : column;
+			align-items    : flex-end;
+			width          : max-content;
+			min-width      : 100%;
+			max-height     : calc(100vh - 28px);
+			overflow       : hidden auto;
 			.navItem {
 				position           : relative;
 				display            : flex;
-				justify-content    : space-between;
 				align-items        : center;
+				justify-content    : space-between;
 				width              : 100%;
 				border             : 1px solid #888888;
 				border-bottom      : 0;
@@ -277,10 +270,10 @@
 				overflow         : hidden auto;
 				color            : white;
 				text-decoration  : none;
-				background-color : #333333;
-				border-top       : 1px solid #888888;
 				scrollbar-color  : #666666 #333333;
 				scrollbar-width  : thin;
+				background-color : #333333;
+				border-top       : 1px solid #888888;
 				.clear {
 					position         : absolute;
 					top              : 50%;

client/homebrew/navbar/recent.navitem.jsx

@@ -36,7 +36,7 @@ const RecentItems = createClass({
 		//== Add current brew to appropriate recent items list (depending on storageKey) ==//
 		if(this.props.storageKey == 'edit'){
 			let editId = this.props.brew.editId;
-			if(this.props.brew.googleId){
+			if(this.props.brew.googleId && !this.props.brew.stubbed){
 				editId = `${this.props.brew.googleId}${this.props.brew.editId}`;
 			}
 			edited = _.filter(edited, (brew)=>{
@@ -51,7 +51,7 @@ const RecentItems = createClass({
 		}
 		if(this.props.storageKey == 'view'){
 			let shareId = this.props.brew.shareId;
-			if(this.props.brew.googleId){
+			if(this.props.brew.googleId && !this.props.brew.stubbed){
 				shareId = `${this.props.brew.googleId}${this.props.brew.shareId}`;
 			}
 			viewed = _.filter(viewed, (brew)=>{
@@ -83,7 +83,7 @@ const RecentItems = createClass({
 	 		let edited = JSON.parse(localStorage.getItem(EDIT_KEY) || '[]');
 			if(this.props.storageKey == 'edit') {
 				let prevEditId = prevProps.brew.editId;
-				if(prevProps.brew.googleId){
+				if(prevProps.brew.googleId && !this.props.brew.stubbed){
 					prevEditId = `${prevProps.brew.googleId}${prevProps.brew.editId}`;
 				}
 
@@ -91,7 +91,7 @@ const RecentItems = createClass({
 					return brew.id !== prevEditId;
 				});
 				let editId = this.props.brew.editId;
-				if(this.props.brew.googleId){
+				if(this.props.brew.googleId && !this.props.brew.stubbed){
 					editId = `${this.props.brew.googleId}${this.props.brew.editId}`;
 				}
 				edited.unshift({

client/homebrew/navbar/reddit.navitem.jsx

@@ -1,44 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const Nav = require('naturalcrit/nav/nav.jsx');
-
-const MAIN_URL = 'https://www.reddit.com/r/UnearthedArcana/submit?selftext=true';
-
-
-const RedditShare = createClass({
-	displayName     : 'RedditShareNavItem',
-	getDefaultProps : function() {
-		return {
-			brew : {
-				title    : '',
-				sharedId : '',
-				text     : ''
-			}
-		};
-	},
-
-	getText : function(){
-
-	},
-
-
-	handleClick : function(){
-		const url = [
-			MAIN_URL,
-			`title=${encodeURIComponent(this.props.brew.title ? this.props.brew.title : 'Check out my brew!')}`,
-			`text=${encodeURIComponent(this.props.brew.text)}`
-		].join('&');
-
-		window.open(url, '_blank');
-	},
-
-
-	render : function(){
-		return <Nav.item icon='fa-reddit-alien' color='red' onClick={this.handleClick}>
-			share on reddit
-		</Nav.item>;
-	},
-
-});
-
-module.exports = RedditShare;

client/homebrew/navbar/vault.navitem.jsx

@@ -0,0 +1,17 @@
+const React = require('react');
+
+const Nav = require('naturalcrit/nav/nav.jsx');
+
+module.exports = function (props) {
+	return (
+		<Nav.item
+			color='purple'
+			icon='fas fa-dungeon'
+			href='/vault'
+			newTab={false}
+			rel='noopener noreferrer'
+		>
+			Vault
+		</Nav.item>
+	);
+};

client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx

@@ -19,7 +19,8 @@ const BrewItem = createClass({
 				stubbed     : true
 			},
 			updateListFilter : ()=>{},
-			reportError      : ()=>{}
+			reportError      : ()=>{},
+			renderStorage    : true
 		};
 	},
 
@@ -95,6 +96,7 @@ const BrewItem = createClass({
 	},
 
 	renderStorageIcon : function(){
+		if(!this.props.renderStorage) return;
 		if(this.props.brew.googleId) {
 			return <span title={this.props.brew.webViewLink ? 'Your Google Drive Storage': 'Another User\'s Google Drive Storage'}>
 				<a href={this.props.brew.webViewLink} target='_blank'>
@@ -142,10 +144,14 @@ const BrewItem = createClass({
 				}
 				<span title={`Authors:\n${brew.authors?.join('\n')}`}>
 					<i className='fas fa-user'/> {brew.authors?.map((author, index)=>(
-  					<>
-    					<a key={index} href={`/user/${author}`}>{author}</a>
-    					{index < brew.authors.length - 1 && ', '}
-  					</>))}
+						<React.Fragment key={index}>
+							{author === 'hidden'
+								? <span title="Username contained an email address; hidden to protect user's privacy">{author}</span>
+								: <a href={`/user/${author}`}>{author}</a>
+							}
+							{index < brew.authors.length - 1 && ', '}
+						</React.Fragment>
+					))}
 				</span>
 				<br />
 				<span title={`Last viewed: ${moment(brew.lastViewed).local().format(dateFormatString)}`}>

client/homebrew/pages/editPage/editPage.jsx

@@ -1,8 +1,9 @@
 /* eslint-disable max-lines */
 require('./editPage.less');
 const React = require('react');
-const createClass = require('create-react-class');
 const _ = require('lodash');
+const createClass = require('create-react-class');
+
 const request = require('../../utils/request-middleware.js');
 const { Meta } = require('vitreum/headtags');
 
@@ -27,9 +28,11 @@ const Markdown = require('naturalcrit/markdown.js');
 const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
 const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
 
+import { updateHistory, versionHistoryGarbageCollection } from '../../utils/versionHistory.js';
+
 const googleDriveIcon = require('../../googleDrive.svg');
 
-const SAVE_TIMEOUT = 3000;
+const SAVE_TIMEOUT = 10000;
 
 const EditPage = createClass({
 	displayName     : 'EditPage',
@@ -41,22 +44,24 @@ const EditPage = createClass({
 
 	getInitialState : function() {
 		return {
-			brew                   : this.props.brew,
-			isSaving               : false,
-			isPending              : false,
-			alertTrashedGoogleBrew : this.props.brew.trashed,
-			alertLoginToTransfer   : false,
-			saveGoogle             : this.props.brew.googleId ? true : false,
-			confirmGoogleTransfer  : false,
-			error                  : null,
-			htmlErrors             : Markdown.validate(this.props.brew.text),
-			url                    : '',
-			autoSave               : true,
-			autoSaveWarning        : false,
-			unsavedTime            : new Date(),
-			currentEditorPage      : 0,
-			displayLockMessage     : this.props.brew.lock || false,
-			themeBundle            : {}
+			brew                       : this.props.brew,
+			isSaving                   : false,
+			isPending                  : false,
+			alertTrashedGoogleBrew     : this.props.brew.trashed,
+			alertLoginToTransfer       : false,
+			saveGoogle                 : this.props.brew.googleId ? true : false,
+			confirmGoogleTransfer      : false,
+			error                      : null,
+			htmlErrors                 : Markdown.validate(this.props.brew.text),
+			url                        : '',
+			autoSave                   : true,
+			autoSaveWarning            : false,
+			unsavedTime                : new Date(),
+			currentEditorViewPageNum   : 1,
+			currentEditorCursorPageNum : 1,
+			currentBrewRendererPageNum : 1,
+			displayLockMessage         : this.props.brew.lock || false,
+			themeBundle                : {}
 		};
 	},
 
@@ -113,16 +118,27 @@ const EditPage = createClass({
 		this.editor.current.update();
 	},
 
+	handleEditorViewPageChange : function(pageNumber){
+		this.setState({ currentEditorViewPageNum: pageNumber });
+	},
+
+	handleEditorCursorPageChange : function(pageNumber){
+		this.setState({ currentEditorCursorPageNum: pageNumber });
+	},
+
+	handleBrewRendererPageChange : function(pageNumber){
+		this.setState({ currentBrewRendererPageNum: pageNumber });
+	},
+
 	handleTextChange : function(text){
 		//If there are errors, run the validator on every change to give quick feedback
 		let htmlErrors = this.state.htmlErrors;
 		if(htmlErrors.length) htmlErrors = Markdown.validate(text);
 
 		this.setState((prevState)=>({
-			brew              : { ...prevState.brew, text: text },
-			isPending         : true,
-			htmlErrors        : htmlErrors,
-			currentEditorPage : this.editor.current.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
+			brew       : { ...prevState.brew, text: text },
+			isPending  : true,
+			htmlErrors : htmlErrors,
 		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},
 
@@ -150,6 +166,16 @@ const EditPage = createClass({
 		return !_.isEqual(this.state.brew, this.savedBrew);
 	},
 
+	updateBrew : function(newData){
+		this.setState((prevState)=>({
+			brew : {
+				...prevState.brew,
+				style : newData.style,
+				text  : newData.text
+			}
+		}));
+	},
+
 	trySave : function(immediate=false){
 		if(!this.debounceSave) this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
 		if(this.hasChanges()){
@@ -202,6 +228,9 @@ const EditPage = createClass({
 			htmlErrors : Markdown.validate(prevState.brew.text)
 		}));
 
+		await updateHistory(this.state.brew);
+		await versionHistoryGarbageCollection();
+
 		const transfer = this.state.saveGoogle == _.isNil(this.state.brew.googleId);
 
 		const brew = this.state.brew;
@@ -413,6 +442,12 @@ const EditPage = createClass({
 						renderer={this.state.brew.renderer}
 						userThemes={this.props.userThemes}
 						snippetBundle={this.state.themeBundle.snippets}
+						updateBrew={this.updateBrew}
+						onCursorPageChange={this.handleEditorCursorPageChange}
+						onViewPageChange={this.handleEditorViewPageChange}
+						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
 					/>
 					<BrewRenderer
 						text={this.state.brew.text}
@@ -422,7 +457,10 @@ const EditPage = createClass({
 						themeBundle={this.state.themeBundle}
 						errors={this.state.htmlErrors}
 						lang={this.state.brew.lang}
-						currentEditorPage={this.state.currentEditorPage}
+						onPageChange={this.handleBrewRendererPageChange}
+						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
 						allowPrint={true}
 					/>
 				</SplitPane>

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

@@ -2,6 +2,9 @@ const dedent = require('dedent-tabs').default;
 
 const loginUrl = 'https://www.naturalcrit.com/login';
 
+//001-050 : Brew errors
+//050-100 : Other pages errors
+
 const errorIndex = (props)=>{
 	return {
 		// Default catch all
@@ -149,8 +152,16 @@ const errorIndex = (props)=>{
 
 		**Brew ID:**  ${props.brew.brewId}`,
 
+		//account page when account is not defined
+		'50' : dedent`
+		## You are not signed in
+		
+		You are trying to access the account page, but are not signed in to an account.
+		
+		Please login or signup at our [login page](https://www.naturalcrit.com/login?redirect=https://homebrewery.naturalcrit.com/account).`,
+
 		// Brew locked by Administrators error
-		'100' : dedent`
+		'51' : dedent`
 		## This brew has been locked.
 		
 		Only an author may request that this lock is removed.
@@ -160,7 +171,17 @@ const errorIndex = (props)=>{
 		**Brew ID:**  ${props.brew.brewId}
 		
 		**Brew Title:** ${props.brew.brewTitle}`,
+
+		// ####### Admin page error ####### 
+		'52': dedent`
+		## Access Denied
+		You need to provide correct administrator credentials to access this page.`,
+
+		'90' : dedent` An unexpected error occurred while looking for these brews.  
+            Try again in a few minutes.`,
+
+		'91' : dedent` An unexpected error occurred while trying to get the total of brews.`,
 	};
 };
 
-module.exports = errorIndex;
+module.exports = errorIndex;

client/homebrew/pages/homePage/homePage.jsx

@@ -1,7 +1,6 @@
 require('./homePage.less');
 const React = require('react');
 const createClass = require('create-react-class');
-const _ = require('lodash');
 const cx = require('classnames');
 const request = require('../../utils/request-middleware.js');
 const { Meta } = require('vitreum/headtags');
@@ -10,12 +9,12 @@ const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const NewBrewItem = require('../../navbar/newbrew.navitem.jsx');
 const HelpNavItem = require('../../navbar/help.navitem.jsx');
+const VaultNavItem = require('../../navbar/vault.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const AccountNavItem = require('../../navbar/account.navitem.jsx');
 const ErrorNavItem = require('../../navbar/error-navitem.jsx');
 const { fetchThemeBundle } = require('../../../../shared/helpers.js');
 
-
 const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
@@ -32,11 +31,13 @@ const HomePage = createClass({
 	},
 	getInitialState : function() {
 		return {
-			brew              : this.props.brew,
-			welcomeText       : this.props.brew.text,
-			error             : undefined,
-			currentEditorPage : 0,
-			themeBundle       : {}
+			brew                       : this.props.brew,
+			welcomeText                : this.props.brew.text,
+			error                      : undefined,
+			currentEditorViewPageNum   : 1,
+			currentEditorCursorPageNum : 1,
+			currentBrewRendererPageNum : 1,
+			themeBundle                : {}
 		};
 	},
 
@@ -61,10 +62,22 @@ const HomePage = createClass({
 	handleSplitMove : function(){
 		this.editor.current.update();
 	},
+
+	handleEditorViewPageChange : function(pageNumber){
+		this.setState({ currentEditorViewPageNum: pageNumber });
+	},
+
+	handleEditorCursorPageChange : function(pageNumber){
+		this.setState({ currentEditorCursorPageNum: pageNumber });
+	},
+
+	handleBrewRendererPageChange : function(pageNumber){
+		this.setState({ currentBrewRendererPageNum: pageNumber });
+	},
+
 	handleTextChange : function(text){
 		this.setState((prevState)=>({
-			brew              : { ...prevState.brew, text: text },
-			currentEditorPage : this.editor.current.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
+			brew : { ...prevState.brew, text: text },
 		}));
 	},
 	renderNavbar : function(){
@@ -76,6 +89,7 @@ const HomePage = createClass({
 				}
 				<NewBrewItem />
 				<HelpNavItem />
+				<VaultNavItem />
 				<RecentNavItem />
 				<AccountNavItem />
 			</Nav.section>
@@ -96,12 +110,20 @@ const HomePage = createClass({
 						renderer={this.state.brew.renderer}
 						showEditButtons={false}
 						snippetBundle={this.state.themeBundle.snippets}
+						onCursorPageChange={this.handleEditorCursorPageChange}
+						onViewPageChange={this.handleEditorViewPageChange}
+						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
 					/>
 					<BrewRenderer
 						text={this.state.brew.text}
 						style={this.state.brew.style}
 						renderer={this.state.brew.renderer}
-						currentEditorPage={this.state.currentEditorPage}
+						onPageChange={this.handleBrewRendererPageChange}
+						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
 						themeBundle={this.state.themeBundle}
 					/>
 				</SplitPane>

client/homebrew/pages/newPage/newPage.jsx

@@ -39,13 +39,15 @@ const NewPage = createClass({
 		const brew = this.props.brew;
 
 		return {
-			brew              : brew,
-			isSaving          : false,
-			saveGoogle        : (global.account && global.account.googleId ? true : false),
-			error             : null,
-			htmlErrors        : Markdown.validate(brew.text),
-			currentEditorPage : 0,
-			themeBundle       : {}
+			brew                       : brew,
+			isSaving                   : false,
+			saveGoogle                 : (global.account && global.account.googleId ? true : false),
+			error                      : null,
+			htmlErrors                 : Markdown.validate(brew.text),
+			currentEditorViewPageNum   : 1,
+			currentEditorCursorPageNum : 1,
+			currentBrewRendererPageNum : 1,
+			themeBundle                : {}
 		};
 	},
 
@@ -108,15 +110,26 @@ const NewPage = createClass({
 		this.editor.current.update();
 	},
 
+	handleEditorViewPageChange : function(pageNumber){
+		this.setState({ currentEditorViewPageNum: pageNumber });
+	},
+
+	handleEditorCursorPageChange : function(pageNumber){
+		this.setState({ currentEditorCursorPageNum: pageNumber });
+	},
+
+	handleBrewRendererPageChange : function(pageNumber){
+		this.setState({ currentBrewRendererPageNum: pageNumber });
+	},
+
 	handleTextChange : function(text){
 		//If there are errors, run the validator on every change to give quick feedback
 		let htmlErrors = this.state.htmlErrors;
 		if(htmlErrors.length) htmlErrors = Markdown.validate(text);
 
 		this.setState((prevState)=>({
-			brew              : { ...prevState.brew, text: text },
-			htmlErrors        : htmlErrors,
-			currentEditorPage : this.editor.current.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
+			brew       : { ...prevState.brew, text: text },
+			htmlErrors : htmlErrors,
 		}));
 		localStorage.setItem(BREWKEY, text);
 	},
@@ -221,6 +234,11 @@ const NewPage = createClass({
 						renderer={this.state.brew.renderer}
 						userThemes={this.props.userThemes}
 						snippetBundle={this.state.themeBundle.snippets}
+						onCursorPageChange={this.handleEditorCursorPageChange}
+						onViewPageChange={this.handleEditorViewPageChange}
+						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
 					/>
 					<BrewRenderer
 						text={this.state.brew.text}
@@ -230,7 +248,10 @@ const NewPage = createClass({
 						themeBundle={this.state.themeBundle}
 						errors={this.state.htmlErrors}
 						lang={this.state.brew.lang}
-						currentEditorPage={this.state.currentEditorPage}
+						onPageChange={this.handleBrewRendererPageChange}
+						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
 						allowPrint={true}
 					/>
 				</SplitPane>

client/homebrew/pages/sharePage/sharePage.jsx

@@ -25,7 +25,8 @@ const SharePage = createClass({
 
 	getInitialState : function() {
 		return {
-			themeBundle : {}
+			themeBundle                : {},
+			currentBrewRendererPageNum : 1
 		};
 	},
 
@@ -39,6 +40,10 @@ const SharePage = createClass({
 		document.removeEventListener('keydown', this.handleControlKeys);
 	},
 
+	handleBrewRendererPageChange : function(pageNumber){
+		this.setState({ currentBrewRendererPageNum: pageNumber });
+	},
+
 	handleControlKeys : function(e){
 		if(!(e.ctrlKey || e.metaKey)) return;
 		const P_KEY = 80;
@@ -114,9 +119,12 @@ const SharePage = createClass({
 				<BrewRenderer
 					text={this.props.brew.text}
 					style={this.props.brew.style}
+					lang={this.props.brew.lang}
 					renderer={this.props.brew.renderer}
 					theme={this.props.brew.theme}
 					themeBundle={this.state.themeBundle}
+					onPageChange={this.handleBrewRendererPageChange}
+					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
 					allowPrint={true}
 				/>
 			</div>

client/homebrew/pages/userPage/userPage.jsx

@@ -12,6 +12,7 @@ const Account = require('../../navbar/account.navitem.jsx');
 const NewBrew = require('../../navbar/newbrew.navitem.jsx');
 const HelpNavItem = require('../../navbar/help.navitem.jsx');
 const ErrorNavItem = require('../../navbar/error-navitem.jsx');
+const VaultNavitem = require('../../navbar/vault.navitem.jsx');
 
 const UserPage = createClass({
 	displayName     : 'UserPage',
@@ -66,6 +67,7 @@ const UserPage = createClass({
 				}
 				<NewBrew />
 				<HelpNavItem />
+				<VaultNavitem/>
 				<RecentNavItem />
 				<Account />
 			</Nav.section>

client/homebrew/pages/vaultPage/vaultPage.jsx

@@ -0,0 +1,432 @@
+/*eslint max-lines: ["warn", {"max": 400, "skipBlankLines": true, "skipComments": true}]*/
+/*eslint max-params:["warn", { max: 10 }], */
+require('./vaultPage.less');
+
+const React = require('react');
+const { useState, useEffect, useRef } = React;
+
+const Nav           = require('naturalcrit/nav/nav.jsx');
+const Navbar        = require('../../navbar/navbar.jsx');
+const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
+const Account       = require('../../navbar/account.navitem.jsx');
+const NewBrew       = require('../../navbar/newbrew.navitem.jsx');
+const HelpNavItem   = require('../../navbar/help.navitem.jsx');
+const BrewItem      = require('../basePages/listPage/brewItem/brewItem.jsx');
+const SplitPane     = require('../../../../shared/naturalcrit/splitPane/splitPane.jsx');
+const ErrorIndex    = require('../errorPage/errors/errorIndex.js');
+
+const request = require('../../utils/request-middleware.js');
+
+const VaultPage = (props)=>{
+	const [pageState, setPageState] = useState(parseInt(props.query.page) || 1);
+
+	const [sortState, setSort] = useState(props.query.sort || 'title');
+	const [dirState, setdir] = useState(props.query.dir || 'asc');
+
+	//Response state
+	const [brewCollection, setBrewCollection] = useState(null);
+	const [totalBrews, setTotalBrews]         = useState(null);
+	const [searching, setSearching]           = useState(false);
+	const [error, setError]                   = useState(null);
+
+	const titleRef        = useRef(null);
+	const authorRef       = useRef(null);
+	const countRef        = useRef(null);
+	const v3Ref           = useRef(null);
+	const legacyRef       = useRef(null);
+	const submitButtonRef = useRef(null);
+
+	useEffect(()=>{
+		disableSubmitIfFormInvalid();
+		loadPage(pageState, true, props.query.sort, props.query.dir);
+	}, []);
+
+	const updateStateWithBrews = (brews, page)=>{
+		setBrewCollection(brews || null);
+		setPageState(parseInt(page) || 1);
+		setSearching(false);
+	};
+
+	const updateUrl = (titleValue, authorValue, countValue, v3Value, legacyValue, page, sort, dir)=>{
+		const url = new URL(window.location.href);
+		const urlParams = new URLSearchParams(url.search);
+
+		urlParams.set('title', titleValue);
+		urlParams.set('author', authorValue);
+		urlParams.set('count', countValue);
+		urlParams.set('v3', v3Value);
+		urlParams.set('legacy', legacyValue);
+		urlParams.set('page', page);
+		urlParams.set('sort', sort);
+		urlParams.set('dir', dir);
+
+		url.search = urlParams.toString();
+		window.history.replaceState(null, '', url.toString());
+	};
+
+	const performSearch = async (title, author, count, v3, legacy, page, sort, dir)=>{
+		updateUrl(title, author, count, v3, legacy, page, sort, dir);
+
+		const response = await request
+			.get(`/api/vault?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}&count=${count}&page=${page}&sort=${sort}&dir=${dir}`)
+			.catch((error)=>{
+				console.log('error at loadPage: ', error);
+				setError(error);
+				updateStateWithBrews([], 1);
+			});
+
+		if(response.ok)
+			updateStateWithBrews(response.body.brews, page);
+	};
+
+	const loadTotal = async (title, author, v3, legacy)=>{
+		setTotalBrews(null);
+
+		const response = await request.get(`/api/vault/total?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}`)
+		.catch((error)=>{
+			console.log('error at loadTotal: ', error);
+			setError(error);
+			updateStateWithBrews([], 1);
+		});
+
+		if(response.ok)
+			setTotalBrews(response.body.totalBrews);
+	};
+
+	const loadPage = async (page, updateTotal, sort, dir)=>{
+		if(!validateForm()) return;
+
+		setSearching(true);
+		setError(null);
+
+		const title  = titleRef.current.value || '';
+		const author = authorRef.current.value || '';
+		const count  = countRef.current.value || 10;
+		const v3     = v3Ref.current.checked != false;
+		const legacy = legacyRef.current.checked != false;
+		const sortOption = sort || 'title';
+		const dirOption = dir || 'asc';
+		const pageProp = page || 1;
+
+		setSort(sortOption);
+		setdir(dirOption);
+
+		performSearch(title, author, count, v3, legacy, pageProp, sortOption, dirOption);
+
+		if(updateTotal)
+			loadTotal(title, author, v3, legacy);
+	};
+
+	const renderNavItems = ()=>(
+		<Navbar>
+			<Nav.section>
+				<Nav.item className='brewTitle'>
+					Vault: Search for brews
+				</Nav.item>
+			</Nav.section>
+			<Nav.section>
+				<NewBrew />
+				<HelpNavItem />
+				<RecentNavItem />
+				<Account />
+			</Nav.section>
+		</Navbar>
+	);
+
+	const validateForm = ()=>{
+		//form validity: title or author must be written, and at least one renderer set
+		const isTitleValid      = titleRef.current.validity.valid && titleRef.current.value;
+		const isAuthorValid     = authorRef.current.validity.valid && authorRef.current.value;
+		const isCheckboxChecked = legacyRef.current.checked || v3Ref.current.checked;
+
+		const isFormValid = (isTitleValid || isAuthorValid) && isCheckboxChecked;
+
+		return isFormValid;
+	};
+
+	const disableSubmitIfFormInvalid = ()=>{
+		submitButtonRef.current.disabled = !validateForm();
+	};
+
+	const renderForm = ()=>(
+		<div className='brewLookup'>
+			<h2 className='formTitle'>Brew Lookup</h2>
+			<div className='formContents'>
+				<label>
+					Title of the brew
+					<input
+						ref={titleRef}
+						type='text'
+						name='title'
+						defaultValue={props.query.title || ''}
+						onKeyUp={disableSubmitIfFormInvalid}
+						pattern='.{3,}'
+						title='At least 3 characters'
+						onKeyDown={(e)=>{
+							if(e.key === 'Enter' && !submitButtonRef.current.disabled)
+								loadPage(1, true);
+						}}
+						placeholder='v3 Reference Document'
+					/>
+				</label>
+
+				<label>
+					Author of the brew
+					<input
+						ref={authorRef}
+						type='text'
+						name='author'
+						pattern='.{1,}'
+						defaultValue={props.query.author || ''}
+						onKeyUp={disableSubmitIfFormInvalid}
+						onKeyDown={(e)=>{
+							if(e.key === 'Enter' && !submitButtonRef.current.disabled)
+								loadPage(1, true);
+						}}
+						placeholder='Username'
+					/>
+				</label>
+
+				<label>
+					Results per page
+					<select ref={countRef} name='count' defaultValue={props.query.count || 20}>
+						<option value='10'>10</option>
+						<option value='20'>20</option>
+						<option value='40'>40</option>
+						<option value='60'>60</option>
+					</select>
+				</label>
+
+				<label>
+					<input
+						className='renderer'
+						ref={v3Ref}
+						type='checkbox'
+						defaultChecked={props.query.v3 !== 'false'}
+						onChange={disableSubmitIfFormInvalid}
+					/>
+					Search for v3 brews
+				</label>
+
+				<label>
+					<input
+						className='renderer'
+						ref={legacyRef}
+						type='checkbox'
+						defaultChecked={props.query.legacy !== 'false'}
+						onChange={disableSubmitIfFormInvalid}
+					/>
+					Search for legacy brews
+				</label>
+
+				<button
+					id='searchButton'
+					ref={submitButtonRef}
+					onClick={()=>{
+						loadPage(1, true);
+					}}
+				>
+					Search
+					<i
+						className={searching ? 'fas fa-spin fa-spinner': 'fas fa-search'}
+					/>
+				</button>
+			</div>
+			<legend>
+				<h3>Tips and tricks</h3>
+				<ul>
+					<li>
+						Only <b>published</b> brews are searchable via this tool
+					</li>
+					<li>
+						Usernames are case-sensitive
+					</li>
+					<li>
+						Use <code>"word"</code> to match an exact string,
+						and <code>-</code> to exclude words (at least one word must not be negated)
+					</li>
+					<li>
+						Some common words like "a", "after", "through", "itself", "here", etc.,
+						are ignored in searches. The full list can be found &nbsp;
+						<a href='https://github.com/mongodb/mongo/blob/0e3b3ca8480ddddf5d0105d11a94bd4698335312/src/mongo/db/fts/stop_words_english.txt'>
+							here
+						</a>
+					</li>
+				</ul>
+				<small>New features will be coming, such as filters and search by tags.</small>
+			</legend>
+		</div>
+	);
+
+	const renderSortOption = (optionTitle, optionValue)=>{
+		const oppositeDir = dirState === 'asc' ? 'desc' : 'asc';
+
+		return (
+			<div className={`sort-option ${sortState === optionValue ? `active` : ''}`}>
+				<button onClick={()=>loadPage(1, false, optionValue, oppositeDir)}>
+					{optionTitle}
+				</button>
+				{sortState === optionValue && (
+					<i className={`sortDir fas ${dirState === 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`} />
+				)}
+			</div>
+		);
+	};
+
+	const renderSortBar = ()=>{
+
+		return (
+			<div className='sort-container'>
+				{renderSortOption('Title', 'title', props.query.dir)}
+				{renderSortOption('Created Date', 'createdAt', props.query.dir)}
+				{renderSortOption('Updated Date', 'updatedAt', props.query.dir)}
+				{renderSortOption('Views', 'views', props.query.dir)}
+			</div>
+		);
+	};
+
+	const renderPaginationControls = ()=>{
+		if(!totalBrews) return null;
+
+		const countInt = parseInt(props.query.count || 20);
+		const totalPages = Math.ceil(totalBrews / countInt);
+
+		let startPage, endPage;
+		if(pageState <= 6) {
+			startPage = 1;
+			endPage = Math.min(totalPages, 10);
+		} else if(pageState + 4 >= totalPages) {
+			startPage = Math.max(1, totalPages - 9);
+			endPage = totalPages;
+		} else {
+			startPage = pageState - 5;
+			endPage = pageState + 4;
+		}
+
+		const pagesAroundCurrent = new Array(endPage - startPage + 1)
+			.fill()
+			.map((_, index)=>(
+				<a
+					key={startPage + index}
+					className={`pageNumber ${pageState === startPage + index ? 'currentPage' : ''}`}
+					onClick={()=>loadPage(startPage + index, false, sortState, dirState)}
+				>
+					{startPage + index}
+				</a>
+			));
+
+		return (
+			<div className='paginationControls'>
+				<button
+					className='previousPage'
+					onClick={()=>loadPage(pageState - 1, false, sortState, dirState)}
+					disabled={pageState === startPage}
+				>
+					<i className='fa-solid fa-chevron-left'></i>
+				</button>
+				<ol className='pages'>
+					{startPage > 1 && (
+						<a
+							className='pageNumber firstPage'
+							onClick={()=>loadPage(1, false, sortState, dirState)}
+						>
+							1 ...
+						</a>
+					)}
+					{pagesAroundCurrent}
+					{endPage < totalPages && (
+						<a
+							className='pageNumber lastPage'
+							onClick={()=>loadPage(totalPages, false, sortState, dirState)}
+						>
+							... {totalPages}
+						</a>
+					)}
+				</ol>
+				<button
+					className='nextPage'
+					onClick={()=>loadPage(pageState + 1, false, sortState, dirState)}
+					disabled={pageState === totalPages}
+				>
+					<i className='fa-solid fa-chevron-right'></i>
+				</button>
+			</div>
+		);
+	};
+
+	const renderFoundBrews = ()=>{
+		if(searching) {
+			return (
+				<div className='foundBrews searching'>
+					<h3 className='searchAnim'>Searching</h3>
+				</div>
+			);
+		}
+
+		if(error) {
+			const errorText = ErrorIndex()[error.HBErrorCode.toString()] || '';
+
+			return (
+				<div className='foundBrews noBrews'>
+					<h3>Error: {errorText}</h3>
+				</div>
+			);
+		}
+
+		if(!brewCollection) {
+			return (
+				<div className='foundBrews noBrews'>
+					<h3>No search yet</h3>
+				</div>
+			);
+		}
+
+		if(brewCollection.length === 0) {
+			return (
+				<div className='foundBrews noBrews'>
+					<h3>No brews found</h3>
+				</div>
+			);
+		}
+
+		return (
+			<div className='foundBrews'>
+				<span className='totalBrews'>
+					{`Brews found: `}
+					<span>{totalBrews}</span>
+				</span>
+				{brewCollection.map((brew, index)=>{
+					return (
+						<BrewItem
+							brew={{ ...brew }}
+							key={index}
+							reportError={props.reportError}
+							renderStorage={false}
+						/>
+					);
+				})}
+				{renderPaginationControls()}
+			</div>
+		);
+	};
+
+	return (
+		<div className='vaultPage'>
+			<link href='/themes/V3/Blank/style.css' rel='stylesheet' />
+			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet' />
+			{renderNavItems()}
+			<div className='content'>
+				<SplitPane showDividerButtons={false}>
+					<div className='form dataGroup'>{renderForm()}</div>
+
+					<div className='resultsContainer dataGroup'>
+						{renderSortBar()}
+						{renderFoundBrews()}
+					</div>
+				</SplitPane>
+			</div>
+		</div>
+	);
+};
+
+module.exports = VaultPage;

client/homebrew/pages/vaultPage/vaultPage.less

@@ -0,0 +1,400 @@
+.vaultPage {
+	height           : 100%;
+	overflow-y       : hidden;
+	background-color : #2C3E50;
+
+	*:not(input) { user-select : none; }
+
+	.content {
+		height     : 100%;
+		background : #2C3E50;
+
+		.dataGroup {
+			width      : 100%;
+			height     : 100%;
+			background : white;
+
+			&.form .brewLookup {
+				position : relative;
+				padding  : 50px clamp(20px, 4vw, 50px);
+
+				small {
+					font-size : 10pt;
+					color     : #555555;
+			
+					a { color : #333333; }
+				}
+
+				code {
+					padding-inline : 5px;
+					font-family    : monospace;
+					background     : lightgrey;
+					border-radius  : 5px;
+				}
+
+				h1, h2, h3, h4 {
+					font-family    : 'CodeBold';
+					letter-spacing : 2px;
+				}
+				
+				legend {
+					h3 {
+						margin-block  : 30px 20px;
+						font-size     : 20px;
+						text-align    : center;
+						border-bottom : 2px solid;
+					}
+					ul {
+						padding-inline : 30px 10px;
+						li {
+							margin-block : 5px;
+							line-height  : calc(1em + 5px);
+							list-style   : disc;
+						}
+					} 
+				}
+
+				&::after {
+					position    : absolute;
+					top         : 0;
+					right       : 0;
+					left        : 0;
+					display     : block;
+					padding     : 10px;
+					font-weight : 900;
+					color       : white;
+					white-space : pre-wrap;
+					content     : 'Error:\A At least one renderer should be enabled to make a search';
+					background  : rgb(255, 60, 60);
+					opacity     : 0;
+					transition  : opacity 0.5s;
+				}
+				&:not(:has(input[type='checkbox']:checked))::after { opacity : 1; }
+
+				.formTitle {
+					margin        : 20px 0;
+					font-size     : 30px;
+					color         : black;
+					text-align    : center;
+					border-bottom : 2px solid;
+				}
+
+				.formContents {
+					position       : relative;
+					display        : flex;
+					flex-direction : column;
+
+					label {
+						display     : flex;
+						align-items : center; 
+						margin      : 10px 0;
+					}
+					select { margin : 0 10px; }
+
+					input { 
+						margin   : 0 10px; 
+
+						&:invalid { background : rgb(255, 188, 181); }
+					
+						&[type='checkbox'] {
+							position       : relative;
+							display        : inline-block;
+							width          : 50px;
+							height         : 30px;
+							font-family    : 'WalterTurncoat';
+							font-size      : 20px;
+							font-weight    : 800;
+							color          : white;
+							letter-spacing : 2px;
+							appearance     : none;
+							background     : red;
+							isolation      : isolate;
+							border-radius  : 5px;
+
+							&::before,&::after {
+								position    : absolute;
+								inset       : 0;
+								z-index     : 5;
+								padding-top : 2px;
+								text-align  : center;
+							}
+
+							&::before {
+								display : block;
+								content : 'No';
+							}
+
+							&::after {
+								display : none;
+								content : 'Yes';
+							}
+
+							&:checked {
+								background : green;
+
+								&::before { display : none; }
+								&::after { display : block; }
+							}
+						}
+					}
+
+					#searchButton {
+						position : absolute;
+						right    : 20px;
+						bottom   : 0;
+
+						i {
+							margin-left         : 10px;
+							animation-duration  : 1000s;
+						}
+					}
+				}
+			}
+
+			&.resultsContainer {
+				display        : flex;
+				flex-direction : column;
+				height         : 100%;
+				overflow-y     : auto;
+				font-family    : 'BookInsanityRemake';
+				font-size      : 0.34cm;
+				
+				h3 {
+					font-family : 'Open Sans';
+					font-weight : 900;
+					color       : white;
+				}
+
+				.sort-container {
+					display               : flex;
+					flex-wrap             : wrap;
+					column-gap            : 15px;
+					justify-content       : center;
+					height                : 30px;
+					color                 : white;
+					background-color      : #555555;
+					border-top            : 1px solid #666666;
+					border-bottom         : 1px solid #666666;
+					
+					.sort-option {
+						display     : flex;
+						align-items : center;
+						padding     : 0 8px;
+				
+						&:hover { background-color : #444444; }
+				
+						&.active {
+							background-color : #333333;
+				
+							button {
+								font-weight : 800;
+								color       : white;
+								
+								& + .sortDir { padding-left : 5px; }
+							}
+						}
+
+						button {
+							padding          : 0;
+							font-size        : 11px;
+							font-weight      : normal;
+							color            : #CCCCCC;
+							text-transform   : uppercase;
+							background-color : transparent;
+					
+							&:hover { background : none; }
+						}
+					}
+				}
+
+				.foundBrews {
+					position         : relative;
+					width            : 100%;
+					height           : 100%;
+					max-height       : 100%;
+					padding          : 50px 50px 70px 50px;
+					overflow-y       : scroll;
+					background-color : #2C3E50;
+
+					h3 { font-size : 25px; }
+
+					&.noBrews {
+						display     : grid;
+						place-items : center;
+						color       : white;
+					}
+
+					&.searching {
+						display     : grid;
+						place-items : center;
+						color       : white;
+
+						h3 { position : relative; }
+
+						h3.searchAnim::after {
+							position  : absolute;
+							top       : 50%;
+							right     : 0;
+							width     : max-content;
+							height    : 1em;
+							content   : '';
+							translate : calc(100% + 5px) -50%;
+							animation : trailingDots 2s ease infinite;
+						}
+					}
+
+					.totalBrews {
+						position         : fixed;
+						right            : 0;
+						bottom           : 0;
+						z-index          : 1000;
+						padding          : 8px 10px;
+						font-family      : 'Open Sans';
+						font-size        : 11px;
+						font-weight      : 800;
+						color            : white;
+						background-color : #333333;
+
+						.searchAnim {
+							position : relative;
+							display  : inline-block;
+							width    : 3ch;
+							height   : 1em;
+						}
+
+						.searchAnim::after {
+							position  : absolute;
+							top       : 50%;
+							right     : 0;
+							width     : max-content;
+							height    : 1em;
+							content   : '';
+							translate : -50% -50%;
+							animation : trailingDots 2s ease infinite;
+						}
+					}
+
+					.brewItem {
+						width            : 47%;
+						margin-right     : 40px;
+						color            : black;
+						isolation        : isolate;
+						
+						&::after {
+							position         : absolute;
+							inset            : 0;
+							z-index          : -2;
+							display          : block;
+							content          : '';
+							background-image : url('/assets/parchmentBackground.jpg');
+						}
+
+						&:nth-child(even of .brewItem) { margin-right : 0; }
+
+						h2 {
+							font-family : 'MrEavesRemake';
+							font-size   : 0.75cm;
+							font-weight : 800;
+							line-height : 0.988em;
+							color       : var(--HB_Color_HeaderText);
+						}
+						.info {
+							position    : relative;
+							z-index     : 2;
+							font-family : 'ScalySansRemake';
+							font-size   : 1.2em;
+
+							>span {
+								margin-right : 12px;
+								line-height  : 1.5em;
+							}
+						}
+						.links { z-index : 2; }
+
+						hr {
+							margin     : 0px;
+							visibility : hidden;
+						}
+
+						.thumbnail { z-index : -1; }
+					}
+
+					.paginationControls {
+						position              : absolute;
+						left                  : 50%;
+						display               : grid;
+						grid-template-areas   : 'previousPage currentPage nextPage';
+						grid-template-columns : 50px 1fr 50px;
+						place-items           : center;
+						width                 : auto;
+						translate             : -50%;
+
+						.pages {
+							display         : flex;
+							grid-area       : currentPage;
+							justify-content : space-evenly;
+							width           : 100%;
+							height          : 100%;
+							padding         : 5px 8px;
+							text-align      : center;
+
+							.pageNumber {
+								margin-inline           : 1vw;
+								font-family             : 'Open Sans';
+								font-weight             : 900;
+								color                   : white;
+								text-underline-position : under;
+								text-wrap               : nowrap;
+								cursor                  : pointer;
+
+								&.currentPage {
+									color           : gold;
+									text-decoration : underline;
+									pointer-events  : none;
+								}
+
+								&.firstPage { margin-right : -5px; }
+
+								&.lastPage { margin-left : -5px; }
+							}
+						}
+
+						button {
+							width : max-content;
+
+							&.previousPage { grid-area : previousPage; }
+
+							&.nextPage { grid-area : nextPage; }
+						}
+
+					}
+				}
+			}
+		}
+	}
+}
+
+@keyframes trailingDots {
+
+	0%,
+	32% { content : ' .'; }
+
+	33%,
+	65% { content : ' ..'; }
+
+	66%,
+	100% { content : ' ...'; }
+}
+
+// media query for when the page is smaller than 1079 px in width
+@media screen and (max-width : 1079px) {
+	.vaultPage .content {
+
+		.dataGroup.form .brewLookup { padding : 1px 20px 20px 10px; }
+
+		.dataGroup.resultsContainer .foundBrews .brewItem {
+			width         : 100%;
+			margin-inline : auto;
+		}
+	}
+}

client/homebrew/utils/versionHistory.js

@@ -0,0 +1,119 @@
+import * as IDB from 'idb-keyval/dist/index.js';
+
+export const HISTORY_PREFIX = 'HOMEBREWERY-HISTORY';
+export const HISTORY_SLOTS = 5;
+
+// History values in minutes
+const HISTORY_SAVE_DELAYS = {
+	'0' : 0,
+	'1' : 2,
+	'2' : 10,
+	'3' : 60,
+	'4' : 12 * 60,
+	'5' : 2 * 24 * 60
+};
+// const HISTORY_SAVE_DELAYS = {
+// 	'0' : 0,
+// 	'1' : 1,
+// 	'2' : 2,
+// 	'3' : 3,
+// 	'4' : 4,
+// 	'5' : 5
+// };
+
+const HB_DB = 'HOMEBREWERY-DB';
+const HB_STORE = 'HISTORY';
+
+const GARBAGE_COLLECT_DELAY = 28 * 24 * 60;
+// const GARBAGE_COLLECT_DELAY = 10;
+
+
+function getKeyBySlot(brew, slot){
+	// Return a string representing the key for this brew and history slot
+	return `${HISTORY_PREFIX}-${brew.shareId}-${slot}`;
+};
+
+function parseBrewForStorage(brew, slot = 0) {
+	// Strip out unneeded object properties
+	// Returns an array of [ key, brew ]
+	const archiveBrew = {
+		title    : brew.title,
+		text     : brew.text,
+		style    : brew.style,
+		version  : brew.version,
+		shareId  : brew.shareId,
+		savedAt  : brew?.savedAt || new Date(),
+		expireAt : new Date()
+	};
+
+	archiveBrew.expireAt.setMinutes(archiveBrew.expireAt.getMinutes() + HISTORY_SAVE_DELAYS[slot]);
+
+	const key = getKeyBySlot(brew, slot);
+
+	return [key, archiveBrew];
+}
+
+// Create a custom IDB store
+async function createHBStore(){
+	return await IDB.createStore(HB_DB, HB_STORE);
+}
+
+export async function loadHistory(brew){
+	const DEFAULT_HISTORY_ITEM = { expireAt: '2000-01-01T00:00:00.000Z', shareId: brew.shareId, noData: true };
+
+	const historyKeys = [];
+
+	// Create array of all history keys
+	for (let i = 1; i <= HISTORY_SLOTS; i++){
+		historyKeys.push(getKeyBySlot(brew, i));
+	};
+
+	// Load all keys from IDB at once
+	const dataArray = await IDB.getMany(historyKeys, await createHBStore());
+	return dataArray.map((data)=>{ return data ?? DEFAULT_HISTORY_ITEM; });
+}
+
+export async function updateHistory(brew) {
+	const history = await loadHistory(brew);
+
+	// Walk each version position
+	for (let slot = HISTORY_SLOTS - 1; slot >= 0; slot--){
+		const storedVersion = history[slot];
+
+		// If slot has expired, update all lower slots and break
+		if(new Date() >= new Date(storedVersion.expireAt)){
+
+			// Create array of arrays : [ [key1, value1], [key2, value2], ..., [keyN, valueN] ]
+			// to pass to IDB.setMany
+			const historyUpdate = [];
+
+			for (let updateSlot = slot; updateSlot > 0; updateSlot--){
+				// Move data from updateSlot to updateSlot + 1
+				if(!history[updateSlot - 1]?.noData) {
+					historyUpdate.push(parseBrewForStorage(history[updateSlot - 1], updateSlot + 1));
+				}
+			};
+
+			// Update the most recent brew
+			historyUpdate.push(parseBrewForStorage(brew, 1));
+
+			await IDB.setMany(historyUpdate, await createHBStore());
+
+			// Break out of data checks because we found an expired value
+			break;
+		}
+	};
+};
+
+export async function versionHistoryGarbageCollection(){
+
+	const entries = await IDB.entries(await createHBStore());
+
+	for (const [key, value] of entries){
+		const expireAt = new Date(value.savedAt);
+		expireAt.setMinutes(expireAt.getMinutes() + GARBAGE_COLLECT_DELAY);
+		if(new Date() > expireAt){
+			await IDB.del(key, await createHBStore());
+		};
+	};
+};

client/icons/customIcons.less

@@ -1,57 +1,75 @@
 .fac {
-  display      : inline-block;
+	display          : inline-block;
+	background-color : currentColor;
+	mask-size        : contain;
+	mask-repeat      : no-repeat;
+	mask-position    : center;
+	width            : 1em;
+	aspect-ratio     : 1;
 }
 .position-top-left {
-  content: url('../icons/position-top-left.svg');
+  mask-image: url('../icons/position-top-left.svg');
 }
 .position-top-right {
-  content: url('../icons/position-top-right.svg');
+  mask-image: url('../icons/position-top-right.svg');
 }
 .position-bottom-left {
-  content: url('../icons/position-bottom-left.svg');
+  mask-image: url('../icons/position-bottom-left.svg');
 }
 .position-bottom-right {
-  content: url('../icons/position-bottom-right.svg');
+  mask-image: url('../icons/position-bottom-right.svg');
 }
 .position-top {
-  content: url('../icons/position-top.svg');
+  mask-image: url('../icons/position-top.svg');
 }
 .position-right {
-  content: url('../icons/position-right.svg');
+  mask-image: url('../icons/position-right.svg');
 }
 .position-bottom {
-  content: url('../icons/position-bottom.svg');
+  mask-image: url('../icons/position-bottom.svg');
 }
 .position-left {
-  content: url('../icons/position-left.svg');
+  mask-image: url('../icons/position-left.svg');
 }
 .mask-edge {
-  content: url('../icons/mask-edge.svg');
+  mask-image: url('../icons/mask-edge.svg');
 }
 .mask-corner {
-  content: url('../icons/mask-corner.svg');
+  mask-image: url('../icons/mask-corner.svg');
 }
 .mask-center {
-  content: url('../icons/mask-center.svg');
+  mask-image: url('../icons/mask-center.svg');
 }
 .book-front-cover {
-  content: url('../icons/book-front-cover.svg');
+  mask-image: url('../icons/book-front-cover.svg');
 }
 .book-back-cover {
-  content: url('../icons/book-back-cover.svg');
+  mask-image: url('../icons/book-back-cover.svg');
 }
 .book-inside-cover {
-  content: url('../icons/book-inside-cover.svg');
+  mask-image: url('../icons/book-inside-cover.svg');
 }
 .book-part-cover {
-  content: url('../icons/book-part-cover.svg');
+  mask-image: url('../icons/book-part-cover.svg');
+}
+.image-wrap-left {
+  mask-image: url('../icons/image-wrap-left.svg');
+}
+.image-wrap-right {
+  mask-image: url('../icons/image-wrap-right.svg');
 }
 .davek {
-  content: url('../icons/Davek.svg');
+  mask-image: url('../icons/Davek.svg');
 }
 .rellanic {
-  content: url('../icons/Rellanic.svg');
+  mask-image: url('../icons/Rellanic.svg');
 }
 .iokharic {
-  content: url('../icons/Iokharic.svg');
+  mask-image: url('../icons/Iokharic.svg');
+}
+.zoom-to-fit {
+	mask-image: url('../icons/zoom-to-fit.svg');
+}
+.fit-width {
+	mask-image: url('../icons/fit-width.svg');
 }

client/icons/fit-width.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.07509,0,0,1.07509,-3.75511,-3.75468)">
+        <g transform="matrix(0.843549,0,0,0.950644,8.38004,4.39672)">
+            <path d="M28.455,52.413L28.455,58.581C28.455,59.719 27.684,60.745 26.501,61.181C25.318,61.616 23.956,61.375 23.051,60.571L11.114,49.96C9.878,48.862 9.878,47.08 11.114,45.981L23.051,35.371C23.956,34.566 25.318,34.326 26.501,34.761C27.684,35.197 28.455,36.223 28.455,37.361L28.455,43.528L70.223,43.528L70.223,37.361C70.223,36.223 70.995,35.197 72.177,34.761C73.36,34.326 74.722,34.566 75.627,35.371L87.564,45.981C88.8,47.08 88.8,48.862 87.564,49.96L75.627,60.571C74.722,61.375 73.36,61.616 72.177,61.181C70.995,60.745 70.223,59.719 70.223,58.581L70.223,52.413L28.455,52.413Z"/>
+        </g>
+        <g transform="matrix(1.46702,0,0,0.986488,-23.0335,3.50686)">
+            <path d="M23.967,5.877L23.967,88.383C23.967,90.556 22.781,92.321 21.319,92.321L21.157,92.321C19.695,92.321 18.509,90.556 18.509,88.383L18.509,5.877C18.509,3.703 19.695,1.939 21.157,1.939L21.319,1.939C22.781,1.939 23.967,3.703 23.967,5.877Z"/>
+        </g>
+        <g transform="matrix(1.46702,0,0,0.986488,60.7211,3.50686)">
+            <path d="M23.967,5.877L23.967,88.383C23.967,90.556 22.781,92.321 21.319,92.321L21.157,92.321C19.695,92.321 18.509,90.556 18.509,88.383L18.509,5.877C18.509,3.703 19.695,1.939 21.157,1.939L21.319,1.939C22.781,1.939 23.967,3.703 23.967,5.877Z"/>
+        </g>
+    </g>
+</svg>

client/icons/image-wrap-left.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 512.00006 512"
+   xml:space="preserve"
+   id="svg10"
+   sodipodi:docname="noun-wrap-image-left-212078.svg"
+   width="512.00006"
+   height="512"
+   inkscape:export-filename="image-wrap-right.svg"
+   inkscape:export-xdpi="300"
+   inkscape:export-ydpi="300"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs10" /><sodipodi:namedview
+     id="namedview10"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 185.80018,144 H 32"
+     id="path11"
+     sodipodi:nodetypes="cc"
+     clip-path="none"
+     inkscape:export-filename="image-wrap-right.svg"
+     inkscape:export-xdpi="300"
+     inkscape:export-ydpi="300" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 185.80018,368 H 32"
+     id="path11-8"
+     sodipodi:nodetypes="cc"
+     clip-path="none" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 480.00007,32 H 32"
+     id="path11-8-2-67"
+     clip-path="none"
+     sodipodi:nodetypes="cc" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 480.00008,480 H 32"
+     id="path11-8-2-67-2"
+     clip-path="none"
+     sodipodi:nodetypes="cc" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 160.0001,255.98832 32,256.01162"
+     id="path11-0"
+     sodipodi:nodetypes="cc"
+     clip-path="none" /><path
+     id="path23"
+     style="opacity:0.922046;fill:#000000;fill-opacity:1;stroke-width:64;stroke-linecap:round;stroke-dasharray:none;paint-order:fill markers stroke"
+     d="m 416.00008,96 a 160,160 0 0 1 96,32.50977 v 254.98046 a 160,160 0 0 1 -96,32.50977 160,160 0 0 1 -160,-160 160,160 0 0 1 160,-160 z" /></svg>

client/icons/image-wrap-right.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 512.00006 512"
+   xml:space="preserve"
+   id="svg10"
+   sodipodi:docname="noun-wrap-image-left-212078.svg"
+   width="512.00006"
+   height="512"
+   inkscape:export-filename="image-wrap-right.svg"
+   inkscape:export-xdpi="300"
+   inkscape:export-ydpi="300"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs10" /><sodipodi:namedview
+     id="namedview10"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 326.1999,144 H 480.00008"
+     id="path11"
+     sodipodi:nodetypes="cc"
+     clip-path="none"
+     inkscape:export-filename="image-wrap-right.svg"
+     inkscape:export-xdpi="300"
+     inkscape:export-ydpi="300" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 326.1999,368 H 480.00008"
+     id="path11-8"
+     sodipodi:nodetypes="cc"
+     clip-path="none" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 32.00001,32 H 480.00008"
+     id="path11-8-2-67"
+     clip-path="none"
+     sodipodi:nodetypes="cc" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 32,480 H 480.00008"
+     id="path11-8-2-67-2"
+     clip-path="none"
+     sodipodi:nodetypes="cc" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="m 351.99998,255.98832 128.0001,0.0233"
+     id="path11-0"
+     sodipodi:nodetypes="cc"
+     clip-path="none" /><path
+     id="path23"
+     style="opacity:0.922046;fill:#000000;fill-opacity:1;stroke-width:64;stroke-linecap:round;stroke-dasharray:none;paint-order:fill markers stroke"
+     d="M 96,96 A 160,160 0 0 0 0,128.50977 V 383.49023 A 160,160 0 0 0 96,416 160,160 0 0 0 256,256 160,160 0 0 0 96,96 Z" /></svg>

client/icons/zoom-to-fit.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.0781,0,0,1.0781,-3.90545,-3.90502)">
+        <g transform="matrix(0.841196,0,0,0.947993,8.49652,4.52391)">
+            <path d="M44.333,52.413L28.455,52.413L28.455,58.581C28.455,59.719 27.684,60.745 26.501,61.181C25.318,61.616 23.956,61.375 23.051,60.571L11.114,49.96C9.878,48.862 9.878,47.08 11.114,45.981L23.051,35.371C23.956,34.566 25.318,34.326 26.501,34.761C27.684,35.197 28.455,36.223 28.455,37.361L28.455,43.528L44.333,43.528L44.333,29.439L37.382,29.439C36.099,29.439 34.943,28.755 34.452,27.705C33.961,26.656 34.233,25.448 35.14,24.644L47.097,14.052C48.335,12.956 50.343,12.956 51.581,14.052L63.539,24.644C64.446,25.448 64.717,26.656 64.226,27.705C63.735,28.755 62.579,29.439 61.296,29.439L54.346,29.439L54.346,43.528L70.223,43.528L70.223,37.361C70.223,36.223 70.995,35.197 72.177,34.761C73.36,34.326 74.722,34.566 75.627,35.371L87.564,45.981C88.8,47.08 88.8,48.862 87.564,49.96L75.627,60.571C74.722,61.375 73.36,61.616 72.177,61.181C70.995,60.745 70.223,59.719 70.223,58.581L70.223,52.413L54.346,52.413L54.346,66.502L61.296,66.502C62.579,66.502 63.735,67.187 64.226,68.236C64.717,69.286 64.446,70.494 63.539,71.297L51.581,81.889C50.343,82.986 48.335,82.986 47.097,81.889L35.14,71.297C34.233,70.494 33.961,69.286 34.452,68.236C34.943,67.187 36.099,66.502 37.382,66.502L44.333,66.503L44.333,52.413Z"/>
+        </g>
+        <g transform="matrix(1.0247,0,0,1.0247,-5.47698,-3.53855)">
+            <path d="M99.4,14.269L99.4,90.227C99.4,94.245 96.137,97.508 92.119,97.508L16.161,97.508C12.142,97.508 8.88,94.245 8.88,90.227L8.88,14.269C8.88,10.25 12.142,6.988 16.161,6.988L92.119,6.988C96.137,6.988 99.4,10.25 99.4,14.269ZM93.633,14.269C93.633,13.433 92.955,12.755 92.119,12.755L16.161,12.755C15.325,12.755 14.647,13.433 14.647,14.269L14.647,90.227C14.647,91.062 15.325,91.741 16.161,91.741L92.119,91.741C92.955,91.741 93.633,91.062 93.633,90.227L93.633,14.269Z"/>
+        </g>
+    </g>
+</svg>