From b795c992fe5cdd40aa38ae35dc8eff5b3388b740 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 5 Mar 2023 16:59:29 -0500
Subject: [PATCH] Change comment sidebar to per-document persistence, closes
 #4985

---
 app/actions/definitions/documents.tsx         |  2 +-
 app/components/AuthenticatedLayout.tsx        |  3 ++-
 app/scenes/Document/components/Comments.tsx   |  4 ++--
 .../Document/components/DocumentMeta.tsx      |  5 +++-
 app/scenes/Document/components/Editor.tsx     |  8 +++----
 app/stores/UiStore.ts                         | 24 +++++++++++++------
 6 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/app/actions/definitions/documents.tsx b/app/actions/definitions/documents.tsx
index 7cfe17ce8..b8d53177f 100644
--- a/app/actions/definitions/documents.tsx
+++ b/app/actions/definitions/documents.tsx
@@ -728,7 +728,7 @@ export const openDocumentComments = createAction({
       return;
     }
 
-    stores.ui.toggleComments();
+    stores.ui.toggleComments(activeDocumentId);
   },
 });
 
diff --git a/app/components/AuthenticatedLayout.tsx b/app/components/AuthenticatedLayout.tsx
index acd4cfde4..fc4c29fff 100644
--- a/app/components/AuthenticatedLayout.tsx
+++ b/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 = (
diff --git a/app/scenes/Document/components/Comments.tsx b/app/scenes/Document/components/Comments.tsx
index 194ed6905..7d8cf0dad 100644
--- a/app/scenes/Document/components/Comments.tsx
+++ b/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>
diff --git a/app/scenes/Document/components/DocumentMeta.tsx b/app/scenes/Document/components/DocumentMeta.tsx
index 1fa81d013..b139da24d 100644
--- a/app/scenes/Document/components/DocumentMeta.tsx
+++ b/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 })
diff --git a/app/scenes/Document/components/Editor.tsx b/app/scenes/Document/components/Editor.tsx
index 422ec2dcb..4058701d3 100644
--- a/app/scenes/Document/components/Editor.tsx
+++ b/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.
diff --git a/app/stores/UiStore.ts b/app/stores/UiStore.ts
index 7afbcadee..2ba9cc033 100644
--- a/app/stores/UiStore.ts
+++ b/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 = () => {
-    this.commentsCollapsed = true;
+  collapseComments = (documentId: string) => {
+    this.commentsExpanded = this.commentsExpanded.filter(
+      (id) => id !== documentId
+    );
   };
 
   @action
-  expandComments = () => {
-    this.commentsCollapsed = false;
+  expandComments = (documentId: string) => {
+    if (!this.commentsExpanded.includes(documentId)) {
+      this.commentsExpanded.push(documentId);
+    }
   };
 
   @action
-  toggleComments = () => {
-    this.commentsCollapsed = !this.commentsCollapsed;
+  toggleComments = (documentId: string) => {
+    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,
     };
   }