refactor: добавлены переменные цветов css и стилизована иконка ссылка для создания новой задачи

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

@@ -1,4 +1,4 @@
-import { Component, computed, inject, linkedSignal, resource, signal } from '@angular/core';
+import { Component, computed, inject, resource, signal } from '@angular/core';
 import { TaskItem } from './task-item';
 import { Task } from './task';
 import { TaskService } from './task-service';
@@ -12,9 +12,11 @@ import { lucideSquarePlus } from '@ng-icons/lucide';
   imports: [TaskItem, RouterLink, FormsModule, NgIcon],
   providers: [provideIcons({ lucideSquarePlus })],
   template: `
-    <section>
-      <input [(ngModel)]="searchInput" type="text" />
-      <a routerLink="/new"><ng-icon name="lucideSquarePlus" size="20" /> </a>
+    <section class="topBar">
+      <input [(ngModel)]="filterInput" type="text" />
+      <a routerLink="/new">
+        <ng-icon name="lucideSquarePlus" size="36" />
+      </a>
     </section>
     <section class="result">
       @for (task of filteredTasks(); track $index) {
@@ -23,14 +25,28 @@ import { lucideSquarePlus } from '@ng-icons/lucide';
     </section>
   `,
   styles: `
+    .topBar {
+      display: flex;
+
+      a {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 1ch;
+      }
+    }
+
     input {
       outline: none;
-      padding: 5px;
+      padding: 1ch;
+      flex-grow: 1;
     }
+
     button {
       cursor: pointer;
       padding: 5px;
     }
+
     .result {
       margin-top: 20px;
     }
@@ -44,10 +60,10 @@ export class TaskList {
     loader: () => this.taskService.getAllTasks(),
   });
 
-  searchInput = signal('');
+  filterInput = signal('');
 
   filteredTasks = computed<Task[]>(() => {
-    const s = this.searchInput();
+    const s = this.filterInput();
     const tasks = this.tasks.value();
 
     if (!tasks) return [];