Function InstallDialog

web/src/components/ui/install-dialog.tsx:15–178

()

import { cn } from '@/lib/utils'

export function InstallDialog() {
  const { isOpen, close } = useInstallDialog()
  const cdCopyButtonRef = useRef<HTMLButtonElement>(null)
  const installCopyButtonRef = useRef<HTMLButtonElement>(null)
  const runCopyButtonRef = useRef<HTMLButtonElement>(null)

  const editors = [
    { name: 'VS Code', href: 'vscode://~/', icon: '/logos/visual-studio.png' },
    { name: 'Cursor', href: 'cursor://~/', icon: '/logos/cursor.png' },
    {
      name: 'IntelliJ',
      href: 'idea://~/',
      icon: '/logos/intellij.png',
      needsWhiteBg: true,
    },
    {
      name: 'PyCharm',
      href: 'pycharm://~/',
      icon: '/logos/pycharm.png',
      needsWhiteBg: true,
    },
  ]

  const handleEditorClick = (editorName: string, href: string) => {
    window.open(
      href +
        encodeURIComponent(
          typeof window !== 'undefined' ? window.location.pathname : '',
        ),
      '_blank',
    )
  }

  const handleCdCommandCopy = () => {
    navigator.clipboard.writeText('cd /path/to/your-repo')
    posthog.capture(AnalyticsEvent.INSTALL_DIALOG_CD_COMMAND_COPIED)
    cdCopyButtonRef.current?.click()
  }

  const handleRunCommandCopy = () => {
    navigator.clipboard.writeText('codebuff')
    posthog.capture(AnalyticsEvent.INSTALL_DIALOG_RUN_COMMAND_COPIED)
    runCopyButtonRef.current?.click()
  }

  const handleInstallCommandCopy = () => {
    navigator.clipboard.writeText('npm install -g codebuff')
    posthog.capture(AnalyticsEvent.INSTALL_DIALOG_INSTALL_COMMAND_COPIED)
    installCopyButtonRef.current?.click()
  }

  return (
    <Dialog open={isOpen} onOpenChange={close}>
      <DialogContent className="px-8 sm:px-10">
        <div className="space-y-6">
          <h2 className="text-2xl font-bold">Get started with Codebuff</h2>
          <ol className="list-decimal list-inside space-y-6">
            <li className="text-lg leading-relaxed">