address Review comments

app/client/packages/design-system/ads/src/Templates/EntityExplorer/ListWithHeader.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { ListHeaderContainer, ListItemContainer } from "./styles";
+import { Text } from "../../Text";
+import { Flex } from "../../Flex";
+
+interface Props {
+  headerText: string;
+  headerControls?: React.ReactNode;
+  maxHeight?: string;
+  children: React.ReactNode[];
+}
+
+export const ListWithHeader = (props: Props) => {
+  return (
+    <Flex
+      flexDirection="column"
+      justifyContent="center"
+      maxHeight={props.maxHeight}
+      overflow="hidden"
+    >
+      <ListHeaderContainer className="pages">
+        <Text kind="heading-xs">{props.headerText}</Text>
+        {props.headerControls}
+      </ListHeaderContainer>
+      <ListItemContainer>
+        <Flex
+          alignItems="center"
+          flex="1"
+          flexDirection="column"
+          overflow="auto"
+          px="spaces-2"
+          width="100%"
+        >
+          {props.children}
+        </Flex>
+      </ListItemContainer>
+    </Flex>
+  );
+};

app/client/packages/design-system/ads/src/Templates/EntityExplorer/index.ts

@@ -1 +1,2 @@
 export { ListItemContainer, ListHeaderContainer } from "./styles";
+export { ListWithHeader } from "./ListWithHeader";

app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.tsx

@@ -66,7 +66,7 @@ export const IDEHeader = (props: ChildrenProps) => {
       background="var(--ads-v2-color-bg)"
       borderBottom="1px solid var(--ads-v2-color-border)"
       className="t--editor-header"
-      height={IDE_HEADER_HEIGHT + "px"}
+      height={`${IDE_HEADER_HEIGHT}px`}
       overflow="hidden"
       width="100%"
     >

app/client/src/pages/Editor/IDE/EditorPane/PagesSection.tsx

@@ -1,10 +1,5 @@
 import React, { useCallback, useMemo, useState } from "react";
-import {
-  ListItemContainer,
-  ListHeaderContainer,
-  Text,
-  Flex,
-} from "@appsmith/ads";
+import { ListWithHeader } from "@appsmith/ads";
 import { useDispatch, useSelector } from "react-redux";
 import { useLocation } from "react-router";
 
@@ -66,39 +61,35 @@ const PagesSection = ({ onItemSelected }: { onItemSelected: () => void }) => {
     [pages, location.pathname],
   );
 
+  const createPageContextMenu = useMemo(() => {
+    if (!canCreatePages) return null;
+
+    return (
+      <AddPageContextMenu
+        buttonSize="sm"
+        className={`${EntityClassNames.ADD_BUTTON} group pages`}
+        createPageCallback={createPageCallback}
+        onItemSelected={onItemSelected}
+        onMenuClose={onMenuClose}
+        openMenu={isMenuOpen}
+      />
+    );
+  }, [
+    canCreatePages,
+    createPageCallback,
+    isMenuOpen,
+    onItemSelected,
+    onMenuClose,
+  ]);
+
   return (
-    <Flex
-      flexDirection="column"
-      justifyContent="center"
+    <ListWithHeader
+      headerControls={createPageContextMenu}
+      headerText={`All Pages (${pages.length})`}
       maxHeight={"300px"}
-      overflow="hidden"
     >
-      <ListHeaderContainer className="pages">
-        <Text kind="heading-xs">{`All Pages (${pages.length})`}</Text>
-        {canCreatePages ? (
-          <AddPageContextMenu
-            buttonSize="sm"
-            className={`${EntityClassNames.ADD_BUTTON} group pages`}
-            createPageCallback={createPageCallback}
-            onItemSelected={onItemSelected}
-            onMenuClose={onMenuClose}
-            openMenu={isMenuOpen}
-          />
-        ) : null}
-      </ListHeaderContainer>
-      <ListItemContainer>
-        <Flex
-          alignItems="center"
-          flex="1"
-          flexDirection="column"
-          overflow="auto"
-          px="spaces-2"
-          width="100%"
-        >
-          {pageElements}
-        </Flex>
-      </ListItemContainer>
-    </Flex>
+      {pageElements}
+    </ListWithHeader>
   );
 };
 

app/client/src/pages/Editor/IDE/Header/EditorTitle.tsx

@@ -1,25 +1,33 @@
-import React, { useCallback, useState } from "react";
+import React from "react";
 import { IDEHeaderSwitcher } from "@appsmith/ads";
 
 import { createMessage, HEADER_TITLES } from "ee/constants/messages";
 import { PagesSection } from "../EditorPane/PagesSection";
+import { useBoolean } from "usehooks-ts";
+import { useSelector } from "react-redux";
+import { getCurrentPageId, getPageById } from "selectors/editorSelectors";
 
-const EditorTitle = ({ title }: { title: string }) => {
-  const [active, setActive] = useState(false);
+const EditorTitle = () => {
+  const {
+    setFalse: setMenuClose,
+    setValue: setMenuState,
+    value: isMenuOpen,
+  } = useBoolean(false);
 
-  const closeMenu = useCallback(() => {
-    setActive(false);
-  }, []);
+  const pageId = useSelector(getCurrentPageId) as string;
+  const currentPage = useSelector(getPageById(pageId));
+
+  if (!currentPage) return null;
 
   return (
     <IDEHeaderSwitcher
-      active={active}
+      active={isMenuOpen}
       prefix={createMessage(HEADER_TITLES.PAGES)}
-      setActive={setActive}
-      title={title}
+      setActive={setMenuState}
+      title={currentPage.pageName}
       titleTestId="t--pages-switcher"
     >
-      <PagesSection onItemSelected={closeMenu} />
+      <PagesSection onItemSelected={setMenuClose} />
     </IDEHeaderSwitcher>
   );
 };

app/client/src/pages/Editor/IDE/Header/index.tsx

@@ -75,7 +75,6 @@ import { EditorTitle } from "./EditorTitle";
 import { useCurrentAppState } from "../hooks/useCurrentAppState";
 import { EditorState } from "ee/entities/IDE/constants";
 import { EditorSaveIndicator } from "pages/Editor/EditorSaveIndicator";
-import type { Page } from "entities/Page";
 import { APPLICATIONS_URL } from "constants/routes";
 import { useNavigationMenuData } from "../../EditorName/useNavigationMenuData";
 import useLibraryHeaderTitle from "ee/pages/Editor/IDE/Header/useLibraryHeaderTitle";
@@ -91,10 +90,9 @@ const { cloudHosting } = getAppsmithConfigs();
 
 interface HeaderTitleProps {
   appState: EditorState;
-  currentPage?: Page;
 }
 
-const HeaderTitleComponent = ({ appState, currentPage }: HeaderTitleProps) => {
+const HeaderTitleComponent = ({ appState }: HeaderTitleProps) => {
   const libraryHeaderTitle = useLibraryHeaderTitle();
 
   switch (appState) {
@@ -106,7 +104,7 @@ const HeaderTitleComponent = ({ appState, currentPage }: HeaderTitleProps) => {
         />
       );
     case EditorState.EDITOR:
-      return <EditorTitle key={appState} title={currentPage?.pageName || ""} />;
+      return <EditorTitle key={appState} />;
     case EditorState.SETTINGS:
       return (
         <IDEHeaderTitle
@@ -117,7 +115,7 @@ const HeaderTitleComponent = ({ appState, currentPage }: HeaderTitleProps) => {
     case EditorState.LIBRARIES:
       return <IDEHeaderTitle key={appState} title={libraryHeaderTitle} />;
     default:
-      return <EditorTitle key={appState} title={currentPage?.pageName || ""} />;
+      return <EditorTitle key={appState} />;
   }
 };
 
@@ -221,7 +219,7 @@ const Header = () => {
     <>
       <IDEHeader>
         <IDEHeader.Left logo={<AppsmithLink />}>
-          <HeaderTitleComponent appState={appState} currentPage={currentPage} />
+          <HeaderTitleComponent appState={appState} />
           <EditorSaveIndicator isSaving={isSaving} saveError={pageSaveError} />
         </IDEHeader.Left>
         <IDEHeader.Center>