update

2026-01-03 02:44:25 +00:00
commit 4c0e498c4e
140 changed files with 245676 additions and 0 deletions
--- a/ts_web/elements/sz-demo-view-tokens.ts
+++ b/ts_web/elements/sz-demo-view-tokens.ts
@@ -0,0 +1,109 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import type { DeesAppui } from '@design.estate/dees-catalog';
+import './index.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-demo-view-tokens': SzDemoViewTokens;
+  }
+}
+
+@customElement('sz-demo-view-tokens')
+export class SzDemoViewTokens extends DeesElement {
+  private appui: DeesAppui | null = null;
+
+  async onActivate(context: { appui: DeesAppui; viewId: string }) {
+    this.appui = context.appui;
+
+    // Tokens secondary menu
+    this.appui.setSecondaryMenu({
+      heading: 'Tokens',
+      groups: [
+        {
+          name: 'Actions',
+          items: [
+            { type: 'action', key: 'Create Global Token', iconName: 'lucide:Plus', action: () => { console.log('Create global token'); } },
+            { type: 'action', key: 'Create CI Token', iconName: 'lucide:GitBranch', action: () => { console.log('Create CI token'); } },
+          ],
+        },
+        {
+          name: 'Token Types',
+          items: [
+            { key: 'Global Tokens', iconName: 'lucide:Key', badge: '3', action: () => { console.log('Filter global'); } },
+            { key: 'CI Tokens', iconName: 'lucide:Cpu', badge: '3', action: () => { console.log('Filter CI'); } },
+          ],
+        },
+      ],
+    });
+  }
+
+  onDeactivate() {
+    // Cleanup if needed
+  }
+  private demoGlobalTokens = [
+    { id: '1', name: 'CI/CD Pipeline', type: 'global' as const, createdAt: '2024-01-15', lastUsed: '2024-01-20' },
+    { id: '2', name: 'Development', type: 'global' as const, createdAt: '2024-01-10' },
+    { id: '3', name: 'Production Deploy', type: 'global' as const, createdAt: '2024-01-05', lastUsed: '2024-01-19' },
+  ];
+
+  private demoCiTokens = [
+    { id: '4', name: 'api-gateway-ci', type: 'ci' as const, service: 'api-gateway', createdAt: '2024-01-18', lastUsed: '2024-01-20' },
+    { id: '5', name: 'frontend-ci', type: 'ci' as const, service: 'frontend', createdAt: '2024-01-12', lastUsed: '2024-01-19' },
+    { id: '6', name: 'worker-service-ci', type: 'ci' as const, service: 'worker-service', createdAt: '2024-01-08' },
+  ];
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        padding: 24px;
+        height: 100%;
+        overflow-y: auto;
+        box-sizing: border-box;
+      }
+
+      .page-header {
+        margin-bottom: 24px;
+      }
+
+      .page-title {
+        font-size: 24px;
+        font-weight: 700;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        margin: 0 0 8px 0;
+      }
+
+      .page-subtitle {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin: 0;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="page-header">
+        <h1 class="page-title">Tokens</h1>
+        <p class="page-subtitle">Manage registry access tokens for CI/CD pipelines</p>
+      </div>
+
+      <sz-tokens-view
+        .globalTokens=${this.demoGlobalTokens}
+        .ciTokens=${this.demoCiTokens}
+        @create=${(e: CustomEvent) => console.log('Create token:', e.detail)}
+        @copy=${(e: CustomEvent) => console.log('Copy token:', e.detail)}
+        @regenerate=${(e: CustomEvent) => console.log('Regenerate token:', e.detail)}
+        @delete=${(e: CustomEvent) => console.log('Delete token:', e.detail)}
+      ></sz-tokens-view>
+    `;
+  }
+}