added app version display to toolbar

contextAPI.js

@@ -16,5 +16,6 @@ contextBridge.exposeInMainWorld("api", {
 
 	removeOnFileOpenListener : callback => ipcRenderer.off("Ation::openFile", callback),
 
-	clearCache : () => webFrame.clearCache()
+	clearCache : () => webFrame.clearCache(),
+	appVersion : async () => await ipcRenderer.invoke("Ation::appVersion")
 });

src/Ation.js

@@ -1,9 +1,10 @@
 "use strict";
-const {app, protocol, dialog} = require("electron");
-const path                    = require("path");
-const fs                      = require("fs/promises");
-const fsn                     = require("fs");
+const {app, protocol, dialog, ipcMain} = require("electron");
+const path                             = require("path");
+const fs                               = require("fs/promises");
+const fsn                              = require("fs");
 
+const AppInfo       = require("../package.json");
 const WindowManager = require("./WindowManager");
 const MainMenu      = require("./MainMenu");
 const {parser}      = require("./Parser");
@@ -28,6 +29,8 @@ class Ation {
 			this.fileToOpen = path;
 		});
 
+		ipcMain.handle("Ation::appVersion", () => AppInfo.version);
+
 		app.whenReady().then(async () => {
 			if (this.fileToOpen)
 				this.openFile(this.fileToOpen);

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

@@ -1,4 +1,5 @@
 .toolbar {
+	position: relative;
 	-webkit-app-region: drag;
 	display: flex;
 	align-items: center;
@@ -29,4 +30,11 @@
 		width: auto;
 		margin: 0 2rem;
 	}
+
+	small {
+		position: absolute;
+		right: 1rem;
+		opacity: 0.3;
+		font-size: 0.5rem;
+	}
 }

src/ui/src/components/Ation.js

@@ -17,6 +17,7 @@ const Ation = () => {
 	const [slide, setSlide]       = useState(0);
 	const [basePath, setBasePath] = useState("");
 	const [showTips, setShowTips] = useState(false);
+	const [version, setVersion]   = useState("0.0.0");
 
 	useEffect(() => {
 		window.api.onFileOpen(presentation => {
@@ -29,6 +30,7 @@ const Ation = () => {
 			setBasePath(newBasePath);
 			setDeck(slideDeck);
 		});
+		(async set => set(await window.api.appVersion()))(setVersion);
 	}, [basePath, slide]);
 
 	const openFile = () => {
@@ -42,7 +44,7 @@ const Ation = () => {
 			: (
 				<SlideContext.Provider value={{slide, setSlide, mode, setMode, basePath}}>
 					<section className={`window${mode === Mode.PRESENT ? " fullscreen" : ""}`}>
-						<Toolbar openFile={openFile} setShowTips={setShowTips} />
+						<Toolbar openFile={openFile} setShowTips={setShowTips} version={version} />
 						<SlidesList deck={deck} />
 						<main className="main">
 							<Slide data={deck[slide] || null} />

src/ui/src/components/Toolbar.js

@@ -7,7 +7,7 @@ import Mode         from "../models/Mode";
 
 import {ReactComponent as Logo} from "../assets/images/logo_ation.svg";
 
-const Toolbar = ({openFile, setShowTips}) => {
+const Toolbar = ({openFile, setShowTips, version}) => {
 	const {setMode, setSlide} = useContext(SlideContext);
 
 	const present = () => {
@@ -22,6 +22,7 @@ const Toolbar = ({openFile, setShowTips}) => {
 			<button onClick={present} title="Start presentation [F5]"><Cast /></button>	
 			<Logo />
 			<button onClick={() => setShowTips(true)} title="Show tips [TAB]"><InfoCircle /></button>	
+			<small>v{version}</small>
 		</nav>
 	);
 };