Merge pull request supabase-community#34 from supabase-community/feat/focus-input

gregnr · web-flow · commit f3eef1478649 · 2024-08-08T23:32:02.000-05:00
diff --git a/apps/postgres-new/components/app-provider.tsx b/apps/postgres-new/components/app-provider.tsx
@@ -8,10 +8,11 @@ import { User } from '@supabase/supabase-js'
 import {
   createContext,
   PropsWithChildren,
+  RefObject,
   useCallback,
   useContext,
   useEffect,
-  useMemo,
+  useRef,
   useState,
 } from 'react'
 import { DbManager } from '~/lib/db'
@@ -27,8 +28,20 @@ export default function AppProvider({ children }: AppProps) {
   const [isLoadingUser, setIsLoadingUser] = useState(true)
   const [user, setUser] = useState<User>()
 
+  const focusRef = useRef<FocusHandle>(null)
+
   const supabase = createClient()
 
+  useEffect(() => {
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((e) => {
+      focusRef.current?.focus()
+    })
+
+    return () => subscription.unsubscribe()
+  }, [supabase])
+
   const loadUser = useCallback(async () => {
     setIsLoadingUser(true)
     try {
@@ -97,6 +110,7 @@ export default function AppProvider({ children }: AppProps) {
         isLoadingUser,
         signIn,
         signOut,
+        focusRef,
         isPreview,
         dbManager,
         pgliteVersion,
@@ -108,11 +122,16 @@ export default function AppProvider({ children }: AppProps) {
   )
 }
 
+export type FocusHandle = {
+  focus(): void
+}
+
 export type AppContextValues = {
   user?: User
   isLoadingUser: boolean
   signIn: () => Promise<User | undefined>
   signOut: () => Promise<void>
+  focusRef: RefObject<FocusHandle>
   isPreview: boolean
   dbManager?: DbManager
   pgliteVersion?: string
diff --git a/apps/postgres-new/components/chat.tsx b/apps/postgres-new/components/chat.tsx
@@ -9,6 +9,7 @@ import {
   FormEventHandler,
   useCallback,
   useEffect,
+  useImperativeHandle,
   useMemo,
   useRef,
   useState,
@@ -47,7 +48,7 @@ export function getInitialMessages(tables: TablesData): Message[] {
 }
 
 export default function Chat() {
-  const { user, isLoadingUser } = useApp()
+  const { user, isLoadingUser, focusRef } = useApp()
   const [inputFocusState, setInputFocusState] = useState(false)
 
   const {
@@ -175,6 +176,15 @@ export default function Chat() {
   const isSubmitEnabled =
     !isLoadingMessages && !isLoadingSchema && Boolean(input.trim()) && user !== undefined
 
+  // Create imperative handle that can be used to focus the input anywhere in the app
+  useImperativeHandle(focusRef, () => ({
+    focus() {
+      if (inputRef.current) {
+        inputRef.current.focus()
+      }
+    },
+  }))
+
   return (
     <div ref={dropZoneRef} className="h-full flex flex-col items-stretch relative">
       {isDraggingOver && (
diff --git a/apps/postgres-new/components/sidebar.tsx b/apps/postgres-new/components/sidebar.tsx
@@ -40,7 +40,7 @@ import {
 } from './ui/dropdown-menu'
 
 export default function Sidebar() {
-  const { user, signOut } = useApp()
+  const { user, signOut, focusRef } = useApp()
   let { id: currentDatabaseId } = useParams<{ id: string }>()
   const router = useRouter()
   const { data: databases, isLoading: isLoadingDatabases } = useDatabasesQuery()
@@ -84,6 +84,7 @@ export default function Sidebar() {
                 <Button
                   onClick={() => {
                     router.push('/')
+                    focusRef.current?.focus()
                   }}
                   className="gap-2"
                 >
@@ -176,6 +177,7 @@ export default function Sidebar() {
                     size={'icon'}
                     onClick={() => {
                       router.push('/')
+                      focusRef.current?.focus()
                     }}
                   >
                     <PackagePlus size={14} />
