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-settings.ts
+++ b/ts_web/elements/sz-demo-view-settings.ts
@@ -0,0 +1,118 @@
+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-settings': SzDemoViewSettings;
+  }
+}
+
+@customElement('sz-demo-view-settings')
+export class SzDemoViewSettings extends DeesElement {
+  private appui: DeesAppui | null = null;
+
+  async onActivate(context: { appui: DeesAppui; viewId: string }) {
+    this.appui = context.appui;
+
+    // Settings doesn't need content tabs, but we set up the secondary menu
+    this.appui.setSecondaryMenu({
+      heading: 'Settings',
+      groups: [
+        {
+          name: 'Categories',
+          items: [
+            { key: 'General', iconName: 'lucide:Settings', action: () => { console.log('General settings'); } },
+            { key: 'Network', iconName: 'lucide:Network', action: () => { console.log('Network settings'); } },
+            { key: 'Security', iconName: 'lucide:Shield', action: () => { console.log('Security settings'); } },
+            { key: 'Certificates', iconName: 'lucide:FileBadge', action: () => { console.log('Certificate settings'); } },
+          ],
+        },
+        {
+          name: 'Actions',
+          items: [
+            { type: 'action', key: 'Export Config', iconName: 'lucide:Download', action: () => { console.log('Export config'); } },
+            { type: 'action', key: 'Import Config', iconName: 'lucide:Upload', action: () => { console.log('Import config'); } },
+            { type: 'action', variant: 'danger', key: 'Reset to Default', iconName: 'lucide:RotateCcw', confirmMessage: 'Are you sure you want to reset all settings to default?', action: () => { console.log('Reset settings'); } },
+          ],
+        },
+      ],
+    });
+  }
+
+  onDeactivate() {
+    // Cleanup if needed
+  }
+  private demoSettings = {
+    darkMode: true,
+    cloudflareToken: '',
+    cloudflareZoneId: '',
+    autoRenewCerts: true,
+    renewalThreshold: 30,
+    acmeEmail: 'admin@serve.zone',
+    httpPort: 80,
+    httpsPort: 443,
+    forceHttps: true,
+  };
+
+  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;
+      }
+
+      .settings-container {
+        max-width: 800px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="page-header">
+        <h1 class="page-title">Settings</h1>
+        <p class="page-subtitle">Configure your onebox instance</p>
+      </div>
+
+      <div class="settings-container">
+        <sz-settings-view
+          .settings=${this.demoSettings}
+          currentUser="admin"
+          @setting-change=${(e: CustomEvent) => console.log('Setting change:', e.detail)}
+          @change-password=${(e: CustomEvent) => console.log('Change password:', e.detail)}
+          @reset=${() => console.log('Reset settings')}
+          @save=${(e: CustomEvent) => console.log('Save settings:', e.detail)}
+        ></sz-settings-view>
+      </div>
+    `;
+  }
+}