second commit

client/components/dialog.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 const { useRef, useEffect } = React;
 
-function Dialog({ dismisskeys = [], closeText = 'Close', blocking = false, ...rest }) {
+function Dialog({ dismisskeys = [], closeText = 'Close', blocking = false, callbackFn = ()=>{}, ...rest }) {
 	const dialogRef = useRef(null);
 
 	useEffect(()=>{
@@ -15,6 +15,7 @@ function Dialog({ dismisskeys = [], closeText = 'Close', blocking = false, ...re
 				localStorage.setItem(key, 'true');
 			}
 		});
+		callbackFn();
 		dialogRef.current?.close();
 	};
 

client/components/newDocumentForm.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import './newDocumentForm.less';
+
+const sizes = [
+	// ISO A-series (converted from mm)
+	{ id: 'A3', width: 11.7, height: 16.5 }, // 297 × 420 mm
+	{ id: 'A4', width: 8.27, height: 11.69 }, // 210 × 297 mm
+	{ id: 'A5', width: 5.83, height: 8.27 }, // 148 × 210 mm
+	{ id: 'A6', width: 4.13, height: 5.83 }, // 105 × 148 mm
+
+	// US & common book trim sizes
+	{ id: 'US_Letter', width: 8.5, height: 11 },
+	{ id: 'Trade_Paperback', width: 6, height: 9 },
+	{ id: 'Digest', width: 5.5, height: 8.5 },
+	{ id: 'Pocket_Book', width: 4, height: 6 },
+	{ id: 'Square_8_5', width: 8.5, height: 8.5 },
+	{ id: 'Large_Square', width: 10, height: 10 },
+];
+const cmPerInch = 2.54;
+const pxPerInch = 96;
+
+const showAs = (val, unit)=>{
+	switch (unit) {
+	case 'cm':
+		return Math.round(val*cmPerInch);
+	case 'px':
+		return Math.round(val*pxPerInch);
+	default:
+		return val;
+	}
+};
+
+const unit = 'cm';
+
+export function NewDocumentForm() {
+	return (
+		<>
+			<nav className='popupTabs'>
+				<button>templates</button>
+				<button>import</button>
+				<button>clone</button>
+			</nav>
+			<div className='content'>
+				<div className='templates'>
+					{sizes.map((size)=>(
+						<div className='template' key={size.id} onClick={()=>{}}>
+							<div
+								className='image'
+								style={{ height: '100px', width: `${(size.width / size.height) * 100}px` }}>
+								<span>{showAs(size.width, unit)}{unit} by {showAs(size.height, unit)}{unit}</span>
+							</div>
+							<span>{size.id.replaceAll('_', ' ')}</span>
+						</div>
+					))}
+				</div>
+				<div className='metadataPanel'>
+					<div className='field title'>
+						<label>title</label>
+						<input type='text' defaultValue='' placeholder='title' className='title' onChange={(e)=>{}} />
+					</div>
+					<div className='field description'>
+						<label>description</label>
+						<textarea className='description'onChange={(e)=>{}} />
+					</div>
+					<button
+						id='newButton'
+						onClick={()=>{
+
+						}}
+					>
+					Create new
+						<i
+							className={'fa-solid fa-file'}
+						/>
+					</button>
+				</div>
+			</div>
+		</>
+	);
+}

client/components/newDocumentForm.less

@@ -0,0 +1,98 @@
+.newBrewPopup {
+	position: relative;
+	background: #282828;
+	border: unset;
+	display: grid;
+	grid-template-rows: 50px 1fr;
+	padding: 0;
+	color: #ddd;
+	border-radius: 10px;
+	box-shadow: 1px 0 14px black;
+
+	.popupTabs {
+		padding: 10px;
+		padding-right:100px;
+		padding-left:50px;
+		background: #333;
+		display: flex;
+		justify-content: space-evenly;
+	}
+
+	.content {
+		display: grid;
+		grid-template-columns: 1fr 200px;
+		height:100% !important;
+
+		.templates {
+			display: grid;
+			grid-template-columns: repeat(5, 1fr);
+			padding: 50px;
+			gap:30px;
+			box-shadow: inset 0 0 20px rgba(0,0,0,0.62);
+
+			.template {
+				width: 100px;
+				display: flex;
+				flex-direction: column;
+				text-align:center;
+				align-items: center;
+				gap:10px;
+
+				.image {
+					background-color:#444;
+					border:2px solid #777;
+					border-radius:2px;
+					display:grid;
+					place-items:center;
+					padding:10px;
+					font-size:12px;
+				}
+
+			}
+
+		}
+
+		.metadataPanel {
+			height:100%;
+			background-color: #555;
+			padding:25px;
+			
+			.field {
+				display:grid;
+				grid-template-columns:50px 1fr;
+			}
+
+			#newButton {
+					.colorButton(@green);
+					position : absolute;
+					right    : 10px;
+					bottom   : 10px;
+
+					i {
+						margin-left         : 10px;
+						animation-duration  : 1000s;
+					}
+			}
+		}
+	}
+	.dismiss {
+		position: absolute;
+		top: 0px;
+		right: 0px;
+		width:50px;
+		height:50px;
+		z-index:10;
+		display:grid;
+		place-items:center;
+	}
+	
+	input, textarea {
+		color:white;
+		background-color:#333;
+		border-radius:5px;
+		outline:1px solid #777;
+		border:unset;
+		box-shadow: inset 0 0 5px rgba(0,0,0,0.62);
+		width:100%;
+	}
+}

client/homebrew/navbar/newbrew.navitem.jsx

@@ -1,13 +1,22 @@
 const React = require('react');
+const { useState } = React;
+
 const _ = require('lodash');
 const Nav = require('naturalcrit/nav/nav.jsx');
 const { splitTextStyleAndMetadata } = require('../../../shared/helpers.js'); // Importing the function from helpers.js
+import Dialog from '../../components/dialog.jsx';
+import { NewDocumentForm } from '../../components/newDocumentForm.jsx';
 
 const BREWKEY  = 'homebrewery-new';
 const STYLEKEY = 'homebrewery-new-style';
 const METAKEY = 'homebrewery-new-meta';
 
+const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
+
 const NewBrew = ()=>{
+
+	const [open, setOpen] = useState(false);
+
 	const handleFileChange = (e)=>{
 		const file = e.target.files[0];
 		if(!file) return;
@@ -43,15 +52,24 @@ const NewBrew = ()=>{
 		reader.readAsText(file);
 	};
 
+	return <>
+		<Nav.item
+			className='new'
+			color='purple'
+			icon='fa-solid fa-plus-square'
+			onClick={()=>{ setOpen(true);}}>
+				new
 
-	return (
-		<Nav.dropdown>
-			<Nav.item
-				className='new'
-				color='purple'
-				icon='fa-solid fa-plus-square'>
-                new
-			</Nav.item>
+		</Nav.item>
+		{open && <Dialog blocking className='newBrewPopup' closeText={DISMISS_BUTTON} callbackFn={()=>{setOpen(false);}}>
+					<NewDocumentForm/>
+				</Dialog>
+		}
+
+	</>;
+};
+
+/*
 			<Nav.item
 				className='fromBlank'
 				href='/new'
@@ -60,7 +78,6 @@ const NewBrew = ()=>{
 				icon='fa-solid fa-file'>
                 from blank
 			</Nav.item>
-
 			<Nav.item
 				className='fromFile'
 				color='purple'
@@ -69,8 +86,7 @@ const NewBrew = ()=>{
 				<input id='uploadTxt' className='newFromLocal' type='file' onChange={handleFileChange} style={{ display: 'none' }} />
                 from file
 			</Nav.item>
-		</Nav.dropdown>
-	);
-};
+			*/
+
 
 module.exports = NewBrew;