Various commenting improvements (#4941)

* fix: New threads attached to previous as replies

* fix: Cannot use floating toolbar properly in comments

* perf: Avoid re-writing history on click in editor

* fix: Comment on text selection

* fix: 'Copy link' on comments uses wrong hostname

* Show comment buttons on input focus rather than non-empty input
Increase maximum sidebar size

* Allow opening comments from document menu

* fix: Clicking comment menu should not focus thread

* fix: Selection color

* fix: Draft comments not restored

* Add border above document level comment input

* fix: Floating toolbar not constrainted by offset parent

* fix flash of no comment on saving

* fix: Clicking on editor does not remove draft mark

app/scenes/Document/components/Comments.tsx

@@ -6,8 +6,10 @@ import { useRouteMatch } from "react-router-dom";
 import styled from "styled-components";
 import Empty from "~/components/Empty";
 import Flex from "~/components/Flex";
+import Scrollable from "~/components/Scrollable";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useFocusedComment from "~/hooks/useFocusedComment";
+import useKeyDown from "~/hooks/useKeyDown";
 import useStores from "~/hooks/useStores";
 import CommentForm from "./CommentForm";
 import CommentThread from "./CommentThread";
@@ -21,6 +23,8 @@ function Comments() {
   const document = documents.getByUrl(match.params.documentSlug);
   const focusedComment = useFocusedComment();
 
+  useKeyDown("Escape", ui.collapseComments);
+
   if (!document) {
     return null;
   }
@@ -31,37 +35,42 @@ function Comments() {
   const hasComments = threads.length > 0;
 
   return (
-    <Sidebar title={t("Comments")} onClose={ui.collapseComments}>
-      <Wrapper $hasComments={hasComments}>
-        {hasComments ? (
-          threads.map((thread) => (
-            <CommentThread
-              key={thread.id}
-              comment={thread}
-              document={document}
-              recessed={!!focusedComment && focusedComment.id !== thread.id}
-              focused={focusedComment?.id === thread.id}
-            />
-          ))
-        ) : (
-          <NoComments align="center" justify="center" auto>
-            <Empty>{t("No comments yet")}</Empty>
-          </NoComments>
-        )}
-
-        <AnimatePresence initial={false}>
-          {!focusedComment && (
-            <NewCommentForm
-              documentId={document.id}
-              placeholder={`${t("Add a comment")}…`}
-              autoFocus={false}
-              dir={document.dir}
-              animatePresence
-              standalone
-            />
+    <Sidebar
+      title={t("Comments")}
+      onClose={ui.collapseComments}
+      scrollable={false}
+    >
+      <Scrollable hiddenScrollbars topShadow bottomShadow>
+        <Wrapper $hasComments={hasComments}>
+          {hasComments ? (
+            threads.map((thread) => (
+              <CommentThread
+                key={thread.id}
+                comment={thread}
+                document={document}
+                recessed={!!focusedComment && focusedComment.id !== thread.id}
+                focused={focusedComment?.id === thread.id}
+              />
+            ))
+          ) : (
+            <NoComments align="center" justify="center" auto>
+              <Empty>{t("No comments yet")}</Empty>
+            </NoComments>
           )}
-        </AnimatePresence>
-      </Wrapper>
+        </Wrapper>
+      </Scrollable>
+      <AnimatePresence initial={false}>
+        {!focusedComment && (
+          <NewCommentForm
+            documentId={document.id}
+            placeholder={`${t("Add a comment")}…`}
+            autoFocus={false}
+            dir={document.dir}
+            animatePresence
+            standalone
+          />
+        )}
+      </AnimatePresence>
     </Sidebar>
   );
 }
@@ -77,14 +86,9 @@ const Wrapper = styled.div<{ $hasComments: boolean }>`
 `;
 
 const NewCommentForm = styled(CommentForm)<{ dir?: "ltr" | "rtl" }>`
-  background: ${(props) => props.theme.background};
-  position: absolute;
   padding: 12px;
   padding-right: ${(props) => (props.dir !== "rtl" ? "18px" : "12px")};
   padding-left: ${(props) => (props.dir === "rtl" ? "18px" : "12px")};
-  left: 0;
-  right: 0;
-  bottom: 0;
 `;
 
 export default observer(Comments);