Merge branch 'master' into add-back-selection-tabbing

client/admin/admin.less

@@ -111,6 +111,10 @@ body {
 			vertical-align : middle;
 			text-align     : center;
 			border-right   : 1px solid;
+			max-width:50ch;
+			overflow:hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
 
 			&:last-child { border-right : none; }
 		}

client/admin/brewUtils/brewCleanup/brewCleanup.jsx

@@ -1,70 +1,174 @@
 import React, { useState } from 'react';
 import request from 'superagent';
+import Moment from 'moment';
 
 const BrewCleanup = ({})=>{
-	const [count, setCount] = useState(0);
-	const [pending, setPending] = useState(false);
-	const [primed, setPrimed] = useState(false);
+	const [junkBrewCollection, setJunkBrewCollection] = useState([]);
+	const [lostBrewCollection, setLostBrewCollection] = useState([]);
+	const [pendingJunk, setPendingJunk] = useState(false);
+	const [pendingLost, setPendingLost] = useState(false);
 	const [error, setError] = useState(null);
 
-	const prime = async ()=>{
-		setPending(true);
+	const find = async (type)=>{
+		
 
-		try {
-			const res = await request.get('/admin/cleanup');
+		if(type === 'junk') try {
+			setPendingJunk(true);
+			const res = await request.get('/admin/cleanupJunk');
 
-			setCount(res.body.count);
-			setPrimed(true);
+			setJunkBrewCollection(res.body.brewCollection);
 		} catch (err) {
 			setError(err);
 		} finally {
-			setPending(false);
+			setPendingJunk(false);
 		}
-	};
 
-	const cleanup = async ()=>{
-		setPending(true);
+		if(type === 'lost') try {
+			setPendingLost(true);
+			const res = await request.get('/admin/cleanupLost');
 
-		try {
-			const res = await request.post('/admin/cleanup');
-
-			setCount(res.body.count);
+			setLostBrewCollection(res.body.brewCollection);
 		} catch (err) {
 			setError(err);
 		} finally {
-			setPending(false);
-			setPrimed(false);
+			setPendingLost(false);
 		}
 	};
-	const renderPrimed = ()=>{
-		if(!primed) return;
 
-		if(!count) return <div className='result noBrews'>No Matching Brews found.</div>;
+	const cleanup = async (type)=>{
+
+		if(type === 'junk') try {
+			setPendingJunk(true);
+			console.log('deleting junk');
+			const res = await request.post('/admin/cleanupJunk');
+
+		} catch (err) {
+			setError(err);
+		} finally {
+			setPendingJunk(false);
+			setJunkBrewCollection([]);
+		}
+
+		if(type === 'lost') try {
+			setPendingLost(true);
+			const res = await request.post('/admin/cleanupLost');
+
+		} catch (err) {
+			setError(err);
+		} finally {
+			setPendingLost(false);
+			setLostBrewCollection([]);
+		}
+	};
+
+	const renderBrewList = (type)=>{
+		const brewList = type === 'lost' ? lostBrewCollection : junkBrewCollection;
+
+		if(!brewList || brewList.length === 0) {
+			return <>
+				<h3>{`Results - No brews found` }</h3>
+				<table className='resultsTable'>
+					<thead>
+						<tr>
+							<th>Title</th>
+							<th>Last Update</th>
+							<th>last viewed</th>
+							<th>Storage</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td colSpan={4}><strong>"No brews found"</strong></td>
+						</tr>
+					</tbody>
+				</table>
+			</>;
+		}
+		console.log(type);
+		console.log(brewList);
+		return <>
+			<h3>{`Results - ${brewList.length} brews` }</h3>
+			<table className='resultsTable'>
+				<thead>
+					<tr>
+						<th>Title</th>
+						<th>Last Update</th>
+						<th>last viewed</th>
+						<th>Storage</th>
+					</tr>
+				</thead>
+				<tbody>
+					{brewList
+						.sort((a, b)=>{         // Sort brews from most recently updated
+							if(a.lastViewed > b.lastViewed) return -1;
+							return 1;
+						})
+						.map((brew, idx)=>{
+							return <tr key={idx}>
+								<td><strong>{brew.title || 'No Title'}</strong></td>
+								<td style={{ width: '200px' }}>{Moment(brew.updatedAt).fromNow()}</td>
+								<td>{brew.lastViewed ? Moment(brew.lastViewed).fromNow() : 'No last viewed date'}</td>
+								<td>{brew.googleId ? 'Google' : 'Homebrewery'}</td>
+							</tr>
+						})}
+				</tbody>
+			</table>
+		</>;
+	};
+	const renderFound = (type)=>{
+		const deleteButton = !(type === 'junk' && junkBrewCollection.length === 0 || type === 'lost' && lostBrewCollection.length === 0); 
 
 		return <div className='result'>
-			<button onClick={()=>cleanup()} className='remove'>
-				{pending
+			{deleteButton && <button onClick={()=>cleanup(type)} className='remove'>
+				{pendingLost && type === "lost" || pendingJunk && type === "junk"
 					? <i className='fas fa-spin fa-spinner' />
 					: <span><i className='fas fa-times' /> Remove</span>
 				}
 			</button>
-			<span>Found {count} Brews that could be removed. </span>
+			}
+			{renderBrewList(type)}
+		</div>;
+	};
+	const renderJunkBrewCleanup = ()=>{
+		return <div className='junk'>
+			<h3> Junk brews</h3>
+			<p>Queries unauthored brews that have not been viewed or <br/>updated in 30 days and are shorter than 140 bytes (up to 300)</p>
+
+			<button onClick={()=>find('junk')} className='query'>
+				{pendingJunk
+					? <i className='fas fa-spin fa-spinner' />
+					: 'Query Brews'
+				}
+			</button>
+			{renderFound('junk')}
+
+			{error && <div className='error noBrews'>{error.toString()}</div>}
+		</div>;
+	};
+	const renderLostBrewCleanup = ()=>{
+		return <div className='lost'>
+			<h3> Lost brews</h3>
+			<p>Queries unauthored brews that have not been <br/>updated or viewed for 2 years (up to 500)</p>
+
+			<button onClick={()=>find('lost')} className='query'>
+				{pendingLost
+					? <i className='fas fa-spin fa-spinner' />
+					: 'Query Brews'
+				}
+			</button>
+			{renderFound('lost')}
+
+			{error && <div className='error noBrews'>{error.toString()}</div>}
 		</div>;
 	};
 
 	return <div className='brewUtil brewCleanup'>
 		<h2> Brew Cleanup </h2>
-		<p>Removes very short brews to tidy up the database</p>
+		{renderJunkBrewCleanup()}
+		<br/>
+		<br/>
+		{renderLostBrewCleanup()}
 
-		<button onClick={()=>prime()} className='query'>
-			{pending
-				? <i className='fas fa-spin fa-spinner' />
-				: 'Query Brews'
-			}
-		</button>
-		{renderPrimed()}
-
-		{error && <div className='error noBrews'>{error.toString()}</div>}
 	</div>;
 
 };

client/admin/main.jsx

@@ -1,6 +1,8 @@
 import { createRoot } from 'react-dom/client';
 import Admin from './admin.jsx';
+import { bootstrapAnchorPositioningPolyfill } from '@components/anchorPositioningPolyfill.js';
 
 const props = window.__INITIAL_PROPS__ || {};
 
 createRoot(document.getElementById('reactRoot')).render(<Admin {...props} />);
+bootstrapAnchorPositioningPolyfill();

client/components/Anchored.jsx

@@ -71,10 +71,14 @@ const Anchored = ({ children })=>{
 // forward ref for AnchoredTrigger
 const AnchoredTrigger = forwardRef(({ toggleVisibility, visible, children, className, ...props }, ref)=>(
 	<button
-		ref={ref}
+		ref={(el)=>{
+			// setAttribute bypasses React's style sanitization so the anchor polyfill can read it
+			el?.setAttribute('style', `anchor-name: --${props.id}`);
+			if(typeof ref === 'function') ref(el);
+			else if(ref) ref.current = el;
+		}}
 		className={`anchored-trigger${visible ? ' active' : ''} ${className}`}
 		onClick={toggleVisibility}
-		style={{ anchorName: `--${props.id}` }}   // setting anchor properties here allows greater recyclability.
 		{...props}
 	>
 		{children}
@@ -84,9 +88,12 @@ const AnchoredTrigger = forwardRef(({ toggleVisibility, visible, children, class
 // forward ref for AnchoredBox
 const AnchoredBox = forwardRef(({ visible, children, className, anchorId, ...props }, ref)=>(
 	<div
-		ref={ref}
+		ref={(el)=>{
+			el?.setAttribute('style', `position-anchor: --${anchorId}`);
+			if(typeof ref === 'function') ref(el);
+			else if(ref) ref.current = el;
+		}}
 		className={`anchored-box${visible ? ' active' : ''} ${className}`}
-		style={{ positionAnchor: `--${anchorId}` }}   // setting anchor properties here allows greater recyclability.
 		{...props}
 	>
 		{children}

client/components/Anchored.less

@@ -1,11 +1,9 @@
 
 
 .anchored-box {
-	position     : absolute;
-	visibility   : hidden;
-	justify-self : anchor-center;
-	@supports (inset-block-start: anchor(bottom)) {
-		inset-block-start : anchor(bottom);
-	}
+	position          : absolute;
+	visibility        : hidden;
+	justify-self      : anchor-center;
+	inset-block-start : anchor(bottom);
 	&.active { visibility : visible; }
 }

client/components/anchorPositioningPolyfill.js

@@ -0,0 +1,27 @@
+/*
+This file basically checks support for Anchor Positioning API in the browser,
+and then loads the Oddbird polyfill if support is lacking. 
+*/
+
+let polyfillPromise;
+
+// look for `anchorName` in the computed styles
+const supportsAnchorPositioning = ()=>'anchorName' in document.documentElement.style;
+
+export const bootstrapAnchorPositioningPolyfill = ()=>{
+	if(supportsAnchorPositioning()) return Promise.resolve(false);
+	if(polyfillPromise) return polyfillPromise;
+
+	polyfillPromise = (async ()=>{
+		try {
+			const { default: polyfill } = await import('@oddbird/css-anchor-positioning/fn');
+			await polyfill();
+			return true;
+		} catch (error){
+			polyfillPromise = undefined;
+			throw error;
+		}
+	})();
+
+	return polyfillPromise;
+};

client/components/dropdown/dropdown.jsx

@@ -0,0 +1,123 @@
+/**
+ * A dropdown menu component that uses the Anchor Positioning API to position the elements.  It supports nested submenus as well.
+ * Anchor Positioning is now supported in all major browsers.  A polyfill is conditionally loaded for older browsers.
+ * 
+ * As-is, the menus will always open down aligned on left to trigger, submenus open to the right initially.
+ * If no space, menus will still open down, but aligned to the right of the trigger.  Submenus will flip to the other side of the top menu.
+ * This could be customized either in more specific CSS, or as a `direction` prop on the component (in future iterations).
+ * 
+ * @param {string} props.groupName - Name of the menu. Appears as the trigger text.
+ * @param {string} [props.icon] - Icon to display in the trigger.
+ * @param {string} [props.color] - Color class to add to the trigger.
+ * @param {string} [props.className] - Additional classes for the menu wrapper.
+ * @param {React.ReactNode} [props.customTrigger] - Custom element to use as a trigger.
+ * @param {React.ReactNode} [props.children] - Child elements to render in the menu.
+ * @returns {React.JSX.Element}
+ */
+
+import './dropdown.less';
+import React, { useEffect, useId, useRef } from 'react';
+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 reactId = useId();
+	const safeId = reactId.replace(/[^a-zA-Z0-9_-]/g, '');
+	const menuId = `${_.kebabCase(groupName)}-${safeId}-menu`;
+	const anchorName = `--${menuId}`;
+	const depth = React.useContext(MenuDepthContext);
+
+	// A menu is a submenu if depth > 0
+	const isSubMenu = depth > 0;
+
+	const triggerRef = useRef(null);
+	const menuRef = useRef(null);
+
+	// 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
+	useEffect(()=>{
+		triggerRef.current?.setAttribute('style', `anchor-name: ${anchorName}`);
+		menuRef.current?.setAttribute('style', `position-anchor: ${anchorName}`);
+	}, [anchorName]);
+
+	// hide popover with click inside iframe (not supported by light dismiss)
+	useEffect(()=>{
+		const menuElement = document.getElementById(menuId);
+		if(!menuElement) return;
+
+		const handleClick = ()=>{
+			if(menuElement.matches(':popover-open')) {
+				menuElement.hidePopover();
+			}
+		};
+		// Listen for clicks from both the main document and the iframe
+		document.addEventListener('iframe-click', handleClick);
+		return ()=>{
+			document.removeEventListener('iframe-click', handleClick);
+		};
+	}, [menuId]);
+
+	// the trigger is the piece placed inside the opening button of the menu.
+	// This method allows for creating a generic span with the group name,
+	// or using a bespoke element (like a graphic) passed in from props to be used as the trigger
+	const trigger = (groupName = 'menu', icon = '')=>{
+		if(!customTrigger){
+			return <>
+				<i className={icon}></i><span className='menu-name'>{groupName}</span><i className={`caret fas fa-caret-${isSubMenu ? 'right' : 'down'}`}></i>
+			</>;
+		} else {
+			return customTrigger;
+		}
+	};
+
+	// handle clicks on menu items. By default, actions do dismiss.
+	const handleMenuActionClick = (event)=>{
+		const menuElement = menuRef.current;
+		if(!menuElement) return;
+
+		const menuAction = event.target.closest('button, a, [role="menuitem"]');
+		if(!menuAction || !menuElement.contains(menuAction)) return;
+
+		// don't dismiss if the target triggers a submenu
+		if(menuAction.hasAttribute('popovertarget')) return;
+
+		// don't dismiss if the target has `no-dismiss` attribute
+		const noDismissValue = menuAction.getAttribute('no-dismiss')?.toLowerCase();
+		if(noDismissValue === '' || noDismissValue === 'true') return;
+
+		document.querySelectorAll('.menu-list:popover-open').forEach((openMenu)=>openMenu.hidePopover());
+	};
+
+	return (
+		<div className={['menu-wrapper', className].join(' ')} role='none' >
+			<button
+				id={`${menuId}-trigger`}
+				className={['menu-item', color].join(' ')}
+				popoverTarget={menuId}
+				aria-haspopup='menu'
+				role='menuitem'
+				disabled={!React.Children.count(children)}
+				ref={triggerRef}
+			>
+				{trigger(groupName, icon)}
+			</button>
+			<MenuDepthContext.Provider value={depth + 1}>
+				<div
+					ref={menuRef}
+					id={menuId}
+					className='menu-list'
+					popover='auto'
+					role='menu'
+					onClick={handleMenuActionClick}
+				>
+					{children}
+				</div>
+			</MenuDepthContext.Provider>
+		</div>
+	);
+};
+
+export { Dropdown };

client/components/dropdown/dropdown.less

@@ -0,0 +1,24 @@
+.menu-wrapper {
+	position: relative;
+	&:is(.menu-bar > .menu-section > .menu-wrapper){
+		display: inline-block;
+	}
+}
+
+.menu-list {
+	position         : fixed;
+	z-index          : 1000;
+	top              : anchor(bottom);
+	left             : anchor(left);
+	position-try: flip-inline flip-block;
+	color: inherit;   // [popover] gets a `canvastext` color value from useragent.
+	> .menu-wrapper {
+		position:relative;
+		> .menu-list {
+			margin: 0 0px;
+			top  : anchor(top);
+			left : anchor(right);
+			position-try: flip-inline;
+		}
+	}
+}

client/components/splitPane/splitPane.jsx

@@ -18,8 +18,7 @@ const SplitPane = (props)=>{
 	const [liveScroll, setLiveScroll] = useState(false);
 
 	useEffect(()=>{
-		const savedPos = window.localStorage.getItem(PANE_WIDTH_KEY);
-		setDividerPos(savedPos ? limitPosition(savedPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)) : window.innerWidth / 2);
+		handleResize();
 		setLiveScroll(window.localStorage.getItem(LIVE_SCROLL_KEY) === 'true');
 
 		window.addEventListener('resize', handleResize);
@@ -29,7 +28,10 @@ const SplitPane = (props)=>{
 	const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x)));
 
 	//when resizing, the divider should grow smaller if less space is given, then grow back if the space is restored, to the original position
-	const handleResize = ()=>setDividerPos(limitPosition(window.localStorage.getItem(PANE_WIDTH_KEY), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
+	const handleResize = ()=>{
+		const savedPos = window.localStorage.getItem(PANE_WIDTH_KEY);
+		setDividerPos(savedPos ? limitPosition(savedPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)) : window.innerWidth / 2);
+	};
 
 	const handleUp =(e)=>{
 		e.preventDefault();

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -11,7 +11,7 @@ import ErrorBar from './errorBar/errorBar.jsx';
 import ToolBar  from './toolBar/toolBar.jsx';
 
 //TODO: move to the brew renderer
-import RenderWarnings from '../../components/renderWarnings/renderWarnings.jsx';
+import RenderWarnings from '@components/renderWarnings/renderWarnings.jsx';
 import NotificationPopup from './notificationPopup/notificationPopup.jsx';
 import Frame from 'react-frame-component';
 import dedent from 'dedent';
@@ -29,6 +29,7 @@ const TOOLBAR_STATE_KEY = 'HB_renderer_toolbarState';
 
 const INITIAL_CONTENT = dedent`
 	<!DOCTYPE html><html><head>
+	<title>Rendered Brew Content</title>
 	<link href='/homebrew/bundle.css' type="text/css" rel='stylesheet' />
 	<link href="${brewRendererStylesUrl}" rel="stylesheet" />
 	<link href="${headerNavStylesUrl}" rel="stylesheet" />
@@ -91,6 +92,7 @@ const BrewPage = (props)=>{
 
 //v=====--------------------< Brew Renderer Component >-------------------=====v//
 let renderedPages = [];
+let pageTemplates = [];
 let rawPages      = [];
 
 const BrewRenderer = (props)=>{
@@ -208,6 +210,20 @@ const BrewRenderer = (props)=>{
 					styles     = _.mapKeys(styles, (v, k)=>k.startsWith('--') ? k : _.camelCase(k)); // Convert CSS to camelCase for React
 					classes    = [classes, injectedTags.classes].join(' ').trim();
 					attributes = injectedTags.attributes;
+					if(global.enablev4) {
+						if(attributes && Object.hasOwn(attributes, 'hbtemplate')) {
+							pageTemplates[index] = attributes['hbtemplate'];
+						}
+					}
+				}
+				if(global.enablev4) {
+					// If we don't have a template for this page, look backwards until one is found or the first page.
+					if(!pageTemplates[index]) {
+						for (let i=index;i>=0; i--) {
+							// If one is found, add the template attribute
+							if(pageTemplates[i]) attributes['hbtemplate'] = pageTemplates[i];
+						}
+					}
 				}
 				pageText = pageText.includes('\n') ? pageText.substring(pageText.indexOf('\n') + 1) : ''; // Remove the \page line
 			}
@@ -226,8 +242,10 @@ const BrewRenderer = (props)=>{
 		if(props.errors && props.errors.length)
 			return renderedPages;
 
-		if(rawPages.length != renderedPages.length) // Re-render all pages when page count changes
+		if(rawPages.length != renderedPages.length) { // Re-render all pages when page count changes
 			renderedPages.length = 0;
+			pageTemplates.length = 0;
+		}
 
 		// Render currently-edited page first so cross-page effects (variables, links) can propagate out first
 		if(rawPages.length > props.currentEditorCursorPageNum -1)
@@ -331,10 +349,11 @@ const BrewRenderer = (props)=>{
 			<ToolBar displayOptions={displayOptions} onDisplayOptionsChange={handleDisplayOptionsChange} visiblePages={state.visiblePages.length > 0 ? state.visiblePages : [state.centerPage]} totalPages={rawPages.length} headerState={headerState} setHeaderState={setHeaderState}/>
 
 			{/*render in iFrame so broken code doesn't crash the site.*/}
-			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
+			<Frame id='BrewRenderer'  title="Rendered Brew Content" initialContent={INITIAL_CONTENT}
 				style={{ width: '100%', height: '100%', visibility: state.visibility }}
 				contentDidMount={frameDidMount}
 				onClick={()=>{emitClick();}}
+				sandbox="allow-same-origin allow-modals allow-top-navigation"
 			>
 				<div className='brewRenderer'
 					onKeyDown={handleControlKeys}

client/homebrew/brewRenderer/errorBar/errorBar.jsx

@@ -1,7 +1,7 @@
 import './errorBar.less';
 import React from 'react';
 
-import Dialog from '../../../components/dialog.jsx';
+import Dialog from '@components/dialog.jsx';
 
 const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
 

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import request from '../../utils/request-middleware.js';
 import Markdown from '@shared/markdown.js';
 
-import Dialog from '../../../components/dialog.jsx';
+import Dialog from '@components/dialog.jsx';
 
 const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
 

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -3,7 +3,7 @@ import './toolBar.less';
 import React, { useState, useEffect } from 'react';
 import _ from 'lodash';
 
-import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anchored.jsx';
+import { Anchored, AnchoredBox, AnchoredTrigger } from '@components/Anchored.jsx';
 
 const MAX_ZOOM = 300;
 const MIN_ZOOM = 10;

client/homebrew/editor/editor.jsx

@@ -5,7 +5,7 @@ import createReactClass from 'create-react-class';
 import _ from 'lodash';
 import dedent from 'dedent';
 
-import CodeEditor from '../../components/codeEditor/codeEditor.jsx';
+import CodeEditor from '@components/codeEditor/codeEditor.jsx';
 import SnippetBar from './snippetbar/snippetbar.jsx';
 import MetadataEditor from './metadataEditor/metadataEditor.jsx';
 

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -4,7 +4,7 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import _ from 'lodash';
 import request from '../../utils/request-middleware.js';
-import Combobox from '../../../components/combobox.jsx';
+import Combobox from '@components/combobox.jsx';
 import TagInput from '../tagInput/tagInput.jsx';
 
 
@@ -44,6 +44,7 @@ const MetadataEditor = createReactClass({
 
 	getInitialState : function(){
 		return {
+			isOwner       : global.account?.username && global.account?.username === this.props.metadata?.authors[0],
 			showThumbnail : true
 		};
 	},
@@ -144,6 +145,15 @@ const MetadataEditor = createReactClass({
 			});
 	},
 
+	handleDeleteAuthor : function(author){
+		if(!confirm('Are you sure you want to remove this author? They will lose all edit access to this brew, and it will dissapear from their userpage.')) return;
+		if(!this.props.metadata.authors.includes(author)) return;
+		this.props.onChange({
+    		...this.props.metadata,
+    		authors : this.props.metadata.authors.filter((a)=>a !== author)
+		});
+	},
+
 	renderPublish : function(){
 		if(this.props.metadata.published){
 			return <button className='unpublish' onClick={()=>this.handlePublish(false)}>
@@ -170,16 +180,54 @@ const MetadataEditor = createReactClass({
 	},
 
 	renderAuthors : function(){
-		let text = 'None.';
-		if(this.props.metadata.authors && this.props.metadata.authors.length){
-			text = this.props.metadata.authors.join(', ');
-		}
-		return <div className='field authors'>
-			<label>authors</label>
-			<div className='value'>
-				{text}
+		const authors = this.props.metadata.authors;
+		if(!this.state.isOwner || authors.length < 2) return (
+			<div className='field authors'>
+				<label>authors</label>
+				<div className='value'>
+					{authors.length > 0 && (
+						<a href={`/user/${authors[0]}`} className='author-link' target="_blank" title={`Owner - Click to open ${authors[0]}'s profile in a new tab`}>
+								{authors[0]}{authors.length > 1 && ', '}
+						</a>
+					)}
+					{authors.length > 1 && authors.slice(1).map((author, i)=>(
+        				<a href={`/user/${author}`} className='author-link' title={`Author - Click to open ${author}'s profile in a new tab`}>
+        					{author}{i+2 < authors.length && ', '}
+        				</a>
+        			))}
+				</div>
 			</div>
-		</div>;
+		);
+		return (
+			<div className='field authors'>
+				<label>Authors</label>
+				<ul className='list'>
+					{authors.length > 0 && (
+						<li className='tag owner' title='Owner'>
+							<a href={`/user/${authors[0]}`} className='author-link' title={`Owner - Click to open ${authors[0]}'s profile in a new tab`}>
+								{authors[0]}
+							</a>
+						</li>
+					)}
+
+					{authors.length > 1 && authors.slice(1).map((author, i)=>(
+        				<li className='tag author' key={i + 1} title='Author'>
+        					<a href={`/user/${author}`} className='author-link' title={`Author - Click to open ${authors[0]}'s profile in a new tab`}>
+        						{author}
+        					</a>
+        					<button
+								onClick={()=>this.handleDeleteAuthor(author)}
+								className='delete'
+								title={`Remove ${author} as an author`}
+        					>
+        						<i className='fa fa-times fa-fw' />
+        					</button>
+        				</li>
+        			))}
+				</ul>
+			</div>
+		);
+
 	},
 
 	renderThemeDropdown : function(){

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -173,7 +173,51 @@
 			.colorButton(@red);
 		}
 	}
-	.authors.field .value { line-height    : 1.5em; }
+	.authors.field {
+		.tag {
+			font-weight:300;
+			transition:background-color 0.2s;
+
+			&.owner {
+				position: relative;
+				background-color:@silverLight;
+				min-width:25px;
+				display:grid;
+				place-items:center;
+				font-weight: 900;
+
+				&::after {
+					content: "\f521";
+					font-family: "Font Awesome 6 Free";
+					color:gold;
+					position: absolute;
+					top: 0;
+					left: 0;
+					width:15px;
+					height:15px;
+					rotate:-25deg;
+					translate:-30% -50%;
+					transform: scaleY(0.7);
+				}
+			}
+			&:has(button) a {
+				padding-right:5px;
+			}
+			&:has(button:hover) {
+				background:#d97d7d;
+			}
+
+			button {
+				color:@red;
+			}
+
+		
+		}
+		a {
+			color:black;
+			text-decoration:unset;
+		}
+	}
 
 	.themes.field {
 		& .dropdown-container {
@@ -275,13 +319,17 @@
 		}
 
 		.tag {
-			padding          : 0.3em;
+			padding          : 0.35em;
 			margin           : 2px;
-			font-size        : 0.9em;
+			font-size        : 0.95em;
 			background-color : #DDDDDD;
 			border-radius    : 0.5em;
 
 			.icon { #groupedIcon; }
+
+			button {
+				cursor : pointer;
+			}
 		}
 
 		.input-group {

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -2,6 +2,7 @@
 import './snippetbar.less';
 import React from 'react';
 import createReactClass from 'create-react-class';
+import { Dropdown } from '@components/dropdown/dropdown.jsx';
 
 import _ from 'lodash';
 import cx from 'classnames';
@@ -320,36 +321,33 @@ const SnippetGroup = createReactClass({
 		};
 	},
 	handleSnippetClick : function(e, snippet){
-		e.stopPropagation();
 		this.props.onSnippetClick(execute(snippet.gen, this.props));
 	},
 	renderSnippets : function(snippets){
 		return _.map(snippets, (snippet)=>{
-			return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
-				<i className={snippet.icon} />
-				<span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span>
-				{snippet.experimental && <span className='beta'>beta</span>}
-				{snippet.disabled     && <span className='beta' title='temporarily disabled due to large slowdown; under re-design'>disabled</span>}
-				{snippet.subsnippets && <>
-					<i className='fas fa-caret-right'></i>
-					<div className='dropdown side'>
+			if(!snippet.subsnippets){
+				return (
+					<button className='menu-item' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)} role='menuitem'>
+						<i className={snippet.icon} />
+						<span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span>
+						{snippet.experimental && <span className='beta'>beta</span>}
+						{snippet.disabled     && <span className='beta' title='temporarily disabled due to large slowdown; under re-design'>disabled</span>}
+					</button>
+				);
+			} else if(snippet.subsnippets){
+				return (
+					<Dropdown groupName={snippet.name} icon={snippet.icon} key={snippet.name}>
 						{this.renderSnippets(snippet.subsnippets)}
-					</div></>}
-			</div>;
+					</Dropdown>
+				)
+			}
 
 		});
 	},
 
 	render : function(){
-		const snippetGroup = `snippetGroup snippetBarButton ${this.props.snippets.length === 0 ? 'disabledSnippets' : ''}`;
-		return <div className={snippetGroup}>
-			<div className='text'>
-				<i className={this.props.icon} />
-				<span className='groupName'>{this.props.groupName}</span>
-			</div>
-			<div className='dropdown'>
-				{this.renderSnippets(this.props.snippets)}
-			</div>
-		</div>;
+		return <Dropdown groupName={this.props.groupName} id={this.props.groupName} icon={this.props.icon}>
+			{this.renderSnippets(this.props.snippets)}
+		</Dropdown>;
 	},
 });

client/homebrew/editor/snippetbar/snippetbar.less

@@ -11,6 +11,10 @@
 	height           : auto;
 	color            : black;
 	background-color : #DDDDDD;
+	font-size        : .65rem;
+	font-family: 'Open Sans', sans-serif;
+	text-transform: uppercase;
+	font-weight: 800;
 
 	.snippets {
 		display         : flex;
@@ -22,7 +26,7 @@
 		display         : flex;
 		justify-content : flex-end;
 		min-width       : 250px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
-
+		font-size: .85rem;
 		&:only-child {min-width   : unset; margin-left : auto;}
 
 		>div {
@@ -57,32 +61,27 @@
 				}
 				&.undo {
 					.tooltipLeft('Undo');
-					font-size : 0.75em;
 					color     : grey;
 					&.active { color : inherit; }
 				}
 				&.redo {
 					.tooltipLeft('Redo');
-					font-size : 0.75em;
 					color     : grey;
 					&.active { color : inherit; }
 				}
 				&.foldAll {
 					.tooltipLeft('Fold All');
-					font-size : 0.75em;
 					color     : grey;
 					&.active { color : inherit; }
 				}
 				&.unfoldAll {
 					.tooltipLeft('Unfold All');
-					font-size : 0.75em;
 					color     : grey;
 					&.active { color : inherit; }
 				}
 				&.history {
 					.tooltipLeft('History');
 					position  : relative;
-					font-size : 0.75em;
 					color     : grey;
 					border    : none;
 					&.active { color : inherit; }
@@ -93,7 +92,6 @@
 				}
 				&.editorTheme {
 					.tooltipLeft('Editor Themes');
-					font-size : 0.75em;
 					color     : inherit;
 					&.active {
 						position         : relative;
@@ -144,91 +142,97 @@
 		border-left : 1px solid black;
 		.tooltipLeft('Edit Brew Properties');
 	}
-	.snippetGroup {
 
-		&:hover {
-			& > .dropdown { visibility : visible; }
-		}
-		.dropdown {
-			position         : absolute;
-			top              : 100%;
-			z-index          : 1000;
-			visibility       : hidden;
-			padding          : 0px;
-			margin-left      : -5px;
-			background-color : #DDDDDD;
-			.snippet {
-				position    : relative;
-				display     : flex;
-				align-items : center;
-				min-width   : max-content;
-				padding     : 5px;
-				font-size   : 10px;
-				cursor      : pointer;
-				.animate(background-color);
-				i {
-					min-width    : 25px;
-					height       : 1.2em;
-					margin-right : 8px;
-					font-size    : 1.2em;
-					text-align   : center;
-					& ~ i {
-						margin-right : 0;
-						margin-left  : 5px;
-					}
-					/* Fonts */
-					&.font {
-						height : auto;
-						&::before {
-							font-size : 1em;
-							content   : 'ABC';
-						}
-
-						&.OpenSans {font-family : 'OpenSans';}
-						&.CodeBold {font-family : 'CodeBold';}
-						&.CodeLight {font-family : 'CodeLight';}
-						&.ScalySansRemake {font-family : 'ScalySansRemake';}
-						&.BookInsanityRemake {font-family : 'BookInsanityRemake';}
-						&.MrEavesRemake {font-family : 'MrEavesRemake';}
-						&.SolberaImitationRemake {font-family : 'SolberaImitationRemake';}
-						&.ScalySansSmallCapsRemake {font-family : 'ScalySansSmallCapsRemake';}
-						&.WalterTurncoat {font-family : 'WalterTurncoat';}
-						&.Lato {font-family : 'Lato';}
-						&.Courier {font-family : 'Courier';}
-						&.NodestoCapsCondensed {font-family : 'NodestoCapsCondensed';}
-						&.Overpass {font-family : 'Overpass';}
-						&.Davek {font-family : 'Davek';}
-						&.Iokharic {font-family : 'Iokharic';}
-						&.Rellanic {font-family : 'Rellanic';}
-						&.TimesNewRoman {font-family : 'Times New Roman';}
-					}
-				}
-				.name { margin-right : auto; }
-				.disabled { text-decoration : line-through; }
-				.beta {
-					align-self    : center;
-					padding       : 4px 6px;
-					margin-left   : 5px;
-					font-family   : monospace;
-					line-height   : 1em;
-					color         : white;
-					background    : grey;
-					border-radius : 12px;
-				}
-				&:hover {
-					background-color : #999999;
-					& > .dropdown {
-						visibility : visible;
-						&.side {
-							top         : 0%;
-							left        : 100%;
-							margin-left : 0;
-							box-shadow  : -1px 1px 2px 0px #999999;
-						}
-					}
-				}
+	
+	.menu-wrapper {
+		.menu-item:is(.snippets > .menu-wrapper > .menu-item):first-child {
+			.caret {
+				display: none;
 			}
 		}
+		.menu-list {
+			padding          : 0px;
+			background-color : #DDDDDD;
+			
+		}
+	}
+
+	.menu-item {
+		position    : relative;
+		display     : flex;
+		justify-content: space-between;
+		align-items : center; 
+		min-width   : max-content;
+		padding     : 5px;
+		cursor      : pointer;
+		width: 100%;
+		.animate(background-color);
+		&:is(.menu-list .menu-item) [class*="name"] {
+			padding-inline: 8px;
+		}
+		.menu-name {
+			flex: 1;
+			text-align: left;
+			text-box-trim: trim-end;
+		}
+		i {
+			min-width    : 25px;
+			height       : .85rem;
+			font-size    : 1.2em;
+			text-align   : center;
+			&.caret {
+				margin-right: 0;
+			}
+			&.caret:is(.menu-wrapper .menu-wrapper * ) {
+				text-align: right;
+			}
+			/* Fonts */
+			&.font {
+				height : auto;
+				&::before {
+					font-size : 1em;
+					content   : 'ABC';
+				}
+
+				&.OpenSans {font-family : 'OpenSans';}
+				&.CodeBold {font-family : 'CodeBold';}
+				&.CodeLight {font-family : 'CodeLight';}
+				&.ScalySansRemake {font-family : 'ScalySansRemake';}
+				&.BookInsanityRemake {font-family : 'BookInsanityRemake';}
+				&.MrEavesRemake {font-family : 'MrEavesRemake';}
+				&.SolberaImitationRemake {font-family : 'SolberaImitationRemake';}
+				&.ScalySansSmallCapsRemake {font-family : 'ScalySansSmallCapsRemake';}
+				&.WalterTurncoat {font-family : 'WalterTurncoat';}
+				&.Lato {font-family : 'Lato';}
+				&.Courier {font-family : 'Courier';}
+				&.NodestoCapsCondensed {font-family : 'NodestoCapsCondensed';}
+				&.Overpass {font-family : 'Overpass';}
+				&.Davek {font-family : 'Davek';}
+				&.Iokharic {font-family : 'Iokharic';}
+				&.Rellanic {font-family : 'Rellanic';}
+				&.TimesNewRoman {font-family : 'Times New Roman';}
+			}
+		}
+		.name { margin-right : auto; }
+		.disabled { text-decoration : line-through; }
+		.beta {
+			align-self    : center;
+			padding       : 4px 6px;
+			margin-left   : 5px;
+			font-family   : monospace;
+			line-height   : 1em;
+			color         : white;
+			background    : grey;
+			border-radius : 12px;
+		}
+		&:hover {
+			background-color : #999999;
+		}
+		&:disabled {
+			color: gray;
+			cursor: not-allowed;
+			&:hover { background-color: unset; }
+		}
 	}
 	.disabledSnippets {
 		color: grey;

client/homebrew/editor/tagInput/tagInput.jsx

@@ -1,6 +1,6 @@
 import './tagInput.less';
 import React, { useState, useEffect } from 'react';
-import Combobox from '../../../components/combobox.jsx';
+import Combobox from '@components/combobox.jsx';
 
 import { tagSuggestionList, canonizationList } from './curatedTagSuggestionList.js';
 

client/homebrew/homebrew.jsx

@@ -37,9 +37,15 @@ const Homebrew = (props)=>{
 			lang      : ''
 		},
 		userThemes,
-		brews
+		brews,
+		enablev4
 	} = props;
 
+	global.account       = account;
+	global.version       = version;
+	global.config        = config;
+	global.enablev4      = enablev4;
+
 	const backgroundObject = ()=>{
 		if(config?.deployment || (config?.local && config?.development)) {
 			const bgText = config?.deployment || 'Local';

client/homebrew/main.jsx

@@ -1,6 +1,8 @@
 import { createRoot } from 'react-dom/client';
 import Homebrew from './homebrew.jsx';
+import { bootstrapAnchorPositioningPolyfill } from '@components/anchorPositioningPolyfill.js';
 
 const props = window.__INITIAL_PROPS__ || {};
 
 createRoot(document.getElementById('reactRoot')).render(<Homebrew {...props} />);
+bootstrapAnchorPositioningPolyfill();

client/homebrew/navbar/nav.jsx

@@ -4,7 +4,7 @@ import createReactClass from 'create-react-class';
 import _ from 'lodash';
 import cx from 'classnames';
 
-import NaturalCritIcon from '../../components/svg/naturalcrit-d20.svg.jsx';
+import NaturalCritIcon from '@components/svg/naturalcrit-d20.svg.jsx';
 
 const Nav = {
 	base : createReactClass({

client/homebrew/pages/accountPage/accountPage.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 import UIPage from '../basePages/uiPage/uiPage.jsx';
-import NaturalCritIcon from '../../../components/svg/naturalcrit-d20.svg.jsx';
+import NaturalCritIcon from '@components/svg/naturalcrit-d20.svg.jsx';
 
 let SAVEKEY = '';
 

client/homebrew/pages/editPage/editPage.jsx

@@ -10,7 +10,7 @@ import _                                      from 'lodash';
 import { DEFAULT_BREW_LOAD }                  from '../../../../server/brewDefaults.js';
 import { printCurrentBrew, fetchThemeBundle } from '@shared/helpers.js';
 
-import SplitPane    from '../../../components/splitPane/splitPane.jsx';
+import SplitPane    from '@components/splitPane/splitPane.jsx';
 import Editor       from '../../editor/editor.jsx';
 import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 

client/homebrew/pages/editPage/lockNotification/lockNotification.jsx

@@ -1,7 +1,7 @@
 import './lockNotification.less';
 import * as React from 'react';
 import request from '../../../utils/request-middleware.js';
-import Dialog from '../../../../components/dialog.jsx';
+import Dialog from '@components/dialog.jsx';
 
 function LockNotification(props) {
 	props = {

client/homebrew/pages/homePage/homePage.jsx

@@ -10,7 +10,7 @@ import _                                      from 'lodash';
 import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';
 import { printCurrentBrew, fetchThemeBundle } from '@shared/helpers.js';
 
-import SplitPane    from '../../../components/splitPane/splitPane.jsx';
+import SplitPane    from '@components/splitPane/splitPane.jsx';
 import Editor       from '../../editor/editor.jsx';
 import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 

client/homebrew/pages/newPage/newPage.jsx

@@ -10,7 +10,7 @@ import _                                      from 'lodash';
 import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';
 import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '@shared/helpers.js';
 
-import SplitPane    from '../../../components/splitPane/splitPane.jsx';
+import SplitPane    from '@components/splitPane/splitPane.jsx';
 import Editor       from '../../editor/editor.jsx';
 import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 

client/homebrew/pages/vaultPage/vaultPage.jsx

@@ -11,7 +11,7 @@ import Account      from '@navbar/account.navitem.jsx';
 import NewBrew      from '@navbar/newbrew.navitem.jsx';
 import HelpNavItem  from '@navbar/help.navitem.jsx';
 import BrewItem     from '../basePages/listPage/brewItem/brewItem.jsx';
-import SplitPane    from '../../../components/splitPane/splitPane.jsx';
+import SplitPane    from '@components/splitPane/splitPane.jsx';
 import ErrorIndex   from '../errorPage/errors/errorIndex.js';
 
 import request from '../../utils/request-middleware.js';