isPreview: boolean
dbManager?: DbManager
diff --git a/apps/postgres-new/components/chat-message.tsx b/apps/web/components/chat-message.tsx
similarity index 100%
rename from apps/postgres-new/components/chat-message.tsx
rename to apps/web/components/chat-message.tsx
diff --git a/apps/postgres-new/components/chat.tsx b/apps/web/components/chat.tsx
similarity index 96%
rename from apps/postgres-new/components/chat.tsx
rename to apps/web/components/chat.tsx
index 65b40f75..7eec23a4 100644
--- a/apps/postgres-new/components/chat.tsx
+++ b/apps/web/components/chat.tsx
@@ -25,6 +25,7 @@ import { useApp } from './app-provider'
import ChatMessage from './chat-message'
import SignInButton from './sign-in-button'
import { useWorkspace } from './workspace'
+import { SignInDialog } from './sign-in-dialog'
export function getInitialMessages(tables: TablesData): Message[] {
return [
@@ -48,7 +49,7 @@ export function getInitialMessages(tables: TablesData): Message[] {
}
export default function Chat() {
- const { user, isLoadingUser, focusRef, setIsSignInDialogOpen } = useApp()
+ const { user, isLoadingUser, focusRef } = useApp()
const [inputFocusState, setInputFocusState] = useState(false)
const {
@@ -326,14 +327,11 @@ export default function Chat() {
To prevent abuse we ask you to sign in before chatting with AI.
- {
- setIsSignInDialogOpen(true)
- }}
- >
- Why do I need to sign in?
-
+
+
+ Why do I need to sign in?
+
+
)}
@@ -380,14 +378,11 @@ export default function Chat() {
To prevent abuse we ask you to sign in before chatting with AI.
- {
- setIsSignInDialogOpen(true)
- }}
- >
- Why do I need to sign in?
-
+
+
+ Why do I need to sign in?
+
+
)}
diff --git a/apps/postgres-new/components/code-accordion.tsx b/apps/web/components/code-accordion.tsx
similarity index 100%
rename from apps/postgres-new/components/code-accordion.tsx
rename to apps/web/components/code-accordion.tsx
diff --git a/apps/postgres-new/components/code-block.tsx b/apps/web/components/code-block.tsx
similarity index 88%
rename from apps/postgres-new/components/code-block.tsx
rename to apps/web/components/code-block.tsx
index f4c88d1f..acd04303 100644
--- a/apps/postgres-new/components/code-block.tsx
+++ b/apps/web/components/code-block.tsx
@@ -6,9 +6,10 @@
* TODO: Redesign this component
*/
+import { Copy } from 'lucide-react'
import { useTheme } from 'next-themes'
-import { Children, ReactNode, useState } from 'react'
-import { Light as SyntaxHighlighter, SyntaxHighlighterProps } from 'react-syntax-highlighter'
+import { Children, type ReactNode, useState } from 'react'
+import { Light as SyntaxHighlighter, type SyntaxHighlighterProps } from 'react-syntax-highlighter'
import curl from 'highlightjs-curl'
import bash from 'react-syntax-highlighter/dist/cjs/languages/hljs/bash'
@@ -23,6 +24,7 @@ import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql'
import ts from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript'
import { cn } from '~/lib/utils'
+import { Button } from './ui/button'
export interface CodeBlockProps {
title?: ReactNode
@@ -44,7 +46,7 @@ export interface CodeBlockProps {
hideLineNumbers?: boolean
className?: string
value?: string
- children?: string
+ children?: string | string[]
renderer?: SyntaxHighlighterProps['renderer']
theme?: 'auto' | 'light' | 'dark'
}
@@ -69,9 +71,10 @@ export const CodeBlock = ({
const handleCopy = () => {
setCopied(true)
+ navigator.clipboard.writeText(value ?? '')
setTimeout(() => {
setCopied(false)
- }, 1000)
+ }, 2000)
}
// Extract string when `children` has a single string node
@@ -79,7 +82,13 @@ export const CodeBlock = ({
const [singleChild] = childrenArray.length === 1 ? childrenArray : []
const singleString = typeof singleChild === 'string' ? singleChild : undefined
- let codeValue = value ?? singleString ?? children
+ let codeValue =
+ value ??
+ (typeof children === 'string'
+ ? children
+ : Array.isArray(children)
+ ? children.join('')
+ : undefined)
codeValue = codeValue?.trimEnd?.() ?? codeValue
// check the length of the string inside the tag
@@ -162,11 +171,24 @@ export const CodeBlock = ({
{!hideCopy && (value || children) && className ? (
+ >
+
+
) : null}
) : (
diff --git a/apps/web/components/deployed-database-fields.tsx b/apps/web/components/deployed-database-fields.tsx
new file mode 100644
index 00000000..657a442e
--- /dev/null
+++ b/apps/web/components/deployed-database-fields.tsx
@@ -0,0 +1,65 @@
+import { CopyIcon } from 'lucide-react'
+import { useState } from 'react'
+import { Button } from '~/components/ui/button'
+import { Input } from '~/components/ui/input'
+import { Label } from '~/components/ui/label'
+import { DeployedDatabaseCreateResult } from '~/data/deployed-databases/deployed-database-create-mutation'
+
+export type DeployedDatabaseFieldsProps = DeployedDatabaseCreateResult
+
+export function DeployedDatabaseFields(props: DeployedDatabaseFieldsProps) {
+ const port = '5432'
+ const password = props.password ?? '[The password for your database]'
+ const connectionStringPassword = props.password
+ ? encodeURIComponent(props.password)
+ : '[YOUR-PASSWORD]'
+ const connectionString = `postgresql://${props.username}:${connectionStringPassword}@${props.host}/${props.databaseName}`
+
+ return (
+
+
+
+
+
+
+
+
+ )
+}
+
+function CopyableField(props: { label: string; value: string; disableCopy?: boolean }) {
+ return (
+
+
+
+
+ )
+}
+
+function CopyableInput(props: { value: string; disableCopy?: boolean }) {
+ const [isCopying, setIsCopying] = useState(false)
+
+ function handleCopy(value: string) {
+ setIsCopying(true)
+ navigator.clipboard.writeText(value)
+ setTimeout(() => {
+ setIsCopying(false)
+ }, 2000)
+ }
+
+ return (
+
+
+ {!props.disableCopy && (
+
+ )}
+
+ )
+}
diff --git a/apps/postgres-new/components/framer-features.ts b/apps/web/components/framer-features.ts
similarity index 100%
rename from apps/postgres-new/components/framer-features.ts
rename to apps/web/components/framer-features.ts
diff --git a/apps/postgres-new/components/ide.tsx b/apps/web/components/ide.tsx
similarity index 100%
rename from apps/postgres-new/components/ide.tsx
rename to apps/web/components/ide.tsx
diff --git a/apps/postgres-new/components/layout.tsx b/apps/web/components/layout.tsx
similarity index 92%
rename from apps/postgres-new/components/layout.tsx
rename to apps/web/components/layout.tsx
index e3ad7b0d..50d634b6 100644
--- a/apps/postgres-new/components/layout.tsx
+++ b/apps/web/components/layout.tsx
@@ -8,7 +8,8 @@ import { PropsWithChildren } from 'react'
import { TooltipProvider } from '~/components/ui/tooltip'
import { useBreakpoint } from '~/lib/use-breakpoint'
import { useApp } from './app-provider'
-import Sidebar from './sidebar'
+import Sidebar from './sidebar/sidebar'
+import { Toaster } from '~/components/ui/toaster'
const loadFramerFeatures = () => import('./framer-features').then((res) => res.default)
@@ -36,6 +37,7 @@ export default function Layout({ children }: LayoutProps) {
+
)
diff --git a/apps/postgres-new/components/markdown-accordion.tsx b/apps/web/components/markdown-accordion.tsx
similarity index 100%
rename from apps/postgres-new/components/markdown-accordion.tsx
rename to apps/web/components/markdown-accordion.tsx
diff --git a/apps/postgres-new/components/providers.tsx b/apps/web/components/providers.tsx
similarity index 100%
rename from apps/postgres-new/components/providers.tsx
rename to apps/web/components/providers.tsx
diff --git a/apps/postgres-new/components/schema/graph.tsx b/apps/web/components/schema/graph.tsx
similarity index 100%
rename from apps/postgres-new/components/schema/graph.tsx
rename to apps/web/components/schema/graph.tsx
diff --git a/apps/postgres-new/components/schema/legend.tsx b/apps/web/components/schema/legend.tsx
similarity index 100%
rename from apps/postgres-new/components/schema/legend.tsx
rename to apps/web/components/schema/legend.tsx
diff --git a/apps/postgres-new/components/schema/table-graph.tsx b/apps/web/components/schema/table-graph.tsx
similarity index 100%
rename from apps/postgres-new/components/schema/table-graph.tsx
rename to apps/web/components/schema/table-graph.tsx
diff --git a/apps/postgres-new/components/schema/table-node.tsx b/apps/web/components/schema/table-node.tsx
similarity index 100%
rename from apps/postgres-new/components/schema/table-node.tsx
rename to apps/web/components/schema/table-node.tsx
diff --git a/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-actions.tsx b/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-actions.tsx
new file mode 100644
index 00000000..60126aba
--- /dev/null
+++ b/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-actions.tsx
@@ -0,0 +1,85 @@
+import { MoreVertical } from 'lucide-react'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '~/components/ui/dropdown-menu'
+import { cn } from '~/lib/utils'
+import { DatabaseItemRenameAction, RenameDatabaseForm } from './database-item-rename-action'
+import { useState } from 'react'
+import { DatabaseItemDownloadAction } from './database-item-download-action'
+import { DatabaseItemDeployAction } from './database-item-deploy-action/database-item-deploy-action'
+import { DatabaseItemDeleteAction } from './database-item-delete-action/database-item-delete-action'
+import { Button } from '~/components/ui/button'
+import type { Database } from '~/data/databases/database-type'
+
+export type DatabaseItemActionsProps = {
+ database: Database
+ isActive: boolean
+}
+
+export function DatabaseItemActions(props: DatabaseItemActionsProps) {
+ const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+ const [hasOpenDialog, setHasOpenDialog] = useState(false)
+ const [isRenaming, setIsRenaming] = useState(false)
+
+ function handleDialogOpenChange(open: boolean) {
+ setHasOpenDialog(open)
+ if (open === false) {
+ setIsDropdownOpen(false)
+ }
+ }
+
+ return (
+
+
+
+
+
+
+ {isRenaming ? (
+ {
+ setIsDropdownOpen(false)
+ setIsRenaming(false)
+ }}
+ />
+ ) : (
+
+ {
+ e.preventDefault()
+ setIsRenaming(true)
+ }}
+ />
+
+
+
+
+
+ )}
+
+
+ )
+}
diff --git a/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-delete-action/confirm-database-delete-alert.tsx b/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-delete-action/confirm-database-delete-alert.tsx
new file mode 100644
index 00000000..b13bdd35
--- /dev/null
+++ b/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-delete-action/confirm-database-delete-alert.tsx
@@ -0,0 +1,78 @@
+import { AlertDialogPortal } from '@radix-ui/react-alert-dialog'
+import { Loader } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { MouseEvent, useState } from 'react'
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ AlertDialogTrigger,
+} from '~/components/ui/alert-dialog'
+import { useDatabasesDeleteMutation } from '~/data/databases/database-delete-mutation'
+import type { Database } from '~/data/databases/database-type'
+
+type ConfirmDatabaseDeleteAlertProps = {
+ children: React.ReactNode
+ database: Database
+ isActive: boolean
+ onOpenChange: (open: boolean) => void
+}
+
+export function ConfirmDatabaseDeleteAlert(props: ConfirmDatabaseDeleteAlertProps) {
+ const router = useRouter()
+ const [isOpen, setIsOpen] = useState(false)
+ const { deleteDatabase, isLoading: isDeleting } = useDatabasesDeleteMutation()
+
+ function handleOpenChange(open: boolean) {
+ setIsOpen(open)
+ props.onOpenChange(open)
+ }
+
+ async function handleDelete(e: MouseEvent) {
+ e.preventDefault()
+ await deleteDatabase(props.database)
+ setIsOpen(false)
+ if (props.isActive) {
+ router.push('/')
+ }
+ }
+
+ return (
+
+ {props.children}
+
+
+
+ Delete database?
+
+ This will permanently delete "{props.database.name}".
+ {props.database.deployment && ' All connected applications will lose access.'}
+
+
+
+ Cancel
+
+ {isDeleting ? (
+
+ {' '}
+ Deleting
+
+ ) : (
+ 'Delete'
+ )}
+
+
+
+
+
+ )
+}
diff --git a/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-delete-action/database-item-delete-action.tsx b/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-delete-action/database-item-delete-action.tsx
new file mode 100644
index 00000000..cfe5caa6
--- /dev/null
+++ b/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-delete-action/database-item-delete-action.tsx
@@ -0,0 +1,30 @@
+import { Trash2 } from 'lucide-react'
+import { DropdownMenuItem } from '~/components/ui/dropdown-menu'
+import type { Database } from '~/data/databases/database-type'
+import { ConfirmDatabaseDeleteAlert } from './confirm-database-delete-alert'
+
+export type DatabaseItemDeleteActionProps = {
+ database: Database
+ isActive: boolean
+ onDialogOpenChange: (isOpen: boolean) => void
+}
+
+export function DatabaseItemDeleteAction(props: DatabaseItemDeleteActionProps) {
+ return (
+
+ {
+ e.preventDefault()
+ }}
+ >
+
+ Delete
+
+
+ )
+}
diff --git a/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-deploy-action/confirm-redeploy-database-alert.tsx b/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-deploy-action/confirm-redeploy-database-alert.tsx
new file mode 100644
index 00000000..9f50396b
--- /dev/null
+++ b/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-deploy-action/confirm-redeploy-database-alert.tsx
@@ -0,0 +1,91 @@
+import { AlertDialogPortal } from '@radix-ui/react-alert-dialog'
+import { Loader } from 'lucide-react'
+import { MouseEvent, useEffect, useState } from 'react'
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ AlertDialogTrigger,
+} from '~/components/ui/alert-dialog'
+import { useToast } from '~/components/ui/use-toast'
+import type { Database } from '~/data/databases/database-type'
+import {
+ DeployedDatabaseCreateResult,
+ useDeployedDatabaseCreateMutation,
+} from '~/data/deployed-databases/deployed-database-create-mutation'
+
+type ConfirmDatabaseRedeployAlertProps = {
+ children: React.ReactNode
+ database: Database
+ onSuccess: (data: DeployedDatabaseCreateResult) => void
+ onOpenChange: (open: boolean) => void
+}
+
+export function ConfirmDatabaseRedeployAlert(props: ConfirmDatabaseRedeployAlertProps) {
+ const [isOpen, setIsOpen] = useState(false)
+ const { mutateAsync: deployDatabase, isPending: isDeploying } =
+ useDeployedDatabaseCreateMutation()
+ const { toast } = useToast()
+
+ function handleOpenChange(open: boolean) {
+ setIsOpen(open)
+ props.onOpenChange(open)
+ }
+
+ async function handleDeploy(e: MouseEvent) {
+ e.preventDefault()
+ try {
+ const data = await deployDatabase({
+ createdAt: props.database.createdAt,
+ databaseId: props.database.id,
+ name: props.database.name,
+ })
+ props.onSuccess(data)
+ } catch (error) {
+ toast({
+ title: 'Database deployment failed',
+ description: (error as Error).message,
+ })
+ } finally {
+ setIsOpen(false)
+ }
+ }
+
+ return (
+
+ {props.children}
+
+
+
+ Redeploy database?
+
+ This will replace the existing "{props.database.name}" with its current version.
+
+
+
+ Cancel
+
+ {isDeploying ? (
+
+ {' '}
+ Redeploying
+
+ ) : (
+ 'Redeploy'
+ )}
+
+
+
+
+
+ )
+}
diff --git a/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-deploy-action/database-deployed-dialog.tsx b/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-deploy-action/database-deployed-dialog.tsx
new file mode 100644
index 00000000..0f06b5a9
--- /dev/null
+++ b/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-deploy-action/database-deployed-dialog.tsx
@@ -0,0 +1,53 @@
+import { DeployedDatabaseFields } from '~/components/deployed-database-fields'
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogPortal,
+ DialogTitle,
+} from '~/components/ui/dialog'
+import type { Database } from '~/data/databases/database-type'
+import { DeployedDatabaseCreateResult } from '~/data/deployed-databases/deployed-database-create-mutation'
+
+export type DatabaseDeployedDialogProps = {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+ database: Database
+} & DeployedDatabaseCreateResult
+
+export function DatabaseDeployedDialog(props: DatabaseDeployedDialogProps) {
+ return (
+
+ )
+}
diff --git a/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-deploy-action/database-item-deploy-action.tsx b/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-deploy-action/database-item-deploy-action.tsx
new file mode 100644
index 00000000..bc5014d0
--- /dev/null
+++ b/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-deploy-action/database-item-deploy-action.tsx
@@ -0,0 +1,124 @@
+import { Loader, Upload } from 'lucide-react'
+import { useState } from 'react'
+import { useApp } from '~/components/app-provider'
+import { DropdownMenuItem } from '~/components/ui/dropdown-menu'
+import type { Database } from '~/data/databases/database-type'
+import {
+ DeployedDatabaseCreateResult,
+ useDeployedDatabaseCreateMutation,
+} from '~/data/deployed-databases/deployed-database-create-mutation'
+import { DatabaseDeployedDialog } from './database-deployed-dialog'
+import { ConfirmDatabaseRedeployAlert } from './confirm-redeploy-database-alert'
+
+export type DatabaseItemDeployActionProps = {
+ database: Database
+ onDialogOpenChange: (isOpen: boolean) => void
+}
+
+export function DatabaseItemDeployAction(props: DatabaseItemDeployActionProps) {
+ const [deployResult, setDeployResult] = useState(null)
+ const [isDialogOpen, setIsDialogOpen] = useState(false)
+
+ function handleDeploySuccess(data: DeployedDatabaseCreateResult) {
+ setDeployResult(data)
+ setIsDialogOpen(true)
+ props.onDialogOpenChange(true)
+ }
+
+ return (
+ <>
+ {props.database.deployment ? (
+
+ ) : (
+
+ )}
+ {deployResult && (
+
+ )}
+
+ )
+}
+
+type DatabaseItemDeployActionMenuItemProps = {
+ database: Database
+ onDeploySuccess: (data: DeployedDatabaseCreateResult) => void
+}
+
+function DatabaseItemDeployActionMenuItem(props: DatabaseItemDeployActionMenuItemProps) {
+ const { user } = useApp()
+ const { mutateAsync: deployDatabase, isPending: isDeploying } =
+ useDeployedDatabaseCreateMutation()
+
+ async function handleMenuItemSelect(e: Event) {
+ e.preventDefault()
+
+ const deploymentResult = await deployDatabase({
+ databaseId: props.database.id,
+ createdAt: props.database.createdAt,
+ name: props.database.name,
+ })
+
+ props.onDeploySuccess(deploymentResult)
+ }
+
+ return (
+
+ {isDeploying ? (
+
+ ) : (
+
+ )}
+
+ Deploy
+
+ )
+}
+
+type DatabaseItemRedeployActionMenuItemProps = {
+ database: Database
+ onDeploySuccess: (data: DeployedDatabaseCreateResult) => void
+ onDialogOpenChange: (open: boolean) => void
+}
+
+function DatabaseItemRedeployActionMenuItem(props: DatabaseItemRedeployActionMenuItemProps) {
+ const { user } = useApp()
+
+ return (
+
+ {
+ e.preventDefault()
+ }}
+ >
+
+ Redeploy
+
+
+ )
+}
diff --git a/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-download-action.tsx b/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-download-action.tsx
new file mode 100644
index 00000000..fd85918f
--- /dev/null
+++ b/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-download-action.tsx
@@ -0,0 +1,32 @@
+import { Download } from 'lucide-react'
+import { useApp } from '~/components/app-provider'
+import { DropdownMenuItem } from '~/components/ui/dropdown-menu'
+import type { Database } from '~/data/databases/database-type'
+import { downloadFile, titleToKebabCase } from '~/lib/util'
+
+export type DatabaseItemDownloadActionProps = { database: Database }
+
+export function DatabaseItemDownloadAction(props: DatabaseItemDownloadActionProps) {
+ const { dbManager } = useApp()
+
+ async function handleMenuItemSelect(e: Event) {
+ if (!dbManager) {
+ throw new Error('dbManager is not available')
+ }
+
+ const db = await dbManager.getDbInstance(props.database.id)
+ const dumpBlob = await db.dumpDataDir()
+
+ const fileName = `${titleToKebabCase(props.database.name ?? 'My Database')}-${Date.now()}`
+ const file = new File([dumpBlob], fileName, { type: dumpBlob.type })
+
+ downloadFile(file)
+ }
+
+ return (
+
+
+ Download
+
+ )
+}
diff --git a/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-rename-action.tsx b/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-rename-action.tsx
new file mode 100644
index 00000000..1e0af6bf
--- /dev/null
+++ b/apps/web/components/sidebar/database-list/database-item/database-item-actions/database-item-rename-action.tsx
@@ -0,0 +1,47 @@
+import { Pencil } from 'lucide-react'
+import { DropdownMenuItem } from '~/components/ui/dropdown-menu'
+import type { Database } from '~/data/databases/database-type'
+import { useLocalDatabaseUpdateMutation } from '~/data/local-databases/local-database-update-mutation'
+
+export function DatabaseItemRenameAction(props: {
+ database: Database
+ onSelect: (e: Event) => void
+}) {
+ return (
+
+
+ Rename
+
+ )
+}
+
+export function RenameDatabaseForm(props: { database: Database; onSuccess: () => void }) {
+ const { mutateAsync: updateDatabase } = useLocalDatabaseUpdateMutation()
+
+ return (
+
+ )
+}
diff --git a/apps/web/components/sidebar/database-list/database-item/database-item.tsx b/apps/web/components/sidebar/database-list/database-item/database-item.tsx
new file mode 100644
index 00000000..e3ccd9ec
--- /dev/null
+++ b/apps/web/components/sidebar/database-list/database-item/database-item.tsx
@@ -0,0 +1,52 @@
+import type { Database } from '~/data/databases/database-type'
+import Link from 'next/link'
+import { cn } from '~/lib/utils'
+import { DatabaseItemActions } from './database-item-actions/database-item-actions'
+import { CloudIcon } from 'lucide-react'
+import { DeployedDatabaseDialog } from './deployed-database-dialog'
+import { Tooltip, TooltipContent, TooltipTrigger } from '~/components/ui/tooltip'
+import { Button } from '~/components/ui/button'
+
+type DatabaseItemProps = {
+ database: Database
+ isActive: boolean
+}
+
+export function DatabaseItem(props: DatabaseItemProps) {
+ const databaseName = props.database.name ?? 'My database'
+
+ return (
+
+ {props.database.deployment ? (
+
+
+
+
+
+
+ Database deployed
+
+
+
+ ) : (
+
+ )}
+
+
{databaseName}
+
+
+
+
+
+
+
+ )
+ }
+
+ if (databases.length === 0) {
+ return (
+
+
+ No databases
+
+ )
+ }
+
+ return (
+
+ {databases.map((database) => (
+
+
+
+ ))}
+
+ )
+}
diff --git a/apps/web/components/sidebar/sidebar-footer/sidebar-footer.tsx b/apps/web/components/sidebar/sidebar-footer/sidebar-footer.tsx
new file mode 100644
index 00000000..b0e18955
--- /dev/null
+++ b/apps/web/components/sidebar/sidebar-footer/sidebar-footer.tsx
@@ -0,0 +1,71 @@
+import { m } from 'framer-motion'
+import ThemeDropdown from './theme-dropdown'
+import { useApp } from '~/components/app-provider'
+import { Button } from '~/components/ui/button'
+import { LogOut } from 'lucide-react'
+import { Tooltip, TooltipContent, TooltipTrigger } from '~/components/ui/tooltip'
+
+export type SidebarFooterProps = {}
+
+export function SidebarFooter(props: SidebarFooterProps) {
+ const { user, signOut } = useApp()
+
+ async function handleSignOut() {
+ await signOut()
+ }
+
+ return (
+ <>
+
+
+
+ {user && (
+
+
+
+ )}
+
+ )
+}
+
+export type CollapsedSidebarFooterProps = {}
+
+export function CollapsedSidebparFooter(props: CollapsedSidebarFooterProps) {
+ const { user, signOut } = useApp()
+
+ async function handleSignOut() {
+ await signOut()
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ Toggle theme
+
+
+ {user && (
+
+
+
+
+
+
+
+ Sign out
+
+
+ )}
+
+
+
+
+
+
+
+
+ Close sidebar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Open sidebar
+
+
+
+
+
+
+
+
+
+
+
+ New database
+
+
+
+ setIsCollapsed(false)} />
+
+
+ )
+ }
+
+ return (
+
+
+ setIsCollapsed(true)} />
+
+
+
+
+ )
+}
diff --git a/apps/postgres-new/components/sign-in-button.tsx b/apps/web/components/sign-in-button.tsx
similarity index 88%
rename from apps/postgres-new/components/sign-in-button.tsx
rename to apps/web/components/sign-in-button.tsx
index a61f748b..3b68b603 100644
--- a/apps/postgres-new/components/sign-in-button.tsx
+++ b/apps/web/components/sign-in-button.tsx
@@ -1,8 +1,9 @@
import GitHubIcon from '~/assets/github-icon'
-import { useApp } from './app-provider'
+import { useApp } from '~/components/app-provider'
export default function SignInButton() {
const { signIn } = useApp()
+
return (