<div class="sidebar-filters">
  <!-- Component Palette Button -->
  <div class="component-palette-section">
    <button class="component-palette-button" (click)="toggleComponentPalette()">
      <clr-icon shape="plus-circle"></clr-icon>
      Add Components
    </button>
    
    <!-- Component Palette (hidden by default) -->
    <div class="component-palette" *ngIf="showComponentPalette">
      <h3 class="palette-title">Available Components</h3>
      <div class="component-list">
        <div 
          *ngFor="let component of availableComponents" 
          class="component-item"
          draggable="true"
          (dragstart)="onComponentDragStart($event, component)"
          (dragend)="onComponentDragEnd($event)">
          <clr-icon shape="drag-handle" class="drag-icon"></clr-icon>
          {{ component.name }}
        </div>
      </div>
    </div>
  </div>
</div>