ai-chatbot/apps/editor/features/community/components/username-gate.tsx

'use client'

import { useEffect, useState } from 'react'
import { useAuth } from '../lib/auth/hooks'
import { getUsername } from '../lib/auth/actions'
import { UsernameOnboardingDialog } from './username-onboarding-dialog'

export function UsernameGate({ children }: { children: React.ReactNode }) {
  const { isAuthenticated, isLoading } = useAuth()
  const [needsUsername, setNeedsUsername] = useState(false)
  const [checking, setChecking] = useState(true)

  useEffect(() => {
    if (isLoading) return
    if (!isAuthenticated) {
      setChecking(false)
      setNeedsUsername(false)
      return
    }
    getUsername().then((username) => {
      setNeedsUsername(!username)
      setChecking(false)
    })
  }, [isAuthenticated, isLoading])

  return (
    <>
      {children}
      <UsernameOnboardingDialog
        open={needsUsername && !checking}
        onComplete={() => setNeedsUsername(false)}
      />
    </>
  )
}