Set focused comment based on url and visible thread id (#5992)

app/client/src/comments/inlineComments/Comments.tsx

@@ -6,12 +6,14 @@ import {
   commentThreadsSelector,
   refCommentThreadsSelector,
   unpublishedCommentThreadSelector,
+  visibleCommentThreadSelector,
 } from "../../selectors/commentsSelectors";
 import {
   getCurrentApplicationId,
   getCurrentPageId,
 } from "selectors/editorSelectors";
 import { useLocation } from "react-router";
+import { AppState } from "reducers";
 
 // TODO refactor application comment threads by page id to optimise
 // if lists turn out to be expensive
@@ -24,11 +26,18 @@ function InlinePageCommentPin({
 }) {
   const commentThread = useSelector(commentThreadsSelector(commentThreadId));
   const currentPageId = useSelector(getCurrentPageId);
+  const isVisibleCommentThread = useSelector(
+    (state: AppState) =>
+      visibleCommentThreadSelector(state) === commentThreadId,
+  );
 
   if (commentThread && commentThread.pageId !== currentPageId) return null;
 
   return (
-    <InlineCommentPin commentThreadId={commentThreadId} focused={focused} />
+    <InlineCommentPin
+      commentThreadId={commentThreadId}
+      focused={focused || isVisibleCommentThread}
+    />
   );
 }
 

app/client/src/selectors/commentsSelectors.ts

@@ -155,7 +155,7 @@ export const appCommentsFilter = (state: AppState) =>
 export const showUnreadIndicator = (state: AppState) =>
   state.ui.comments.unreadCommentThreadsCount > 0;
 
-export const visibleCommentThread = (state: AppState) =>
+export const visibleCommentThreadSelector = (state: AppState) =>
   state.ui.comments.visibleCommentThreadId;
 
 export const isIntroCarouselVisibleSelector = (state: AppState) =>