diff --git a/app/actions/definitions/documents.tsx b/app/actions/definitions/documents.tsx index 334ad21886..4716e712c8 100644 --- a/app/actions/definitions/documents.tsx +++ b/app/actions/definitions/documents.tsx @@ -1054,7 +1054,7 @@ export const openDocumentComments = createAction({ return; } - stores.ui.toggleComments(activeDocumentId); + stores.ui.toggleComments(); }, }); diff --git a/app/components/AuthenticatedLayout.tsx b/app/components/AuthenticatedLayout.tsx index 5aa9679b69..f9bfe1f985 100644 --- a/app/components/AuthenticatedLayout.tsx +++ b/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 = ( diff --git a/app/scenes/Document/components/Comments.tsx b/app/scenes/Document/components/Comments.tsx index 341aca5207..6822fa3d8d 100644 --- a/app/scenes/Document/components/Comments.tsx +++ b/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( `draft-${document?.id}-new`, @@ -126,7 +126,7 @@ function Comments() { } - onClose={() => ui.collapseComments(document?.id)} + onClose={() => ui.set({ commentsExpanded: false })} scrollable={false} > ui.toggleComments(document.id)} + onClick={() => ui.toggleComments()} > {commentsCount diff --git a/app/scenes/Document/components/Editor.tsx b/app/scenes/Document/components/Editor.tsx index 17e0201c71..986cdab6c3 100644 --- a/app/scenes/Document/components/Editor.tsx +++ b/app/scenes/Document/components/Editor.tsx @@ -116,7 +116,7 @@ function DocumentEditor(props: Props, ref: React.RefObject) { state: { commentId: focusedComment.id }, }); } - ui.expandComments(document.id); + ui.set({ commentsExpanded: true }); } }, [focusedComment, ui, document.id, history, params]); diff --git a/app/stores/UiStore.ts b/app/stores/UiStore.ts index e0b7012fa7..7f92f460eb 100644 --- a/app/stores/UiStore.ts +++ b/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