Merge branch 'master' of https://github.com/naturalcrit/homebrewery into adress-small-accessibility-concerns

2026-01-10 00:32:45 +00:00 · 2024-12-09 21:52:25 +01:00
parent 35856ad01e 51936a1b99
commit eca0f59b40
93 changed files with 3337 additions and 2398 deletions
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -1,11 +1,11 @@
 /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
 require('./brewRenderer.less');
 const React = require('react');
-const { useState, useRef, useCallback } = React;
+const { useState, useRef, useCallback, useMemo } = React;
 const _ = require('lodash');

 const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
-const Markdown = require('naturalcrit/markdown.js');
+import Markdown from 'naturalcrit/markdown.js';
 const ErrorBar = require('./errorBar/errorBar.jsx');
 const ToolBar  = require('./toolBar/toolBar.jsx');

@@ -16,8 +16,7 @@ const Frame = require('react-frame-component').default;
 const dedent = require('dedent-tabs').default;
 const { printCurrentBrew } = require('../../../shared/helpers.js');

-const DOMPurify = require('dompurify');
-const purifyConfig = { FORCE_BODY: true, SANITIZE_DOM: false };
+import { safeHTML } from './safeHTML.js';

 const PAGE_HEIGHT = 1056;

@@ -29,6 +28,7 @@ const INITIAL_CONTENT = dedent`
 	<base target=_blank>
 	</head><body style='overflow: hidden'><div></div></body></html>`;

+
 //v=====----------------------< Brew Page Component >---------------------=====v//
 const BrewPage = (props)=>{
 	props = {
@@ -36,15 +36,15 @@ const BrewPage = (props)=>{
 		index    : 0,
 		...props
 	};
-	const cleanText = props.contents; //DOMPurify.sanitize(props.contents, purifyConfig);
-	return <div className={props.className} id={`p${props.index + 1}`} >
+	const cleanText = safeHTML(props.contents);
+	return <div className={props.className} id={`p${props.index + 1}`} style={props.style}>
 	         <div className='columnWrapper' dangerouslySetInnerHTML={{ __html: cleanText }} />
 	       </div>;
 };


 //v=====--------------------< Brew Renderer Component >-------------------=====v//
-const renderedPages = [];
+let renderedPages = [];
 let rawPages      = [];

 const BrewRenderer = (props)=>{
@@ -65,8 +65,14 @@ const BrewRenderer = (props)=>{

 	const [state, setState] = useState({
 		isMounted  : false,
-		visibility : 'hidden',
-		zoom       : 100
+		visibility : 'hidden'
+	});
+
+	const [displayOptions, setDisplayOptions] = useState({
+		zoomLevel    : 100,
+		spread       : 'single',
+		startOnRight : true,
+		pageShadows  : true
 	});

 	const mainRef  = useRef(null);
@@ -77,6 +83,26 @@ const BrewRenderer = (props)=>{
 		rawPages = props.text.split(/^\\page$/gm);
 	}

+	const scrollToHash = (hash)=>{
+		if(!hash) return;
+
+		const iframeDoc = document.getElementById('BrewRenderer').contentDocument;
+		let anchor = iframeDoc.querySelector(hash);
+
+		if(anchor) {
+			anchor.scrollIntoView({ behavior: 'smooth' });
+		} else {
+			// Use MutationObserver to wait for the element if it's not immediately available
+			new MutationObserver((mutations, obs)=>{
+				anchor = iframeDoc.querySelector(hash);
+				if(anchor) {
+					anchor.scrollIntoView({ behavior: 'smooth' });
+					obs.disconnect();
+				}
+			}).observe(iframeDoc, { childList: true, subtree: true });
+		}
+	};
+
 	const updateCurrentPage = useCallback(_.throttle((e)=>{
 		const { scrollTop, clientHeight, scrollHeight } = e.target;
 		const totalScrollableHeight = scrollHeight - clientHeight;
@@ -105,9 +131,9 @@ const BrewRenderer = (props)=>{
 	};

 	const renderStyle = ()=>{
-		const cleanStyle = props.style; //DOMPurify.sanitize(props.style, purifyConfig);
 		const themeStyles = props.themeBundle?.joinedStyles ?? '<style>@import url("/themes/V3/Blank/style.css");</style>';
-		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `${themeStyles} \n\n <style> ${cleanStyle} </style>` }} />;
+		const cleanStyle = safeHTML(`${themeStyles} \n\n <style> ${props.style} </style>`);
+		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: cleanStyle }} />;
 	};

 	const renderPage = (pageText, index)=>{
@@ -117,7 +143,13 @@ const BrewRenderer = (props)=>{
 		} else {
 			pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
 			const html = Markdown.render(pageText, index);
-			return <BrewPage className='page' index={index} key={index} contents={html} />;
+
+			const styles = {
+				...(!displayOptions.pageShadows ? { boxShadow: 'none' } : {})
+				// Add more conditions as needed
+			};
+
+			return <BrewPage className='page' index={index} key={index} contents={html} style={styles} />;
 		}
 	};

@@ -129,7 +161,8 @@ const BrewRenderer = (props)=>{
 			renderedPages.length = 0;

 		// Render currently-edited page first so cross-page effects (variables, links) can propagate out first
-		renderedPages[props.currentEditorCursorPageNum - 1] = renderPage(rawPages[props.currentEditorCursorPageNum - 1], props.currentEditorCursorPageNum - 1);
+		if(rawPages.length > props.currentEditorCursorPageNum -1)
+			renderedPages[props.currentEditorCursorPageNum - 1] = renderPage(rawPages[props.currentEditorCursorPageNum - 1], props.currentEditorCursorPageNum - 1);

 		_.forEach(rawPages, (page, index)=>{
 			if((isInView(index) || !renderedPages[index]) && typeof window !== 'undefined'){
@@ -150,6 +183,8 @@ const BrewRenderer = (props)=>{
 	};

 	const frameDidMount = ()=>{	//This triggers when iFrame finishes internal "componentDidMount"
+		scrollToHash(window.location.hash);
+
 		setTimeout(()=>{	//We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame
 			renderPages(); //Make sure page is renderable before showing
 			setState((prevState)=>({
@@ -165,20 +200,25 @@ const BrewRenderer = (props)=>{
 		document.dispatchEvent(new MouseEvent('click'));
 	};

-	//Toolbar settings:
-	const handleZoom = (newZoom)=>{
-		setState((prevState)=>({
-			...prevState,
-			zoom : newZoom
-		}));
+	const handleDisplayOptionsChange = (newDisplayOptions)=>{
+		setDisplayOptions(newDisplayOptions);
+	};
+
+	const pagesStyle = {
+		zoom      : `${displayOptions.zoomLevel}%`,
+		columnGap : `${displayOptions.columnGap}px`,
+		rowGap    : `${displayOptions.rowGap}px`
 	};

 	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='white' font-size='20'>${global.config.deployment}</text></svg>")`;
+		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, props.themeBundle]);
+	renderedPages = useMemo(()=>renderPages(), [displayOptions.pageShadows, props.text]);
+
 	return (
 		<>
 			{/*render dummy page while iFrame is mounting.*/}
@@ -196,7 +236,7 @@ const BrewRenderer = (props)=>{
 				<NotificationPopup />
 			</div>

-			<ToolBar onZoomChange={handleZoom} currentPage={props.currentBrewRendererPageNum}  totalPages={rawPages.length}/>
+			<ToolBar displayOptions={displayOptions} currentPage={props.currentBrewRendererPageNum} totalPages={rawPages.length} onDisplayOptionsChange={handleDisplayOptionsChange} />

 			{/*render in iFrame so broken code doesn't crash the site.*/}
 			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
@@ -214,9 +254,10 @@ const BrewRenderer = (props)=>{
 					{state.isMounted
 						&&
 						<>
-							{renderStyle()}
-							<div className='pages' lang={`${props.lang || 'en'}`} style={{ zoom: `${state.zoom}%` }}>
-								{renderPages()}
+							{renderedStyle}
+							<div lang={`${props.lang || 'en'}`} style={pagesStyle} className={
+								`pages ${displayOptions.startOnRight ? 'recto' : 'verso'}	${displayOptions.spread}` } >
+								{renderedPages}
 							</div>
 						</>
 					}
--- a/client/homebrew/brewRenderer/brewRenderer.less
+++ b/client/homebrew/brewRenderer/brewRenderer.less
@@ -3,13 +3,45 @@
 .brewRenderer {
 	overflow-y    : scroll;
 	will-change   : transform;
-	padding-top   : 30px;
+	padding-top   : 60px;
 	height        : 100vh;
+	&:has(.facing, .flow) {
+		padding : 60px 30px;
+	}
 	&.deployment {
 		background-color: darkred;
 	}
 	:where(.pages) {
-		margin : 30px 0px;
+		&.facing {
+			display: grid; 
+			grid-template-columns: repeat(2, auto); 
+			grid-template-rows: repeat(3, auto); 
+			gap: 10px 10px; 
+			justify-content: center;
+			&.recto .page:first-child {
+				// sets first page on 'right' ('recto') of the preview, as if for a Cover page.  
+				// todo: add a checkbox to toggle this setting
+				grid-column-start: 2; 
+			}
+			& :where(.page) {
+				margin-left: unset !important;
+				margin-right: unset !important;
+			}
+		}
+
+		&.flow {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 10px;
+			justify-content: flex-start;
+			& :where(.page) {
+				flex: 0 0 auto;
+				margin-left: unset !important;
+				margin-right: unset !important;
+			}
+
+		}
+
 		& > :where(.page) {
 			width         : 215.9mm;
 			height        : 279.4mm;
@@ -18,6 +50,9 @@
 			margin-left   : auto;
 			box-shadow    : 1px 4px 14px #000000;
 		}
+		*[id] {
+			scroll-margin-top:100px;
+		}
 	}
 	&::-webkit-scrollbar {
 		width : 20px;
--- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx
+++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx
@@ -1,44 +1,62 @@
 require('./notificationPopup.less');
-const React = require('react');
-const _     = require('lodash');
+import React, { useEffect, useState } from 'react';
+import request from '../../utils/request-middleware.js';

 import Dialog from '../../../components/dialog.jsx';

-const DISMISS_KEY = 'dismiss_notification01-10-24';
 const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;

 const NotificationPopup = ()=>{
-	return <Dialog className='notificationPopup' dismissKey={DISMISS_KEY} closeText={DISMISS_BUTTON} >
+	const [notifications, setNotifications] = useState([]);
+	const [dissmissKeyList, setDismissKeyList] = useState([]);
+	const [error, setError] = useState(null);
+
+	useEffect(()=>{
+		getNotifications();
+	}, []);
+
+	const getNotifications = async ()=>{
+		setError(null);
+		try {
+			const res = await request.get('/admin/notification/all');
+			pickActiveNotifications(res.body || []);
+		} catch (err) {
+			console.log(err);
+			setError(`Error looking up notifications: ${err?.response?.body?.message || err.message}`);
+		}
+	};
+
+	const pickActiveNotifications = (notifs)=>{
+		const now = new Date();
+		const filteredNotifications = notifs.filter((notification)=>{
+			const startDate = new Date(notification.startAt);
+			const stopDate = new Date(notification.stopAt);
+			const dismissed = localStorage.getItem(notification.dismissKey) ? true : false;
+			return now >= startDate && now <= stopDate && !dismissed;
+		});
+		setNotifications(filteredNotifications);
+		setDismissKeyList(filteredNotifications.map((notif)=>notif.dismissKey));
+	};
+
+	const renderNotificationsList = ()=>{
+		if(error) return <div className='error'>{error}</div>;
+
+		return notifications.map((notification)=>(
+			<li key={notification.dismissKey} >
+				<em>{notification.title}</em><br />
+				<p dangerouslySetInnerHTML={{ __html: notification.text }}></p>
+			</li>
+		));
+	};
+
+	return <Dialog className='notificationPopup' dismisskeys={dissmissKeyList} closeText={DISMISS_BUTTON} >
 		<div className='header'>
 			<i className='fas fa-info-circle info'></i>
 			<h3>Notice</h3>
 			<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='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'>
-				<em>Don't delete your Homebrewery folder on Google Drive!</em> <br />
-				We have had several reports of users losing their brews, not realizing
-				that they had deleted the files on their Google Drive. If you have a Homebrewery folder
-				on your Google Drive with *.txt files inside, <em>do not delete it</em>!
-				We cannot help you recover files that you have deleted from your own
-				Google Drive.
-			</li>
-
-			<li key='faq'>
-				<em>Protect your work! </em> <br />
-				If you opt not to use your Google Drive, keep in mind that we do not save a history of your projects. Please make frequent backups of your brews!&nbsp;
-				<a target='_blank' href='https://www.reddit.com/r/homebrewery/comments/adh6lh/faqs_psas_announcements/'>
-					See the FAQ
-				</a> to learn how to avoid losing your work!
-			</li>
+			{renderNotificationsList()}
 		</ul>
 	</Dialog>;
 };
--- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less
+++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less
@@ -55,7 +55,10 @@
 			margin-top  : 1.4em;
 			font-size   : 0.8em;
 			line-height : 1.4em;
-			em { font-weight : 800; }
+			em { 
+				text-transform:capitalize;
+				font-weight : 800;
+			}
 		}
 	}
 }
--- a/client/homebrew/brewRenderer/safeHTML.js
+++ b/client/homebrew/brewRenderer/safeHTML.js
@@ -0,0 +1,46 @@
+// Derived from the vue-html-secure package, customized for Homebrewery
+
+let doc = null;
+let div = null;
+
+function safeHTML(htmlString) {
+	// If the Document interface doesn't exist, exit
+	if(typeof document == 'undefined') return null;
+	// If the test document and div don't exist, create them
+	if(!doc) doc = document.implementation.createHTMLDocument('');
+	if(!div) div = doc.createElement('div');
+
+	// Set the test div contents to the evaluation string
+	div.innerHTML = htmlString;
+	// Grab all nodes from the test div
+	const elements = div.querySelectorAll('*');
+
+	// Blacklisted tags
+	const blacklistTags = ['script', 'noscript', 'noembed'];
+	// Tests to remove attributes
+	const blacklistAttrs = [
+		(test)=>{return test.localName.indexOf('on') == 0;},
+		(test)=>{return test.localName.indexOf('type') == 0 && test.value.match(/submit/i);},
+		(test)=>{return test.value.replace(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205f\u3000]/g, '').toLowerCase().trim().indexOf('javascript:') == 0;}
+	];
+
+
+	elements.forEach((element)=>{
+		// Check each element for blacklisted type
+		if(blacklistTags.includes(element?.localName?.toLowerCase())) {
+			element.remove();
+			return;
+		}
+		// Check remaining elements for blacklisted attributes
+		for (const attribute of element.attributes){
+			if(blacklistAttrs.some((test)=>{return test(attribute);})) {
+				element.removeAttribute(attribute.localName);
+				break;
+			};
+		};
+	});
+
+	return div.innerHTML;
+};
+
+module.exports.safeHTML = safeHTML;
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -3,26 +3,28 @@ const React = require('react');
 const { useState, useEffect } = React;
 const _ = require('lodash');

+import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anchored.jsx';
+// import * as ZoomIcons from '../../../icons/icon-components/zoomIcons.jsx';

 const MAX_ZOOM = 300;
 const MIN_ZOOM = 10;

-const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
+const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChange })=>{

-	const [zoomLevel, setZoomLevel] = useState(100);
-	const [pageNum, setPageNum]     = useState(currentPage);
+	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)));
+		handleOptionChange('zoomLevel', _.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
+	};
+
+	const handleOptionChange = (optionKey, newValue)=>{
+		//setDisplayOptions(prevOptions => ({ ...prevOptions, [optionKey]: newValue }));
+		onDisplayOptionsChange({ ...displayOptions, [optionKey]: newValue });
 	};

 	const handlePageInput = (pageInput)=>{
@@ -63,47 +65,51 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{

 		const margin = 5;  // extra space so page isn't edge to edge (not truly "to fill")

-		const deltaZoom = (desiredZoom - zoomLevel) - margin;
+		const deltaZoom = (desiredZoom - displayOptions.zoomLevel) - margin;
 		return deltaZoom;
 	};

 	return (
-		<div className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`}>
+		<div id='preview-toolbar' className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`} role='toolbar'>
 			<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'>
+			<div className='group' role='group' aria-label='Zoom' aria-hidden={!toolsVisible}>
 				<button
 					id='fill-width'
 					className='tool'
-					onClick={()=>handleZoomButton(zoomLevel + calculateChange('fill'))}
+					title='Set zoom to fill preview with one page'
+					onClick={()=>handleZoomButton(displayOptions.zoomLevel + calculateChange('fill'))}
 				>
 					<i className='fac fit-width' />
 				</button>
 				<button
 					id='zoom-to-fit'
 					className='tool'
-					onClick={()=>handleZoomButton(zoomLevel + calculateChange('fit'))}
+					title='Set zoom to fit entire page in preview'
+					onClick={()=>handleZoomButton(displayOptions.zoomLevel + calculateChange('fit'))}
 				>
 					<i className='fac zoom-to-fit' />
 				</button>
 				<button
 					id='zoom-out'
 					className='tool'
-					onClick={()=>handleZoomButton(zoomLevel - 20)}
-					disabled={zoomLevel <= MIN_ZOOM}
+					onClick={()=>handleZoomButton(displayOptions.zoomLevel - 20)}
+					disabled={displayOptions.zoomLevel <= MIN_ZOOM}
+					title='Zoom Out'
 				>
 					<i className='fas fa-magnifying-glass-minus' />
 				</button>
 				<input
 					id='zoom-slider'
-					className='range-input tool'
+					className='range-input tool hover-tooltip'
 					type='range'
 					name='zoom'
+					title='Set Zoom'
 					list='zoomLevels'
 					min={MIN_ZOOM}
 					max={MAX_ZOOM}
 					step='1'
-					value={zoomLevel}
+					value={displayOptions.zoomLevel}
 					onChange={(e)=>handleZoomButton(parseInt(e.target.value))}
 				/>
 				<datalist id='zoomLevels'>
@@ -113,18 +119,72 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				<button
 					id='zoom-in'
 					className='tool'
-					onClick={()=>handleZoomButton(zoomLevel + 20)}
-					disabled={zoomLevel >= MAX_ZOOM}
+					onClick={()=>handleZoomButton(displayOptions.zoomLevel + 20)}
+					disabled={displayOptions.zoomLevel >= MAX_ZOOM}
+					title='Zoom In'
 				>
 					<i className='fas fa-magnifying-glass-plus' />
 				</button>
 			</div>

+			{/*v=====----------------------< Spread Controls >---------------------=====v*/}
+			<div className='group' role='group' aria-label='Spread' aria-hidden={!toolsVisible}>
+				<div className='radio-group' role='radiogroup'>
+					<button role='radio'
+						id='single-spread'
+						className='tool'
+						title='Single Page'
+						onClick={()=>{handleOptionChange('spread', 'active');}}
+						aria-checked={displayOptions.spread === 'single'}
+					><i className='fac single-spread' /></button>
+					<button role='radio'
+						id='facing-spread'
+						className='tool'
+						title='Facing Pages'
+						onClick={()=>{handleOptionChange('spread', 'facing');}}
+						aria-checked={displayOptions.spread === 'facing'}
+					><i className='fac facing-spread' /></button>
+					<button role='radio'
+						id='flow-spread'
+						className='tool'
+						title='Flow Pages'
+						onClick={()=>{handleOptionChange('spread', 'flow');}}
+						aria-checked={displayOptions.spread === 'flow'}
+					><i className='fac flow-spread' /></button>
+
+				</div>
+				<Anchored>
+					<AnchoredTrigger id='spread-settings' className='tool' title='Spread options'><i className='fas fa-gear' /></AnchoredTrigger>
+					<AnchoredBox title='Options'>
+						<h1>Options</h1>
+						<label title='Modify the horizontal space between pages.'>
+							Column gap
+							<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>handleOptionChange('columnGap', evt.target.value)} />
+						</label>
+						<label title='Modify the vertical space between rows of pages.'>
+							Row gap
+							<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>handleOptionChange('rowGap', evt.target.value)} />
+						</label>
+						<label title='Start 1st page on the right side, such as if you have cover page.'>
+							Start on right
+							<input type='checkbox' checked={displayOptions.startOnRight} onChange={()=>{handleOptionChange('startOnRight', !displayOptions.startOnRight);}}
+								title={displayOptions.spread !== 'facing' ? 'Switch to Facing to enable toggle.' : null} />
+						</label>
+						<label title='Toggle the page shadow on every page.'>
+							Page shadows
+							<input type='checkbox' checked={displayOptions.pageShadows} onChange={()=>{handleOptionChange('pageShadows', !displayOptions.pageShadows);}} />
+						</label>
+					</AnchoredBox>
+				</Anchored>
+			</div>
+
 			{/*v=====----------------------< Page Controls >---------------------=====v*/}
-			<div className='group'>
+			<div className='group' role='group'  aria-label='Pages' aria-hidden={!toolsVisible}>
 				<button
 					id='previous-page'
 					className='previousPage tool'
+					type='button'
+					title='Previous Page(s)'
 					onClick={()=>scrollToPage(pageNum - 1)}
 					disabled={pageNum <= 1}
 				>
@@ -137,6 +197,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 						className='text-input'
 						type='text'
 						name='page'
+						title='Current page(s) in view'
 						inputMode='numeric'
 						pattern='[0-9]'
 						style={{width:`${pageNum.toString().length + 2}ch`}}
@@ -146,12 +207,14 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 						onBlur={()=>scrollToPage(pageNum)}
 						onKeyDown={(e)=>e.key == 'Enter' && scrollToPage(pageNum)}
 					/>
-					<span id='page-count'>/ {totalPages}</span>
+					<span id='page-count' title='Total Page Count'>/ {totalPages}</span>
 				</div>

 				<button
 					id='next-page'
 					className='tool'
+					type='button'
+					title='Next Page(s)'
 					onClick={()=>scrollToPage(pageNum + 1)}
 					disabled={pageNum >= totalPages}
 				>
--- a/client/homebrew/brewRenderer/toolBar/toolBar.less
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.less
@@ -13,11 +13,12 @@
 	height           : auto;
 	padding          : 2px 0;
 	font-family      : 'Open Sans', sans-serif;
+	font-size        : 13px;
 	color            : #CCCCCC;
 	background-color : #555555;
 	& > *:not(.toggleButton) {
-		opacity: 1;
-		transition: all .2s ease;
+		opacity    : 1;
+		transition : all 0.2s ease;
 	}

 	.group {
@@ -34,6 +35,70 @@
 		align-items : center;
 	}

+	.active, [aria-checked='true'] { background-color : #444444; }
+
+	.anchored-trigger {
+		&.active { background-color : #444444; }
+	}
+
+	.anchored-box {
+		--box-color      : #555555;
+		top              : 30px;
+		display          : flex;
+		flex-direction   : column;
+		gap              : 5px;
+		padding          : 15px;
+		margin-top       : 10px;
+		font-size        : 0.8em;
+		color            : #CCCCCC;
+		background-color : var(--box-color);
+		border-radius    : 5px;
+	
+		h1 {
+			padding-bottom : 0.3em;
+			margin-bottom  : 0.5em;
+			border-bottom  : 1px solid currentColor;
+		}
+	
+		h2 {
+			padding-bottom : 0.3em;
+			margin         : 1em 0 0.5em 0;
+			color          : lightgray;
+			border-bottom  : 1px solid currentColor;
+		}
+	
+		label {
+			display         : flex;
+			gap             : 6px;
+			align-items     : center;
+			justify-content : space-between;
+	
+		}
+		input {
+			height : unset;
+			&[type='range'] { padding : 0; }
+		}
+		&::before {
+			position       : absolute;
+			top            : -20px;
+			left           : 50%;
+			width          : 0px;
+			height         : 0px;
+			pointer-events : none;
+			content        : '';
+			border         : 10px solid transparent;
+			border-bottom  : 10px solid var(--box-color);
+			transform      : translateX(-50%);
+		}
+
+	}
+
+	.radio-group:has(button[role='radio']) {
+		display : flex;
+		height  : 100%;
+		border  : 1px solid #333333;
+	}
+
 	input {
 		position       : relative;
 		height         : 1.5em;
@@ -57,7 +122,7 @@
 				outline          : none;
 			}

-			&:hover::after {
+			&.hover-tooltip[value]:hover::after {
 				position         : absolute;
 				bottom           : -30px;
 				left             : 50%;
@@ -83,46 +148,40 @@
 	}

 	button {
-		box-sizing       : content-box;
+		box-sizing       : border-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; }
+		&:focus { border  : 1px solid #D3D3D3;outline : none;}
 		&:disabled {
 			color            : #777777;
 			background-color : unset !important;
 		}
-		i {
-			font-size:1.2em;
-		}
+		i { font-size : 1.2em; }
 	}

 	&.hidden {
-		width: 32px;
-		transition: all .3s ease;
-		flex-wrap:nowrap;
-		overflow: hidden;
-		background-color: unset;
-		opacity: .5;
+		flex-wrap        : nowrap;
+		width            : 32px;
+		overflow         : hidden;
+		background-color : unset;
+		opacity          : 0.5;
+		transition       : all 0.3s ease;
 		& > *:not(.toggleButton) {
-			opacity: 0;
-			transition: all .2s ease;
+			opacity    : 0;
+			transition : all 0.2s ease;
 		}
 	}
 }

 button.toggleButton {
-	z-index : 5;
-	position:absolute;
-	left: 0;
-	width: 32px;
-	min-width: unset;
+	position  : absolute;
+	left      : 0;
+	z-index   : 5;
+	width     : 32px;
+	min-width : unset;
 }
--- a/client/homebrew/editor/editor.jsx
+++ b/client/homebrew/editor/editor.jsx
@@ -4,7 +4,7 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const dedent = require('dedent-tabs').default;
-const Markdown = require('../../../shared/naturalcrit/markdown.js');
+import Markdown from '../../../shared/naturalcrit/markdown.js';

 const CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
 const SnippetBar = require('./snippetbar/snippetbar.jsx');
@@ -314,7 +314,7 @@ const Editor = createClass({
 	},

 	brewJump : function(targetPage=this.props.currentEditorCursorPageNum, smooth=true){
-		if(!window || isJumping)
+		if(!window || !this.isText() || isJumping)
 			return;

 		// Get current brewRenderer scroll position and calculate target position
@@ -355,7 +355,7 @@ const Editor = createClass({
 	},

 	sourceJump : function(targetPage=this.props.currentBrewRendererPageNum, smooth=true){
-		if(!this.isText || isJumping)
+		if(!this.isText() || isJumping)
 			return;

 		const textSplit  = this.props.renderer == 'V3' ? /^\\page$/gm : /\\page/;
--- a/client/homebrew/editor/editor.less
+++ b/client/homebrew/editor/editor.less
@@ -2,6 +2,7 @@
 .editor {
 	position : relative;
 	width    : 100%;
+	container: editor / inline-size;

 	.codeEditor {
 		height            : 100%;
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -3,10 +3,10 @@ require('./metadataEditor.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
-const request = require('../../utils/request-middleware.js');
+import request from '../../utils/request-middleware.js';
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Combobox = require('client/components/combobox.jsx');
-const StringArrayEditor = require('../stringArrayEditor/stringArrayEditor.jsx');
+const TagInput = require('../tagInput/tagInput.jsx');


 const Themes = require('themes/themes.json');
@@ -341,10 +341,11 @@ const MetadataEditor = createClass({
 				{this.renderThumbnail()}
 			</div>

-			<StringArrayEditor label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
+			<TagInput label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
 				placeholder='add tag' unique={true}
 				values={this.props.metadata.tags}
-				onChange={(e)=>this.handleFieldChange('tags', e)}/>
+				onChange={(e)=>this.handleFieldChange('tags', e)}
+				/>

 			<div className='field systems'>
 				<label>systems</label>
@@ -363,12 +364,13 @@ const MetadataEditor = createClass({

 			{this.renderAuthors()}

-			<StringArrayEditor label='invited authors' valuePatterns={[/.+/]}
+			<TagInput label='invited authors' valuePatterns={[/.+/]}
 				validators={[(v)=>!this.props.metadata.authors?.includes(v)]}
 				placeholder='invite author' unique={true}
 				values={this.props.metadata.invitedAuthors}
 				notes={['Invited author usernames are case sensitive.', 'After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.']}
-				onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}/>
+				onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}
+				/>

 			<h2>Privacy</h2>

--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -79,6 +79,7 @@
 				text-overflow : ellipsis;
 			}
 			button {
+				.colorButton();
 				padding          : 0px 5px;
 				color            : white;
 				background-color : black;
@@ -138,16 +139,16 @@
 		margin-bottom : 15px;
 		button { width : 100%; }
 		button.publish {
-			.button(@blueLight);
+			.colorButton(@blueLight);
 		}
 		button.unpublish {
-			.button(@silver);
+			.colorButton(@silver);
 		}
 	}

 	.delete.field .value {
 		button {
-			.button(@red);
+			.colorButton(@red);
 		}
 	}
 	.authors.field .value {
@@ -271,7 +272,7 @@
 			&:last-child { border-radius : 0 0.5em 0.5em 0; }
 		}

-		.badge {
+		.tag {
 			padding          : 0.3em;
 			margin           : 2px;
 			font-size        : 0.9em;
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -150,18 +150,22 @@ const Snippetbar = createClass({

 	renderSnippetGroups : function(){
 		const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
+		if(snippets.length === 0) return null;

-		return _.map(snippets, (snippetGroup)=>{
-			return <SnippetGroup
-				brew={this.props.brew}
-				groupName={snippetGroup.groupName}
-				icon={snippetGroup.icon}
-				snippets={snippetGroup.snippets}
-				key={snippetGroup.groupName}
-				onSnippetClick={this.handleSnippetClick}
-				cursorPos={this.props.cursorPos}
-			/>;
-		});
+		return <div className='snippets'>
+			{_.map(snippets, (snippetGroup)=>{
+				return <SnippetGroup
+					brew={this.props.brew}
+					groupName={snippetGroup.groupName}
+					icon={snippetGroup.icon}
+					snippets={snippetGroup.snippets}
+					key={snippetGroup.groupName}
+					onSnippetClick={this.handleSnippetClick}
+					cursorPos={this.props.cursorPos}
+				/>;
+			})
+			}
+		</div>;
 	},

 	replaceContent : function(item){
@@ -203,57 +207,58 @@ const Snippetbar = createClass({
 	renderEditorButtons : function(){
 		if(!this.props.showEditButtons) return;

-		let foldButtons;
-		if(this.props.view == 'text'){
-			foldButtons =
-				<>
-					<div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
-						onClick={this.props.foldCode} >
-						<i className='fas fa-compress-alt' />
-					</div>
-					<div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
-						onClick={this.props.unfoldCode} >
-						<i className='fas fa-expand-alt' />
-					</div>
-				</>;
-
-		}
+		const foldButtons = <>
+			<div className={`editorTool foldAll ${this.props.view !== 'meta' && this.props.foldCode ? 'active' : ''}`}
+				onClick={this.props.foldCode} >
+				<i className='fas fa-compress-alt' />
+			</div>
+			<div className={`editorTool unfoldAll ${this.props.view !== 'meta' && this.props.unfoldCode ? 'active' : ''}`}
+				onClick={this.props.unfoldCode} >
+				<i className='fas fa-expand-alt' />
+			</div>
+		</>;

 		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 className='historyTools'>
+				<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>
-			<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={`editorTheme ${this.state.themeSelector ? 'active' : ''}`}
-				onClick={this.toggleThemeSelector} >
-				<i className='fas fa-palette' />
-				{this.state.themeSelector && this.renderThemeSelector()}
+			<div className='codeTools'>
+				{foldButtons}
+				<div className={`editorTheme ${this.state.themeSelector ? 'active' : ''}`}
+					onClick={this.toggleThemeSelector} >
+					<i className='fas fa-palette' />
+					{this.state.themeSelector && this.renderThemeSelector()}
+				</div>
 			</div>

-			<div className='divider'></div>
-			<div className={cx('text', { selected: this.props.view === 'text' })}
-				 onClick={()=>this.props.onViewChange('text')}>
-				<i className='fa fa-beer' />
-			</div>
-			<div className={cx('style', { selected: this.props.view === 'style' })}
-				 onClick={()=>this.props.onViewChange('style')}>
-				<i className='fa fa-paint-brush' />
-			</div>
-			<div className={cx('meta', { selected: this.props.view === 'meta' })}
-				onClick={()=>this.props.onViewChange('meta')}>
-				<i className='fas fa-info-circle' />
+
+			<div className='tabs'>
+				<div className={cx('text', { selected: this.props.view === 'text' })}
+					onClick={()=>this.props.onViewChange('text')}>
+					<i className='fa fa-beer' />
+				</div>
+				<div className={cx('style', { selected: this.props.view === 'style' })}
+					onClick={()=>this.props.onViewChange('style')}>
+					<i className='fa fa-paint-brush' />
+				</div>
+				<div className={cx('meta', { selected: this.props.view === 'meta' })}
+					onClick={()=>this.props.onViewChange('meta')}>
+					<i className='fas fa-info-circle' />
+				</div>
 			</div>
+
 		</div>;
 	},

@@ -291,8 +296,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'>
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -4,105 +4,114 @@
 .snippetBar {
 	@menuHeight      : 25px;
 	position         : relative;
-	height           : @menuHeight;
+	display          : flex;
+	flex-wrap        : wrap-reverse;
+	justify-content  : space-between;
+	height           : auto;
 	color            : black;
 	background-color : #DDDDDD;

-	.editors {
-		position        : absolute;
-		top             : 0px;
-		right           : 0px;
+	.snippets {
 		display         : flex;
-		justify-content : space-between;
-		height          : @menuHeight;
-		& > div {
-			width       : @menuHeight;
-			height      : @menuHeight;
-			line-height : @menuHeight;
-			text-align  : center;
-			
-			&:not(.editorTool, .divider) { cursor : pointer; }
+		justify-content : flex-start;
+		min-width       : 327.58px;
+	}

-			&:hover,&.selected { background-color : #999999; }
+	.editors {
+		display         : flex;
+		justify-content : flex-end;
+		min-width       : 225px;

-			&.editorTool {
-				background-color : unset;
-				cursor:not-allowed;
+		&:only-child { margin-left : auto; }

-				&.active {
-					cursor : pointer;
-					&:hover { background-color : #999999; }
+		>div {
+			display         : flex;
+			flex            : 1;
+			justify-content : space-around;
+
+			&:first-child { border-left : none; }
+
+			& > div {
+				position    : relative;
+				width       : @menuHeight;
+				height      : @menuHeight;
+				line-height : @menuHeight;
+				text-align  : center;
+				cursor      : pointer;
+				&:hover,&.selected { background-color : #999999; }
+				&.text {
+					.tooltipLeft('Brew Editor');
+				}
+				&.style {
+					.tooltipLeft('Style Editor');
+				}
+				&.meta {
+					.tooltipLeft('Properties');
+				}
+				&.undo {
+					.tooltipLeft('Undo');
+					font-size : 0.75em;
+					color     : grey;
+					&.active { color : inherit; }
+				}
+				&.redo {
+					.tooltipLeft('Redo');
+					font-size : 0.75em;
+					color     : grey;
+					&.active { color : inherit; }
+				}
+				&.foldAll {
+					.tooltipLeft('Fold All');
+					font-size : 0.75em;
+					color     : grey;
+					&.active { color : inherit; }
+				}
+				&.unfoldAll {
+					.tooltipLeft('Unfold All');
+					font-size : 0.75em;
+					color     : grey;
+					&.active { color : inherit; }
+				}
+				&.history {
+					.tooltipLeft('History');
+					position  : relative;
+					font-size : 0.75em;
+					color     : grey;
+					border    : none;
+					&.active { color : inherit; }
+					& > .dropdown {
+						right : -1px;
+						& > .snippet { padding-right : 10px; }
+					}
+				}
+				&.editorTheme {
+					.tooltipLeft('Editor Themes');
+					font-size : 0.75em;
+					color     : black;
+					&.active {
+						position         : relative;
+						background-color : #999999;
+					}
+				}
+				&.divider {
+					width      : 5px;
+					background : linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
+					&:hover { background-color : inherit; }
 				}
 			}
-			&.text {
-				.tooltipLeft('Brew Editor');
+			.themeSelector {
+				position         : absolute;
+				top              : 25px;
+				right            : 0;
+				z-index          : 10;
+				display          : flex;
+				align-items      : center;
+				justify-content  : center;
+				width            : 170px;
+				height           : inherit;
+				background-color : inherit;
 			}
-			&.style {
-				.tooltipLeft('Style Editor');
-			}
-			&.meta {
-				.tooltipLeft('Properties');
-			}
-			&.undo {
-				.tooltipLeft('Undo');
-				font-size : 0.75em;
-				color     : grey;
-				&.active { color : inherit; }
-			}
-			&.redo {
-				.tooltipLeft('Redo');
-				font-size : 0.75em;
-				color     : grey;
-				&.active { color : inherit; }
-			}
-			&.foldAll {
-				.tooltipLeft('Fold All');
-				font-size : 0.75em;
-				color     : inherit;
-			}
-			&.unfoldAll {
-				.tooltipLeft('Unfold All');
-				font-size : 0.75em;
-				color     : inherit;
-			}
-			&.history {
-				.tooltipLeft('History');
-				position  : relative;
-				font-size : 0.75em;
-				color     : grey;
-				&.active { color : inherit; }
-				& > .dropdown {
-					right         : -1px;
-					& > .snippet { padding-right : 10px; }
-				}
-			}
-			&.editorTheme {
-				.tooltipLeft('Editor Themes');
-				font-size : 0.75em;
-				color     : black;
-				&.active {
-					position         : relative;
-					background-color : #999999;
-				}
-			}
-			&.divider {
-				width      : 5px;
-				background : linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
-				&:hover { background-color : inherit; }
-			}
-		}
-		.themeSelector {
-			position         : absolute;
-			top              : 25px;
-			right            : 0;
-			z-index          : 10;
-			display          : flex;
-			align-items      : center;
-			justify-content  : center;
-			width            : 170px;
-			height           : inherit;
-			background-color : inherit;
-		}
+		}		
 	}
 	.snippetBarButton {
 		display        : inline-block;
@@ -112,6 +121,7 @@
 		font-weight    : 800;
 		line-height    : @menuHeight;
 		text-transform : uppercase;
+		text-wrap      : nowrap;
 		cursor         : pointer;
 		&:hover, &.selected { background-color : #999999; }
 		i {
@@ -128,7 +138,7 @@
 		.tooltipLeft('Edit Brew Properties');
 	}
 	.snippetGroup {
-		border-right   : 1px solid currentColor;
+
 		&:hover {
 			& > .dropdown { visibility : visible; }
 		}
@@ -187,6 +197,7 @@
 					}
 				}
 				.name { margin-right : auto; }
+				.disabled { text-decoration : line-through; }
 				.beta {
 					align-self    : center;
 					padding       : 4px 6px;
@@ -212,4 +223,19 @@
 			}
 		}
 	}
-}
+}
+@container editor (width < 553px) {
+	.snippetBar {
+		.editors { 
+			flex            : 1;
+			justify-content : space-between;
+			border-bottom   : 1px solid;
+		}
+		.snippets { 
+			flex            : 1;
+			justify-content : space-evenly; 
+		}
+		.editors > div.history > .dropdown { right : unset; }
+	}
+}
+
--- a/client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx
+++ b/client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx
@@ -1,149 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const _     = require('lodash');
-
-const StringArrayEditor = createClass({
-	displayName     : 'StringArrayEditor',
-	getDefaultProps : function() {
-		return {
-			label         : '',
-			values        : [],
-			valuePatterns : null,
-			validators    : [],
-			placeholder   : '',
-			notes         : [],
-			unique        : false,
-			cannotEdit    : [],
-			onChange      : ()=>{}
-		};
-	},
-
-	getInitialState : function() {
-		return {
-			valueContext : !!this.props.values ? this.props.values.map((value)=>({
-				value,
-				editing : false
-			})) : [],
-			temporaryValue : '',
-			updateValue    : ''
-		};
-	},
-
-	componentDidUpdate : function(prevProps) {
-		if(!_.eq(this.props.values, prevProps.values)) {
-			this.setState({
-				valueContext : this.props.values ? this.props.values.map((newValue)=>({
-					value   : newValue,
-					editing : this.state.valueContext.find(({ value })=>value === newValue)?.editing || false
-				})) : []
-			});
-		}
-	},
-
-	handleChange : function(value) {
-		this.props.onChange({
-			target : {
-				value
-			}
-		});
-	},
-
-	addValue : function(value){
-		this.handleChange(_.uniq([...this.props.values, value]));
-		this.setState({
-			temporaryValue : ''
-		});
-	},
-
-	removeValue : function(index){
-		this.handleChange(this.props.values.filter((_, i)=>i !== index));
-	},
-
-	updateValue : function(value, index){
-		const valueContext = this.state.valueContext;
-		valueContext[index].value = value;
-		valueContext[index].editing = false;
-		this.handleChange(valueContext.map((context)=>context.value));
-		this.setState({ valueContext, updateValue: '' });
-	},
-
-	editValue : function(index){
-		if(!!this.props.cannotEdit && this.props.cannotEdit.includes(this.props.values[index])) {
-			return;
-		}
-		const valueContext = this.state.valueContext.map((context, i)=>{
-			context.editing = index === i;
-			return context;
-		});
-		this.setState({ valueContext, updateValue: this.props.values[index] });
-	},
-
-	valueIsValid : function(value, index) {
-		const values = _.clone(this.props.values);
-		if(index !== undefined) {
-			values.splice(index, 1);
-		}
-		const matchesPatterns = !this.props.valuePatterns || this.props.valuePatterns.some((pattern)=>!!(value || '').match(pattern));
-		const uniqueIfSet = !this.props.unique || !values.includes(value);
-		const passesValidators = !this.props.validators || this.props.validators.every((validator)=>validator(value));
-		return matchesPatterns && uniqueIfSet && passesValidators;
-	},
-
-	handleValueInputKeyDown : function(event, index) {
-		if(event.key === 'Enter') {
-			if(this.valueIsValid(event.target.value, index)) {
-				if(index !== undefined) {
-					this.updateValue(event.target.value, index);
-				} else {
-					this.addValue(event.target.value);
-				}
-			}
-		} else if(event.key === 'Escape') {
-			this.closeEditInput(index);
-		}
-	},
-
-	closeEditInput : function(index) {
-		const valueContext = this.state.valueContext;
-		valueContext[index].editing = false;
-		this.setState({ valueContext, updateValue: '' });
-	},
-
-	render : function() {
-		const valueElements = Object.values(this.state.valueContext).map((context, i)=>context.editing
-			? <React.Fragment key={i}>
-				<div className='input-group'>
-					<input type='text' className={`value ${this.valueIsValid(this.state.updateValue, i) ? '' : 'invalid'}`} autoFocus placeholder={this.props.placeholder}
-						value={this.state.updateValue}
-						onKeyDown={(e)=>this.handleValueInputKeyDown(e, i)}
-						onChange={(e)=>this.setState({ updateValue: e.target.value })}/>
-					{<div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.closeEditInput(i); }}><i className='fa fa-undo fa-fw'/></div>}
-					{this.valueIsValid(this.state.updateValue, i) ? <div className='icon steel'  onClick={(e)=>{ e.stopPropagation(); this.updateValue(this.state.updateValue, i); }}><i className='fa fa-check fa-fw'/></div> : null}
-				</div>
-			</React.Fragment>
-			: <div className='badge' key={i} onClick={()=>this.editValue(i)}>{context.value}
-				{!!this.props.cannotEdit && this.props.cannotEdit.includes(context.value) ? null : <div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.removeValue(i); }}><i className='fa fa-times fa-fw'/></div>}
-			</div>
-		);
-
-		return <div className='field'>
-			<label>{this.props.label}</label>
-			<div style={{ flex: '1 0' }} className='value'>
-				<div className='list'>
-					{valueElements}
-					<div className='input-group'>
-						<input type='text' className={`value ${this.valueIsValid(this.state.temporaryValue) ? '' : 'invalid'}`} placeholder={this.props.placeholder}
-							   value={this.state.temporaryValue}
-							   onKeyDown={(e)=>this.handleValueInputKeyDown(e)}
-							   onChange={(e)=>this.setState({ temporaryValue: e.target.value })}/>
-						{this.valueIsValid(this.state.temporaryValue) ? <div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.addValue(this.state.temporaryValue); }}><i className='fa fa-check fa-fw'/></div> : null}
-					</div>
-				</div>
-
-				{this.props.notes ? this.props.notes.map((n, index)=><p key={index}><small>{n}</small></p>) : null}
-			</div>
-		</div>;
-	}
-});
-
-module.exports = StringArrayEditor;
--- a/client/homebrew/editor/tagInput/tagInput.jsx
+++ b/client/homebrew/editor/tagInput/tagInput.jsx
@@ -0,0 +1,105 @@
+require('./tagInput.less');
+const React = require('react');
+const { useState, useEffect } = React;
+const _     = require('lodash');
+
+const TagInput = ({ unique = true, values = [], ...props }) => {
+	const [tempInputText, setTempInputText] = useState('');
+	const [tagList, setTagList] = useState(values.map((value) => ({ value, editing: false })));
+
+	useEffect(()=>{
+		handleChange(tagList.map((context)=>context.value))
+	}, [tagList])
+
+	const handleChange = (value)=>{
+		props.onChange({
+			target : { value }
+		})
+	};
+
+	const handleInputKeyDown = ({ evt, value, index, options = {} }) => {
+		if (_.includes(['Enter', ','], evt.key)) {
+			evt.preventDefault();
+			submitTag(evt.target.value, value, index);
+			if (options.clear) {
+				setTempInputText('');
+			}
+		}
+	};
+
+	const submitTag = (newValue, originalValue, index) => {
+		setTagList((prevContext) => {
+			// remove existing tag
+			if(newValue === null){
+				return [...prevContext].filter((context, i)=>i !== index);
+			}
+			// add new tag
+			if(originalValue === null){
+				return [...prevContext, { value: newValue, editing: false }]
+			}
+			// update existing tag
+			return prevContext.map((context, i) => {
+				if (i === index) {
+					return { ...context, value: newValue, editing: false };
+				}
+				return context;
+			});
+		});
+	};
+
+	const editTag = (index) => {
+		setTagList((prevContext) => {
+			return prevContext.map((context, i) => {
+				if (i === index) {
+					return { ...context, editing: true };
+				}
+				return { ...context, editing: false };
+			});
+		});
+	};
+
+	const renderReadTag = (context, index) => {
+		return (
+			<li key={index}
+				data-value={context.value}
+				className='tag'
+				onClick={() => editTag(index)}>
+				{context.value}
+				<button onClick={(evt)=>{evt.stopPropagation(); submitTag(null, context.value, index)}}><i className='fa fa-times fa-fw'/></button>
+			</li>
+		);
+	};
+
+	const renderWriteTag = (context, index) => {
+		return (
+			<input type='text'
+				key={index}
+				defaultValue={context.value} 
+				onKeyDown={(evt) => handleInputKeyDown({evt, value: context.value, index: index})} 
+				autoFocus 
+			/>
+		);
+	};
+
+	return (
+		<div className='field'>
+			<label>{props.label}</label>
+			<div className='value'>
+				<ul className='list'>
+					{tagList.map((context, index) => { return context.editing ? renderWriteTag(context, index) : renderReadTag(context, index); })}
+				</ul>
+
+				<input
+					type='text'
+					className='value'
+					placeholder={props.placeholder}
+					value={tempInputText}
+					onChange={(e) => setTempInputText(e.target.value)}
+					onKeyDown={(evt) => handleInputKeyDown({ evt, value: null, options: { clear: true } })}
+				/>
+			</div>
+		</div>
+	);
+};
+
+module.exports = TagInput;
--- a/client/homebrew/editor/tagInput/tagInput.less
+++ b/client/homebrew/editor/tagInput/tagInput.less
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -25,12 +25,11 @@

 .homebrew nav {
 	background-color : #333333;
-	.navContent {
-		position        : relative;
-		z-index         : 2;
-		display         : flex;
-		justify-content : space-between;
-	}
+	position        : relative;
+	z-index         : 2;
+	display         : flex;
+	justify-content : space-between;
+	
 	.navSection {
 		display     : flex;
 		align-items : center;
--- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
+++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
@@ -2,7 +2,7 @@ require('./brewItem.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const moment = require('moment');
-const request = require('../../../../utils/request-middleware.js');
+import request from '../../../../utils/request-middleware.js';

 const googleDriveIcon = require('../../../../googleDrive.svg');
 const homebreweryIcon = require('../../../../thumbnail.png');
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -4,7 +4,7 @@ const React = require('react');
 const _ = require('lodash');
 const createClass = require('create-react-class');

-const request = require('../../utils/request-middleware.js');
+import request from '../../utils/request-middleware.js';
 const { Meta } = require('vitreum/headtags');

 const Nav = require('naturalcrit/nav/nav.jsx');
@@ -16,6 +16,7 @@ const PrintNavItem = require('../../navbar/print.navitem.jsx');
 const ErrorNavItem = require('../../navbar/error-navitem.jsx');
 const Account = require('../../navbar/account.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
+const VaultNavItem = require('../../navbar/vault.navitem.jsx');

 const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
@@ -23,7 +24,7 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');

 const LockNotification = require('./lockNotification/lockNotification.jsx');

-const Markdown = require('naturalcrit/markdown.js');
+import Markdown from 'naturalcrit/markdown.js';

 const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
 const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
@@ -228,8 +229,8 @@ const EditPage = createClass({
 			htmlErrors : Markdown.validate(prevState.brew.text)
 		}));

-		await updateHistory(this.state.brew);
-		await versionHistoryGarbageCollection();
+		await updateHistory(this.state.brew).catch(console.error);
+		await versionHistoryGarbageCollection().catch(console.error);

 		const transfer = this.state.saveGoogle == _.isNil(this.state.brew.googleId);

@@ -417,6 +418,7 @@ const EditPage = createClass({
 					</Nav.item>
 				</Nav.dropdown>
 				<PrintNavItem />
+				<VaultNavItem />
 				<RecentNavItem brew={this.state.brew} storageKey='edit' />
 				<Account />
 			</Nav.section>
@@ -429,41 +431,41 @@ const EditPage = createClass({
 			<Meta name='robots' content='noindex, nofollow' />
 			{this.renderNavbar()}

-			<div className='content'>
-				{this.props.brew.lock && <LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} />}
-				<SplitPane onDragFinish={this.handleSplitMove}>
-					<Editor
-						ref={this.editor}
-						brew={this.state.brew}
-						onTextChange={this.handleTextChange}
-						onStyleChange={this.handleStyleChange}
-						onMetaChange={this.handleMetaChange}
-						reportError={this.errorReported}
-						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}
-						style={this.state.brew.style}
-						renderer={this.state.brew.renderer}
-						theme={this.state.brew.theme}
-						themeBundle={this.state.themeBundle}
-						errors={this.state.htmlErrors}
-						lang={this.state.brew.lang}
-						onPageChange={this.handleBrewRendererPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-						allowPrint={true}
-					/>
-				</SplitPane>
+			{this.props.brew.lock && <LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} />}
+			<div className="content">
+			<SplitPane onDragFinish={this.handleSplitMove}>
+				<Editor
+					ref={this.editor}
+					brew={this.state.brew}
+					onTextChange={this.handleTextChange}
+					onStyleChange={this.handleStyleChange}
+					onMetaChange={this.handleMetaChange}
+					reportError={this.errorReported}
+					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}
+					style={this.state.brew.style}
+					renderer={this.state.brew.renderer}
+					theme={this.state.brew.theme}
+					themeBundle={this.state.themeBundle}
+					errors={this.state.htmlErrors}
+					lang={this.state.brew.lang}
+					onPageChange={this.handleBrewRendererPageChange}
+					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+					allowPrint={true}
+				/>
+			</SplitPane>
 			</div>
 		</div>;
 	}
--- a/client/homebrew/pages/errorPage/errorPage.jsx
+++ b/client/homebrew/pages/errorPage/errorPage.jsx
@@ -1,7 +1,7 @@
 require('./errorPage.less');
 const React      = require('react');
 const UIPage     = require('../basePages/uiPage/uiPage.jsx');
-const Markdown   = require('../../../../shared/naturalcrit/markdown.js');
+import Markdown  from '../../../../shared/naturalcrit/markdown.js';
 const ErrorIndex = require('./errors/errorIndex.js');

 const ErrorPage = ({ brew })=>{
--- a/client/homebrew/pages/homePage/homePage.jsx
+++ b/client/homebrew/pages/homePage/homePage.jsx
@@ -2,7 +2,7 @@ require('./homePage.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const cx = require('classnames');
-const request = require('../../utils/request-middleware.js');
+import request from '../../utils/request-middleware.js';
 const { Meta } = require('vitreum/headtags');

 const Nav = require('naturalcrit/nav/nav.jsx');
@@ -100,35 +100,33 @@ const HomePage = createClass({
 		return <div className='homePage sitePage'>
 			<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
 			{this.renderNavbar()}
-
-			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove}>
-					<Editor
-						ref={this.editor}
-						brew={this.state.brew}
-						onTextChange={this.handleTextChange}
-						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}
-						onPageChange={this.handleBrewRendererPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-						themeBundle={this.state.themeBundle}
-					/>
-				</SplitPane>
+			<div className="content">
+			<SplitPane onDragFinish={this.handleSplitMove}>
+				<Editor
+					ref={this.editor}
+					brew={this.state.brew}
+					onTextChange={this.handleTextChange}
+					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}
+					onPageChange={this.handleBrewRendererPageChange}
+					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+					themeBundle={this.state.themeBundle}
+				/>
+			</SplitPane>
 			</div>
-
 			<div className={cx('floatingSaveButton', { show: this.state.welcomeText != this.state.brew.text })} onClick={this.handleSave}>
 				Save current <i className='fas fa-save' />
 			</div>
--- a/client/homebrew/pages/homePage/welcome_msg.md
+++ b/client/homebrew/pages/homePage/welcome_msg.md
@@ -91,13 +91,6 @@ If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana](

 \page

-
-
-
-
-
-
-
 ## Markdown+
 The Homebrewery aims to make homebrewing as simple as possible, providing a live editor with Markdown syntax that is more human-readable and faster to write with than raw HTML.

--- a/client/homebrew/pages/newPage/newPage.jsx
+++ b/client/homebrew/pages/newPage/newPage.jsx
@@ -2,9 +2,9 @@
 require('./newPage.less');
 const React = require('react');
 const createClass = require('create-react-class');
-const request = require('../../utils/request-middleware.js');
+import request from '../../utils/request-middleware.js';

-const Markdown = require('naturalcrit/markdown.js');
+import Markdown from 'naturalcrit/markdown.js';

 const Nav = require('naturalcrit/nav/nav.jsx');
 const PrintNavItem = require('../../navbar/print.navitem.jsx');
@@ -223,38 +223,38 @@ const NewPage = createClass({
 	render : function(){
 		return <div className='newPage sitePage'>
 			{this.renderNavbar()}
-			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove}>
-					<Editor
-						ref={this.editor}
-						brew={this.state.brew}
-						onTextChange={this.handleTextChange}
-						onStyleChange={this.handleStyleChange}
-						onMetaChange={this.handleMetaChange}
-						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}
-						style={this.state.brew.style}
-						renderer={this.state.brew.renderer}
-						theme={this.state.brew.theme}
-						themeBundle={this.state.themeBundle}
-						errors={this.state.htmlErrors}
-						lang={this.state.brew.lang}
-						onPageChange={this.handleBrewRendererPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-						allowPrint={true}
-					/>
-				</SplitPane>
+			<div className="content">
+			<SplitPane onDragFinish={this.handleSplitMove}>
+				<Editor
+					ref={this.editor}
+					brew={this.state.brew}
+					onTextChange={this.handleTextChange}
+					onStyleChange={this.handleStyleChange}
+					onMetaChange={this.handleMetaChange}
+					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}
+					style={this.state.brew.style}
+					renderer={this.state.brew.renderer}
+					theme={this.state.brew.theme}
+					themeBundle={this.state.themeBundle}
+					errors={this.state.htmlErrors}
+					lang={this.state.brew.lang}
+					onPageChange={this.handleBrewRendererPageChange}
+					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+					allowPrint={true}
+				/>
+			</SplitPane>
 			</div>
 		</div>;
 	}
--- a/client/homebrew/pages/sharePage/sharePage.jsx
+++ b/client/homebrew/pages/sharePage/sharePage.jsx
@@ -8,6 +8,7 @@ const Navbar = require('../../navbar/navbar.jsx');
 const MetadataNav = require('../../navbar/metadata.navitem.jsx');
 const PrintNavItem = require('../../navbar/print.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
+const VaultNavItem = require('../../navbar/vault.navitem.jsx');
 const Account = require('../../navbar/account.navitem.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');

@@ -110,6 +111,7 @@ const SharePage = createClass({
 							</Nav.item>
 						</Nav.dropdown>
 					</>}
+					<VaultNavItem/>
 					<RecentNavItem brew={this.props.brew} storageKey='view' />
 					<Account />
 				</Nav.section>
--- a/client/homebrew/pages/sharePage/sharePage.less
+++ b/client/homebrew/pages/sharePage/sharePage.less
@@ -1,5 +1,5 @@
 .sharePage{
-	.navContent .navSection.titleSection {
+	nav .navSection.titleSection {
 		flex-grow: 1;
 		justify-content: center;
 	}
--- a/client/homebrew/pages/userPage/userPage.jsx
+++ b/client/homebrew/pages/userPage/userPage.jsx
@@ -1,12 +1,11 @@
 const React = require('react');
-const createClass = require('create-react-class');
-const _     = require('lodash');
+const { useState } = React;
+const _ = require('lodash');

 const ListPage = require('../basePages/listPage/listPage.jsx');

 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');
@@ -14,69 +13,48 @@ 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',
-	getDefaultProps : function() {
-		return {
-			username : '',
-			brews    : [],
-			query    : '',
-			error    : null
-		};
-	},
-	getInitialState : function() {
-		const usernameWithS = this.props.username + (this.props.username.endsWith('s') ? `’` : `’s`);
+const UserPage = (props)=>{
+	props = {
+		username : '',
+		brews    : [],
+		query    : '',
+		...props
+	};

-		const brews = _.groupBy(this.props.brews, (brew)=>{
-			return (brew.published ? 'published' : 'private');
-		});
+	const [error, setError] = useState(null);

-		const brewCollection = [
-			{
-				title : `${usernameWithS} published brews`,
-				class : 'published',
-				brews : brews.published
-			}
-		];
-		if(this.props.username == global.account?.username){
-			brewCollection.push(
-				{
-					title : `${usernameWithS} unpublished brews`,
-					class : 'unpublished',
-					brews : brews.private
-				}
-			);
-		}
+	const usernameWithS = props.username + (props.username.endsWith('s') ? `’` : `’s`);
+	const groupedBrews = _.groupBy(props.brews, (brew)=>brew.published ? 'published' : 'private');

-		return {
-			brewCollection : brewCollection
-		};
-	},
-	errorReported : function(error) {
-		this.setState({
-			error
-		});
-	},
+	const brewCollection = [
+		{
+			title : `${usernameWithS} published brews`,
+			class : 'published',
+			brews : groupedBrews.published || []
+		},
+		...(props.username === global.account?.username ? [{
+			title : `${usernameWithS} unpublished brews`,
+			class : 'unpublished',
+			brews : groupedBrews.private || []
+		}] : [])
+	];

-	navItems : function() {
-		return <Navbar>
+	const navItems = (
+		<Navbar>
 			<Nav.section>
-				{this.state.error ?
-					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
-					null
-				}
+				{error && (<ErrorNavItem error={error} parent={null}></ErrorNavItem>)}
 				<NewBrew />
 				<HelpNavItem />
-				<VaultNavitem/>
+				<VaultNavitem />
 				<RecentNavItem />
 				<Account />
 			</Nav.section>
-		</Navbar>;
-	},
+		</Navbar>
+	);

-	render : function(){
-		return <ListPage brewCollection={this.state.brewCollection} navItems={this.navItems()} query={this.props.query} reportError={this.errorReported}></ListPage>;
-	}
-});
+	return (
+		<ListPage brewCollection={brewCollection}  navItems={navItems} query={props.query} reportError={(err)=>setError(err)} />
+	);
+};

 module.exports = UserPage;
--- a/client/homebrew/pages/vaultPage/vaultPage.jsx
+++ b/client/homebrew/pages/vaultPage/vaultPage.jsx
@@ -15,7 +15,7 @@ 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');
+import request from '../../utils/request-middleware.js';

 const VaultPage = (props)=>{
 	const [pageState, setPageState] = useState(parseInt(props.query.page) || 1);
@@ -411,19 +411,18 @@ const VaultPage = (props)=>{
 	};

 	return (
-		<div className='vaultPage'>
+		<div className='sitePage 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 className="content">
+			<SplitPane showDividerButtons={false}>
+				<div className='form dataGroup'>{renderForm()}</div>
+				<div className='resultsContainer dataGroup'>
+					{renderSortBar()}
+					{renderFoundBrews()}
+				</div>
+			</SplitPane>
 			</div>
 		</div>
 	);
--- a/client/homebrew/pages/vaultPage/vaultPage.less
+++ b/client/homebrew/pages/vaultPage/vaultPage.less
@@ -5,373 +5,331 @@

 	*:not(input) { user-select : none; }

-	.content {
+	.content .dataGroup {
+		width      : 100%;
 		height     : 100%;
-		background : #2C3E50;
+		background : white;

-		.dataGroup {
-			width      : 100%;
-			height     : 100%;
-			background : white;
+		&.form .brewLookup {
+			position : relative;
+			padding  : 50px clamp(20px, 4vw, 50px);

-			&.form .brewLookup {
-				position : relative;
-				padding  : 50px clamp(20px, 4vw, 50px);
-
-				small {
-					font-size : 10pt;
-					color     : #555555;
+			small {
+				font-size : 10pt;
+				color     : #555555;
 			
-					a { color : #333333; }
-				}
+				a { color : #333333; }
+			}

-				code {
-					padding-inline : 5px;
-					font-family    : monospace;
-					background     : lightgrey;
-					border-radius  : 5px;
-				}
+			code {
+				padding-inline : 5px;
+				font-family    : monospace;
+				background     : lightgrey;
+				border-radius  : 5px;
+			}

-				h1, h2, h3, h4 {
-					font-family    : 'CodeBold';
-					letter-spacing : 2px;
-				}
+			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;
+			legend {
+				h3 {
+					margin-block  : 30px 20px;
+					font-size     : 20px;
 					text-align    : center;
 					border-bottom : 2px solid;
 				}
-
-				.formContents {
-					position       : relative;
-					display        : flex;
-					flex-direction : column;
-
-					label {
-						display     : flex;
-						align-items : center; 
-						margin      : 10px 0;
+				ul {
+					padding-inline : 30px 10px;
+					li {
+						margin-block : 5px;
+						line-height  : calc(1em + 5px);
+						list-style   : disc;
 					}
-					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 {
+			&::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;
-				height         : 100%;
-				overflow-y     : auto;
-				font-family    : 'BookInsanityRemake';
-				font-size      : 0.34cm;
-				
-				h3 {
-					font-family : 'Open Sans';
-					font-weight : 900;
-					color       : white;
+
+				label {
+					display     : flex;
+					align-items : center; 
+					margin      : 10px 0;
+				}
+				select { margin : 0 10px; }
+
+				input { 
+					margin   : 0 10px; 
+
+					&:invalid { background : rgb(255, 188, 181); }
+					
+					
 				}

-				.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; }
-						}
+				#searchButton {
+					.colorButton(@green);
+					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-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 {
+						.colorButton(@green);
+						width : max-content;
+
+						&.previousPage { grid-area : previousPage; }
+
+						&.nextPage { grid-area : nextPage; }
+					}
+
+				}
+			}
+		}
 	}
+	
 }

@keyframes trailingDots {
@@ -388,7 +346,7 @@

 // media query for when the page is smaller than 1079 px in width
@media screen and (max-width : 1079px) {
-	.vaultPage .content {
+	.vaultPage {

 		.dataGroup.form .brewLookup { padding : 1px 20px 20px 10px; }

--- a/client/homebrew/utils/customIDBStore.js
+++ b/client/homebrew/utils/customIDBStore.js
@@ -0,0 +1,19 @@
+import * as IDB from 'idb-keyval/dist/index.js';
+
+export function initCustomStore(db, store){
+	const createCustomStore = async ()=>IDB.createStore(db, store);
+
+	return {
+		entries : async ()=>IDB.entries(await createCustomStore()),
+		keys    : async ()=>IDB.keys(await createCustomStore()),
+		values  : async ()=>IDB.values(await createCustomStore()),
+		clear   : async ()=>IDB.clear(await createCustomStore),
+		get     : async (key)=>IDB.get(key, await createCustomStore()),
+		getMany : async (keys)=>IDB.getMany(keys, await createCustomStore()),
+		set     : async (key, value)=>IDB.set(key, value, await createCustomStore()),
+		setMany : async (entries)=>IDB.setMany(entries, await createCustomStore()),
+		update  : async (key, updateFn)=>IDB.update(key, updateFn, await createCustomStore()),
+		del     : async (key)=>IDB.del(key, await createCustomStore()),
+		delMany : async (keys)=>IDB.delMany(keys, await createCustomStore())
+	};
+};
--- a/client/homebrew/utils/request-middleware.js
+++ b/client/homebrew/utils/request-middleware.js
@@ -1,4 +1,4 @@
-const request = require('superagent');
+import request from 'superagent';

 const addHeader = (request)=>request.set('Homebrewery-Version', global.version);

@@ -9,4 +9,4 @@ const requestMiddleware = {
 	delete : (path)=>addHeader(request.delete(path)),
 };

-module.exports = requestMiddleware;
+export default requestMiddleware;
--- a/client/homebrew/utils/versionHistory.js
+++ b/client/homebrew/utils/versionHistory.js
@@ -1,4 +1,4 @@
-import * as IDB from 'idb-keyval/dist/index.js';
+import { initCustomStore } from './customIDBStore.js';

 export const HISTORY_PREFIX = 'HOMEBREWERY-HISTORY';
 export const HISTORY_SLOTS = 5;
@@ -21,13 +21,15 @@ const HISTORY_SAVE_DELAYS = {
 // 	'5' : 5
 // };

-const HB_DB = 'HOMEBREWERY-DB';
-const HB_STORE = 'HISTORY';
-
 const GARBAGE_COLLECT_DELAY = 28 * 24 * 60;
 // const GARBAGE_COLLECT_DELAY = 10;


+const HB_DB = 'HOMEBREWERY-DB';
+const HB_STORE = 'HISTORY';
+
+const IDB = initCustomStore(HB_DB, HB_STORE);
+
 function getKeyBySlot(brew, slot){
 	// Return a string representing the key for this brew and history slot
 	return `${HISTORY_PREFIX}-${brew.shareId}-${slot}`;
@@ -53,11 +55,6 @@ function parseBrewForStorage(brew, slot = 0) {
 	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 };

@@ -69,7 +66,7 @@ export async function loadHistory(brew){
 	};

 	// Load all keys from IDB at once
-	const dataArray = await IDB.getMany(historyKeys, await createHBStore());
+	const dataArray = await IDB.getMany(historyKeys);
 	return dataArray.map((data)=>{ return data ?? DEFAULT_HISTORY_ITEM; });
 }

@@ -97,7 +94,7 @@ export async function updateHistory(brew) {
 			// Update the most recent brew
 			historyUpdate.push(parseBrewForStorage(brew, 1));

-			await IDB.setMany(historyUpdate, await createHBStore());
+			await IDB.setMany(historyUpdate);

 			// Break out of data checks because we found an expired value
 			break;
@@ -106,14 +103,17 @@ export async function updateHistory(brew) {
 };

 export async function versionHistoryGarbageCollection(){
+	const entries = await IDB.entries();

-	const entries = await IDB.entries(await createHBStore());
-
+	const expiredKeys = [];
 	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());
+			expiredKeys.push(key);
 		};
 	};
+	if(expiredKeys.length > 0){
+		await IDB.delMany(expiredKeys);
+	}
 };