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/components/widgets/inputs/FontInput.vue

@@ -112,34 +112,45 @@ export default defineComponent({
 			if (!this.disabled) (this.$refs.menuList as typeof MenuList).setOpen();
 		},
 		selectFont(newName: string) {
-			if (this.isStyle) this.$emit("update:fontStyle", newName);
-			else this.$emit("update:fontFamily", newName);
+			let fontFamily;
+			let fontStyle;
 
-			{
-				const fontFamily = this.isStyle ? this.fontFamily : newName;
-				const fontStyle = this.isStyle ? newName : getFontStyles(newName)[0];
-				const fontFile = getFontFile(fontFamily, fontStyle);
-				this.$emit("changeFont", { fontFamily, fontStyle, fontFile });
+			if (this.isStyle) {
+				this.$emit("update:fontStyle", newName);
+
+				fontFamily = this.fontFamily;
+				fontStyle = newName;
+			} else {
+				this.$emit("update:fontFamily", newName);
+
+				fontFamily = newName;
+				fontStyle = getFontStyles(newName)[0];
 			}
+
+			const fontFile = getFontFile(fontFamily, fontStyle);
+			this.$emit("changeFont", { fontFamily, fontStyle, fontFile });
 		},
 		onWidthChanged(newWidth: number) {
 			this.minWidth = newWidth;
 		},
 		updateEntries(): { menuEntries: SectionsOfMenuListEntries; activeEntry: MenuListEntry } {
-			let selectedIndex = -1;
-			const menuEntries: SectionsOfMenuListEntries = [
-				(this.isStyle ? getFontStyles(this.fontFamily) : fontNames()).map((name, index) => {
-					if (name === (this.isStyle ? this.fontStyle : this.fontFamily)) selectedIndex = index;
+			const choices = this.isStyle ? getFontStyles(this.fontFamily) : fontNames();
+			const selectedChoice = this.isStyle ? this.fontStyle : this.fontFamily;
 
-					const result: MenuListEntry = {
-						label: name,
-						action: (): void => this.selectFont(name),
-					};
-					return result;
-				}),
-			];
+			let selectedEntry: MenuListEntry | undefined;
+			const entries = choices.map((name) => {
+				const result: MenuListEntry = {
+					label: name,
+					action: (): void => this.selectFont(name),
+				};
 
-			const activeEntry = selectedIndex < 0 ? { label: "-" } : menuEntries.flat()[selectedIndex];
+				if (name === selectedChoice) selectedEntry = result;
+
+				return result;
+			});
+
+			const menuEntries: SectionsOfMenuListEntries = [entries];
+			const activeEntry = selectedEntry || { label: "-" };
 
 			return { menuEntries, activeEntry };
 		},

frontend/src/components/widgets/inputs/MenuBarInput.vue

@@ -6,7 +6,7 @@
 			</div>
 		</div>
 		<div class="entry-container" v-for="(entry, index) in menuEntries" :key="index">
-			<div @click="() => handleEntryClick(entry)" class="entry" :class="{ open: entry.ref && entry.ref.isOpen() }" data-hover-menu-spawner>
+			<div @click="() => handleEntryClick(entry)" class="entry" :class="{ open: entry.ref?.isOpen() }" data-hover-menu-spawner>
 				<IconLabel :icon="entry.icon" v-if="entry.icon" />
 				<span v-if="entry.label">{{ entry.label }}</span>
 			</div>

frontend/src/components/widgets/inputs/NumberInput.vue

@@ -152,7 +152,7 @@ export default defineComponent({
 		onIncrement(direction: IncrementDirection) {
 			if (Number.isNaN(this.value)) return;
 
-			({
+			const actions = {
 				Add: (): void => {
 					const directionAddend = direction === "Increase" ? this.incrementFactor : -this.incrementFactor;
 					this.updateValue(this.value + directionAddend);
@@ -162,11 +162,13 @@ export default defineComponent({
 					this.updateValue(this.value * directionMultiplier);
 				},
 				Callback: (): void => {
-					if (direction === "Increase" && this.incrementCallbackIncrease) this.incrementCallbackIncrease();
-					if (direction === "Decrease" && this.incrementCallbackDecrease) this.incrementCallbackDecrease();
+					if (direction === "Increase") this.incrementCallbackIncrease?.();
+					if (direction === "Decrease") this.incrementCallbackDecrease?.();
 				},
 				None: (): void => undefined,
-			}[this.incrementBehavior]());
+			};
+			const action = actions[this.incrementBehavior];
+			action();
 		},
 		updateValue(newValue: number) {
 			const invalid = Number.isNaN(newValue);

frontend/src/components/widgets/inputs/RadioInput.vue

@@ -91,7 +91,7 @@ export default defineComponent({
 			const index = this.entries.indexOf(menuEntry);
 			this.$emit("update:selectedIndex", index);
 
-			if (menuEntry.action) menuEntry.action();
+			menuEntry.action?.();
 		},
 	},
 	components: {