chore: Move to Typescript (#2783)

This PR moves the entire project to Typescript. Due to the ~1000 ignores this will lead to a messy codebase for a while, but the churn is worth it – all of those ignore comments are places that were never type-safe previously.

closes #1282

app/components/Tooltip.tsx

@@ -0,0 +1,69 @@
+import Tippy from "@tippy.js/react";
+import { TFunctionResult } from "i18next";
+import * as React from "react";
+import styled from "styled-components";
+
+type Props = {
+  tooltip: React.ReactChild | React.ReactChild[] | TFunctionResult;
+  shortcut?: React.ReactNode;
+  placement?: "top" | "bottom" | "left" | "right";
+  children: React.ReactElement<any>;
+  delay?: number;
+  className?: string;
+};
+
+function Tooltip({ shortcut, tooltip, delay = 50, ...rest }: Props) {
+  let content = <>{tooltip}</>;
+
+  if (!tooltip) {
+    return rest.children;
+  }
+
+  if (shortcut) {
+    content = (
+      <>
+        {tooltip} &middot; <Shortcut>{shortcut}</Shortcut>
+      </>
+    );
+  }
+
+  return (
+    <StyledTippy
+      arrow
+      arrowType="round"
+      animation="shift-away"
+      content={content}
+      delay={delay}
+      duration={[200, 150]}
+      inertia
+      {...rest}
+    />
+  );
+}
+
+const Shortcut = styled.kbd`
+  position: relative;
+  top: -2px;
+
+  display: inline-block;
+  padding: 2px 4px;
+  font: 10px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
+    monospace;
+  line-height: 10px;
+  color: ${(props) => props.theme.tooltipBackground};
+  vertical-align: middle;
+  background-color: ${(props) => props.theme.tooltipText};
+  border-radius: 3px;
+`;
+
+const StyledTippy = styled(Tippy)`
+  font-size: 13px;
+  background-color: ${(props) => props.theme.tooltipBackground};
+  color: ${(props) => props.theme.tooltipText};
+
+  svg {
+    fill: ${(props) => props.theme.tooltipBackground};
+  }
+`;
+
+export default Tooltip;