dees-wcctools/ts_web/elements/wcc-sidebar.ts

import * as plugins from '../wcctools.plugins.js';
import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
import { WccDashboard } from './wcc-dashboard.js';

export type TElementType = 'element' | 'page';

@customElement('wcc-sidebar')
export class WccSidebar extends DeesElement {
  @property({ attribute: false })
  public selectedItem: DeesElement | (() => TemplateResult);

  @property({ attribute: false })
  public selectedType: TElementType;

  @property()
  public dashboardRef: WccDashboard;

  public render(): TemplateResult {
    return html`
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
      <style>
        :host {
          --background: #09090b;
          --foreground: #fafafa;
          --card: #0c0c0f;
          --card-foreground: #fafafa;
          --primary: #f4f4f5;
          --primary-foreground: #18181b;
          --secondary: #27272a;
          --secondary-foreground: #fafafa;
          --muted: #27272a;
          --muted-foreground: #a1a1aa;
          --accent: #27272a;
          --accent-foreground: #fafafa;
          --border: rgba(255, 255, 255, 0.1);
          --input: #27272a;
          --ring: #d4d4d8;
          --radius: 0.5rem;

          display: block;
          border-right: 1px solid var(--border);
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
          font-size: 14px;
          box-sizing: border-box;
          position: absolute;
          left: 0px;
          width: 200px;
          top: 0px;
          bottom: 0px;
          overflow-y: auto;
          overflow-x: hidden;
          background: var(--card);
          color: var(--foreground);
        }

        .menu {
          padding: 8px 0;
        }

        h3 {
          padding: 8px 16px;
          font-size: 12px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          color: var(--muted-foreground);
          margin: 0;
          margin-top: 8px;
        }

        h3:first-child {
          margin-top: 0;
        }

        .material-symbols-outlined {
          font-family: 'Material Symbols Outlined';
          font-weight: normal;
          font-style: normal;
          font-size: 18px;
          display: inline-block;
          line-height: 1;
          text-transform: none;
          letter-spacing: normal;
          word-wrap: normal;
          white-space: nowrap;
          direction: ltr;
          font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
          opacity: 0.7;
        }

        .selectOption {
          user-select: none;
          position: relative;
          margin: 2px 8px;
          padding: 8px 12px;
          transition: all 0.15s ease;
          display: grid;
          grid-template-columns: 24px 1fr;
          align-items: center;
          gap: 8px;
          border-radius: calc(var(--radius) * 0.5);
          cursor: pointer;
          font-size: 13px;
          color: var(--muted-foreground);
        }
        
        .selectOption:hover {
          background: var(--secondary);
          color: var(--foreground);
        }

        .selectOption:hover .material-symbols-outlined {
          opacity: 1;
        }

        .selectOption.selected {
          background: var(--primary);
          color: var(--primary-foreground);
        }

        .selectOption.selected .material-symbols-outlined {
          opacity: 1;
          font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

        .selectOption.selected:hover {
          background: var(--primary);
          color: var(--primary-foreground);
        }

        .selectOption .text {
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: 500;
        }

        ::-webkit-scrollbar {
          width: 8px;
        }

        ::-webkit-scrollbar-track {
          background: transparent;
        }

        ::-webkit-scrollbar-thumb {
          background: var(--secondary);
          border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
          background: var(--muted);
        }
      </style>
      <div class="menu">
        <h3>Pages</h3>
        ${(() => {
          const pages = Object.keys(this.dashboardRef.pages);
          return pages.map(pageName => {
            const item = this.dashboardRef.pages[pageName];
            return html`
              <div
                class="selectOption ${this.selectedItem === item ? 'selected' : null}"
                @click=${async () => {
                  const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
                  this.selectItem('page', pageName, item);
                }}
              >
                <i class="material-symbols-outlined">insert_drive_file</i>
                <div class="text">${pageName}</div>
              </div>
            `;
          });
        })()}
        <h3>Elements</h3>
        ${(() => {
          const elements = Object.keys(this.dashboardRef.elements);
          return elements.map(elementName => {
            const item = this.dashboardRef.elements[elementName];
            return html`
              <div
                class="selectOption ${this.selectedItem === item ? 'selected' : null}"
                @click=${async () => {
                  const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
                  this.selectItem('element', elementName, item);
                }}
              >
                <i class="material-symbols-outlined">featured_video</i>
                <div class="text">${elementName}</div>
              </div>
            `;
          });
        })()}
      </div>
    `;
  }

  public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | DeesElement) {
    console.log('selected item');
    console.log(itemNameArg);
    console.log(itemArg);
    this.selectedItem = itemArg;
    this.selectedType = typeArg;
    this.dispatchEvent(
      new CustomEvent('selectedType', {
        detail: typeArg
      })
    );
    this.dispatchEvent(
      new CustomEvent('selectedItemName', {
        detail: itemNameArg
      })
    );
    this.dispatchEvent(
      new CustomEvent('selectedItem', {
        detail: itemArg
      })
    );
    
    this.dashboardRef.buildUrl();
  }
}