lots of changes

client/homebrew/navbar/account.navitem.jsx

@@ -62,13 +62,6 @@ const Account = createReactClass({
 		//  Logged in
 		if(global.account){
 			return <div className='nav-section'>
-				<Nav.item
-					className='account username'
-					color='orange'
-					icon='fas fa-user'
-				>
-					{global.account.username}
-				</Nav.item>
 				<Nav.item
 					href={`/user/${encodeURIComponent(global.account.username)}`}
 					color='yellow'

client/homebrew/navbar/nav.jsx

@@ -25,7 +25,7 @@ const Nav = {
 		</div>;
 	},
 
-	item : ({ icon,	href,	newTab,	onClick, color, children, className, disabled, ...props })=>{
+	item : ({ icon, kbd,href, newTab, onClick, color, children, className, disabled, ...props })=>{
 		const classes = cx('navItem', color, className);
 		if(disabled) {
 			return <button className={classes} disabled>{children}{icon && <i className={icon}></i>}</button>
@@ -39,6 +39,7 @@ const Nav = {
 			return <button {...props} className={classes} onClick={onClick} >
 				{children}
 				{icon && <i className={icon}></i>}
+				{kbd && <kbd>{kbd}</kbd>}
 			</button>;
 		}
 	},

client/homebrew/navbar/navbar.jsx

@@ -14,6 +14,9 @@ import Nav from './nav.jsx';
 const Navbar = ({ account, brew, title, props }) => {
 	const version = global.version || '0.0.0';
 
+	const isMac = navigator.platform.toUpperCase().includes("MAC");
+	const mod = isMac ? "⌘" : "Ctrl";
+
 	const renderTitle = () => {
 		//if vault
 		const cleanTitle = title.replace(/^\/+|\/+$/g, '');
@@ -59,13 +62,12 @@ const Navbar = ({ account, brew, title, props }) => {
 				</Dropdown>
 				<Dropdown groupName={'Edit'} customTrigger={<>Edit</>} icon={null} key={'edit'}>
 					<div className='nav-section'>
-						<li className='navItem'>Undo</li>
-						<li className='navItem'>Redo</li>
-						<li className='navItem'>Cut</li>
-						<li className='navItem'>Copy</li>
-						<li className='navItem'>Paste</li>
-						<li className='navItem'>Find</li>
-						<li className='navItem'>Find and Replace</li>
+						<Nav.item kbd={mod + ' + z'}>Undo</Nav.item>
+						<Nav.item kbd={mod + ' + Shift + z'}>Redo</Nav.item>
+						<Nav.item kbd={mod + ' + x'}>cut</Nav.item>
+						<Nav.item kbd={mod + ' + c'}>copy</Nav.item>
+						<Nav.item kbd={mod + ' + v'}>paste</Nav.item>
+						<Nav.item kbd={mod + ' + f'}>Find / Replace</Nav.item>
 					</div>
 				</Dropdown>
 				<Dropdown groupName={'Go'} customTrigger={<>Go</>} icon={null} key={'go'}>

client/homebrew/navbar/navbar.less

@@ -299,7 +299,7 @@
 		place-items: center;
 		height: 100%;
 		width: 100%;
-		padding: 5px;
+		padding: 5px 10px;
 	}
 	a {
 		color: inherit;
@@ -309,11 +309,32 @@
 		&:hover {
 			background:#555;
 		}
+		&:has(> i, > kbd) {
+			display:flex;
+			gap:5px;
+			justify-content: space-between;
+		}
+
+		kbd {
+			font-size:.8em;
+			font-family: monospace;
+			color:#aaa;
+			background:#222;
+			padding:2px 5px;
+			border-radius:5px;
+		}
+	}
+
+	.navItem {
+		height:2em;
+
+		&.header {
+			justify-content: center;
+		}
 	}
 
 	> ul {
 		display: flex;
-		gap: 15px;
 		align-items: center;
 		height: 100%;
 
@@ -321,14 +342,11 @@
 			height: 100%;
 			text-wrap:nowrap;
 
-			&:not(:only-child) {
-				
-			&:first-child {
-				padding-left: 10px;
-			}
-			&:last-child {
-				padding-right: 10px;
+			&:first-child :is(button, a) {
+				padding-left: 15px;
 			}
+			&:last-child :is(button, a) {
+				padding-right: 15px;
 			}
 		}
 	}

client/homebrew/navbar/recent.navitem.jsx

@@ -143,13 +143,15 @@ const RecentItems = createReactClass({
 		// if(!this.state.showDropdown) return null;
 
 		const makeItems = (brews)=>{
-			return _.map(brews, (brew, i)=>{
-				return <a className='navItem' href={brew.url} key={`${brew.id}-${i}`} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}>
-					<span className='title'>{brew.title || '[ no title ]'}</span>
-					<span className='time'>{Moment(brew.ts).fromNow()}</span>
-					<div className='clear' title='Remove from Recents' onClick={(e)=>{this.removeItem(`${brew.url}`, e);}}><i className='fas fa-times'></i></div>
-				</a>;
-			});
+			return <div className="nav-section">
+				{_.map(brews, (brew, i)=>{
+					return <a className='navItem' href={brew.url} key={`${brew.id}-${i}`} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}>
+						<span className='title'>{brew.title || '[ no title ]'}</span>
+						<span className='time'>{Moment(brew.ts).fromNow()}</span>
+						<div className='clear' title='Remove from Recents' onClick={(e)=>{this.removeItem(`${brew.url}`, e);}}><i className='fas fa-times'></i></div>
+					</a>
+				})};
+			</div>
 		};
 
 		return <>
@@ -166,9 +168,6 @@ const RecentItems = createReactClass({
 
 	render : function(){
 		return <div className='recent'>
-			<Nav.item icon='fas fa-history' color='grey' >
-				{this.props.text}
-			</Nav.item>
 			{this.renderDropdown()}
 		</div>;
 	}