feat: Overflow tabs list view

app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx

@@ -38,6 +38,7 @@ import { Tag, type ListItemProps } from "design-system";
 import { useCurrentEditorState } from "pages/Editor/IDE/hooks";
 import CurlImportEditor from "pages/Editor/APIEditor/CurlImportEditor";
 import { createAddClassName } from "pages/Editor/IDE/EditorPane/utils";
+import { QueriesBlankState } from "pages/Editor/QueryEditor/QueriesBlankState";
 
 export const useQueryAdd = () => {
   const location = useLocation();
@@ -161,7 +162,7 @@ export const useQuerySegmentRoutes = (path: string): UseRoutes => {
       },
       {
         key: "QueryEmpty",
-        component: ListQuery,
+        component: QueriesBlankState,
         exact: true,
         path: [path],
       },

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

@@ -6,7 +6,7 @@ import QueriesSegment from "./Query";
 import WidgetsSegment from "./UI";
 import JSSegment from "./JS";
 import SegmentedHeader from "./components/SegmentedHeader";
-import EditorTabs from "../EditorTabs/SplitScreenTabs";
+import EditorTabs from "../EditorTabs";
 import {
   jsSegmentRoutes,
   querySegmentRoutes,
@@ -17,19 +17,24 @@ import {
   BUILDER_PATH,
   BUILDER_PATH_DEPRECATED,
 } from "@appsmith/constants/routes/appRoutes";
+import { useSelector } from "react-redux";
+import { getIDEViewMode } from "selectors/ideSelectors";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
 
 const EditorPaneSegments = () => {
   const { path } = useRouteMatch();
+  const ideViewMode = useSelector(getIDEViewMode);
 
   return (
     <Flex
+      className="relative"
       flexDirection="column"
-      gap="spacing-2"
+      gap="spaces-2"
       height="100%"
       overflow="hidden"
     >
       <SegmentedHeader />
-      <EditorTabs />
+      {ideViewMode === EditorViewMode.SplitScreen ? <EditorTabs /> : null}
       <Flex
         className="ide-editor-left-pane__content"
         flexDirection="column"

app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.test.tsx

@@ -18,6 +18,7 @@ describe("FileTabs", () => {
   it("renders tabs correctly", () => {
     const { getByTestId, getByText } = render(
       <FileTabs
+        currentTab={mockTabs[0].key}
         navigateToTab={mockNavigateToTab}
         onClose={mockOnClose}
         tabs={mockTabs}
@@ -40,6 +41,7 @@ describe("FileTabs", () => {
   it("check tab click", () => {
     const { getByTestId } = render(
       <FileTabs
+        currentTab={mockTabs[0].key}
         navigateToTab={mockNavigateToTab}
         onClose={mockOnClose}
         tabs={mockTabs}
@@ -54,6 +56,7 @@ describe("FileTabs", () => {
   it("check for close click", () => {
     const { getByTestId } = render(
       <FileTabs
+        currentTab={mockTabs[1].key}
         navigateToTab={mockNavigateToTab}
         onClose={mockOnClose}
         tabs={mockTabs}

app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect } from "react";
-import { useLocation } from "react-router";
 import clsx from "classnames";
 import { Flex, Icon, ScrollArea } from "design-system";
 
@@ -13,25 +12,23 @@ import {
   TabIconContainer,
   TabTextContainer,
 } from "./StyledComponents";
-import { identifyEntityFromPath } from "navigation/FocusEntity";
 import { useCurrentEditorState } from "../hooks";
 
 interface Props {
   tabs: EntityItem[];
   navigateToTab: (tab: EntityItem) => void;
   onClose: (actionId?: string) => void;
+  currentTab: string;
+  newTabClickCallback?: () => void;
 }
 
 const FILE_TABS_CONTAINER_ID = "file-tabs-container";
 
 const FileTabs = (props: Props) => {
-  const { navigateToTab, onClose, tabs } = props;
+  const { currentTab, navigateToTab, newTabClickCallback, onClose, tabs } =
+    props;
   const { segment, segmentMode } = useCurrentEditorState();
 
-  const location = useLocation();
-
-  const currentEntity = identifyEntityFromPath(location.pathname);
-
   useEffect(() => {
     const activetab = document.querySelector(".editor-tab.active");
     if (activetab) {
@@ -70,10 +67,7 @@ const FileTabs = (props: Props) => {
       <Flex gap="spaces-2" height="100%" id={FILE_TABS_CONTAINER_ID}>
         {tabs.map((tab: EntityItem) => (
           <StyledTab
-            className={clsx(
-              "editor-tab",
-              currentEntity.id === tab.key && "active",
-            )}
+            className={clsx("editor-tab", currentTab === tab.key && "active")}
             data-testid={`t--ide-tab-${tab.title}`}
             key={tab.key}
             onClick={() => navigateToTab(tab)}
@@ -92,8 +86,9 @@ const FileTabs = (props: Props) => {
         {/* New Tab */}
         {segmentMode === EditorEntityTabState.Add ? (
           <StyledTab
-            className={clsx("editor-tab", "active")}
+            className={clsx("editor-tab", currentTab === "add" && "active")}
             data-testid={`t--ide-tab-new`}
+            onClick={newTabClickCallback}
           >
             <TabTextContainer>
               New {segment === EditorEntityTab.JS ? "JS" : "Query"}