Shift old Connect files to new Connect folder outside of Home

apps/studio/components/interfaces/Connect/Connect.constants.ts

@@ -1,6 +1,6 @@
 import { CodeBlockLang } from 'ui'
 
-export type ConnectionType =
+export type DatabaseConnectionType =
   | 'uri'
   | 'psql'
   | 'golang'
@@ -11,8 +11,8 @@ export type ConnectionType =
   | 'python'
   | 'sqlalchemy'
 
-export const CONNECTION_TYPES: {
-  id: ConnectionType
+export const DATABASE_CONNECTION_TYPES: {
+  id: DatabaseConnectionType
   label: string
   contentType: 'input' | 'code'
   lang: CodeBlockLang
@@ -57,3 +57,294 @@ export const CONNECTION_PARAMETERS = {
     description: 'Connection pooling behavior',
   },
 } as const
+
+export type ConnectionType = {
+  key: string
+  icon: string
+  label: string
+  guideLink?: string
+  children: ConnectionType[]
+}
+
+export const FRAMEWORKS: ConnectionType[] = [
+  {
+    key: 'nextjs',
+    label: 'Next.js',
+    icon: 'nextjs',
+    guideLink: 'https://supabase.com/docs/guides/getting-started/quickstarts/nextjs',
+    children: [
+      {
+        key: 'app',
+        label: 'App Router',
+        icon: '',
+        children: [
+          {
+            key: 'supabasejs',
+            label: 'supabase-js',
+            icon: 'supabase',
+            children: [],
+          },
+        ],
+      },
+      {
+        key: 'pages',
+        label: 'Pages Router',
+        icon: '',
+        children: [
+          {
+            key: 'supabasejs',
+            label: 'Supabase-js',
+            children: [],
+            icon: 'supabase',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    key: 'remix',
+    label: 'Remix',
+    icon: 'remix',
+    guideLink:
+      'https://supabase.com/docs/guides/auth/server-side/creating-a-client?framework=remix&environment=remix-loader',
+    children: [
+      {
+        key: 'supabasejs',
+        label: 'Supabase-js',
+        children: [],
+        icon: 'supabase',
+      },
+    ],
+  },
+  {
+    key: 'react',
+    label: 'React',
+    icon: 'react',
+    guideLink: 'https://supabase.com/docs/guides/getting-started/quickstarts/reactjs',
+    children: [
+      {
+        key: 'create-react-app',
+        label: 'Create React App',
+        icon: 'react',
+        children: [
+          {
+            key: 'supabasejs',
+            label: 'supabase-js',
+            icon: 'supabase',
+            children: [],
+          },
+        ],
+      },
+      {
+        key: 'vite',
+        label: 'Vite',
+        icon: 'vite',
+        children: [
+          {
+            key: 'supabasejs',
+            label: 'Supabase-js',
+            children: [],
+            icon: 'supabase',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    key: 'nuxt',
+    label: 'Nuxt',
+    icon: 'nuxt',
+    guideLink: 'https://supabase.com/docs/guides/getting-started/quickstarts/nuxtjs',
+    children: [
+      {
+        key: 'supabasejs',
+        label: 'Supabase-js',
+        children: [],
+        icon: 'supabase',
+      },
+    ],
+  },
+  {
+    key: 'vuejs',
+    label: 'Vue.JS',
+    icon: 'vuejs',
+    guideLink: 'https://supabase.com/docs/guides/getting-started/quickstarts/vue',
+    children: [
+      {
+        key: 'supabasejs',
+        label: 'Supabase-js',
+        children: [],
+        icon: 'supabase',
+      },
+    ],
+  },
+
+  {
+    key: 'sveltekit',
+    label: 'SvelteKit',
+    icon: 'sveltekit',
+    guideLink: 'https://supabase.com/docs/guides/getting-started/quickstarts/sveltekit',
+    children: [
+      {
+        key: 'supabasejs',
+        label: 'Supabase-js',
+        children: [],
+        icon: 'supabase',
+      },
+    ],
+  },
+  {
+    key: 'solidjs',
+    label: 'Solid.js',
+    icon: 'solidjs',
+    guideLink: 'https://supabase.com/docs/guides/getting-started/quickstarts/solidjs',
+    children: [
+      {
+        key: 'supabasejs',
+        label: 'Supabase-js',
+        children: [],
+        icon: 'supabase',
+      },
+    ],
+  },
+  {
+    key: 'astro',
+    label: 'Astro',
+    icon: 'astro',
+    guideLink: 'https://docs.astro.build/en/guides/backend/supabase/',
+    children: [
+      {
+        key: 'supabasejs',
+        label: 'Supabase-js',
+        children: [],
+        icon: 'supabase',
+      },
+    ],
+  },
+  {
+    key: 'refine',
+    label: 'refine',
+    icon: 'refine',
+    guideLink: 'https://supabase.com/docs/guides/getting-started/quickstarts/refine',
+    children: [
+      {
+        key: 'supabasejs',
+        label: 'Supabase-js',
+        children: [],
+        icon: 'supabase',
+      },
+    ],
+  },
+]
+
+export const MOBILES: ConnectionType[] = [
+  {
+    key: 'exporeactnative',
+    label: 'Expo React Native',
+    icon: 'expo',
+    guideLink: 'https://supabase.com/docs/guides/getting-started/tutorials/with-expo-react-native',
+    children: [
+      {
+        key: 'supabasejs',
+        label: 'Supabase-js',
+        children: [],
+        icon: 'supabase',
+      },
+    ],
+  },
+  {
+    key: 'flutter',
+    label: 'Flutter',
+    icon: 'flutter',
+    guideLink: 'https://supabase.com/docs/guides/getting-started/tutorials/with-flutter',
+    children: [
+      {
+        key: 'supabaseflutter',
+        label: 'supabase-flutter',
+        children: [],
+        icon: 'supabase',
+      },
+    ],
+  },
+  {
+    key: 'ionicreact',
+    label: 'Ionic React',
+    icon: 'react',
+    guideLink: 'https://supabase.com/docs/guides/getting-started/tutorials/with-ionic-react',
+    children: [
+      {
+        key: 'supabasejs',
+        label: 'Supabase-js',
+        children: [],
+        icon: 'supabase',
+      },
+    ],
+  },
+  {
+    key: 'swift',
+    label: 'Swift',
+    icon: 'swift',
+    guideLink: 'https://supabase.com/docs/guides/getting-started/tutorials/with-swift',
+    children: [
+      {
+        key: 'supabaseswift',
+        label: 'supabase-swift',
+        children: [],
+        icon: 'supabase',
+      },
+    ],
+  },
+  {
+    key: 'androidkotlin',
+    label: 'Android Kotlin',
+    icon: 'kotlin',
+    guideLink: 'https://supabase.com/docs/guides/getting-started/tutorials/with-kotlin',
+    children: [
+      {
+        key: 'supabasekt',
+        label: 'supabase-kt',
+        children: [],
+        icon: 'supabase',
+      },
+    ],
+  },
+  {
+    key: 'ionicangular',
+    label: 'Ionic Angular',
+    icon: 'ionic-angular',
+    guideLink: 'https://supabase.com/docs/guides/getting-started/tutorials/with-ionic-angular',
+    children: [
+      {
+        key: 'supabasejs',
+        label: 'Supabase-js',
+        children: [],
+        icon: 'supabase',
+      },
+    ],
+  },
+]
+
+export const ORMS: ConnectionType[] = [
+  {
+    key: 'prisma',
+    label: 'Prisma',
+    icon: 'prisma',
+    guideLink: 'https://supabase.com/partners/integrations/prisma',
+    children: [],
+  },
+  {
+    key: 'drizzle',
+    label: 'Drizzle',
+    icon: 'drizzle',
+    guideLink:
+      'https://supabase.com/docs/guides/database/connecting-to-postgres#connecting-with-drizzle',
+    children: [],
+  },
+]
+
+export const CONNECTION_TYPES = [
+  { key: 'direct', label: 'Connection String', obj: [] },
+  { key: 'frameworks', label: 'App Frameworks', obj: FRAMEWORKS },
+  { key: 'mobiles', label: 'Mobile Frameworks', obj: MOBILES },
+  { key: 'orms', label: 'ORMs', obj: ORMS },
+]

apps/studio/components/interfaces/Connect/Connect.tsx

@@ -9,10 +9,10 @@ import { DatabaseConnectionString as OldDatabaseConnectionString } from 'compone
 import Panel from 'components/ui/Panel'
 import { getAPIKeys, useProjectSettingsV2Query } from 'data/config/project-settings-v2-query'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { useFlag } from 'hooks/ui/useFlag'
 import {
   Button,
   DIALOG_PADDING_X,
-  DIALOG_PADDING_X_SMALL,
   DIALOG_PADDING_Y,
   Dialog,
   DialogContent,
@@ -30,7 +30,6 @@ import { CONNECTION_TYPES, ConnectionType, FRAMEWORKS, MOBILES, ORMS } from './C
 import { getContentFilePath } from './Connect.utils'
 import ConnectDropdown from './ConnectDropdown'
 import ConnectTabContent from './ConnectTabContent'
-import { useFlag } from 'hooks/ui/useFlag'
 
 const Connect = () => {
   const connectDialogUpdate = useFlag('connectDialogUpdate')

apps/studio/components/interfaces/Connect/ConnectDropdown.tsx

@@ -0,0 +1,98 @@
+import { Box, Check, ChevronDown } from 'lucide-react'
+import { useState } from 'react'
+
+import {
+  Button,
+  CommandEmpty_Shadcn_,
+  CommandGroup_Shadcn_,
+  CommandInput_Shadcn_,
+  CommandItem_Shadcn_,
+  CommandList_Shadcn_,
+  Command_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
+  Popover_Shadcn_,
+  cn,
+} from 'ui'
+import { ConnectionIcon } from './ConnectionIcon'
+
+interface ConnectDropdownProps {
+  state: string
+  updateState: (state: string) => void
+  label: string
+  items: any[]
+}
+
+const ConnectDropdown = ({
+  state,
+  updateState,
+  label,
+
+  items,
+}: ConnectDropdownProps) => {
+  const [open, setOpen] = useState(false)
+
+  function onSelectLib(key: string) {
+    updateState(key)
+    setOpen(false)
+  }
+
+  const selectedItem = items.find((item) => item.key === state)
+
+  return (
+    <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
+      <div className="flex ">
+        <span className="flex items-center text-foreground-lighter px-3 rounded-lg rounded-r-none text-xs border border-button border-r-0">
+          {label}
+        </span>
+        <PopoverTrigger_Shadcn_ asChild>
+          <Button
+            size="small"
+            type="default"
+            className="gap-0 rounded-l-none"
+            iconRight={<ChevronDown strokeWidth={1.5} />}
+          >
+            <div className="flex items-center gap-2">
+              {selectedItem?.icon ? (
+                <ConnectionIcon connection={selectedItem.icon} />
+              ) : (
+                <Box size={12} />
+              )}
+              {selectedItem?.label}
+            </div>
+          </Button>
+        </PopoverTrigger_Shadcn_>
+      </div>
+      <PopoverContent_Shadcn_ className="p-0 max-w-48" side="bottom" align="start">
+        <Command_Shadcn_>
+          <CommandInput_Shadcn_ placeholder="Search..." />
+          <CommandList_Shadcn_>
+            <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
+            <CommandGroup_Shadcn_>
+              {items.map((item) => (
+                <CommandItem_Shadcn_
+                  key={item.key}
+                  value={item.key}
+                  onSelect={() => {
+                    onSelectLib(item.key)
+                    setOpen(false)
+                  }}
+                  className="flex gap-2 items-center"
+                >
+                  {item.icon ? <ConnectionIcon connection={item.icon} /> : <Box size={12} />}
+                  {item.label}
+                  <Check
+                    size={15}
+                    className={cn('ml-auto  ', item.key === state ? 'opacity-100' : 'opacity-0')}
+                  />
+                </CommandItem_Shadcn_>
+              ))}
+            </CommandGroup_Shadcn_>
+          </CommandList_Shadcn_>
+        </Command_Shadcn_>
+      </PopoverContent_Shadcn_>
+    </Popover_Shadcn_>
+  )
+}
+
+export default ConnectDropdown

apps/studio/components/interfaces/Connect/ConnectionIcon.tsx

@@ -1,12 +1,13 @@
-import { BASE_PATH } from 'lib/constants'
-
 import { useTheme } from 'next-themes'
 import Image from 'next/image'
+
+import { BASE_PATH } from 'lib/constants'
+
 interface ConnectionIconProps {
   connection: any
 }
 
-const ConnectionIcon = ({ connection }: ConnectionIconProps) => {
+export const ConnectionIcon = ({ connection }: ConnectionIconProps) => {
   const { resolvedTheme } = useTheme()
 
   const imageFolder = ['ionic-angular'].includes(connection) ? 'icons/frameworks' : 'libraries'
@@ -28,5 +29,3 @@ const ConnectionIcon = ({ connection }: ConnectionIconProps) => {
     />
   )
 }
-
-export default ConnectionIcon

apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx

@@ -27,7 +27,11 @@ import {
   cn,
 } from 'ui'
 import { Admonition } from 'ui-patterns'
-import { CONNECTION_PARAMETERS, CONNECTION_TYPES, ConnectionType } from './Connect.constants'
+import {
+  CONNECTION_PARAMETERS,
+  DATABASE_CONNECTION_TYPES,
+  DatabaseConnectionType,
+} from './Connect.constants'
 import { CodeBlockFileHeader, ConnectionPanel } from './ConnectionPanel'
 import { getConnectionStrings, getPoolerTld } from './DatabaseSettings.utils'
 import examples, { Example } from './DirectConnectionExamples'
@@ -49,7 +53,7 @@ export const DatabaseConnectionString = () => {
   const { ref: projectRef } = useParams()
   const state = useDatabaseSelectorStateSnapshot()
 
-  const [selectedTab, setSelectedTab] = useState<ConnectionType>('uri')
+  const [selectedTab, setSelectedTab] = useState<DatabaseConnectionType>('uri')
 
   const {
     data: poolingInfo,
@@ -89,7 +93,7 @@ export const DatabaseConnectionString = () => {
   const connectionInfo = pluckObjectFields(selectedDatabase || emptyState, DB_FIELDS)
 
   const handleCopy = (id: string) => {
-    const labelValue = CONNECTION_TYPES.find((type) => type.id === id)?.label
+    const labelValue = DATABASE_CONNECTION_TYPES.find((type) => type.id === id)?.label
     sendEvent({
       category: 'settings',
       action: 'copy_connection_string',
@@ -152,9 +156,9 @@ export const DatabaseConnectionString = () => {
   //   // }
   // }, [poolingConfiguration?.pool_mode])
 
-  const lang = CONNECTION_TYPES.find((type) => type.id === selectedTab)?.lang ?? 'bash'
+  const lang = DATABASE_CONNECTION_TYPES.find((type) => type.id === selectedTab)?.lang ?? 'bash'
   const contentType =
-    CONNECTION_TYPES.find((type) => type.id === selectedTab)?.contentType ?? 'input'
+    DATABASE_CONNECTION_TYPES.find((type) => type.id === selectedTab)?.contentType ?? 'input'
 
   const example: Example | undefined = examples[selectedTab as keyof typeof examples]
 
@@ -162,7 +166,7 @@ export const DatabaseConnectionString = () => {
   const exampleInstallCommands = example?.installCommands
   const examplePostInstallCommands = example?.postInstallCommands
   const hasCodeExamples = exampleFiles || exampleInstallCommands
-  const fileTitle = CONNECTION_TYPES.find((type) => type.id === selectedTab)?.fileTitle
+  const fileTitle = DATABASE_CONNECTION_TYPES.find((type) => type.id === selectedTab)?.fileTitle
 
   // [Refactor] See if we can do this in an immutable way, technically not a good practice to do this
   let stepNumber = 0
@@ -176,13 +180,15 @@ export const DatabaseConnectionString = () => {
           </span>
           <Select_Shadcn_
             value={selectedTab}
-            onValueChange={(connectionType: ConnectionType) => setSelectedTab(connectionType)}
+            onValueChange={(connectionType: DatabaseConnectionType) =>
+              setSelectedTab(connectionType)
+            }
           >
             <SelectTrigger_Shadcn_ size="small" className="w-auto rounded-l-none">
               <SelectValue_Shadcn_ />
             </SelectTrigger_Shadcn_>
             <SelectContent_Shadcn_>
-              {CONNECTION_TYPES.map((type) => (
+              {DATABASE_CONNECTION_TYPES.map((type) => (
                 <SelectItem_Shadcn_ key={type.id} value={type.id}>
                   {type.label}
                 </SelectItem_Shadcn_>

apps/studio/components/interfaces/Connect/content/androidkotlin/supabasekt/content.tsx

@@ -1,11 +1,11 @@
-import type { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
 
 import {
   ConnectTabs,
   ConnectTabTriggers,
   ConnectTabTrigger,
   ConnectTabContent,
-} from 'components/interfaces/Home/Connect/ConnectTabs'
+} from 'components/interfaces/Connect/ConnectTabs'
 import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {

apps/studio/components/interfaces/Connect/content/astro/supabasejs/content.tsx

@@ -1,11 +1,11 @@
-import type { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
 
 import {
   ConnectTabs,
   ConnectTabTriggers,
   ConnectTabTrigger,
   ConnectTabContent,
-} from 'components/interfaces/Home/Connect/ConnectTabs'
+} from 'components/interfaces/Connect/ConnectTabs'
 import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {

apps/studio/components/interfaces/Connect/content/drizzle/content.tsx

@@ -1,11 +1,11 @@
-import type { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
 
 import {
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
   ConnectTabContent,
-} from 'components/interfaces/Home/Connect/ConnectTabs'
+} from 'components/interfaces/Connect/ConnectTabs'
 import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock'
 
 const ContentFile = ({ connectionStringPooler }: ContentFileProps) => {

apps/studio/components/interfaces/Connect/content/exporeactnative/supabasejs/content.tsx

@@ -1,11 +1,11 @@
-import type { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
 
 import {
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
   ConnectTabContent,
-} from 'components/interfaces/Home/Connect/ConnectTabs'
+} from 'components/interfaces/Connect/ConnectTabs'
 import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {

apps/studio/components/interfaces/Connect/content/flutter/supabaseflutter/content.tsx

@@ -1,11 +1,11 @@
-import type { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
 
 import {
   ConnectTabs,
   ConnectTabTriggers,
   ConnectTabTrigger,
   ConnectTabContent,
-} from 'components/interfaces/Home/Connect/ConnectTabs'
+} from 'components/interfaces/Connect/ConnectTabs'
 import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {

apps/studio/components/interfaces/Connect/content/ionicangular/supabasejs/content.tsx

@@ -1,11 +1,11 @@
-import type { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
 
 import {
   ConnectTabs,
   ConnectTabTriggers,
   ConnectTabTrigger,
   ConnectTabContent,
-} from 'components/interfaces/Home/Connect/ConnectTabs'
+} from 'components/interfaces/Connect/ConnectTabs'
 import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {

apps/studio/components/interfaces/Connect/content/ionicreact/supabasejs/content.tsx

@@ -1,11 +1,11 @@
-import type { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
 
 import {
   ConnectTabs,
   ConnectTabTriggers,
   ConnectTabTrigger,
   ConnectTabContent,
-} from 'components/interfaces/Home/Connect/ConnectTabs'
+} from 'components/interfaces/Connect/ConnectTabs'
 import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {

apps/studio/components/interfaces/Connect/content/nextjs/app/supabasejs/content.tsx

@@ -1,11 +1,11 @@
-import type { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
 
 import {
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
   ConnectTabContent,
-} from 'components/interfaces/Home/Connect/ConnectTabs'
+} from 'components/interfaces/Connect/ConnectTabs'
 import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {

apps/studio/components/interfaces/Connect/content/nextjs/pages/supabasejs/content.tsx

@@ -1,11 +1,11 @@
-import type { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
 
 import {
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
   ConnectTabContent,
-} from 'components/interfaces/Home/Connect/ConnectTabs'
+} from 'components/interfaces/Connect/ConnectTabs'
 import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {

apps/studio/components/interfaces/Connect/content/nuxt/supabasejs/content.tsx

@@ -1,11 +1,11 @@
-import type { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
 
 import {
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
   ConnectTabContent,
-} from 'components/interfaces/Home/Connect/ConnectTabs'
+} from 'components/interfaces/Connect/ConnectTabs'
 import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {

apps/studio/components/interfaces/Connect/content/prisma/content.tsx

@@ -1,11 +1,11 @@
-import type { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
 
 import {
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
   ConnectTabContent,
-} from 'components/interfaces/Home/Connect/ConnectTabs'
+} from 'components/interfaces/Connect/ConnectTabs'
 import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock'
 
 const ContentFile = ({ connectionStringPooler }: ContentFileProps) => {

apps/studio/components/interfaces/Connect/content/react/create-react-app/supabasejs/content.tsx

@@ -1,11 +1,11 @@
-import type { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
 
 import {
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
   ConnectTabContent,
-} from 'components/interfaces/Home/Connect/ConnectTabs'
+} from 'components/interfaces/Connect/ConnectTabs'
 import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {

apps/studio/components/interfaces/Connect/content/react/vite/supabasejs/content.tsx

@@ -1,11 +1,11 @@
-import type { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
 
 import {
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
   ConnectTabContent,
-} from 'components/interfaces/Home/Connect/ConnectTabs'
+} from 'components/interfaces/Connect/ConnectTabs'
 import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {

apps/studio/components/interfaces/Connect/content/refine/supabasejs/content.tsx

@@ -1,11 +1,11 @@
-import type { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
 
 import {
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
   ConnectTabContent,
-} from 'components/interfaces/Home/Connect/ConnectTabs'
+} from 'components/interfaces/Connect/ConnectTabs'
 import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {

apps/studio/components/interfaces/Connect/content/remix/supabasejs/content.tsx

@@ -1,11 +1,11 @@
-import type { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
 
 import {
   ConnectTabs,
   ConnectTabTriggers,
   ConnectTabTrigger,
   ConnectTabContent,
-} from 'components/interfaces/Home/Connect/ConnectTabs'
+} from 'components/interfaces/Connect/ConnectTabs'
 import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {

apps/studio/components/interfaces/Connect/content/solidjs/supabasejs/content.tsx

@@ -1,11 +1,11 @@
-import type { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
 
 import {
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
   ConnectTabContent,
-} from 'components/interfaces/Home/Connect/ConnectTabs'
+} from 'components/interfaces/Connect/ConnectTabs'
 import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {

apps/studio/components/interfaces/Connect/content/sveltekit/supabasejs/content.tsx

@@ -1,11 +1,11 @@
-import type { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
 
 import {
   ConnectTabs,
   ConnectTabTriggers,
   ConnectTabTrigger,
   ConnectTabContent,
-} from 'components/interfaces/Home/Connect/ConnectTabs'
+} from 'components/interfaces/Connect/ConnectTabs'
 import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {

apps/studio/components/interfaces/Connect/content/swift/supabaseswift/content.tsx

@@ -1,11 +1,11 @@
-import type { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
 
 import {
   ConnectTabs,
   ConnectTabTriggers,
   ConnectTabTrigger,
   ConnectTabContent,
-} from 'components/interfaces/Home/Connect/ConnectTabs'
+} from 'components/interfaces/Connect/ConnectTabs'
 import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {

apps/studio/components/interfaces/Connect/content/vuejs/supabasejs/content.tsx

@@ -1,11 +1,11 @@
-import type { ContentFileProps } from 'components/interfaces/Home/Connect/Connect.types'
+import type { ContentFileProps } from 'components/interfaces/Connect/Connect.types'
 
 import {
   ConnectTabs,
   ConnectTabTrigger,
   ConnectTabTriggers,
   ConnectTabContent,
-} from 'components/interfaces/Home/Connect/ConnectTabs'
+} from 'components/interfaces/Connect/ConnectTabs'
 import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock'
 
 const ContentFile = ({ projectKeys }: ContentFileProps) => {

apps/studio/components/interfaces/Home/Connect/Connect.constants.ts

@@ -1,290 +0,0 @@
-export type ConnectionType = {
-  key: string
-  icon: string
-  label: string
-  guideLink?: string
-  children: ConnectionType[]
-}
-
-export const FRAMEWORKS: ConnectionType[] = [
-  {
-    key: 'nextjs',
-    label: 'Next.js',
-    icon: 'nextjs',
-    guideLink: 'https://supabase.com/docs/guides/getting-started/quickstarts/nextjs',
-    children: [
-      {
-        key: 'app',
-        label: 'App Router',
-        icon: '',
-        children: [
-          {
-            key: 'supabasejs',
-            label: 'supabase-js',
-            icon: 'supabase',
-            children: [],
-          },
-        ],
-      },
-      {
-        key: 'pages',
-        label: 'Pages Router',
-        icon: '',
-        children: [
-          {
-            key: 'supabasejs',
-            label: 'Supabase-js',
-            children: [],
-            icon: 'supabase',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    key: 'remix',
-    label: 'Remix',
-    icon: 'remix',
-    guideLink:
-      'https://supabase.com/docs/guides/auth/server-side/creating-a-client?framework=remix&environment=remix-loader',
-    children: [
-      {
-        key: 'supabasejs',
-        label: 'Supabase-js',
-        children: [],
-        icon: 'supabase',
-      },
-    ],
-  },
-  {
-    key: 'react',
-    label: 'React',
-    icon: 'react',
-    guideLink: 'https://supabase.com/docs/guides/getting-started/quickstarts/reactjs',
-    children: [
-      {
-        key: 'create-react-app',
-        label: 'Create React App',
-        icon: 'react',
-        children: [
-          {
-            key: 'supabasejs',
-            label: 'supabase-js',
-            icon: 'supabase',
-            children: [],
-          },
-        ],
-      },
-      {
-        key: 'vite',
-        label: 'Vite',
-        icon: 'vite',
-        children: [
-          {
-            key: 'supabasejs',
-            label: 'Supabase-js',
-            children: [],
-            icon: 'supabase',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    key: 'nuxt',
-    label: 'Nuxt',
-    icon: 'nuxt',
-    guideLink: 'https://supabase.com/docs/guides/getting-started/quickstarts/nuxtjs',
-    children: [
-      {
-        key: 'supabasejs',
-        label: 'Supabase-js',
-        children: [],
-        icon: 'supabase',
-      },
-    ],
-  },
-  {
-    key: 'vuejs',
-    label: 'Vue.JS',
-    icon: 'vuejs',
-    guideLink: 'https://supabase.com/docs/guides/getting-started/quickstarts/vue',
-    children: [
-      {
-        key: 'supabasejs',
-        label: 'Supabase-js',
-        children: [],
-        icon: 'supabase',
-      },
-    ],
-  },
-
-  {
-    key: 'sveltekit',
-    label: 'SvelteKit',
-    icon: 'sveltekit',
-    guideLink: 'https://supabase.com/docs/guides/getting-started/quickstarts/sveltekit',
-    children: [
-      {
-        key: 'supabasejs',
-        label: 'Supabase-js',
-        children: [],
-        icon: 'supabase',
-      },
-    ],
-  },
-  {
-    key: 'solidjs',
-    label: 'Solid.js',
-    icon: 'solidjs',
-    guideLink: 'https://supabase.com/docs/guides/getting-started/quickstarts/solidjs',
-    children: [
-      {
-        key: 'supabasejs',
-        label: 'Supabase-js',
-        children: [],
-        icon: 'supabase',
-      },
-    ],
-  },
-  {
-    key: 'astro',
-    label: 'Astro',
-    icon: 'astro',
-    guideLink: 'https://docs.astro.build/en/guides/backend/supabase/',
-    children: [
-      {
-        key: 'supabasejs',
-        label: 'Supabase-js',
-        children: [],
-        icon: 'supabase',
-      },
-    ],
-  },
-  {
-    key: 'refine',
-    label: 'refine',
-    icon: 'refine',
-    guideLink: 'https://supabase.com/docs/guides/getting-started/quickstarts/refine',
-    children: [
-      {
-        key: 'supabasejs',
-        label: 'Supabase-js',
-        children: [],
-        icon: 'supabase',
-      },
-    ],
-  },
-]
-
-export const MOBILES: ConnectionType[] = [
-  {
-    key: 'exporeactnative',
-    label: 'Expo React Native',
-    icon: 'expo',
-    guideLink: 'https://supabase.com/docs/guides/getting-started/tutorials/with-expo-react-native',
-    children: [
-      {
-        key: 'supabasejs',
-        label: 'Supabase-js',
-        children: [],
-        icon: 'supabase',
-      },
-    ],
-  },
-  {
-    key: 'flutter',
-    label: 'Flutter',
-    icon: 'flutter',
-    guideLink: 'https://supabase.com/docs/guides/getting-started/tutorials/with-flutter',
-    children: [
-      {
-        key: 'supabaseflutter',
-        label: 'supabase-flutter',
-        children: [],
-        icon: 'supabase',
-      },
-    ],
-  },
-  {
-    key: 'ionicreact',
-    label: 'Ionic React',
-    icon: 'react',
-    guideLink: 'https://supabase.com/docs/guides/getting-started/tutorials/with-ionic-react',
-    children: [
-      {
-        key: 'supabasejs',
-        label: 'Supabase-js',
-        children: [],
-        icon: 'supabase',
-      },
-    ],
-  },
-  {
-    key: 'swift',
-    label: 'Swift',
-    icon: 'swift',
-    guideLink: 'https://supabase.com/docs/guides/getting-started/tutorials/with-swift',
-    children: [
-      {
-        key: 'supabaseswift',
-        label: 'supabase-swift',
-        children: [],
-        icon: 'supabase',
-      },
-    ],
-  },
-  {
-    key: 'androidkotlin',
-    label: 'Android Kotlin',
-    icon: 'kotlin',
-    guideLink: 'https://supabase.com/docs/guides/getting-started/tutorials/with-kotlin',
-    children: [
-      {
-        key: 'supabasekt',
-        label: 'supabase-kt',
-        children: [],
-        icon: 'supabase',
-      },
-    ],
-  },
-  {
-    key: 'ionicangular',
-    label: 'Ionic Angular',
-    icon: 'ionic-angular',
-    guideLink: 'https://supabase.com/docs/guides/getting-started/tutorials/with-ionic-angular',
-    children: [
-      {
-        key: 'supabasejs',
-        label: 'Supabase-js',
-        children: [],
-        icon: 'supabase',
-      },
-    ],
-  },
-]
-
-export const ORMS: ConnectionType[] = [
-  {
-    key: 'prisma',
-    label: 'Prisma',
-    icon: 'prisma',
-    guideLink: 'https://supabase.com/partners/integrations/prisma',
-    children: [],
-  },
-  {
-    key: 'drizzle',
-    label: 'Drizzle',
-    icon: 'drizzle',
-    guideLink:
-      'https://supabase.com/docs/guides/database/connecting-to-postgres#connecting-with-drizzle',
-    children: [],
-  },
-]
-
-export const CONNECTION_TYPES = [
-  { key: 'direct', label: 'Connection String', obj: [] },
-  { key: 'frameworks', label: 'App Frameworks', obj: FRAMEWORKS },
-  { key: 'mobiles', label: 'Mobile Frameworks', obj: MOBILES },
-  { key: 'orms', label: 'ORMs', obj: ORMS },
-]

apps/studio/components/interfaces/Home/Connect/ConnectDropdown.tsx

@@ -1,99 +0,0 @@
-import { Box, Check, ChevronDown } from 'lucide-react'
-import { useState } from 'react'
-import {
-  Button,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  Command_Shadcn_,
-  PopoverContent_Shadcn_,
-  PopoverTrigger_Shadcn_,
-  Popover_Shadcn_,
-  cn,
-} from 'ui'
-import ConnectionIcon from './ConnectionIcon'
-
-interface ConnectDropdownProps {
-  state: string
-  updateState: (state: string) => void
-  label: string
-  items: any[]
-}
-
-const ConnectDropdown = ({
-  state,
-  updateState,
-  label,
-
-  items,
-}: ConnectDropdownProps) => {
-  const [open, setOpen] = useState(false)
-
-  function onSelectLib(key: string) {
-    updateState(key)
-    setOpen(false)
-  }
-
-  const selectedItem = items.find((item) => item.key === state)
-
-  return (
-    <>
-      <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
-        <div className="flex ">
-          <span className="flex items-center text-foreground-lighter px-3 rounded-lg rounded-r-none text-xs border border-button border-r-0">
-            {label}
-          </span>
-          <PopoverTrigger_Shadcn_ asChild>
-            <Button
-              size="small"
-              type="default"
-              className="gap-0 rounded-l-none"
-              iconRight={<ChevronDown strokeWidth={1.5} />}
-            >
-              <div className="flex items-center gap-2">
-                {selectedItem?.icon ? (
-                  <ConnectionIcon connection={selectedItem.icon} />
-                ) : (
-                  <Box size={12} />
-                )}
-                {selectedItem?.label}
-              </div>
-            </Button>
-          </PopoverTrigger_Shadcn_>
-        </div>
-        <PopoverContent_Shadcn_ className="p-0 max-w-48" side="bottom" align="start">
-          <Command_Shadcn_>
-            <CommandInput_Shadcn_ placeholder="Search..." />
-            <CommandList_Shadcn_>
-              <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
-              <CommandGroup_Shadcn_>
-                {items.map((item) => (
-                  <CommandItem_Shadcn_
-                    key={item.key}
-                    value={item.key}
-                    onSelect={() => {
-                      onSelectLib(item.key)
-                      setOpen(false)
-                    }}
-                    className="flex gap-2 items-center"
-                  >
-                    {item.icon ? <ConnectionIcon connection={item.icon} /> : <Box size={12} />}
-                    {item.label}
-                    <Check
-                      size={15}
-                      className={cn('ml-auto  ', item.key === state ? 'opacity-100' : 'opacity-0')}
-                    />
-                  </CommandItem_Shadcn_>
-                ))}
-              </CommandGroup_Shadcn_>
-            </CommandList_Shadcn_>
-          </Command_Shadcn_>
-        </PopoverContent_Shadcn_>
-      </Popover_Shadcn_>
-    </>
-  )
-}
-
-export default ConnectDropdown

apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useMemo } from 'react'
 
 import { useIsAssistantV2Enabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
-import Connect from 'components/interfaces/Home/Connect/Connect'
+import Connect from 'components/interfaces/Connect/Connect'
 import AssistantButton from 'components/layouts/AppLayout/AssistantButton'
 import BranchDropdown from 'components/layouts/AppLayout/BranchDropdown'
 import EnableBranchingButton from 'components/layouts/AppLayout/EnableBranchingButton/EnableBranchingButton'

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

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'
 
 import { useParams } from 'common'
 import { ClientLibrary, ExampleProject } from 'components/interfaces/Home'
-import Connect from 'components/interfaces/Home/Connect/Connect'
+import Connect from 'components/interfaces/Connect/Connect'
 import { CLIENT_LIBRARIES, EXAMPLE_PROJECTS } from 'components/interfaces/Home/Home.constants'
 import ProjectUsageSection from 'components/interfaces/Home/ProjectUsageSection'
 import { SecurityStatus } from 'components/interfaces/Home/SecurityStatus'