dss/admin-ui/js/components/tools/ds-token-list.js

/**
 * ds-token-list.js
 * List view of all design tokens in the project
 * UX Team Tool #2
 */

import { createListView, setupListHandlers } from '../../utils/tool-templates.js';
import { ComponentHelpers } from '../../utils/component-helpers.js';
import contextStore from '../../stores/context-store.js';
import toolBridge from '../../services/tool-bridge.js';

class DSTokenList extends HTMLElement {
  constructor() {
    super();
    this.tokens = [];
    this.filteredTokens = [];
    this.isLoading = false;
  }

  async connectedCallback() {
    this.render();
    await this.loadTokens();
  }

  async loadTokens() {
    this.isLoading = true;
    const container = this.querySelector('#token-list-container');
    if (container) {
      container.innerHTML = ComponentHelpers.renderLoading('Loading design tokens...');
    }

    try {
      const context = contextStore.getMCPContext();
      if (!context.project_id) {
        throw new Error('No project selected');
      }

      // Try to get resolved context which includes all tokens
      const result = await toolBridge.executeTool('dss_get_resolved_context', {
        manifest_path: `/projects/${context.project_id}/ds.config.json`
      });

      // Extract tokens from result
      this.tokens = this.extractTokensFromContext(result);
      this.filteredTokens = [...this.tokens];

      this.renderTokenList();
    } catch (error) {
      console.error('[DSTokenList] Failed to load tokens:', error);
      if (container) {
        container.innerHTML = ComponentHelpers.renderError('Failed to load tokens', error);
      }
    } finally {
      this.isLoading = false;
    }
  }

  extractTokensFromContext(context) {
    const tokens = [];

    // Extract from colors, typography, spacing, etc.
    const categories = ['colors', 'typography', 'spacing', 'shadows', 'borders', 'radii'];

    for (const category of categories) {
      if (context[category]) {
        for (const [key, value] of Object.entries(context[category])) {
          tokens.push({
            category,
            name: key,
            value: typeof value === 'object' ? JSON.stringify(value) : String(value),
            type: this.inferTokenType(category, key, value)
          });
        }
      }
    }

    return tokens;
  }

  inferTokenType(category, key, value) {
    if (category === 'colors') return 'color';
    if (category === 'typography') return 'font';
    if (category === 'spacing') return 'size';
    if (category === 'shadows') return 'shadow';
    if (category === 'borders') return 'border';
    if (category === 'radii') return 'radius';
    return 'other';
  }

  renderTokenList() {
    const container = this.querySelector('#token-list-container');
    if (!container) return;

    const config = {
      title: 'Design Tokens',
      items: this.filteredTokens,
      columns: [
        {
          key: 'name',
          label: 'Token Name',
          render: (token) => `<span style="font-family: monospace; font-size: 11px;">${ComponentHelpers.escapeHtml(token.name)}</span>`
        },
        {
          key: 'category',
          label: 'Category',
          render: (token) => ComponentHelpers.createBadge(token.category, 'info')
        },
        {
          key: 'value',
          label: 'Value',
          render: (token) => {
            if (token.type === 'color') {
              return `
                <div style="display: flex; align-items: center; gap: 8px;">
                  <div style="width: 20px; height: 20px; background: ${ComponentHelpers.escapeHtml(token.value)}; border: 1px solid var(--vscode-border); border-radius: 2px;"></div>
                  <span style="font-family: monospace; font-size: 10px;">${ComponentHelpers.escapeHtml(token.value)}</span>
                </div>
              `;
            }
            return `<span style="font-family: monospace; font-size: 10px;">${ComponentHelpers.escapeHtml(token.value)}</span>`;
          }
        },
        {
          key: 'type',
          label: 'Type',
          render: (token) => `<span style="font-size: 10px; color: var(--vscode-text-dim);">${ComponentHelpers.escapeHtml(token.type)}</span>`
        }
      ],
      actions: [
        {
          label: 'Export All',
          icon: '📥',
          onClick: () => this.exportTokens()
        },
        {
          label: 'Refresh',
          icon: '🔄',
          onClick: () => this.loadTokens()
        }
      ],
      onSearch: (query) => this.handleSearch(query),
      onFilter: (filterValue) => this.handleFilter(filterValue)
    };

    container.innerHTML = createListView(config);
    setupListHandlers(container, config);

    // Update filter dropdown with categories
    const filterSelect = container.querySelector('#filter-select');
    if (filterSelect) {
      const categories = [...new Set(this.tokens.map(t => t.category))];
      filterSelect.innerHTML = `
        <option value="">All Categories</option>
        ${categories.map(cat => `<option value="${cat}">${cat}</option>`).join('')}
      `;
    }
  }

  handleSearch(query) {
    const lowerQuery = query.toLowerCase();
    this.filteredTokens = this.tokens.filter(token =>
      token.name.toLowerCase().includes(lowerQuery) ||
      token.value.toLowerCase().includes(lowerQuery) ||
      token.category.toLowerCase().includes(lowerQuery)
    );
    this.renderTokenList();
  }

  handleFilter(filterValue) {
    if (!filterValue) {
      this.filteredTokens = [...this.tokens];
    } else {
      this.filteredTokens = this.tokens.filter(token => token.category === filterValue);
    }
    this.renderTokenList();
  }

  exportTokens() {
    const data = JSON.stringify(this.tokens, null, 2);
    const blob = new Blob([data], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'design-tokens.json';
    a.click();
    URL.revokeObjectURL(url);
    ComponentHelpers.showToast?.('Tokens exported', 'success');
  }

  render() {
    this.innerHTML = `
      <div id="token-list-container" style="height: 100%; overflow: hidden;">
        ${ComponentHelpers.renderLoading('Loading tokens...')}
      </div>
    `;
  }
}

customElements.define('ds-token-list', DSTokenList);

export default DSTokenList;