@kyro-cms/admin 0.10.5 → 0.10.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.10.5",
+  "version": "0.10.7",
   "engines": {
     "node": ">=22"
   },

package/src/components/ApiKeysManager.tsx

@@ -3,9 +3,9 @@ import { apiPost } from "../lib/api";
 import { useResourceManager } from "../lib/useResourceManager";
 import { useUIStore, toast } from "../lib/stores";
 import {
-  Key, Plus, Trash2, Copy, CheckCircle2, Clock,
+  Key, Plus, Trash2, Clock, CheckCircle2,
   Shield, Zap, AlertTriangle, Info, Terminal,
-  Code, RefreshCw,
+  Code,
 } from "./ui/icons";
 import { PageHeader } from "./ui/PageHeader";
 import { Badge } from "./ui/Badge";
@@ -62,9 +62,7 @@ export function ApiKeysManager() {
   const [newKeyName, setNewKeyName] = useState("");
   const [newKeyPermissions, setNewKeyPermissions] = useState<string[]>(["*"]);
   const [newKeyExpires, setNewKeyExpires] = useState("");
-  const [copiedId, setCopiedId] = useState<string | null>(null);
   const [createError, setCreateError] = useState("");
-  const [rotatingId, setRotatingId] = useState<string | null>(null);
   const { confirm: kyroConfirm } = useUIStore();
 
   const handleCreateKey = async () => {
@@ -81,32 +79,6 @@ export function ApiKeysManager() {
     } catch { setCreateError("Failed to create API key"); }
   };
 
-  const handleRotateKey = (key: ApiKeyItem) => {
-    kyroConfirm({
-      title: "Rotate API Key",
-      message: `Are you sure you want to regenerate the key "${key.name}"? The current key will stop working immediately and this action cannot be undone.`,
-      variant: "danger",
-      onConfirm: async () => {
-        setRotatingId(key.id);
-        try {
-          const rotated = await apiPost<ApiKeyItem>(`/api/keys/${key.id}/rotate`);
-          setNewKey(rotated);
-          toast.success("API key rotated");
-        } catch {
-          toast.error("Failed to rotate key. Please try again.");
-        } finally {
-          setRotatingId(null);
-        }
-      },
-    });
-  };
-
-  const copyToClipboard = (key: string, id: string) => {
-    navigator.clipboard.writeText(key);
-    setCopiedId(id);
-    setTimeout(() => setCopiedId(null), 2000);
-  };
-
   return (
     <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 pb-32">
 
@@ -169,13 +141,6 @@ export function ApiKeysManager() {
                   <span>  -H <span className="text-green-500">"Authorization: ApiKey kyro_xxx"</span></span>
                 </div>
               </pre>
-              <button
-                type="button"
-                onClick={() => navigator.clipboard.writeText('curl -X GET https://api.yoursite.com/v1/posts -H "Authorization: ApiKey YOUR_KEY"')}
-                className="absolute top-3 right-3 p-2 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg opacity-0 group-hover/code:opacity-100 transition-opacity hover:text-[var(--kyro-primary)] shadow-sm"
-              >
-                <Copy className="w-3.5 h-3.5" />
-              </button>
             </div>
           </div>
         </div>
@@ -220,13 +185,6 @@ export function ApiKeysManager() {
                   <span>{"}"});</span>
                 </div>
               </pre>
-              <button
-                type="button"
-                onClick={() => navigator.clipboard.writeText('await fetch(url, { headers: { "Authorization": "ApiKey YOUR_KEY" } })')}
-                className="absolute top-3 right-3 p-2 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg opacity-0 group-hover/code:opacity-100 transition-opacity hover:text-[var(--kyro-primary)] shadow-sm"
-              >
-                <Copy className="w-3.5 h-3.5" />
-              </button>
             </div>
           </div>
         </div>
@@ -281,18 +239,8 @@ export function ApiKeysManager() {
                   This is the <span className="text-green-500 font-bold uppercase tracking-tight">only time</span> the full key will be shown. Please store it securely.
                 </p>
 
-                <div className="flex flex-col sm:flex-row gap-3">
-                  <div className="flex-1 flex items-center gap-3 p-4 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-2xl font-mono text-sm break-all group relative">
-                    <span className="opacity-80 select-all">{newKey.key}</span>
-                  </div>
-                  <button
-                    type="button"
-                    onClick={() => copyToClipboard(newKey.key!, newKey.id)}
-                    className="kyro-btn kyro-btn-primary flex items-center justify-center gap-2 px-8 py-4 rounded-2xl font-bold hover:scale-[1.02] active:scale-[0.98] transition-all shadow-lg shadow-[var(--kyro-primary)]/20"
-                  >
-                    {copiedId === newKey.id ? <CheckCircle2 className="w-5 h-5" /> : <Copy className="w-5 h-5" />}
-                    <span>{copiedId === newKey.id ? "Copied" : "Copy Key"}</span>
-                  </button>
+                <div className="flex-1 flex items-center gap-3 p-4 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-2xl font-mono text-sm break-all group relative">
+                  <span className="opacity-80 select-all">{newKey.key}</span>
                 </div>
 
                 <button
@@ -345,87 +293,46 @@ export function ApiKeysManager() {
               {keys.map((key) => (
                 <div
                   key={key.id}
-                  className="group relative overflow-hidden bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-3xl p-6 hover:border-[var(--kyro-primary)]/50 transition-all duration-300"
+                  className="group relative overflow-hidden bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-2xl p-3 hover:border-[var(--kyro-primary)]/50 transition-all duration-300"
                 >
-                  <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 relative z-10">
-                    <div className="flex-1">
-                      <div className="flex items-center gap-3 mb-4">
-                        <div className="p-2.5 bg-[var(--kyro-surface-accent)] rounded-xl group-hover:bg-[var(--kyro-primary)]/10 transition-colors">
-                          <Key className="w-5 h-5 text-[var(--kyro-text-secondary)] group-hover:text-[var(--kyro-primary)] transition-colors" />
-                        </div>
-                        <div>
-                          <h3 className="text-lg font-bold group-hover:text-[var(--kyro-primary)] transition-colors">{key.name}</h3>
-                          <div className="flex items-center gap-2 mt-0.5">
-                            <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
-                            <span className="text-[10px] font-bold uppercase tracking-wider text-green-500">Live</span>
-                          </div>
-                        </div>
+                  <div className="flex items-center justify-between gap-3">
+                    <div className="flex items-center gap-3 min-w-0 flex-1">
+                      <div className="p-1.5 bg-[var(--kyro-surface-accent)] rounded-lg group-hover:bg-[var(--kyro-primary)]/10 transition-colors shrink-0">
+                        <Key className="w-3.5 h-3.5 text-[var(--kyro-text-secondary)] group-hover:text-[var(--kyro-primary)] transition-colors" />
                       </div>
-
-                      <div className="grid sm:grid-cols-3 gap-6 pt-2">
-                        <div className="space-y-1">
-                          <span className="text-[9px] font-bold uppercase tracking-widest opacity-30">Key Snippet</span>
-                          <div className="font-mono text-sm opacity-60 tracking-tighter">
-                            {key.keyPrefix}<span className="opacity-20">••••••••••••••••</span>
-                          </div>
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-center gap-2">
+                          <h3 className="text-sm font-bold truncate group-hover:text-[var(--kyro-primary)] transition-colors">{key.name}</h3>
+                          <span className="w-1.5 h-1.5 rounded-full bg-green-500 shrink-0" />
                         </div>
-                        <div className="space-y-1 border-l border-[var(--kyro-border)] pl-6">
-                          <span className="text-[9px] font-bold uppercase tracking-widest opacity-30">Usage Context</span>
-                          <div className="flex flex-wrap gap-1">
+                        <div className="flex items-center gap-3 text-[11px] text-[var(--kyro-text-secondary)]">
+                          <span className="font-mono opacity-60">{key.keyPrefix}••••••••••••••••</span>
+                          <span className="opacity-30">·</span>
+                          <span className="flex items-center gap-1">
                             {key.permissions?.includes("*") ? (
-                              <Badge variant="warning" className="text-[8px] font-bold uppercase px-1.5">Full Access</Badge>
+                              "Full Access"
                             ) : (
-                              key.permissions?.slice(0, 2).map((p) => (
-                                <Badge key={p} variant="outline" className="text-[8px] font-bold px-1.5 opacity-60">{p}</Badge>
-                              ))
-                            )}
-                            {key.permissions && key.permissions.length > 2 && (
-                              <span className="text-[8px] font-bold opacity-30">+{key.permissions.length - 2} more</span>
+                              key.permissions?.slice(0, 2).join(", ")
                             )}
-                          </div>
-                        </div>
-                        <div className="space-y-1 border-l border-[var(--kyro-border)] pl-6">
-                          <span className="text-[9px] font-bold uppercase tracking-widest opacity-30">Last Activity</span>
-                          <div className="text-[10px] font-bold opacity-60 flex items-center gap-1.5">
+                            {key.permissions && key.permissions.length > 2 && <span className="opacity-40">+{key.permissions.length - 2}</span>}
+                          </span>
+                          <span className="opacity-30">·</span>
+                          <span className="flex items-center gap-1">
                             <Clock className="w-3 h-3" />
-                            {key.lastUsed ? new Date(key.lastUsed).toLocaleDateString() : "Never used"}
-                          </div>
+                            {key.lastUsed ? new Date(key.lastUsed).toLocaleDateString() : "Never"}
+                          </span>
                         </div>
                       </div>
                     </div>
 
-                    <div className="flex items-center gap-2 lg:bg-[var(--kyro-surface-accent)]/50 lg:p-2 lg:rounded-2xl lg:opacity-0 group-hover:opacity-100 transition-all duration-300 lg:translate-x-4 group-hover:translate-x-0">
-                      <button
-                        type="button"
-                        onClick={() => copyToClipboard(key.key || `${key.keyPrefix}...`, key.id)}
-                        className="flex-1 lg:flex-none p-3 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-xl hover:border-[var(--kyro-primary)] transition-all flex items-center justify-center gap-2"
-                        title="Copy key"
-                      >
-                        {copiedId === key.id ? <CheckCircle2 className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
-                        <span className="text-xs font-bold">{copiedId === key.id ? "Copied" : "Copy"}</span>
-                      </button>
-
-                      <div className="w-px h-6 bg-[var(--kyro-border)] mx-1 hidden lg:block" />
-
-                      <button
-                        type="button"
-                        onClick={() => handleRotateKey(key)}
-                        disabled={rotatingId === key.id}
-                        className="p-3 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-xl hover:border-[var(--kyro-primary)] transition-all group/rotate"
-                        title="Rotate Key"
-                      >
-                        <RefreshCw className={`w-4 h-4 text-[var(--kyro-text-secondary)] group-hover/rotate:text-[var(--kyro-primary)] ${rotatingId === key.id ? "animate-spin" : ""}`} />
-                      </button>
-
-                      <button
-                        type="button"
-                        onClick={() => remove(key.id, "API Key")}
-                        className="p-3 bg-red-500/5 border border-red-500/10 rounded-xl hover:bg-red-500/10 hover:border-red-500/30 transition-all group/delete"
-                        title="Revoke Access"
-                      >
-                        <Trash2 className="w-4 h-4 text-red-500/50 group-hover/delete:text-red-500" />
-                      </button>
-                    </div>
+                    <button
+                      type="button"
+                      onClick={() => remove(key.id, "API Key")}
+                      className="p-2 bg-red-500/5 border border-red-500/10 rounded-lg hover:bg-red-500/10 hover:border-red-500/30 transition-all opacity-0 group-hover:opacity-100 shrink-0"
+                      title="Revoke Access"
+                    >
+                      <Trash2 className="w-3.5 h-3.5 text-red-500/50 group-hover/delete:text-red-500" />
+                    </button>
                   </div>
                 </div>
               ))}