Make autosave common/move save button into common format

Moving mount/unmount over. Missing states and imports.
Move most common "handler" functions (textChange/splitMoves/etc.)
2026-01-23 20:53:05 +00:00 · 2025-08-30 16:28:54 -04:00 · 2025-08-20 16:31:12 -04:00 · 2025-08-20 16:30:44 -04:00 · 2025-08-20 16:29:29 -04:00 · 2025-08-20 16:28:05 -04:00
15 changed files with 761 additions and 1001 deletions
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -39,8 +39,8 @@ const BrewPage = (props)=>{
 		index    : 0,
 		...props
 	};
-	const pageRef   = useRef(null);
-	const cleanText = safeHTML(props.contents);
+	const pageRef = useRef(null);
+	const cleanText = safeHTML(`${props.contents}\n<div class="columnSplit"></div>\n`);

 	useEffect(()=>{
 		if(!pageRef.current) return;
--- a/client/homebrew/navbar/error-navitem.jsx
+++ b/client/homebrew/navbar/error-navitem.jsx
@@ -1,138 +1,157 @@
 require('./error-navitem.less');
 const React = require('react');
 const Nav = require('naturalcrit/nav/nav.jsx');
+const createClass = require('create-react-class');

-const ErrorNavItem = ({error = '', clearError})=>{
-	const response    = error.response;
-	const errorCode   = error.code
-	const status      = response?.status;
-	const HBErrorCode = response?.body?.HBErrorCode;
-	const message     = response?.body?.message;
+const ErrorNavItem = createClass({
+	getDefaultProps : function() {
+		return {
+			error  : '',
+			parent : null
+		};
+	},
+	render : function() {
+		const clearError = ()=>{
+			const state = {
+				error : null
+			};
+			if(this.props.parent.state.isSaving) {
+				state.isSaving = false;
+			}
+			this.props.parent.setState(state);
+		};

-	let errMsg = '';
-	try {
-		errMsg += `${error.toString()}\n\n`;
-		errMsg += `\`\`\`\n${error.stack}\n`;
-		errMsg += `${JSON.stringify(response?.error, null, '  ')}\n\`\`\``;
-		console.log(errMsg);
-	} catch (e){}
+		const error       = this.props.error;
+		const response    = error.response;
+		const status      = response?.status;
+		const errorCode   = error.code
+		const HBErrorCode = response?.body?.HBErrorCode;
+		const message     = response?.body?.message;
+		let errMsg = '';
+		try {
+			errMsg += `${error.toString()}\n\n`;
+			errMsg += `\`\`\`\n${error.stack}\n`;
+			errMsg += `${JSON.stringify(response?.error, null, '  ')}\n\`\`\``;
+			console.log(errMsg);
+		} catch (e){}

-	if(status === 409) {
-		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			Oops!
-			<div className='errorContainer' onClick={clearError}>
-				{message ?? 'Conflict: please refresh to get latest changes'}
-			</div>
-		</Nav.item>;
-	}
-
-	if(status === 412) {
-		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			Oops!
-			<div className='errorContainer' onClick={clearError}>
-				{message ?? 'Your client is out of date. Please save your changes elsewhere and refresh.'}
-			</div>
-		</Nav.item>;
-	}
-
-	if(HBErrorCode === '04') {
-		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			Oops!
-			<div className='errorContainer' onClick={clearError}>
-				You are no longer signed in as an author of
-				this brew! Were you signed out from a different
-				window? Visit our log in page, then try again!
-				<br></br>
-				<a target='_blank' rel='noopener noreferrer'
-					href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
-					<div className='confirm'>
-						Sign In
-					</div>
-				</a>
-				<div className='deny'>
-					Not Now
+		if(status === 409) {
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+				Oops!
+				<div className='errorContainer' onClick={clearError}>
+					{message ?? 'Conflict: please refresh to get latest changes'}
 				</div>
-			</div>
-		</Nav.item>;
-	}
+			</Nav.item>;
+		}

-	if(response?.body?.errors?.[0].reason == 'storageQuotaExceeded') {
-		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-		Oops!
-			<div className='errorContainer' onClick={clearError}>
-			Can't save because your Google Drive seems to be full!
-			</div>
-		</Nav.item>;
-	}
-
-	if(response?.req.url.match(/^\/api.*Google.*$/m)){
-		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			Oops!
-			<div className='errorContainer' onClick={clearError}>
-				Looks like your Google credentials have
-				expired! Visit our log in page to sign out
-				and sign back in with Google,
-				then try saving again!
-				<br></br>
-				<a target='_blank' rel='noopener noreferrer'
-					href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
-					<div className='confirm'>
-						Sign In
-					</div>
-				</a>
-				<div className='deny'>
-					Not Now
+		if(status === 412) {
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+				Oops!
+				<div className='errorContainer' onClick={clearError}>
+					{message ?? 'Your client is out of date. Please save your changes elsewhere and refresh.'}
 				</div>
-			</div>
-		</Nav.item>;
-	}
+			</Nav.item>;
+		}
+
+		if(HBErrorCode === '04') {
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+				Oops!
+				<div className='errorContainer' onClick={clearError}>
+					You are no longer signed in as an author of
+					this brew! Were you signed out from a different
+					window? Visit our log in page, then try again!
+					<br></br>
+					<a target='_blank' rel='noopener noreferrer'
+						href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
+						<div className='confirm'>
+							Sign In
+						</div>
+					</a>
+					<div className='deny'>
+						Not Now
+					</div>
+				</div>
+			</Nav.item>;
+		}
+
+		if(response?.body?.errors?.[0].reason == 'storageQuotaExceeded') {
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+				<div className='errorContainer' onClick={clearError}>
+				Can't save because your Google Drive seems to be full!
+				</div>
+			</Nav.item>;
+		}
+
+		if(response?.req.url.match(/^\/api.*Google.*$/m)){
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+				Oops!
+				<div className='errorContainer' onClick={clearError}>
+					Looks like your Google credentials have
+					expired! Visit our log in page to sign out
+					and sign back in with Google,
+					then try saving again!
+					<br></br>
+					<a target='_blank' rel='noopener noreferrer'
+						href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
+						<div className='confirm'>
+							Sign In
+						</div>
+					</a>
+					<div className='deny'>
+						Not Now
+					</div>
+				</div>
+			</Nav.item>;
+		}
+
+		if(HBErrorCode === '09') {
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+				Oops!
+				<div className='errorContainer' onClick={clearError}>
+					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!
+				</div>
+			</Nav.item>;
+		}
+
+		if(HBErrorCode === '10') {
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+				Oops!
+				<div className='errorContainer' onClick={clearError}>
+					Looks like the brew you have selected
+					as a theme is not tagged for use as a
+					theme. Verify that
+					brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
+						{response.body.brewId}</a> has the <span className='lowercase'>meta:theme</span> tag!
+				</div>
+			</Nav.item>;
+		}
+
+		if(errorCode === 'ECONNABORTED') {
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+				Oops!
+				<div className='errorContainer' onClick={clearError}>
+					The request to the server was interrupted or timed out.
+					This can happen due to a network issue, or if
+					trying to save a particularly large brew.
+					Please check your internet connection and try again.
+				</div>
+			</Nav.item>;
+		}

-	if(HBErrorCode === '09') {
 		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 			Oops!
-			<div className='errorContainer' onClick={clearError}>
-				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!
+			<div className='errorContainer'>
+				Looks like there was a problem saving. <br />
+				Report the issue <a target='_blank' rel='noopener noreferrer' href={`https://github.com/naturalcrit/homebrewery/issues/new?template=save_issue.yml&error-code=${encodeURIComponent(errMsg)}`}>
+				here
+				</a>.
 			</div>
 		</Nav.item>;
 	}
-
-	if(HBErrorCode === '10') {
-		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			Oops!
-			<div className='errorContainer' onClick={clearError}>
-				Looks like the brew you have selected
-				as a theme is not tagged for use as a
-				theme. Verify that
-				brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
-					{response.body.brewId}</a> has the <span className='lowercase'>meta:theme</span> tag!
-			</div>
-		</Nav.item>;
-	}
-
-	if(errorCode === 'ECONNABORTED') {
-		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			Oops!
-			<div className='errorContainer' onClick={clearError}>
-				The request to the server was interrupted or timed out.
-				This can happen due to a network issue, or if
-				trying to save a particularly large brew.
-				Please check your internet connection and try again.
-			</div>
-		</Nav.item>;
-	}
-
-	return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-		Oops!
-		<div className='errorContainer'>
-			Looks like there was a problem saving. <br />
-			Report the issue <a target='_blank' rel='noopener noreferrer' href={`https://github.com/naturalcrit/homebrewery/issues/new?template=save_issue.yml&error-code=${encodeURIComponent(errMsg)}`}>
-			here
-			</a>.
-		</div>
-	</Nav.item>;
-};
+});

 module.exports = ErrorNavItem;
--- a/client/homebrew/navbar/newbrew.navitem.jsx
+++ b/client/homebrew/navbar/newbrew.navitem.jsx
@@ -5,45 +5,33 @@ const { splitTextStyleAndMetadata } = require('../../../shared/helpers.js'); //

 const BREWKEY  = 'homebrewery-new';
 const STYLEKEY = 'homebrewery-new-style';
-const METAKEY = 'homebrewery-new-meta';
+const METAKEY  = 'homebrewery-new-meta';

 const NewBrew = ()=>{
 	const handleFileChange = (e)=>{
 		const file = e.target.files[0];
-		if(!file) return;
-
-		const currentNew = localStorage.getItem(BREWKEY);
-		if(currentNew && !confirm(
-			`You have some text in the new brew space, if you load a file that text will be lost, are you sure you want to load the file?`
-		)) return;
-
-		const reader = new FileReader();
-		reader.onload = (e)=>{
-			const fileContent = e.target.result;
-			const newBrew = { text: fileContent, style: '' };
-
-			if(fileContent.startsWith('```metadata')) {
-				splitTextStyleAndMetadata(newBrew);
-				localStorage.setItem(BREWKEY, newBrew.text);
-				localStorage.setItem(STYLEKEY, newBrew.style);
-				localStorage.setItem(METAKEY, JSON.stringify(
-					_.pick(newBrew, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang'])
-				));
-				window.location.href = '/new';
-				return;
-			}
-
-			const type = file.name.split('.').pop().toLowerCase();
-			
-			alert(`This file is invalid: ${!type ? "Missing file extension" :`.${type} files are not supported`}. Only .txt files exported from the Homebrewery are allowed.`);
-
-
-			console.log(file);
-		};
-		reader.readAsText(file);
+		if(file) {
+			const reader = new FileReader();
+			reader.onload = (e)=>{
+				const fileContent = e.target.result;
+				const newBrew = {
+					text  : fileContent,
+					style : ''
+				};
+				if(fileContent.startsWith('```metadata')) {
+					splitTextStyleAndMetadata(newBrew); // Modify newBrew directly
+					localStorage.setItem(BREWKEY, newBrew.text);
+					localStorage.setItem(STYLEKEY, newBrew.style);
+					localStorage.setItem(METAKEY, JSON.stringify(_.pick(newBrew, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang'])));
+					window.location.href = '/new';
+				} else {
+					alert('This file is invalid, please, enter a valid file');
+				}
+			};
+			reader.readAsText(file);
+		}
 	};

-
 	return (
 		<Nav.dropdown>
 			<Nav.item
--- a/client/homebrew/pages/basePages/editPage/editPage.jsx
+++ b/client/homebrew/pages/basePages/editPage/editPage.jsx
@@ -0,0 +1,309 @@
+require('./editPage.less');
+const React = require('react');
+const _ = require('lodash');
+
+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 PrintNavItem = require('../../../navbar/print.navitem.jsx');
+const ErrorNavItem = require('../../../navbar/error-navitem.jsx');
+const AccountNavItem = require('../../../navbar/account.navitem.jsx');
+const RecentNavItem = require('../../../navbar/recent.navitem.jsx').both;
+const VaultNavItem = require('../../../navbar/vault.navitem.jsx');
+
+const SplitPane = require('client/components/splitPane/splitPane.jsx');
+const Editor = require('../../../editor/editor.jsx');
+const BrewRenderer = require('../../../brewRenderer/brewRenderer.jsx');
+
+const { fetchThemeBundle } = require('../../../../../shared/helpers.js');
+
+import { useEffect, useState, useRef } from 'react';
+import Markdown from 'naturalcrit/markdown.js';
+
+const BREWKEY  = 'homebrewery-new';
+const STYLEKEY = 'homebrewery-new-style';
+const METAKEY  = 'homebrewery-new-meta';
+const SAVEKEY  = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${global.account?.username || ''}`;
+
+const SAVE_TIMEOUT = 10000;
+
+const BaseEditPage = (props)=>{
+  const [brew,                       setBrew]                       = useState(() => props.brew);
+	const [savedBrew,                  setSavedBrew]                  = useState(brew);
+  const [isSaving,                   setIsSaving]                   = useState(false);
+	const [lastSavedTime,              setLastSavedTime]              = useState(new Date());
+	const [saveGoogle,                 setSaveGoogle]                 = useState(() => (global.account?.googleId ? true : false));
+  const [welcomeText,                setWelcomeText]                = useState(() => props.brew?.text ?? '');
+  const [error,                      setError]                      = useState(undefined);
+	const [htmlErrors,                 setHTMLErrors]                 = useState(Markdown.validate(props.brew.text));
+  const [currentEditorViewPageNum,   setCurrentEditorViewPageNum]   = useState(1);
+  const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1);
+  const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
+  const [themeBundle,                setThemeBundle]                = useState({});
+	const [unsavedChanges,             setUnsavedChanges]             = useState(false);
+	const [autoSaveEnabled,            setAutoSaveEnabled]            = useState(true);
+	const [warnUnsavedChanges,         setWarnUnsavedChanges]         = useState(false);
+
+	const editorRef     = useRef(null);
+	let   lastSavedBrew = useRef(JSON.parse(JSON.stringify(this.propcopys.brew))); //Deep copy
+	const saveTimeout   = useRef(null);
+	const unsavedChangesTimer = useRef(null);
+
+	const handleSplitMove = ()=>{
+		editorRef.current.update();
+	};
+
+	const handleEditorViewPageChange = (pageNumber)=>{
+		setCurrentEditorViewPageNum(pageNumber);
+	};
+	
+	const handleEditorCursorPageChange = (pageNumber)=>{
+		setCurrentEditorCursorPageNum(pageNumber);
+	};
+	
+	const handleBrewRendererPageChange	 = (pageNumber)=>{
+		setCurrentBrewRendererPageNum(pageNumber);
+	};
+
+	const handleTextChange = (text)=>{
+		//If there are HTML errors, run the validator on every change to give quick feedback
+		if(htmlErrors.length)
+			htmlErrors = Markdown.validate(text);
+
+		setHTMLErrors(htmlErrors);
+		setBrew((prevBrew) => ({ ...prevBrew, text }));
+
+		// TODO: ONLY ON /NEW PAGE
+		localStorage.setItem(BREWKEY, text);
+	};
+
+	const handleStyleChange = (style)=>{
+		setBrew((prevBrew) => ({ ...prevBrew, style }));
+
+		if(props.useLocalStorage)
+			localStorage.setItem(STYLEKEY, style);
+	};
+
+	const handleSnipChange = (snippet)=>{
+		//If there are HTML errors, run the validator on every change to give quick feedback
+		if(htmlErrors.length)
+			htmlErrors = Markdown.validate(text);
+
+		setHTMLErrors(htmlErrors);
+		setBrew((prevBrew) => ({ ...prevBrew, snippets: snippet }));
+	};
+
+	const handleMetaChange = (metadata, field=undefined)=>{
+		if(field == 'theme' || field == 'renderer')	// Fetch theme bundle only if theme or renderer was changed
+			fetchThemeBundle(setError, setThemeBundle, metadata.renderer, metadata.theme);
+
+		setBrew((prevBrew) => ({ ...prevBrew, ...metadata }));
+
+		if(props.useLocalStorage)
+			localStorage.setItem(METAKEY, JSON.stringify({
+				'renderer' : metadata.renderer,
+				'theme'    : metadata.theme,
+				'lang'     : metadata.lang
+			}));
+	};
+
+	const updateBrew = (newData) => {
+		setBrew(prevBrew => ({	//TODO: May be able to just directly use setBrew instead of a wrapper, if its safe to assume we want all the data from newData
+			...prevBrew,					//OR:  Somehow combine handleTextChange, handleStyleChange, handleMetaChange, and handleSnipChange into one function that calls this
+			style: newData.style,
+			text: newData.text,
+			snippets: newData.snippets
+		}));
+	};
+		
+	const clearError = ()=>{
+		setError(null);
+		setIsSaving(false);
+	};
+
+	const save = async (immediate=false)=>{
+		if(isSaving) return;
+		if(!unsavedChanges && !immediate) return;
+
+		clearTimeout(saveTimeout.current);
+
+		const timeout = immediate ? 0 : 10000;
+
+		saveTimeout.current = setTimeout(async () => {
+			setIsSaving(true);
+			await props.performSave(brew, saveGoogle)
+			.catch((err)=>{
+				setError(err);
+			});
+			setIsSaving(false);
+			setLastSavedTime(new Date());
+			setTimeout(setWarnUnsavedChanges(true), 900000); // 15 minutes between unsaved work warnings
+		}, timeout);
+	};
+
+	const handleControlKeys = (e)=>{
+		if(!(e.ctrlKey || e.metaKey)) return;
+		const S_KEY = 83;
+		const P_KEY = 80;
+		if(e.keyCode == S_KEY) save();
+		if(e.keyCode == P_KEY) BrewRenderer.printCurrentBrew();
+		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
+			e.stopPropagation();
+			e.preventDefault();
+		}
+	};
+
+	const	hasChanges =()=>{
+		return !_.isEqual(brew, savedBrew);
+	};
+
+	useEffect(() => {
+		props.loadBrew?.(brew, setBrew, setSaveGoogle);  //Initial load from localStorage/etc.
+
+		//Load settings
+		setAutoSaveEnabled(JSON.parse(localStorage.getItem('AUTOSAVE_ON')) ?? true);
+
+		setHTMLErrors(Markdown.validate(brew.text));
+
+		document.addEventListener('keydown', handleControlKeys);
+		window.onbeforeunload = ()=>{
+			if(isSaving || unsavedChanges)
+				return 'You have unsaved changes!';
+		};
+
+		return () => {
+			document.removeEventListener('keydown', handleControlKeys);
+			window.onbeforeunload = null;
+		}
+	}, []);
+
+	useEffect(() => {
+		fetchThemeBundle(setError, setThemeBundle, brew.renderer, brew.theme);
+	}, [brew.renderer, brew.theme]);
+
+	useEffect(() => {
+		const hasChange = hasChanges();
+		if(unsavedChanges !== hasChange)
+			setUnsavedChanges(hasChange);
+
+		if(autoSaveEnabled) save();
+	}, [brew]);
+
+	const resetUnsavedChangesWarning = ()=>{
+		setTimeout(setWarnUnsavedChanges(false), 4000);  // Display warning for 4 seconds
+		setTimeout(setWarnUnsavedChanges(true) , 90000); // 15 minutes between warnings
+	};
+
+	const toggleAutoSave = ()=>{
+		if(unsavedChangesTimer.current) clearTimeout(unsavedChangesTimer.current);
+		localStorage.setItem('AUTOSAVE_ON', JSON.stringify(!autoSaveEnabled));
+		setAutoSaveEnabled(!autoSaveEnabled);
+		setWarnUnsavedChanges(false);
+	};
+
+	const renderSaveButton = ()=>{
+		// #1 - Currently saving, show SAVING
+		if(isSaving)
+			return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
+
+		// #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING
+		if(unsavedChanges && warnUnsavedChanges){
+			resetUnsavedChangesWarning();
+			const elapsedTime = Math.round((new Date() - lastSavedTime) / 1000 / 60);
+			const text = elapsedTime == 0 ? 'Autosave is OFF.' : `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`;
+
+			return <Nav.item className='save error' icon='fas fa-exclamation-circle'>
+							Reminder...
+							<div className='errorContainer'>{text}</div>
+						</Nav.item>;
+		}
+
+		// #3 - Unsaved changes exist, click to save, show SAVE NOW
+		if(unsavedChanges)
+			return <Nav.item className='save' onClick={()=>save(true)} color='blue' icon='fas fa-save'>Save Now</Nav.item>;
+
+		// #4 - No unsaved changes, autosave is ON, show AUTO-SAVED
+		if(autoSaveEnabled)
+			return <Nav.item className='save saved'>auto-saved.</Nav.item>;
+
+		// DEFAULT - No unsaved changes, show SAVED
+		return <Nav.item className='save saved'>saved.</Nav.item>;
+	};
+
+	const renderAutoSaveButton = ()=>{
+		return <Nav.item onClick={toggleAutoSave}>
+						Autosave <i className={autosaveEnabled ? 'fas fa-power-off active' : 'fas fa-power-off'}></i>
+					</Nav.item>;
+	};
+
+	return (
+		<div className={`sitePage ${props.className || ''}`}>
+			<Navbar>
+				<Nav.section>
+					<Nav.item className='brewTitle'>{props.brew.title}</Nav.item>
+				</Nav.section>
+				<Nav.section>
+					{error
+						? <ErrorNavItem error={error} clearError={clearError}></ErrorNavItem>
+						: <Nav.dropdown className='save-menu'>
+								{renderSaveButton()}
+								{renderAutoSaveButton()}
+							</Nav.dropdown>
+					}
+					{props.renderUniqueNav?.()}
+				</Nav.section>
+				<Nav.section>
+					<PrintNavItem />
+					<NewBrewItem />
+					<HelpNavItem />
+					<VaultNavItem />
+					<RecentNavItem brew={props.brew} storageKey={props.recentStorageKey} />
+					<AccountNavItem />
+				</Nav.section>
+			</Navbar>
+
+			<div className='content'>
+				<SplitPane onDragFinish={handleSplitMove}>
+					<Editor
+						ref={editorRef}
+						brew={brew}
+						onTextChange={handleTextChange}
+						onStyleChange={handleStyleChange}
+						onMetaChange={handleMetaChange}
+						onSnipChange={handleSnipChange}
+						reportError={this.errorReported}
+						renderer={brew.renderer}
+						showEditButtons={false}  //FALSE FOR HOME PAGE
+						userThemes={props.userThemes}
+						themeBundle={themeBundle}
+						updateBrew={updateBrew}
+						onCursorPageChange={handleEditorCursorPageChange}
+						onViewPageChange={handleEditorViewPageChange}
+						currentEditorViewPageNum={currentEditorViewPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
+					/>
+					<BrewRenderer
+						text={brew.text}
+						style={brew.style}
+						renderer={brew.renderer}
+						theme={brew.theme}
+						errors={htmlErrors}
+						lang={brew.lang}
+						onPageChange={handleBrewRendererPageChange}
+						currentEditorViewPageNum={currentEditorViewPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
+						themeBundle={themeBundle}
+						allowPrint={true} // FALSE FOR HOME PAGE
+					/>
+				</SplitPane>
+			</div>
+
+			{props.children?.(welcomeText, brew, save)}
+		</div>
+	);	
+};
+
+module.exports = BaseEditPage;
--- a/client/homebrew/pages/basePages/editPage/editPage.less
+++ b/client/homebrew/pages/basePages/editPage/editPage.less
--- a/client/homebrew/pages/basePages/uiPage/uiPage.less
+++ b/client/homebrew/pages/basePages/uiPage/uiPage.less
@@ -29,7 +29,6 @@
 						&::before {
 							margin-right : 5px;
 							font-family  : 'Font Awesome 6 Free';
-							font-weight  : 900;
 							content      : '\f00c';
 						}
 					}
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -11,19 +11,8 @@ import request from '../../utils/request-middleware.js';
 const { Meta } = require('vitreum/headtags');

 const Nav = require('naturalcrit/nav/nav.jsx');
-const Navbar = require('../../navbar/navbar.jsx');

-const NewBrew = require('../../navbar/newbrew.navitem.jsx');
-const HelpNavItem = require('../../navbar/help.navitem.jsx');
-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('client/components/splitPane/splitPane.jsx');
-const Editor = require('../../editor/editor.jsx');
-const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
+const BaseEditPage = require('../basePages/editPage/editPage.jsx');

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

@@ -36,7 +25,6 @@ import { updateHistory, versionHistoryGarbageCollection } from '../../utils/vers

 const googleDriveIcon = require('../../googleDrive.svg');

-const SAVE_TIMEOUT = 10000;

 const EditPage = createClass({
 	displayName     : 'EditPage',
@@ -48,171 +36,17 @@ const EditPage = createClass({

 	getInitialState : function() {
 		return {
-			brew                       : this.props.brew,
-			isSaving                   : false,
-			unsavedChanges             : 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                : {}
 		};
 	},

-	editor    : React.createRef(null),
-	savedBrew : null,
-
 	componentDidMount : function(){
-		this.setState({
-			url : window.location.href
-		});

-		this.savedBrew = JSON.parse(JSON.stringify(this.props.brew)); //Deep copy
-
-		this.setState({ autoSave: JSON.parse(localStorage.getItem('AUTOSAVE_ON')) ?? true }, ()=>{
-			if(this.state.autoSave){
-				this.trySave();
-			} else {
-				this.setState({ autoSaveWarning: true });
-			}
-		});
-
-		window.onbeforeunload = ()=>{
-			if(this.state.isSaving || this.state.unsavedChanges){
-				return 'You have unsaved changes!';
-			}
-		};
-
-		this.setState((prevState)=>({
-			htmlErrors : Markdown.validate(prevState.brew.text)
-		}));
-
-		fetchThemeBundle((err)=>{this.setState({ error: err })}, (theme)=>{this.setState({ themeBundle: theme })}, this.props.brew.renderer, this.props.brew.theme);
-
-		document.addEventListener('keydown', this.handleControlKeys);
-	},
-	componentWillUnmount : function() {
-		window.onbeforeunload = function(){};
-		document.removeEventListener('keydown', this.handleControlKeys);
-	},
-	componentDidUpdate : function(){
-		const hasChange = this.hasChanges();
-		if(this.state.unsavedChanges != hasChange){
-			this.setState({
-				unsavedChanges : hasChange
-			});
-		}
-	},
-
-	handleControlKeys : function(e){
-		if(!(e.ctrlKey || e.metaKey)) return;
-		const S_KEY = 83;
-		const P_KEY = 80;
-		if(e.keyCode == S_KEY) this.trySave(true);
-		if(e.keyCode == P_KEY) printCurrentBrew();
-		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
-			e.stopPropagation();
-			e.preventDefault();
-		}
-	},
-
-	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){
-		//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,
-		}), ()=>{if(this.state.autoSave) this.trySave();});
-	},
-
-	handleSnipChange : function(snippet){
-		//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(snippet);
-
-		this.setState((prevState)=>({
-			brew           : { ...prevState.brew, snippets: snippet },
-			unsavedChanges : true,
-			htmlErrors     : htmlErrors,
-		}), ()=>{if(this.state.autoSave) this.trySave();});
-	},
-
-	handleStyleChange : function(style){
-		this.setState((prevState)=>({
-			brew : { ...prevState.brew, style: style }
-		}), ()=>{if(this.state.autoSave) this.trySave();});
-	},
-
-	handleMetaChange : function(metadata, field=undefined){
-		if(field == 'theme' || field == 'renderer')	// Fetch theme bundle only if theme or renderer was changed
-			fetchThemeBundle((err)=>{this.setState({ error: err })}, (theme)=>{this.setState({ themeBundle: theme })}, metadata.renderer, metadata.theme);
-
-		this.setState((prevState)=>({
-			brew : {
-				...prevState.brew,
-				...metadata
-			}
-		}), ()=>{if(this.state.autoSave) this.trySave();});
-	},
-
-	hasChanges : function(){
-		return !_.isEqual(this.state.brew, this.savedBrew);
-	},
-
-	updateBrew : function(newData){
-		this.setState((prevState)=>({
-			brew : {
-				...prevState.brew,
-				style    : newData.style,
-				text     : newData.text,
-				snippets : newData.snippets
-			}
-		}));
-	},
-
-	trySave : function(immediate=false){
-		if(!this.debounceSave) this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
-		if(this.state.isSaving)
-			return;
-
-		if(immediate) {
-			this.debounceSave();
-			this.debounceSave.flush();
-			return;
-		}
-		
-		if(this.hasChanges())
-			this.debounceSave();
-		else
-			this.debounceSave.cancel();
 	},

 	handleGoogleClick : function(){
@@ -223,11 +57,10 @@ const EditPage = createClass({
 			return;
 		}
 		this.setState((prevState)=>({
-			confirmGoogleTransfer : !prevState.confirmGoogleTransfer
+			confirmGoogleTransfer : !prevState.confirmGoogleTransfer,
+			error                 : null
 		}));
-		this.setState({
-			error    : null
-		});
+
 	},

 	closeAlerts : function(event){
@@ -303,7 +136,6 @@ const EditPage = createClass({
 				version  : res.body.version
 			},
 			isSaving    : false,
-			unsavedTime : new Date()
 		}), ()=>{
 			this.setState({ unsavedChanges : this.hasChanges() });
 		});
@@ -336,7 +168,7 @@ const EditPage = createClass({
 					You must be signed in to a Google account to transfer
 					between the homebrewery and Google Drive!
 					<a target='_blank' rel='noopener noreferrer'
-						href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
+						href={`https://www.naturalcrit.com/login?redirect=${window.Location.href}`}>
 						<div className='confirm'>
 							Sign In
 						</div>
@@ -358,68 +190,6 @@ const EditPage = createClass({
 		</Nav.item>;
 	},

-	renderSaveButton : function(){
-
-		// #1 - Currently saving, show SAVING
-		if(this.state.isSaving){
-			return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
-		}
-
-		// #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING
-		if(this.state.unsavedChanges && this.state.autoSaveWarning){
-			this.setAutosaveWarning();
-			const elapsedTime = Math.round((new Date() - this.state.unsavedTime) / 1000 / 60);
-			const text = elapsedTime == 0 ? 'Autosave is OFF.' : `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`;
-
-			return <Nav.item className='save error' icon='fas fa-exclamation-circle'>
-			Reminder...
-				<div className='errorContainer'>
-					{text}
-				</div>
-			</Nav.item>;
-		}
-
-		// #3 - Unsaved changes exist, click to save, show SAVE NOW
-		// Use trySave(true) instead of save() to use debounced save function
-		if(this.state.unsavedChanges){
-			return <Nav.item className='save' onClick={()=>this.trySave(true)} color='blue' icon='fas fa-save'>Save Now</Nav.item>;
-		}
-		// #4 - No unsaved changes, autosave is ON, show AUTO-SAVED
-		if(this.state.autoSave){
-			return <Nav.item className='save saved'>auto-saved.</Nav.item>;
-		}
-		// DEFAULT - No unsaved changes, show SAVED
-		return <Nav.item className='save saved'>saved.</Nav.item>;
-	},
-
-	handleAutoSave : function(){
-		if(this.warningTimer) clearTimeout(this.warningTimer);
-		this.setState((prevState)=>({
-			autoSave        : !prevState.autoSave,
-			autoSaveWarning : prevState.autoSave
-		}), ()=>{
-			localStorage.setItem('AUTOSAVE_ON', JSON.stringify(this.state.autoSave));
-		});
-	},
-
-	setAutosaveWarning : function(){
-		setTimeout(()=>this.setState({ autoSaveWarning: false }), 4000);                           // 4 seconds to display
-		this.warningTimer = setTimeout(()=>{this.setState({ autoSaveWarning: true });}, 900000);   // 15 minutes between warnings
-		this.warningTimer;
-	},
-
-	errorReported : function(error) {
-		this.setState({
-			error
-		});
-	},
-
-	renderAutoSaveButton : function(){
-		return <Nav.item onClick={this.handleAutoSave}>
-			Autosave <i className={this.state.autoSave ? 'fas fa-power-off active' : 'fas fa-power-off'}></i>
-		</Nav.item>;
-	},
-
 	processShareId : function() {
 		return this.state.brew.googleId && !this.state.brew.stubbed ?
 					 this.state.brew.googleId + this.state.brew.shareId :
@@ -427,7 +197,6 @@ const EditPage = createClass({
 	},

 	getRedditLink : function(){
-
 		const shareLink = this.processShareId();
 		const systems = this.props.brew.systems.length > 0 ? ` [${this.props.brew.systems.join(' - ')}]` : '';
 		const title = `${this.props.brew.title} ${systems}`;
@@ -438,32 +207,12 @@ const EditPage = createClass({
 		return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title.toWellFormed())}&text=${encodeURIComponent(text)}`;
 	},

-	clearError : function(){
-		setState({
-			error    : null,
-			isSaving : false
-		})
-	},
-
 	renderNavbar : function(){
 		const shareLink = this.processShareId();

-		return <Navbar>
-			<Nav.section>
-				<Nav.item className='brewTitle'>{this.state.brew.title}</Nav.item>
-			</Nav.section>
-
+		return <>
 			<Nav.section>
 				{this.renderGoogleDriveIcon()}
-				{this.state.error ?
-					<ErrorNavItem error={this.state.error} clearError={this.clearError}></ErrorNavItem> :
-					<Nav.dropdown className='save-menu'>
-						{this.renderSaveButton()}
-						{this.renderAutoSaveButton()}
-					</Nav.dropdown>
-				}
-				<NewBrew />
-				<HelpNavItem/>
 				<Nav.dropdown>
 					<Nav.item color='teal' icon='fas fa-share-alt'>
 						share
@@ -478,58 +227,26 @@ const EditPage = createClass({
 						post to reddit
 					</Nav.item>
 				</Nav.dropdown>
-				<PrintNavItem />
-				<VaultNavItem />
-				<RecentNavItem brew={this.state.brew} storageKey='edit' />
-				<Account />
 			</Nav.section>
-
-		</Navbar>;
+		</>;
 	},

 	render : function(){
-		return <div className='editPage sitePage'>
-			<Meta name='robots' content='noindex, nofollow' />
-			{this.renderNavbar()}
-
-			{this.props.brew.lock && <LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} reviewRequested={this.props.brew.lock.reviewRequested} />}
-			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove}>
-					<Editor
-						ref={this.editor}
-						brew={this.state.brew}
-						onTextChange={this.handleTextChange}
-						onStyleChange={this.handleStyleChange}
-						onSnipChange={this.handleSnipChange}
-						onMetaChange={this.handleMetaChange}
-						reportError={this.errorReported}
-						renderer={this.state.brew.renderer}
-						userThemes={this.props.userThemes}
-						themeBundle={this.state.themeBundle}
-						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>;
+		return  <BaseEditPage
+							className="editPage"
+							errorState={this.state.error}
+							parent={this}
+							brew={this.state.brew}
+							renderUniqueNav={this.renderNavbar}
+							performSave={this.save}
+							recentStorageKey='edit'>
+							{(welcomeText, brew, save) => {
+								return <>
+									<Meta name='robots' content='noindex, nofollow' />
+									{this.props.brew.lock && <LockNotification shareId={brew.shareId} message={brew.lock.editMessage} reviewRequested={brew.lock.reviewRequested} />}
+								</>
+							}}
+						</BaseEditPage>;
 	}
 });

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

-import React                           from 'react';
-import { useEffect, useState, useRef } from 'react';
-import request                         from '../../utils/request-middleware.js';
-import { Meta }                        from 'vitreum/headtags';

-import Nav                             from 'naturalcrit/nav/nav.jsx';
-import Navbar                          from '../../navbar/navbar.jsx';
-import NewBrewItem                     from '../../navbar/newbrew.navitem.jsx';
-import HelpNavItem                     from '../../navbar/help.navitem.jsx';
-import VaultNavItem                    from '../../navbar/vault.navitem.jsx';
-import { both as RecentNavItem }       from '../../navbar/recent.navitem.jsx';
-import AccountNavItem                  from '../../navbar/account.navitem.jsx';
-import ErrorNavItem                    from '../../navbar/error-navitem.jsx';
-import { fetchThemeBundle }            from '../../../../shared/helpers.js';

-import SplitPane                       from 'client/components/splitPane/splitPane.jsx';
-import Editor                          from '../../editor/editor.jsx';
-import BrewRenderer                    from '../../brewRenderer/brewRenderer.jsx';
+const BaseEditPage = require('../basePages/editPage/editPage.jsx');

-import { DEFAULT_BREW }                from '../../../../server/brewDefaults.js';
+const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');

-const HomePage =(props)=>{
-	props = {
-		brew : DEFAULT_BREW,
-		ver  : '0.0.0',
-    ...props
-  };
+const HomePage = createClass({
+	displayName     : 'HomePage',
+	getDefaultProps : function() {
+		return {
+			brew : DEFAULT_BREW
+		};
+	},

-	const [brew                      , setBrew]                       = useState(props.brew);
-	const [welcomeText               , setWelcomeText]                = useState(props.brew.text);
-	const [error                     , setError]                      = useState(undefined);
-	const [currentEditorViewPageNum  , setCurrentEditorViewPageNum]   = useState(1);
-	const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1);
-	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
-	const [themeBundle               , setThemeBundle]                = useState({});
-	const [isSaving                  , setIsSaving]                   = useState(false);
-
-	const editorRef = useRef(null);
-
-	useEffect(()=>{
-		fetchThemeBundle(setError, setThemeBundle, brew.renderer, brew.theme);
-	}, []);
-
-	const save = ()=>{
-		request.post('/api')
+	save : function(brew){
+		return request
+			.post('/api')
 			.send(brew)
-			.end((err, res)=>{
-				if(err) {
-					setError(err);
-					return;
-				}
+			.then((res) => {
 				const saved = res.body;
 				window.location = `/edit/${saved.editId}`;
 			});
-	};
+	},

-	const handleSplitMove = ()=>{
-		editorRef.current.update();
-	};
+	render : function(){
+		return  <BaseEditPage
+							{...this.props}
+							className="homePage"
+							parent={this}
+							performSave={this.save}>
+							{(welcomeText, brew, save) => {
+								return <>
+									<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
+									<div className={cx('floatingSaveButton', { show: welcomeText != brew.text })} onClick={save}>
+										Save current <i className='fas fa-save' />
+									</div>

-	const handleEditorViewPageChange = (pageNumber)=>{
-		setCurrentEditorViewPageNum(pageNumber);
-	};
-	
-	const handleEditorCursorPageChange = (pageNumber)=>{
-		setCurrentEditorCursorPageNum(pageNumber);
-	};
-	
-	const handleBrewRendererPageChange = (pageNumber)=>{
-		setCurrentBrewRendererPageNum(pageNumber);
-	};
-
-	const handleTextChange = (text)=>{
-		setBrew((prevBrew) => ({ ...prevBrew, text }));
-	};
-
-	const clearError = ()=>{
-		setError(null);
-		setIsSaving(false);
-	};
-
-	const renderNavbar = ()=>{
-		return <Navbar ver={props.ver}>
-			<Nav.section>
-				{error ?
-					<ErrorNavItem error={error} clearError={clearError}></ErrorNavItem> :
-					null
-				}
-				<NewBrewItem />
-				<HelpNavItem />
-				<VaultNavItem />
-				<RecentNavItem />
-				<AccountNavItem />
-			</Nav.section>
-		</Navbar>;
-	};
-
-	return (
-		<div className='homePage sitePage'>
-			<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
-			{renderNavbar()}
-			<div className='content'>
-				<SplitPane onDragFinish={handleSplitMove}>
-					<Editor
-						ref={editorRef}
-						brew={brew}
-						onTextChange={handleTextChange}
-						renderer={brew.renderer}
-						showEditButtons={false}
-						themeBundle={themeBundle}
-						onCursorPageChange={handleEditorCursorPageChange}
-						onViewPageChange={handleEditorViewPageChange}
-						currentEditorViewPageNum={currentEditorViewPageNum}
-						currentEditorCursorPageNum={currentEditorCursorPageNum}
-						currentBrewRendererPageNum={currentBrewRendererPageNum}
-					/>
-					<BrewRenderer
-						text={brew.text}
-						style={brew.style}
-						renderer={brew.renderer}
-						onPageChange={handleBrewRendererPageChange}
-						currentEditorViewPageNum={currentEditorViewPageNum}
-						currentEditorCursorPageNum={currentEditorCursorPageNum}
-						currentBrewRendererPageNum={currentBrewRendererPageNum}
-						themeBundle={themeBundle}
-					/>
-				</SplitPane>
-			</div>
-			<div className={`floatingSaveButton${welcomeText !== brew.text ? ' show' : ''}`} onClick={save}>
-				Save current <i className='fas fa-save' />
-			</div>
-
-			<a href='/new' className='floatingNewButton'>
-				Create your own <i className='fas fa-magic' />
-			</a>
-		</div>
-	)
-};
+									<a href='/new' className='floatingNewButton'>
+										Create your own <i className='fas fa-magic' />
+									</a>
+								</>
+							}}
+						</BaseEditPage>
+	}
+});

 module.exports = HomePage;
--- a/client/homebrew/pages/newPage/newPage.jsx
+++ b/client/homebrew/pages/newPage/newPage.jsx
@@ -1,61 +1,31 @@
 /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
-import './newPage.less';
+require('./newPage.less');
+const React = require('react');
+const createClass = require('create-react-class');
+import request from '../../utils/request-middleware.js';

-import React, { useState, useEffect, useRef } from 'react';
-import request                                from '../../utils/request-middleware.js';
-import Markdown                               from 'naturalcrit/markdown.js';
+const Nav = require('naturalcrit/nav/nav.jsx');

-import Nav                       from 'naturalcrit/nav/nav.jsx';
-import Navbar                    from '../../navbar/navbar.jsx';
-import AccountNavItem            from '../../navbar/account.navitem.jsx';
-import ErrorNavItem              from '../../navbar/error-navitem.jsx';
-import HelpNavItem               from '../../navbar/help.navitem.jsx';
-import PrintNavItem              from '../../navbar/print.navitem.jsx';
-import { both as RecentNavItem } from '../../navbar/recent.navitem.jsx';
+const BaseEditPage = require('../basePages/editPage/editPage.jsx');

-import SplitPane    from 'client/components/splitPane/splitPane.jsx';
-import Editor       from '../../editor/editor.jsx';
-import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
-
-import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';
-import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';
+const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');

 const BREWKEY  = 'homebrewery-new';
 const STYLEKEY = 'homebrewery-new-style';
 const METAKEY  = 'homebrewery-new-meta';
 const SAVEKEY  = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${global.account?.username || ''}`;

-const NewPage = (props)=>{
-	props = {
-		brew : DEFAULT_BREW,
-		...props
-	};
-
-	const [currentBrew               , setCurrentBrew               ] = useState(props.brew);
-	const [isSaving                  , setIsSaving                  ] = useState(false);
-	const [saveGoogle                , setSaveGoogle                ] = useState(global.account?.googleId ? true : false);
-	const [error                     , setError                     ] = useState(null);
-	const [HTMLErrors                , setHTMLErrors                ] = useState(Markdown.validate(props.brew.text));
-	const [currentEditorViewPageNum  , setCurrentEditorViewPageNum  ] = useState(1);
-	const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1);
-	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
-	const [themeBundle               , setThemeBundle               ] = useState({});
-
-	const editorRef = useRef(null);
-
-	useEffect(()=>{
-		document.addEventListener('keydown', handleControlKeys);
-		loadBrew();
-		fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme);
-
-		return ()=>{
-			document.removeEventListener('keydown', handleControlKeys);
+const NewPage = createClass({
+	displayName     : 'NewPage',
+	getDefaultProps : function() {
+		return {
+			brew : DEFAULT_BREW
 		};
-	}, []);
+	},

-	const loadBrew = ()=>{
-		const brew = { ...currentBrew };
+	loadBrew : function(brew, setBrew, setSaveGoogle) {
 		if(!brew.shareId && typeof window !== 'undefined') { //Load from localStorage if in client browser
+			//TODO: Move localstorage handling to BaseEditPage?
 			const brewStorage  = localStorage.getItem(BREWKEY);
 			const styleStorage = localStorage.getItem(STYLEKEY);
 			const metaStorage  = JSON.parse(localStorage.getItem(METAKEY));
@@ -69,183 +39,42 @@ const NewPage = (props)=>{

 		const saveStorage = localStorage.getItem(SAVEKEY) || 'HOMEBREWERY';

-		setCurrentBrew(brew);
-		setSaveGoogle(saveStorage == 'GOOGLE-DRIVE' && saveGoogle);
+		setBrew(brew);
+		setSaveGoogle(saveStorage == 'GOOGLE-DRIVE' && this.state.saveGoogle);

 		localStorage.setItem(BREWKEY, brew.text);
 		if(brew.style)
 			localStorage.setItem(STYLEKEY, brew.style);
-		localStorage.setItem(METAKEY, JSON.stringify({ renderer: brew.renderer, theme: brew.theme, lang: brew.lang }));
-		if(window.location.pathname !== '/new')
+		localStorage.setItem(METAKEY, JSON.stringify({ 'renderer': brew.renderer, 'theme': brew.theme, 'lang': brew.lang }));
+		if(window.location.pathname != '/new') {
 			window.history.replaceState({}, window.location.title, '/new/');
-	};
-
-	const handleControlKeys = (e)=>{
-		if(!(e.ctrlKey || e.metaKey)) return;
-		const S_KEY = 83;
-		const P_KEY = 80;
-		if(e.keyCode === S_KEY) save();
-		if(e.keyCode === P_KEY) printCurrentBrew();
-		if(e.keyCode === S_KEY || e.keyCode === P_KEY) {
-			e.preventDefault();
-			e.stopPropagation();
 		}
-	};
+	},

-	const handleSplitMove = ()=>{
-		editorRef.current.update();
-	};
-
-	const handleEditorViewPageChange = (pageNumber)=>{
-		setCurrentEditorViewPageNum(pageNumber);
-	};
-
-	const handleEditorCursorPageChange = (pageNumber)=>{
-		setCurrentEditorCursorPageNum(pageNumber);
-	};
-
-	const handleBrewRendererPageChange = (pageNumber)=>{
-		setCurrentBrewRendererPageNum(pageNumber);
-	};
-
-	const handleTextChange = (text)=>{
-		//If there are HTML errors, run the validator on every change to give quick feedback
-		if(HTMLErrors.length)
-			HTMLErrors = Markdown.validate(text);
-
-		setHTMLErrors(HTMLErrors);
-		setCurrentBrew((prevBrew)=>({ ...prevBrew, text }));
-		localStorage.setItem(BREWKEY, text);
-	};
-
-	const handleStyleChange = (style)=>{
-		setCurrentBrew((prevBrew)=>({ ...prevBrew, style }));
-		localStorage.setItem(STYLEKEY, style);
-	};
-
-	const handleSnipChange = (snippet)=>{
-		//If there are HTML errors, run the validator on every change to give quick feedback
-		if(HTMLErrors.length)
-			HTMLErrors = Markdown.validate(snippet);
-
-		setHTMLErrors(HTMLErrors);
-		setCurrentBrew((prevBrew)=>({ ...prevBrew, snippets: snippet }));
-	};
-
-	const handleMetaChange = (metadata, field = undefined)=>{
-		if(field === 'theme' || field === 'renderer')
-			fetchThemeBundle(setError, setThemeBundle, metadata.renderer, metadata.theme);
-
-		setCurrentBrew((prev)=>({ ...prev, ...metadata }));
-		localStorage.setItem(METAKEY, JSON.stringify({
-			renderer : metadata.renderer,
-			theme    : metadata.theme,
-			lang     : metadata.lang
-		}));
-	};
-
-	const save = async ()=>{
-  	setIsSaving(true);
-
-		const updatedBrew = { ...currentBrew };
-		splitTextStyleAndMetadata(updatedBrew);
-
-		const pageRegex = updatedBrew.renderer === 'legacy' ? /\\page/g : /^\\page$/gm;
-		updatedBrew.pageCount = (updatedBrew.text.match(pageRegex) || []).length + 1;
-
-		const res = await request
+	save : async function(brew, saveGoogle){
+		brew.pageCount=((brew.renderer=='legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1;
+		return request
 			.post(`/api${saveGoogle ? '?saveToGoogle=true' : ''}`)
-			.send(updatedBrew)
-			.catch((err)=>{
-				setIsSaving(false);
-				setError(err);
+			.send(brew)
+			.then((res) => {
+				//TODO: Move localstorage handling to BaseEditPage?
+				localStorage.removeItem(BREWKEY);
+				localStorage.removeItem(STYLEKEY);
+				localStorage.removeItem(METAKEY);
+				const saved = res.body;
+				window.location = `/edit/${saved.editId}`;
 			});
+	},

-		setIsSaving(false);
-		if(!res) return;
-
-		const savedBrew = res.body;
-
-		localStorage.removeItem(BREWKEY);
-		localStorage.removeItem(STYLEKEY);
-		localStorage.removeItem(METAKEY);
-		window.location = `/edit/${savedBrew.editId}`;
-	};
-
-	const renderSaveButton = ()=>{
-		if(isSaving){
-			return <Nav.item icon='fas fa-spinner fa-spin' className='save'>
-				save...
-			</Nav.item>;
-		} else {
-			return <Nav.item icon='fas fa-save' className='save' onClick={save}>
-				save
-			</Nav.item>;
-		}
-	};
-
-	const clearError = ()=>{
-		setError(null);
-		setIsSaving(false);
-	};
-
-	const renderNavbar = ()=>(
-		<Navbar>
-			<Nav.section>
-				<Nav.item className='brewTitle'>{currentBrew.title}</Nav.item>
-			</Nav.section>
-
-			<Nav.section>
-				{error
-					? <ErrorNavItem error={error} clearError={clearError} />
-					: renderSaveButton()}
-				<PrintNavItem />
-				<HelpNavItem />
-				<RecentNavItem />
-				<AccountNavItem />
-			</Nav.section>
-		</Navbar>
-	);
-
-	return (
-		<div className='newPage sitePage'>
-			{renderNavbar()}
-			<div className='content'>
-				<SplitPane onDragFinish={handleSplitMove}>
-					<Editor
-						ref={editorRef}
-						brew={currentBrew}
-						onTextChange={handleTextChange}
-						onStyleChange={handleStyleChange}
-						onMetaChange={handleMetaChange}
-						onSnipChange={handleSnipChange}
-						renderer={currentBrew.renderer}
-						userThemes={props.userThemes}
-						themeBundle={themeBundle}
-						onCursorPageChange={handleEditorCursorPageChange}
-						onViewPageChange={handleEditorViewPageChange}
-						currentEditorViewPageNum={currentEditorViewPageNum}
-						currentEditorCursorPageNum={currentEditorCursorPageNum}
-						currentBrewRendererPageNum={currentBrewRendererPageNum}
-					/>
-					<BrewRenderer
-						text={currentBrew.text}
-						style={currentBrew.style}
-						renderer={currentBrew.renderer}
-						theme={currentBrew.theme}
-						themeBundle={themeBundle}
-						errors={HTMLErrors}
-						lang={currentBrew.lang}
-						onPageChange={handleBrewRendererPageChange}
-						currentEditorViewPageNum={currentEditorViewPageNum}
-						currentEditorCursorPageNum={currentEditorCursorPageNum}
-						currentBrewRendererPageNum={currentBrewRendererPageNum}
-						allowPrint={true}
-					/>
-				</SplitPane>
-			</div>
-		</div>
-	);
-};
+	render : function(){
+		return  <BaseEditPage
+							{...this.props}
+							className="newPage"
+							parent={this}
+							performSave={this.save}
+							loadBrew={this.loadBrew}>
+						</BaseEditPage>;
+	}
+});

 module.exports = NewPage;
--- a/client/homebrew/pages/sharePage/sharePage.jsx
+++ b/client/homebrew/pages/sharePage/sharePage.jsx
@@ -17,11 +17,15 @@ const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpe
 const SharePage = (props)=>{
 	const { brew = DEFAULT_BREW_LOAD, disableMeta = false } = props;

-	const [themeBundle,                setThemeBundle]                = useState({});
-	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
+	const [state, setState] = useState({
+		themeBundle                : {},
+		currentBrewRendererPageNum : 1,
+	});

 	const handleBrewRendererPageChange = useCallback((pageNumber)=>{
-		setCurrentBrewRendererPageNum(pageNumber);
+		setState((prevState)=>({
+			currentBrewRendererPageNum : pageNumber,
+			...prevState }));
 	}, []);

 	const handleControlKeys = (e)=>{
@@ -36,7 +40,11 @@ const SharePage = (props)=>{

 	useEffect(()=>{
 		document.addEventListener('keydown', handleControlKeys);
-		fetchThemeBundle(undefined, setThemeBundle, brew.renderer, brew.theme);
+		fetchThemeBundle(
+			{ setState },
+			brew.renderer,
+			brew.theme
+		);

 		return ()=>{
 			document.removeEventListener('keydown', handleControlKeys);
@@ -106,9 +114,9 @@ const SharePage = (props)=>{
 					lang={brew.lang}
 					renderer={brew.renderer}
 					theme={brew.theme}
-					themeBundle={themeBundle}
+					themeBundle={state.themeBundle}
 					onPageChange={handleBrewRendererPageChange}
-					currentBrewRendererPageNum={currentBrewRendererPageNum}
+					currentBrewRendererPageNum={state.currentBrewRendererPageNum}
 					allowPrint={true}
 				/>
 			</div>
--- a/client/homebrew/pages/userPage/userPage.jsx
+++ b/client/homebrew/pages/userPage/userPage.jsx
@@ -39,14 +39,10 @@ const UserPage = (props)=>{
 		}] : [])
 	];

-	const clearError = ()=>{
-		setError(null);
-	};
-
 	const navItems = (
 		<Navbar>
 			<Nav.section>
-				{error && (<ErrorNavItem error={error} clearError={clearError}></ErrorNavItem>)}
+				{error && (<ErrorNavItem error={error} parent={null}></ErrorNavItem>)}
 				<NewBrew />
 				<HelpNavItem />
 				<VaultNavitem />
--- a/client/homebrew/utils/request-middleware.spec.js
+++ b/client/homebrew/utils/request-middleware.spec.js
@@ -1,74 +0,0 @@
-import requestMiddleware from './request-middleware';
-
-jest.mock('superagent');
-import request from 'superagent';
-
-describe('request-middleware', ()=>{
-	let version;
-
-	let setFn;
-	let testFn;
-
-	beforeEach(()=>{
-		jest.resetAllMocks();
-		version = global.version;
-
-		global.version = '999';
-
-		setFn = jest.fn();
-		testFn = jest.fn(()=>{ return { set: setFn }; });
-	});
-
-	afterEach(()=>{
-		global.version = version;
-	});
-
-	it('should add header to get', ()=>{
-		// Ensure tests functions have been reset
-		expect(testFn).not.toHaveBeenCalled();
-		expect(setFn).not.toHaveBeenCalled();
-
-		request.get = testFn;
-
-		requestMiddleware.get('path');
-
-		expect(testFn).toHaveBeenCalledWith('path');
-		expect(setFn).toHaveBeenCalledWith('Homebrewery-Version', '999');
-	});
-
-	it('should add header to put', ()=>{
-		expect(testFn).not.toHaveBeenCalled();
-		expect(setFn).not.toHaveBeenCalled();
-
-		request.put = testFn;
-
-		requestMiddleware.put('path');
-
-		expect(testFn).toHaveBeenCalledWith('path');
-		expect(setFn).toHaveBeenCalledWith('Homebrewery-Version', '999');
-	});
-
-	it('should add header to post', ()=>{
-		expect(testFn).not.toHaveBeenCalled();
-		expect(setFn).not.toHaveBeenCalled();
-
-		request.post = testFn;
-
-		requestMiddleware.post('path');
-
-		expect(testFn).toHaveBeenCalledWith('path');
-		expect(setFn).toHaveBeenCalledWith('Homebrewery-Version', '999');
-	});
-
-	it('should add header to delete', ()=>{
-		expect(testFn).not.toHaveBeenCalled();
-		expect(setFn).not.toHaveBeenCalled();
-
-		request.delete = testFn;
-
-		requestMiddleware.delete('path');
-
-		expect(testFn).toHaveBeenCalledWith('path');
-		expect(setFn).toHaveBeenCalledWith('Homebrewery-Version', '999');
-	});
-});
--- a/package-lock.json
+++ b/package-lock.json
@@ -63,9 +63,9 @@
        "written-number": "^0.11.1"
      },
      "devDependencies": {
-        "@stylistic/stylelint-plugin": "^4.0.0",
+        "@stylistic/stylelint-plugin": "^3.1.3",
        "babel-plugin-transform-import-meta": "^2.3.3",
-        "eslint": "^9.34.0",
+        "eslint": "^9.31.0",
        "eslint-plugin-jest": "^29.0.1",
        "eslint-plugin-react": "^7.37.5",
        "globals": "^16.3.0",
@@ -73,9 +73,9 @@
        "jest-expect-message": "^1.1.3",
        "jsdom-global": "^3.0.2",
        "postcss-less": "^6.0.0",
-        "stylelint": "^16.23.1",
-        "stylelint-config-recess-order": "^7.2.0",
-        "stylelint-config-recommended": "^17.0.0",
+        "stylelint": "^16.22.0",
+        "stylelint-config-recess-order": "^7.1.0",
+        "stylelint-config-recommended": "^16.0.0",
        "supertest": "^7.1.4"
      },
      "engines": {
@@ -1884,9 +1884,9 @@
      }
    },
    "node_modules/@csstools/media-query-list-parser": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-4.0.3.tgz",
-      "integrity": "sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-3.0.1.tgz",
+      "integrity": "sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==",
      "dev": true,
      "funding": [
        {
@@ -1898,13 +1898,12 @@
          "url": "https://opencollective.com/csstools"
        }
      ],
-      "license": "MIT",
      "engines": {
        "node": ">=18"
      },
      "peerDependencies": {
-        "@csstools/css-parser-algorithms": "^3.0.5",
-        "@csstools/css-tokenizer": "^3.0.4"
+        "@csstools/css-parser-algorithms": "^3.0.1",
+        "@csstools/css-tokenizer": "^3.0.1"
      }
    },
    "node_modules/@dmsnell/diff-match-patch": {
@@ -2022,19 +2021,18 @@
      }
    },
    "node_modules/@eslint/config-helpers": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.1.tgz",
-      "integrity": "sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.0.tgz",
+      "integrity": "sha512-ViuymvFmcJi04qdZeDc2whTHryouGcDlaxPqarTD0ZE10ISpxGUVZGZDx4w01upyIynL3iu6IXH2bS1NhclQMw==",
      "dev": true,
-      "license": "Apache-2.0",
      "engines": {
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      }
    },
    "node_modules/@eslint/core": {
-      "version": "0.15.2",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.2.tgz",
-      "integrity": "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==",
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.14.0.tgz",
+      "integrity": "sha512-qIbV0/JZr7iSDjqAc60IqbLdsj9GDt16xQtWD+B78d/HAlvysGdZZ6rpJHGAc2T0FQx1X6thsSPdnoiGKdNtdg==",
      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
@@ -2082,9 +2080,9 @@
      }
    },
    "node_modules/@eslint/js": {
-      "version": "9.34.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.34.0.tgz",
-      "integrity": "sha512-EoyvqQnBNsV1CWaEJ559rxXL4c8V92gxirbawSmVUOWXlsRxxQXl6LmCpdUblgxgSkDIqKnhzba2SjRTI/A5Rw==",
+      "version": "9.31.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.31.0.tgz",
+      "integrity": "sha512-LOm5OVt7D4qiKCqoiPbA7LWmI+tbw1VbTUowBcUMgQSuM6poJufkFkYDcQpo5KfgD39TnNySV26QjOh7VFpSyw==",
      "dev": true,
      "license": "MIT",
      "engines": {
@@ -2104,13 +2102,13 @@
      }
    },
    "node_modules/@eslint/plugin-kit": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.5.tgz",
-      "integrity": "sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.1.tgz",
+      "integrity": "sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w==",
      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
-        "@eslint/core": "^0.15.2",
+        "@eslint/core": "^0.14.0",
        "levn": "^0.4.1"
      },
      "engines": {
@@ -2834,11 +2832,37 @@
      }
    },
    "node_modules/@keyv/serialize": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@keyv/serialize/-/serialize-1.1.0.tgz",
-      "integrity": "sha512-RlDgexML7Z63Q8BSaqhXdCYNBy/JQnqYIwxofUrNLGCblOMHp+xux2Q8nLMLlPpgHQPoU0Do8Z6btCpRBEqZ8g==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@keyv/serialize/-/serialize-1.0.3.tgz",
+      "integrity": "sha512-qnEovoOp5Np2JDGonIDL6Ayihw0RhnRh6vxPuHo4RDn1UOzwEo4AeIfpL6UGIrsceWrCMiVPgwRjbHu4vYFc3g==",
      "dev": true,
-      "license": "MIT"
+      "dependencies": {
+        "buffer": "^6.0.3"
+      }
+    },
+    "node_modules/@keyv/serialize/node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
    },
    "node_modules/@mongodb-js/saslprep": {
      "version": "1.3.0",
@@ -2981,17 +3005,17 @@
      }
    },
    "node_modules/@stylistic/stylelint-plugin": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@stylistic/stylelint-plugin/-/stylelint-plugin-4.0.0.tgz",
-      "integrity": "sha512-CFwt3K4Y/7bygNCLCQ8Sy4Hzgbhxq3BsNW0FIuYxl17HD3ywptm54ocyeiLVRrk5jtz1Zwks7Xr9eiZt8SWHAw==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@stylistic/stylelint-plugin/-/stylelint-plugin-3.1.3.tgz",
+      "integrity": "sha512-85fsmzgsIVmyG3/GFrjuYj6Cz8rAM7IZiPiXCMiSMfoDOC1lOrzrXPDk24WqviAghnPqGpx8b0caK2PuewWGFg==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
-        "@csstools/css-parser-algorithms": "^3.0.5",
-        "@csstools/css-tokenizer": "^3.0.4",
-        "@csstools/media-query-list-parser": "^4.0.3",
-        "postcss": "^8.5.6",
-        "postcss-selector-parser": "^7.1.0",
+        "@csstools/css-parser-algorithms": "^3.0.1",
+        "@csstools/css-tokenizer": "^3.0.1",
+        "@csstools/media-query-list-parser": "^3.0.1",
+        "is-plain-object": "^5.0.0",
+        "postcss": "^8.4.41",
+        "postcss-selector-parser": "^6.1.2",
        "postcss-value-parser": "^4.2.0",
        "style-search": "^0.1.0"
      },
@@ -2999,7 +3023,7 @@
        "node": "^18.12 || >=20.9"
      },
      "peerDependencies": {
-        "stylelint": "^16.22.0"
+        "stylelint": "^16.8.0"
      }
    },
    "node_modules/@tybys/wasm-util": {
@@ -4651,24 +4675,22 @@
      }
    },
    "node_modules/cacheable": {
-      "version": "1.10.3",
-      "resolved": "https://registry.npmjs.org/cacheable/-/cacheable-1.10.3.tgz",
-      "integrity": "sha512-M6p10iJ/VT0wT7TLIGUnm958oVrU2cUK8pQAVU21Zu7h8rbk/PeRtRWrvHJBql97Bhzk3g1N6+2VKC+Rjxna9Q==",
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/cacheable/-/cacheable-1.10.1.tgz",
+      "integrity": "sha512-Fa2BZY0CS9F0PFc/6aVA6tgpOdw+hmv9dkZOlHXII5v5Hw+meJBIWDcPrG9q/dXxGcNbym5t77fzmawrBQfTmQ==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
        "hookified": "^1.10.0",
-        "keyv": "^5.4.0"
+        "keyv": "^5.3.4"
      }
    },
    "node_modules/cacheable/node_modules/keyv": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.5.0.tgz",
-      "integrity": "sha512-QG7qR2tijh1ftOvClut4YKKg1iW6cx3GZsKoGyJPxHkGWK9oJhG9P3j5deP0QQOGDowBMVQFaP+Vm4NpGYvmIQ==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.3.4.tgz",
+      "integrity": "sha512-ypEvQvInNpUe+u+w8BIcPkQvEqXquyyibWE/1NB5T2BTzIpS5cGEV1LZskDzPSTvNAaT4+5FutvzlvnkxOSKlw==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
-        "@keyv/serialize": "^1.1.0"
+        "@keyv/serialize": "^1.0.3"
      }
    },
    "node_modules/cached-path-relative": {
@@ -4863,16 +4885,13 @@
      }
    },
    "node_modules/cipher-base": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.6.tgz",
-      "integrity": "sha512-3Ek9H3X6pj5TgenXYtNWdaBon1tgYCaebd+XPg0keyjEbEfkD4KkmAxkQ/i1vYvxdcT5nscLBfq9VJRmCBcFSw==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
+      "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
      "license": "MIT",
      "dependencies": {
-        "inherits": "^2.0.4",
-        "safe-buffer": "^5.2.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
      }
    },
    "node_modules/cjs-module-lexer": {
@@ -6061,20 +6080,20 @@
      }
    },
    "node_modules/eslint": {
-      "version": "9.34.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.34.0.tgz",
-      "integrity": "sha512-RNCHRX5EwdrESy3Jc9o8ie8Bog+PeYvvSR8sDGoZxNFTvZ4dlxUB3WzQ3bQMztFrSRODGrLLj8g6OFuGY/aiQg==",
+      "version": "9.31.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.31.0.tgz",
+      "integrity": "sha512-QldCVh/ztyKJJZLr4jXNUByx3gR+TDYZCRXEktiZoUR3PGy4qCmSbkxcIle8GEwGpb5JBZazlaJ/CxLidXdEbQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.2.0",
        "@eslint-community/regexpp": "^4.12.1",
        "@eslint/config-array": "^0.21.0",
-        "@eslint/config-helpers": "^0.3.1",
-        "@eslint/core": "^0.15.2",
+        "@eslint/config-helpers": "^0.3.0",
+        "@eslint/core": "^0.15.0",
        "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.34.0",
-        "@eslint/plugin-kit": "^0.3.5",
+        "@eslint/js": "9.31.0",
+        "@eslint/plugin-kit": "^0.3.1",
        "@humanfs/node": "^0.16.6",
        "@humanwhocodes/module-importer": "^1.0.1",
        "@humanwhocodes/retry": "^0.4.2",
@@ -6239,6 +6258,19 @@
        "url": "https://opencollective.com/eslint"
      }
    },
+    "node_modules/eslint/node_modules/@eslint/core": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.1.tgz",
+      "integrity": "sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
    "node_modules/eslint/node_modules/escape-string-regexp": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -7616,11 +7648,10 @@
      }
    },
    "node_modules/hookified": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.11.0.tgz",
-      "integrity": "sha512-aDdIN3GyU5I6wextPplYdfmWCo+aLmjjVbntmX6HLD5RCi/xKsivYEBhnRD+d9224zFf008ZpLMPlWF0ZodYZw==",
-      "dev": true,
-      "license": "MIT"
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.10.0.tgz",
+      "integrity": "sha512-dJw0492Iddsj56U1JsSTm9E/0B/29a1AuoSLRAte8vQg/kaTGF3IgjEWT8c8yG4cC10+HisE1x5QAwR0Xwc+DA==",
+      "dev": true
    },
    "node_modules/html-encoding-sniffer": {
      "version": "4.0.0",
@@ -11542,11 +11573,10 @@
      }
    },
    "node_modules/postcss-selector-parser": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
-      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
        "cssesc": "^3.0.0",
        "util-deprecate": "^1.0.2"
@@ -12530,23 +12560,16 @@
      "license": "ISC"
    },
    "node_modules/sha.js": {
-      "version": "2.4.12",
-      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.12.tgz",
-      "integrity": "sha512-8LzC5+bvI45BjpfXU8V5fdU2mfeKiQe1D1gIMn7XUlF3OTUrpdJpPPH4EMAnF0DsHHdSZqCdSss5qCmJKuiO3w==",
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+      "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
      "license": "(MIT AND BSD-3-Clause)",
      "dependencies": {
-        "inherits": "^2.0.4",
-        "safe-buffer": "^5.2.1",
-        "to-buffer": "^1.2.0"
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
      },
      "bin": {
        "sha.js": "bin.js"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
      }
    },
    "node_modules/shasum": {
@@ -13283,9 +13306,9 @@
      "license": "ISC"
    },
    "node_modules/stylelint": {
-      "version": "16.23.1",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.23.1.tgz",
-      "integrity": "sha512-dNvDTsKV1U2YtiUDfe9d2gp902veFeo3ecCWdGlmLm2WFrAV0+L5LoOj/qHSBABQwMsZPJwfC4bf39mQm1S5zw==",
+      "version": "16.22.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.22.0.tgz",
+      "integrity": "sha512-SVEMTdjKNV4ollUrIY9ordZ36zHv2/PHzPjfPMau370MlL2VYXeLgSNMMiEbLGRO8RmD2R8/BVUeF2DfnfkC0w==",
      "dev": true,
      "funding": [
        {
@@ -13312,7 +13335,7 @@
        "debug": "^4.4.1",
        "fast-glob": "^3.3.3",
        "fastest-levenshtein": "^1.0.16",
-        "file-entry-cache": "^10.1.3",
+        "file-entry-cache": "^10.1.1",
        "global-modules": "^2.0.0",
        "globby": "^11.1.0",
        "globjoin": "^0.1.4",
@@ -13346,20 +13369,19 @@
      }
    },
    "node_modules/stylelint-config-recess-order": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-7.2.0.tgz",
-      "integrity": "sha512-3Y97dhsWkUHFKRLGNLF6LE5JuNB2EVAZKYJ41wBRK4gplYdk7eHhSIwE24hanu0AoNmv5534Djip70pE+y5qkA==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-7.1.0.tgz",
+      "integrity": "sha512-rFc4Z6SCGgEohr1khsmAZ83X56Tdi2dHY/GB7VT3qJkpKU1V2w+mYlK+b7Za5gpsxEng3jnb4FzWyIl/KTH0AQ==",
      "dev": true,
-      "license": "ISC",
      "peerDependencies": {
        "stylelint": ">=16.18",
        "stylelint-order": ">=7"
      }
    },
    "node_modules/stylelint-config-recommended": {
-      "version": "17.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-17.0.0.tgz",
-      "integrity": "sha512-WaMSdEiPfZTSFVoYmJbxorJfA610O0tlYuU2aEwY33UQhSPgFbClrVJYWvy3jGJx+XW37O+LyNLiZOEXhKhJmA==",
+      "version": "16.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-16.0.0.tgz",
+      "integrity": "sha512-4RSmPjQegF34wNcK1e1O3Uz91HN8P1aFdFzio90wNK9mjgAI19u5vsU868cVZboKzCaa5XbpvtTzAAGQAxpcXA==",
      "dev": true,
      "funding": [
        {
@@ -13376,7 +13398,7 @@
        "node": ">=18.12.0"
      },
      "peerDependencies": {
-        "stylelint": "^16.23.0"
+        "stylelint": "^16.16.0"
      }
    },
    "node_modules/stylelint-order": {
@@ -13396,6 +13418,29 @@
        "stylelint": "^16.18.0"
      }
    },
+    "node_modules/stylelint/node_modules/@csstools/media-query-list-parser": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-4.0.3.tgz",
+      "integrity": "sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
    "node_modules/stylelint/node_modules/@csstools/selector-specificity": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-5.0.0.tgz",
@@ -13427,23 +13472,21 @@
      "license": "MIT"
    },
    "node_modules/stylelint/node_modules/file-entry-cache": {
-      "version": "10.1.3",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-10.1.3.tgz",
-      "integrity": "sha512-D+w75Ub8T55yor7fPgN06rkCAUbAYw2vpxJmmjv/GDAcvCnv9g7IvHhIZoxzRZThrXPFI2maeY24pPbtyYU7Lg==",
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-10.1.1.tgz",
+      "integrity": "sha512-zcmsHjg2B2zjuBgjdnB+9q0+cWcgWfykIcsDkWDB4GTPtl1eXUA+gTI6sO0u01AqK3cliHryTU55/b2Ow1hfZg==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
-        "flat-cache": "^6.1.12"
+        "flat-cache": "^6.1.10"
      }
    },
    "node_modules/stylelint/node_modules/flat-cache": {
-      "version": "6.1.12",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-6.1.12.tgz",
-      "integrity": "sha512-U+HqqpZPPXP5d24bWuRzjGqVqUcw64k4nZAbruniDwdRg0H10tvN7H6ku1tjhA4rg5B9GS3siEvwO2qjJJ6f8Q==",
+      "version": "6.1.11",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-6.1.11.tgz",
+      "integrity": "sha512-zfOAns94mp7bHG/vCn9Ru2eDCmIxVQ5dELUHKjHfDEOJmHNzE+uGa6208kfkgmtym4a0FFjEuFksCXFacbVhSg==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
-        "cacheable": "^1.10.3",
+        "cacheable": "^1.10.1",
        "flatted": "^3.3.3",
        "hookified": "^1.10.0"
      }
@@ -13457,6 +13500,20 @@
        "node": ">= 4"
      }
    },
+    "node_modules/stylelint/node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/stylelint/node_modules/resolve-from": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -136,9 +136,9 @@
    "written-number": "^0.11.1"
  },
  "devDependencies": {
-    "@stylistic/stylelint-plugin": "^4.0.0",
+    "@stylistic/stylelint-plugin": "^3.1.3",
    "babel-plugin-transform-import-meta": "^2.3.3",
-    "eslint": "^9.34.0",
+    "eslint": "^9.31.0",
    "eslint-plugin-jest": "^29.0.1",
    "eslint-plugin-react": "^7.37.5",
    "globals": "^16.3.0",
@@ -146,9 +146,9 @@
    "jest-expect-message": "^1.1.3",
    "jsdom-global": "^3.0.2",
    "postcss-less": "^6.0.0",
-    "stylelint": "^16.23.1",
-    "stylelint-config-recess-order": "^7.2.0",
-    "stylelint-config-recommended": "^17.0.0",
+    "stylelint": "^16.22.0",
+    "stylelint-config-recess-order": "^7.1.0",
+    "stylelint-config-recommended": "^16.0.0",
    "supertest": "^7.1.4"
  }
 }
--- a/server/app.js
+++ b/server/app.js
@@ -487,8 +487,8 @@ app.get('/account', asyncHandler(async (req, res, next)=>{
 		const query = { authors: req.account.username, googleId: { $exists: false } };
 		const mongoCount = await HomebrewModel.countDocuments(query)
 			.catch((err)=>{
+				mongoCount = 0;
 				console.log(err);
-				return 0;
 			});

 		data.accountDetails = {
Author	SHA1	Message	Date
Trevor Buckner	e4efc9f653	Make autosave common/move save button into common format	2025-08-30 16:28:54 -04:00
Trevor Buckner	cea342d7f6	Moving mount/unmount over. Missing states and imports.	2025-08-20 16:31:12 -04:00
Trevor Buckner	d443ecabae	Move most common "handler" functions (textChange/splitMoves/etc.)	2025-08-20 16:30:44 -04:00
Trevor Buckner	91b6b9d91b	Move most `state` over to common BaseEditPage	2025-08-20 16:29:29 -04:00
Trevor Buckner	7ca2123506	Move Splitpane / Editor / BrewRenderer into common BasePage (not on /edit yet. That one is a beast.)	2025-08-20 16:28:05 -04:00
Trevor Buckner	4af33f6e75	Change fetchThemeBundle to not require `this` passed in. `this` doesn't work with functional components	2025-08-20 16:25:54 -04:00
Trevor Buckner	90ceb52ffc	Remove unused import	2025-08-11 21:30:51 -04:00
Trevor Buckner	6f9caf0590	Refactor to use BaseEditPage for shared layout Some Nav buttons missing on the different pages should now appear in all three pages. Unique buttons are still only on those pages for now (/share nav button only appears on the /edit page, etc.)	2025-08-10 22:16:07 -04:00