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/Sidebar/components/Toggle.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import Arrow from "~/components/Arrow";
+
+type Props = {
+  direction: "left" | "right";
+  style?: React.CSSProperties;
+  onClick?: () => any;
+};
+
+const Toggle = React.forwardRef<HTMLButtonElement, Props>(
+  ({ direction = "left", onClick, style }: Props, ref) => {
+    const { t } = useTranslation();
+    return (
+      <Positioner style={style}>
+        <ToggleButton
+          ref={ref}
+          $direction={direction}
+          onClick={onClick}
+          aria-label={t("Toggle sidebar")}
+        >
+          <Arrow />
+        </ToggleButton>
+      </Positioner>
+    );
+  }
+);
+
+export const ToggleButton = styled.button<{ $direction?: "left" | "right" }>`
+  opacity: 0;
+  background: none;
+  transition: opacity 100ms ease-in-out;
+  transform: translateY(-50%)
+    scaleX(${(props) => (props.$direction === "left" ? 1 : -1)});
+  position: fixed;
+  top: 50vh;
+  padding: 8px;
+  border: 0;
+  pointer-events: none;
+  color: ${(props) => props.theme.divider};
+
+  &:active {
+    color: ${(props) => props.theme.sidebarText};
+  }
+
+  ${breakpoint("tablet")`
+    pointer-events: all;
+    cursor: pointer;
+  `}
+`;
+
+export const Positioner = styled.div`
+  display: none;
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -30px;
+  width: 30px;
+
+  &:hover ${ToggleButton}, &:focus-within ${ToggleButton} {
+    opacity: 1;
+  }
+
+  ${breakpoint("tablet")`
+    display: block;
+  `}
+`;
+
+export default Toggle;