fix: comment pins related issues (#7081)

* fix: the thread with the latest comment will be at the top.

* fixed the z index of unpublished pin

* making the layout control absolute

* removed comments

* reversed the ids order

* made sorting logic generic to work with list of ids

* minor refactor

* putting layout controller on top of canvas

app/client/src/comments/AppComments/AppCommentThreads.tsx

@@ -3,12 +3,12 @@ import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
 
 import {
-  getSortedAndFilteredAppCommentThreadIds,
-  applicationCommentsSelector,
   allCommentThreadsMap,
-  getAppCommentThreads,
-  shouldShowResolved as shouldShowResolvedSelector,
   appCommentsFilter as appCommentsFilterSelector,
+  applicationCommentsSelector,
+  getAppCommentThreads,
+  getSortedAndFilteredAppCommentThreadIds,
+  shouldShowResolved as shouldShowResolvedSelector,
 } from "selectors/commentsSelectors";
 import { getCurrentApplicationId } from "selectors/editorSelectors";
 
@@ -30,6 +30,33 @@ const Container = styled.div`
   overflow: auto;
 `;
 
+export const useSortedCommentThreadIds = (commentThreadIds: string[]) => {
+  const commentThreadsMap = useSelector(allCommentThreadsMap);
+  const shouldShowResolved = useSelector(shouldShowResolvedSelector);
+  const appCommentsFilter = useSelector(appCommentsFilterSelector);
+
+  const currentUser = useSelector(getCurrentUser);
+  const currentUsername = currentUser?.username;
+
+  return useMemo(
+    () =>
+      getSortedAndFilteredAppCommentThreadIds(
+        commentThreadIds,
+        commentThreadsMap,
+        shouldShowResolved,
+        appCommentsFilter,
+        currentUsername,
+      ),
+    [
+      commentThreadIds,
+      commentThreadsMap,
+      shouldShowResolved,
+      appCommentsFilter,
+      currentUsername,
+    ],
+  );
+};
+
 function AppCommentThreads() {
   const dispatch = useDispatch();
   const commentThreadIdFromUrl = useSelectCommentThreadUsingQuery();
@@ -38,30 +65,8 @@ function AppCommentThreads() {
     applicationCommentsSelector(applicationId),
   );
   const appCommentThreadIds = getAppCommentThreads(appCommentThreadsByRefMap);
-  const commentThreadsMap = useSelector(allCommentThreadsMap);
-  const shouldShowResolved = useSelector(shouldShowResolvedSelector);
-  const appCommentsFilter = useSelector(appCommentsFilterSelector);
 
-  const currentUser = useSelector(getCurrentUser);
-  const currentUsername = currentUser?.username;
-
-  const commentThreadIds = useMemo(
-    () =>
-      getSortedAndFilteredAppCommentThreadIds(
-        appCommentThreadIds,
-        commentThreadsMap,
-        shouldShowResolved,
-        appCommentsFilter,
-        currentUsername,
-      ),
-    [
-      appCommentThreadIds,
-      commentThreadsMap,
-      shouldShowResolved,
-      appCommentsFilter,
-      currentUsername,
-    ],
-  );
+  const commentThreadIds = useSortedCommentThreadIds(appCommentThreadIds);
 
   useEffect(() => {
     // if user is visiting a comment thread link which is already resolved,

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

@@ -14,6 +14,7 @@ import {
 } from "selectors/editorSelectors";
 import { useLocation } from "react-router";
 import { AppState } from "reducers";
+import { useSortedCommentThreadIds } from "../AppComments/AppCommentThreads";
 
 // TODO refactor application comment threads by page id to optimise
 // if lists turn out to be expensive
@@ -64,10 +65,13 @@ export const useSelectCommentThreadUsingQuery = () => {
  * Children set their position themselves
  */
 function Comments({ refId }: { refId: string }) {
-  const applicationId = useSelector(getCurrentApplicationId);
-  const commentsThreadIds = useSelector(
+  const applicationId = useSelector(getCurrentApplicationId) as string;
+  const commentThreadIdsByRef = useSelector(
     refCommentThreadsSelector(refId, applicationId),
   );
+  const commentThreadIds = useSortedCommentThreadIds(
+    commentThreadIdsByRef as string[],
+  );
   const unpublishedCommentThread = useSelector(
     unpublishedCommentThreadSelector(refId),
   );
@@ -75,14 +79,17 @@ function Comments({ refId }: { refId: string }) {
 
   return (
     <>
-      {Array.isArray(commentsThreadIds) &&
-        commentsThreadIds.map((commentsThreadId: any) => (
-          <MemoisedInlinePageCommentPin
-            commentThreadId={commentsThreadId}
-            focused={commentThreadIdInUrl === commentsThreadId}
-            key={commentsThreadId}
-          />
-        ))}
+      {Array.isArray(commentThreadIds) &&
+        commentThreadIds
+          .slice()
+          .reverse()
+          .map((commentsThreadId: any) => (
+            <MemoisedInlinePageCommentPin
+              commentThreadId={commentsThreadId}
+              focused={commentThreadIdInUrl === commentsThreadId}
+              key={commentsThreadId}
+            />
+          ))}
       {/**
        * Exists in store, not yet created in db
        * Its kept separately in state to reset easily

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

@@ -28,7 +28,7 @@ const CommentTriggerContainer = styled.div<{
 }>`
   position: absolute;
   ${(props) => getPosition(props)}
-
+  z-index: 1;
   & svg {
     width: 30px;
     height: 30px;

app/client/src/pages/Editor/MainContainerLayoutControl.tsx

@@ -55,7 +55,9 @@ const AppsmithLayouts: AppsmithLayoutConfigOption[] = [
 ];
 
 const LayoutControlWrapper = styled.div`
-  height: 40px;
+  position: absolute;
+  height: ${(props) => props.theme.spaces[15]}px;
+  width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;

app/client/src/pages/Editor/WidgetsEditor.tsx

@@ -132,10 +132,10 @@ function WidgetsEditor() {
         onClick={handleWrapperClick}
         onDragStart={onDragStart}
       >
-        <MainContainerLayoutControl />
         <CanvasContainer className={getCanvasClassName()} key={currentPageId}>
           {node}
         </CanvasContainer>
+        <MainContainerLayoutControl />
         <Debugger />
         <CrudInfoModal />
       </EditorWrapper>

app/client/src/pages/common/ArtBoard.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 export default styled.div<{ width: number }>`
   width: ${(props) => props.width}px;
-  margin: 0 auto;
+  margin: ${(props) => props.theme.spaces[15]}px auto 0;
   position: relative;
   background: ${(props) => {
     return props.theme.colors.artboard;