layouts switched

apps/studio/components/layouts/SQLEditorLayout/SQLEditorLayout.tsx

@@ -5,32 +5,34 @@ import { EditorBaseLayout } from '../editors/editor-base-layout'
 import { SQLEditorMenu } from './SQLEditorMenu'
 
 export interface SQLEditorLayoutProps {
-  title: string
+  // title: string
   children: ReactNode
 }
 
-const SQLEditorLayout = ({ title, children }: SQLEditorLayoutProps) => {
+const SQLEditorLayout = ({ children }: SQLEditorLayoutProps) => {
   const [showOngoingQueries, setShowOngoingQueries] = useState(false)
 
   return (
-    <EditorBaseLayout
-      title={title || 'SQL'}
-      product="SQL Editor"
-      productMenu={
-        <SQLEditorMenu
-          key="sql-editor-menu"
-          onViewOngoingQueries={() => setShowOngoingQueries(true)}
-        />
-      }
-      isBlocking={false}
-      resizableSidebar
-    >
+    // <EditorBaseLayout
+    //   title={title || 'SQL'}
+    //   product="SQL Editor"
+    //   productMenu={
+    //     <SQLEditorMenu
+    //       key="sql-editor-menu"
+    //       onViewOngoingQueries={() => setShowOngoingQueries(true)}
+    //     />
+    //   }
+    //   isBlocking={false}
+    //   resizableSidebar
+    // >
+    <>
       {children}
       <OngoingQueriesPanel
         visible={showOngoingQueries}
         onClose={() => setShowOngoingQueries(false)}
       />
-    </EditorBaseLayout>
+    </>
+    // </EditorBaseLayout>
   )
 }
 

apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx

@@ -29,7 +29,7 @@ import {
 import { SQLEditorNav as SQLEditorNavV2 } from './SQLEditorNavV2/SQLEditorNav'
 
 interface SQLEditorMenuProps {
-  onViewOngoingQueries: () => void
+  onViewOngoingQueries?: () => void
 }
 
 export const SQLEditorMenu = ({ onViewOngoingQueries }: SQLEditorMenuProps) => {

apps/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx

@@ -21,18 +21,20 @@ const TableEditorLayout = ({ children }: PropsWithChildren<{}>) => {
   }
 
   return (
-    <EditorBaseLayout
-      product="Table Editor"
-      productMenu={<TableEditorMenu />}
-      isBlocking={false}
-      resizableSidebar
-    >
+    // <EditorBaseLayout
+    //   product="Table Editor"
+    //   productMenu={<TableEditorMenu />}
+    //   isBlocking={false}
+    //   resizableSidebar
+    // >
+    <>
       {children}
       <OngoingQueriesPanel
         visible={showOngoingQueries}
         onClose={() => setShowOngoingQueries(false)}
       />
-    </EditorBaseLayout>
+    </>
+    // </EditorBaseLayout>
   )
 }
 

apps/studio/components/layouts/editors/handle-editor-layouts.tsx

@@ -4,19 +4,22 @@ import dynamic from 'next/dynamic'
 import { JSXElementConstructor, ReactElement, Suspense } from 'react'
 import { ProjectContextFromParamsProvider } from '../ProjectLayout/ProjectContext'
 import { useEditorType } from './editors-layout.hooks'
+// import ExplorerLayout from '../explorer/layout'
+import TableEditorLayout from '../TableEditorLayout/TableEditorLayout'
+import SQLEditorLayout from '../SQLEditorLayout/SQLEditorLayout'
 
 // Dynamically import layouts to reduce initial bundle size
 // These are loaded only when needed
-const ExplorerLayout = dynamic(
-  () => import('../explorer/layout').then((mod) => mod.ExplorerLayout),
-  { ssr: false }
-)
-const TableEditorLayout = dynamic(() => import('../TableEditorLayout/TableEditorLayout'), {
-  ssr: false,
-})
-const SQLEditorLayout = dynamic(() => import('../SQLEditorLayout/SQLEditorLayout'), {
-  ssr: false,
-})
+// const ExplorerLayout = dynamic(
+//   () => import('../explorer/layout').then((mod) => mod.ExplorerLayout),
+//   { ssr: false }
+// )
+// const TableEditorLayout = dynamic(() => import('../TableEditorLayout/TableEditorLayout'), {
+//   ssr: false,
+// })
+// const SQLEditorLayout = dynamic(() => import('../SQLEditorLayout/SQLEditorLayout'), {
+//   ssr: false,
+// })
 
 /**
  * HandleEditorLayouts is responsible for rendering the appropriate layout based on:
@@ -37,16 +40,15 @@ export const HandleEditorLayouts = ({
   const projectExplorer = useFlag('projectExplorer')
 
   return (
-    <ProjectContextFromParamsProvider>
-      <Suspense fallback={null}>
-        {projectExplorer ? (
-          <ExplorerLayout>{children}</ExplorerLayout>
-        ) : editor === 'table' ? (
-          <TableEditorLayout>{children}</TableEditorLayout>
-        ) : (
-          <SQLEditorLayout title="SQL Editor">{children}</SQLEditorLayout>
-        )}
-      </Suspense>
-    </ProjectContextFromParamsProvider>
+    <>
+      {projectExplorer ? (
+        <> </>
+      ) : // <ExplorerLayout>{children}</ExplorerLayout>
+      editor === 'table' ? (
+        <TableEditorLayout>{children}</TableEditorLayout>
+      ) : (
+        <SQLEditorLayout title="SQL Editor">{children}</SQLEditorLayout>
+      )}
+    </>
   )
 }

apps/studio/components/layouts/tabs/explorer-tabs.tsx

@@ -1,39 +1,24 @@
 import { DndContext, DragEndEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
 import { horizontalListSortingStrategy, SortableContext, useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
+import { TabIcon } from 'components/explorer/tabs/TabIcon'
 import { AnimatePresence, motion } from 'framer-motion'
-import { useActionKey } from 'hooks/useActionKey'
-import {
-  CirclePlus,
-  Eye,
-  PanelLeftClose,
-  PanelLeftOpen,
-  Plus,
-  Table2,
-  Workflow,
-  X,
-} from 'lucide-react'
+import { Plus, X } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
-import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
 import {
   getTabsStore,
-  makeTabPermanent,
-  openNewContentTab,
-  removeTab,
-  type Tab,
-  type TabType,
-  handleTabNavigation,
   handleTabClose,
   handleTabDragEnd,
+  handleTabNavigation,
+  makeTabPermanent,
+  type Tab,
 } from 'state/tabs'
-import { cn, SQL_ICON, Tabs_Shadcn_, TabsList_Shadcn_, TabsTrigger_Shadcn_ } from 'ui'
+import { cn, Tabs_Shadcn_, TabsList_Shadcn_, TabsTrigger_Shadcn_ } from 'ui'
 import { useSnapshot } from 'valtio'
-import { sidebarState } from './sidebar-state'
-import { TabIcon } from 'components/explorer/tabs/TabIcon'
-import { CollapseButton } from './collapse-button'
 import { useEditorType } from '../editors/editors-layout.hooks'
-import { useFlag } from 'hooks/ui/useFlag'
+import { CollapseButton } from './collapse-button'
+import { sidebarState } from './sidebar-state'
 
 interface TabsProps {
   storeKey: string
@@ -53,13 +38,11 @@ const SortableTab = ({
   index,
   openTabs,
   onClose,
-  storeKey,
 }: {
   tab: Tab
   index: number
   openTabs: Tab[]
   onClose: (id: string) => void
-  storeKey: string
 }) => {
   const router = useRouter()
   const currentSchema = (router.query.schema as string) || 'public'
@@ -89,9 +72,6 @@ const SortableTab = ({
     return false
   }, [openTabs, currentSchema, tab.type])
 
-  // Create a motion version of TabsTrigger while preserving all functionality
-  const MotionTabsTrigger = motion(TabsTrigger_Shadcn_)
-
   return (
     <div ref={setNodeRef} style={style} {...attributes} className="flex items-center h-10">
       <TabsTrigger_Shadcn_
@@ -139,16 +119,13 @@ const SortableTab = ({
         </span>
         <div className="absolute w-full -bottom-[1px] left-0 right-0 h-px bg-dash-sidebar dark:bg-surface-100 opacity-0 group-data-[state=active]:opacity-100" />
       </TabsTrigger_Shadcn_>
-      {index < openTabs.length && (
-        <div role="separator" className="h-full w-px bg-border" key={`separator-${tab.id}`} />
-      )}
+      {/* {index < openTabs.length - 1 && <div role="separator" className="h-full w-px bg-border" />} */}
     </div>
   )
 }
 
-export function ExplorerTabs({ storeKey, onClose }: TabsProps) {
+export function ExplorerTabs({ onClose }: TabsProps) {
   const editor = useEditorType()
-  const projectExplorer = useFlag('projectExplorer')
   const router = useRouter()
   const store = getTabsStore()
   const tabs = useSnapshot(store)
@@ -164,8 +141,6 @@ export function ExplorerTabs({ storeKey, onClose }: TabsProps) {
     return tab.type === editor
   })
 
-  const newTab = openTabs.find((tab) => tab.type === 'new')
-
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event
     if (!over || active.id === over.id) return
@@ -207,11 +182,10 @@ export function ExplorerTabs({ storeKey, onClose }: TabsProps) {
             {regularTabs.map((tab, index) => (
               <SortableTab
                 key={tab.id}
-                tab={tab}
                 index={index}
+                tab={tab}
                 openTabs={openTabs}
                 onClose={() => handleClose(tab.id)}
-                storeKey={storeKey}
               />
             ))}
           </SortableContext>

apps/studio/pages/project/[ref]/editor/[id].tsx

@@ -1,11 +1,14 @@
 import { useParams } from 'common/hooks'
 import { TableGridEditor } from 'components/interfaces/TableGridEditor'
 import DeleteConfirmationDialogs from 'components/interfaces/TableGridEditor/DeleteConfirmationDialogs'
+import { EditorBaseLayout } from 'components/layouts/editors/editor-base-layout'
 import { HandleEditorLayouts } from 'components/layouts/editors/handle-editor-layouts'
 import {
   ProjectContextFromParamsProvider,
   useProjectContext,
 } from 'components/layouts/ProjectLayout/ProjectContext'
+import TableEditorLayout from 'components/layouts/TableEditorLayout/TableEditorLayout'
+import TableEditorMenu from 'components/layouts/TableEditorLayout/TableEditorMenu'
 import { useTableEditorQuery } from 'data/table-editor/table-editor-query'
 import { useTheme } from 'next-themes'
 import { useRouter } from 'next/router'
@@ -19,6 +22,7 @@ const TableEditorPage: NextPageWithLayout = () => {
   const { id: _id, ref: projectRef } = useParams()
   const id = _id ? Number(_id) : undefined
   const store = getTabsStore()
+
   const { project } = useProjectContext()
   const { data: selectedTable, isLoading } = useTableEditorQuery({
     projectRef: project?.ref,
@@ -78,7 +82,9 @@ const TableEditorPage: NextPageWithLayout = () => {
 
 TableEditorPage.getLayout = (page) => (
   <ProjectContextFromParamsProvider>
-    <HandleEditorLayouts>{page}</HandleEditorLayouts>
+    <EditorBaseLayout productMenu={<TableEditorMenu />}>
+      <TableEditorLayout>{page}</TableEditorLayout>
+    </EditorBaseLayout>
   </ProjectContextFromParamsProvider>
 )
 

apps/studio/pages/project/[ref]/editor/index.tsx

@@ -1,8 +1,11 @@
 import { useParams } from 'common'
 import EmptyState from 'components/interfaces/TableGridEditor/EmptyState'
 import SidePanelEditor from 'components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor'
+import { EditorBaseLayout } from 'components/layouts/editors/editor-base-layout'
 import { HandleEditorLayouts } from 'components/layouts/editors/handle-editor-layouts'
 import { ProjectContextFromParamsProvider } from 'components/layouts/ProjectLayout/ProjectContext'
+import TableEditorLayout from 'components/layouts/TableEditorLayout/TableEditorLayout'
+import TableEditorMenu from 'components/layouts/TableEditorLayout/TableEditorMenu'
 import { NewTab } from 'components/layouts/tabs/new-tab'
 import { useRouter } from 'next/router'
 import { getTabsStore } from 'state/tabs'
@@ -36,7 +39,9 @@ const TableEditorPage: NextPageWithLayout = () => {
 
 TableEditorPage.getLayout = (page) => (
   <ProjectContextFromParamsProvider>
-    <HandleEditorLayouts>{page}</HandleEditorLayouts>
+    <EditorBaseLayout productMenu={<TableEditorMenu />}>
+      <TableEditorLayout>{page}</TableEditorLayout>
+    </EditorBaseLayout>
   </ProjectContextFromParamsProvider>
 )
 

apps/studio/pages/project/[ref]/sql/[id].tsx

@@ -1,12 +1,15 @@
 import { useMonaco } from '@monaco-editor/react'
 import { useParams } from 'common/hooks/useParams'
 import SQLEditor from 'components/interfaces/SQLEditor/SQLEditor'
+import { EditorBaseLayout } from 'components/layouts/editors/editor-base-layout'
 import { HandleEditorLayouts } from 'components/layouts/editors/handle-editor-layouts'
-import { ExplorerLayout } from 'components/layouts/explorer/layout'
+
 import {
   ProjectContextFromParamsProvider,
   useProjectContext,
 } from 'components/layouts/ProjectLayout/ProjectContext'
+import SQLEditorLayout from 'components/layouts/SQLEditorLayout/SQLEditorLayout'
+import { SQLEditorMenu } from 'components/layouts/SQLEditorLayout/SQLEditorMenu'
 import getPgsqlCompletionProvider from 'components/ui/CodeEditor/Providers/PgSQLCompletionProvider'
 import getPgsqlSignatureHelpProvider from 'components/ui/CodeEditor/Providers/PgSQLSignatureHelpProvider'
 import { useContentIdQuery } from 'data/content/content-id-query'
@@ -27,7 +30,7 @@ import type { NextPageWithLayout } from 'types'
 const SqlEditor: NextPageWithLayout = () => {
   const router = useRouter()
   const monaco = useMonaco()
-  const { id, ref, content } = useParams()
+  const { id, ref } = useParams()
 
   const { project } = useProjectContext()
   const appSnap = useAppStateSnapshot()
@@ -191,7 +194,9 @@ const SqlEditor: NextPageWithLayout = () => {
 
 SqlEditor.getLayout = (page) => (
   <ProjectContextFromParamsProvider>
-    <HandleEditorLayouts>{page}</HandleEditorLayouts>
+    <EditorBaseLayout productMenu={<SQLEditorMenu />}>
+      <SQLEditorLayout>{page}</SQLEditorLayout>
+    </EditorBaseLayout>
   </ProjectContextFromParamsProvider>
 )
 

apps/studio/pages/project/[ref]/sql/index.tsx

@@ -1,6 +1,9 @@
 import { useParams } from 'common'
+import { EditorBaseLayout } from 'components/layouts/editors/editor-base-layout'
 import { HandleEditorLayouts } from 'components/layouts/editors/handle-editor-layouts'
 import { ProjectContextFromParamsProvider } from 'components/layouts/ProjectLayout/ProjectContext'
+import SQLEditorLayout from 'components/layouts/SQLEditorLayout/SQLEditorLayout'
+import { SQLEditorMenu } from 'components/layouts/SQLEditorLayout/SQLEditorMenu'
 import { NewTab } from 'components/layouts/tabs/new-tab'
 import { useRouter } from 'next/router'
 import { getTabsStore } from 'state/tabs'
@@ -31,7 +34,9 @@ const TableEditorPage: NextPageWithLayout = () => {
 
 TableEditorPage.getLayout = (page) => (
   <ProjectContextFromParamsProvider>
-    <HandleEditorLayouts>{page}</HandleEditorLayouts>
+    <EditorBaseLayout productMenu={<SQLEditorMenu />}>
+      <SQLEditorLayout>{page}</SQLEditorLayout>
+    </EditorBaseLayout>
   </ProjectContextFromParamsProvider>
 )
 

apps/studio/state/tabs.ts

@@ -223,7 +223,10 @@ export const handleTabClose = (
     tabsStore.openTabs = [...currentTabs.map((tab) => tab.id).filter((id) => id !== currentTab.id)]
   }
 
-  if (!nextTabId) {
+  if (nextTabId) {
+    tabsStore.activeTab = nextTabId
+    handleTabNavigation(nextTabId, router)
+  } else {
     // If no tabs of same type, go to the home of the current section
     switch (currentTab.type) {
       case 'sql':
@@ -237,11 +240,6 @@ export const handleTabClose = (
     }
   }
 
-  if (nextTabId) {
-    tabsStore.activeTab = nextTabId
-    handleTabNavigation(nextTabId, router)
-  }
-
   onClose?.(id)
 }