feat: add task menu to quickly toggle tags

src/app/core-ui/side-nav/side-nav.component.html

@@ -153,7 +153,7 @@
           (keydown)="checkFocusTag($event)"
           [workContext]="tag"
           [type]="WorkContextType.TAG"
-          [defaultIcon]="'style'"
+          [defaultIcon]="'label'"
           [activeWorkContextId]="activeWorkContextId"
         ></side-nav-item>
       }

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

@@ -45,6 +45,11 @@
     [matMenuTriggerFor]="projectMenu"
     style="visibility: hidden"
   ></div>
+  <div
+    #tagMenuTriggerEl
+    [matMenuTriggerFor]="tagMenu"
+    style="visibility: hidden"
+  ></div>
 
   <div class="box"></div>
 
@@ -347,3 +352,33 @@
     }
   </ng-template>
 </mat-menu>
+
+<mat-menu
+  #tagMenu="matMenu"
+  (closed)="focusSelf()"
+>
+  <ng-template matMenuContent>
+    @for (tag of toggleTagList(); track $index) {
+      <button
+        (click)="toggleTag(tag.id)"
+        mat-menu-item
+      >
+        @if (t.tagIds.includes(tag.id)) {
+          <mat-icon>check_box</mat-icon>
+        } @else {
+          <mat-icon>check_box_outline_blank</mat-icon>
+        }
+        <mat-icon
+          [style.color]="tag.color || tag.theme.primary"
+          class="tag-ico"
+          >{{ tag.icon || 'label' }}</mat-icon
+        >
+        {{ tag.title }}
+      </button>
+    }
+    <!--    <button mat-menu-item>-->
+    <!--      <mat-icon>add</mat-icon>-->
+    <!--      {{ T.G.ADD | translate }}-->
+    <!--    </button>-->
+  </ng-template>
+</mat-menu>

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

@@ -873,3 +873,13 @@ $min-badge-size: $s * 2.25;
     margin-right: -29px !important;
   }
 }
+
+.tag-ico {
+  font-size: 20px;
+  line-height: 20px;
+  height: 20px;
+  width: 20px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 4px;
+}

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

@@ -48,7 +48,6 @@ import {
   MatMenuTrigger,
 } from '@angular/material/menu';
 import { TODAY_TAG } from '../../tag/tag.const';
-import { DialogEditTagsForTaskComponent } from '../../tag/dialog-edit-tags/dialog-edit-tags-for-task.component';
 import { WorkContextService } from '../../work-context/work-context.service';
 import { throttle } from 'helpful-decorators';
 import { TaskRepeatCfgService } from '../../task-repeat-cfg/task-repeat-cfg.service';
@@ -83,6 +82,7 @@ import { IssueIconPipe } from '../../issue/issue-icon/issue-icon.pipe';
 import { SubTaskTotalTimeSpentPipe } from '../pipes/sub-task-total-time-spent.pipe';
 import { TagListComponent } from '../../tag/tag-list/tag-list.component';
 import { ShortDate2Pipe } from '../../../ui/pipes/short-date2.pipe';
+import { TagService } from '../../tag/tag.service';
 
 @Component({
   selector: 'task',
@@ -133,6 +133,7 @@ export class TaskComponent implements OnDestroy, AfterViewInit {
   private readonly _elementRef = inject(ElementRef);
   private readonly _renderer = inject(Renderer2);
   private readonly _projectService = inject(ProjectService);
+  private readonly _tagService = inject(TagService);
   readonly plannerService = inject(PlannerService);
   readonly workContextService = inject(WorkContextService);
 
@@ -175,6 +176,9 @@ export class TaskComponent implements OnDestroy, AfterViewInit {
   readonly projectMenuTrigger = viewChild('projectMenuTriggerEl', {
     read: MatMenuTrigger,
   });
+  readonly tagMenuTrigger = viewChild('tagMenuTriggerEl', {
+    read: MatMenuTrigger,
+  });
   readonly taskContextMenu = viewChild('taskContextMenu', {
     read: TaskContextMenuComponent,
   });
@@ -189,6 +193,8 @@ export class TaskComponent implements OnDestroy, AfterViewInit {
     ),
   );
 
+  toggleTagList = toSignal(this._tagService.tagsNoMyDayAndNoList$, { initialValue: [] });
+
   parentTask = toSignal(
     this._task$.pipe(
       switchMap((task) =>
@@ -412,14 +418,26 @@ export class TaskComponent implements OnDestroy, AfterViewInit {
   }
 
   async editTags(): Promise<void> {
-    this._matDialog
-      .open(DialogEditTagsForTaskComponent, {
-        data: {
-          task: this.task(),
-        },
-      })
-      .afterClosed()
-      .subscribe(() => this.focusSelf());
+    this.tagMenuTrigger()?.openMenu();
+    console.log('OPEN', this.tagMenuTrigger());
+
+    // this._matDialog
+    //   .open(DialogEditTagsForTaskComponent, {
+    //     data: {
+    //       task: this.task(),
+    //     },
+    //   })
+    //   .afterClosed()
+    //   .subscribe(() => this.focusSelf());
+  }
+
+  toggleTag(tagId: string): void {
+    const task = this.task();
+    const tagIds = task.tagIds.includes(tagId)
+      ? task.tagIds.filter((id) => id !== tagId)
+      : [...task.tagIds, tagId];
+
+    this.onTagsUpdated(tagIds);
   }
 
   addToMyDay(): void {