merge(dev): Re-apply CUB-34 changes after merge conflict resolution

frontend/src/app/components/filament-table/filament-table.component.html

@@ -1,6 +1,12 @@
-<!-- Filament Inventory Table — with low stock indicators and delete actions -->
+<!-- Filament Inventory Table — with filters and low stock indicators -->
 <div class="filament-table-container" role="region" aria-label="Filament inventory">
 
+  <!-- Filter Bar -->
+  <app-filament-filter
+    [filaments]="allFilaments()"
+    (filterChange)="onFilterChange($event)"
+    aria-label="Filter filament inventory" />
+
   <!-- Low Stock Alert Banner — shown when critical or low stock spools exist -->
   @if (criticalCount() > 0) {
     <div class="alert-banner critical" role="alert">
@@ -16,7 +22,7 @@
 
   <!-- Filament Table -->
   <table mat-table
-         [dataSource]="sortedFilaments()"
+         [dataSource]="filteredFilaments()"
          matSort
          (matSortChange)="sortData($event)"
          class="filament-table"
@@ -106,36 +112,22 @@
       </td>
     </ng-container>
 
-    <!-- Actions Column — delete button -->
-    <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef>Actions</th>
-      <td mat-cell *matCellDef="let filament">
-        <button mat-icon-button
-                type="button"
-                color="warn"
-                [attr.aria-label]="'Delete ' + filament.materialBaseName + ' — ' + filament.colorName"
-                matTooltip="Delete spool"
-                matTooltipPosition="above"
-                [disabled]="deleting() === filament.id"
-                (click)="onDeleteClick(filament)">
-          @if (deleting() === filament.id) {
-            <mat-icon aria-hidden="true">hourglass_empty</mat-icon>
-          } @else {
-            <mat-icon aria-hidden="true">delete</mat-icon>
-          }
-        </button>
-      </td>
-    </ng-container>
-
     <tr mat-header-row *matHeaderRowDef="columns()"></tr>
     <tr mat-row *matRowDef="let row; columns: columns();"
         [class.row-critical]="classifyStockLevel(row) === 'critical'"
-        [class.row-low]="classifyStockLevel(row) === 'low'"
-        [class.row-deleting]="deleting() === row.id">
+        [class.row-low]="classifyStockLevel(row) === 'low'">
     </tr>
   </table>
 
-  <!-- Empty state -->
+  <!-- Filtered empty state -->
+  @if (filteredFilaments().length === 0 && filaments().length > 0) {
+    <div class="empty-state" role="status">
+      <mat-icon aria-hidden="true">filter_alt_off</mat-icon>
+      <p>No filaments match the current filters</p>
+    </div>
+  }
+
+  <!-- No data empty state -->
   @if (filaments().length === 0) {
     <div class="empty-state" role="status">
       <mat-icon aria-hidden="true">inventory_2</mat-icon>