made toolbar centered and window titlebar inset

src/WindowManager.js

@@ -43,7 +43,11 @@ class WindowManager {
 	}
 
 	init() {
-		this.mainWindow = WindowManager._CreateWindow();
+		this.mainWindow = WindowManager._CreateWindow({
+			fullscreen     : false,
+			fullscreenable : true,
+			titleBarStyle  : "hiddenInset"
+		});
 
 		if (isDevelopment())
 			this.mainWindow.loadURL("http://localhost:3000");

src/ui/src/assets/css/_toolbar.scss

@@ -0,0 +1,26 @@
+.toolbar {
+	-webkit-app-region: drag;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0.5rem;
+	background: color(mainBackground);
+	border-bottom: solid 1px color(background);
+
+	button {
+		-webkit-app-region: none;
+		padding: 0.5rem !important;
+		margin: 0;
+		font-size: 0.8rem;
+		background-color: color(sidebarBackground);
+		aspect-ratio: 1;
+
+		&:not(:last-child) {
+			margin-right: 0.5rem;
+		}
+
+		svg {
+			margin: 0;
+		}
+	}
+}

src/ui/src/assets/css/_window.scss

@@ -1,14 +1,23 @@
 .window {
 	display: grid;
 	grid-template-columns: 20% auto;
+	grid-template-rows: 40px auto;
 	height: 100%;
 	width: 100%;
 	position: absolute;
 
+	.toolbar {
+		grid-column: 1 / span 2;
+	}
+
 	main {
 		background: color(mainBackground);
 		overflow-y: auto;
 		transition: all 0.3s ease-in-out;
+		
+		& > .slide:first-child {
+			margin: 2rem;
+		}
 	}
 
 	&.fullscreen {
@@ -17,6 +26,7 @@
 		main {
 			& > .slide:first-child {
 				position: absolute;
+				margin: 0;
 				top: 0;
 				left: 0;
 				width: 100vw;

src/ui/src/components/Toolbar.js

@@ -0,0 +1,25 @@
+import React, {useContext} from "react";
+
+import {Folder2Open, Cast} from "react-bootstrap-icons";
+
+import SlideContext from "../shared/SlideContext";
+import Mode         from "../models/Mode";
+
+const Toolbar = ({openFile}) => {
+	const {setMode, setSlide} = useContext(SlideContext);
+
+	const present = () => {
+		setMode(Mode.PRESENT);
+		setSlide(0);
+		document.documentElement.requestFullscreen();
+	}
+
+	return (
+		<nav className="toolbar">
+			<button onClick={openFile} title="Open file"><Folder2Open /></button>	
+			<button onClick={present} title="Start presentation [F5]"><Cast /></button>	
+		</nav>
+	);
+};
+
+export default Toolbar;