dss/admin-ui/js/workdesks/ux-workdesk.js

/**
 * ux-workdesk.js
 * UX Team workdesk - Visual diff, accessibility audits, component gallery
 * MVP2: Added metrics frontpage as default view
 */

import BaseWorkdesk from './base-workdesk.js';
import { hydrateComponent } from '../config/component-registry.js';

export default class UXWorkdesk extends BaseWorkdesk {
  constructor(shell) {
    super(shell);
    this.teamId = 'ux';
    this.teamName = 'UX Team';
    this.tools = [
      {
        id: 'frontpage',
        name: 'Dashboard',
        description: 'Team metrics and quick actions',
        component: 'ds-frontpage'
      },
      {
        id: 'figma-plugin',
        name: 'Figma Plugin',
        description: 'Export tokens/assets/components from Figma',
        component: 'ds-figma-plugin'
      },
      {
        id: 'token-list',
        name: 'Token List',
        description: 'View all design tokens',
        component: 'ds-token-list'
      },
      {
        id: 'asset-list',
        name: 'Asset List',
        description: 'Gallery of design assets',
        component: 'ds-asset-list'
      },
      {
        id: 'component-list',
        name: 'Component List',
        description: 'Design system components',
        component: 'ds-component-list'
      },
      {
        id: 'navigation-demos',
        name: 'Navigation Demos',
        description: 'Generate navigation flow demos',
        component: 'ds-navigation-demos'
      }
    ];
    this.currentTool = 'frontpage';
  }

  async loadTool(tool) {
    const stage = this.shell.stageContent;
    if (!stage) return;

    // Show loading state
    stage.innerHTML = `
      <div style="display: flex; align-items: center; justify-content: center; height: 100%; padding: 48px;">
        <div style="text-align: center;">
          <div style="font-size: 24px; margin-bottom: 12px;">⏳</div>
          <div style="font-size: 12px; color: var(--vscode-text-dim);">Loading ${tool.name}...</div>
        </div>
      </div>
    `;

    try {
      // Clear the stage and hydrate the component
      stage.innerHTML = '';
      await hydrateComponent(tool.component, stage);
      console.log(`[UXWorkdesk] Loaded component: ${tool.component}`);
    } catch (error) {
      console.error(`[UXWorkdesk] Failed to load tool ${tool.component}:`, error);
      stage.innerHTML = `
        <div style="padding: 24px;">
          <h2 style="margin-bottom: 16px; color: var(--vscode-error);">Error Loading Tool</h2>
          <p style="color: var(--vscode-text-dim);">${error.message}</p>
        </div>
      `;
    }
  }

  renderStage() {
    const stage = this.shell.stageContent;
    if (!stage) return;

    stage.innerHTML = `
      <div style="padding: 24px;">
        <h1 style="margin-bottom: 8px; font-size: 24px;">UX Team Workdesk</h1>
        <p style="color: var(--vscode-text-dim); margin-bottom: 32px;">
          Design system assets, tokens, and component management
        </p>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px;">
          ${this.createCard('Figma Integration', `
            <p>Export from Figma:</p>
            <ul style="margin-top: 8px; padding-left: 20px;">
              <li>Design tokens</li>
              <li>Asset export</li>
              <li>Component definitions</li>
              <li>Multiple format support</li>
            </ul>
          `)}

          ${this.createCard('Asset Management', `
            <p>Manage design assets:</p>
            <ul style="margin-top: 8px; padding-left: 20px;">
              <li>Token library</li>
              <li>Asset gallery</li>
              <li>Component catalog</li>
              <li>Visual preview</li>
            </ul>
          `)}

          ${this.createCard('Navigation', `
            <p>Navigation flow demos:</p>
            <ul style="margin-top: 8px; padding-left: 20px;">
              <li>Generate flow demos</li>
              <li>Interactive HTML</li>
              <li>Flow library</li>
              <li>Quick preview</li>
            </ul>
          `)}
        </div>

        <div style="margin-top: 32px;">
          <h2 style="margin-bottom: 16px; font-size: 16px;">Quick Actions</h2>
          <div style="display: flex; gap: 12px; flex-wrap: wrap;">
            <button class="button" id="figma-btn">Figma Export</button>
            <button class="button" id="tokens-btn">View Tokens</button>
            <button class="button" id="assets-btn">Asset Gallery</button>
            <button class="button" id="components-btn">Components</button>
          </div>
        </div>
      </div>
    `;

    // Setup button handlers
    stage.querySelector('#figma-btn')?.addEventListener('click', () => {
      this.onToolClick('figma-plugin');
    });

    stage.querySelector('#tokens-btn')?.addEventListener('click', () => {
      this.onToolClick('token-list');
    });

    stage.querySelector('#assets-btn')?.addEventListener('click', () => {
      this.onToolClick('asset-list');
    });

    stage.querySelector('#components-btn')?.addEventListener('click', () => {
      this.onToolClick('component-list');
    });
  }
}