Refactor the old menu bar plumbing to use standard TextButtons (#3444)

* Refactor the old menu bar plumbing to use standard TextButtons

* WIP: Fix Mac native menu bar

* WIP: fix desktop menu bar mac

* Refactor menu bar definitions to use the builder pattern

* WIP: fixup desktop

* cleanup

* fix linux

* Remove dead code that was failing to lint

---------

Co-authored-by: Timon Schelling <me@timon.zip>

frontend/src/components/widgets/WidgetSpan.svelte

@@ -177,7 +177,7 @@
 		{/if}
 		{@const textButton = narrowWidgetProps(component.props, "TextButton")}
 		{#if textButton}
-			<TextButton {...exclude(textButton)} action={() => widgetValueCommitAndUpdate(index, undefined)} />
+			<TextButton {...exclude(textButton)} action={() => widgetValueCommitAndUpdate(index, [])} on:selectedEntryValuePath={({ detail }) => widgetValueCommitAndUpdate(index, detail)} />
 		{/if}
 		{@const breadcrumbTrailButtons = narrowWidgetProps(component.props, "BreadcrumbTrailButtons")}
 		{#if breadcrumbTrailButtons}

frontend/src/components/widgets/buttons/TextButton.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import type { IconName } from "@graphite/icons";
+	import { createEventDispatcher } from "svelte";
 
+	import type { IconName } from "@graphite/icons";
 	import type { MenuListEntry } from "@graphite/messages";
 
 	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
@@ -8,6 +9,8 @@
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
+	const dispatch = createEventDispatcher<{ selectedEntryValuePath: string[] }>();
+
 	let self: MenuList;
 
 	// Note: IconButton should be used if only an icon, but no label, is desired.
@@ -36,7 +39,7 @@
 		// If there's no menu to open, trigger the action
 		if ((menuListChildren?.length ?? 0) === 0) {
 			// Call the action
-			if (action && !disabled) action();
+			if (!disabled) action?.();
 
 			// Exit early so we don't continue on and try to open the menu
 			return;
@@ -84,6 +87,7 @@
 	{#if menuListChildrenExists}
 		<MenuList
 			on:open={({ detail }) => self && (self.open = detail)}
+			on:selectedEntryValuePath={({ detail }) => dispatch("selectedEntryValuePath", detail)}
 			open={self?.open || false}
 			entries={menuListChildren || []}
 			direction="Bottom"
@@ -165,6 +169,11 @@
 			&.open {
 				--button-background-color: var(--color-5-dullgray);
 			}
+
+			&.disabled {
+				--button-text-color: var(--color-8-uppergray);
+				--button-background-color: none;
+			}
 		}
 
 		.icon-label {

frontend/src/components/widgets/inputs/FontInput.svelte

@@ -84,8 +84,8 @@
 	async function getEntries(): Promise<MenuListEntry[]> {
 		const x = isStyle ? fonts.getFontStyles(fontFamily) : fonts.fontNames();
 		return (await x).map((entry: { name: string; url: URL | undefined }) => ({
-			label: entry.name,
 			value: entry.name,
+			label: entry.name,
 			font: entry.url,
 			action: () => selectFont(entry.name),
 		}));

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

@@ -110,6 +110,7 @@
 		removeEventListener("keydown", trackCtrl);
 		removeEventListener("keyup", trackCtrl);
 		removeEventListener("mousemove", trackCtrl);
+		clearTimeout(repeatTimeout);
 	});
 
 	// ===============================

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

@@ -20,8 +20,6 @@
 	function handleEntryClick(radioEntryData: RadioEntryData) {
 		const index = entries.indexOf(radioEntryData);
 		dispatch("selectedIndex", index);
-
-		radioEntryData.action?.();
 	}
 </script>
 

frontend/src/components/widgets/inputs/ScrollbarInput.svelte

@@ -203,6 +203,7 @@
 		window.removeEventListener("pointermove", onPointerMove);
 		window.removeEventListener("mousedown", onMouseDown);
 		window.removeEventListener("keydown", onKeyDown);
+		clearTimeout(repeatTimeout);
 	}
 </script>
 

frontend/src/components/widgets/labels/UserInputLabel.svelte

@@ -231,7 +231,7 @@
 
 		.input-mouse {
 			.bright {
-				fill: var(--color-e-nearwhite);
+				fill: var(--color-b-lightgray);
 			}
 
 			.dim {