style(task-list): improve view

- align paddings
- convert list to flex
- add divider

src/app/app.ts

@@ -21,8 +21,9 @@ import { RouterOutlet } from '@angular/router';
       main {
         width: 100%;
         background: var(--color-surface);
-        padding: 1rem;
+        padding: 0.5rem;
         border-radius: 5px;
+        flex-grow: 1;
       }
     }
   `,

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

@@ -4,20 +4,13 @@ import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'ksk-crm-task-item',
-  imports: [
-    RouterLink
-  ],
+  imports: [RouterLink],
   template: `
     <p>{{ task().name }}</p>
     <p>{{ task().city }}, {{ task().streetAddress }}</p>
     <p><a [routerLink]="['/details', task().id]">Подробнее...</a></p>
   `,
-  styles: `
-    :host {
-      display: block;
-      margin-bottom: 20px;
-    }
-  `,
+  styles: ``,
 })
 export class TaskItem {
   task = input.required<Task>();

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

@@ -24,15 +24,19 @@ import { lucideCircleX, lucideSquarePlus } from '@ng-icons/lucide';
       </a>
     </section>
     <section class="result">
-      @for (task of filteredTasks(); track $index) {
+      @for (task of filteredTasks(); track task.id) {
         <ksk-crm-task-item [task]="task" />
+        @if (!$last) {
+          <hr />
+        }
+      } @empty {
+        <p>Список пуст</p>
       }
     </section>
   `,
   styles: `
     .topBar {
       display: flex;
-      padding-top: 1rem;
 
       .input-wrapper {
         display: inline-flex;
@@ -70,6 +74,17 @@ import { lucideCircleX, lucideSquarePlus } from '@ng-icons/lucide';
 
     .result {
       margin-top: 20px;
+      display: flex;
+      flex-direction: column;
+
+      > p {
+        text-align: center;
+      }
+    }
+
+    hr {
+      border: 1px solid var(--color-primary);
+      opacity: 0.3;
     }
   `,
 })
@@ -77,7 +92,6 @@ export class TaskList {
   taskService: TaskService = inject(TaskService);
 
   tasks = resource<Task[], null>({
-    params: signal(null),
     loader: () => this.taskService.getAllTasks(),
   });