Многосторнние изменения:

- Обновлены Angular и зависимости до последней версии (22.1.5, postcss, zod и т.д.)
- Заменена загрузка данных в конструкторе на API resource() в task-list и task-details
- Переименовать селекторы компонентов из app-* в ksk-crm-*
- Добавлены конфиги окружения с настраиваемым API URL
- Подключены @ng-icons/lucide для иконок
- Добавлен шрифт Inter и CSS-переменные для темизации
- Обновлён target tsconfig до ES2023 (для доступности методов в js)

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

@@ -1,21 +1,24 @@
-import { Component, computed, inject, signal } from '@angular/core';
+import { Component, computed, inject, linkedSignal, resource, signal } from '@angular/core';
 import { TaskItem } from './task-item';
 import { Task } from './task';
 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';
 
 @Component({
-  selector: 'app-home-page',
-  imports: [TaskItem, RouterLink, FormsModule],
+  selector: 'ksk-crm-home-page',
+  imports: [TaskItem, RouterLink, FormsModule, NgIcon],
+  providers: [provideIcons({ lucideSquarePlus })],
   template: `
     <section>
-      <a [routerLink]="['/new']">Добавить</a><br>
       <input [(ngModel)]="searchInput" type="text" />
+      <a routerLink="/new"><ng-icon name="lucideSquarePlus" size="20" /> </a>
     </section>
     <section class="result">
       @for (task of filteredTasks(); track $index) {
-        <app-task-item [task]="task" />
+        <ksk-crm-task-item [task]="task" />
       }
     </section>
   `,
@@ -34,13 +37,23 @@ import { FormsModule } from '@angular/forms';
   `,
 })
 export class TaskList {
-  tasks: Task[] = [];
   taskService: TaskService = inject(TaskService);
+
+  tasks = resource<Task[], null>({
+    params: signal(null),
+    loader: () => this.taskService.getAllTasks(),
+  });
+
   searchInput = signal('');
+
   filteredTasks = computed<Task[]>(() => {
     const s = this.searchInput();
-    if (s === '') return this.tasks;
-    return this.tasks.filter(
+    const tasks = this.tasks.value();
+
+    if (!tasks) return [];
+    if (s === '') return tasks;
+
+    return tasks.filter(
       (task) =>
         task.name.includes(s) ||
         task.city.includes(s) ||
@@ -48,12 +61,4 @@ export class TaskList {
         task.numberPhone.includes(s),
     );
   });
-
-  constructor() {
-    this.taskService.getAllTasks().then(tasks => {
-      this.tasks = tasks;
-      this.searchInput.update(_ => " ")
-      this.searchInput.update(_ => '');
-    });
-  }
 }