Revert "renamed client to src"

This reverts commit c28736bd01.

client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx

@@ -0,0 +1,178 @@
+import './brewItem.less';
+import React, { useCallback } from 'react';
+import moment from 'moment';
+import request from '../../../../utils/request-middleware.js';
+
+import googleDriveIcon from '../../../../googleDrive.svg';
+import homebreweryIcon from '../../../../thumbnail.svg';
+import dedent from 'dedent';
+
+const BrewItem = ({
+	brew = {
+		title       : '',
+		description : '',
+		authors     : [],
+		stubbed     : true,
+	},
+	updateListFilter = ()=>{},
+	reportError = ()=>{},
+	renderStorage = true,
+})=>{
+
+	const deleteBrew = useCallback(()=>{
+		if(brew.authors.length <= 1) {
+			if(!window.confirm('Are you sure you want to delete this brew? Because you are the only owner of this brew, the document will be deleted permanently.')) return;
+			if(!window.confirm('Are you REALLY sure? You will not be able to recover the document.')) return;
+		} else {
+			if(!window.confirm('Are you sure you want to remove this brew from your collection? This will remove you as an editor, but other owners will still be able to access the document.')) return;
+			if(!window.confirm('Are you REALLY sure? You will lose editor access to this document.')) return;
+		}
+
+		request.delete(`/api/${brew.googleId ?? ''}${brew.editId}`).send().end((err, res)=>{
+			if(err) reportError(err); else window.location.reload();
+		});
+	}, [brew, reportError]);
+
+	const updateFilter = useCallback((type, term)=>updateListFilter(type, term), [updateListFilter]);
+
+	const renderDeleteBrewLink = ()=>{
+		if(!brew.editId) return null;
+
+		return (
+			<a className='deleteLink' onClick={deleteBrew}>
+				<i className='fas fa-trash-alt' title='Delete' />
+			</a>
+		);
+	};
+
+	const renderEditLink = ()=>{
+		if(!brew.editId) return null;
+
+		let editLink = brew.editId;
+		if(brew.googleId && !brew.stubbed) editLink = brew.googleId + editLink;
+
+		return (
+			<a className='editLink' href={`/edit/${editLink}`} target='_blank' rel='noopener noreferrer'>
+				<i className='fas fa-pencil-alt' title='Edit' />
+			</a>
+		);
+	};
+
+	const renderShareLink = ()=>{
+		if(!brew.shareId) return null;
+
+		let shareLink = brew.shareId;
+		if(brew.googleId && !brew.stubbed) {
+			shareLink = brew.googleId + shareLink;
+		}
+
+		return (
+			<a className='shareLink' href={`/share/${shareLink}`} target='_blank' rel='noopener noreferrer'>
+				<i className='fas fa-share-alt' title='Share' />
+			</a>
+		);
+	};
+
+	const renderDownloadLink = ()=>{
+		if(!brew.shareId) return null;
+
+		let shareLink = brew.shareId;
+		if(brew.googleId && !brew.stubbed) {
+			shareLink = brew.googleId + shareLink;
+		}
+
+		return (
+			<a className='downloadLink' href={`/download/${shareLink}`}>
+				<i className='fas fa-download' title='Download' />
+			</a>
+		);
+	};
+
+	const renderStorageIcon = ()=>{
+		if(!renderStorage) return null;
+		if(brew.googleId) {
+			return (
+				<span title={brew.webViewLink ? 'Your Google Drive Storage' : 'Another User\'s Google Drive Storage'}>
+					<a href={brew.webViewLink} target='_blank'>
+						<img className='googleDriveIcon' src={googleDriveIcon} alt='googleDriveIcon' />
+					</a>
+				</span>
+			);
+		}
+
+		return (
+			<span title='Homebrewery Storage'>
+				<img className='homebreweryIcon' src={homebreweryIcon} alt='homebreweryIcon' />
+			</span>
+		);
+	};
+
+	if(Array.isArray(brew.tags)) {
+		brew.tags = brew.tags?.filter((tag)=>tag); // remove tags that are empty strings
+		brew.tags.sort((a, b)=>{
+			return a.indexOf(':') - b.indexOf(':') !== 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
+		});
+	}
+
+	const dateFormatString = 'YYYY-MM-DD HH:mm:ss';
+
+	return (
+		<div className='brewItem'>
+			{brew.thumbnail && <div className='thumbnail' style={{ backgroundImage: `url(${brew.thumbnail})` }}></div>}
+			<div className='text'>
+				<h2>{brew.title}</h2>
+				<p className='description'>{brew.description}</p>
+			</div>
+			<hr />
+			<div className='info'>
+				{brew.tags?.length ? (
+					<div className='brewTags' title={`${brew.tags.length} tags:\n${brew.tags.join('\n')}`}>
+						<i className='fas fa-tags' />
+						{brew.tags.map((tag, idx)=>{
+							const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
+							return <span key={idx} className={matches[1]} onClick={()=>updateFilter(tag)}>{matches[2]}</span>;
+						})}
+					</div>
+				) : null}
+				<span title={`Authors:\n${brew.authors?.join('\n')}`}>
+					<i className='fas fa-user' />{' '}
+					{brew.authors?.map((author, index)=>(
+						<React.Fragment key={index}>
+							{author === 'hidden' ? (
+								<span title="Username contained an email address; hidden to protect user's privacy">
+									{author}
+								</span>
+							) : (<a href={`/user/${encodeURIComponent(author)}`}>{author}</a>)}
+							{index < brew.authors.length - 1 && ', '}
+						</React.Fragment>
+					))}
+				</span>
+				<br />
+				<span title={`Last viewed: ${moment(brew.lastViewed).local().format(dateFormatString)}`}>
+					<i className='fas fa-eye' /> {brew.views}
+				</span>
+				{brew.pageCount && (
+					<span title={`Page count: ${brew.pageCount}`}>
+						<i className='far fa-file' /> {brew.pageCount}
+					</span>
+				)}
+				<span
+					title={dedent` Created: ${moment(brew.createdAt).local().format(dateFormatString)}
+                        Last updated: ${moment(brew.updatedAt).local().format(dateFormatString)}`}
+				>
+					<i className='fas fa-sync-alt' /> {moment(brew.updatedAt).fromNow()}
+				</span>
+				{renderStorageIcon()}
+			</div>
+
+			<div className='links'>
+				{renderShareLink()}
+				{renderEditLink()}
+				{renderDownloadLink()}
+				{renderDeleteBrewLink()}
+			</div>
+		</div>
+	);
+};
+
+export default BrewItem;

client/homebrew/pages/basePages/listPage/brewItem/brewItem.less

@@ -0,0 +1,130 @@
+@import './shared/naturalcrit/styles/core.less';
+
+.brewItem {
+	position                    : relative;
+	box-sizing                  : border-box;
+	display                     : inline-block;
+	width                       : 48%;
+	min-height                  : 105px;
+	padding                     : 5px 15px 2px 6px;
+	padding-right               : 15px;
+	margin-right                : 15px;
+	margin-bottom               : 15px;
+	overflow                    : hidden;
+	vertical-align              : top;
+	background-color            : #CAB2802E;
+	border                      : 1px solid #C9AD6A;
+	border-radius               : 5px;
+	box-shadow                  : 0px 4px 5px 0px #333333;
+	break-inside                : avoid;
+	-webkit-column-break-inside : avoid;
+	page-break-inside           : avoid;
+	.thumbnail {
+		position            : absolute;
+		top                 : 0;
+		right               : 0;
+		z-index             : -1;
+		width               : 150px;
+		height              : 100%;
+		background-repeat   : no-repeat;
+		background-position : right top;
+		background-size     : contain;
+		opacity             : 50%;
+		-webkit-mask-image  : linear-gradient(80deg, #00000000 20%, #005500 40%);
+		mask-image          : linear-gradient(80deg, #00000000 20%, #005500 40%);
+	}
+	.text {
+		min-height : 54px;
+		h4 {
+			margin-bottom : 5px;
+			font-size     : 2.2em;
+		}
+	}
+	.info {
+		position    : initial;
+		bottom      : 2px;
+		font-family : "ScalySansRemake";
+		font-size   : 1.2em;
+		& > span {
+			margin-right : 12px;
+			line-height  : 1.5em;
+
+			a { color : inherit; }
+		}
+	}
+	.brewTags span {
+		display          : inline-block;
+		padding          : 2px;
+		margin           : 2px;
+		font-weight      : bold;
+		white-space      : nowrap;
+		cursor           : pointer;
+		background-color : #C8AC6E3B;
+		border           : 1px solid #C8AC6E;
+		border-color     : currentColor;
+		border-radius    : 4px;
+		&::before {
+			margin-right : 3px;
+			font-family  : 'Font Awesome 6 Free';
+			font-size    : 12px;
+		}
+		&.type {
+			color            : #008000;
+			background-color : #0080003B;
+			&::before { content : '\f0ad'; }
+		}
+		&.group {
+			color            : #000000;
+			background-color : #5050503B;
+			&::before { content : '\f500'; }
+		}
+		&.meta {
+			color            : #000080;
+			background-color : #0000803B;
+			&::before { content : '\f05a'; }
+		}
+		&.system {
+			color            : #800000;
+			background-color : #8000003B;
+			&::before { content : '\f518'; }
+		}
+	}
+	&:hover {
+		.links { opacity : 1; }
+	}
+	&:nth-child(2n + 1) { margin-right : 0px; }
+	.links {
+		.animate(opacity);
+		position         : absolute;
+		top              : 0px;
+		right            : 0px;
+		width            : 2em;
+		height           : 100%;
+		text-align       : center;
+		background-color : fade(black, 60%);
+		opacity          : 0;
+		a {
+			.animate(opacity);
+			display         : block;
+			margin          : 8px 0px;
+			font-size       : 1.3em;
+			color           : white;
+			text-decoration : unset;
+			opacity         : 0.6;
+			&:hover { opacity : 1; }
+			i { cursor : pointer; }
+		}
+	}
+	.googleDriveIcon {
+		padding : 0px;
+		margin  : -5px;
+		height  : 18px;
+	}
+	.homebreweryIcon {
+		position : relative;
+		padding  : 0px;
+		top      : 5px;
+		left     : -7.5px;
+		height   : 18px;
+	}
+}

client/homebrew/pages/basePages/listPage/listPage.jsx

@@ -0,0 +1,282 @@
+/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
+import './listPage.less';
+import React from 'react';
+import createReactClass from 'create-react-class';
+import _ from 'lodash';
+import moment from 'moment';
+
+import BrewItem from './brewItem/brewItem.jsx';
+
+const USERPAGE_SORT_DIR = 'HB_listPage_sortDir';
+const USERPAGE_SORT_TYPE = 'HB_listPage_sortType';
+const USERPAGE_GROUP_VISIBILITY_PREFIX = 'HB_listPage_visibility_group';
+
+const DEFAULT_SORT_TYPE = 'alpha';
+const DEFAULT_SORT_DIR = 'asc';
+
+const ListPage = createReactClass({
+	displayName     : 'ListPage',
+	getDefaultProps : function() {
+		return {
+			brewCollection : [
+				{
+					title : '',
+					class : '',
+					brews : []
+				}
+			],
+			navItems    : <></>,
+			reportError : null
+		};
+	},
+	getInitialState : function() {
+		// HIDE ALL GROUPS UNTIL LOADED
+		const brewCollection = this.props.brewCollection.map((brewGroup)=>{
+			brewGroup.visible = false;
+			return brewGroup;
+		});
+
+		return {
+			filterString   : this.props.query?.filter || '',
+			filterTags     : [],
+			sortType       : this.props.query?.sort || null,
+			sortDir        : this.props.query?.dir || null,
+			query          : this.props.query,
+			brewCollection : brewCollection
+		};
+	},
+
+	componentDidMount : function() {
+		// SAVE TO LOCAL STORAGE WHEN LEAVING PAGE
+		window.onbeforeunload = this.saveToLocalStorage;
+
+		// LOAD FROM LOCAL STORAGE
+		if(typeof window !== 'undefined') {
+			const newSortType = (this.state.sortType ?? (localStorage.getItem(USERPAGE_SORT_TYPE) || DEFAULT_SORT_TYPE));
+			const newSortDir = (this.state.sortDir ?? (localStorage.getItem(USERPAGE_SORT_DIR) || DEFAULT_SORT_DIR));
+			this.updateUrl(this.state.filterString, newSortType, newSortDir);
+
+			const brewCollection = this.props.brewCollection.map((brewGroup)=>{
+				brewGroup.visible = (localStorage.getItem(`${USERPAGE_GROUP_VISIBILITY_PREFIX}_${brewGroup.class}`) ?? 'true')=='true';
+				return brewGroup;
+			});
+
+			this.setState({
+				brewCollection : brewCollection,
+				sortType       : newSortType,
+				sortDir        : newSortDir
+			});
+		};
+	},
+
+	componentWillUnmount : function() {
+		window.onbeforeunload = function(){};
+	},
+
+	saveToLocalStorage : function() {
+		this.state.brewCollection.map((brewGroup)=>{
+			localStorage.setItem(`${USERPAGE_GROUP_VISIBILITY_PREFIX}_${brewGroup.class}`, `${brewGroup.visible}`);
+		});
+		localStorage.setItem(USERPAGE_SORT_TYPE, this.state.sortType);
+		localStorage.setItem(USERPAGE_SORT_DIR, this.state.sortDir);
+	},
+
+	renderBrews : function(brews){
+		if(!brews || !brews.length) return <div className='noBrews'>No Brews.</div>;
+
+		return _.map(brews, (brew, idx)=>{
+			return <BrewItem brew={brew} key={idx} reportError={this.props.reportError} updateListFilter={ (tag)=>{ this.updateUrl(this.state.filterString, this.state.sortType, this.state.sortDir, tag); }}/>;
+		});
+	},
+
+	sortBrewOrder : function(brew){
+		if(!brew.title){brew.title = 'No Title';}
+		const mapping = {
+			'alpha'   : _.deburr(brew.title.trim().toLowerCase()),
+			'created' : moment(brew.createdAt).format(),
+			'updated' : moment(brew.updatedAt).format(),
+			'views'   : brew.views,
+			'latest'  : moment(brew.lastViewed).format()
+		};
+		return mapping[this.state.sortType];
+	},
+
+	handleSortOptionChange : function(event){
+		this.updateUrl(this.state.filterString, event.target.value, this.state.sortDir);
+		this.setState({
+			sortType : event.target.value
+		});
+	},
+
+	handleSortDirChange : function(event){
+		const newDir = this.state.sortDir == 'asc' ? 'desc' : 'asc';
+
+		this.updateUrl(this.state.filterString, this.state.sortType, newDir);
+		this.setState({
+			sortDir : newDir
+		});
+	},
+
+	renderSortOption : function(sortTitle, sortValue){
+		return <div className={`sort-option ${(this.state.sortType == sortValue ? 'active' : '')}`}>
+			<button
+				value={`${sortValue}`}
+				onClick={this.state.sortType == sortValue ? this.handleSortDirChange : this.handleSortOptionChange}
+			>
+				{`${sortTitle}`}
+			</button>
+			{this.state.sortType == sortValue &&
+				<i className={`sortDir fas ${this.state.sortDir == 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`}></i>
+			}
+		  </div>;
+	},
+
+	handleFilterTextChange : function(e){
+		this.setState({
+			filterString : e.target.value,
+		});
+		this.updateUrl(e.target.value, this.state.sortType, this.state.sortDir);
+		return;
+	},
+
+	updateUrl : function(filterTerm, sortType, sortDir, filterTag=''){
+		const url = new URL(window.location.href);
+		const urlParams = new URLSearchParams(url.search);
+
+		urlParams.set('sort', sortType);
+		urlParams.set('dir', sortDir);
+
+		let filterTags = urlParams.getAll('tag');
+		if(filterTag != '') {
+			if(filterTags.findIndex((tag)=>{return tag.toLowerCase()==filterTag.toLowerCase();}) == -1){
+				filterTags.push(filterTag);
+			} else {
+				filterTags = filterTags.filter((tag)=>{ return tag.toLowerCase() != filterTag.toLowerCase(); });
+			}
+		}
+		urlParams.delete('tag');
+		// Add tags to URL in the order they were clicked
+		filterTags.forEach((tag)=>{ urlParams.append('tag', tag); });
+		// Sort tags before updating state
+		filterTags.sort((a, b)=>{
+			return a.indexOf(':') - b.indexOf(':') != 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
+		});
+
+		this.setState({
+			filterTags
+		});
+
+		if(!filterTerm)
+			urlParams.delete('filter');
+		else
+			urlParams.set('filter', filterTerm);
+
+		url.search = urlParams;
+		window.history.replaceState(null, null, url);
+	},
+
+	renderFilterOption : function(){
+		return <div className='filter-option'>
+			<label>
+				<i className='fas fa-search'></i>
+				<input
+					type='search'
+					placeholder='filter title/description'
+					onChange={this.handleFilterTextChange}
+					value={this.state.filterString}
+				/>
+			</label>
+		</div>;
+	},
+
+	renderTagsOptions : function(){
+		if(this.state.filterTags?.length == 0) return;
+		return <div className='tags-container'>
+			{_.map(this.state.filterTags, (tag, idx)=>{
+				const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
+				return <span key={idx} className={matches[1]} onClick={()=>{ this.updateUrl(this.state.filterString, this.state.sortType, this.state.sortDir, tag); }}>{matches[2]}</span>;
+			})}
+		</div>;
+	},
+
+	renderSortOptions : function(){
+		return <div className='sort-container'>
+			<h6>Sort by :</h6>
+			{this.renderSortOption('Title', 'alpha')}
+			{this.renderSortOption('Created Date', 'created')}
+			{this.renderSortOption('Updated Date', 'updated')}
+			{this.renderSortOption('Views', 'views')}
+			{/* {this.renderSortOption('Latest', 'latest')} */}
+
+			{this.renderFilterOption()}
+		</div>;
+	},
+
+	getSortedBrews : function(brews){
+		const testString = _.deburr(this.state.filterString).toLowerCase();
+
+		brews = _.filter(brews, (brew)=>{
+			// Filter by user entered text
+			const brewStrings = _.deburr([
+				brew.title,
+				brew.description,
+				brew.tags].join('\n')
+				.toLowerCase());
+
+			const filterTextTest = brewStrings.includes(testString);
+
+			// Filter by user selected tags
+			let filterTagTest = true;
+			if(this.state.filterTags.length > 0){
+				filterTagTest = Array.isArray(brew.tags) && this.state.filterTags?.every((tag)=>{
+					return brew.tags.findIndex((brewTag)=>{
+						return brewTag.toLowerCase() == tag.toLowerCase();
+					}) >= 0;
+				});
+			}
+
+			return filterTextTest && filterTagTest;
+		});
+
+		return _.orderBy(brews, (brew)=>{ return this.sortBrewOrder(brew); }, this.state.sortDir);
+	},
+
+	toggleBrewCollectionState : function(brewGroupClass) {
+		this.setState((prevState)=>({
+			brewCollection : prevState.brewCollection.map(
+				(brewGroup)=>brewGroup.class === brewGroupClass ? { ...brewGroup, visible: !brewGroup.visible } : brewGroup
+			)
+		}));
+	},
+
+	renderBrewCollection : function(brewCollection){
+		if(brewCollection == []) return <div className='brewCollection'>
+			<h1>No Brews</h1>
+		</div>;
+		return _.map(brewCollection, (brewGroup, idx)=>{
+			return <div key={idx} className={`brewCollection ${brewGroup.class ?? ''}`}>
+				<h1 className={brewGroup.visible ? 'active' : 'inactive'} onClick={()=>{this.toggleBrewCollectionState(brewGroup.class);}}>{brewGroup.title || 'No Title'}</h1>
+				{brewGroup.visible ? this.renderBrews(this.getSortedBrews(brewGroup.brews)) : <></>}
+			</div>;
+		});
+	},
+
+	render : function(){
+		return <div className='listPage sitePage'>
+			{/*<style>@layer V3_5ePHB, bundle;</style>*/}
+			<link href='/themes/V3/Blank/style.css' type='text/css' rel='stylesheet'/>
+			<link href='/themes/V3/5ePHB/style.css' type='text/css' rel='stylesheet'/>
+			{this.props.navItems}
+			{this.renderSortOptions()}
+			{this.renderTagsOptions()}
+
+			<div className='content V3'>
+				<div className='page'>
+					{this.renderBrewCollection(this.state.brewCollection)}
+				</div>
+			</div>
+		</div>;
+	}
+});
+
+export default ListPage;

client/homebrew/pages/basePages/listPage/listPage.less

@@ -0,0 +1,164 @@
+
+.noColumns() {
+	column-count         : auto;
+	column-fill          : auto;
+	column-gap           : normal;
+	column-width         : auto;
+	-webkit-column-count : auto;
+	-moz-column-count    : auto;
+	-webkit-column-width : auto;
+	-moz-column-width    : auto;
+	-webkit-column-gap   : normal;
+	-moz-column-gap      : normal;
+	height               : auto;
+	min-height           : 279.4mm;
+	margin               : 20px auto;
+	contain              : unset;
+}
+.listPage {
+	.content {
+		z-index : 1;
+		.page {
+			.noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer
+			&::after { display : none; }
+			.noBrews {
+				margin     : 10px 0px;
+				font-size  : 1.3em;
+				font-style : italic;
+			}
+			.brewCollection {
+				h1:hover { cursor : pointer; }
+				.active::before, .inactive::before {
+					padding-right : 0.5em;
+					font-family   : 'Font Awesome 6 Free';
+					font-size     : 0.6cm;
+					font-weight   : 900;
+				}
+				.active { color : var(--HB_Color_HeaderText); }
+				.active::before { content : '\f107'; }
+				.inactive { color : #707070; }
+				.inactive::before { content : '\f105'; }
+			}
+		}
+	}
+	.sort-container {
+		position              : sticky;
+		top                   : 0;
+		left                  : 0;
+		z-index               : 1;
+		display               : flex;
+		flex-wrap             : wrap;
+		row-gap               : 5px;
+		column-gap            : 15px;
+		align-items           : baseline;
+		justify-content       : center;
+		width                 : 100%;
+		height                : 30px;
+		font-family           : 'Open Sans', sans-serif;
+		color                 : white;
+		text-align            : center;
+		background-color      : #555555;
+		border-top            : 1px solid #666666;
+		border-bottom         : 1px solid #666666;
+		h6 {
+			font-family    : 'Open Sans', sans-serif;
+			font-size      : 11px;
+			font-weight    : bold;
+			text-transform : uppercase;
+		}
+		.sort-option {
+			display     : flex;
+			align-items : center;
+			height      : 100%;
+			padding     : 0 8px;
+			color       : #CCCCCC;
+
+			&:hover { background-color : #444444; }
+
+			&.active {
+				font-weight      : bold;
+				color            : #DDDDDD;
+				background-color : #333333;
+
+				button {
+					height      : 100%;
+					font-weight : 800;
+					color       : white;
+					& + .sortDir { padding-left : 5px; }
+				}
+			}
+
+		}
+		.filter-option {
+			margin-left      : 20px;
+			font-size        : 11px;
+			background-color : transparent !important;
+			i { padding-right : 5px; }
+		}
+		button {
+			padding          : 0;
+			font-family      : 'Open Sans', sans-serif;
+			font-size        : 11px;
+			font-weight      : normal;
+			color            : #CCCCCC;
+			text-transform   : uppercase;
+			background-color : transparent;
+		}
+
+
+	}
+	.tags-container {
+		display            : flex;
+		flex-wrap          : wrap;
+		row-gap            : 5px;
+		column-gap         : 15px;
+		align-items        : center;
+		justify-content    : center;
+		height             : 30px;
+		color              : white;
+		background-color   : #555555;
+		border-top         : 1px solid #666666;
+		border-bottom      : 1px solid #666666;
+		span {
+			padding        : 3px;
+			font-family    : 'Open Sans', sans-serif;
+			font-size      : 11px;
+			font-weight    : bold;
+			color          : #DFDFDF;
+			cursor         : pointer;
+			border         : 1px solid;
+			border-radius  : 3px;
+			&::before {
+				margin-right : 3px;
+				font-family  : 'Font Awesome 6 Free';
+				font-size    : 12px;
+			}
+			&::after {
+				margin-left : 3px;
+				font-family : 'Font Awesome 6 Free';
+				font-size   : 12px;
+				content     : '\f00d';
+			}
+			&.type {
+				background-color : #008000;
+				border-color     : #00A000;
+				&::before { content : '\f0ad'; }
+			}
+			&.group {
+				background-color : #505050;
+				border-color     : #000000;
+				&::before { content : '\f500'; }
+			}
+			&.meta {
+				background-color : #000080;
+				border-color     : #0000A0;
+				&::before { content : '\f05a'; }
+			}
+			&.system {
+				background-color : #800000;
+				border-color     : #A00000;
+				&::before { content : '\f518'; }
+			}
+		}
+	}
+}

client/homebrew/pages/basePages/uiPage/uiPage.jsx

@@ -0,0 +1,39 @@
+import './uiPage.less';
+import React from 'react';
+import createReactClass from 'create-react-class';
+
+import Nav from '../../../navbar/nav.jsx';
+import Navbar from '../../../navbar/navbar.jsx';
+import NewBrewItem from '../../../navbar/newbrew.navitem.jsx';
+import HelpNavItem from '../../../navbar/help.navitem.jsx';
+import RecentNavItems from '../../../navbar/recent.navitem.jsx';
+const { both: RecentNavItem } = RecentNavItems;
+import Account from '../../../navbar/account.navitem.jsx';
+
+
+const UIPage = createReactClass({
+	displayName : 'UIPage',
+
+	render : function(){
+		return <div className='uiPage sitePage'>
+			<Navbar>
+				<Nav.section>
+					<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
+				</Nav.section>
+
+				<Nav.section>
+					<NewBrewItem />
+					<HelpNavItem />
+					<RecentNavItem />
+					<Account />
+				</Nav.section>
+			</Navbar>
+
+			<div className='content'>
+				{this.props.children}
+			</div>
+		</div>;
+	}
+});
+
+export default UIPage;

client/homebrew/pages/basePages/uiPage/uiPage.less

@@ -0,0 +1,70 @@
+.homebrew {
+	.uiPage.sitePage {
+		.content {
+			width            : ~'min(90vw, 1000px)';
+			padding          : 2% 4%;
+			margin-top       : 25px;
+			margin-right     : auto;
+			margin-left      : auto;
+			overflow-y       : scroll;
+			font-family      : 'Open Sans';
+			font-size        : 0.8em;
+			line-height      : 1.8em;
+			background-color : #F0F0F0;
+			.dataGroup {
+				padding       : 6px 20px 15px;
+				margin        : 5px 0px;
+				border        : 2px solid black;
+				border-radius : 5px;
+				button {
+					width            : 125px;
+					margin-right     : 5px;
+					color            : black;
+					background-color : transparent;
+					border           : 1px solid black;
+					border-radius    : 5px;
+					&.active {
+						color            : white;
+						background-color : #00000077;
+						&::before {
+							margin-right : 5px;
+							font-family  : 'Font Awesome 6 Free';
+							font-weight  : 900;
+							content      : '\f00c';
+						}
+					}
+				}
+			}
+			h1, h2, h3, h4 {
+				width          : 100%;
+				margin         : 0.5em 30% 0.25em 0;
+				font-weight    : 900;
+				text-transform : uppercase;
+				border-bottom  : 2px solid slategrey;
+			}
+			h1 {
+				margin-right  : 0;
+				margin-bottom : 0.5em;
+				font-size     : 2em;
+				border-bottom : 2px solid darkslategrey;
+			}
+			h2 { font-size : 1.75em; }
+			h3 {
+				font-size : 1.5em;
+				svg { width : 19px; }
+			}
+			h4 { font-size : 1.25em; }
+			strong { font-weight : bold; }
+			em { font-style : italic; }
+			ul {
+				padding-left : 1.25em;
+				list-style   : square;
+			}
+			.blank {
+				height     : 1em;
+				margin-top : 0;
+				& + * { margin-top : 0; }
+			}
+		}
+	}
+}