feat(timeline): add parent task title

src/app/features/tasks/task/task.component.html

@@ -86,16 +86,18 @@
 
       <div
         (click)="IS_TOUCH_ONLY && toggleShowAdditionalInfoOpen()"
-        class="title-and-tags-wrapper"
-      >
-        <div
-          #contentEditableOnClickEl
-          (editFinished)="updateTaskTitleIfChanged($event)"
-          [isResetAfterEdit]="true"
-          [value]="task?.title"
-          class="task-title show-only-on-no-touch-only"
-          contentEditableOnClick
-          contenteditable="true"
+           class="title-and-tags-wrapper">
+        <div class="parent-title"
+             *ngIf="showParentTitle && task.parentId">{{parentTitle$|async}}
+        </div>
+
+        <div #contentEditableOnClickEl
+             (editFinished)="updateTaskTitleIfChanged($event)"
+             [isResetAfterEdit]="true"
+             [value]="task?.title"
+             class="task-title show-only-on-no-touch-only"
+             contentEditableOnClick
+             contenteditable="true"
         ></div>
 
         <div class="task-title show-only-on-touch-only">{{task?.title}}</div>

src/app/features/tasks/task/task.component.scss

@@ -906,3 +906,10 @@ $min-badge-size: $s*2.25;
   text-align: center;
 }
 
+.parent-title {
+  font-size: 10px;
+  padding-top: $s/2;
+  padding-left: $s;
+  margin-bottom: -2px;
+  text-overflow: ellipsis;
+}

src/app/features/tasks/task/task.component.ts

@@ -1,5 +1,6 @@
 import {
   AfterViewInit,
+  Attribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -13,7 +14,7 @@ import {
   ViewChild,
 } from '@angular/core';
 import { TaskService } from '../task.service';
-import { Observable, of, ReplaySubject, Subject } from 'rxjs';
+import { EMPTY, Observable, of, ReplaySubject, Subject } from 'rxjs';
 import {
   ShowSubTasksMode,
   TaskAdditionalInfoTargetPanel,
@@ -54,6 +55,7 @@ import { throttle } from 'helpful-decorators';
 export class TaskComponent implements OnInit, OnDestroy, AfterViewInit {
   task!: TaskWithSubTasks;
   @Input() isBacklog: boolean = false;
+
   T: typeof T = T;
   IS_TOUCH_ONLY: boolean = IS_TOUCH_ONLY;
   isDragOver: boolean = false;
@@ -96,6 +98,15 @@ export class TaskComponent implements OnInit, OnDestroy, AfterViewInit {
     distinctUntilChanged(),
     switchMap((pid) => this._projectService.getProjectsWithoutId$(pid)),
   );
+
+  parentTitle$: Observable<string> = this.showParentTitle
+    ? this._task$.pipe(
+        take(1),
+        switchMap((task) => this._taskService.getByIdLive$(task.parentId as string)),
+        map((task) => task.title),
+      )
+    : EMPTY;
+
   private _dragEnterTarget?: HTMLElement;
   private _destroy$: Subject<boolean> = new Subject<boolean>();
   private _currentPanTimeout?: number;
@@ -112,6 +123,7 @@ export class TaskComponent implements OnInit, OnDestroy, AfterViewInit {
     private readonly _cd: ChangeDetectorRef,
     private readonly _projectService: ProjectService,
     public readonly workContextService: WorkContextService,
+    @Attribute('showParentTitle') public showParentTitle: string,
   ) {}
 
   @Input('task') set taskSet(v: TaskWithSubTasks) {

src/app/features/timeline/timeline.component.html

@@ -7,6 +7,7 @@
     <div class="timeline-col right"
          [ngSwitch]="row.type">
       <task *ngSwitchCase="TimelineViewEntryType.TaskFull"
+            showParentTitle="true"
             [task]="row.data"></task>
       <div *ngSwitchDefault></div>
     </div>

src/app/features/timeline/timeline.component.scss

@@ -12,6 +12,7 @@
   flex-wrap: wrap;
   align-items: stretch;
   justify-content: center;
+  padding-bottom: $s;
 }
 
 .timeline-row,
@@ -20,6 +21,7 @@
 }
 
 .timeline-col {
+  min-height: 40px;
 
   &.time {
     display: flex;
@@ -29,6 +31,8 @@
     position: relative;
     min-width: 80px;
     text-align: center;
+    margin-top: -$s;
+    margin-bottom: 0;
 
     &:after {
       display: block;

src/app/features/timeline/timeline.component.ts

@@ -12,7 +12,8 @@ import { map } from 'rxjs/operators';
 })
 export class TimelineComponent {
   TimelineViewEntryType: typeof TimelineViewEntryType = TimelineViewEntryType;
-  timelineEntries$ = this._workContextService.todaysTasks$.pipe(
+  // timelineEntries$ = this._workContextService.todaysTasks$.pipe(
+  timelineEntries$ = this._workContextService.startableTasksForActiveContext$.pipe(
     map(tasks => this.mapToViewEntries(tasks))
   );
   // timelineEntries$ = new BehaviorSubject([