feat: кнопка очистки в поле фильтра

src/app/features/tasks/task-list.ts

@@ -5,15 +5,20 @@ import { TaskService } from './task-service';
 import { RouterLink } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideSquarePlus } from '@ng-icons/lucide';
+import { lucideCircleX, lucideSquarePlus } from '@ng-icons/lucide';
 
 @Component({
   selector: 'ksk-crm-home-page',
   imports: [TaskItem, RouterLink, FormsModule, NgIcon],
-  providers: [provideIcons({ lucideSquarePlus })],
+  providers: [provideIcons({ lucideSquarePlus, lucideCircleX })],
   template: `
     <section class="topBar">
-      <input [(ngModel)]="filterInput" type="text" />
+      <div class="input-wrapper">
+        <input [(ngModel)]="filterInput" type="text" placeholder="Поиск по задачам" />
+        <button (click)="filterInput.set('')">
+          <ng-icon name="lucideCircleX" size="20" strokeWidth="1.5"/>
+        </button>
+      </div>
       <a routerLink="/new">
         <ng-icon name="lucideSquarePlus" size="36" />
       </a>
@@ -27,26 +32,42 @@ import { lucideSquarePlus } from '@ng-icons/lucide';
   styles: `
     .topBar {
       display: flex;
+      padding-top: 1rem;
+
+      .input-wrapper {
+        display: inline-flex;
+        flex-grow: 1;
+        position: relative;
+
+        input {
+          width: 100%;
+          margin: auto 0;
+        }
+
+        button {
+          border: none;
+          background: none;
+          position: absolute;
+          top: 55%;
+          right: 1em;
+          transform: translateY(-50%);
+          cursor: pointer;
+          color: var(--color-primary);
+        }
+
+        input:placeholder-shown + button {
+          display: none;
+        }
+      }
 
       a {
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        margin-left: 1ch;
+        margin-left: .5em;
       }
     }
 
-    input {
-      outline: none;
-      padding: 1ch;
-      flex-grow: 1;
-    }
-
-    button {
-      cursor: pointer;
-      padding: 5px;
-    }
-
     .result {
       margin-top: 20px;
     }