chore: Simplify comment sidebar persistence to be per-user (#8022)

app/actions/definitions/documents.tsx

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

app/components/AuthenticatedLayout.tsx

@@ -94,7 +94,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
     !showHistory &&
     can.comment &&
     ui.activeDocumentId &&
-    ui.commentsExpanded.includes(ui.activeDocumentId) &&
+    ui.commentsExpanded &&
     team.getPreference(TeamPreference.Commenting);
 
   const sidebarRight = (

app/scenes/Document/components/Comments.tsx

@@ -44,7 +44,7 @@ function Comments() {
   const isAtBottom = React.useRef(true);
   const [showJumpToRecentBtn, setShowJumpToRecentBtn] = React.useState(false);
 
-  useKeyDown("Escape", () => document && ui.collapseComments(document?.id));
+  useKeyDown("Escape", () => document && ui.set({ commentsExpanded: false }));
 
   const [draft, onSaveDraft] = usePersistedState<ProsemirrorData | undefined>(
     `draft-${document?.id}-new`,
@@ -126,7 +126,7 @@ function Comments() {
           <CommentSortMenu />
         </Flex>
       }
-      onClose={() => ui.collapseComments(document?.id)}
+      onClose={() => ui.set({ commentsExpanded: false })}
       scrollable={false}
     >
       <Scrollable

app/scenes/Document/components/DocumentMeta.tsx

@@ -46,7 +46,7 @@ function TitleDocumentMeta({ to, document, revision, ...rest }: Props) {
            • 
           <CommentLink
             to={documentPath(document)}
-            onClick={() => ui.toggleComments(document.id)}
+            onClick={() => ui.toggleComments()}
           >
             <CommentIcon size={18} />
             {commentsCount

app/scenes/Document/components/Editor.tsx

@@ -116,7 +116,7 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
           state: { commentId: focusedComment.id },
         });
       }
-      ui.expandComments(document.id);
+      ui.set({ commentsExpanded: true });
     }
   }, [focusedComment, ui, document.id, history, params]);
 

app/stores/UiStore.ts

@@ -75,7 +75,7 @@ class UiStore {
   sidebarCollapsed = false;
 
   @observable
-  commentsExpanded: string[] = [];
+  commentsExpanded = false;
 
   @observable
   sidebarIsResizing = false;
@@ -99,7 +99,7 @@ class UiStore {
     this.sidebarRightWidth =
       data.sidebarRightWidth || defaultTheme.sidebarRightWidth;
     this.tocVisible = data.tocVisible;
-    this.commentsExpanded = data.commentsExpanded || [];
+    this.commentsExpanded = !!data.commentsExpanded;
     this.theme = data.theme || Theme.System;
 
     // system theme listeners
@@ -218,28 +218,8 @@ class UiStore {
   };
 
   @action
-  collapseComments = (documentId: string) => {
-    this.commentsExpanded = this.commentsExpanded.filter(
-      (id) => id !== documentId
-    );
-    this.persist();
-  };
-
-  @action
-  expandComments = (documentId: string) => {
-    if (!this.commentsExpanded.includes(documentId)) {
-      this.commentsExpanded.push(documentId);
-    }
-    this.persist();
-  };
-
-  @action
-  toggleComments = (documentId: string) => {
-    if (this.commentsExpanded.includes(documentId)) {
-      this.collapseComments(documentId);
-    } else {
-      this.expandComments(documentId);
-    }
+  toggleComments = () => {
+    this.set({ commentsExpanded: !this.commentsExpanded });
   };
 
   @action