feat: Comments (#4911)

* Comment model

* Framework, model, policy, presenter, api endpoint etc

* Iteration, first pass of UI

* fixes, refactors

* Comment commands

* comment socket support

* typing indicators

* comment component, styling

* wip

* right sidebar resize

* fix: CMD+Enter submit

* Add usePersistedState
fix: Main page scrolling on comment highlight

* drafts

* Typing indicator

* refactor

* policies

* Click thread to highlight
Improve comment timestamps

* padding

* Comment menu v1

* Change comments to use editor

* Basic comment editing

* fix: Hide commenting button when disabled at team level

* Enable opening sidebar without mark

* Move selected comment to location state

* Add comment delete confirmation

* Add comment count to document meta

* fix: Comment sidebar togglable
Add copy link to comment

* stash

* Restore History changes

* Refactor right sidebar to allow for comment animation

* Update to new router best practices

* stash

* Various improvements

* stash

* Handle click outside

* Fix incorrect placeholder in input
fix: Input box appearing on other sessions erroneously

* stash

* fix: Don't leave orphaned child comments

* styling

* stash

* Enable comment toggling again

* Edit styling, merge conflicts

* fix: Cannot navigate from insights to comments

* Remove draft comment mark on click outside

* Fix: Empty comment sidebar, tsc

* Remove public toggle

* fix: All comments are recessed
fix: Comments should not be printed

* fix: Associated mark should be removed on comment delete

* Revert unused changes

* Empty state, basic RTL support

* Create dont toggle comment mark

* Make it feel more snappy

* Highlight active comment in text

* fix animation

* RTL support

* Add reply CTA

* Translations

app/components/ResizingHeightContainer.tsx

@@ -0,0 +1,42 @@
+import { m, TargetAndTransition } from "framer-motion";
+import * as React from "react";
+import useComponentSize from "~/hooks/useComponentSize";
+
+type Props = {
+  /** The children to render */
+  children: React.ReactNode;
+  /** Whether to hide overflow. */
+  hideOverflow?: boolean;
+  /** A way to calculate height */
+  componentSizeCalculation?: "clientRectHeight" | "scrollHeight";
+  /** Optional animation config. */
+  config?: TargetAndTransition;
+  /** Optional styles. */
+  style?: React.CSSProperties;
+};
+
+/**
+ * Automatically animates the height of a container based on it's contents.
+ */
+export function ResizingHeightContainer(props: Props) {
+  const { hideOverflow, children, config, style } = props;
+
+  const ref = React.useRef<HTMLDivElement>(null);
+  const { height } = useComponentSize(ref);
+
+  return (
+    <m.div
+      animate={{
+        ...config,
+        height: Math.round(height),
+      }}
+      style={{
+        ...style,
+        overflow: hideOverflow ? "hidden" : "inherit",
+        position: "relative",
+      }}
+    >
+      <div ref={ref}>{children}</div>
+    </m.div>
+  );
+}