Provide a way to disconnect from GitHub integration (due to permissio… (#39)

src/components/GitHubConnector.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { Github } from "lucide-react";
+import { Github, Clipboard, Check } from "lucide-react";
 import { IpcClient } from "@/ipc/ipc_client";
 import { useSettings } from "@/hooks/useSettings";
 import { useLoadApp } from "@/hooks/useLoadApp";
@@ -23,6 +23,7 @@ export function GitHubConnector({ appId, folderName }: GitHubConnectorProps) {
   const [githubStatusMessage, setGithubStatusMessage] = useState<string | null>(
     null
   );
+  const [codeCopied, setCodeCopied] = useState(false);
   // --- ---
 
   const handleConnectToGithub = async () => {
@@ -240,6 +241,29 @@ export function GitHubConnector({ appId, folderName }: GitHubConnectorProps) {
                   <strong className="ml-1 font-mono text-lg tracking-wider bg-gray-200 dark:bg-gray-600 px-2 py-0.5 rounded">
                     {githubUserCode}
                   </strong>
+                  <button
+                    className="ml-2 p-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 focus:outline-none"
+                    onClick={() => {
+                      if (githubUserCode) {
+                        navigator.clipboard
+                          .writeText(githubUserCode)
+                          .then(() => {
+                            setCodeCopied(true);
+                            setTimeout(() => setCodeCopied(false), 2000);
+                          })
+                          .catch((err) =>
+                            console.error("Failed to copy code:", err)
+                          );
+                      }
+                    }}
+                    title="Copy to clipboard"
+                  >
+                    {codeCopied ? (
+                      <Check className="h-4 w-4 text-green-500" />
+                    ) : (
+                      <Clipboard className="h-4 w-4" />
+                    )}
+                  </button>
                 </p>
               </div>
             )}

src/components/GitHubIntegration.tsx

@@ -0,0 +1,60 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Github } from "lucide-react";
+import { useSettings } from "@/hooks/useSettings";
+import { showSuccess, showError } from "@/lib/toast";
+
+export function GitHubIntegration() {
+  const { settings, updateSettings } = useSettings();
+  const [isDisconnecting, setIsDisconnecting] = useState(false);
+
+  const handleDisconnectFromGithub = async () => {
+    setIsDisconnecting(true);
+    try {
+      const result = await updateSettings({
+        githubAccessToken: undefined,
+      });
+      if (result) {
+        showSuccess("Successfully disconnected from GitHub");
+      } else {
+        showError("Failed to disconnect from GitHub");
+      }
+    } catch (err: any) {
+      showError(
+        err.message || "An error occurred while disconnecting from GitHub"
+      );
+    } finally {
+      setIsDisconnecting(false);
+    }
+  };
+
+  const isConnected = !!settings?.githubAccessToken;
+
+  if (!isConnected) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center justify-between">
+      <div>
+        <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+          GitHub Integration
+        </h3>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+          Your account is connected to GitHub.
+        </p>
+      </div>
+
+      <Button
+        onClick={handleDisconnectFromGithub}
+        variant="destructive"
+        size="sm"
+        disabled={isDisconnecting}
+        className="flex items-center gap-2"
+      >
+        {isDisconnecting ? "Disconnecting..." : "Disconnect from GitHub"}
+        <Github className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}

src/pages/settings.tsx

@@ -10,6 +10,8 @@ import { useSettings } from "@/hooks/useSettings";
 import { Button } from "@/components/ui/button";
 import { ArrowLeft } from "lucide-react";
 import { useRouter } from "@tanstack/react-router";
+import { GitHubIntegration } from "@/components/GitHubIntegration";
+
 export default function SettingsPage() {
   const { theme, setTheme } = useTheme();
   const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
@@ -145,6 +147,16 @@ export default function SettingsPage() {
             </div>
           </div>
 
+          {/* Integrations Section */}
+          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6">
+            <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
+              Integrations
+            </h2>
+            <div className="space-y-4">
+              <GitHubIntegration />
+            </div>
+          </div>
+
           {/* Experiments Section */}
           <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6">
             <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-4">