feat(task-create): add live task preview card for form consistency with project create

Author: Diogo-Ferraz

src/app/features/task-item/components/task-item-create/task-item-create.component.html

@@ -148,6 +148,18 @@ <h2>Create Task</h2>
         <i class="pi pi-check-circle"></i>
         <span>Set due dates only when a concrete deadline exists.</span>
       </div>
+
+      <div class="task-preview-card">
+        <div class="task-preview-card__title">Live Preview</div>
+        <div class="task-preview-card__name">{{ previewTitle }}</div>
+        <div class="task-preview-card__description">{{ previewDescription }}</div>
+        <div class="task-preview-card__meta">
+          <span class="preview-pill"><i class="pi pi-folder"></i> {{ previewProjectName }}</span>
+          <span class="preview-pill"><i class="pi pi-flag"></i> {{ previewStatusLabel }}</span>
+          <span class="preview-pill"><i class="pi pi-user"></i> {{ previewAssigneeLabel }}</span>
+          <span class="preview-pill"><i class="pi pi-calendar"></i> {{ previewDueDateLabel }}</span>
+        </div>
+      </div>
     </p-card>
   </div>
 </div>

src/app/features/task-item/components/task-item-create/task-item-create.component.scss

@@ -206,6 +206,53 @@
   margin-top: 0.1rem;
 }
 
+.task-preview-card {
+  margin-top: 1rem;
+  border: 1px solid var(--surface-border);
+  border-radius: 12px;
+  padding: 0.8rem;
+  background: color-mix(in srgb, var(--surface-100) 58%, transparent);
+}
+
+.task-preview-card__title {
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-color-secondary);
+  margin-bottom: 0.45rem;
+}
+
+.task-preview-card__name {
+  font-size: 0.98rem;
+  font-weight: 600;
+  margin-bottom: 0.35rem;
+}
+
+.task-preview-card__description {
+  font-size: 0.84rem;
+  line-height: 1.35;
+  color: var(--text-color-secondary);
+}
+
+.task-preview-card__meta {
+  margin-top: 0.7rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.preview-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  border: 1px solid var(--surface-border);
+  border-radius: 999px;
+  padding: 0.16rem 0.52rem;
+  font-size: 0.75rem;
+  color: var(--text-color-secondary);
+  background: var(--surface-0);
+}
+
 :host ::ng-deep .task-create-form .p-inputtext,
 :host ::ng-deep .task-create-form .p-inputtextarea,
 :host ::ng-deep .task-create-form .p-dropdown,

src/app/features/task-item/components/task-item-create/task-item-create.component.ts

@@ -93,6 +93,40 @@ export class TaskItemCreateComponent implements OnInit, OnDestroy {
     return this.taskForm.valid ? 2 : 1;
   }
 
+  get previewTitle(): string {
+    const value = (this.taskForm.get('title')?.value as string | null)?.trim();
+    return value && value.length > 0 ? value : 'Untitled task';
+  }
+
+  get previewDescription(): string {
+    const value = (this.taskForm.get('description')?.value as string | null)?.trim();
+    return value && value.length > 0 ? value : 'Add context and acceptance criteria to improve handoff quality.';
+  }
+
+  get previewProjectName(): string {
+    const selectedProjectId = this.taskForm.get('projectId')?.value as string | null;
+    if (!selectedProjectId) {
+      return 'No project selected';
+    }
+
+    return this.projects.find((project) => project.id === selectedProjectId)?.name ?? 'Selected project';
+  }
+
+  get previewStatusLabel(): string {
+    const status = this.taskForm.get('status')?.value as TaskStatus | null;
+    return this.statusOptions.find((option) => option.value === status)?.label ?? 'To Do';
+  }
+
+  get previewAssigneeLabel(): string {
+    const assignedUserId = this.taskForm.get('assignedUserId')?.value as string | null;
+    return this.assigneeOptions.find((option) => option.value === assignedUserId)?.label ?? 'Unassigned';
+  }
+
+  get previewDueDateLabel(): string {
+    const dueDate = this.taskForm.get('dueDate')?.value as Date | null;
+    return dueDate ? dueDate.toLocaleDateString() : 'No due date';
+  }
+
   isInvalid(controlName: string): boolean {
     const control = this.taskForm.get(controlName);
     return !!control && control.invalid && (control.dirty || control.touched);