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

@@ -1,35 +1,80 @@
-import React from "react";
+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={()=>{
 
-  return <>
+						}}
-    <nav>
+					>
-      <button>templates</button>
+					Create new
-      <button>import</button>
+						<i
-      <button>clone</button>
+							className={'fa-solid fa-file'}
-    </nav>
+						/>
-    <div className="content">
+					</button>
-<div className="templates">
+				</div>
-      <div className="template a4"><div className="image"></div><span>A4</span></div>
+			</div>
-      <div className="template a5"><div className="image"></div><span>A5</span></div>
+		</>
-      <div className="template a4"><div className="image"></div><span>A4</span></div>
+	);
-      <div className="template a5"><div className="image"></div><span>A5</span></div>
-      <div className="template a4"><div className="image"></div><span>A4</span></div>
-      <div className="template a5"><div className="image"></div><span>A5</span></div>
-    </div>
-    <div className="metadataPanel">
-      <div className="fieldGroup">
-        <label>title</label>
-						<input type='text'
-							defaultValue=''
-							placeholder='title'
-							className='title'
-							onChange={(e)=>{}} />
-      </div>
-    </div>
-    </div>
-    
-  </>
-
 }

client/components/newDocumentForm.less

@@ -9,11 +9,13 @@
 	border-radius: 10px;
 	box-shadow: 1px 0 14px black;
 
-	nav {
+	.popupTabs {
 		padding: 10px;
 		padding-right:100px;
 		padding-left:50px;
 		background: #333;
+		display: flex;
+		justify-content: space-evenly;
 	}
 
 	.content {
@@ -23,23 +25,27 @@
 
 		.templates {
 			display: grid;
-			grid-template-columns: repeat(3, 1fr);
+			grid-template-columns: repeat(5, 1fr);
 			padding: 50px;
-			gap:10px;
+			gap:30px;
 			box-shadow: inset 0 0 20px rgba(0,0,0,0.62);
 
 			.template {
 				width: 100px;
-				height: 150px;
 				display: flex;
 				flex-direction: column;
 				text-align:center;
+				align-items: center;
 				gap:10px;
 
 				.image {
-					width: 100px;
-					height: 100px;
 					background-color:#444;
+					border:2px solid #777;
+					border-radius:2px;
+					display:grid;
+					place-items:center;
+					padding:10px;
+					font-size:12px;
 				}
 
 			}
@@ -51,10 +57,22 @@
 			background-color: #555;
 			padding:25px;
 			
-			.fieldGroup {
+			.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 {
@@ -68,7 +86,7 @@
 		place-items:center;
 	}
 	
-	input {
+	input, textarea {
 		color:white;
 		background-color:#333;
 		border-radius:5px;

client/homebrew/navbar/newbrew.navitem.jsx

@@ -58,13 +58,14 @@ const NewBrew = ()=>{
 			color='purple'
 			icon='fa-solid fa-plus-square'
 			onClick={()=>{ setOpen(true);}}>
-                new
+				new
 
 		</Nav.item>
-		{open && <Dialog blocking className='newBrewPopup' closeText={DISMISS_BUTTON} >
+		{open && <Dialog blocking className='newBrewPopup' closeText={DISMISS_BUTTON} callbackFn={()=>{setOpen(false);}}>
-          			<NewDocumentForm/>
+					<NewDocumentForm/>
-        		</Dialog>
+				</Dialog>
 		}
+
 	</>;
 };