From 8bfa373da953788569a4c7adb92ad2c729af6247 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Wed, 30 Sep 2026 21:40:37 +0200
Subject: [PATCH 01/12] refactor snippetbar into functional component

---
 .../homebrew/editor/snippetbar/snippetbar.jsx | 299 ++++++++----------
 1 file changed, 134 insertions(+), 165 deletions(-)

diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index 9aa6b5ab7..dccfb1b4d 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -1,7 +1,6 @@
 /*eslint max-lines: ["warn", {"max": 350, "skipBlankLines": true, "skipComments": true}]*/
 import './snippetbar.less';
-import React from 'react';
-import createReactClass from 'create-react-class';
+import React, { useState, useEffect} from 'react';
 import { Dropdown } from '@components/dropdown/dropdown.jsx';
 
 import _ from 'lodash';
@@ -31,147 +30,122 @@ const execute = function(val, props){
 	return val;
 };
 
-const Snippetbar = createReactClass({
-	displayName     : 'SnippetBar',
-	getDefaultProps : function() {
-		return {
-			brew            : {},
-			view            : 'text',
-			onViewChange    : ()=>{},
-			onInject        : ()=>{},
-			onToggle        : ()=>{},
-			showEditButtons : true,
-			renderer        : 'legacy',
-			undo            : ()=>{},
-			redo            : ()=>{},
-			historySize     : ()=>{},
-			foldCode        : ()=>{},
-			unfoldCode      : ()=>{},
-			formatCode      : ()=>{},
-			cursorPos       : {},
-			themeBundle     : [],
-			updateBrew      : ()=>{}
-		};
-	},
+const SnippetBar = ({
+	brew            = {},
+	view            = 'text',
+	onViewChange    = ()=>{},
+	onInject        = ()=>{},
+	onToggle        = ()=>{},
+	showEditButtons = true,
+	renderer        = 'legacy',
+	undo            = ()=>{},
+	redo            = ()=>{},
+	historySize     = ()=>{},
+	foldCode        = ()=>{},
+	unfoldCode      = ()=>{},
+	formatCode      = ()=>{},
+	cursorPos       = {},
+	themeBundle     = [],
+	updateBrew      = ()=>{}
+})=>{
+	const [snippets, setSnippets] = useState([]);
+	const [showHistory, setShowHistory] = useState(false);
+	const [historyExists, setHistoryExists] = useState(false);
+	const [historyItems, setHistoryItems] = useState([]);
 
-	getInitialState : function() {
-		return {
-			renderer      : this.props.renderer,
-			snippets      : [],
-			showHistory   : false,
-			historyExists : false,
-			historyItems  : []
-		};
-	},
+	useEffect(()=>{
+		setSnippets(compileSnippets());
+	}, []);
 
-	componentDidMount : async function(prevState) {
-		const snippets = this.compileSnippets();
-		this.setState({
-			snippets : snippets
-		});
-	},
-
-	componentDidUpdate : async function(prevProps, prevState) {
-		if(prevProps.renderer != this.props.renderer ||
-			prevProps.themeBundle != this.props.themeBundle ||
-			prevProps.brew.snippets != this.props.brew.snippets) {
-			this.setState({
-				snippets : this.compileSnippets()
-			});
-		};
-
-		// Update history list if it has changed
-		const checkHistoryItems = await loadHistory(this.props.brew);
-
-		// If all items have the noData property, there is no saved data
-		const checkHistoryExists = !checkHistoryItems.every((historyItem)=>{
-			return historyItem?.noData;
-		});
-		if(prevState.historyExists != checkHistoryExists){
-			this.setState({
-				historyExists : checkHistoryExists
-			});
-		}
-
-		// If any history items have changed, update the list
-		if(checkHistoryExists && checkHistoryItems.some((historyItem, index)=>{
-			return index >= prevState.historyItems.length || !_.isEqual(historyItem, prevState.historyItems[index]);
-		})){
-			this.setState({
-				historyItems : checkHistoryItems
-			});
-		}
-	},
-
-	mergeCustomizer : function(oldValue, newValue, key) {
-		if(key == 'snippets') {
+	const mergeCustomizer = (oldValue, newValue, key)=>{
+		if(key == 'snippets') {
 			const result = _.reverse(_.unionBy(_.reverse(newValue), _.reverse(oldValue), 'name')); // Join snippets together, with preference for the child theme over the parent theme
 			return result.filter((snip)=>snip.gen || snip.subsnippets);
 		};
-	},
-
-	compileSnippets : function() {
+	};
+	const compileSnippets = ()=>{
 		let compiledSnippets = [];
 
 		let oldSnippets = _.keyBy(compiledSnippets, 'groupName');
 
-		if(this.props.themeBundle.snippets) {
-			for (let snippets of this.props.themeBundle.snippets) {
+		if(themeBundle.snippets) {
+			for (let snippets of themeBundle.snippets) {
 				if(typeof(snippets) == 'string')	// load staticThemes as needed; they were sent as just a file name
 					snippets = ThemeSnippets[snippets];
 
 				const newSnippets = _.keyBy(_.cloneDeep(snippets), 'groupName');
-				compiledSnippets = _.values(_.mergeWith(oldSnippets, newSnippets, this.mergeCustomizer));
+				compiledSnippets = _.values(_.mergeWith(oldSnippets, newSnippets, mergeCustomizer));
 
 				oldSnippets = _.keyBy(compiledSnippets, 'groupName');
 			}
 		}
 
-		const userSnippetsasJSON = brewSnippetsToJSON(this.props.brew.title || 'New Document', this.props.brew.snippets, this.props.themeBundle.snippets);
+		const userSnippetsasJSON = brewSnippetsToJSON(brew.title || 'New Document', brew.snippets, themeBundle.snippets);
 		compiledSnippets.push(userSnippetsasJSON);
 
 		return compiledSnippets;
-	},
+	};
 
-	handleSnippetClick : function(injectedText){
-		this.props.onInject(injectedText);
-	},
+	useEffect(()=>{
+		setSnippets(compileSnippets());
+	}, [renderer, themeBundle, brew.snippets]);
 
-	renderSnippetGroups : function(){
-		const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
-		if(snippets.length === 0) return null;
+	useEffect(()=>{
+		const updateHistory = async ()=>{
+			// Update history list if it has changed
+			const checkHistoryItems = await loadHistory(brew);
+
+			// If all items have the noData property, there is no saved data
+			const checkHistoryExists = !checkHistoryItems.every(
+				(historyItem)=>historyItem?.noData
+			);
+
+			if(historyExists !== checkHistoryExists) {
+				setHistoryExists(checkHistoryExists);
+			}
+
+			// If any history items have changed, update the list
+			if(!_.isEqual(checkHistoryItems, historyItems)) {
+				setHistoryItems(checkHistoryItems);
+			}
+		};
+
+		updateHistory();
+	}, [brew]);
+
+	const handleSnippetClick = (injectedText)=>onInject(injectedText);
+
+	const renderSnippetGroups = ()=>{
+		const currentSnippets = snippets.filter((snippetGroup)=>snippetGroup.view === view);
+		if(currentSnippets.length === 0) return null;
 
 		return <ul className='snippets' role='menubar' aria-label='Snippets Menubar'>
-			{_.map(snippets, (snippetGroup)=>{
+			{_.map(currentSnippets, (snippetGroup)=>{
 				return <SnippetGroup
-					brew={this.props.brew}
+					brew={brew}
 					groupName={snippetGroup.groupName}
 					icon={snippetGroup.icon}
 					snippets={snippetGroup.snippets}
 					key={snippetGroup.groupName}
-					onSnippetClick={this.handleSnippetClick}
-					cursorPos={this.props.cursorPos}
+					onSnippetClick={handleSnippetClick}
+					cursorPos={cursorPos}
 				/>;
 			})
 			}
 		</ul>;
-	},
+	};
 
-	replaceContent : function(item){
-		return this.props.updateBrew(item);
-	},
+	const replaceContent = (item)=>{
+		return updateBrew(item);
+	};
 
-	toggleHistoryMenu : function(){
-		this.setState({
-			showHistory : !this.state.showHistory
-		});
-	},
+	const toggleHistoryMenu = ()=>setShowHistory(!showHistory);
 
-	renderHistoryItems : function() {
-		if(!this.state.historyExists) return;
+	const renderHistoryItems = ()=>{
+		if(!historyExists) return;
 
 		return <div className='dropdown'>
-			{_.map(this.state.historyItems, (item, index)=>{
+			{_.map(historyItems, (item, index)=>{
 				if(item.noData || !item.savedAt) return;
 
 				const saveTime = new Date(item.savedAt);
@@ -185,106 +159,103 @@ const Snippetbar = createReactClass({
 				if(diffSecs > (24 * 60 * 60)) diffString = `about ${Math.floor(diffSecs / (24 * 60 * 60))} days ago`;
 				if(diffSecs > (7 * 24 * 60 * 60)) diffString = `about ${Math.floor(diffSecs / (7 * 24 * 60 * 60))} weeks ago`;
 
-				return <div className='snippet' key={index} onClick={()=>{this.replaceContent(item);}} >
+				return <div className='snippet' key={index} onClick={()=>{replaceContent(item);}} >
 					<i className={`fas fa-${index+1}`} />
 					<span className='name' title={saveTime.toISOString()}>v{item.version} : {diffString}</span>
 				</div>;
 			})}
 		</div>;
-	},
+	};
 
-	renderEditorButtons : function(){
-		if(!this.props.showEditButtons) return;
+
+	const renderEditorButtons =()=>{
+		if(!showEditButtons) return;
 
 		return (
 			<div className='editors'>
-				{this.props.view !== 'meta' && this.props.view !== 'settings' && <><div className='historyTools'>
-					<button className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
-						onClick={this.toggleHistoryMenu} >
+				{view !== 'meta' && view !== 'settings' && <><div className='historyTools'>
+					<button className={`editorTool snippetGroup history ${historyExists ? 'active' : ''}`}
+						onClick={toggleHistoryMenu} >
 						<i className='fas fa-clock-rotate-left' />
-						{ this.state.showHistory && this.renderHistoryItems() }
+						{ showHistory && renderHistoryItems() }
 					</button>
-					<button className={`editorTool undo ${this.props.historySize.done ? 'active' : ''}`}
-						onClick={this.props.undo} >
+					<button className={`editorTool undo ${historySize.done ? 'active' : ''}`}
+						onClick={undo} >
 						<i className='fas fa-undo' />
 					</button>
-					<button className={`editorTool redo ${this.props.historySize.undone ? 'active' : ''}`}
-						onClick={this.props.redo} >
+					<button className={`editorTool redo ${historySize.undone ? 'active' : ''}`}
+						onClick={redo} >
 						<i className='fas fa-redo' />
 					</button>
 				</div>
 				<div className='codeTools'>
-					<button className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
-						onClick={this.props.foldCode} >
+					<button className={`editorTool foldAll ${foldCode ? 'active' : ''}`}
+						onClick={foldCode} >
 						<i className='fas fa-compress-alt' />
 					</button>
-					<button className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
-						onClick={this.props.unfoldCode} >
+					<button className={`editorTool unfoldAll ${unfoldCode ? 'active' : ''}`}
+						onClick={unfoldCode} >
 						<i className='fas fa-expand-alt' />
 					</button>
-					<button className={`editorTool formatCode ${this.props.formatCode ? 'active' : ''}`}
-						onClick={this.props.formatCode} >
+					<button className={`editorTool formatCode ${formatCode ? 'active' : ''}`}
+						onClick={formatCode} >
 						<i className='fas fa-wand-magic-sparkles' />
 					</button>
 				</div></>}
 
 				<div className='tabs'>
-					<button className={cx('text', { selected: this.props.view === 'text' })}
-						onClick={()=>this.props.onViewChange('text')}>
+					<button className={cx('text', { selected: view === 'text' })}
+						onClick={()=>onViewChange('text')}>
 						<i className='fa fa-beer' />
 					</button>
-					<button className={cx('style', { selected: this.props.view === 'style' })}
-						onClick={()=>this.props.onViewChange('style')}>
+					<button className={cx('style', { selected: view === 'style' })}
+						onClick={()=>onViewChange('style')}>
 						<i className='fa fa-paint-brush' />
 					</button>
-					<button className={cx('snippet', { selected: this.props.view === 'snippet' })}
-						onClick={()=>this.props.onViewChange('snippet')}>
+					<button className={cx('snippet', { selected: view === 'snippet' })}
+						onClick={()=>onViewChange('snippet')}>
 						<i className='fas fa-th-list' />
 					</button>
-					<button className={cx('meta', { selected: this.props.view === 'meta' })}
-						onClick={()=>this.props.onViewChange('meta')}>
+					<button className={cx('meta', { selected: view === 'meta' })}
+						onClick={()=>onViewChange('meta')}>
 						<i className='fas fa-info-circle' />
 					</button>
-					<button className={cx('settings', { selected: this.props.view === 'settings' })}
-						onClick={()=>this.props.onViewChange('settings')}>
+					<button className={cx('settings', { selected: view === 'settings' })}
+						onClick={()=>onViewChange('settings')}>
 						<i className='fas fa-gear' />
 					</button>
 				</div>
 
 			</div>
 		);
-	},
+	};
 
-	render : function(){
-		return <div className='snippetBar'>
-			{this.renderSnippetGroups()}
-			{this.renderEditorButtons()}
-		</div>;
-	}
-});
+	return <div className='snippetBar'>
+		{renderSnippetGroups()}
+		{renderEditorButtons()}
+	</div>;
+};
 
-export default Snippetbar;
+export default SnippetBar;
 
-const SnippetGroup = createReactClass({
-	displayName     : 'SnippetGroup',
-	getDefaultProps : function() {
-		return {
-			brew           : {},
-			groupName      : '',
-			icon           : 'fas fa-rocket',
-			snippets       : [],
-			onSnippetClick : function(){},
-		};
-	},
-	handleSnippetClick : function(e, snippet){
-		this.props.onSnippetClick(execute(snippet.gen, this.props));
-	},
-	renderSnippets : function(snippets){
+const SnippetGroup = (props)=>{
+	const {
+		brew           = {},
+		groupName      = '',
+		icon           = 'fas fa-rocket',
+		snippets       = [],
+		onSnippetClick = function(){},
+	} = props;
+
+	const handleSnippetClick = (e, snippet)=>{
+		onSnippetClick(execute(snippet.gen, props));
+	};
+	const renderSnippets = (snippets)=>{
 		return _.map(snippets, (snippet)=>{
 			if(!snippet.subsnippets){
 				return (
 					<li key={snippet.name} role='none'>
-						<button className='menu-item'  onClick={(e)=>this.handleSnippetClick(e, snippet)} role='menuitem' aria-label={snippet.name} disabled={snippet.disabled}>
+						<button className='menu-item'  onClick={(e)=>handleSnippetClick(e, snippet)} role='menuitem' aria-label={snippet.name} disabled={snippet.disabled}>
 							<i className={snippet.icon} />
 							<span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span>
 							{snippet.experimental && <span className='status'>beta</span>}
@@ -295,17 +266,15 @@ const SnippetGroup = createReactClass({
 			} else if(snippet.subsnippets){
 				return (
 					<Dropdown groupName={snippet.name} icon={snippet.icon} key={snippet.name}>
-						{this.renderSnippets(snippet.subsnippets)}
+						{renderSnippets(snippet.subsnippets)}
 					</Dropdown>
 				);
 			}
 
 		});
-	},
+	};
 
-	render : function(){
-		return <Dropdown groupName={this.props.groupName} id={this.props.groupName} icon={this.props.icon}>
-			{this.renderSnippets(this.props.snippets)}
-		</Dropdown>;
-	},
-});
+	return <Dropdown groupName={groupName} id={groupName} icon={icon}>
+		{renderSnippets(snippets)}
+	</Dropdown>;
+};

From d3c186aa5f79c2ec889720fa2ab4fd7f789f3e5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Wed, 30 Sep 2026 22:05:37 +0200
Subject: [PATCH 02/12] fix historyversion

---
 client/components/dropdown/dropdown.jsx       | 19 ++++-
 client/components/dropdown/dropdown.less      |  3 +
 .../homebrew/editor/snippetbar/snippetbar.jsx | 85 +++++++++++++------
 .../editor/snippetbar/snippetbar.less         | 13 ++-
 4 files changed, 86 insertions(+), 34 deletions(-)

diff --git a/client/components/dropdown/dropdown.jsx b/client/components/dropdown/dropdown.jsx
index e06015eae..e5562112f 100644
--- a/client/components/dropdown/dropdown.jsx
+++ b/client/components/dropdown/dropdown.jsx
@@ -22,7 +22,7 @@ import _ from 'lodash';
 // use react context to keep track of the menu depth (menus in menus)
 const MenuDepthContext = React.createContext(0);
 
-const Dropdown = ({ groupName, className = null, icon, children, color = null, customTrigger, ...props })=>{
+const Dropdown = ({ groupName, className = null, icon, children, color = null, customTrigger, disabled, ...props })=>{
 	const reactId = useId();
 	const safeId = reactId.replace(/[^a-zA-Z0-9_-]/g, '');
 	const menuId = `${_.kebabCase(groupName)}-${safeId}-menu`;
@@ -35,6 +35,21 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
 	const triggerRef = useRef(null);
 	const menuRef = useRef(null);
 
+	if(disabled){
+	return (
+		<li className={['menu-wrapper', className].filter(Boolean).join(' ')} role='none'>
+			<button
+				className={['menu-item', color].filter(Boolean).join(' ')}
+				aria-label={groupName}
+				role='menuitem'
+				disabled
+			>
+				{trigger(groupName, icon)}
+			</button>
+		</li>
+	);
+}
+
 	// use setAttribute instead of the React style prop because React strips unknown CSS
 	// properties (like anchor-name) from inline styles in browsers that don't support them.
 	// setAttribute writes raw CSS text that the anchor positioning polyfill can read
@@ -92,7 +107,7 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
 	};
 
 	return (
-		<li className='menu-wrapper' role='none'>
+		<li className={['menu-wrapper', className].filter(Boolean).join(' ')} role='none'>
 			<button
 				id={`${menuId}-trigger`}
 				className={['menu-item', color].join(' ')}
diff --git a/client/components/dropdown/dropdown.less b/client/components/dropdown/dropdown.less
index fc00260a2..069627b73 100644
--- a/client/components/dropdown/dropdown.less
+++ b/client/components/dropdown/dropdown.less
@@ -11,6 +11,9 @@
 }
 
 :root { --activeTriggerColor : var(--activeTriggerColor); }
+.menu-wrapper {
+	list-style: none;
+}
 .menu-list {
 	position         : fixed;
 	top              : anchor(bottom);
diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index dccfb1b4d..fd239af50 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -1,6 +1,6 @@
 /*eslint max-lines: ["warn", {"max": 350, "skipBlankLines": true, "skipComments": true}]*/
 import './snippetbar.less';
-import React, { useState, useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
 import { Dropdown } from '@components/dropdown/dropdown.jsx';
 
 import _ from 'lodash';
@@ -49,7 +49,6 @@ const SnippetBar = ({
 	updateBrew      = ()=>{}
 })=>{
 	const [snippets, setSnippets] = useState([]);
-	const [showHistory, setShowHistory] = useState(false);
 	const [historyExists, setHistoryExists] = useState(false);
 	const [historyItems, setHistoryItems] = useState([]);
 
@@ -139,46 +138,76 @@ const SnippetBar = ({
 		return updateBrew(item);
 	};
 
-	const toggleHistoryMenu = ()=>setShowHistory(!showHistory);
+	const renderHistoryMenu = ()=>{
+		if(!historyExists) return <Dropdown 
+				groupName='History'
+				icon='fas fa-clock-rotate-left'
+				className='history'
+				customTrigger={
+					<>
+						<i className='fas fa-clock-rotate-left' />
+					</>
+				} disabled></Dropdown>;
 
-	const renderHistoryItems = ()=>{
-		if(!historyExists) return;
+		return (
+			<Dropdown
+				groupName='History'
+				icon='fas fa-clock-rotate-left'
+				className='history'
+				customTrigger={
+					<>
+						<i className='fas fa-clock-rotate-left' />
+					</>
+				}
 
-		return <div className='dropdown'>
-			{_.map(historyItems, (item, index)=>{
-				if(item.noData || !item.savedAt) return;
+			>
+				{_.map(historyItems, (item, index)=>{
+					if(item.noData || !item.savedAt) return null;
 
-				const saveTime = new Date(item.savedAt);
-				const diffMs = new Date() - saveTime;
-				const diffSecs = Math.floor(diffMs / 1000);
+					const saveTime = new Date(item.savedAt);
+					const diffMs = new Date() - saveTime;
+					const diffSecs = Math.floor(diffMs / 1000);
 
-				let diffString = `about ${diffSecs} seconds ago`;
+					let diffString = `about ${diffSecs} seconds ago`;
 
-				if(diffSecs > 60) diffString = `about ${Math.floor(diffSecs / 60)} minutes ago`;
-				if(diffSecs > (60 * 60)) diffString = `about ${Math.floor(diffSecs / (60 * 60))} hours ago`;
-				if(diffSecs > (24 * 60 * 60)) diffString = `about ${Math.floor(diffSecs / (24 * 60 * 60))} days ago`;
-				if(diffSecs > (7 * 24 * 60 * 60)) diffString = `about ${Math.floor(diffSecs / (7 * 24 * 60 * 60))} weeks ago`;
+					if(diffSecs > 60)
+						diffString = `about ${Math.floor(diffSecs / 60)} minutes ago`;
+					if(diffSecs > (60 * 60))
+						diffString = `about ${Math.floor(diffSecs / (60 * 60))} hours ago`;
+					if(diffSecs > (24 * 60 * 60))
+						diffString = `about ${Math.floor(diffSecs / (24 * 60 * 60))} days ago`;
+					if(diffSecs > (7 * 24 * 60 * 60))
+						diffString = `about ${Math.floor(diffSecs / (7 * 24 * 60 * 60))} weeks ago`;
 
-				return <div className='snippet' key={index} onClick={()=>{replaceContent(item);}} >
-					<i className={`fas fa-${index+1}`} />
-					<span className='name' title={saveTime.toISOString()}>v{item.version} : {diffString}</span>
-				</div>;
-			})}
-		</div>;
+					return (
+						<li key={index} role='none'>
+							<button
+								className='menu-item'
+								onClick={()=>replaceContent(item)}
+								role='menuitem'
+							>
+								<i className={`fas fa-${index + 1}`} />
+								<span
+									className='name'
+									title={saveTime.toISOString()}
+								>
+								v{item.version} : {diffString}
+								</span>
+							</button>
+						</li>
+					);
+				})}
+			</Dropdown>
+		);
 	};
 
-
 	const renderEditorButtons =()=>{
 		if(!showEditButtons) return;
 
 		return (
 			<div className='editors'>
 				{view !== 'meta' && view !== 'settings' && <><div className='historyTools'>
-					<button className={`editorTool snippetGroup history ${historyExists ? 'active' : ''}`}
-						onClick={toggleHistoryMenu} >
-						<i className='fas fa-clock-rotate-left' />
-						{ showHistory && renderHistoryItems() }
-					</button>
+					{renderHistoryMenu()}
 					<button className={`editorTool undo ${historySize.done ? 'active' : ''}`}
 						onClick={undo} >
 						<i className='fas fa-undo' />
diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less
index a9c9c3d25..a5f550b8b 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -25,7 +25,7 @@
 		display         : flex;
 		justify-content : flex-end;
 		min-width       : 275px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
-		font-size       : 0.85rem;
+		font-size:0.85rem;
 		&:only-child {min-width   : unset; margin-left : auto;}
 		reading-order   : 2;
 
@@ -36,7 +36,7 @@
 
 			&:first-child { border-left : none; }
 
-			& > button {
+			& > button, & > li {
 				position    : relative;
 				width       : @menuHeight;
 				height      : @menuHeight;
@@ -44,7 +44,7 @@
 				text-align  : center;
 				cursor      : pointer;
 
-				&.editorTool:not(.active) { cursor : not-allowed; }
+				&.editorTool:not(.active),&.editorTool:disabled { cursor : not-allowed; }
 
 				&:hover,&.selected { background-color : var(--hoverMenuColor); }
 				&.text {
@@ -85,11 +85,16 @@
 					&.active { color : inherit; }
 				}
 				&.history {
+					font-size:.70rem;
+					
+					i {
+						min-width:auto;
+					}
 					.tooltipLeft('History');
 					position  : relative;
 					color     : grey;
 					border    : none;
-					&.active { color : inherit; }
+					&:not(:disabled) { color : inherit; }
 					& > .dropdown {
 						right : -1px;
 						& > .snippet { padding-right : 10px; }

From fd4f734544a32e3988edaab1f1f3edbb14cfe0fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Wed, 30 Sep 2026 22:10:46 +0200
Subject: [PATCH 03/12] lint

---
 .../homebrew/editor/snippetbar/snippetbar.jsx  | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index fd239af50..77ba51c63 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -139,15 +139,15 @@ const SnippetBar = ({
 	};
 
 	const renderHistoryMenu = ()=>{
-		if(!historyExists) return <Dropdown 
-				groupName='History'
-				icon='fas fa-clock-rotate-left'
-				className='history'
-				customTrigger={
-					<>
-						<i className='fas fa-clock-rotate-left' />
-					</>
-				} disabled></Dropdown>;
+		if(!historyExists) return <Dropdown
+			groupName='History'
+			icon='fas fa-clock-rotate-left'
+			className='history'
+			customTrigger={
+				<>
+					<i className='fas fa-clock-rotate-left' />
+				</>
+			} disabled></Dropdown>;
 
 		return (
 			<Dropdown

From 93b67ecb29cdcca282a649633b58bd0bfbe346d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Thu, 1 Oct 2026 11:56:41 +0200
Subject: [PATCH 04/12] Add client/icons/broken-image too

---
 vitePlugins/generateAssetsPlugin.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/vitePlugins/generateAssetsPlugin.js b/vitePlugins/generateAssetsPlugin.js
index 4e838478b..64f564146 100644
--- a/vitePlugins/generateAssetsPlugin.js
+++ b/vitePlugins/generateAssetsPlugin.js
@@ -15,6 +15,7 @@ export function generateAssetsPlugin(isDev = false) {
 			//hopefully temporary to fix 406 flood coming from editor
 			await fs.copy('./client/icons/broken-image.jpg', `${buildDir}/edit/client/icons/broken-image.jpg`);
 			await fs.copy('./client/icons/broken-image.jpg', `${buildDir}/new/client/icons/broken-image.jpg`);
+			await fs.copy('./client/icons/broken-image.jpg', `${buildDir}/client/icons/broken-image.jpg`);
 
 			// Copy shared styles/fonts
 			const assets = fs.readdirSync('./shared/naturalcrit/styles');

From cdbed8a07ba2ba692d2cf03a0e2c29e258df5135 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Thu, 1 Oct 2026 12:01:01 +0200
Subject: [PATCH 05/12] Revert "Add client/icons/broken-image too"

This reverts commit 93b67ecb29cdcca282a649633b58bd0bfbe346d4.
---
 vitePlugins/generateAssetsPlugin.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/vitePlugins/generateAssetsPlugin.js b/vitePlugins/generateAssetsPlugin.js
index 7eef8bda5..6ad2a86ea 100644
--- a/vitePlugins/generateAssetsPlugin.js
+++ b/vitePlugins/generateAssetsPlugin.js
@@ -18,7 +18,6 @@ export function generateAssetsPlugin(isDev = false) {
 			//in some time once all users haver refreshed their browser
 			await fs.copy('./client/icons/broken-image.jpg', `${buildDir}/edit/client/icons/broken-image.jpg`);
 			await fs.copy('./client/icons/broken-image.jpg', `${buildDir}/new/client/icons/broken-image.jpg`);
-			await fs.copy('./client/icons/broken-image.jpg', `${buildDir}/client/icons/broken-image.jpg`);
 
 			// Copy shared styles/fonts
 			const assets = fs.readdirSync('./shared/naturalcrit/styles');

From 50e77d3ba85dfb2843987866c68a636f9303c986 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Fri, 2 Oct 2026 10:25:08 +0200
Subject: [PATCH 06/12] fix dropdown

---
 client/components/dropdown/dropdown.jsx | 30 ++++++++++++-------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/client/components/dropdown/dropdown.jsx b/client/components/dropdown/dropdown.jsx
index e5562112f..1949e0093 100644
--- a/client/components/dropdown/dropdown.jsx
+++ b/client/components/dropdown/dropdown.jsx
@@ -35,21 +35,6 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
 	const triggerRef = useRef(null);
 	const menuRef = useRef(null);
 
-	if(disabled){
-	return (
-		<li className={['menu-wrapper', className].filter(Boolean).join(' ')} role='none'>
-			<button
-				className={['menu-item', color].filter(Boolean).join(' ')}
-				aria-label={groupName}
-				role='menuitem'
-				disabled
-			>
-				{trigger(groupName, icon)}
-			</button>
-		</li>
-	);
-}
-
 	// use setAttribute instead of the React style prop because React strips unknown CSS
 	// properties (like anchor-name) from inline styles in browsers that don't support them.
 	// setAttribute writes raw CSS text that the anchor positioning polyfill can read
@@ -106,6 +91,21 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
 		document.querySelectorAll('.menu-list:popover-open').forEach((openMenu)=>openMenu.hidePopover());
 	};
 
+	if(disabled){
+		return (
+			<li className={['menu-wrapper', className].filter(Boolean).join(' ')} role='none'>
+				<button
+					className={['menu-item', color].filter(Boolean).join(' ')}
+					aria-label={groupName}
+					role='menuitem'
+					disabled
+				>
+					{trigger(groupName, icon)}
+				</button>
+			</li>
+		);
+	}
+
 	return (
 		<li className={['menu-wrapper', className].filter(Boolean).join(' ')} role='none'>
 			<button

From 0d994dd655ef0006d76a1a1553e7ec5d72593262 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Fri, 2 Oct 2026 10:26:15 +0200
Subject: [PATCH 07/12] add tooltip

---
 client/homebrew/editor/snippetbar/snippetbar.less | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less
index a5f550b8b..4db53d07a 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -59,6 +59,9 @@
 				&.snippet {
 					.tooltipLeft('Snippets');
 				}
+				&.settings {
+					.tooltipLeft('Settings');
+				}
 				&.undo {
 					.tooltipLeft('Undo');
 					color     : grey;

From ee05ee2c5ad593c050ce74a2c48f46895620be59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Fri, 2 Oct 2026 10:31:43 +0200
Subject: [PATCH 08/12] lint

---
 client/homebrew/editor/snippetbar/snippetbar.jsx | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index 77ba51c63..ba0dc51b8 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -143,23 +143,17 @@ const SnippetBar = ({
 			groupName='History'
 			icon='fas fa-clock-rotate-left'
 			className='history'
-			customTrigger={
-				<>
-					<i className='fas fa-clock-rotate-left' />
-				</>
-			} disabled></Dropdown>;
+			customTrigger={<><i className='fas fa-clock-rotate-left' /></>}
+			disabled
+		>
+			</Dropdown>;
 
 		return (
 			<Dropdown
 				groupName='History'
 				icon='fas fa-clock-rotate-left'
 				className='history'
-				customTrigger={
-					<>
-						<i className='fas fa-clock-rotate-left' />
-					</>
-				}
-
+				customTrigger={<><i className='fas fa-clock-rotate-left' /></>}
 			>
 				{_.map(historyItems, (item, index)=>{
 					if(item.noData || !item.savedAt) return null;

From b065db4b5b507931daea159252e625f7f425c693 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Fri, 2 Oct 2026 10:46:32 +0200
Subject: [PATCH 09/12] fix first render not working

---
 client/components/dropdown/dropdown.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/components/dropdown/dropdown.jsx b/client/components/dropdown/dropdown.jsx
index 1949e0093..f87fc9a46 100644
--- a/client/components/dropdown/dropdown.jsx
+++ b/client/components/dropdown/dropdown.jsx
@@ -22,7 +22,7 @@ import _ from 'lodash';
 // use react context to keep track of the menu depth (menus in menus)
 const MenuDepthContext = React.createContext(0);
 
-const Dropdown = ({ groupName, className = null, icon, children, color = null, customTrigger, disabled, ...props })=>{
+const Dropdown = ({ groupName, className = null, icon, children, color = null, customTrigger, disabled = false, ...props })=>{
 	const reactId = useId();
 	const safeId = reactId.replace(/[^a-zA-Z0-9_-]/g, '');
 	const menuId = `${_.kebabCase(groupName)}-${safeId}-menu`;
@@ -41,7 +41,7 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
 	useEffect(()=>{
 		triggerRef.current?.setAttribute('style', `anchor-name: ${anchorName}`);
 		menuRef.current?.setAttribute('style', `position-anchor: ${anchorName}`);
-	}, [anchorName]);
+	}, [anchorName, disabled]);
 
 	// hide popover with click inside iframe (not supported by light dismiss)
 	useEffect(()=>{

From 34af1d19e4d168685298f569f34d61f0fa3852b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Fri, 2 Oct 2026 10:46:42 +0200
Subject: [PATCH 10/12] optimize dropdown usage

---
 client/homebrew/editor/snippetbar/snippetbar.jsx | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index ba0dc51b8..b4f344033 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -139,23 +139,15 @@ const SnippetBar = ({
 	};
 
 	const renderHistoryMenu = ()=>{
-		if(!historyExists) return <Dropdown
-			groupName='History'
-			icon='fas fa-clock-rotate-left'
-			className='history'
-			customTrigger={<><i className='fas fa-clock-rotate-left' /></>}
-			disabled
-		>
-			</Dropdown>;
-
 		return (
 			<Dropdown
 				groupName='History'
 				icon='fas fa-clock-rotate-left'
 				className='history'
 				customTrigger={<><i className='fas fa-clock-rotate-left' /></>}
+				disabled={!historyExists}
 			>
-				{_.map(historyItems, (item, index)=>{
+				{historyExists && _.map(historyItems, (item, index)=>{
 					if(item.noData || !item.savedAt) return null;
 
 					const saveTime = new Date(item.savedAt);

From 766fc73dbca47cb0656a5f70d3e971d8608d16f7 Mon Sep 17 00:00:00 2001
From: Trevor Buckner <calculuschild@gmail.com>
Date: Mon, 5 Oct 2026 18:06:02 +0000
Subject: [PATCH 11/12] Move currentBrew/lastSavedBrew update after saving to
 common hook

---
 client/homebrew/pages/editPage/editPage.jsx      | 16 +++-------------
 client/homebrew/pages/homePage/homePage.jsx      | 11 +++--------
 client/homebrew/pages/newPage/newPage.jsx        |  9 ++-------
 .../homebrew/utils/commonEditPageFunctions.jsx   | 13 ++++++++++++-
 4 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx
index 351ad8e71..71dfdbdf2 100644
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -103,23 +103,13 @@ const EditPage = (props)=>{
 		if(!res) return;
 
 		const updatedFields = {
-			googleId : res.body.googleId ?? null,
-			editId   : res.body.editId,
+			googleId : res.body.googleId ?? null, //TODO: investigate if we can set googleId:null in server/update instead of undefined
+			editId   : res.body.editId,           //then, editPage can just apply res.body instead of breaking out these fields.
 			shareId  : res.body.shareId,
 			version  : res.body.version
 		};
 
-		lastSavedBrew.current = {
-			...brew,
-			...updatedFields
-		};
-
-		setCurrentBrew((prevBrew)=>({
-			...prevBrew,
-			...updatedFields
-		}));
-
-		return res.body;
+		return updatedFields;
 	};
 
 	const onSaveSuccess = (savedBrew)=>{
diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx
index b430a7ed5..20b75b486 100644
--- a/client/homebrew/pages/homePage/homePage.jsx
+++ b/client/homebrew/pages/homePage/homePage.jsx
@@ -22,9 +22,9 @@ const HomePage =(props)=>{
 		...props
 	};
 
-	const [currentBrew, setCurrentBrew]                = useState(props.brew);
-	const [saveGoogle, setSaveGoogle] = useState(global.account?.googleId ? true : false);
-	const [error, setError]                      = useState(undefined);
+	const [currentBrew, setCurrentBrew] = useState(props.brew);
+	const [saveGoogle, setSaveGoogle]   = useState(global.account?.googleId ? true : false);
+	const [error, setError]             = useState(undefined);
 
 	const lastSavedBrew      = useRef(_.cloneDeep(props.brew));
 
@@ -38,11 +38,6 @@ const HomePage =(props)=>{
 			});
 		if(!res) return;
 
-		setCurrentBrew((prevBrew)=>({
-			...prevBrew,
-			...res.body
-		}));
-
 		return res.body;
 	};
 
diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx
index ea389faa4..8606cc752 100644
--- a/client/homebrew/pages/newPage/newPage.jsx
+++ b/client/homebrew/pages/newPage/newPage.jsx
@@ -23,8 +23,8 @@ const NewPage = (props)=>{
 	};
 
 	const [currentBrew, setCurrentBrew] = useState(props.brew);
-	const [saveGoogle, setSaveGoogle] = useState(global.account?.googleId ? true : false);
-	const [error, setError] = useState(null);
+	const [saveGoogle, setSaveGoogle]   = useState(global.account?.googleId ? true : false);
+	const [error, setError]             = useState(null);
 
 	const lastSavedBrew      = useRef(_.cloneDeep(props.brew));
 
@@ -46,11 +46,6 @@ const NewPage = (props)=>{
 			});
 		if(!res) return;
 
-		setCurrentBrew((prevBrew)=>({
-			...prevBrew,
-			...res.body
-		}));
-
 		return res.body;
 	};
 
diff --git a/client/homebrew/utils/commonEditPageFunctions.jsx b/client/homebrew/utils/commonEditPageFunctions.jsx
index aa55e5394..701680ecf 100644
--- a/client/homebrew/utils/commonEditPageFunctions.jsx
+++ b/client/homebrew/utils/commonEditPageFunctions.jsx
@@ -202,9 +202,20 @@ export default function useCommonEditPageFunctions(dependencies) {
 			setIsSaving(true);
 			setError(null);
 			setHTMLErrors(hbfm.validate(currentBrew.text));
-			let savedBrew = await save(currentBrew, saveToGoogle)
+			const brewToSave = currentBrew;
+			let savedBrew = await save(brewToSave, saveToGoogle)
 				.catch((err)=>{setError(err);});
 			if(savedBrew) {
+				lastSavedBrew.current = {
+					...brewToSave,
+					...savedBrew
+				};
+
+				setCurrentBrew((prevBrew)=>({
+					...prevBrew,
+					...savedBrew
+				}));
+
 				if(useLocalStorage) clearLocalStorage();
 				onSaveSuccess(savedBrew);
 			}

From e70ebd8c5892159ffecabdc595d4a5381cf6904d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Mon, 5 Oct 2026 23:03:43 +0200
Subject: [PATCH 12/12] Reapply "Add client/icons/broken-image too"

This reverts commit cdbed8a07ba2ba692d2cf03a0e2c29e258df5135.
---
 vitePlugins/generateAssetsPlugin.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/vitePlugins/generateAssetsPlugin.js b/vitePlugins/generateAssetsPlugin.js
index 6ad2a86ea..7eef8bda5 100644
--- a/vitePlugins/generateAssetsPlugin.js
+++ b/vitePlugins/generateAssetsPlugin.js
@@ -18,6 +18,7 @@ export function generateAssetsPlugin(isDev = false) {
 			//in some time once all users haver refreshed their browser
 			await fs.copy('./client/icons/broken-image.jpg', `${buildDir}/edit/client/icons/broken-image.jpg`);
 			await fs.copy('./client/icons/broken-image.jpg', `${buildDir}/new/client/icons/broken-image.jpg`);
+			await fs.copy('./client/icons/broken-image.jpg', `${buildDir}/client/icons/broken-image.jpg`);
 
 			// Copy shared styles/fonts
 			const assets = fs.readdirSync('./shared/naturalcrit/styles');