Simple Managment webapp [LLM]

webapp/src/app/features/messages/message-list/message-list.component.html

@@ -7,52 +7,43 @@
     </button>
   </div>
 
-  <nz-card class="filter-card">
-    <div class="filter-bar">
-      <nz-input-group nzSearch [nzAddOnAfter]="searchButton" style="width: 300px;">
-        <input
-          type="text"
-          nz-input
-          placeholder="Search messages..."
-          [(ngModel)]="searchText"
-          (keyup.enter)="applyFilters()"
-        />
-      </nz-input-group>
-      <ng-template #searchButton>
-        <button nz-button nzType="primary" nzSearch (click)="applyFilters()">
-          <span nz-icon nzType="search"></span>
-        </button>
-      </ng-template>
-
-      <nz-select
-        [(ngModel)]="priorityFilter"
-        nzPlaceHolder="Priority"
-        nzAllowClear
-        style="width: 150px;"
-        (ngModelChange)="applyFilters()"
-      >
-        <nz-option [nzValue]="0" nzLabel="Low"></nz-option>
-        <nz-option [nzValue]="1" nzLabel="Normal"></nz-option>
-        <nz-option [nzValue]="2" nzLabel="High"></nz-option>
-      </nz-select>
-
+  <div class="search-bar">
+    <nz-input-group nzSearch [nzAddOnAfter]="searchButton">
       <input
         type="text"
         nz-input
-        placeholder="Channel name"
-        [(ngModel)]="channelFilter"
-        style="width: 200px;"
+        placeholder="Search messages..."
+        [(ngModel)]="searchText"
         (keyup.enter)="applyFilters()"
       />
+    </nz-input-group>
+    <ng-template #searchButton>
+      <button nz-button nzType="primary" nzSearch (click)="applyFilters()">
+        <span nz-icon nzType="search"></span>
+      </button>
+    </ng-template>
+  </div>
 
-      @if (searchText || priorityFilter !== null || channelFilter) {
-        <button nz-button (click)="clearFilters()">
-          <span nz-icon nzType="close"></span>
-          Clear
-        </button>
+  @if (hasActiveFilters()) {
+    <div class="active-filters">
+      @if (appliedSearchText) {
+        <nz-tag nzMode="closeable" (nzOnClose)="clearSearch()">
+          "{{ appliedSearchText }}"
+        </nz-tag>
       }
+      @for (channel of channelFilter; track channel) {
+        <nz-tag nzMode="closeable" (nzOnClose)="removeChannelFilter(channel)">
+          {{ getChannelDisplayName(channel) }}
+        </nz-tag>
+      }
+      @if (priorityFilter.length > 0) {
+        <nz-tag nzMode="closeable" (nzOnClose)="clearPriorityFilter()">
+          {{ getPriorityLabel(+priorityFilter[0]) }}
+        </nz-tag>
+      }
+      <a class="clear-all" (click)="clearAllFilters()">Clear all</a>
     </div>
-  </nz-card>
+  }
 
   <nz-card>
     <nz-table
@@ -67,9 +58,19 @@
       <thead>
         <tr>
           <th nzWidth="40%">Title</th>
-          <th nzWidth="15%">Channel</th>
+          <th
+            nzWidth="15%"
+            [nzFilters]="channelFilters()"
+            [nzFilterMultiple]="true"
+            (nzFilterChange)="onChannelFilterChange($event)"
+          >Channel</th>
           <th nzWidth="15%">Sender</th>
-          <th nzWidth="10%">Priority</th>
+          <th
+            nzWidth="10%"
+            [nzFilters]="priorityFilters"
+            [nzFilterMultiple]="false"
+            (nzFilterChange)="onPriorityFilterChange($event)"
+          >Priority</th>
           <th nzWidth="20%">Time</th>
         </tr>
       </thead>