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

app/actions/definitions/documents.tsx

@@ -728,7 +728,7 @@ export const openDocumentComments = createAction({
       return;
     }
 
-    stores.ui.toggleComments();
+    stores.ui.toggleComments(activeDocumentId);
   },
 });
 

app/components/AuthenticatedLayout.tsx

@@ -91,7 +91,8 @@ const AuthenticatedLayout: React.FC = ({ children }) => {
   const showComments =
     !showInsights &&
     !showHistory &&
-    !ui.commentsCollapsed &&
+    ui.activeDocumentId &&
+    ui.commentsExpanded.includes(ui.activeDocumentId) &&
     team?.getPreference(TeamPreference.Commenting);
 
   const sidebarRight = (

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.

app/stores/UiStore.ts

@@ -64,7 +64,7 @@ class UiStore {
   sidebarCollapsed = false;
 
   @observable
-  commentsCollapsed = false;
+  commentsExpanded: string[] = [];
 
   @observable
   sidebarIsResizing = false;
@@ -100,6 +100,7 @@ class UiStore {
     this.sidebarRightWidth =
       data.sidebarRightWidth || defaultTheme.sidebarRightWidth;
     this.tocVisible = !!data.tocVisible;
+    this.commentsExpanded = data.commentsExpanded || [];
     this.theme = data.theme || Theme.System;
 
     autorun(() => {
@@ -182,18 +183,26 @@ class UiStore {
   };
 
   @action
-  collapseComments = () => {
+  collapseComments = (documentId: string) => {
-    this.commentsCollapsed = true;
+    this.commentsExpanded = this.commentsExpanded.filter(
+      (id) => id !== documentId
+    );
   };
 
   @action
-  expandComments = () => {
+  expandComments = (documentId: string) => {
-    this.commentsCollapsed = false;
+    if (!this.commentsExpanded.includes(documentId)) {
+      this.commentsExpanded.push(documentId);
+    }
   };
 
   @action
-  toggleComments = () => {
+  toggleComments = (documentId: string) => {
-    this.commentsCollapsed = !this.commentsCollapsed;
+    if (this.commentsExpanded.includes(documentId)) {
+      this.collapseComments(documentId);
+    } else {
+      this.expandComments(documentId);
+    }
   };
 
   @action
@@ -269,6 +278,7 @@ class UiStore {
       sidebarWidth: this.sidebarWidth,
       sidebarRightWidth: this.sidebarRightWidth,
       languagePromptDismissed: this.languagePromptDismissed,
+      commentsExpanded: this.commentsExpanded,
       theme: this.theme,
     };
   }