fix(core): list comment changes usage (#13036)

fix AF-2710

#### PR Dependency Tree


* **PR #13036** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Limited the maximum width of the comment input container to 800 pixels
for improved layout consistency.

* **New Features**
* Enhanced comment change listings to include pagination information,
allowing users to navigate through comment changes more effectively.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: fengmk2 <fengmk2@gmail.com>

packages/frontend/core/src/components/comment/sidebar/style.css.ts

@@ -172,6 +172,7 @@ export const commentInputContainer = style({
   justifyContent: 'flex-start',
   gap: '4px',
   paddingLeft: '8px',
+  maxWidth: '800px',
 });
 
 export const userName = style({

packages/frontend/core/src/modules/comment/entities/doc-comment-store.ts

@@ -149,15 +149,25 @@ export class DocCommentStore extends Entity<{
 
     const commentChanges = response.workspace?.commentChanges;
     if (!commentChanges) {
-      return [];
+      return {
+        changes: [],
+        startCursor: '',
+        endCursor: after ?? '',
+        hasNextPage: false,
+      };
     }
 
-    return commentChanges.edges.map(edge => ({
-      id: edge.node.id,
-      action: edge.node.action,
-      comment: normalizeComment(edge.node.item),
-      commentId: edge.node.commentId || undefined,
-    }));
+    return {
+      changes: commentChanges.edges.map(edge => ({
+        id: edge.node.id,
+        action: edge.node.action,
+        comment: normalizeComment(edge.node.item),
+        commentId: edge.node.commentId || undefined,
+      })),
+      startCursor: commentChanges.pageInfo.startCursor || '',
+      endCursor: commentChanges.pageInfo.endCursor || '',
+      hasNextPage: commentChanges.pageInfo.hasNextPage,
+    };
   }
 
   async createComment(commentInput: {

packages/frontend/core/src/modules/comment/entities/doc-comment.ts

@@ -359,13 +359,15 @@ export class DocCommentEntity extends Entity<{
         // If we have comments, fetch changes; otherwise fetch all
         if (this.comments$.value.length > 0) {
           return fromPromise(async () => {
-            return await this.store.listCommentChanges({
+            const res = await this.store.listCommentChanges({
               after: this.startCursor,
             });
+            return res;
           }).pipe(
-            tap(changes => {
-              if (changes) {
-                this.handleCommentChanges(changes);
+            tap(result => {
+              if (result) {
+                this.handleCommentChanges(result);
+                this.startCursor = result.endCursor;
               }
             }),
             catchError(error => {
@@ -418,7 +420,8 @@ export class DocCommentEntity extends Entity<{
     }
   }
 
-  private handleCommentChanges(changes: DocCommentChangeListResult): void {
+  private handleCommentChanges(result: DocCommentChangeListResult): void {
+    const { changes } = result;
     if (!changes || changes.length === 0) {
       return;
     }

packages/frontend/core/src/modules/comment/types.ts

@@ -51,4 +51,9 @@ export interface DocCommentChange {
   commentId?: CommentId; // a change with comment id is a reply
 }
 
-export type DocCommentChangeListResult = DocCommentChange[];
+export type DocCommentChangeListResult = {
+  changes: DocCommentChange[];
+  startCursor: string;
+  endCursor: string;
+  hasNextPage: boolean;
+};