catalog/ts_web/pages/sz-demo-app-shell.ts

import {
  DeesElement,
  customElement,
  html,
  css,
  cssManager,
  type TemplateResult,
} from '@design.estate/dees-element';
import type { DeesAppui } from '@design.estate/dees-catalog';
import '@design.estate/dees-catalog';
import '../elements/index.js';

declare global {
  interface HTMLElementTagNameMap {
    'sz-demo-app-shell': SzDemoAppShell;
  }
}

@customElement('sz-demo-app-shell')
export class SzDemoAppShell extends DeesElement {
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        height: 100%;
        width: 100%;
      }

      dees-appui {
        height: 100%;
        width: 100%;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <dees-appui></dees-appui>
    `;
  }

  async firstUpdated() {
    const appui = this.shadowRoot?.querySelector('dees-appui') as DeesAppui;

    if (!appui) return;

    // Configure the application shell
    appui.configure({
      branding: {
        logoIcon: 'lucide:Box',
        logoText: 'serve.zone',
      },
      appBar: {
        showSearch: true,
        breadcrumbs: 'serve.zone',
        menuItems: [
          {
            name: 'File',
            action: async () => {},
            submenu: [
              { name: 'New Service', shortcut: 'Cmd+N', action: async () => { console.log('New Service'); } },
              { name: 'Import Configuration', action: async () => { console.log('Import'); } },
              { name: 'Export Configuration', action: async () => { console.log('Export'); } },
              { divider: true },
              { name: 'Preferences', shortcut: 'Cmd+,', action: async () => { appui.navigateToView('settings'); } },
            ],
          },
          {
            name: 'View',
            action: async () => {},
            submenu: [
              { name: 'Dashboard', shortcut: 'Cmd+1', action: async () => { appui.navigateToView('dashboard'); } },
              { name: 'Services', shortcut: 'Cmd+2', action: async () => { appui.navigateToView('services'); } },
              { name: 'Network', shortcut: 'Cmd+3', action: async () => { appui.navigateToView('network'); } },
              { divider: true },
              { name: 'Activity Log', shortcut: 'Cmd+Shift+A', action: async () => { appui.toggleActivityLog(); } },
              { name: 'Toggle Sidebar', shortcut: 'Cmd+B', action: async () => { appui.setMainMenuCollapsed(!(appui as any).mainmenuCollapsed); } },
            ],
          },
          {
            name: 'Services',
            action: async () => {},
            submenu: [
              { name: 'Deploy New Service', action: async () => { console.log('Deploy'); } },
              { name: 'Start All', action: async () => { console.log('Start all'); } },
              { name: 'Stop All', action: async () => { console.log('Stop all'); } },
              { divider: true },
              { name: 'Garbage Collect', action: async () => { console.log('GC'); } },
            ],
          },
          {
            name: 'Help',
            action: async () => {},
            submenu: [
              { name: 'Documentation', action: async () => { window.open('https://docs.serve.zone', '_blank'); } },
              { name: 'Release Notes', action: async () => { console.log('Release notes'); } },
              { divider: true },
              { name: 'About serve.zone', action: async () => { console.log('About'); } },
            ],
          },
        ],
      },
      views: [
        {
          id: 'dashboard',
          name: 'Dashboard',
          iconName: 'lucide:LayoutDashboard',
          content: 'sz-demo-view-dashboard',
        },
        {
          id: 'services',
          name: 'Services',
          iconName: 'lucide:Server',
          content: 'sz-demo-view-services',
        },
        {
          id: 'network',
          name: 'Network',
          iconName: 'lucide:Network',
          content: 'sz-demo-view-network',
        },
        {
          id: 'registries',
          name: 'Registries',
          iconName: 'lucide:Archive',
          content: 'sz-demo-view-registries',
        },
        {
          id: 'tokens',
          name: 'Tokens',
          iconName: 'lucide:Key',
          content: 'sz-demo-view-tokens',
        },
        {
          id: 'mta',
          name: 'Email / MTA',
          iconName: 'lucide:Mail',
          content: 'sz-demo-view-mta',
        },
        {
          id: 'routes',
          name: 'Routes',
          iconName: 'lucide:Route',
          content: 'sz-demo-view-routes',
        },
        {
          id: 'settings',
          name: 'Settings',
          iconName: 'lucide:Settings',
          content: 'sz-demo-view-settings',
        },
      ],
      mainMenu: {
        sections: [
          {
            name: 'Overview',
            views: ['dashboard'],
          },
          {
            name: 'Infrastructure',
            views: ['services', 'network', 'registries', 'mta', 'routes'],
          },
          {
            name: 'Administration',
            views: ['tokens', 'settings'],
          },
        ],
      },
      defaultView: 'dashboard',
      onViewChange: (viewId, view) => {
        console.log('View changed to:', viewId, view);
      },
    });

    // Set user profile
    appui.setUser({
      name: 'Admin User',
      email: 'admin@serve.zone',
      status: 'online',
    });

    // Set profile menu items
    appui.setProfileMenuItems([
      { name: 'Profile', iconName: 'lucide:User', action: async () => { console.log('Profile'); } },
      { name: 'Preferences', iconName: 'lucide:SlidersHorizontal', action: async () => { console.log('Preferences'); } },
      { divider: true },
      { name: 'Sign Out', iconName: 'lucide:LogOut', action: async () => { console.log('Sign Out'); } },
    ]);
  }
}