apply ui tweaks

Author: jgoux

apps/postgres-new/app/db/[id]/page.tsx

@@ -8,7 +8,7 @@ import Workspace from '~/components/workspace'
 export default function Page({ params }: { params: { id: string } }) {
   const databaseId = params.id
   const router = useRouter()
-  const { dbManager, shareDatabase } = useApp()
+  const { dbManager, connectedDatabase } = useApp()
 
   useEffect(() => {
     async function run() {
@@ -25,12 +25,12 @@ export default function Page({ params }: { params: { id: string } }) {
     run()
   }, [dbManager, databaseId, router])
 
-  // Cleanup shared database when switching databases
+  // Cleanup connected database when switching databases
   useEffect(() => {
-    if (shareDatabase.isSharing && shareDatabase.databaseId !== databaseId) {
-      shareDatabase.stop()
+    if (connectedDatabase.isConnected && connectedDatabase.databaseId !== databaseId) {
+      connectedDatabase.disconnect()
     }
-  }, [shareDatabase, databaseId])
+  }, [connectedDatabase, databaseId])
 
   return <Workspace databaseId={databaseId} visibility="local" />
 }

apps/postgres-new/components/app-provider.tsx

@@ -105,9 +105,9 @@ export default function AppProvider({ children }: AppProps) {
     return await dbManager.getRuntimePgVersion()
   }, [dbManager])
 
-  const [sharedDatabaseId, setSharedDatabaseId] = useState<string | null>(null)
+  const [connectedDatabaseId, setConnectedDatabaseId] = useState<string | null>(null)
   const [ws, setWs] = useState<WebSocket | null>(null)
-  const startSharingDatabase = useCallback(
+  const connectDatabase = useCallback(
     async (databaseId: string) => {
       if (!dbManager) {
         throw new Error('dbManager is not available')
@@ -122,43 +122,43 @@ export default function AppProvider({ children }: AppProps) {
       ws.binaryType = 'arraybuffer'
 
       ws.onopen = () => {
-        setSharedDatabaseId(databaseId)
+        setConnectedDatabaseId(databaseId)
       }
       ws.onmessage = async (event) => {
         const message = new Uint8Array(await event.data)
         const response = await db.execProtocolRaw(message)
         ws.send(response)
       }
       ws.onclose = (event) => {
-        setSharedDatabaseId(null)
+        setConnectedDatabaseId(null)
       }
       ws.onerror = (error) => {
         console.error('webSocket error:', error)
-        setSharedDatabaseId(null)
+        setConnectedDatabaseId(null)
       }
 
       setWs(ws)
     },
     [dbManager]
   )
-  const stopSharingDatabase = useCallback(() => {
+  const disconnectDatabase = useCallback(() => {
     ws?.close()
     setWs(null)
-    setSharedDatabaseId(null)
+    setConnectedDatabaseId(null)
   }, [ws])
-  const shareDatabase = {
-    start: startSharingDatabase,
-    stop: stopSharingDatabase,
-    databaseId: sharedDatabaseId,
-    isSharing: Boolean(sharedDatabaseId),
+  const connectedDatabase = {
+    connect: connectDatabase,
+    disconnect: disconnectDatabase,
+    databaseId: connectedDatabaseId,
+    isConnected: Boolean(connectedDatabaseId),
   }
 
   return (
     <AppContext.Provider
       value={{
         user,
         isLoadingUser,
-        shareDatabase,
+        connectedDatabase,
         signIn,
         signOut,
         isSignInDialogOpen,
@@ -195,11 +195,11 @@ export type AppContextValues = {
   dbManager?: DbManager
   pgliteVersion?: string
   pgVersion?: string
-  shareDatabase: {
-    start: (databaseId: string) => Promise<void>
-    stop: () => void
+  connectedDatabase: {
+    connect: (databaseId: string) => Promise<void>
+    disconnect: () => void
     databaseId: string | null
-    isSharing: boolean
+    isConnected: boolean
   }
 }
 

apps/postgres-new/components/chat.tsx

@@ -3,7 +3,7 @@
 import { Message, generateId } from 'ai'
 import { useChat } from 'ai/react'
 import { AnimatePresence, m } from 'framer-motion'
-import { ArrowDown, ArrowUp, Flame, Paperclip, Square } from 'lucide-react'
+import { ArrowDown, ArrowUp, Flame, Paperclip, Square, WifiOff } from 'lucide-react'
 import {
   ChangeEvent,
   FormEventHandler,
@@ -49,7 +49,7 @@ export function getInitialMessages(tables: TablesData): Message[] {
 }
 
 export default function Chat() {
-  const { user, isLoadingUser, focusRef, setIsSignInDialogOpen, isRateLimited, shareDatabase } =
+  const { user, isLoadingUser, focusRef, setIsSignInDialogOpen, isRateLimited, connectedDatabase } =
     useApp()
   const [inputFocusState, setInputFocusState] = useState(false)
 
@@ -198,7 +198,7 @@ export default function Chat() {
   const [isMessageAnimationComplete, setIsMessageAnimationComplete] = useState(false)
 
   const isChatEnabled =
-    !isLoadingMessages && !isLoadingSchema && user !== undefined && !shareDatabase.isSharing
+    !isLoadingMessages && !isLoadingSchema && user !== undefined && !connectedDatabase.isConnected
 
   const isSubmitEnabled = isChatEnabled && Boolean(input.trim())
 
@@ -240,29 +240,31 @@ export default function Chat() {
             className={cn(
               'h-full flex flex-col items-center overflow-y-auto',
               !isMessageAnimationComplete ? 'overflow-x-hidden' : undefined,
-              shareDatabase.isSharing ? 'overflow-y-hidden' : undefined
+              connectedDatabase.isConnected ? 'overflow-y-hidden' : undefined
             )}
             ref={scrollRef}
           >
-            {shareDatabase.isSharing && (
+            {connectedDatabase.isConnected && (
               <div className="h-full w-full max-w-4xl flex flex-col gap-10 p-10 absolute backdrop-blur-sm bg-card/90">
                 <div className="flex items-center justify-center h-full flex-col gap-y-5">
+                  <div className="w-full text-left">
+                    <p className="text-lg">Access your in-browser database</p>
+                    <p className="text-xs text-muted-foreground">
+                      Closing the window will disconnect your database
+                    </p>
+                  </div>
                   <CopyableField
-                    label="Database URL"
-                    value={`postgres://postgres@${shareDatabase.databaseId}.${process.env.NEXT_PUBLIC_BROWSER_PROXY_DOMAIN}/postgres?sslmode=require`}
+                    value={`postgres://postgres@${connectedDatabase.databaseId}.${process.env.NEXT_PUBLIC_BROWSER_PROXY_DOMAIN}/postgres?sslmode=require`}
                   />
                   <Button
-                    className="w-full"
+                    className="w-full gap-2"
                     variant="outline"
                     onClick={() => {
-                      shareDatabase.stop()
+                      connectedDatabase.disconnect()
                     }}
                   >
-                    <span className="relative flex h-3 w-3 mr-2">
-                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
-                      <span className="relative inline-flex rounded-full h-3 w-3 bg-primary"></span>
-                    </span>{' '}
-                    Stop sharing
+                    <WifiOff className="h-[1.2rem] w-[1.2rem]" />
+                    <span>Disconnect database</span>
                   </Button>
                 </div>
               </div>

apps/postgres-new/components/copyable-field.tsx

@@ -4,16 +4,16 @@ import { Button } from '~/components/ui/button'
 import { Input } from '~/components/ui/input'
 import { Label } from '~/components/ui/label'
 
-export function CopyableField(props: { label: string; value: string; disableCopy?: boolean }) {
+export function CopyableField(props: { label?: string; value: string; disableCopy?: boolean }) {
   return (
     <div className="flex flex-col space-y-2 w-full">
-      <Label className="whitespace-nowrap">{props.label}</Label>
+      {props.label && <Label className="whitespace-nowrap">{props.label}</Label>}
       <CopyableInput value={props.value} disableCopy={props.disableCopy} />
     </div>
   )
 }
 
-function CopyableInput(props: { value: string; disableCopy?: boolean }) {
+export function CopyableInput(props: { value: string; disableCopy?: boolean }) {
   const [isCopying, setIsCopying] = useState(false)
 
   function handleCopy(value: string) {

apps/postgres-new/components/sidebar.tsx

@@ -41,6 +41,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from './ui/dropdown-menu'
+import { TooltipPortal } from '@radix-ui/react-tooltip'
 
 export default function Sidebar() {
   const { user, signOut, focusRef, isSignInDialogOpen, setIsSignInDialogOpen } = useApp()
@@ -276,7 +277,7 @@ type DatabaseMenuItemProps = {
 
 function DatabaseMenuItem({ database, isActive }: DatabaseMenuItemProps) {
   const router = useRouter()
-  const { user, dbManager, shareDatabase } = useApp()
+  const { user, dbManager, connectedDatabase } = useApp()
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
   const { mutateAsync: deleteDatabase } = useDatabaseDeleteMutation()
   const { mutateAsync: updateDatabase } = useDatabaseUpdateMutation()
@@ -350,6 +351,21 @@ function DatabaseMenuItem({ database, isActive }: DatabaseMenuItemProps) {
         )}
         href={`/db/${database.id}`}
       >
+        {isActive && connectedDatabase.isConnected && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="relative flex h-2.5 w-2.5">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-primary"></span>
+              </span>
+            </TooltipTrigger>
+            <TooltipPortal>
+              <TooltipContent side="bottom">
+                <p>Connected</p>
+              </TooltipContent>
+            </TooltipPortal>
+          </Tooltip>
+        )}
         <span className="text-nowrap grow truncate">{database.name ?? 'My database'}</span>
         <DropdownMenu
           modal={false}
@@ -468,7 +484,7 @@ function DatabaseMenuItem({ database, isActive }: DatabaseMenuItemProps) {
                   />
                   <span>Deploy</span>
                 </DropdownMenuItem>
-                <ShareMenuItem
+                <ConnectMenuItem
                   databaseId={database.id}
                   isActive={isActive}
                   setIsPopoverOpen={setIsPopoverOpen}
@@ -502,33 +518,33 @@ function DatabaseMenuItem({ database, isActive }: DatabaseMenuItemProps) {
   )
 }
 
-type ShareMenuItemProps = {
+type ConnectMenuItemProps = {
   databaseId: string
   isActive: boolean
   setIsPopoverOpen: (open: boolean) => void
 }
 
-function ShareMenuItem(props: ShareMenuItemProps) {
-  const { shareDatabase } = useApp()
+function ConnectMenuItem(props: ConnectMenuItemProps) {
+  const { connectedDatabase } = useApp()
 
-  // Only show the share menu item on fully loaded dashboard
+  // Only show the connect menu item on fully loaded dashboard
   if (!props.isActive) {
     return null
   }
 
-  if (!shareDatabase.isSharing) {
+  if (!connectedDatabase.isConnected) {
     return (
       <DropdownMenuItem
-        disabled={shareDatabase.isSharing}
+        disabled={connectedDatabase.isConnected}
         className="bg-inherit justify-start hover:bg-neutral-200 flex gap-3"
         onClick={async (e) => {
           e.preventDefault()
-          shareDatabase.start(props.databaseId)
+          connectedDatabase.connect(props.databaseId)
           props.setIsPopoverOpen(false)
         }}
       >
         <WifiIcon size={16} strokeWidth={2} className="flex-shrink-0 text-muted-foreground" />
-        <span>Share</span>
+        <span>Connect</span>
       </DropdownMenuItem>
     )
   }
@@ -538,7 +554,7 @@ function ShareMenuItem(props: ShareMenuItemProps) {
       className="bg-inherit justify-start hover:bg-neutral-200 flex gap-3"
       onClick={async (e) => {
         e.preventDefault()
-        shareDatabase.stop()
+        connectedDatabase.disconnect()
         props.setIsPopoverOpen(false)
       }}
     >