overleaf-cep/services/web/frontend/js/features/ide-react/components/toolbar/online-users.tsx

import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
import {
  OnlineUser,
  useOnlineUsersContext,
} from '@/features/ide-react/context/online-users-context'
import { useCallback } from 'react'
import { OnlineUsersWidget } from '@/features/editor-navigation-toolbar/components/online-users-widget'

export const OnlineUsers = () => {
  const { openDoc } = useEditorManagerContext()
  const { onlineUsersArray } = useOnlineUsersContext()

  const goToUser = useCallback(
    async (user: OnlineUser) => {
      if (user.doc && typeof user.row === 'number') {
        return await openDoc(user.doc, { gotoLine: user.row + 1 })
      }
    },
    [openDoc]
  )

  if (!onlineUsersArray.length) return null

  return (
    <div className="ide-redesign-online-users">
      <OnlineUsersWidget onlineUsers={onlineUsersArray} goToUser={goToUser} />
    </div>
  )
}