LoreMind/web/src/app/shared/secondary-sidebar/secondary-sidebar.component.html

<aside class="secondary-sidebar"
  [class.collapsed]="isCollapsed"
  [style.width.px]="isCollapsed ? null : width">

  <div class="collapse-toggle" (click)="toggleCollapse()">
    <lucide-icon [img]="isCollapsed ? PanelLeftOpen : PanelLeftClose" [size]="16"></lucide-icon>
  </div>

  @if (!isCollapsed) {
    @if (titleRoute) {
      <button
        type="button"
        class="sidebar-title sidebar-title--link"
        [class.active]="isTitleActive()"
        [title]="'secondarySidebar.backToCampaignHome' | translate"
        (click)="clickTitle()">
        <lucide-icon [img]="Home" [size]="14" class="sidebar-title-icon"></lucide-icon>
        <span class="sidebar-title-text">{{ title }}</span>
      </button>
    } @else {
      <h2 class="sidebar-title">{{ title }}</h2>
    }
    @if (createActions.length) {
      <div class="actions-row">
        @for (action of createActions; track action) {
          <button
            class="btn-pill"
            [class.primary]="action.variant === 'primary'"
            [class.secondary]="action.variant === 'secondary'"
            (click)="runAction(action)">
            {{ action.label }}
          </button>
        }
      </div>
    }
    <div class="tree">
      @for (item of items; track item) {
        <ng-container *ngTemplateOutlet="treeNode; context: { $implicit: item, level: 0 }"></ng-container>
      }
    </div>
    <!-- Template récursif : un noeud d'arbre rend son bouton, puis ses enfants via ce même template -->
    <ng-template #treeNode let-item let-level="level">
      @if (level === 0 && item.sectionHeaderBefore) {
        <div class="tree-section-header">
          {{ item.sectionHeaderBefore }}
        </div>
      }
      <div class="tree-item" [style.padding-left.px]="level * 12">
        <div class="tree-row">
          @if (!item.isAction && isExpandable(item)) {
            <button
              type="button"
              class="chevron-btn"
              (click)="clickChevron($event, item)">
              <lucide-icon
                [img]="isExpanded(item.id) ? ChevronDown : ChevronRight"
                [size]="12">
              </lucide-icon>
            </button>
          }
          @if (item.isAction || !isExpandable(item)) {
            <span class="chevron-spacer"></span>
          }
          <button type="button" class="tree-btn"
            [class.action]="item.isAction"
            [class.active]="isActive(item)"
            (click)="clickItem(item)">
            @if (iconFor(item); as icon) {
              <lucide-icon
                [img]="icon"
                [size]="14"
                class="item-icon">
              </lucide-icon>
            }
            {{ item.label }}
            @if (!item.isAction && item.meta) {
              <span class="tree-item-meta">{{ item.meta }}</span>
            }
          </button>
          <!-- Actions de creation contextuelles, revelees au survol de la ligne -->
          @if (item.createActions?.length) {
            <span class="node-actions">
              @for (a of item.createActions; track a) {
                <button
                  type="button"
                  class="node-action-btn"
                  [title]="a.label"
                  [attr.aria-label]="a.label"
                  (click)="runCreateAction($event, a)">
                  <lucide-icon [img]="iconForAction(a)" [size]="16"></lucide-icon>
                </button>
              }
            </span>
          }
        </div>
        @if (isExpanded(item.id) && hasChildren(item)) {
          <div class="tree-children">
            @for (child of item.children; track child) {
              <ng-container *ngTemplateOutlet="treeNode; context: { $implicit: child, level: level + 1 }"></ng-container>
            }
          </div>
        }
      </div>
    </ng-template>
    <!-- Panneau bas (ex: Templates) ------------------------------------ -->
    @if (bottomPanel) {
      <section class="bottom-panel">
        <div class="panel-header-row">
          <button class="panel-header" (click)="togglePanel()">
            <span class="panel-title">{{ bottomPanel.title }}</span>
            <lucide-icon
              [img]="panelOpen ? ChevronDown : ChevronRight"
              [size]="14">
            </lucide-icon>
          </button>
          @if (bottomPanel.headerAction; as action) {
            <button
              type="button"
              class="panel-header-action"
              [title]="action.label"
              [attr.aria-label]="action.label"
              (click)="runPanelHeaderAction($event, action)">
              <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
            </button>
          }
        </div>
        @if (panelOpen) {
          <ul class="panel-list">
            @for (item of bottomPanel.items; track item) {
              <li>
                <button
                  class="panel-item"
                  [class.action]="item.isAction"
                  (click)="clickPanelItem(item)">
                  <span class="panel-item-label">{{ item.label }}</span>
                  @if (item.meta) {
                    <span class="panel-item-meta">{{ item.meta }}</span>
                  }
                </button>
              </li>
            }
          </ul>
        }
      </section>
    }
  }

  <!-- Poignée de redimensionnement sur le bord droit (masquée si replié) -->
  @if (!isCollapsed) {
    <div class="resize-handle"
      (mousedown)="startResize($event)"
    [title]="'secondarySidebar.resizeHandle' | translate"></div>
  }
</aside>