Polish approval and import UI
CI / Rust Checks (push) Successful in 5m32s
CI / UI Checks (push) Successful in 4s
CI / Deployment Manifests (push) Successful in 3s
CI / Frontend E2E (push) Successful in 3m30s
CI / Deploy (push) Successful in 1m33s

This commit is contained in:
github-ops
2026-06-24 21:51:13 +00:00
parent 3b51cb89df
commit 209b3e1485
6 changed files with 142 additions and 98 deletions
+26 -14
View File
@@ -44,6 +44,19 @@
background: var(--accent);
color: #fff;
}
.key-kind-header-control {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.key-kind-header-hint {
flex-basis: 100%;
max-width: 520px;
margin: 0;
text-align: right;
}
.approval-warning-callout {
display: flex;
gap: 10px;
@@ -63,8 +76,10 @@
@media (max-width: 720px) {
#keys-table-wrap { display: none; }
.keys-card-list { display: grid; }
.key-kind-header-control { justify-content: stretch; width: 100%; }
.key-kind-tabs { width: 100%; }
.key-kind-tab { flex: 1; }
.key-kind-header-hint { text-align: left; }
}
</style>
<script src="%CRANK_BUNDLE_PROTECTED_CORE%"></script>
@@ -139,10 +154,17 @@
<p class="page-subtitle" data-i18n="apikeys.subtitle">These keys connect an MCP client to the MCP server and are issued for a specific agent.</p>
</div>
<div class="page-header-actions">
<button class="btn-primary" id="btn-create-key" type="button">
<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor"><path d="M7.75 2a.75.75 0 01.75.75V7h4.25a.75.75 0 010 1.5H8.5v4.25a.75.75 0 01-1.5 0V8.5H2.75a.75.75 0 010-1.5H7V2.75A.75.75 0 017.75 2z"/></svg>
<span id="btn-create-key-label" data-i18n="apikeys.new">Create key</span>
</button>
<div class="key-kind-header-control">
<div class="key-kind-tabs" role="tablist" aria-label="Key type">
<button class="key-kind-tab active" id="key-kind-mcp-client" type="button" data-key-kind="mcp_client" data-i18n="apikeys.kind.mcp">MCP clients</button>
<button class="key-kind-tab" id="key-kind-approval" type="button" data-key-kind="approval" data-i18n="apikeys.kind.approval">Approvals</button>
</div>
<button class="btn-primary" id="btn-create-key" type="button">
<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor"><path d="M7.75 2a.75.75 0 01.75.75V7h4.25a.75.75 0 010 1.5H8.5v4.25a.75.75 0 01-1.5 0V8.5H2.75a.75.75 0 010-1.5H7V2.75A.75.75 0 017.75 2z"/></svg>
<span id="btn-create-key-label" data-i18n="apikeys.new">Create key</span>
</button>
<div class="field-hint key-kind-header-hint" id="key-kind-hint"></div>
</div>
</div>
</div>
@@ -157,16 +179,6 @@
</div>
</div>
<div class="section-card">
<div class="section-card-body" style="display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;">
<div class="key-kind-tabs" role="tablist" aria-label="Key type">
<button class="key-kind-tab active" id="key-kind-mcp-client" type="button" data-key-kind="mcp_client" data-i18n="apikeys.kind.mcp">MCP clients</button>
<button class="key-kind-tab" id="key-kind-approval" type="button" data-key-kind="approval" data-i18n="apikeys.kind.approval">Approvals</button>
</div>
<div class="field-hint" id="key-kind-hint" style="max-width:560px;margin:0;"></div>
</div>
</div>
<div class="section-card">
<div class="section-card-header">
<div>