idp.global/catalog
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(catalog): add admin dashboard components

Browse Source
This commit is contained in:
Jürgen Kunz
2026-05-07 15:35:37 +00:00
parent 5dbbe90b43
commit 3992adbafa
17 changed files with 2832 additions and 802 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ts_web/elements/idp-mobile-showcase.ts
+31 -23
View File
@@ -25,8 +25,8 @@ export class IdpMobileShowcase extends DeesElement {
.showcase {
min-height: 100vh;
padding: 56px;
background: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.08) 1px, transparent 0) 0 0 / 24px 24px, #fafafa;
color: #09090b;
background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--idp-fg), transparent 92%) 1px, transparent 0) 0 0 / 24px 24px, var(--idp-bg);
color: var(--idp-fg);
}
.head {
max-width: 1180px;
@@ -38,10 +38,10 @@ export class IdpMobileShowcase extends DeesElement {
gap: 6px;
margin-bottom: 16px;
padding: 4px 10px;
border: 1px solid #e4e4e7;
border: 1px solid var(--idp-border);
border-radius: 999px;
background: #fff;
color: #52525b;
background: var(--idp-card);
color: var(--idp-fg-3);
font-size: 11px;
font-weight: 500;
}
@@ -49,7 +49,7 @@ export class IdpMobileShowcase extends DeesElement {
width: 6px;
height: 6px;
border-radius: 50%;
background: #16a34a;
background: var(--idp-ok);
}
h1 {
max-width: 900px;
@@ -63,7 +63,7 @@ export class IdpMobileShowcase extends DeesElement {
p {
max-width: 680px;
margin: 0;
color: #52525b;
color: var(--idp-fg-3);
font-size: 16px;
line-height: 1.55;
}
@@ -73,13 +73,13 @@ export class IdpMobileShowcase extends DeesElement {
gap: 24px;
margin-top: 24px;
padding: 16px;
border: 1px solid #e4e4e7;
border: 1px solid var(--idp-border);
border-radius: 12px;
background: #fff;
background: var(--idp-card);
}
.token-label {
margin-bottom: 4px;
color: #71717a;
color: var(--idp-muted-fg);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
@@ -89,7 +89,7 @@ export class IdpMobileShowcase extends DeesElement {
display: flex;
align-items: center;
gap: 8px;
color: #18181b;
color: var(--idp-fg);
font-size: 13px;
font-weight: 550;
}
@@ -98,7 +98,7 @@ export class IdpMobileShowcase extends DeesElement {
height: 18px;
border-radius: 5px;
background: var(--swatch);
border: 1px solid #e4e4e7;
border: 1px solid var(--idp-border);
}
.section {
max-width: 1180px;
@@ -106,7 +106,7 @@ export class IdpMobileShowcase extends DeesElement {
}
.section-title {
margin-bottom: 18px;
color: #71717a;
color: var(--idp-muted-fg);
font-family: var(--idp-mono);
font-size: 12px;
font-weight: 700;
@@ -126,9 +126,9 @@ export class IdpMobileShowcase extends DeesElement {
align-items: start;
}
.watch, .ipad, .mac {
border: 1px solid #e4e4e7;
background: #fff;
box-shadow: 0 20px 50px rgba(0,0,0,0.08);
border: 1px solid var(--idp-border);
background: var(--idp-card);
box-shadow: 0 20px 50px color-mix(in srgb, var(--idp-fg), transparent 92%);
}
.watch {
width: 236px;
@@ -188,8 +188,8 @@ export class IdpMobileShowcase extends DeesElement {
}
.ipad-sidebar {
padding: 18px;
border-right: 1px solid #e4e4e7;
background: #f8f8f7;
border-right: 1px solid var(--idp-border);
background: var(--idp-card-2);
}
.ipad-main {
padding: 22px;
@@ -200,8 +200,9 @@ export class IdpMobileShowcase extends DeesElement {
gap: 10px;
margin-top: 16px;
padding: 16px;
border: 1px solid #e4e4e7;
border: 1px solid var(--idp-border);
border-radius: 12px;
background: var(--idp-card);
}
.mac {
overflow: hidden;
@@ -211,7 +212,7 @@ export class IdpMobileShowcase extends DeesElement {
display: flex;
gap: 6px;
padding: 11px 14px;
border-bottom: 1px solid #e4e4e7;
border-bottom: 1px solid var(--idp-border);
}
.tdot {
width: 10px;
@@ -229,8 +230,15 @@ export class IdpMobileShowcase extends DeesElement {
justify-content: space-between;
gap: 12px;
padding: 12px;
border: 1px solid #e4e4e7;
border: 1px solid var(--idp-border);
border-radius: 10px;
background: var(--idp-card);
}
.inline-muted {
color: var(--idp-muted-fg);
}
.watch-muted {
color: #a1a1aa;
}
.row-label {
display: inline-flex;
@@ -276,8 +284,8 @@ export class IdpMobileShowcase extends DeesElement {
<section class="section">
<div class="section-title">Watch, iPad, Mac</div>
<div class="multi">
<div class="watch"><div class="watch-screen"><div class="watch-app">idp.global</div><idp-icon name="shield" size="28" style="margin:0 auto;color:#60a5fa"></idp-icon><div class="watch-title">GitHub wants access</div><div style="color:#a1a1aa;font-size:12px;">repo:read - Berlin</div><div class="watch-actions"><button><idp-icon name="x" size="13"></idp-icon>Deny</button><button class="approve"><idp-icon name="check" size="13"></idp-icon>Approve</button></div></div></div>
<div class="ipad"><div class="ipad-shell"><aside class="ipad-sidebar"><strong>Inbox</strong><p>3 pending approvals</p><div class="ipad-card"><idp-icon name="globe" size="16"></idp-icon><div><strong>GitHub OAuth</strong><br/><span style="color:#71717a">repo:read - now</span></div></div><div class="ipad-card"><idp-icon name="cloud" size="16"></idp-icon><div><strong>Hetzner Cloud</strong><br/><span style="color:#71717a">new network - 8m</span></div></div></aside><main class="ipad-main"><h2>Approval detail</h2><p>Full context before a sensitive action is approved.</p><div class="ipad-card"><idp-icon name="laptop" size="16"></idp-icon><div><strong>Device</strong><br/>MacBook Pro - Safari - Berlin, DE</div></div><div class="ipad-card"><idp-icon name="key" size="16"></idp-icon><div><strong>Requested scopes</strong><br/>openid, profile, email, repo:read</div></div></main></div></div>
<div class="watch"><div class="watch-screen"><div class="watch-app">idp.global</div><idp-icon name="shield" size="28" style="margin:0 auto;color:var(--idp-accent-hover)"></idp-icon><div class="watch-title">GitHub wants access</div><div class="watch-muted" style="font-size:12px;">repo:read - Berlin</div><div class="watch-actions"><button><idp-icon name="x" size="13"></idp-icon>Deny</button><button class="approve"><idp-icon name="check" size="13"></idp-icon>Approve</button></div></div></div>
<div class="ipad"><div class="ipad-shell"><aside class="ipad-sidebar"><strong>Inbox</strong><p>3 pending approvals</p><div class="ipad-card"><idp-icon name="globe" size="16"></idp-icon><div><strong>GitHub OAuth</strong><br/><span class="inline-muted">repo:read - now</span></div></div><div class="ipad-card"><idp-icon name="cloud" size="16"></idp-icon><div><strong>Hetzner Cloud</strong><br/><span class="inline-muted">new network - 8m</span></div></div></aside><main class="ipad-main"><h2>Approval detail</h2><p>Full context before a sensitive action is approved.</p><div class="ipad-card"><idp-icon name="laptop" size="16"></idp-icon><div><strong>Device</strong><br/>MacBook Pro - Safari - Berlin, DE</div></div><div class="ipad-card"><idp-icon name="key" size="16"></idp-icon><div><strong>Requested scopes</strong><br/>openid, profile, email, repo:read</div></div></main></div></div>
<div class="mac"><div class="mac-bar"><span class="tdot" style="background:#ff5f57"></span><span class="tdot" style="background:#ffbd2e"></span><span class="tdot" style="background:#28c840"></span></div><div class="mac-body"><strong>Menu bar approvals</strong><div class="mac-row"><span class="row-label"><idp-icon name="globe" size="15"></idp-icon>GitHub OAuth</span><idp-button variant="accent" size="sm" icon="check">Approve</idp-button></div><div class="mac-row"><span class="row-label"><idp-icon name="nfc" size="15"></idp-icon>NFC tap - door 4F</span><idp-button variant="ghost" size="sm" icon="chevron-right">Review</idp-button></div><div class="mac-row"><span class="row-label"><idp-icon name="key" size="15"></idp-icon>Key rotation</span><idp-button variant="ghost" size="sm" icon="shield">Confirm</idp-button></div></div></div>
</div>
</section>