Add full support for Mac-specific keyboard layouts (#736)

* IPP for Mac, flawed initial experiments

* Cleanup and progress, but not compiling yet

* Fix error and rename nonmac -> standard

* Extentd ipp macros to accomodate mac input

* Add Mac versions of shortcuts; refactor and document the input mapper macros

* Change frontend styling for user input labels in floating menus

* Additional macro documentation

* A little more documentation

* Improve entry macro syntax

* Move input mapper macros to a separate file

* Adapt the keyboard shortcuts to the user's OS

* Display keyboard shortcuts in the menu bar based on OS

* Change Input Mapper macro syntax from {} to ()

* Fix esc key bug in Vue

* Tweaks

* Interim solution for Mac-specific hints

* Feed tooltip input hotkeys from their actions

* Fix hotkeys for tools because of missing actions

* Make Vue respect Ctrl/Cmd differences per platform

* Remove commented lines

* Code review pass by me

* Code review suggestions with TrueDoctor

* Turn FutureKeyMapping struct into ActionKeys enum which is a bit cleaner

* Add serde derive attributes for message discriminants

* Re-add serde deserialize

* Fix not mutating ActionKeys conversion; remove custom serializer

* Add serde to dev dependencies

Co-authored-by: Dennis <dennis@kobert.dev>

frontend/src/utility-functions/icons.ts

@@ -21,6 +21,7 @@ import KeyboardArrowRight from "@/../assets/icon-12px-solid/keyboard-arrow-right
 import KeyboardArrowUp from "@/../assets/icon-12px-solid/keyboard-arrow-up.svg";
 import KeyboardBackspace from "@/../assets/icon-12px-solid/keyboard-backspace.svg";
 import KeyboardCommand from "@/../assets/icon-12px-solid/keyboard-command.svg";
+import KeyboardControl from "@/../assets/icon-12px-solid/keyboard-control.svg";
 import KeyboardEnter from "@/../assets/icon-12px-solid/keyboard-enter.svg";
 import KeyboardOption from "@/../assets/icon-12px-solid/keyboard-option.svg";
 import KeyboardShift from "@/../assets/icon-12px-solid/keyboard-shift.svg";
@@ -52,6 +53,7 @@ const SOLID_12PX = {
 	KeyboardArrowUp: { component: KeyboardArrowUp, size: 12 },
 	KeyboardBackspace: { component: KeyboardBackspace, size: 12 },
 	KeyboardCommand: { component: KeyboardCommand, size: 12 },
+	KeyboardControl: { component: KeyboardControl, size: 12 },
 	KeyboardEnter: { component: KeyboardEnter, size: 12 },
 	KeyboardOption: { component: KeyboardOption, size: 12 },
 	KeyboardShift: { component: KeyboardShift, size: 12 },

frontend/src/utility-functions/keyboard-entry.ts

@@ -1,5 +1,14 @@
 export function makeKeyboardModifiersBitfield(e: WheelEvent | PointerEvent | KeyboardEvent): number {
-	return Number(e.ctrlKey) | (Number(e.shiftKey) << 1) | (Number(e.altKey) << 2);
+	return (
+		// Shift (all platforms)
+		(Number(e.shiftKey) << 0) |
+		// Alt (all platforms, also called Option on Mac)
+		(Number(e.altKey) << 1) |
+		// Control (all platforms)
+		(Number(e.ctrlKey) << 2) |
+		// Meta (Windows/Linux) or Command (Mac)
+		(Number(e.metaKey) << 3)
+	);
 }
 
 // Necessary because innerText puts an extra newline character at the end when the text is more than one line.
@@ -13,7 +22,7 @@ export function getLatinKey(e: KeyboardEvent): string | null {
 	const key = e.key.toLowerCase();
 	const isPrintable = !ALL_PRINTABLE_KEYS.has(e.key);
 
-	// Control (non-printable) characters are handled normally
+	// Control characters (those which are non-printable) are handled normally
 	if (!isPrintable) return key;
 
 	// These non-Latin characters should fall back to the Latin equivalent at the key location

frontend/src/utility-functions/platform.ts

@@ -0,0 +1,54 @@
+export function browserVersion(): string {
+	const agent = window.navigator.userAgent;
+	let match = agent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
+
+	if (/trident/i.test(match[1])) {
+		const browser = /\brv[ :]+(\d+)/g.exec(agent) || [];
+		return `IE ${browser[1] || ""}`.trim();
+	}
+
+	if (match[1] === "Chrome") {
+		let browser = agent.match(/\bEdg\/(\d+)/);
+		if (browser !== null) return `Edge (Chromium) ${browser[1]}`;
+
+		browser = agent.match(/\bOPR\/(\d+)/);
+		if (browser !== null) return `Opera ${browser[1]}`;
+	}
+
+	match = match[2] ? [match[1], match[2]] : [navigator.appName, navigator.appVersion, "-?"];
+
+	const browser = agent.match(/version\/(\d+)/i);
+	if (browser !== null) match.splice(1, 1, browser[1]);
+
+	return `${match[0]} ${match[1]}`;
+}
+
+export function operatingSystem(detailed = false): string {
+	const osTableDetailed: Record<string, string> = {
+		"Windows NT 10": "Windows 10 or 11",
+		"Windows NT 6.3": "Windows 8.1",
+		"Windows NT 6.2": "Windows 8",
+		"Windows NT 6.1": "Windows 7",
+		"Windows NT 6.0": "Windows Vista",
+		"Windows NT 5.1": "Windows XP",
+		"Windows NT 5.0": "Windows 2000",
+		Mac: "Mac",
+		X11: "Unix",
+		Linux: "Linux",
+		Unknown: "Unknown",
+	};
+	const osTableSimple: Record<string, string> = {
+		Windows: "Windows",
+		Mac: "Mac",
+		Linux: "Linux",
+		Unknown: "Unknown",
+	};
+	const osTable = detailed ? osTableDetailed : osTableSimple;
+
+	const userAgentOS = Object.keys(osTable).find((key) => window.navigator.userAgent.includes(key));
+	return osTable[userAgentOS || "Unknown"];
+}
+
+export function operatingSystemIsMac(): boolean {
+	return operatingSystem() === "Mac";
+}