feat(github): unify workspace GitHub access (#2084)

apps/web/components/github/github-cli-form.tsx

@@ -1,12 +1,9 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Button } from "@kandev/ui/button";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Label } from "@kandev/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
-import { Spinner } from "@kandev/ui/spinner";
-import { useToast } from "@/components/toast-provider";
-import { fetchGitHubCLIAccounts, setGitHubWorkspaceConnection } from "@/lib/api/domains/github-api";
+import { fetchGitHubCLIAccounts } from "@/lib/api/domains/github-api";
 import type { GitHubCLIAccount } from "@/lib/types/github";
 
 function GitHubCLIAccountNotice({
@@ -41,17 +38,19 @@ function accountPlaceholder(loading: boolean, loadError: string | null) {
 
 export function GitHubCLIForm({
   workspaceId,
-  onSaved,
+  onAccountChange,
+  disabled,
 }: {
   workspaceId: string;
-  onSaved: () => void;
+  onAccountChange: (account: GitHubCLIAccount | null) => void;
+  disabled?: boolean;
 }) {
   const [accounts, setAccounts] = useState<GitHubCLIAccount[]>([]);
   const [selected, setSelected] = useState("");
   const [loadError, setLoadError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const { toast } = useToast();
+  const onAccountChangeRef = useRef(onAccountChange);
+  onAccountChangeRef.current = onAccountChange;
 
   useEffect(() => {
     let current = true;
@@ -59,7 +58,7 @@ export function GitHubCLIForm({
     setSelected("");
     setLoadError(null);
     setLoading(true);
-    setSaving(false);
+    onAccountChangeRef.current(null);
     fetchGitHubCLIAccounts(workspaceId, { cache: "no-store" })
       .then((items) => {
         if (!current) return;
@@ -86,26 +85,9 @@ export function GitHubCLIForm({
     return accounts.find((item) => item.host === host && item.login === login);
   }, [accounts, selected]);
 
-  const connect = useCallback(async () => {
-    if (!account) return;
-    setSaving(true);
-    try {
-      await setGitHubWorkspaceConnection(workspaceId, {
-        source: "gh_cli",
-        host: account.host,
-        login: account.login,
-      });
-      toast({ description: `Connected ${account.login} for this workspace`, variant: "success" });
-      onSaved();
-    } catch (error) {
-      toast({
-        description: error instanceof Error ? error.message : "Connection failed",
-        variant: "error",
-      });
-    } finally {
-      setSaving(false);
-    }
-  }, [account, onSaved, toast, workspaceId]);
+  useEffect(() => {
+    onAccountChangeRef.current(account ?? null);
+  }, [account]);
 
   return (
     <div className="space-y-3">
@@ -116,7 +98,11 @@ export function GitHubCLIForm({
         </p>
       </div>
       <div className="flex flex-col gap-2 sm:flex-row sm:items-stretch">
-        <Select value={selected} onValueChange={setSelected} disabled={loading || !accounts.length}>
+        <Select
+          value={selected}
+          onValueChange={setSelected}
+          disabled={disabled || loading || !accounts.length}
+        >
           <SelectTrigger id="github-cli-account" className="min-h-11 min-w-0 flex-1">
             <SelectValue placeholder={accountPlaceholder(loading, loadError)} />
           </SelectTrigger>
@@ -128,10 +114,6 @@ export function GitHubCLIForm({
             ))}
           </SelectContent>
         </Select>
-        <Button onClick={connect} disabled={!account || saving} className="h-11 cursor-pointer">
-          {saving && <Spinner className="mr-2 h-4 w-4" />}
-          Use account
-        </Button>
       </div>
       <GitHubCLIAccountNotice
         loadError={loadError}