AccountButton.tsx raw

   1  import { Skeleton } from '@/components/ui/skeleton'
   2  import { LONG_PRESS_THRESHOLD } from '@/constants'
   3  import { toProfile } from '@/lib/link'
   4  import { useSecondaryPage } from '@/PageManager'
   5  import { useNostr } from '@/providers/NostrProvider'
   6  import { UserRound } from 'lucide-react'
   7  import { useRef, useState } from 'react'
   8  import LoginDialog from '../LoginDialog'
   9  import { SimpleUserAvatar } from '../UserAvatar'
  10  import BottomNavigationBarItem from './BottomNavigationBarItem'
  11  
  12  export default function AccountButton() {
  13    const { push } = useSecondaryPage()
  14    const { pubkey, profile, checkLogin } = useNostr()
  15    const [loginDialogOpen, setLoginDialogOpen] = useState(false)
  16    const pressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  17  
  18    const handlePointerDown = () => {
  19      pressTimerRef.current = setTimeout(() => {
  20        setLoginDialogOpen(true)
  21        pressTimerRef.current = null
  22      }, LONG_PRESS_THRESHOLD)
  23    }
  24  
  25    const handlePointerUp = () => {
  26      if (pressTimerRef.current) {
  27        clearTimeout(pressTimerRef.current)
  28        pressTimerRef.current = null
  29        if (pubkey) {
  30          push(toProfile(pubkey))
  31        } else {
  32          checkLogin()
  33        }
  34      }
  35    }
  36  
  37    return (
  38      <>
  39        <BottomNavigationBarItem
  40          onPointerDown={handlePointerDown}
  41          onPointerUp={handlePointerUp}
  42          active={false}
  43        >
  44          {pubkey ? (
  45            profile ? (
  46              <SimpleUserAvatar userId={pubkey} className="size-6" />
  47            ) : (
  48              <Skeleton className="size-6 rounded-full" />
  49            )
  50          ) : (
  51            <UserRound />
  52          )}
  53        </BottomNavigationBarItem>
  54        <LoginDialog open={loginDialogOpen} setOpen={setLoginDialogOpen} />
  55      </>
  56    )
  57  }
  58