Merge branch 'limitStreamListeners-#5090.1' of https://github.com/G-Ambatte/homebrewery into limitStreamListeners-#5090.1

client/homebrew/pages/basePages/editPage/editorPage.jsx

@@ -7,9 +7,9 @@ import { makePatches, stringifyPatches }      from '@sanity/diff-match-patch';
 
 import Headtags         from '@vitreum/headtags.js';
 import SplitPane        from '@components/splitPane/splitPane.jsx';
-import Editor           from '../editor/editor.jsx';
-import BrewRenderer     from '../brewRenderer/brewRenderer.jsx';
-import LockNotification from '../pages/editPage/lockNotification/lockNotification.jsx';
+import Editor           from '../../../editor/editor.jsx';
+import BrewRenderer     from '../../../brewRenderer/brewRenderer.jsx';
+import LockNotification from '../../editPage/lockNotification/lockNotification.jsx';
 const Meta = Headtags.Meta;
 
 //===---- Navbar
@@ -24,7 +24,7 @@ import PrintNavItem   from '@navbar/print.navitem.jsx';
 import ShareNavItem   from '@navbar/share.navitem.jsx';
 import RecentNavItems from '@navbar/recent.navitem.jsx';
 const { both: RecentNavItem } = RecentNavItems;
-import googleDriveIcon from '../googleDrive.svg';
+import googleDriveIcon from '../../../googleDrive.svg';
 
 const AUTOSAVE_KEY   = 'HB_editor_autoSaveOn';
 const BREWKEY        = 'HB_newPage_content';
@@ -37,7 +37,7 @@ const SAVE_TIMEOUT                  = 10000;  //Autosave 10 seconds after last c
 const UNSAVED_WARNING_TIMEOUT       = 900000; //Warn user afer 15 minutes of unsaved changes
 const UNSAVED_WARNING_POPUP_TIMEOUT = 4000;   //Show the warning for 4 seconds
 
-export default function useCommonEditPageFunctions(dependencies) {
+const EditorPage = (props)=>{
 	const {
 		brew,
 		useLocalStorage,
@@ -48,7 +48,7 @@ export default function useCommonEditPageFunctions(dependencies) {
 		pageName,
 		showEditorButtons,
 		userThemes = {}
-	} = dependencies;
+	} = props;
 
 	const [currentBrew, setCurrentBrew]               = useState(brew);
 	const [isSaving, setIsSaving]                     = useState(false);
@@ -399,7 +399,7 @@ export default function useCommonEditPageFunctions(dependencies) {
 		</>
 	);
 
-	const renderPanels = ()=>(
+	return (
 		<div className= {`${pageName} sitePage`}>
 			<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
 			{(pageName == 'editPage') && <Meta name='robots' content='noindex, nofollow' />}
@@ -439,9 +439,6 @@ export default function useCommonEditPageFunctions(dependencies) {
 			{showFloatingButtons && renderFloatingSaveButtons()}
 		</div>
 	);
+};
 
-	return {
-		trySave,
-		renderPanels
-	};
-}
+export default EditorPage;

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

@@ -4,7 +4,8 @@ import moment from 'moment';
 import request from '../../../../utils/request-middleware.js';
 
 import googleDriveIcon from '../../../../googleDrive.svg';
-import homebreweryIcon from '../../../../thumbnail.svg';
+import homebreweryIconWhite from '@themes/assets/naturalCritLogoWhite.svg';
+import homebreweryIconBlack from '@themes/assets/naturalCritLogoBlack.svg';
 import dedent from 'dedent';
 
 const BrewItem = ({
@@ -16,6 +17,7 @@ const BrewItem = ({
 	},
 	updateListFilter = ()=>{},
 	reportError = ()=>{},
+	theme,
 	renderStorage = true,
 })=>{
 
@@ -101,10 +103,9 @@ const BrewItem = ({
 				</span>
 			);
 		}
-
 		return (
 			<span className='storage' title='Homebrewery Storage'>
-				<img className='homebreweryIcon' src={homebreweryIcon} alt='Homebrewery Storage' />
+				<img className='homebreweryIcon' src={theme === 'light' ? homebreweryIconBlack : homebreweryIconWhite} alt='Homebrewery Storage' />
 			</span>
 		);
 	};

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

@@ -7,6 +7,7 @@
 	--bg-image                  : @backgroundImageAlt;
 	--text-clr                  : black;
 	--text-shadow-clr           : white;
+	--hb-logo: url('@themes/assets/naturalCritLogoBlack.svg');
 
 	position                    : relative;
 	display                     : flex;
@@ -57,9 +58,11 @@
 		font-weight      : bold;
 		white-space      : nowrap;
 		cursor           : pointer;
-		background-color : rgba(from var(--tag-base) r g b / 0.1);
+		color:black;
+		background : hsl(from currentColor h 20% 80%);
 		border           : 1px solid currentColor;
 		border-radius    : 4px;
+
 		&::before {
 			margin-right : 3px;
 			font-family  : 'Font Awesome 6 Free';
@@ -72,22 +75,18 @@
 		--tag-system     : #800000;
 		&.type {
 			color            : var(--tag-type);
-			background-color : rgba(from var(--tag-type) r g b / 0.2);
 			&::before { content : '\f0ad'; }
 		}
 		&.group {
 			color            : var(--tag-group);
-			background-color : rgba(from var(--tag-group) r g b / 0.1);
 			&::before { content : '\f500'; }
 		}
 		&.meta {
 			color            : var(--tag-meta);
-			background-color : rgba(from var(--tag-meta) r g b / 0.2);
 			&::before { content : '\f05a'; }
 		}
 		&.system {
 			color            : var(--tag-system);
-			background-color : rgba(from var(--tag-system) r g b / 0.2);
 			&::before { content : '\f518'; }
 		}
 	}
@@ -127,11 +126,20 @@
 		.deleteLink { color : @red; }
 	}
 }
+
+.darkMode .brewItem {
+	--bg-clr                    : #444;
+	--bg-image                  : @backgroundImageAltDark;
+	--text-clr                  : #ddd;
+	--text-shadow-clr           : black;
+	--hb-logo: url('@themes/assets/naturalCritLogoWhite.svg');
+}
+
 .grid > .brewItem {
 	justify-content  : space-between;
 	width            : clamp(300px, 48%, 500px);
 	min-height       : 125px;
-	padding          : 5px 15px 5px 6px;
+	padding          : 7px 17px 7px 8px;
 	padding-right    : 30px;
 	border-radius    : 5px;
 	box-shadow       : 0 4px 5px 0 #333333;
@@ -160,7 +168,7 @@
 	width                 : 300px;
 	height                : 400px;
 	padding               : 100px 10px 50px;
-	background-image      : url('@themes/assets/naturalCritLogoBlack.svg'), var(--bg-image);
+	background-image      : var(--hb-logo), var(--bg-image);
 	background-repeat     : no-repeat;
 	background-position   : center 20%, center;
 	background-size       : 50%, cover;
@@ -194,7 +202,7 @@
 		width               : 100%;
 		height              : 100%;
 		background-repeat   : no-repeat;
-		background-position : right top;
+		background-position : center top;
 		background-size     : cover;
 		opacity             : 1;
 		mask-image          : unset;
@@ -221,7 +229,6 @@
 			grid-area : tags;
 			color     : inherit;
 			i { color : inherit;}
-			> span { background : hsl(from currentColor h 20% 80%); }
 		}
 		.brewAuthors { grid-area : authors; }
 		.brewPages { grid-area : pages; }
@@ -235,6 +242,9 @@
 		height   : 40px;
 	}
 }
+.darkMode .card .brewItem {
+	border-width:2px;
+}
 .list > .brewItem {
 	display               : grid;
 	grid-template-columns : 35% 3fr 150px;

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

@@ -10,10 +10,12 @@ const USERPAGE_SORT_DIR = 'HB_listPage_sortDir';
 const USERPAGE_SORT_TYPE = 'HB_listPage_sortType';
 const USERPAGE_GROUP_VISIBILITY_PREFIX = 'HB_listPage_visibility_group';
 const USERPAGE_LAYOUT_MODE = 'HB_listPage_layout_mode';
+const USERPAGE_THEME_MODE = 'HB_listPage_theme_mode';
 
 const DEFAULT_SORT_TYPE = 'alpha';
 const DEFAULT_SORT_DIR = 'asc';
 const DEFAULT_LAYOUT_MODE = 'grid';
+const DEFAULT_THEME_MODE = 'light';
 
 const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navItems = <></>, reportError = null, query })=>{
 	const [filterString, setFilterString] = useState(query?.filter || '');
@@ -22,6 +24,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 	const [sortDir, setSortDir] = useState(query?.dir || null);
 	const [groupVisibility, setGroupVisibility] = useState({});
 	const [layoutMode, setLayoutMode] = useState(DEFAULT_LAYOUT_MODE);
+	const [themeMode, setThemeMode] = useState(DEFAULT_THEME_MODE);
 
 	const groupVisibilityRef = useRef(groupVisibility);
 	const sortTypeRef = useRef(sortType);
@@ -53,11 +56,13 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 		}, {});
 
 		const newLayoutMode = localStorage.getItem(USERPAGE_LAYOUT_MODE) || DEFAULT_LAYOUT_MODE;
+		const newThemeMode = localStorage.getItem(USERPAGE_THEME_MODE) || DEFAULT_THEME_MODE;
 
 		setGroupVisibility(namedBrewCollection);
 		setSortType(newSortType);
 		setSortDir(newSortDir);
 		setLayoutMode(newLayoutMode);
+		setThemeMode(newThemeMode);
 
 		return ()=>{
 			window.onbeforeunload = null;
@@ -80,6 +85,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 				brew={brew}
 				key={idx}
 				reportError={reportError}
+				theme={themeMode}
 				updateListFilter={(tag)=>{
 					updateUrl(filterString, sortType, sortDir, tag);
 				}}
@@ -113,12 +119,12 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 
 	const renderSortOption = (sortTitle, sortValue)=>{
 		return (
-			<div className={`sort-option ${sortType == sortValue ? 'active' : ''}`}>
+			<label className={`option ${sortType == sortValue ? 'active' : ''}`}>
 				<button value={`${sortValue}`} onClick={sortType == sortValue ? handleSortDirChange : handleSortOptionChange}>
 					{`${sortTitle}`}
 				</button>
 				{sortType == sortValue && <i className={`sortDir fas ${sortDir == 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`}></i>}
-			</div>
+			</label>
 		);
 	};
 
@@ -201,7 +207,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 
 	const renderSortOptions = ()=>{
 		return (
-			<div className='sort-container'>
+			<div className='radio-toggle sort-container'>
 				<h6>Sort by :</h6>
 				{renderSortOption('Title', 'alpha')}
 				{renderSortOption('Created Date', 'created')}
@@ -282,57 +288,73 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 	};
 
 	const handleLayoutChange = (e, mode)=>{
-		setLayoutMode(e.target.checked ? mode : 'grid');
-		localStorage.setItem(USERPAGE_LAYOUT_MODE, e.target.checked ? mode : 'grid');
+		setLayoutMode(e.target.checked ? mode : DEFAULT_LAYOUT_MODE);
+		localStorage.setItem(USERPAGE_LAYOUT_MODE, e.target.checked ? mode : DEFAULT_LAYOUT_MODE);
 		return;
 	};
 
 	const renderLayoutModeOptions = ()=>{
 		return (
-			<div className='layout-container'>
-				View:
-				<div className='layout-option' title='grid'>
-					<label>
+			<div className='radio-toggle layout-container'>
+				<h6>View:</h6>
+				<label className='option' title='grid'>
 						<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'grid')} checked={layoutMode === 'grid'} />
 						<i className='fac compressed-grid'></i>
-					</label>
-				</div>
-				<div className='layout-option' title='list'>
-					<label>
-						<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'list')} checked={layoutMode === 'list'} />
-						<i className='fas fa-bars'></i>
-					</label>
-				</div>
-				<div className='layout-option' title='card'>
-					<label>
-						<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'card')} checked={layoutMode === 'card'} />
-						<i className='fac format-card'></i>
-					</label>
-				</div>
+				</label>
+				<label className='option' title='list'>
+					<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'list')} checked={layoutMode === 'list'} />
+					<i className='fas fa-bars'></i>
+				</label>
+				<label className='option' title='card'>
+					<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'card')} checked={layoutMode === 'card'} />
+					<i className='fac format-card'></i>
+				</label>
 			</div>
 		);
 	};
 
+	const handleThemeChange = (e, mode)=>{
+		setThemeMode(e.target.checked ? mode : DEFAULT_THEME_MODE);
+		localStorage.setItem(USERPAGE_THEME_MODE, e.target.checked ? mode : DEFAULT_THEME_MODE);
+		return;
+	};
+	const renderThemePicker = ()=>{
+		return (
+			<div className="radio-toggle theme-container">
+				<h6>Theme:</h6>
+				<label className="option">
+					<input type="radio" name="theme" onChange={(e)=>handleThemeChange(e, 'light')} checked={themeMode === 'light'}/>
+					<i className="fas fa-sun"/>
+				</label>
+				<label className="option">
+					<input type="radio" name="theme" onChange={(e)=>handleThemeChange(e, 'dark')}  checked={themeMode === 'dark'}/>
+					<i className="fas fa-moon"/>
+				</label>
+			</div>
+		)
+	};
+
 	const renderNav = () =>{
 
 		return (
 			<div className="listPageNav">
+				{renderLayoutModeOptions()}
+				{renderThemePicker()}
 				{renderSortOptions()}
 				{renderFilterOption()}
 				{renderTagsOptions()}
-				{renderLayoutModeOptions()}
 			</div>
 		);
 			
 	} 
 
 	return (
-		<div className='listPage sitePage'>
+		<div className='sitePage listPage'>
 			{navItems}
 
 			{renderNav()}
 
-			<div className='content V3'>
+			<div className={`content V3 ${themeMode + 'Mode'}`}>
 				<div className='brewCollection'>{renderBrewCollection(brewCollection)}</div>
 			</div>
 		</div>

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

@@ -105,7 +105,6 @@
 					&:not(:has(.brewItem:last-child:nth-child(3n))) {
 						.brewItem:last-child {
 							margin-right : auto;
-							background   : green;
 						}
 					}
 				}
@@ -136,53 +135,49 @@
 			padding-inline : 10px;
 		}
 
-		.sort-container {
+		.radio-toggle {
 			z-index         : 1;
 			display         : flex;
 			flex-wrap       : wrap;
 			row-gap         : 5px;
-			column-gap      : 15px;
-			align-items     : baseline;
+			align-items     : center;
 			justify-content : center;
-
 			text-align      : center;
-
 			h6 {
-				font-size      : 11px;
-				font-weight    : bold;
-				text-transform : uppercase;
+				font-size      : 14px;
+				margin-right:5px;
 			}
-			.sort-option {
+
+			.option {
 				display     : flex;
 				align-items : center;
 				height      : 100%;
 				padding     : 0 8px;
 				color       : #CCCCCC;
 
+				input[type='radio'] { display : none; }
+
+				button {
+					padding          : 0;
+					font-size        : 11px;
+					font-weight      : normal;
+					text-transform   : uppercase;
+					background-color : transparent;
+				}
 				&:hover { background-color : #444444; }
 				
-				&.active {
+				&.active, &:has(input:checked) {
 					font-weight      : bold;
-					color            : #DDDDDD;
+					color            : white;
 					background-color : #333333;
 
 					button {
 						height      : 100%;
 						font-weight : 800;
-						color       : white;
 						& + .sortDir { padding-left : 5px; }
 					}
 				}
 			}
-
-			button {
-				padding          : 0;
-				font-size        : 11px;
-				font-weight      : normal;
-				color            : #CCCCCC;
-				text-transform   : uppercase;
-				background-color : transparent;
-			}
 		}
 
 		.filter-option {
@@ -242,21 +237,5 @@
 				}
 			}
 		}
-		.layout-container {
-			z-index         : 1;
-			display         : flex;
-			flex-wrap       : wrap;
-			row-gap         : 5px;
-			column-gap      : 15px;
-			align-items     : center;
-			justify-content : center;
-			text-align      : center;
-
-			input[type='radio'] { display : none; }
-
-			i { transition : color 0.2s; }
-
-			input:checked + i { color : @blueLight; }
-		}
 	}
 }

client/homebrew/pages/editPage/editPage.jsx

@@ -1,11 +1,10 @@
 import './editPage.less';
 
-// Common imports
-import React                      from 'react';
-import request                    from '../../utils/request-middleware.js';
-import _                          from 'lodash';
-import useCommonEditPageFunctions from '../../utils/commonEditPageFunctions.jsx';
-import { DEFAULT_BREW_LOAD }      from '../../../../server/brewDefaults.js';
+import React                 from 'react';
+import request               from '../../utils/request-middleware.js';
+import _                     from 'lodash';
+import EditorPage            from '../basePages/editPage/editorPage.jsx';
+import { DEFAULT_BREW_LOAD } from '../../../../server/brewDefaults.js';
 
 // Page specific imports
 import { gzipSync, strToU8 }             from 'fflate';
@@ -45,21 +44,18 @@ const EditPage = (props)=>{
 		history.replaceState(null, null, `/edit/${savedBrew.editId}`);;
 	};
 
-	const {
-		renderPanels,
-	} = useCommonEditPageFunctions({
-		useLocalStorage     : false,
-		sandbox             : false,
-		showFloatingButtons : false,
-		showEditorButtons   : true,
-		pageName            : 'newPage',
-		brew                : props.brew,
-		userThemes          : props.userThemes,
-		save,
-		onSaveSuccess,
-	});
-
-	return renderPanels();
+	return (
+		<EditorPage
+			useLocalStorage     = {false}
+			sandbox             = {false}
+			showFloatingButtons = {false}
+			showEditorButtons   = {true}
+			pageName            = {'editPage'}
+			brew                = {props.brew}
+			userThemes          = {props.userThemes}
+			save                = {save}
+			onSaveSuccess       = {onSaveSuccess}
+		></EditorPage>);
 };
 
 export default EditPage;

client/homebrew/pages/homePage/homePage.jsx

@@ -1,11 +1,10 @@
 import './homePage.less';
 
-// Common imports
-import React                      from 'react';
-import request                    from '../../utils/request-middleware.js';
-import _                          from 'lodash';
-import useCommonEditPageFunctions from '../../utils/commonEditPageFunctions.jsx';
-import { DEFAULT_BREW }           from '../../../../server/brewDefaults.js';
+import React            from 'react';
+import request          from '../../utils/request-middleware.js';
+import _                from 'lodash';
+import EditorPage       from '../basePages/editPage/editorPage.jsx';
+import { DEFAULT_BREW } from '../../../../server/brewDefaults.js';
 
 const HomePage =(props)=>{
 	props = {
@@ -26,21 +25,18 @@ const HomePage =(props)=>{
 		window.location = `/edit/${savedBrew.editId}`;
 	};
 
-	const {
-		renderPanels
-	} = useCommonEditPageFunctions({
-		useLocalStorage     : false,
-		sandbox             : true,
-		showFloatingButtons : true,
-		showEditorButtons   : false,
-		pageName            : 'homePage',
-		brew                : props.brew,
-		userThemes          : {},
-		save,
-		onSaveSuccess,
-	});
-
-	return renderPanels();
+	return (
+		<EditorPage
+			useLocalStorage     = {false}
+			sandbox             = {true}
+			showFloatingButtons = {true}
+			showEditorButtons   = {false}
+			pageName            = {'homePage'}
+			brew                = {props.brew}
+			userThemes          = {{}}
+			save                = {save}
+			onSaveSuccess       = {onSaveSuccess}
+		></EditorPage>);
 };
 
 export default HomePage;

client/homebrew/pages/newPage/newPage.jsx

@@ -1,11 +1,10 @@
 import './newPage.less';
 
-// Common imports
-import React                      from 'react';
-import request                    from '../../utils/request-middleware.js';
-import _                          from 'lodash';
-import useCommonEditPageFunctions from '../../utils/commonEditPageFunctions.jsx';
-import { DEFAULT_BREW }           from '../../../../server/brewDefaults.js';
+import React            from 'react';
+import request          from '../../utils/request-middleware.js';
+import _                from 'lodash';
+import EditorPage       from '../basePages/editPage/editorPage.jsx';
+import { DEFAULT_BREW } from '../../../../server/brewDefaults.js';
 
 const NewPage = (props)=>{
 	props = {
@@ -26,21 +25,18 @@ const NewPage = (props)=>{
 		window.location = `/edit/${savedBrew.editId}`;
 	};
 
-	const {
-		renderPanels
-	} = useCommonEditPageFunctions({
-		useLocalStorage     : true,
-		sandbox             : true,
-		showFloatingButtons : false,
-		showEditorButtons   : true,
-		pageName            : 'newPage',
-		brew                : props.brew,
-		userThemes          : props.userThemes,
-		save,
-		onSaveSuccess,
-	});
-
-	return renderPanels();
+	return (
+		<EditorPage
+			useLocalStorage     = {true}
+			sandbox             = {true}
+			showFloatingButtons = {false}
+			showEditorButtons   = {true}
+			pageName            = {'newPage'}
+			brew                = {props.brew}
+			userThemes          = {props.userThemes}
+			save                = {save}
+			onSaveSuccess       = {onSaveSuccess}
+		></EditorPage>);
 };
 
 export default NewPage;