feat(activity-feed-v2): add highlight state to comments

package.json

@@ -145,11 +145,11 @@
         "@box/metadata-view": "^1.53.26",
         "@box/react-virtualized": "^9.22.3-rc-box.10",
         "@box/readable-time": "^2.1.4",
-        "@box/threaded-annotations": "^2.1.7",
+        "@box/threaded-annotations": "^3.1.1",
         "@box/types": "^2.1.8",
         "@box/unified-share-modal": "^2.15.16",
-        "@box/user-selector": "^2.1.5",
         "@box/uploads-manager": "^1.17.2",
+        "@box/user-selector": "^2.1.5",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@chromatic-com/storybook": "^4.0.1",
         "@commitlint/cli": "^19.8.0",
@@ -314,11 +314,11 @@
         "@box/metadata-view": "^1.53.26",
         "@box/react-virtualized": "^9.22.3-rc-box.10",
         "@box/readable-time": "^2.1.4",
-        "@box/threaded-annotations": "^2.1.7",
+        "@box/threaded-annotations": "^3.1.1",
         "@box/types": "^2.1.8",
         "@box/unified-share-modal": "^2.15.16",
-        "@box/user-selector": "^2.1.5",
         "@box/uploads-manager": "^1.17.2",
+        "@box/user-selector": "^2.1.5",
         "@hapi/address": "^2.1.4",
         "@tanstack/react-virtual": "^3.13.12",
         "axios": "^0.32.0",

src/elements/content-sidebar/ActivitySidebar.js

@@ -1265,6 +1265,20 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
         }
     };
 
+    handleCommentSelect = (commentId: string): void => {
+        const { history, internalSidebarNavigationHandler, routerDisabled } = this.props;
+
+        if (routerDisabled && internalSidebarNavigationHandler) {
+            internalSidebarNavigationHandler({
+                sidebar: ViewType.ACTIVITY,
+                activeFeedEntryId: commentId,
+                activeFeedEntryType: FeedEntryType.COMMENTS,
+            });
+        } else {
+            history.push(this.getActiveCommentPath(commentId));
+        }
+    };
+
     handleItemsFiltered = (status?: ActivityFilterItemType) => {
         const { onFilterChange } = this.props;
 
@@ -1443,6 +1457,7 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
                         onCommentCopyLink={onCommentCopyLink}
                         onCommentCreate={this.createComment}
                         onCommentDelete={this.deleteComment}
+                        onCommentSelect={this.handleCommentSelect}
                         onCommentUpdate={this.updateComment}
                         onReplyCreate={this.createReply}
                         onReplyDelete={this.deleteReply}

src/elements/content-sidebar/activity-feed-v2/ActivityFeedV2.tsx

@@ -57,6 +57,7 @@ const ActivityFeedV2 = ({
     onCommentCopyLink,
     onCommentCreate,
     onCommentDelete,
+    onCommentSelect,
     onCommentUpdate,
     onReplyCreate,
     onReplyDelete,
@@ -74,8 +75,6 @@ const ActivityFeedV2 = ({
     const intl = useIntl();
     const scrollHandle = useActivityFeedScroll();
     const currentUserId = currentUser?.id;
-    const scrollHandleRef = React.useRef<typeof scrollHandle | null>(null);
-    scrollHandleRef.current = scrollHandle;
     const headerTitle = intl.formatMessage(commonMessages.sidebarActivityTitle);
 
     const scrolledEntryIdRef = React.useRef<string | null>(null);
@@ -359,16 +358,18 @@ const ActivityFeedV2 = ({
         viewer.emit('comment_markers', markers);
 
         const handleMarkerSelect = ({ id }: { id: string }) => {
-            requestAnimationFrame(() => {
-                scrollHandleRef.current?.scrollTo(id);
-            });
+            const item = filteredItems.find(filteredItem => filteredItem.id === id);
+            // Annotation markers are already handled via the annotator pipeline, so only handle comments here.
+            if (item?.type === 'comment' && onCommentSelect) {
+                onCommentSelect(id);
+            }
         };
         viewer.addListener('comment_marker_select', handleMarkerSelect);
         return () => {
             viewer.removeListener('comment_marker_select', handleMarkerSelect);
             viewer.emit('comment_markers', []);
         };
-    }, [filteredItems, getViewer, isVideo]);
+    }, [filteredItems, getViewer, isVideo, onCommentSelect]);
 
     const handleCommentPost = React.useCallback(
         async (content: unknown) => {
@@ -466,6 +467,7 @@ const ActivityFeedV2 = ({
                             {filteredItems.map(item => (
                                 <FeedItemRow
                                     key={item.id}
+                                    activeFeedEntryId={activeFeedEntryId}
                                     currentUserId={currentUserId}
                                     fps={fps}
                                     isDisabled={isDisabled}

src/elements/content-sidebar/activity-feed-v2/FeedItemRow.tsx

@@ -30,6 +30,7 @@ import {
 } from '../../../constants';
 
 type FeedItemRowProps = {
+    activeFeedEntryId?: string;
     currentUserId?: string;
     fps: number;
     isDisabled: boolean;
@@ -81,6 +82,7 @@ const buildReplyPost =
     };
 
 const FeedItemRow = ({
+    activeFeedEntryId,
     currentUserId,
     fps,
     isDisabled,
@@ -104,6 +106,8 @@ const FeedItemRow = ({
     timeFormat,
     userSelectorProps,
 }: FeedItemRowProps) => {
+    const isHighlighted = activeFeedEntryId === item.id;
+
     switch (item.type) {
         case 'comment': {
             const { permissions } = item;
@@ -150,6 +154,7 @@ const FeedItemRow = ({
                     annotationTarget={commentAnnotationTarget}
                     isAnnotations={false}
                     isEditDisabled={isDisabled || item.isResolved}
+                    isHighlighted={isHighlighted}
                     isResolved={item.isResolved}
                     messages={item.messages}
                     onAnnotationBadgeClick={handleBadgeClick}
@@ -214,6 +219,7 @@ const FeedItemRow = ({
                     annotationTarget={annotationBadgeTarget}
                     isAnnotations={false}
                     isEditDisabled={isDisabled || item.isResolved}
+                    isHighlighted={isHighlighted}
                     isResolved={item.isResolved}
                     messages={item.messages}
                     onAnnotationBadgeClick={() => onAnnotationSelect?.(item.annotation)}

src/elements/content-sidebar/activity-feed-v2/__tests__/FeedItemRow.test.tsx

@@ -225,6 +225,16 @@ describe('elements/content-sidebar/activity-feed-v2/FeedItemRow', () => {
             expect(lastThreadedAnnotationProps.isAnnotations).toBe(false);
         });
 
+        test('should pass isHighlighted=true when activeFeedEntryId matches the comment id', () => {
+            render(<FeedItemRow {...defaultProps} activeFeedEntryId="comment-1" item={mockComment} />);
+            expect(lastThreadedAnnotationProps.isHighlighted).toBe(true);
+        });
+
+        test('should pass isHighlighted=false when activeFeedEntryId does not match', () => {
+            render(<FeedItemRow {...defaultProps} activeFeedEntryId="other-id" item={mockComment} />);
+            expect(lastThreadedAnnotationProps.isHighlighted).toBe(false);
+        });
+
         test('should call onCommentDelete with id and permissions when onDelete fires', () => {
             const onCommentDelete = jest.fn();
             render(<FeedItemRow {...defaultProps} item={mockComment} onCommentDelete={onCommentDelete} />);
@@ -465,6 +475,16 @@ describe('elements/content-sidebar/activity-feed-v2/FeedItemRow', () => {
             expect(screen.getByRole('article', { name: 'threaded annotation' })).toBeVisible();
         });
 
+        test('should pass isHighlighted=true when activeFeedEntryId matches the annotation id', () => {
+            render(<FeedItemRow {...defaultProps} activeFeedEntryId="annotation-1" item={mockAnnotation} />);
+            expect(lastThreadedAnnotationProps.isHighlighted).toBe(true);
+        });
+
+        test('should pass isHighlighted=false when activeFeedEntryId does not match', () => {
+            render(<FeedItemRow {...defaultProps} activeFeedEntryId="other-id" item={mockAnnotation} />);
+            expect(lastThreadedAnnotationProps.isHighlighted).toBe(false);
+        });
+
         test('should call onAnnotationSelect when onAnnotationBadgeClick fires', () => {
             const onAnnotationSelect = jest.fn();
             render(<FeedItemRow {...defaultProps} item={mockAnnotation} onAnnotationSelect={onAnnotationSelect} />);

src/elements/content-sidebar/activity-feed-v2/types.ts

@@ -116,6 +116,7 @@ export type ActivityFeedV2Props = {
     onCommentCopyLink?: (params: { id: string }) => void;
     onCommentCreate?: (text: string, hasMention: boolean) => void;
     onCommentDelete?: (params: { id: string; permissions: BoxCommentPermission }) => void;
+    onCommentSelect?: (commentId: string) => void;
     onCommentUpdate?: (
         id: string,
         text: string | undefined,