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,18 +4,30 @@ import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'ksk-crm-task-item',
-  imports: [
+  imports: [RouterLink],
-    RouterLink
-  ],
   template: `
-    <p>{{ task().name }}</p>
+    <a [routerLink]="['/details', task().id]">
-    <p>{{ task().city }}, {{ task().streetAddress }}</p>
+      <p>{{ task().name }}</p>
-    <p><a [routerLink]="['/details', task().id]">Подробнее...</a></p>
+      <p>{{ task().city }}, {{ task().streetAddress }}</p>
+    </a>
   `,
   styles: `
     :host {
       display: block;
-      margin-bottom: 20px;
+      padding: 1rem;
+      cursor: pointer;
+      transition: all 0.2s;
+
+      &:hover {
+        background: color-mix(in oklch, var(--color-primary) 25%, transparent);
+      }
+      &:active {
+        background: color-mix(in oklch, var(--color-primary) 25%, transparent);
+      }
+    }
+
+    a {
+      color: var(--color-gray);
     }
   `,
 })

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(),
   });