Tidy up the full frontend codebase and use optional chaining where possible (#620)

* Tidy up the full frontend codebase and use optional chaining where possible

* Code review changes

frontend/src/state/wasm-loader.ts

@@ -9,18 +9,20 @@ export type RustEditorInstance = InstanceType<WasmInstance["JsEditorHandle"]>;
 // `wasmImport` starts uninitialized until `initWasm()` is called in `main.ts` before the Vue app is created
 let wasmImport: WasmInstance | null = null;
 export async function initWasm(): Promise<void> {
+	// Skip if the wasm module is already initialized
 	if (wasmImport !== null) return;
 
 	// Separating in two lines satisfies typescript when used below
 	const importedWasm = await import("@/../wasm/pkg").then(panicProxy);
 	wasmImport = importedWasm;
 
+	// Provide a random starter seed which must occur after initializing the wasm module, since wasm can't generate is own random numbers
 	const randomSeed = BigInt(Math.floor(Math.random() * Number.MAX_SAFE_INTEGER));
 	importedWasm.set_random_seed(randomSeed);
 }
 
-// This works by proxying every function call wrapping a try-catch block to filter out redundant and confusing
-// `RuntimeError: unreachable` exceptions sent to the console
+// This works by proxying every function call and wrapping a try-catch block to filter out redundant and confusing
+// `RuntimeError: unreachable` exceptions that would normally be printed in the browser's JS console upon a panic.
 function panicProxy<T extends object>(module: T): T {
 	const proxyHandler = {
 		get(target: T, propKey: string | symbol, receiver: unknown): unknown {