fix(computer): show ✓ check after a successful Test (not a stuck spinner)

When the user clicks Test, the button now transitions spinner → ✓ (green) on
success / ✗ (red) on failure (persisting until the next test or computer
change), instead of reverting to plain 'Test' text with no success indicator.

Also refresh the connection-status badge immediately after a test completes, so
a stale 'connecting' spinner caught by the 4s poll mid-test is cleared and the
badge reflects the real post-test state. Clear the test result when the selected
computer changes so a stale ✓ from alias A doesn't persist for alias B.

1 files changed, 15 insertions, 1 deletions

diff --git a/src/features/computer/ui/ComputerField.svelte b/src/features/computer/ui/ComputerField.svelte
index be3ce9c..ce19b4d 100644
--- a/src/features/computer/ui/ComputerField.svelte
+++ b/src/features/computer/ui/ComputerField.svelte
@@ -76,8 +76,10 @@
 	}
 
 	// Re-fetch on mount + whenever the selected alias changes (incl. after a save).
+	// Clear the test result so a stale ✓ from alias A doesn't persist for alias B.
 	$effect(() => {
 		void computerId;
+		testResult = null;
 		void refreshStatus();
 	});
 
@@ -106,6 +108,9 @@
 		testResult = result.ok
 			? { ok: true, error: null }
 			: { ok: false, error: result.error };
+		// Refresh the connection-status badge so it reflects the post-test state
+		// (clears a stale "connecting" spinner caught by the poll mid-test).
+		void refreshStatus();
 	}
 
 	const badgeClass = $derived.by(() => {
@@ -160,9 +165,18 @@
 				class="btn btn-ghost btn-xs"
 				disabled={testing}
 				onclick={runTest}
+				title={testResult
+					? testResult.ok
+						? "Connection OK"
+						: testResult.error ?? "Failed"
+					: "Test connection"}
 			>
 				{#if testing}
 					<span class="loading loading-spinner loading-[10px]"></span>
+				{:else if testResult?.ok}
+					<span class="text-success">✓</span>
+				{:else if testResult}
+					<span class="text-error">✗</span>
 				{:else}
 					Test
 				{/if}
@@ -170,7 +184,7 @@
 
 			{#if testResult}
 				<span class="text-xs {testResult.ok ? 'text-success' : 'text-error'}">
-					{testResult.ok ? "Connection OK" : testResult.error ?? "Failed"}
+					{testResult.ok ? "OK" : testResult.error ?? "Failed"}
 				</span>
 			{/if}
 		</div>