chore: Moving navigation header to Explorer templates in ADS

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

@@ -0,0 +1,43 @@
+import React from "react";
+import styled from "styled-components";
+import {
+  SegmentedControl,
+  type SegmentedControlOption,
+} from "../../../SegmentedControl";
+import { Flex } from "../../../Flex";
+
+interface Props {
+  selectedSegment: string;
+  onSegmentChange: (value: string) => void;
+  options: SegmentedControlOption[];
+  children?: React.ReactNode | React.ReactNode[];
+}
+
+const Container = styled(Flex)`
+  #editor-pane-segment-control {
+    max-width: 247px;
+  }
+`;
+
+export const EditorSegments = (props: Props) => {
+  const { children, onSegmentChange, options, selectedSegment } = props;
+
+  return (
+    <Container
+      alignItems="center"
+      backgroundColor="var(--ads-v2-colors-control-track-default-bg)"
+      className="ide-editor-left-pane__header"
+      gap="spaces-2"
+      justifyContent="space-between"
+      padding="spaces-2"
+    >
+      <SegmentedControl
+        id="editor-pane-segment-control"
+        onChange={onSegmentChange}
+        options={options}
+        value={selectedSegment}
+      />
+      {children}
+    </Container>
+  );
+};

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

@@ -0,0 +1 @@
+export { EditorSegments } from "./EditorSegments";

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

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

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

@@ -15,7 +15,7 @@ import {
   BUILDER_PATH,
   BUILDER_PATH_DEPRECATED,
 } from "ee/constants/routes/appRoutes";
-import SegmentedHeader from "./components/SegmentedHeader";
+import SegmentSwitcher from "./components/SegmentSwitcher";
 import { useSelector } from "react-redux";
 import { getIDEViewMode } from "selectors/ideSelectors";
 import { EditorViewMode } from "ee/entities/IDE/constants";
@@ -41,7 +41,7 @@ const EditorPaneExplorer = () => {
           : "100%"
       }
     >
-      <SegmentedHeader />
+      <SegmentSwitcher />
       <Switch>
         <SentryRoute
           component={JSExplorer}

app/client/src/pages/Editor/IDE/EditorPane/components/SegmentSwitcher.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { createMessage, EDITOR_PANE_TEXTS } from "ee/constants/messages";
+import { EditorEntityTab } from "ee/entities/IDE/constants";
+import { useCurrentEditorState, useSegmentNavigation } from "../../hooks";
+import { EditorSegments } from "@appsmith/ads";
+
+const SegmentSwitcher = () => {
+  const { segment } = useCurrentEditorState();
+  const { onSegmentChange } = useSegmentNavigation();
+
+  return (
+    <EditorSegments
+      onSegmentChange={onSegmentChange}
+      options={[
+        {
+          label: createMessage(EDITOR_PANE_TEXTS.queries_tab),
+          value: EditorEntityTab.QUERIES,
+        },
+        {
+          label: createMessage(EDITOR_PANE_TEXTS.js_tab),
+          value: EditorEntityTab.JS,
+        },
+        {
+          label: createMessage(EDITOR_PANE_TEXTS.ui_tab),
+          value: EditorEntityTab.UI,
+        },
+      ]}
+      selectedSegment={segment}
+    />
+  );
+};
+
+export default SegmentSwitcher;