feat: Overflow tabs list view

app/client/src/IDE/Components/FileTab.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import styled from "styled-components";
+import clsx from "classnames";
+
+import { Flex, Icon } from "design-system";
+
+interface FileTabProps {
+  isActive: boolean;
+  title: string;
+  onClick: () => void;
+  onClose: (e: React.MouseEvent) => void;
+  icon?: React.ReactNode;
+}
+
+export const StyledTab = styled(Flex)`
+  position: relative;
+  height: 100%;
+  font-size: 12px;
+  color: var(--ads-v2-colors-text-default);
+  cursor: pointer;
+  gap: var(--ads-v2-spaces-2);
+  border-top: 1px solid transparent;
+  border-top-left-radius: var(--ads-v2-border-radius);
+  border-top-right-radius: var(--ads-v2-border-radius);
+  align-items: center;
+  justify-content: center;
+  padding: var(--ads-v2-spaces-3);
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+  border-top: 2px solid transparent;
+
+  &.active {
+    background: var(--ads-v2-colors-control-field-default-bg);
+    border-top-color: var(--ads-v2-color-bg-brand);
+    border-left-color: var(--ads-v2-color-border-muted);
+    border-right-color: var(--ads-v2-color-border-muted);
+  }
+
+  & > .tab-close {
+    position: relative;
+    right: -2px;
+    visibility: hidden;
+  }
+
+  &:hover > .tab-close {
+    visibility: visible;
+  }
+
+  &.active > .tab-close {
+    visibility: visible;
+  }
+`;
+
+export const TabTextContainer = styled.span`
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+
+export const TabIconContainer = styled.div`
+  height: 12px;
+  width: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  img {
+    width: 12px;
+  }
+`;
+
+export const FileTab = ({
+  icon,
+  isActive,
+  onClick,
+  onClose,
+  title,
+}: FileTabProps) => {
+  return (
+    <StyledTab
+      className={clsx("editor-tab", isActive && "active")}
+      data-testid={`t--ide-tab-${title}`}
+      onClick={onClick}
+    >
+      {icon ? <TabIconContainer>{icon}</TabIconContainer> : null}
+      <TabTextContainer>{title}</TabTextContainer>
+      {/* not using button component because of the size not matching design */}
+      <Icon
+        className="tab-close rounded-[4px] hover:bg-[var(--ads-v2-colors-action-tertiary-surface-hover-bg)] cursor-pointer p-[2px]"
+        data-testid="t--tab-close-btn"
+        name="close-line"
+        onClick={onClose}
+      />
+    </StyledTab>
+  );
+};

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,23 @@ 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"
       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/EditorPane/JS/List.tsx

@@ -51,6 +51,7 @@ const ListJSObjects = () => {
   return (
     <JSContainer
       className="ide-editor-left-pane__content-js"
+      flex="1"
       flexDirection="column"
       gap="spaces-3"
       overflow="hidden"

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

@@ -1,36 +1,67 @@
-import React from "react";
+import type { Ref } from "react";
+import React, { forwardRef } from "react";
 import { Flex, Spinner, Button } from "design-system";
 import { useCurrentEditorState, useIDETabClickHandlers } from "../hooks";
 import { useIsJSAddLoading } from "@appsmith/pages/Editor/IDE/EditorPane/JS/hooks";
-import { EditorEntityTabState } from "@appsmith/entities/IDE/constants";
+import {
+  EditorEntityTab,
+  EditorEntityTabState,
+} from "@appsmith/entities/IDE/constants";
+import { FileTab } from "IDE/Components/FileTab";
 
-const AddButton = () => {
-  const { addClickHandler } = useIDETabClickHandlers();
-  const isJSLoading = useIsJSAddLoading();
-  const { segmentMode } = useCurrentEditorState();
+const AddButton = forwardRef(
+  (
+    {
+      newTabClickCallback,
+      onClose,
+    }: {
+      newTabClickCallback: () => void;
+      onClose: (actionId?: string) => void;
+    },
+    ref: Ref<HTMLDivElement>,
+  ) => {
+    const { addClickHandler } = useIDETabClickHandlers();
+    const isJSLoading = useIsJSAddLoading();
+    const { segment, segmentMode } = useCurrentEditorState();
 
-  if (segmentMode === EditorEntityTabState.Add) {
-    return null;
-  }
-  if (isJSLoading) {
-    return (
-      <Flex px="spaces-2">
-        <Spinner size="md" />
-      </Flex>
+    if (isJSLoading) {
+      return (
+        <Flex px="spaces-2">
+          <Spinner size="md" />
+        </Flex>
+      );
+    }
+
+    const onCloseClick = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onClose();
+    };
+
+    return segmentMode === EditorEntityTabState.Add ? (
+      <FileTab
+        isActive={segmentMode === EditorEntityTabState.Add}
+        onClick={newTabClickCallback}
+        onClose={(e) => onCloseClick(e)}
+        title={`New ${segment === EditorEntityTab.JS ? "JS" : "Query"}`}
+      />
+    ) : (
+      <div
+        className="bg-white sticky right-0 flex items-center h-[32px] border-b border-b-[var(--ads-v2-color-border-muted)] pl-[var(--ads-v2-spaces-2)]"
+        ref={ref}
+      >
+        <Button
+          className="!min-w-[24px]"
+          data-testid="t--ide-tabs-add-button"
+          id="tabs-add-toggle"
+          isIconButton
+          kind="tertiary"
+          onClick={addClickHandler}
+          size="sm"
+          startIcon="add-line"
+        />
+      </div>
     );
-  }
-  return (
-    <Button
-      className="!min-w-[24px]"
-      data-testid="t--ide-tabs-add-button"
-      id="tabs-add-toggle"
-      isIconButton
-      kind="tertiary"
-      onClick={addClickHandler}
-      size="sm"
-      startIcon="add-line"
-    />
-  );
-};
+  },
+);
 
 export { AddButton };

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

@@ -9,6 +9,7 @@ const Container = (props: { children: ReactNode }) => {
       backgroundColor="#FFFFFF"
       borderBottom="1px solid var(--ads-v2-color-border-muted)"
       gap="spaces-2"
+      id="ide-tabs-container"
       maxHeight="32px"
       minHeight="32px"
       px="spaces-2"

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}