feat: add reconnect button to toolbar

Add a refresh/reconnect button next to the connection selector.
Clicking it disconnects and reconnects the active connection, then
invalidates all cached queries to refresh schema, tables, roles, etc.
Shows a spinning animation while reconnecting.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/layout/Toolbar.tsx

@@ -6,8 +6,9 @@ import { ConnectionList } from "@/components/connections/ConnectionList";
 import { ConnectionDialog } from "@/components/connections/ConnectionDialog";
 import { ReadOnlyToggle } from "@/components/layout/ReadOnlyToggle";
 import { useAppStore } from "@/stores/app-store";
-import { useConnections } from "@/hooks/use-connections";
+import { useConnections, useReconnect } from "@/hooks/use-connections";
-import { Database, Plus } from "lucide-react";
+import { toast } from "sonner";
+import { Database, Plus, RefreshCw } from "lucide-react";
 import type { ConnectionConfig, Tab } from "@/types";
 import { getEnvironment } from "@/lib/environment";
 
@@ -17,10 +18,19 @@ export function Toolbar() {
   const [editingConn, setEditingConn] = useState<ConnectionConfig | null>(null);
   const { activeConnectionId, addTab } = useAppStore();
   const { data: connections } = useConnections();
+  const reconnectMutation = useReconnect();
   const activeConn = connections?.find((c) => c.id === activeConnectionId);
   const activeEnv = getEnvironment(activeConn?.environment);
   const activeColor = activeEnv?.color ?? activeConn?.color;
 
+  const handleReconnect = () => {
+    if (!activeConn) return;
+    reconnectMutation.mutate(activeConn, {
+      onSuccess: () => toast.success("Reconnected"),
+      onError: (err) => toast.error("Reconnect failed", { description: String(err) }),
+    });
+  };
+
   const handleNewQuery = () => {
     if (!activeConnectionId) return;
     const tab: Tab = {
@@ -53,6 +63,17 @@ export function Toolbar() {
 
         <ConnectionSelector />
 
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 w-7 p-0"
+          onClick={handleReconnect}
+          disabled={!activeConnectionId || reconnectMutation.isPending}
+          title="Reconnect"
+        >
+          <RefreshCw className={`h-3.5 w-3.5 ${reconnectMutation.isPending ? "animate-spin" : ""}`} />
+        </Button>
+
         <Separator orientation="vertical" className="h-5" />
 
         <ReadOnlyToggle />

src/hooks/use-connections.ts

@@ -88,3 +88,22 @@ export function useDisconnect() {
     },
   });
 }
+
+export function useReconnect() {
+  const queryClient = useQueryClient();
+  const { setPgVersion, setCurrentDatabase } = useAppStore();
+
+  return useMutation({
+    mutationFn: async (config: ConnectionConfig) => {
+      await disconnectDb(config.id);
+      await connectDb(config);
+      const version = await testConnection(config);
+      return { version, database: config.database };
+    },
+    onSuccess: ({ version, database }) => {
+      setPgVersion(version);
+      setCurrentDatabase(database);
+      queryClient.invalidateQueries();
+    },
+  });
+}