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

src/app/app.ts

@@ -16,12 +16,12 @@ import { RouterOutlet } from '@angular/router';
       align-items: center;
       padding: 8px;
       min-height: 100dvh;
-      background: var(--bg-base-color);
+      background: var(--color-bg);
 
       main {
         width: 100%;
-        background: var(--surface-color);
+        background: var(--color-surface);
-        padding: 1ch;
+        padding: 1rem;
         border-radius: 5px;
       }
     }

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;
     }

src/styles.css

@@ -4,17 +4,23 @@
 @import '@fontsource/inter/700.css';
 
 :root {
-  --gray-base: oklch(28% 0 0);
+  --color-gray: oklch(28% 0 0);
-  --white-base: oklch(100% 0 0);
+  --color-white: oklch(100% 0 0);
-  --blue-base: oklch(62.3% 0.214 259.815);
+  --color-blue: oklch(62.3% 0.214 259.815);
-  --green-base: oklch(70.4% 0.14 182.503);
+  --color-blue-light: oklch(from var(--color-blue) calc(l + 0.15) c h);
+  --color-blue-dark: oklch(from var(--color-blue) calc(l - 0.15) c h);
+  --color-green: oklch(70.4% 0.14 182.503);
+
+
+  --color-bg: var(--color-gray);
+  --color-surface: var(--color-white);
+  --color-primary: var(--color-blue);
+  --color-primary-light: var(--color-blue-light);
+  --color-primary-dark: var(--color-blue-dark);
+  --color-success: var(--color-green);
+
 
   --font-family-base: 'Inter';
-
-  --bg-base-color: var(--gray-base);
-  --surface-color: var(--white-base);
-  --primary-color: var(--blue-base);
-  --success-color: var(--green-base);
 }
 
 * {
@@ -29,5 +35,16 @@ body {
 
 a {
   text-decoration: none;
-  color: var(--primary-color);
+  color: var(--color-primary);
+}
+
+input {
+  outline: 1px solid var(--color-primary);
+  border: none;
+  border-radius: 3px;
+  padding: .5em;
+
+  &:focus {
+    outline: 1px solid var(--color-primary-dark);
+  }
 }