change view mode toggles to indiv buttons

Rather than a single button with three states, it is three buttons.  Went with buttons with `role='radio'` rather than true radios mostly because that is what Radix does.

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -88,9 +88,9 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
 		return deltaZoom;
 	};
 
-	const setBookMode = ()=>{
-		const nextMode = modes[(modes.indexOf(arrangement) + 1) % modes.length];
-		setArrangement(nextMode);
+	const setBookMode = (view)=>{
+		// const nextMode = modes[(modes.indexOf(arrangement) + 1) % modes.length];
+		setArrangement(view);
 	};
 
 	return (
@@ -148,13 +148,24 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
 
 			{/*v=====----------------------< Page Controls >---------------------=====v*/}
 			<div className='group'>
-				<button
-					id='book-mode'
-					className='tool'
-					onClick={()=>setBookMode()}
-				>
-					{arrangement}
-				</button>
+				<div className='radio-group' role='group'>
+					<button role='radio'
+						id='single-view'
+						className={`tool${arrangement === 'single' && ' active'}`}
+						onClick={()=>setBookMode('single')}
+					><i className='fac single-view-alt' /></button>
+					<button role='radio'
+						id='facing-view'
+						className={`tool${arrangement === 'facing' && ' active'}`}
+						onClick={()=>setBookMode('facing')}
+					><i className='fac facing-view-alt' /></button>
+					<button role='radio'
+						id='flow-view'
+						className={`tool${arrangement === 'flow' && ' active'}`}
+						onClick={()=>setBookMode('flow')}
+					><i className='fac flow-view-alt' /></button>
+
+				</div>
 				<AnchoredBox id='view-mode-options' className='tool' title='Options'>
 					<label title='Modify the horizontal space between pages.'>Column gap<input type='range' min={0} max={200} className='range-input' onChange={(evt)=>onStyleChange({ columnGap: `${evt.target.value}px` })} /></label>
 					<label title='Modify the vertical space between rows of pages.'>Row gap<input type='range' min={0} max={200} className='range-input' onChange={(evt)=>onStyleChange({ rowGap: `${evt.target.value}px` })} /></label>

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -34,6 +34,10 @@
 		align-items : center;
 	}
 
+	.active {
+		background-color: #444;
+	}
+
 	.anchored-box {
 		color: #CCCCCC;
 		input[type='number']{
@@ -41,6 +45,12 @@
 		}
 	}
 
+	.radio-group:has(button[role='radio']){
+		display: flex;
+		border: 1px solid #333;
+		height: 100%;
+	}
+
 	input {
 		position       : relative;
 		height         : 1.5em;
@@ -90,7 +100,7 @@
 	}
 
 	button {
-		box-sizing       : content-box;
+		box-sizing       : border-box;
 		display          : flex;
 		align-items      : center;
 		justify-content  : center;
@@ -107,7 +117,7 @@
 		}
 
 		&:hover { background-color : #444444; }
-		&:focus { outline : 1px solid #D3D3D3; }
+		&:focus { border : 1px solid #D3D3D3;outline: none;}
 		&:disabled {
 			color            : #777777;
 			background-color : unset !important;