added foundation for settings dialog

src/WindowManager.js

@@ -13,7 +13,7 @@ class WindowManager {
 	constructor(parent) {
 		this.app        = parent;
 		this.mainWindow = null;
-		this.windows    = [];
+		this.windows    = {};
 
 		app.whenReady().then(() => this.init());
 
@@ -24,11 +24,17 @@ class WindowManager {
 	init() {
 		this.mainWindow = WindowManager._CreateWindow({
 			fullscreen     : false,
-			fullscreenable : true,
-			titleBarStyle  : "hiddenInset"
+			fullscreenable : true
+		});
+		this.windows.settings = WindowManager._CreateWindow({
+			height         : 300,
+			resizable      : false,
+			fullscreenable : false,
+			parent         : this.mainWindow,
+			show           : true
 		});
 
-		if (isDevelopment) {
+		if (isDevelopment()) {
 			globalShortcut.register("CommandOrControl+I", () => {
 				this.mainWindow.toggleDevTools();
 			});
@@ -37,10 +43,14 @@ class WindowManager {
 			});
 		}
 
-		if (isDevelopment())
+		if (isDevelopment()) {
 			this.mainWindow.loadURL("http://localhost:3000");
-		else
+			this.windows.settings.loadURL("http://localhost:3000/settings");
+		}
+		else {
 			this.mainWindow.loadURL(`file://${__dirname}/ui/build/index.html`);
+			this.windows.settings.loadURL(`file://${__dirname}/ui/build/index.html/settings`);
+		}
 	}
 
 	static _CreateWindow(options = null, parent = null) {
@@ -49,6 +59,7 @@ class WindowManager {
 			height         : 600,
 			show           : false,
 			devTools       : isDevelopment(),
+			titleBarStyle  : "hiddenInset",
 			webPreferences : {
 				contextIsolation : true,
 				preload          : path.join(__dirname, "..", "contextAPI.js")

src/ui/package-lock.json

@@ -2075,6 +2075,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "@remix-run/router": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.1.tgz",
+      "integrity": "sha512-eBV5rvW4dRFOU1eajN7FmYxjAIVz/mRHgUE9En9mBn6m3mulK3WTR5C3iQhL9MZ14rWAq+xOlEaCkDiW0/heOg=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -10053,6 +10058,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.1.tgz",
+      "integrity": "sha512-OJASKp5AykDWFewgWUim1vlLr7yfD4vO/h+bSgcP/ix8Md+LMHuAjovA74MQfsfhQJGGN1nHRhwS5qQQbbBt3A==",
+      "requires": {
+        "@remix-run/router": "1.0.1"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.1.tgz",
+      "integrity": "sha512-MY7NJCrGNVJtGp8ODMOBHu20UaIkmwD2V3YsAOUQoCXFk7Ppdwf55RdcGyrSj+ycSL9Uiwrb3gTLYSnzcRoXww==",
+      "requires": {
+        "@remix-run/router": "1.0.1",
+        "react-router": "6.4.1"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

src/ui/package.json

@@ -10,6 +10,7 @@
     "react": "^18.2.0",
     "react-bootstrap-icons": "^1.9.1",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.1",
     "react-scripts": "5.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "sass": "^1.55.0",

src/ui/src/assets/css/_settings.scss

@@ -0,0 +1,23 @@
+.settings {
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	
+	.navbar {
+		padding: 1.5rem 0.5rem 0 0.5rem;
+		background: color(sidebarBackground);
+		app-region: drag;
+
+		button {
+			padding: 0.3rem 0.5rem;
+
+			svg {
+				font-size: 1.3rem;
+			}
+			
+			label {
+				margin-top: 0.2rem;
+				display: block;
+				font-size: 0.8rem;
+			}
+		}
+	}
+}

src/ui/src/assets/css/ation.scss

@@ -4,6 +4,7 @@
 @import "scrollbars";
 @import "forms";
 @import "toolbar";
+@import "settings";
 
 @import "window";
 @import "noFile";

src/ui/src/components/Tips.js

@@ -4,6 +4,7 @@ const Cheatsheet = Object.freeze([
 	["Start presentation", "F5"],
 	["Stop presentation",  "ESC"],
 	["Open file",          "⌘+O"],
+	["Close file",         "⌘+W"],
 	["Next slide",         "→, Page up"],
 	["Last slide",         "←, Page down"],
 	["Black screen out",   "B"],

src/ui/src/components/settings/Navbar.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+import {Gear} from "react-bootstrap-icons";
+
+const Navbar = () => {
+	return (
+		<nav className="navbar">
+			<button>
+				<Gear />
+				<label>General</label>
+			</button>
+		</nav>
+	);
+};
+
+export default Navbar;

src/ui/src/components/settings/Settings.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+import Navbar from "./Navbar";
+
+const Settings = () => {
+	return (
+		<section className="settings">
+			<Navbar />
+		</section>
+	);
+};
+
+export default Settings;

src/ui/src/index.js

@@ -1,7 +1,10 @@
 import React    from "react";
 import ReactDOM from "react-dom/client";
 
+import {BrowserRouter as Router, Routes, Route} from "react-router-dom";
+
 import Ation    from "./components/Ation";
+import Settings from "./components/settings/Settings";
 import withDrop from "./higherOrderComponents/withDrop";
 
 import "./assets/css/ation.scss";
@@ -11,6 +14,11 @@ const App = withDrop(Ation);
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
 	<React.StrictMode>
-		<App />
+		<Router>
+			<Routes>
+				<Route index element={<App />} />
+				<Route path="/settings" element={<Settings />} />
+			</Routes>
+		</Router>
 	</React.StrictMode>
 );