Feature: Hint viewer (#666)

* Add Hint viewer

- Add hints for arrows and lines
- Add hints for resizing elements

* Swap priority of multi mode and resize mode in Hint Viewer

* Remove dangling locales from public

* Add shortcut to hide hints

* Change hint texts and show resize hint ONLY during resizing

* Remove hints toggling

src/components/HintViewer.css

@@ -0,0 +1,6 @@
+.HintViewer {
+  position: absolute;
+  left: 0.5em;
+  bottom: 0.5em;
+  font-size: 0.8rem;
+}

src/components/HintViewer.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { t } from "../i18n";
+import { ExcalidrawElement } from "../element/types";
+
+import "./HintViewer.css";
+
+interface Hint {
+  elementType: string;
+  multiMode: boolean;
+  isResizing: boolean;
+  elements: readonly ExcalidrawElement[];
+}
+
+const getHints = ({ elementType, multiMode, isResizing, elements }: Hint) => {
+  if (elementType === "arrow" || elementType === "line") {
+    if (!multiMode) {
+      return t("hints.linearElement");
+    }
+    return t("hints.linearElementMulti");
+  }
+
+  if (isResizing) {
+    const selectedElements = elements.filter(el => el.isSelected);
+    if (
+      selectedElements.length === 1 &&
+      (selectedElements[0].type === "arrow" ||
+        selectedElements[0].type === "line") &&
+      selectedElements[0].points.length > 2
+    ) {
+      return null;
+    }
+    return t("hints.resize");
+  }
+
+  return null;
+};
+
+export const HintViewer = ({
+  elementType,
+  multiMode,
+  isResizing,
+  elements,
+}: Hint) => {
+  const hint = getHints({
+    elementType,
+    multiMode,
+    isResizing,
+    elements,
+  });
+  if (!hint) {
+    return null;
+  }
+
+  return <div className="HintViewer">{hint}</div>;
+};