Implement input hints based on the active tool state (#388)

* Hook up user input hints to display in the frontend status bar

Closes #171

* MVP hint system based on tool FSM

* Fix hints for Fill and Eyedropper tools

* Add icons for keyboard shortcuts

* Fix hints for Pen Tool

* Cleanup

frontend/src/dispatcher/js-dispatcher.ts

@@ -21,7 +21,10 @@ export function createJsDispatcher() {
 		const messageConstructor = messageConstructors[messageType];
 		if (!messageConstructor) {
 			// eslint-disable-next-line no-console
-			console.error(`Received a frontend message of type "${messageType}" but but was not able to parse the data.`);
+			console.error(
+				`Received a frontend message of type "${messageType}" but was not able to parse the data. ` +
+					"(Perhaps this message parser isn't exported in `messageConstructors` at the bottom of `js-messages.ts`.)"
+			);
 			return;
 		}
 

frontend/src/dispatcher/js-messages.ts

@@ -10,11 +10,41 @@ export class JsMessage {
 	static readonly jsMessageMarker = true;
 }
 
+// ============================================================================
+// Add additional classes to replicate Rust's FrontendMessages and data structures below.
+//
+// Remember to add each message to the `messageConstructors` export at the bottom of the file.
+//
+// Read class-transformer docs at https://github.com/typestack/class-transformer#table-of-contents
+// for details about how to transform the JSON from wasm-bindgen into classes.
+// ============================================================================
+
 export class UpdateOpenDocumentsList extends JsMessage {
 	@Transform(({ value }) => value.map((tuple: [string, boolean]) => ({ name: tuple[0], isSaved: tuple[1] })))
 	readonly open_documents!: { name: string; isSaved: boolean }[];
 }
 
+export class UpdateInputHints extends JsMessage {
+	@Type(() => HintInfo)
+	readonly hint_data!: HintData;
+}
+
+export class HintGroup extends Array<HintInfo> {}
+
+export class HintData extends Array<HintGroup> {}
+
+export class HintInfo {
+	readonly keys!: string[];
+
+	readonly mouse!: KeysGroup | null;
+
+	readonly label!: string;
+
+	readonly plus!: boolean;
+}
+
+export class KeysGroup extends Array<string> {}
+
 const To255Scale = Transform(({ value }) => value * 255);
 export class Color {
 	@To255Scale
@@ -277,6 +307,7 @@ export const messageConstructors: Record<string, MessageMaker> = {
 	SetActiveTool,
 	SetActiveDocument,
 	UpdateOpenDocumentsList,
+	UpdateInputHints,
 	UpdateWorkingColors,
 	SetCanvasZoom,
 	SetCanvasRotation,