feat: polish alpine live page states

apps/ui/js/api-keys.js

@@ -69,8 +69,15 @@ async function revokeKey(id) {
   if (!confirm('Revoke this key? All requests using it will fail immediately.')) return;
 
   try {
+    var key = KEYS.find(function(item) { return item.id === id; });
     await window.CrankApi.revokePlatformApiKey(currentWorkspaceId, id);
     await loadKeys();
+    if (window.CrankUi) {
+      window.CrankUi.success(
+        (key ? key.name : 'API key') + ' was revoked.',
+        'Key revoked'
+      );
+    }
   } catch (error) {
     if (window.CrankUi) {
       window.CrankUi.error(error.message || 'Failed to revoke key', 'Revoke failed');
@@ -82,8 +89,15 @@ async function deleteKey(id) {
   if (!confirm('Delete this key? This cannot be undone.')) return;
 
   try {
+    var key = KEYS.find(function(item) { return item.id === id; });
     await window.CrankApi.deletePlatformApiKey(currentWorkspaceId, id);
     await loadKeys();
+    if (window.CrankUi) {
+      window.CrankUi.success(
+        (key ? key.name : 'API key') + ' was deleted.',
+        'Key deleted'
+      );
+    }
   } catch (error) {
     if (window.CrankUi) {
       window.CrankUi.error(error.message || 'Failed to delete key', 'Delete failed');
@@ -229,6 +243,7 @@ modal.addEventListener('click', function(event) {
 });
 
 document.getElementById('modal-confirm-btn').addEventListener('click', async function() {
+  var button = this;
   var name = document.getElementById('new-key-name').value.trim();
   if (!name) {
     document.getElementById('new-key-name').focus();
@@ -242,6 +257,8 @@ document.getElementById('modal-confirm-btn').addEventListener('click', async fun
   }
 
   try {
+    button.disabled = true;
+    button.textContent = 'Creating…';
     var created = await createKey(name, Array.from(selectedScopes));
     KEYS.unshift(created.record);
     document.getElementById('reveal-key-value').textContent = created.rawKey;
@@ -250,10 +267,16 @@ document.getElementById('modal-confirm-btn').addEventListener('click', async fun
     document.getElementById('modal-footer-create').style.display = 'none';
     document.getElementById('modal-footer-done').style.display = '';
     renderTable();
+    if (window.CrankUi) {
+      window.CrankUi.success('Copy the key now. It will not be shown again.', 'API key created');
+    }
   } catch (error) {
     if (window.CrankUi) {
       window.CrankUi.error(error.message || 'Failed to create key', 'Key creation failed');
     }
+  } finally {
+    button.disabled = false;
+    button.textContent = 'Create key';
   }
 });
 
@@ -265,6 +288,9 @@ document.getElementById('copy-key-btn').addEventListener('click', function() {
     navigator.clipboard.writeText(value).catch(function() {});
   }
   this.innerHTML = '<svg width="13" height="13"><use href="' + (window.APP_BASE || '') + 'icons/general/check.svg#icon"/></svg>';
+  if (window.CrankUi) {
+    window.CrankUi.info('Store the raw key securely. It cannot be revealed again.', 'API key copied');
+  }
 });
 
 document.getElementById('key-search').addEventListener('input', function() {
@@ -276,6 +302,9 @@ function copyPrefix(prefix) {
   if (navigator.clipboard) {
     navigator.clipboard.writeText(prefix).catch(function() {});
   }
+  if (window.CrankUi) {
+    window.CrankUi.info(prefix, 'Key prefix copied');
+  }
 }
 
 document.addEventListener('DOMContentLoaded', async function() {