Clean up MenuList types and fix many Vue and Clippy warnings

Also remove hard-coded-in-Vue Graphite logo in the menu bar in favor of a Rust definition.

frontend/src/components/widgets/WidgetRow.vue

@@ -12,12 +12,7 @@
 				v-model:open="open"
 				@update:selectedIndex="(value: number) => updateLayout(component.widgetId, value)"
 			/>
-			<FontInput
-				v-if="component.props.kind === 'FontInput'"
-				v-bind="component.props"
-				v-model:open="open"
-				@changeFont="(value: { name: string, style: string, file: string }) => updateLayout(component.widgetId, value)"
-			/>
+			<FontInput v-if="component.props.kind === 'FontInput'" v-bind="component.props" v-model:open="open" @changeFont="(value: unknown) => updateLayout(component.widgetId, value)" />
 			<IconButton v-if="component.props.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, null)" />
 			<IconLabel v-if="component.props.kind === 'IconLabel'" v-bind="component.props" />
 			<NumberInput
@@ -29,8 +24,8 @@
 			/>
 			<OptionalInput v-if="component.props.kind === 'OptionalInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(component.widgetId, value)" />
 			<PopoverButton v-if="component.props.kind === 'PopoverButton'" v-bind="component.props">
-				<h3>{{ component.props.header }}</h3>
-				<p>{{ component.props.text }}</p>
+				<h3>{{ (component.props as any).header }}</h3>
+				<p>{{ (component.props as any).text }}</p>
 			</PopoverButton>
 			<RadioInput v-if="component.props.kind === 'RadioInput'" v-bind="component.props" @update:selectedIndex="(value: number) => updateLayout(component.widgetId, value)" />
 			<Separator v-if="component.props.kind === 'Separator'" v-bind="component.props" />
@@ -38,7 +33,7 @@
 			<TextAreaInput v-if="component.props.kind === 'TextAreaInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widgetId, value)" />
 			<TextButton v-if="component.props.kind === 'TextButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, null)" />
 			<TextInput v-if="component.props.kind === 'TextInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widgetId, value)" />
-			<TextLabel v-if="component.props.kind === 'TextLabel'" v-bind="withoutValue(component.props)">{{ component.props.value }}</TextLabel>
+			<TextLabel v-if="component.props.kind === 'TextLabel'" v-bind="withoutValue(component.props)">{{ (component.props as any).value }}</TextLabel>
 		</template>
 	</div>
 </template>
@@ -124,7 +119,8 @@ export default defineComponent({
 		updateLayout(widgetId: bigint, value: unknown) {
 			this.editor.instance.updateLayout(this.layoutTarget, widgetId, value);
 		},
-		withoutValue(props: Record<string, unknown>): Record<string, unknown> {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		withoutValue(props: Record<string, any>): Record<string, unknown> {
 			const { value: _, ...rest } = props;
 			return rest;
 		},

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

@@ -1,12 +1,12 @@
 <template>
 	<LayoutRow class="color-input" :title="tooltip">
-		<OptionalInput v-if="!noTransparency" :icon="'CloseX'" :checked="Boolean(value)" @update:checked="(val) => updateEnabled(val)"></OptionalInput>
+		<OptionalInput v-if="!noTransparency" :icon="'CloseX'" :checked="Boolean(value)" @update:checked="(state: boolean) => updateEnabled(state)"></OptionalInput>
 		<TextInput :value="displayValue" :label="label" :disabled="disabled || !value" @commitText="(value: string) => textInputUpdated(value)" :center="true" />
 		<Separator :type="'Related'" />
 		<LayoutRow class="swatch">
 			<button class="swatch-button" :class="{ 'disabled-swatch': !value }" :style="`--swatch-color: #${value}`" @click="() => $emit('update:open', true)"></button>
 			<FloatingMenu v-model:open="isOpen" :type="'Popover'" :direction="'Bottom'">
-				<ColorPicker @update:color="(color) => colorPickerUpdated(color)" :color="color" />
+				<ColorPicker @update:color="(color: RGBA) => colorPickerUpdated(color)" :color="color" />
 			</FloatingMenu>
 		</LayoutRow>
 	</LayoutRow>

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

@@ -6,7 +6,7 @@
 			:style="{ minWidth: `${minWidth}px` }"
 			@click="() => !disabled && (open = true)"
 			@blur="(e: FocusEvent) => blur(e)"
-			@keydown="(e) => keydown(e)"
+			@keydown="(e: KeyboardEvent) => keydown(e)"
 			ref="dropdownBox"
 			tabindex="0"
 			data-hover-menu-spawner
@@ -99,7 +99,7 @@
 <script lang="ts">
 import { defineComponent, PropType, toRaw } from "vue";
 
-import { MenuListEntry, SectionsOfMenuListEntries } from "@/wasm-communication/messages";
+import { MenuListEntry } from "@/wasm-communication/messages";
 
 import MenuList from "@/components/floating-menus/MenuList.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -110,7 +110,7 @@ const DASH_ENTRY = { label: "-" };
 export default defineComponent({
 	emits: ["update:selectedIndex"],
 	props: {
-		entries: { type: Array as PropType<SectionsOfMenuListEntries>, required: true },
+		entries: { type: Array as PropType<MenuListEntry[][]>, required: true },
 		selectedIndex: { type: Number as PropType<number>, required: false }, // When not provided, a dash is displayed
 		drawIcon: { type: Boolean as PropType<boolean>, default: false },
 		interactive: { type: Boolean as PropType<boolean>, default: true },

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

@@ -1,31 +1,26 @@
 <template>
 	<div class="menu-bar-input" data-menu-bar-input>
-		<div class="entry-container">
-			<button @click="() => visitWebsite('https://graphite.rs')" class="entry">
-				<IconLabel :icon="'GraphiteLogo'" />
-			</button>
-		</div>
 		<div class="entry-container" v-for="(entry, index) in entries" :key="index">
 			<div
-				@click="(e) => onClick(entry, e.target)"
-				tabindex="0"
-				@blur="(e: FocusEvent) => blur(e,entry)"
-				@keydown="entry.ref?.keydown"
+				@click="(e: MouseEvent) => onClick(entry, e.target)"
+				@blur="(e: FocusEvent) => blur(entry, e.target)"
+				@keydown="(e: KeyboardEvent) => entry.ref?.keydown(e, false)"
 				class="entry"
 				:class="{ open: entry.ref?.isOpen }"
+				tabindex="0"
 				data-hover-menu-spawner
 			>
 				<IconLabel v-if="entry.icon" :icon="entry.icon" />
 				<span v-if="entry.label">{{ entry.label }}</span>
 			</div>
 			<MenuList
+				v-if="entry.children && entry.children.length > 0"
 				:open="entry.ref?.open || false"
 				:entries="entry.children || []"
 				:direction="'Bottom'"
 				:minWidth="240"
 				:drawIcon="true"
-				:defaultAction="() => editor.instance.requestComingSoonDialog()"
-				:ref="(ref: typeof MenuList) => ref && (entry.ref = ref)"
+				:ref="(ref: MenuListInstance) => ref && (entry.ref = ref)"
 			/>
 		</div>
 	</div>
@@ -73,11 +68,14 @@
 import { defineComponent } from "vue";
 
 import { platformIsMac } from "@/utility-functions/platform";
-import { MenuEntry, UpdateMenuBarLayout, MenuListEntry, KeyRaw, KeysGroup } from "@/wasm-communication/messages";
+import { MenuBarEntry, UpdateMenuBarLayout, MenuListEntry, KeyRaw, KeysGroup } from "@/wasm-communication/messages";
 
 import MenuList from "@/components/floating-menus/MenuList.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+type MenuListInstance = InstanceType<typeof MenuList>;
+
 // TODO: Apparently, Safari does not support the Keyboard.lock() API but does relax its authority over certain keyboard shortcuts in fullscreen mode, which we should take advantage of
 const accelKey = platformIsMac() ? "Command" : "Control";
 const LOCK_REQUIRING_SHORTCUTS: KeyRaw[][] = [
@@ -88,12 +86,6 @@ const LOCK_REQUIRING_SHORTCUTS: KeyRaw[][] = [
 	[accelKey, "Shift", "KeyT"],
 ];
 
-type FrontendMenuColumn = {
-	label: string;
-	children: FrontendMenuEntry[][];
-};
-type FrontendMenuEntry = Omit<MenuEntry, "action" | "children"> & { shortcutRequiresLock: boolean | undefined; action: () => void; children: FrontendMenuEntry[][] | undefined };
-
 export default defineComponent({
 	inject: ["editor"],
 	mounted() {
@@ -106,39 +98,47 @@ export default defineComponent({
 				return LOCK_REQUIRING_SHORTCUTS.some((lockKeyCombo) => arraysEqual(shortcutKeys, lockKeyCombo));
 			};
 
-			const menuEntryToFrontendMenuEntry = (subLayout: MenuEntry[][]): FrontendMenuEntry[][] =>
-				subLayout.map((group) =>
-					group.map((entry) => ({
-						...entry,
-						children: entry.children ? menuEntryToFrontendMenuEntry(entry.children) : undefined,
-						action: (): void => this.editor.instance.updateLayout(updateMenuBarLayout.layoutTarget, entry.action.widgetId, undefined),
-						shortcutRequiresLock: entry.shortcut ? shortcutRequiresLock(entry.shortcut.keys) : undefined,
-					}))
-				);
+			const menuBarEntryToMenuListEntry = (entry: MenuBarEntry): MenuListEntry => ({
+				// From `MenuEntryCommon`
+				...entry,
 
-			this.entries = updateMenuBarLayout.layout.map((column) => ({ ...column, children: menuEntryToFrontendMenuEntry(column.children) }));
+				// Shared names with fields that need to be converted from the type used in `MenuBarEntry` to that of `MenuListEntry`
+				action: (): void => this.editor.instance.updateLayout(updateMenuBarLayout.layoutTarget, entry.action.widgetId, undefined),
+				children: entry.children ? entry.children.map((entries) => entries.map((entry) => menuBarEntryToMenuListEntry(entry))) : undefined,
+
+				// New fields in `MenuListEntry`
+				shortcutRequiresLock: entry.shortcut ? shortcutRequiresLock(entry.shortcut.keys) : undefined,
+				value: undefined,
+				disabled: undefined,
+				font: undefined,
+				ref: undefined,
+			});
+
+			this.entries = updateMenuBarLayout.layout.map(menuBarEntryToMenuListEntry);
 		});
 	},
 	methods: {
-		onClick(menuEntry: MenuListEntry, target: EventTarget | null) {
+		onClick(menuListEntry: MenuListEntry, target: EventTarget | null) {
+			// If there's no menu to open, trigger the action but don't try to open its non-existant children
+			if (!menuListEntry.children || menuListEntry.children.length === 0) {
+				if (menuListEntry.action && !menuListEntry.disabled) menuListEntry.action();
+
+				return;
+			}
+
 			// Focus the target so that keyboard inputs are sent to the dropdown
 			(target as HTMLElement)?.focus();
 
-			if (menuEntry.ref) menuEntry.ref.isOpen = true;
+			if (menuListEntry.ref) menuListEntry.ref.isOpen = true;
 			else throw new Error("The menu bar floating menu has no associated ref");
 		},
-		blur(e: FocusEvent, menuEntry: MenuListEntry) {
-			if ((e.target as HTMLElement).closest("[data-menu-bar-input]") !== this.$el && menuEntry.ref) menuEntry.ref.isOpen = false;
-		},
-		// TODO: Move to backend
-		visitWebsite(url: string) {
-			// This method is required because `window` isn't accessible from the Vue component HTML
-			window.open(url, "_blank");
+		blur(menuListEntry: MenuListEntry, target: EventTarget | null) {
+			if ((target as HTMLElement)?.closest("[data-menu-bar-input]") !== this.$el && menuListEntry.ref) menuListEntry.ref.isOpen = false;
 		},
 	},
 	data() {
 		return {
-			entries: [] as FrontendMenuColumn[],
+			entries: [] as MenuListEntry[],
 			open: false,
 		};
 	},

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

@@ -1,6 +1,6 @@
 <template>
 	<LayoutRow class="optional-input">
-		<CheckboxInput :checked="checked" @input="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" :icon="icon" :tooltip="tooltip" />
+		<CheckboxInput :checked="checked" @input="(e: Event) => $emit('update:checked', (e.target as HTMLInputElement).checked)" :icon="icon" :tooltip="tooltip" />
 	</LayoutRow>
 </template>
 

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

@@ -77,11 +77,11 @@ export default defineComponent({
 		selectedIndex: { type: Number as PropType<number>, required: true },
 	},
 	methods: {
-		handleEntryClick(menuEntry: RadioEntryData) {
-			const index = this.entries.indexOf(menuEntry);
+		handleEntryClick(radioEntryData: RadioEntryData) {
+			const index = this.entries.indexOf(radioEntryData);
 			this.$emit("update:selectedIndex", index);
 
-			menuEntry.action?.();
+			radioEntryData.action?.();
 		},
 	},
 	components: {