From ba6b7e4850fd0e1ae2baba41e4a7006b1d46b7d0 Mon Sep 17 00:00:00 2001
From: kamask <s@sha88.ru>
Date: Tue, 15 Sep 2026 17:01:40 +0300
Subject: [PATCH 1/2] style(task-list): improve view

- align paddings
- convert list to flex
- add divider
---
 src/app/app.ts                      |  3 ++-
 src/app/features/tasks/task-item.ts | 11 ++---------
 src/app/features/tasks/task-list.ts | 20 +++++++++++++++++---
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/app/app.ts b/src/app/app.ts
index bbbfb18..20bb0dc 100644
--- a/src/app/app.ts
+++ b/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;
       }
     }
   `,
diff --git a/src/app/features/tasks/task-item.ts b/src/app/features/tasks/task-item.ts
index 644cf6e..68bf7b9 100644
--- a/src/app/features/tasks/task-item.ts
+++ b/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>();
diff --git a/src/app/features/tasks/task-list.ts b/src/app/features/tasks/task-list.ts
index fbefc3b..f8c2cb4 100644
--- a/src/app/features/tasks/task-list.ts
+++ b/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(),
   });
 

From aa7959e7ac427edf29dbc555a16f653a95ad8408 Mon Sep 17 00:00:00 2001
From: kamask <s@sha88.ru>
Date: Tue, 15 Sep 2026 21:10:41 +0300
Subject: [PATCH 2/2] feat(task-item): make card clickable

---
 src/app/features/tasks/task-item.ts | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/app/features/tasks/task-item.ts b/src/app/features/tasks/task-item.ts
index 68bf7b9..cf16832 100644
--- a/src/app/features/tasks/task-item.ts
+++ b/src/app/features/tasks/task-item.ts
@@ -6,11 +6,30 @@ import { RouterLink } from '@angular/router';
   selector: 'ksk-crm-task-item',
   imports: [RouterLink],
   template: `
-    <p>{{ task().name }}</p>
-    <p>{{ task().city }}, {{ task().streetAddress }}</p>
-    <p><a [routerLink]="['/details', task().id]">Подробнее...</a></p>
+    <a [routerLink]="['/details', task().id]">
+      <p>{{ task().name }}</p>
+      <p>{{ task().city }}, {{ task().streetAddress }}</p>
+    </a>
+  `,
+  styles: `
+    :host {
+      display: block;
+      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);
+    }
   `,
-  styles: ``,
 })
 export class TaskItem {
   task = input.required<Task>();