From fbc54f5ab0d757704ed738379c1b9477fb77c6a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Tue, 13 Oct 2026 19:48:22 +0200
Subject: [PATCH] some suggested changes

---
 client/homebrew/navbar/nav.jsx                |  6 ++--
 client/homebrew/navbar/navbar.jsx             | 12 +++----
 client/homebrew/navbar/navbar.less            | 36 ++++++++++++++++---
 client/homebrew/navbar/share.navitem.jsx      |  8 ++---
 .../pages/basePages/editorPage/editorPage.jsx |  4 ++-
 5 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/client/homebrew/navbar/nav.jsx b/client/homebrew/navbar/nav.jsx
index f35e461cb..7218d5f22 100644
--- a/client/homebrew/navbar/nav.jsx
+++ b/client/homebrew/navbar/nav.jsx
@@ -27,17 +27,17 @@ const Nav = {
 	item : ({ icon, kbd, href, newTab, onClick, children, className, disabled, noDismiss, ...props })=>{
 		const classes = cx('navItem', className);
 		if(disabled) {
-			return <button className={classes} disabled>{children}{icon && <i className={icon}></i>}</button>;
+			return <button className={classes} disabled>{icon && <i className={icon}></i>}{children}</button>;
 		}
 		if(href){
 			return <a className={classes} href={href} target={newTab ? '_blank' : '_self'} {...props}>
-				{children}
 				{icon && <i className={icon}></i>}
+				{children}
 			</a>;
 		} else {
 			return <button {...props} no-dismiss={noDismiss ? 'true' : undefined} className={classes} onClick={onClick} >
-				{children}
 				{icon && <i className={icon}></i>}
+				{children}
 				{kbd && <kbd>{kbd}</kbd>}
 			</button>;
 		}
diff --git a/client/homebrew/navbar/navbar.jsx b/client/homebrew/navbar/navbar.jsx
index d2b4504e3..1b0855cb4 100644
--- a/client/homebrew/navbar/navbar.jsx
+++ b/client/homebrew/navbar/navbar.jsx
@@ -60,19 +60,19 @@ const Navbar = ({ children, brew, pageName, editor, title, currentPage, props })
 		return (
 			<Dropdown groupName={'Edit'} customTrigger={<>Edit</>} icon={null} key={'edit'}>
 				<div className='nav-section'>
-					<Nav.item onClick={()=>editor?.undo()} kbd={`${mod} + z`} disabled={!editor}>
+					<Nav.item icon={'fas fa-undo'} onClick={()=>editor?.undo()} kbd={`${mod} + z`} disabled={!editor}>
 						Undo
 					</Nav.item>
-					<Nav.item onClick={()=>editor?.redo()} kbd={`${mod} + Shift + z`} disabled={!editor}>
+					<Nav.item icon={'fas fa-redo'} onClick={()=>editor?.redo()} kbd={`${mod} + Shift + z`} disabled={!editor}>
 						Redo
 					</Nav.item>
-					<Nav.item onClick={()=>editor?.find()} kbd={`${mod} + f`} disabled={!editor}>
+					<Nav.item icon={'fas fa-search'} onClick={()=>editor?.find()} kbd={`${mod} + f`} disabled={!editor}>
 						Find / Replace
 					</Nav.item>
-					<Nav.item onClick={()=>editor?.foldCode()} disabled={!editor}>
+					<Nav.item icon={'fas fa-compress-alt'} onClick={()=>editor?.foldCode()} disabled={!editor}>
 						Fold all lines
 					</Nav.item>
-					<Nav.item onClick={()=>editor?.unfoldCode()} disabled={!editor}>
+					<Nav.item icon={'fas fa-expand-alt'} onClick={()=>editor?.unfoldCode()} disabled={!editor}>
 						Unfold all lines
 					</Nav.item>
 				</div>
@@ -97,7 +97,7 @@ const Navbar = ({ children, brew, pageName, editor, title, currentPage, props })
 				</div>
 				<ShareNavItem brew={brew} disabled={!brew?.shareId} currentPage={currentPage} />
 				{navSlots.go}
-				<Dropdown className='navItem recent' groupName={'Recent Brews'} customTrigger={<>Recent Brews</>} icon={null} key={'recent'}>
+				<Dropdown className='navItem recent' groupName={'Recent Brews'} icon={'fas fa-history'} key={'recent'}>
 					<RecentNavItem />
 				</Dropdown>
 			</Dropdown>
diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index c0062a6ee..d00b6c99d 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -21,7 +21,7 @@
 		height: 100%;
 		padding: 5px;
 		cursor: pointer;
-		max-width: 150px;
+		max-width: 220px;
 		text-wrap: pretty;
 
 		&:has(> button, > a) {
@@ -153,7 +153,10 @@
 			}
 		}
 		&.save {
-			width: 90px;
+			width: 100px;
+			display:grid;
+			place-items: stretch;
+			
 			&.neverSaved {
 				background-color: @orange;
 				color: #fff;
@@ -173,18 +176,32 @@
 	.navItem,
 	.menu-wrapper {
 		--activeTriggerColor: #666;
+
 		&:has(ul):not(:has(ul :is(button, a):not(:disabled))) {
 			color: grey; //faux disabled if all buttons are disabled
 		}
 		&:not(.header):hover {
 			background: #484848;
 		}
-		&:has(> i, > kbd, > img) {
+		&:not(.header):has(:popover-open) {
+			background: var(--activeTriggerColor);
+		}
+		&:has(> kbd) {
 			display: flex;
 			gap: 5px;
 			justify-content: space-between;
 		}
 
+		i {
+			position:absolute;
+			left:5px;
+
+			&.caret {
+				left:unset;
+				right:5px;
+			}
+		}
+
 		&.header {
 			cursor: default;
 			place-content: center;
@@ -197,6 +214,7 @@
 				gap: 5px;
 				height: 2.7em;
 				isolation: isolate;
+				padding-left:5px;
 
 				&.header {
 					padding: 5px 0;
@@ -245,6 +263,10 @@
 				translate: -5px;
 			}
 		}
+		span {
+			text-align: left;
+		}
+		
 	}
 
 	> ul {
@@ -269,10 +291,11 @@
 			font-size: 13px;
 			text-transform: capitalize;
 			padding-bottom: 5px;
-			min-width: 80px;
+			min-width: 130px;
 
 			.navItem {
 				min-height: 2.2em;
+				padding-left: 25px;
 
 				&.save {
 					width: 100%;
@@ -285,6 +308,9 @@
 				margin-bottom: 5px;
 			}
 
+			button.menu-item {
+				padding:0;
+			}
 			li {
 				margin-block: 2px;
 			}
@@ -302,7 +328,7 @@
 			color: #777;
 		}
 		display: grid;
-		place-items: center;
+		place-items: stretch;
 		height: 100%;
 		width: 100%;
 		padding: 5px 10px;
diff --git a/client/homebrew/navbar/share.navitem.jsx b/client/homebrew/navbar/share.navitem.jsx
index 0a8798f35..218c4dc34 100644
--- a/client/homebrew/navbar/share.navitem.jsx
+++ b/client/homebrew/navbar/share.navitem.jsx
@@ -25,13 +25,13 @@ const getRedditLink = (brew)=>{
 export default ({ brew, disabled, currentPage })=>{
 	return (
 		<div className='nav-section'>
-			<Nav.item href={`/edit/${getEditId(brew)}`} disabled={disabled || !brew?.editId}>
+			<Nav.item icon={'fas fa-pencil'} href={`/edit/${getEditId(brew)}`} disabled={disabled || !brew?.editId}>
 				edit this brew
 			</Nav.item>
-			<Nav.item href={`/share/${getShareId(brew)}`} disabled={disabled}>
+			<Nav.item icon={'fas fa-share-alt'} href={`/share/${getShareId(brew)}`} disabled={disabled}>
 			view share page
 			</Nav.item>
-			<Nav.item onClick={()=>{navigator.clipboard.writeText(`${global.config.baseUrl}/share/${getShareId(brew)}`);}} disabled={disabled}>
+			<Nav.item icon={'far fa-copy'} onClick={()=>{navigator.clipboard.writeText(`${global.config.baseUrl}/share/${getShareId(brew)}`);}} disabled={disabled}>
 			copy share url
 			</Nav.item>
 			{currentPage > 1 &&
@@ -39,7 +39,7 @@ export default ({ brew, disabled, currentPage })=>{
 				onClick={()=>{navigator.clipboard.writeText(`${global.config.baseUrl}/share/${getShareId(brew)}#p${currentPage}`);}}>
 				copy url (page {currentPage})
 			</Nav.item>}
-			<Nav.item href={!disabled && getRedditLink(brew)} newTab rel='noopener noreferrer' disabled={disabled}>
+			<Nav.item icon={'fab fa-reddit-alien'} href={!disabled && getRedditLink(brew)} newTab rel='noopener noreferrer' disabled={disabled}>
 			post to reddit
 			</Nav.item>
 		</div>
diff --git a/client/homebrew/pages/basePages/editorPage/editorPage.jsx b/client/homebrew/pages/basePages/editorPage/editorPage.jsx
index 8f8d2794a..d8d4be700 100644
--- a/client/homebrew/pages/basePages/editorPage/editorPage.jsx
+++ b/client/homebrew/pages/basePages/editorPage/editorPage.jsx
@@ -390,7 +390,9 @@ const EditorPage = (props)=>{
 					</div>}
 				</Navbar.File>
 				<Navbar.Menu>
-					{error? <ErrorNavItem error={error} clearError={clearError} /> : renderSaveButton()}
+					<li className='menu-wrapper'>
+						{error? <ErrorNavItem error={error} clearError={clearError} /> : renderSaveButton()}
+					</li>
 				</Navbar.Menu>
 			</Navbar>