Change comment sidebar to per-document persistence, closes #4985

app/scenes/Document/components/Comments.tsx

@@ -23,7 +23,7 @@ function Comments() {
   const document = documents.getByUrl(match.params.documentSlug);
   const focusedComment = useFocusedComment();
 
-  useKeyDown("Escape", ui.collapseComments);
+  useKeyDown("Escape", () => document && ui.collapseComments(document?.id));
 
   if (!document) {
     return null;
@@ -37,7 +37,7 @@ function Comments() {
   return (
     <Sidebar
       title={t("Comments")}
-      onClose={ui.collapseComments}
+      onClose={() => ui.collapseComments(document?.id)}
       scrollable={false}
     >
       <Scrollable bottomShadow={!focusedComment} hiddenScrollbars topShadow>

app/scenes/Document/components/DocumentMeta.tsx

@@ -55,7 +55,10 @@ function TitleDocumentMeta({ to, isDraft, document, ...rest }: Props) {
       {team?.getPreference(TeamPreference.Commenting) && (
         <>
           &nbsp;•&nbsp;
-          <CommentLink to={documentUrl(document)} onClick={ui.toggleComments}>
+          <CommentLink
+            to={documentUrl(document)}
+            onClick={() => ui.toggleComments(document.id)}
+          >
             <CommentIcon color="currentColor" size={18} />
             {commentsCount
               ? t("{{ count }} comment", { count: commentsCount })

app/scenes/Document/components/Editor.tsx

@@ -87,13 +87,13 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
 
   const handleClickComment = React.useCallback(
     (commentId: string) => {
-      ui.expandComments();
+      ui.expandComments(document.id);
       history.replace({
         pathname: window.location.pathname.replace(/\/history$/, ""),
         state: { commentId },
       });
     },
-    [ui, history]
+    [ui, document.id, history]
   );
 
   // Create a Comment model in local store when a comment mark is created, this
@@ -115,13 +115,13 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
       comment.id = commentId;
       comments.add(comment);
 
-      ui.expandComments();
+      ui.expandComments(document.id);
       history.replace({
         pathname: window.location.pathname.replace(/\/history$/, ""),
         state: { commentId },
       });
     },
-    [comments, user?.id, props.id, ui, history]
+    [comments, user?.id, props.id, ui, document.id, history]
   );
 
   // Soft delete the Comment model when associated mark is totally removed.