From 9e50bb2c370e4abb02fc608031a959180a6ff0e9 Mon Sep 17 00:00:00 2001
From: Mario Zechner <badlogicgames@gmail.com>
Date: Wed, 29 Oct 2025 21:14:19 +0100
Subject: [PATCH] Fix ProviderKeyInput UX: improve save button state and remove
 clear button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add inputChanged state to track when user modifies input after save
- Remove Clear button and removeKey() method entirely
- Save button now disables after successful save until input changes
- Save button stays enabled on test failure (allows immediate retry)
- Keep input field showing stars (••••) after successful save instead of clearing

This provides clearer feedback and prevents accidental key deletion.
---
 .../web-ui/src/components/ProviderKeyInput.ts | 39 +++++--------------
 1 file changed, 10 insertions(+), 29 deletions(-)

diff --git a/packages/web-ui/src/components/ProviderKeyInput.ts b/packages/web-ui/src/components/ProviderKeyInput.ts
index 72478c09..60edda09 100644
--- a/packages/web-ui/src/components/ProviderKeyInput.ts
+++ b/packages/web-ui/src/components/ProviderKeyInput.ts
@@ -24,6 +24,7 @@ export class ProviderKeyInput extends LitElement {
 	@state() private testing = false;
 	@state() private failed = false;
 	@state() private hasKey = false;
+	@state() private inputChanged = false;
 
 	protected createRenderRoot() {
 		return this;
@@ -89,7 +90,7 @@ export class ProviderKeyInput extends LitElement {
 			try {
 				await getAppStorage().providerKeys.set(this.provider, this.keyInput);
 				this.hasKey = true;
-				this.keyInput = "";
+				this.inputChanged = false;
 				this.requestUpdate();
 			} catch (error) {
 				console.error("Failed to save API key:", error);
@@ -108,17 +109,6 @@ export class ProviderKeyInput extends LitElement {
 		}
 	}
 
-	private async removeKey() {
-		try {
-			await getAppStorage().providerKeys.delete(this.provider);
-			this.hasKey = false;
-			this.keyInput = "";
-			this.requestUpdate();
-		} catch (error) {
-			console.error("Failed to remove API key:", error);
-		}
-	}
-
 	render() {
 		return html`
 			<div class="space-y-3">
@@ -140,27 +130,18 @@ export class ProviderKeyInput extends LitElement {
 						value: this.keyInput,
 						onInput: (e: Event) => {
 							this.keyInput = (e.target as HTMLInputElement).value;
+							this.inputChanged = true;
 							this.requestUpdate();
 						},
 						className: "flex-1",
 					})}
-					${
-						this.hasKey
-							? Button({
-									onClick: () => this.removeKey(),
-									variant: "ghost",
-									size: "sm",
-									children: i18n("Clear"),
-									className: "!text-destructive",
-								})
-							: Button({
-									onClick: () => this.saveKey(),
-									variant: "default",
-									size: "sm",
-									disabled: !this.keyInput || this.testing,
-									children: i18n("Save"),
-								})
-					}
+					${Button({
+						onClick: () => this.saveKey(),
+						variant: "default",
+						size: "sm",
+						disabled: !this.keyInput || this.testing || (this.hasKey && !this.inputChanged),
+						children: i18n("Save"),
+					})}
 				</div>
 			</div>
 		`;