Split CLI registration dialog

Co-authored-by: Orca <help@stably.ai>

src/renderer/src/components/settings/CliRegistrationDialog.tsx

@@ -0,0 +1,99 @@
+import { Button } from '../ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '../ui/dialog'
+import { translate } from '@/i18n/i18n'
+
+type CliRegistrationDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  isEnabled: boolean
+  isSupported: boolean
+  commandName: string
+  commandPath: string | null | undefined
+  busyAction: 'install' | 'remove' | null
+  onInstall: () => void
+  onRemove: () => void
+}
+
+export function CliRegistrationDialog({
+  open,
+  onOpenChange,
+  isEnabled,
+  isSupported,
+  commandName,
+  commandPath,
+  busyAction,
+  onInstall,
+  onRemove
+}: CliRegistrationDialogProps): React.JSX.Element {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {isEnabled
+              ? translate(
+                  'auto.components.settings.CliSection.14444243ba',
+                  'Remove `{{value0}}` from PATH?',
+                  {
+                    value0: commandName
+                  }
+                )
+              : translate(
+                  'auto.components.settings.CliSection.fa87db3d6e',
+                  'Register `{{value0}}` in PATH?',
+                  {
+                    value0: commandName
+                  }
+                )}
+          </DialogTitle>
+          <DialogDescription>
+            {isEnabled
+              ? translate(
+                  'auto.components.settings.CliSection.a030816e3e',
+                  'This removes the shell command symlink. Orca itself remains installed.'
+                )
+              : translate(
+                  'auto.components.settings.CliSection.aa6536977e',
+                  'Orca will register {{value0}} so the command works from your terminal.',
+                  { value0: commandPath ?? commandName }
+                )}
+          </DialogDescription>
+        </DialogHeader>
+        {commandPath ? (
+          <p className="text-xs text-muted-foreground">
+            {translate('auto.components.settings.CliSection.a4aafe46e3', 'Target path:')}{' '}
+            <code className="rounded bg-muted px-1 py-0.5 text-[11px]">{commandPath}</code>
+          </p>
+        ) : null}
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={busyAction !== null}
+          >
+            {translate('auto.components.settings.CliSection.8671e406f0', 'Cancel')}
+          </Button>
+          <Button
+            onClick={() => void (isEnabled ? onRemove() : onInstall())}
+            disabled={busyAction !== null || !isSupported}
+          >
+            {busyAction === 'remove'
+              ? translate('auto.components.settings.CliSection.068552b191', 'Removing…')
+              : busyAction === 'install'
+                ? translate('auto.components.settings.CliSection.b0fca411a0', 'Registering…')
+                : isEnabled
+                  ? translate('auto.components.settings.CliSection.9a5f8a4568', 'Remove')
+                  : translate('auto.components.settings.CliSection.d00df2e397', 'Register')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/renderer/src/components/settings/CliSection.tsx

@@ -19,17 +19,10 @@ import {
 } from '@/hooks/useInstalledAgentSkills'
 import { useMountedRef } from '@/hooks/useMountedRef'
 import { Button } from '../ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle
-} from '../ui/dialog'
 import { Label } from '../ui/label'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
 import { AgentSkillSetupPanel } from './AgentSkillSetupPanel'
+import { CliRegistrationDialog } from './CliRegistrationDialog'
 import {
   buildSkillInstallCommandForRuntime,
   CliSkillRuntimeControl,
@@ -408,64 +401,17 @@ export function CliSection({
 
       <WslCliRegistration currentPlatform={currentPlatform} />
 
-      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>
-              {isEnabled
-                ? translate(
-                    'auto.components.settings.CliSection.14444243ba',
-                    'Remove `{{value0}}` from PATH?',
-                    { value0: commandName }
-                  )
-                : translate(
-                    'auto.components.settings.CliSection.fa87db3d6e',
-                    'Register `{{value0}}` in PATH?',
-                    { value0: commandName }
-                  )}
-            </DialogTitle>
-            <DialogDescription>
-              {isEnabled
-                ? translate(
-                    'auto.components.settings.CliSection.a030816e3e',
-                    'This removes the shell command symlink. Orca itself remains installed.'
-                  )
-                : translate(
-                    'auto.components.settings.CliSection.aa6536977e',
-                    'Orca will register {{value0}} so the command works from your terminal.',
-                    { value0: status?.commandPath ?? commandName }
-                  )}
-            </DialogDescription>
-          </DialogHeader>
-          {status?.commandPath ? (
-            <p className="text-xs text-muted-foreground">
-              {translate('auto.components.settings.CliSection.a4aafe46e3', 'Target path:')}{' '}
-              <code className="rounded bg-muted px-1 py-0.5 text-[11px]">{status.commandPath}</code>
-            </p>
-          ) : null}
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => setDialogOpen(false)}
-              disabled={busyAction !== null}
-            >
-              {translate('auto.components.settings.CliSection.8671e406f0', 'Cancel')}
-            </Button>
-            <Button
-              onClick={() => void (isEnabled ? handleRemove() : handleInstall())}
-              disabled={busyAction !== null || !isSupported}
-            >
-              {busyAction === 'remove'
-                ? translate('auto.components.settings.CliSection.068552b191', 'Removing…')
-                : busyAction === 'install'
-                  ? translate('auto.components.settings.CliSection.b0fca411a0', 'Registering…')
-                  : isEnabled
-                    ? translate('auto.components.settings.CliSection.9a5f8a4568', 'Remove')
-                    : translate('auto.components.settings.CliSection.d00df2e397', 'Register')}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      <CliRegistrationDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        isEnabled={isEnabled}
+        isSupported={isSupported}
+        commandName={commandName}
+        commandPath={status?.commandPath}
+        busyAction={busyAction}
+        onInstall={handleInstall}
+        onRemove={handleRemove}
+      />
     </section>
   )
 }