Undo/Redo buttons, refactor menu toggles (#793)

* Make Undo & Redo and the menu buttons into actions; add undo/redo buttons

* Create variables for the ToolIcon colors

* Darken the menu buttons when they’re active

* Put the more intensive test in `perform`

* Fix & restyle hint viewer

* Add pinch zoom for macOS Safari

* Chrome/Firefox trackpad pinch zoom

* openedMenu → openMenu

* needsShapeEditor.ts → showSelectedShapeActions.ts

* Call showSelectedShapeActions

src/actions/actionMenu.tsx

@@ -0,0 +1,45 @@
+import { Action } from "./types";
+import React from "react";
+import { menu, palette } from "../components/icons";
+import { ToolButton } from "../components/ToolButton";
+import { t } from "../i18n";
+import { showSelectedShapeActions } from "../element";
+
+export const actionToggleCanvasMenu: Action = {
+  name: "toggleCanvasMenu",
+  perform: (_, appState) => ({
+    appState: {
+      ...appState,
+      openMenu: appState.openMenu === "canvas" ? null : "canvas",
+    },
+  }),
+  PanelComponent: ({ appState, updateData }) => (
+    <ToolButton
+      type="button"
+      icon={menu}
+      aria-label={t("buttons.menu")}
+      onClick={updateData}
+      selected={appState.openMenu === "canvas"}
+    />
+  ),
+};
+
+export const actionToggleEditMenu: Action = {
+  name: "toggleEditMenu",
+  perform: (_elements, appState) => ({
+    appState: {
+      ...appState,
+      openMenu: appState.openMenu === "shape" ? null : "shape",
+    },
+  }),
+  PanelComponent: ({ elements, appState, updateData }) => (
+    <ToolButton
+      visible={showSelectedShapeActions(appState, elements)}
+      type="button"
+      icon={palette}
+      aria-label={t("buttons.edit")}
+      onClick={updateData}
+      selected={appState.openMenu === "shape"}
+    />
+  ),
+};