From acb6bcf6732be9fcd3dceae77d8cc17a64b49d18 Mon Sep 17 00:00:00 2001
From: Kacper Wojciechowski <39823706+jog1t@users.noreply.github.com>
Date: Mon, 6 Oct 2025 17:25:27 +0200
Subject: [PATCH] fix: show copy button in inputs

---
 frontend/src/components/copy-area.tsx         | 47 +++++++++++--------
 .../ns.$namespace/connect.tsx                 | 14 ++++--
 2 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/copy-area.tsx b/frontend/src/components/copy-area.tsx
index 37b737af27..eaab973f13 100644
--- a/frontend/src/components/copy-area.tsx
+++ b/frontend/src/components/copy-area.tsx
@@ -185,25 +185,34 @@ export function DiscreteInput({
 	const finalShow = showState || !!show;
 	return (
 		<div className="relative">
-			<ClickToCopy value={value}>
-				<Input
-					type={finalShow ? "text" : "password"}
-					readOnly
-					value={finalShow ? value : "very-secure-password"}
-					className={cn("font-mono cursor-pointer", !show && "pr-8")}
-				/>
-			</ClickToCopy>
-			{!show ? (
-				<Button
-					variant="ghost"
-					size="icon-sm"
-					className="absolute right-1 top-1/2 -translate-y-1/2 opacity-50"
-					type="button"
-					onClick={() => setShowState(!showState)}
-				>
-					<Icon icon={showState ? faEye : faEyeSlash} />
-				</Button>
-			) : null}
+			<Input
+				type={finalShow ? "text" : "password"}
+				readOnly
+				value={finalShow ? value : "very-secure-password"}
+				className={cn("font-mono", !show ? "pr-16" : "pr-8")}
+			/>
+			<div className="absolute right-1 top-1/2 -translate-y-1/2 opacity-50 flex gap-1">
+				<ClickToCopy value={value}>
+					<Button variant="ghost" size="icon-sm" type="button">
+						<Icon icon={faCopy} />
+					</Button>
+				</ClickToCopy>
+				{!show ? (
+					<WithTooltip
+						content={finalShow ? "Hide" : "Show"}
+						trigger={
+							<Button
+								variant="ghost"
+								size="icon-sm"
+								type="button"
+								onClick={() => setShowState(!showState)}
+							>
+								<Icon icon={showState ? faEye : faEyeSlash} />
+							</Button>
+						}
+					/>
+				) : null}
+			</div>
 		</div>
 	);
 }
diff --git a/frontend/src/routes/_context/_cloud/orgs.$organization/projects.$project/ns.$namespace/connect.tsx b/frontend/src/routes/_context/_cloud/orgs.$organization/projects.$project/ns.$namespace/connect.tsx
index ad20a0e800..00e9f317a9 100644
--- a/frontend/src/routes/_context/_cloud/orgs.$organization/projects.$project/ns.$namespace/connect.tsx
+++ b/frontend/src/routes/_context/_cloud/orgs.$organization/projects.$project/ns.$namespace/connect.tsx
@@ -1,10 +1,15 @@
-import { faQuestionCircle, faRailway, faVercel, Icon } from "@rivet-gg/icons";
+import {
+	faPlus,
+	faQuestionCircle,
+	faRailway,
+	faVercel,
+	Icon,
+} from "@rivet-gg/icons";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import {
 	createFileRoute,
 	notFound,
 	Link as RouterLink,
-	useNavigate,
 } from "@tanstack/react-router";
 import { match } from "ts-pattern";
 import { HelpDropdown } from "@/app/help-dropdown";
@@ -156,7 +161,10 @@ function Providers() {
 							size="lg"
 							className="min-w-32"
 							variant="outline"
-						></Button>
+							startIcon={<Icon icon={faPlus} />}
+						>
+							Add Provider
+						</Button>
 					</DropdownMenuTrigger>
 					<DropdownMenuContent>
 						<DropdownMenuItem