symbiote-ui 0.3.0-alpha.4

package/layout/LayoutSidebar/LayoutSidebar.js

@@ -0,0 +1,368 @@
+/**
+ * LayoutSidebar — collapsible workspace navigation with edit mode
+ *
+ * Normal mode: shows only visible sections
+ * Edit mode (Blender-style): shows all sections with eye toggles + drag handles
+ *
+ * @module symbiote-node/layout/LayoutSidebar
+ */
+import Symbiote from '@symbiotejs/symbiote';
+import { ensureMaterialSymbols } from '../../icons/MaterialSymbols.js';
+import { sidebarTemplate } from './LayoutSidebar.tpl.js';
+import { sidebarStyles } from './LayoutSidebar.css.js';
+import './SidebarSection.js';
+import { translate } from '../../locale/index.js';
+
+const STORAGE_KEY_COLLAPSED = 'sn-sidebar-collapsed';
+const STORAGE_KEY_CONFIG = 'sn-sidebar-config';
+const STORAGE_KEY_WIDTH = 'sn-sidebar-width';
+const SIDEBAR_ICONS = ['chevron_left', 'restart_alt', 'tune'];
+
+export class LayoutSidebar extends Symbiote {
+  static isoMode = true;
+
+  /**
+   * When true (default), sidebar subscribes to ROUTER/panel PubSub
+   * to auto-highlight active section. Set to false for multi-workspace
+   * scenarios where the host manages active section programmatically.
+   * @type {boolean}
+   */
+  routerSync = true;
+
+  init$ = {
+    '@disabled': false,
+    '@sidebar-disabled': false,
+    collapsed: false,
+    editMode: false,
+    sections: [],
+    resetAllTitle: translate('layout.resetAll'),
+
+    onToggle: () => {
+      if (this.#isDisabled()) return;
+      this.$.collapsed = !this.$.collapsed;
+    },
+
+    onToggleEditMode: () => {
+      if (this.#isDisabled()) return;
+      this.$.editMode = !this.$.editMode;
+    },
+
+    onResetAllLayouts: () => {
+
+      this.resetConfig();
+
+
+      if (typeof localStorage !== 'undefined') {
+        for (let i = localStorage.length - 1; i >= 0; i--) {
+          let key = localStorage.key(i);
+          if (key && key.startsWith('pg-layout-v2-')) {
+            localStorage.removeItem(key);
+          }
+        }
+        localStorage.removeItem(STORAGE_KEY_WIDTH);
+      }
+
+
+      this.#clearSidebarWidth();
+
+
+      if (typeof window !== 'undefined') {
+        window.location.reload();
+      }
+    },
+  };
+
+  /** @type {Array<{id: string, icon: string, label: string}>} */
+  #allSections = [];
+
+  renderCallback() {
+    ensureMaterialSymbols(SIDEBAR_ICONS);
+    this.#syncDisabled();
+
+    this.sub('@disabled', () => this.#syncDisabled());
+    this.sub('@sidebar-disabled', () => this.#syncDisabled());
+
+    this.sub('collapsed', (val) => {
+      this.toggleAttribute('collapsed', val);
+    });
+    this.sub('editMode', (val) => {
+      this.toggleAttribute('edit-mode', val);
+    });
+
+
+    if (typeof localStorage !== 'undefined') {
+      let stored = localStorage.getItem(STORAGE_KEY_COLLAPSED);
+      if (stored === null || stored === 'true') {
+        this.$.collapsed = true;
+      }
+
+
+      let savedWidth = localStorage.getItem(STORAGE_KEY_WIDTH);
+      if (savedWidth) this.#setSidebarWidth(savedWidth);
+    }
+
+
+    this.sub('collapsed', (val) => {
+      if (typeof localStorage !== 'undefined') {
+        localStorage.setItem(STORAGE_KEY_COLLAPSED, String(val));
+
+        if (val) {
+          this.#clearSidebarWidth();
+        } else {
+
+          let w = localStorage.getItem(STORAGE_KEY_WIDTH);
+          if (w) {
+            this.#setSidebarWidth(w);
+          }
+        }
+      }
+    });
+
+
+    let handle = this.querySelector('.sb-resize-handle');
+    if (handle) {
+      let startX = 0;
+      let startW = 0;
+
+      let onMove = (e) => {
+        let newWidth = Math.max(120, Math.min(600, startW + (e.clientX - startX)));
+        this.#setSidebarWidth(newWidth);
+        this.#setResizeActive(true);
+      };
+
+      let onUp = () => {
+        handle.classList.remove('dragging');
+        this.#setResizeActive(false);
+        let w = this.offsetWidth;
+        if (typeof localStorage !== 'undefined') {
+          localStorage.setItem(STORAGE_KEY_WIDTH, w);
+        }
+        if (typeof document !== 'undefined') {
+          document.removeEventListener('pointermove', onMove);
+          document.removeEventListener('pointerup', onUp);
+        }
+      };
+
+      handle.addEventListener('pointerdown', (e) => {
+        if (this.#isDisabled()) return;
+        e.preventDefault();
+        e.stopPropagation();
+        startX = e.clientX;
+        startW = this.offsetWidth;
+        handle.classList.add('dragging');
+        if (typeof document !== 'undefined') {
+          document.addEventListener('pointermove', onMove);
+          document.addEventListener('pointerup', onUp);
+        }
+      });
+    }
+  }
+
+  #isDisabled() {
+    return (
+      this.hasAttribute('disabled') ||
+      this.hasAttribute('sidebar-disabled') ||
+      this.$['@disabled'] === true ||
+      this.$['@disabled'] === 'true' ||
+      this.$['@sidebar-disabled'] === true ||
+      this.$['@sidebar-disabled'] === 'true'
+    );
+  }
+
+  #syncDisabled() {
+    let disabled = this.#isDisabled();
+    this.toggleAttribute('data-disabled', disabled);
+    if (disabled) {
+      this.setAttribute('aria-hidden', 'true');
+    } else {
+      this.removeAttribute('aria-hidden');
+    }
+    this.inert = disabled;
+    if (disabled) {
+      this.$.editMode = false;
+      this.$.collapsed = true;
+    }
+  }
+
+  /**
+   * Configure sidebar sections
+   * @param {Array<{id: string, icon: string, label: string}>} items
+   * @returns {void}
+   */
+  setSections(items) {
+    this.#allSections = items;
+    ensureMaterialSymbols(items.map((item) => item.icon));
+
+
+    let savedConfig = this.#loadConfig();
+    let ordered = items;
+
+    if (savedConfig) {
+
+      let orderMap = new Map(savedConfig.map((c, i) => [c.id, i]));
+      ordered = [...items].sort((a, b) => {
+        let ai = orderMap.get(a.id) ?? 999;
+        let bi = orderMap.get(b.id) ?? 999;
+        return ai - bi;
+      });
+    }
+
+    this.#buildSections(ordered, savedConfig);
+
+
+    if (this.routerSync) {
+      this.sub('ROUTER/panel', (panel) => {
+        this.$.sections = this.$.sections.map((s) => ({
+          ...s,
+          isActive: s.sectionId === panel,
+        }));
+      });
+    }
+  }
+
+  /**
+   * Programmatically set the active section (highlight).
+   * Use in multi-workspace scenarios where routerSync is disabled.
+   * @param {string} sectionId — section ID to mark active
+   */
+  setActiveSection(sectionId) {
+    this.$.sections = this.$.sections.map((s) => ({
+      ...s,
+      isActive: s.sectionId === sectionId,
+    }));
+  }
+
+  /**
+   * Build sections array from ordered items + config
+   * @param {Array<{id: string, icon: string, label: string}>} items
+   * @param {Array<{id: string, visible: boolean}>|null} config
+   */
+  #buildSections(items, config) {
+    let visibilityMap = config ? new Map(config.map((c) => [c.id, c.visible])) : null;
+
+    this.$.sections = items.map((item) => ({
+      sectionId: item.id,
+      icon: item.icon,
+      label: item.label,
+      isActive: false,
+      isVisible: visibilityMap ? (visibilityMap.get(item.id) ?? true) : true,
+      isExpanded: false,
+      subPanels: item.subPanels || [],
+    }));
+  }
+
+  /**
+   * Toggle visibility of a section
+   * @param {string} sectionId
+   * @returns {void}
+   */
+  toggleVisibility(sectionId) {
+    this.$.sections = this.$.sections.map((s) => {
+      if (s.sectionId !== sectionId) return s;
+      return { ...s, isVisible: !s.isVisible };
+    });
+    this.#saveConfig();
+  }
+
+  /**
+   * Move section by drag (swap positions)
+   * @param {number} fromIndex
+   * @param {number} toIndex
+   */
+  moveSection(fromIndex, toIndex) {
+    let arr = [...this.$.sections];
+    let [moved] = arr.splice(fromIndex, 1);
+    arr.splice(toIndex, 0, moved);
+    this.$.sections = arr;
+    this.#saveConfig();
+  }
+
+  /**
+   * Reset sections to default order and visibility
+   */
+  resetConfig() {
+    if (typeof localStorage !== 'undefined') {
+      localStorage.removeItem(STORAGE_KEY_CONFIG);
+    }
+    this.#buildSections(this.#allSections, null);
+  }
+
+  /**
+   * Save current section order and visibility
+   */
+  #saveConfig() {
+    let config = this.$.sections.map((s) => ({
+      id: s.sectionId,
+      visible: s.isVisible,
+    }));
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem(STORAGE_KEY_CONFIG, JSON.stringify(config));
+    }
+  }
+
+  /**
+   * Load saved section config
+   * @returns {Array<{id: string, visible: boolean}>|null}
+   */
+  #loadConfig() {
+    try {
+      if (typeof localStorage !== 'undefined') {
+        let raw = localStorage.getItem(STORAGE_KEY_CONFIG);
+        return raw ? JSON.parse(raw) : null;
+      }
+    } catch {
+      return null;
+    }
+    return null;
+  }
+
+  /**
+   * Update sub-panel list for a section
+   * @param {string} sectionId
+   * @param {Array<{title: string, icon: string}>} panels
+   * @returns {void}
+   */
+  updateSubPanels(sectionId, panels) {
+    this.$.sections = this.$.sections.map((s) => {
+      if (s.sectionId !== sectionId) return s;
+      return { ...s, subPanels: panels };
+    });
+  }
+
+  /**
+   * Mark sections as disabled (shown but not clickable)
+   * @param {string[]} disabledIds - Section IDs to disable
+   */
+  setDisabledSections(disabledIds) {
+    let disabledSet = new Set(disabledIds);
+    this.$.sections = this.$.sections.map((s) => ({
+      ...s,
+      isDisabled: disabledSet.has(s.sectionId),
+    }));
+  }
+
+  #setSidebarWidth(width) {
+    let style = this.style;
+    style.setProperty('width', `${width}px`);
+    style.setProperty('min-width', `${width}px`);
+  }
+
+  #clearSidebarWidth() {
+    let style = this.style;
+    style.removeProperty('width');
+    style.removeProperty('min-width');
+  }
+
+  #setResizeActive(active) {
+    let style = this.style;
+    if (active) {
+      style.setProperty('transition', 'none');
+    } else {
+      style.removeProperty('transition');
+    }
+  }
+}
+
+LayoutSidebar.template = sidebarTemplate;
+LayoutSidebar.rootStyles = sidebarStyles;
+LayoutSidebar.reg('layout-sidebar');

package/layout/LayoutSidebar/LayoutSidebar.tpl.js

@@ -0,0 +1,26 @@
+/**
+ * LayoutSidebar template
+ * @module symbiote-node/layout/LayoutSidebar
+ */
+import { html } from '@symbiotejs/symbiote';
+
+export let sidebarTemplate = html`
+  <div class="sb-header">
+    <button class="sb-header-btn" ${{ onclick: 'onToggleEditMode' }}>
+      <span class="material-symbols-outlined">tune</span>
+    </button>
+    <button
+      class="sb-header-btn sb-reset-btn"
+      ${{ onclick: 'onResetAllLayouts', title: 'resetAllTitle' }}
+    >
+      <span class="material-symbols-outlined">restart_alt</span>
+    </button>
+    <div class="sb-header-spacer"></div>
+    <button class="sb-header-btn" ${{ onclick: 'onToggle' }}>
+      <span class="material-symbols-outlined sb-collapse-icon">chevron_left</span>
+    </button>
+  </div>
+
+  <div class="sb-sections" itemize="sections" item-tag="sidebar-section"></div>
+  <div class="sb-resize-handle"></div>
+`;

package/layout/LayoutSidebar/SidebarSection.css.js

@@ -0,0 +1,20 @@
+/**
+ * SidebarSection styles
+ *
+ * Component-level styles currently live in LayoutSidebar.css.js
+ * due to deep parent-context coupling (layout-sidebar[edit-mode],
+ * layout-sidebar[collapsed] scoping). Move here when refactoring
+ * context-dependent selectors into component state attributes.
+ *
+ * @module symbiote-node/layout/LayoutSidebar/SidebarSection.css
+ */
+import { css } from '@symbiotejs/symbiote';
+
+export let styles = css`
+  sidebar-section {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    position: relative;
+  }
+`;

package/layout/LayoutSidebar/SidebarSection.js

@@ -0,0 +1,184 @@
+/**
+ * SidebarSection — itemize sub-component for sidebar section items
+ *
+ * Renders a master panel entry with icon, label.
+ * Edit mode: shows visibility toggle + drag handle.
+ * Shows sub-panel list with close buttons for non-master panels.
+ *
+ * @module symbiote-node/layout/LayoutSidebar/SidebarSection
+ */
+import Symbiote, { html } from '@symbiotejs/symbiote';
+import { ensureMaterialSymbols } from '../../icons/MaterialSymbols.js';
+import { sidebarSectionTemplate } from './SidebarSection.tpl.js';
+import { styles } from './SidebarSection.css.js';
+import { navigate } from '../LayoutRouter/LayoutRouter.js';
+
+const SIDEBAR_SECTION_ICONS = ['chevron_right', 'close', 'drag_indicator', 'visibility', 'visibility_off'];
+
+export class SidebarSection extends Symbiote {
+  static isoMode = true;
+
+  init$ = {
+    sectionId: '',
+    icon: 'dashboard',
+    label: '',
+    isActive: false,
+    isVisible: true,
+    isDisabled: false,
+    eyeIcon: 'visibility',
+    hasSubPanels: false,
+    isExpanded: false,
+    subPanels: [],
+
+    onSectionClick: () => {
+      if (!this.$.isVisible || this.$.isDisabled) return;
+      navigate(this.$.sectionId);
+    },
+
+    onExpandToggle: (e) => {
+      e.stopPropagation();
+      if (!this.$.hasSubPanels) return;
+      this.$.isExpanded = !this.$.isExpanded;
+    },
+
+    onToggleVisibility: (e) => {
+      e.stopPropagation();
+      let sidebar = this.closest('layout-sidebar');
+      if (sidebar) sidebar.toggleVisibility(this.$.sectionId);
+    },
+  };
+
+  renderCallback() {
+    ensureMaterialSymbols(['close', 'drag_indicator', 'expand_more', 'visibility', 'visibility_off', this.$.icon]);
+    this.sub('icon', (icon) => ensureMaterialSymbols([icon]));
+
+    this.sub('isActive', (val) => {
+      this.toggleAttribute('data-active', val);
+    });
+
+    this.sub('isExpanded', (val) => {
+      this.toggleAttribute('data-expanded', val);
+    });
+
+    this.sub('isVisible', (val) => {
+      this.toggleAttribute('data-hidden', !val);
+      this.$.eyeIcon = val ? 'visibility' : 'visibility_off';
+      ensureMaterialSymbols([this.$.eyeIcon]);
+    });
+
+    this.sub('isDisabled', (val) => {
+      this.toggleAttribute('data-disabled', val);
+    });
+
+    this.sub('subPanels', (panels) => {
+      let has = panels && panels.length > 0;
+      this.$.hasSubPanels = has;
+      this.toggleAttribute('data-has-sub', has);
+
+      if (!has) this.$.isExpanded = false;
+    });
+
+
+    this.setAttribute('draggable', 'true');
+
+    this.addEventListener('dragstart', (e) => {
+      let sidebar = this.closest('layout-sidebar');
+      if (!sidebar?.hasAttribute('edit-mode')) {
+        e.preventDefault();
+        return;
+      }
+      let sections = Array.from(this.parentElement.children);
+      let idx = sections.indexOf(this);
+      e.dataTransfer.setData('text/plain', String(idx));
+      e.dataTransfer.effectAllowed = 'move';
+      this.setAttribute('data-dragging', '');
+    });
+
+    this.addEventListener('dragend', () => {
+      this.removeAttribute('data-dragging');
+    });
+
+    this.addEventListener('dragover', (e) => {
+      let sidebar = this.closest('layout-sidebar');
+      if (!sidebar?.hasAttribute('edit-mode')) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+      this.setAttribute('data-dragover', '');
+    });
+
+    this.addEventListener('dragleave', () => {
+      this.removeAttribute('data-dragover');
+    });
+
+    this.addEventListener('drop', (e) => {
+      e.preventDefault();
+      this.removeAttribute('data-dragover');
+      let sidebar = this.closest('layout-sidebar');
+      if (!sidebar?.hasAttribute('edit-mode')) return;
+
+      let fromIdx = parseInt(e.dataTransfer.getData('text/plain'), 10);
+      let sections = Array.from(this.parentElement.children);
+      let toIdx = sections.indexOf(this);
+      if (fromIdx !== toIdx) {
+        sidebar.moveSection(fromIdx, toIdx);
+      }
+    });
+  }
+}
+
+SidebarSection.template = sidebarSectionTemplate;
+SidebarSection.rootStyles = styles;
+SidebarSection.reg('sidebar-section');
+
+/**
+ * SidebarSubItem — sub-panel entry inside a section
+ * Shows close button for non-master panels (isMaster=false)
+ */
+export class SidebarSubItem extends Symbiote {
+  static isoMode = true;
+
+  init$ = {
+    title: '',
+    icon: 'web_asset',
+    panelId: '',
+    isMaster: false,
+
+    onClose: (e) => {
+      e.stopPropagation();
+      let panelId = this.$.panelId;
+      if (!panelId) return;
+
+
+      let sidebar = this.closest('layout-sidebar');
+      if (sidebar) {
+        sidebar.dispatchEvent(
+          new CustomEvent('panel-close', {
+            bubbles: true,
+            detail: { panelId },
+          })
+        );
+      }
+    },
+  };
+
+  renderCallback() {
+    ensureMaterialSymbols(['close', this.$.icon]);
+    this.sub('icon', (icon) => ensureMaterialSymbols([icon]));
+
+    this.sub('isMaster', (val) => {
+      this.toggleAttribute('data-master', val);
+    });
+  }
+}
+
+SidebarSubItem.template = html`
+  <div class="sub-panel-item">
+    <span class="material-symbols-outlined" ${{ textContent: 'icon' }}></span>
+    <span ${{ textContent: 'title' }}></span>
+    <button class="sub-panel-close" ${{ onclick: 'onClose' }}>
+      <span class="material-symbols-outlined">close</span>
+    </button>
+  </div>
+`;
+
+SidebarSubItem.reg('sidebar-sub-item');

package/layout/LayoutSidebar/SidebarSection.tpl.js

@@ -0,0 +1,22 @@
+/**
+ * SidebarSection template
+ * @module symbiote-node/layout/LayoutSidebar/SidebarSection.tpl
+ */
+import { html } from '@symbiotejs/symbiote';
+
+export let sidebarSectionTemplate = html`
+  <div class="sec-drag-handle">
+    <span class="material-symbols-outlined">drag_indicator</span>
+  </div>
+  <div class="sec-item" ${{ onclick: 'onSectionClick' }}>
+    <span class="material-symbols-outlined sec-icon" ${{ textContent: 'icon' }}></span>
+    <span class="sec-label" ${{ textContent: 'label' }}></span>
+    <span class="material-symbols-outlined sec-expand" ${{ onclick: 'onExpandToggle' }}
+      >chevron_right</span
+    >
+  </div>
+  <button class="sec-eye" ${{ onclick: 'onToggleVisibility' }}>
+    <span class="material-symbols-outlined" ${{ textContent: 'eyeIcon' }}></span>
+  </button>
+  <div class="sec-sub-panels" itemize="subPanels" item-tag="sidebar-sub-item"></div>
+`;