From c45080527ef06f484de8aca752b893f207aea679 Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Fri, 17 Oct 2025 16:34:47 +0200
Subject: [PATCH 1/7] feat(customizerMenu): first draft for component

---
 .../desktop-panel-buttons.component.ts        |  16 +-
 .../mobile-side-panel-menu.component.ts       |  14 +-
 .../mobile-bottom-nav.component.html          |   5 +-
 .../mobile-bottom-nav.component.ts            |   6 +-
 .../features/panels/panel-content.service.ts  |  24 +-
 .../right-panel-content.component.html        |   8 -
 .../right-panel-content.component.ts          |  12 +-
 .../task-view-customizer-panel.component.html | 239 ++++++++++--------
 .../task-view-customizer-panel.component.scss |  56 ++--
 .../task-view-customizer-panel.component.ts   |   8 +-
 10 files changed, 194 insertions(+), 194 deletions(-)

diff --git a/src/app/core-ui/main-header/desktop-panel-buttons/desktop-panel-buttons.component.ts b/src/app/core-ui/main-header/desktop-panel-buttons/desktop-panel-buttons.component.ts
index 443da1f879..2407b52948 100644
--- a/src/app/core-ui/main-header/desktop-panel-buttons/desktop-panel-buttons.component.ts
+++ b/src/app/core-ui/main-header/desktop-panel-buttons/desktop-panel-buttons.component.ts
@@ -5,20 +5,28 @@ import { MatTooltip } from '@angular/material/tooltip';
 import { TranslatePipe } from '@ngx-translate/core';
 import { LayoutService } from '../../layout/layout.service';
 import { TaskViewCustomizerService } from '../../../features/task-view-customizer/task-view-customizer.service';
+import { TaskViewCustomizerPanelComponent } from '../../../features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component';
 import { T } from '../../../t.const';
 import { KeyboardConfig } from '../../../features/config/keyboard-config.model';
+import { MatMenuTrigger } from '@angular/material/menu';
 
 @Component({
   selector: 'desktop-panel-buttons',
   standalone: true,
-  imports: [MatIconButton, MatIcon, MatTooltip, TranslatePipe],
+  imports: [
+    MatIconButton,
+    MatIcon,
+    MatTooltip,
+    TranslatePipe,
+    TaskViewCustomizerPanelComponent,
+    MatMenuTrigger,
+  ],
   template: `
     <button
       class="panel-btn"
       [disabled]="!isWorkViewPage()"
-      [class.isActive]="isShowTaskViewCustomizerPanel()"
       [class.isCustomized]="taskViewCustomizerService.isCustomized()"
-      (click)="layoutService.toggleTaskViewCustomizerPanel()"
+      [matMenuTriggerFor]="customizerPanel.menu"
       mat-icon-button
       matTooltip="{{ T.GCF.KEYBOARD.TOGGLE_TASK_VIEW_CUSTOMIZER_PANEL | translate }} {{
         kb()?.toggleTaskViewCustomizerPanel
@@ -29,6 +37,8 @@ import { KeyboardConfig } from '../../../features/config/keyboard-config.model';
       <mat-icon>filter_list</mat-icon>
     </button>
 
+    <task-view-customizer-panel #customizerPanel></task-view-customizer-panel>
+
     <button
       class="panel-btn e2e-toggle-issue-provider-panel"
       [disabled]="!isRouteWithSidePanel()"
diff --git a/src/app/core-ui/main-header/mobile-side-panel-menu/mobile-side-panel-menu.component.ts b/src/app/core-ui/main-header/mobile-side-panel-menu/mobile-side-panel-menu.component.ts
index 37d944e759..906dccc313 100644
--- a/src/app/core-ui/main-header/mobile-side-panel-menu/mobile-side-panel-menu.component.ts
+++ b/src/app/core-ui/main-header/mobile-side-panel-menu/mobile-side-panel-menu.component.ts
@@ -3,9 +3,11 @@ import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatMenuModule } from '@angular/material/menu';
 import { TranslateModule } from '@ngx-translate/core';
 import { LayoutService } from '../../layout/layout.service';
 import { TaskViewCustomizerService } from '../../../features/task-view-customizer/task-view-customizer.service';
+import { TaskViewCustomizerPanelComponent } from '../../../features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component';
 import { T } from '../../../t.const';
 import { KeyboardConfig } from '../../../features/config/keyboard-config.model';
 import { GlobalConfigService } from '../../../features/config/global-config.service';
@@ -31,8 +33,10 @@ import { BreakpointObserver } from '@angular/cdk/layout';
     MatIconModule,
     MatButtonModule,
     MatTooltipModule,
+    MatMenuModule,
     TranslateModule,
     PluginIconComponent,
+    TaskViewCustomizerPanelComponent,
   ],
   template: `
     <div class="mobile-dropdown-wrapper">
@@ -68,15 +72,16 @@ import { BreakpointObserver } from '@angular/cdk/layout';
         <button
           mat-mini-fab
           color=""
-          [class.active]="isShowTaskViewCustomizerPanel()"
           [class.isCustomized]="taskViewCustomizerService.isCustomized()"
           [disabled]="!isWorkViewPage()"
-          (click)="toggleTaskViewCustomizer()"
+          [matMenuTriggerFor]="customizerPanel.menu"
           [matTooltip]="T.GCF.KEYBOARD.TOGGLE_TASK_VIEW_CUSTOMIZER_PANEL | translate"
         >
           <mat-icon>filter_list</mat-icon>
         </button>
 
+        <task-view-customizer-panel #customizerPanel></task-view-customizer-panel>
+
         <!-- Issue Panel -->
         <button
           mat-mini-fab
@@ -199,11 +204,6 @@ export class MobileSidePanelMenuComponent {
     this.isShowMobileMenu.set(false);
   }
 
-  toggleTaskViewCustomizer(): void {
-    this.layoutService.toggleTaskViewCustomizerPanel();
-    this.isShowMobileMenu.set(false);
-  }
-
   toggleIssuePanel(): void {
     this.layoutService.toggleAddTaskPanel();
     this.isShowMobileMenu.set(false);
diff --git a/src/app/core-ui/mobile-bottom-nav/mobile-bottom-nav.component.html b/src/app/core-ui/mobile-bottom-nav/mobile-bottom-nav.component.html
index c897a34289..e1467e9854 100644
--- a/src/app/core-ui/mobile-bottom-nav/mobile-bottom-nav.component.html
+++ b/src/app/core-ui/mobile-bottom-nav/mobile-bottom-nav.component.html
@@ -65,14 +65,15 @@
   <button
     mat-menu-item
     [disabled]="!isWorkViewPage()"
-    [class.active]="isShowTaskViewCustomizerPanel()"
     [class.isCustomized]="taskViewCustomizerService.isCustomized()"
-    (click)="toggleTaskViewCustomizer()"
+    [matMenuTriggerFor]="customizerPanel.menu"
   >
     <mat-icon>filter_list</mat-icon>
     <span>{{ T.BN.SHOW_TASK_VIEW_CUSTOMIZER_PANEL | translate }}</span>
   </button>
 
+  <task-view-customizer-panel #customizerPanel></task-view-customizer-panel>
+
   <button
     mat-menu-item
     [disabled]="!isRouteWithSidePanel()"
diff --git a/src/app/core-ui/mobile-bottom-nav/mobile-bottom-nav.component.ts b/src/app/core-ui/mobile-bottom-nav/mobile-bottom-nav.component.ts
index a0d50bfcbe..f63ebe964e 100644
--- a/src/app/core-ui/mobile-bottom-nav/mobile-bottom-nav.component.ts
+++ b/src/app/core-ui/mobile-bottom-nav/mobile-bottom-nav.component.ts
@@ -11,6 +11,7 @@ import { filter, map, startWith } from 'rxjs/operators';
 
 import { LayoutService } from '../layout/layout.service';
 import { TaskViewCustomizerService } from '../../features/task-view-customizer/task-view-customizer.service';
+import { TaskViewCustomizerPanelComponent } from '../../features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component';
 import { PluginBridgeService } from '../../plugins/plugin-bridge.service';
 import { PluginIconComponent } from '../../plugins/ui/plugin-icon/plugin-icon.component';
 import { Store } from '@ngrx/store';
@@ -35,6 +36,7 @@ import { WorkContextService } from '../../features/work-context/work-context.ser
     MatMenuModule,
     TranslateModule,
     PluginIconComponent,
+    TaskViewCustomizerPanelComponent,
   ],
   templateUrl: './mobile-bottom-nav.component.html',
   styleUrls: ['./mobile-bottom-nav.component.scss'],
@@ -126,10 +128,6 @@ export class MobileBottomNavComponent {
     }
   }
 
-  toggleTaskViewCustomizer(): void {
-    this._layoutService.toggleTaskViewCustomizerPanel();
-  }
-
   toggleIssuePanel(): void {
     this._layoutService.toggleAddTaskPanel();
   }
diff --git a/src/app/features/panels/panel-content.service.ts b/src/app/features/panels/panel-content.service.ts
index 3c5a87eb33..639fd5fd2b 100644
--- a/src/app/features/panels/panel-content.service.ts
+++ b/src/app/features/panels/panel-content.service.ts
@@ -13,7 +13,6 @@ export type PanelContentType =
   | 'TASK'
   | 'ADD_TASK_PANEL'
   | 'ISSUE_PANEL'
-  | 'TASK_VIEW_CUSTOMIZER_PANEL'
   | 'PLUGIN';
 
 @Injectable({ providedIn: 'root' })
@@ -42,16 +41,10 @@ export class PanelContentService {
     const selectedTask = this._selectedTask();
     if (!layoutState) return null;
 
-    const {
-      isShowNotes,
-      isShowIssuePanel,
-      isShowTaskViewCustomizerPanel,
-      isShowPluginPanel,
-    } = layoutState;
+    const { isShowNotes, isShowIssuePanel, isShowPluginPanel } = layoutState;
 
     if (isShowNotes) return 'NOTES';
     if (isShowIssuePanel) return 'ISSUE_PANEL';
-    if (isShowTaskViewCustomizerPanel) return 'TASK_VIEW_CUSTOMIZER_PANEL';
     if (isShowPluginPanel) return 'PLUGIN';
     if (selectedTask) return 'TASK';
     return null;
@@ -61,19 +54,8 @@ export class PanelContentService {
     const layoutState = this._layoutFeatureState();
     const selectedTask = this._selectedTask();
     if (!layoutState) return false;
-    const {
-      isShowNotes,
-      isShowIssuePanel,
-      isShowTaskViewCustomizerPanel,
-      isShowPluginPanel,
-    } = layoutState;
-    return !!(
-      selectedTask ||
-      isShowNotes ||
-      isShowIssuePanel ||
-      isShowTaskViewCustomizerPanel ||
-      isShowPluginPanel
-    );
+    const { isShowNotes, isShowIssuePanel, isShowPluginPanel } = layoutState;
+    return !!(selectedTask || isShowNotes || isShowIssuePanel || isShowPluginPanel);
   });
 
   readonly canOpen = computed<boolean>(() => {
diff --git a/src/app/features/right-panel/right-panel-content.component.html b/src/app/features/right-panel/right-panel-content.component.html
index 9d13c6391d..083b14146d 100644
--- a/src/app/features/right-panel/right-panel-content.component.html
+++ b/src/app/features/right-panel/right-panel-content.component.html
@@ -2,14 +2,6 @@
   <issue-panel [@slideInFromRight]></issue-panel>
 } @else if (panelContent() === 'NOTES') {
   <notes [@slideInFromRight]></notes>
-} @else if (panelContent() === 'TASK_VIEW_CUSTOMIZER_PANEL') {
-  <!-- Wrap TVC to stabilize layout during panel width transitions -->
-  <div
-    class="panel-wrapper"
-    [@slideInFromRight]
-  >
-    <task-view-customizer-panel></task-view-customizer-panel>
-  </div>
 } @else if (panelContent() === 'PLUGIN') {
   @for (key of pluginPanelKeys(); track key) {
     <plugin-panel-container [@slideInFromRight]></plugin-panel-container>
diff --git a/src/app/features/right-panel/right-panel-content.component.ts b/src/app/features/right-panel/right-panel-content.component.ts
index 4007f15c3f..b31dedb7bc 100644
--- a/src/app/features/right-panel/right-panel-content.component.ts
+++ b/src/app/features/right-panel/right-panel-content.component.ts
@@ -18,7 +18,6 @@ import { taskDetailPanelTaskChangeAnimation } from '../tasks/task-detail-panel/t
 import { IssuePanelComponent } from '../issue-panel/issue-panel.component';
 import { NotesComponent } from '../note/notes/notes.component';
 import { TaskDetailPanelComponent } from '../tasks/task-detail-panel/task-detail-panel.component';
-import { TaskViewCustomizerPanelComponent } from '../task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component';
 import { PluginService } from '../../plugins/plugin.service';
 import { PluginPanelContainerComponent } from '../../plugins/ui/plugin-panel-container/plugin-panel-container.component';
 import { Store } from '@ngrx/store';
@@ -55,7 +54,6 @@ export type RightPanelContentPanelType = PanelContentType;
     IssuePanelComponent,
     NotesComponent,
     TaskDetailPanelComponent,
-    TaskViewCustomizerPanelComponent,
     PluginPanelContainerComponent,
   ],
 })
@@ -167,7 +165,6 @@ export class RightPanelContentComponent implements OnDestroy {
     const {
       isShowNotes,
       isShowIssuePanel: isShowAddTaskPanel,
-      isShowTaskViewCustomizerPanel,
       isShowPluginPanel,
     } = layoutState;
 
@@ -181,13 +178,8 @@ export class RightPanelContentComponent implements OnDestroy {
     }
 
     return (
-      !!(
-        selectedTask ||
-        isShowNotes ||
-        isShowAddTaskPanel ||
-        isShowTaskViewCustomizerPanel ||
-        isShowPluginPanel
-      ) && targetPanel !== TaskDetailTargetPanel.DONT_OPEN_PANEL
+      !!(selectedTask || isShowNotes || isShowAddTaskPanel || isShowPluginPanel) &&
+      targetPanel !== TaskDetailTargetPanel.DONT_OPEN_PANEL
     );
   });
 
diff --git a/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.html b/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.html
index 70dc262db5..a9f69c5d9c 100644
--- a/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.html
+++ b/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.html
@@ -1,113 +1,128 @@
-<div class="customizer-panel">
-  <h3>{{ T.F.TASK_VIEW.CUSTOMIZER.TITLE | translate }}</h3>
-  <div class="form-group">
-    <label>{{ T.F.TASK_VIEW.CUSTOMIZER.SORT_BY | translate }}</label>
-    <mat-form-field>
-      <mat-select
-        [ngModel]="customizerService.selectedSort()"
-        (ngModelChange)="customizerService.setSort($event)"
-      >
-        @for (opt of sortOptions; track opt.value) {
-          <mat-option [value]="opt.value">{{ opt.label | translate }}</mat-option>
-        }
-      </mat-select>
-    </mat-form-field>
-  </div>
-
-  <div class="form-group">
-    <label>{{ T.F.TASK_VIEW.CUSTOMIZER.GROUP_BY | translate }}</label>
-    <mat-form-field>
-      <mat-select
-        [ngModel]="customizerService.selectedGroup()"
-        (ngModelChange)="customizerService.setGroup($event)"
-      >
-        @for (opt of groupOptions; track opt.value) {
-          <mat-option [value]="opt.value">{{ opt.label | translate }}</mat-option>
-        }
-      </mat-select>
-    </mat-form-field>
-  </div>
-
-  <div class="form-group">
-    <label>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_BY | translate }}</label>
-    <mat-form-field>
-      <mat-select
-        [ngModel]="customizerService.selectedFilter()"
-        (ngModelChange)="customizerService.setFilter($event)"
-      >
-        @for (opt of filterOptions; track opt.value) {
-          <mat-option [value]="opt.value">{{ opt.label | translate }}</mat-option>
-        }
-      </mat-select>
-    </mat-form-field>
-
-    @if (customizerService.selectedFilter() === 'tag') {
-      <mat-form-field>
-        <input
-          matInput
-          [ngModel]="customizerService.filterInputValue()"
-          (ngModelChange)="customizerService.setFilterInputValue($event)"
-          [placeholder]="T.F.TASK_VIEW.CUSTOMIZER.ENTER_TAG | translate"
-        />
-      </mat-form-field>
-    }
-
-    @if (customizerService.selectedFilter() === 'project') {
-      <mat-form-field>
-        <input
-          matInput
-          [ngModel]="customizerService.filterInputValue()"
-          (ngModelChange)="customizerService.setFilterInputValue($event)"
-          [placeholder]="T.F.TASK_VIEW.CUSTOMIZER.ENTER_PROJECT | translate"
-        />
-      </mat-form-field>
-    }
-
-    @if (customizerService.selectedFilter() === 'scheduledDate') {
-      <mat-form-field>
-        <mat-select
-          [ngModel]="customizerService.filterInputValue()"
-          (ngModelChange)="customizerService.setFilterInputValue($event)"
-        >
-          @for (option of scheduledPresets; track option.value) {
-            <mat-option [value]="option.value">{{ option.label | translate }}</mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-    }
-
-    @if (customizerService.selectedFilter() === 'estimatedTime') {
-      <mat-form-field>
-        <mat-select
-          [ngModel]="customizerService.filterInputValue()"
-          (ngModelChange)="customizerService.setFilterInputValue($event)"
-        >
-          @for (option of timePresets; track option.value) {
-            <mat-option [value]="option.value">{{ option.label | translate }}</mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-    }
-
-    @if (customizerService.selectedFilter() === 'timeSpent') {
-      <mat-form-field>
-        <mat-select
-          [ngModel]="customizerService.filterInputValue()"
-          (ngModelChange)="customizerService.setFilterInputValue($event)"
-        >
-          @for (option of timePresets; track option.value) {
-            <mat-option [value]="option.value">{{ option.label | translate }}</mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-    }
-  </div>
-
-  <button
-    mat-raised-button
-    color="primary"
-    (click)="onResetAll()"
+<mat-menu
+  #customizerMenu="matMenu"
+  class="customizer-menu"
+>
+  <div
+    class="menu-content"
+    (click)="$event.stopPropagation()"
   >
-    {{ T.F.TASK_VIEW.CUSTOMIZER.RESET_ALL | translate }}
-  </button>
-</div>
+    <h3>{{ T.F.TASK_VIEW.CUSTOMIZER.TITLE | translate }}</h3>
+
+    <div class="form-group">
+      <label>{{ T.F.TASK_VIEW.CUSTOMIZER.SORT_BY | translate }}</label>
+      <mat-form-field>
+        <mat-select
+          [ngModel]="customizerService.selectedSort()"
+          (ngModelChange)="customizerService.setSort($event)"
+        >
+          @for (opt of sortOptions; track opt.value) {
+            <mat-option [value]="opt.value">{{ opt.label | translate }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </div>
+
+    <div class="form-group">
+      <label>{{ T.F.TASK_VIEW.CUSTOMIZER.GROUP_BY | translate }}</label>
+      <mat-form-field>
+        <mat-select
+          [ngModel]="customizerService.selectedGroup()"
+          (ngModelChange)="customizerService.setGroup($event)"
+        >
+          @for (opt of groupOptions; track opt.value) {
+            <mat-option [value]="opt.value">{{ opt.label | translate }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </div>
+
+    <div class="form-group">
+      <label>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_BY | translate }}</label>
+      <mat-form-field>
+        <mat-select
+          [ngModel]="customizerService.selectedFilter()"
+          (ngModelChange)="customizerService.setFilter($event)"
+        >
+          @for (opt of filterOptions; track opt.value) {
+            <mat-option [value]="opt.value">{{ opt.label | translate }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+
+      @if (customizerService.selectedFilter() === 'tag') {
+        <mat-form-field>
+          <input
+            matInput
+            [ngModel]="customizerService.filterInputValue()"
+            (ngModelChange)="customizerService.setFilterInputValue($event)"
+            [placeholder]="T.F.TASK_VIEW.CUSTOMIZER.ENTER_TAG | translate"
+          />
+        </mat-form-field>
+      }
+
+      @if (customizerService.selectedFilter() === 'project') {
+        <mat-form-field>
+          <input
+            matInput
+            [ngModel]="customizerService.filterInputValue()"
+            (ngModelChange)="customizerService.setFilterInputValue($event)"
+            [placeholder]="T.F.TASK_VIEW.CUSTOMIZER.ENTER_PROJECT | translate"
+          />
+        </mat-form-field>
+      }
+
+      @if (customizerService.selectedFilter() === 'scheduledDate') {
+        <mat-form-field>
+          <mat-select
+            [ngModel]="customizerService.filterInputValue()"
+            (ngModelChange)="customizerService.setFilterInputValue($event)"
+          >
+            @for (option of scheduledPresets; track option.value) {
+              <mat-option [value]="option.value">{{
+                option.label | translate
+              }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      }
+
+      @if (customizerService.selectedFilter() === 'estimatedTime') {
+        <mat-form-field>
+          <mat-select
+            [ngModel]="customizerService.filterInputValue()"
+            (ngModelChange)="customizerService.setFilterInputValue($event)"
+          >
+            @for (option of timePresets; track option.value) {
+              <mat-option [value]="option.value">{{
+                option.label | translate
+              }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      }
+
+      @if (customizerService.selectedFilter() === 'timeSpent') {
+        <mat-form-field>
+          <mat-select
+            [ngModel]="customizerService.filterInputValue()"
+            (ngModelChange)="customizerService.setFilterInputValue($event)"
+          >
+            @for (option of timePresets; track option.value) {
+              <mat-option [value]="option.value">{{
+                option.label | translate
+              }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      }
+    </div>
+
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="onResetAll()"
+    >
+      {{ T.F.TASK_VIEW.CUSTOMIZER.RESET_ALL | translate }}
+    </button>
+  </div>
+</mat-menu>
diff --git a/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.scss b/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.scss
index c6cc0d9150..29fbba6d7c 100644
--- a/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.scss
+++ b/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.scss
@@ -1,33 +1,37 @@
-.customizer-panel {
-  // Align layout with other right-panel contents (e.g. issue-panel)
-  // Fill the container and let the parent handle scrolling
-  position: absolute;
-  inset: 8px 16px;
-  padding: 8px 0;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
+::ng-deep .customizer-menu {
+  .menu-content {
+    padding: 16px;
+    max-width: 400px;
+    min-width: 300px;
 
-  h3 {
-    text-align: center;
-    margin-bottom: 20px;
-  }
-
-  .form-group {
-    margin-bottom: 15px;
-    display: flex;
-    flex-direction: column;
-
-    label {
-      margin-bottom: 5px;
+    h3 {
+      text-align: center;
+      margin-top: 0;
+      margin-bottom: 20px;
     }
 
-    mat-form-field {
+    .form-group {
+      margin-bottom: 15px;
+      display: flex;
+      flex-direction: column;
+
+      label {
+        margin-bottom: 5px;
+        font-weight: 500;
+      }
+
+      mat-form-field {
+        width: 100%;
+      }
+
+      mat-slide-toggle {
+        align-self: flex-start;
+      }
+    }
+
+    button {
       width: 100%;
-    }
-
-    mat-slide-toggle {
-      align-self: flex-start;
+      margin-top: 8px;
     }
   }
 }
diff --git a/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.ts b/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.ts
index af1594eef4..4af9a96594 100644
--- a/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.ts
+++ b/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, ViewChild } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -7,6 +7,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatMenuModule, MatMenu } from '@angular/material/menu';
 import { TaskViewCustomizerService } from '../task-view-customizer.service';
 import { TranslatePipe } from '@ngx-translate/core';
 import { T } from 'src/app/t.const';
@@ -17,6 +18,7 @@ import { T } from 'src/app/t.const';
   styleUrls: ['./task-view-customizer-panel.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
+  exportAs: 'customizerMenu',
   imports: [
     CommonModule,
     FormsModule,
@@ -25,12 +27,16 @@ import { T } from 'src/app/t.const';
     MatInputModule,
     MatButtonModule,
     MatSlideToggleModule,
+    MatMenuModule,
     TranslatePipe,
   ],
 })
 export class TaskViewCustomizerPanelComponent implements OnInit {
   customizerService = inject(TaskViewCustomizerService);
 
+  @ViewChild('customizerMenu', { static: false })
+  menu!: MatMenu;
+
   T = T;
   selectedSort: string = 'default';
   selectedGroup: string = 'default';

From 008134d2d537c7fab5bbaead644c428a8ac14d75 Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Fri, 17 Oct 2025 16:43:44 +0200
Subject: [PATCH 2/7] feat(customizerMenu): second draft for component

---
 .../task-view-customizer-panel.component.html | 374 ++++++++++++------
 .../task-view-customizer-panel.component.scss |  47 +--
 .../task-view-customizer-panel.component.ts   |  35 ++
 3 files changed, 311 insertions(+), 145 deletions(-)

diff --git a/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.html b/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.html
index a9f69c5d9c..d8aed7d856 100644
--- a/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.html
+++ b/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.html
@@ -2,127 +2,265 @@
   #customizerMenu="matMenu"
   class="customizer-menu"
 >
+  <!-- Sort By -->
+  <button
+    mat-menu-item
+    [matMenuTriggerFor]="sortMenu"
+  >
+    <mat-icon>sort</mat-icon>
+    <span>{{ T.F.TASK_VIEW.CUSTOMIZER.SORT_BY | translate }}</span>
+    @if (customizerService.selectedSort() !== 'default') {
+      <span class="current-value">
+        {{ getSortLabel(customizerService.selectedSort()) | translate }}
+      </span>
+    }
+  </button>
+
+  <!-- Group By -->
+  <button
+    mat-menu-item
+    [matMenuTriggerFor]="groupMenu"
+  >
+    <mat-icon>group_work</mat-icon>
+    <span>{{ T.F.TASK_VIEW.CUSTOMIZER.GROUP_BY | translate }}</span>
+    @if (customizerService.selectedGroup() !== 'default') {
+      <span class="current-value">
+        {{ getGroupLabel(customizerService.selectedGroup()) | translate }}
+      </span>
+    }
+  </button>
+
+  <!-- Filter By -->
+  <button
+    mat-menu-item
+    [matMenuTriggerFor]="filterMenu"
+  >
+    <mat-icon>filter_alt</mat-icon>
+    <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_BY | translate }}</span>
+    @if (customizerService.selectedFilter() !== 'default') {
+      <span class="current-value">
+        {{ getFilterLabel(customizerService.selectedFilter()) | translate }}
+      </span>
+    }
+  </button>
+
+  <mat-divider></mat-divider>
+
+  <!-- Reset All -->
+  <button
+    mat-menu-item
+    (click)="onResetAll()"
+  >
+    <mat-icon>refresh</mat-icon>
+    <span>{{ T.F.TASK_VIEW.CUSTOMIZER.RESET_ALL | translate }}</span>
+  </button>
+</mat-menu>
+
+<!-- Sort submenu -->
+<mat-menu #sortMenu="matMenu">
+  @for (opt of sortOptions; track opt.value) {
+    <button
+      mat-menu-item
+      (click)="customizerService.setSort(opt.value)"
+      [class.active]="customizerService.selectedSort() === opt.value"
+    >
+      @if (customizerService.selectedSort() === opt.value) {
+        <mat-icon>check</mat-icon>
+      }
+      <span>{{ opt.label | translate }}</span>
+    </button>
+  }
+</mat-menu>
+
+<!-- Group submenu -->
+<mat-menu #groupMenu="matMenu">
+  @for (opt of groupOptions; track opt.value) {
+    <button
+      mat-menu-item
+      (click)="customizerService.setGroup(opt.value)"
+      [class.active]="customizerService.selectedGroup() === opt.value"
+    >
+      @if (customizerService.selectedGroup() === opt.value) {
+        <mat-icon>check</mat-icon>
+      }
+      <span>{{ opt.label | translate }}</span>
+    </button>
+  }
+</mat-menu>
+
+<!-- Filter submenu -->
+<mat-menu #filterMenu="matMenu">
+  <button
+    mat-menu-item
+    (click)="onFilterSelect('default')"
+    [class.active]="customizerService.selectedFilter() === 'default'"
+  >
+    @if (customizerService.selectedFilter() === 'default') {
+      <mat-icon>check</mat-icon>
+    }
+    <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_DEFAULT | translate }}</span>
+  </button>
+
+  <button
+    mat-menu-item
+    [matMenuTriggerFor]="filterTagMenu"
+    [class.active]="customizerService.selectedFilter() === 'tag'"
+  >
+    @if (customizerService.selectedFilter() === 'tag') {
+      <mat-icon>check</mat-icon>
+    }
+    <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_TAG | translate }}</span>
+  </button>
+
+  <button
+    mat-menu-item
+    [matMenuTriggerFor]="filterProjectMenu"
+    [class.active]="customizerService.selectedFilter() === 'project'"
+  >
+    @if (customizerService.selectedFilter() === 'project') {
+      <mat-icon>check</mat-icon>
+    }
+    <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_PROJECT | translate }}</span>
+  </button>
+
+  <button
+    mat-menu-item
+    [matMenuTriggerFor]="filterScheduledDateMenu"
+    [class.active]="customizerService.selectedFilter() === 'scheduledDate'"
+  >
+    @if (customizerService.selectedFilter() === 'scheduledDate') {
+      <mat-icon>check</mat-icon>
+    }
+    <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_SCHEDULED_DATE | translate }}</span>
+  </button>
+
+  <button
+    mat-menu-item
+    [matMenuTriggerFor]="filterEstimatedTimeMenu"
+    [class.active]="customizerService.selectedFilter() === 'estimatedTime'"
+  >
+    @if (customizerService.selectedFilter() === 'estimatedTime') {
+      <mat-icon>check</mat-icon>
+    }
+    <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_ESTIMATED_TIME | translate }}</span>
+  </button>
+
+  <button
+    mat-menu-item
+    [matMenuTriggerFor]="filterTimeSpentMenu"
+    [class.active]="customizerService.selectedFilter() === 'timeSpent'"
+  >
+    @if (customizerService.selectedFilter() === 'timeSpent') {
+      <mat-icon>check</mat-icon>
+    }
+    <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_TIME_SPENT | translate }}</span>
+  </button>
+</mat-menu>
+
+<!-- Filter: Tag submenu -->
+<mat-menu #filterTagMenu="matMenu">
   <div
-    class="menu-content"
+    class="menu-input-wrapper"
     (click)="$event.stopPropagation()"
   >
-    <h3>{{ T.F.TASK_VIEW.CUSTOMIZER.TITLE | translate }}</h3>
-
-    <div class="form-group">
-      <label>{{ T.F.TASK_VIEW.CUSTOMIZER.SORT_BY | translate }}</label>
-      <mat-form-field>
-        <mat-select
-          [ngModel]="customizerService.selectedSort()"
-          (ngModelChange)="customizerService.setSort($event)"
-        >
-          @for (opt of sortOptions; track opt.value) {
-            <mat-option [value]="opt.value">{{ opt.label | translate }}</mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-    </div>
-
-    <div class="form-group">
-      <label>{{ T.F.TASK_VIEW.CUSTOMIZER.GROUP_BY | translate }}</label>
-      <mat-form-field>
-        <mat-select
-          [ngModel]="customizerService.selectedGroup()"
-          (ngModelChange)="customizerService.setGroup($event)"
-        >
-          @for (opt of groupOptions; track opt.value) {
-            <mat-option [value]="opt.value">{{ opt.label | translate }}</mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-    </div>
-
-    <div class="form-group">
-      <label>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_BY | translate }}</label>
-      <mat-form-field>
-        <mat-select
-          [ngModel]="customizerService.selectedFilter()"
-          (ngModelChange)="customizerService.setFilter($event)"
-        >
-          @for (opt of filterOptions; track opt.value) {
-            <mat-option [value]="opt.value">{{ opt.label | translate }}</mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-
-      @if (customizerService.selectedFilter() === 'tag') {
-        <mat-form-field>
-          <input
-            matInput
-            [ngModel]="customizerService.filterInputValue()"
-            (ngModelChange)="customizerService.setFilterInputValue($event)"
-            [placeholder]="T.F.TASK_VIEW.CUSTOMIZER.ENTER_TAG | translate"
-          />
-        </mat-form-field>
-      }
-
-      @if (customizerService.selectedFilter() === 'project') {
-        <mat-form-field>
-          <input
-            matInput
-            [ngModel]="customizerService.filterInputValue()"
-            (ngModelChange)="customizerService.setFilterInputValue($event)"
-            [placeholder]="T.F.TASK_VIEW.CUSTOMIZER.ENTER_PROJECT | translate"
-          />
-        </mat-form-field>
-      }
-
-      @if (customizerService.selectedFilter() === 'scheduledDate') {
-        <mat-form-field>
-          <mat-select
-            [ngModel]="customizerService.filterInputValue()"
-            (ngModelChange)="customizerService.setFilterInputValue($event)"
-          >
-            @for (option of scheduledPresets; track option.value) {
-              <mat-option [value]="option.value">{{
-                option.label | translate
-              }}</mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-      }
-
-      @if (customizerService.selectedFilter() === 'estimatedTime') {
-        <mat-form-field>
-          <mat-select
-            [ngModel]="customizerService.filterInputValue()"
-            (ngModelChange)="customizerService.setFilterInputValue($event)"
-          >
-            @for (option of timePresets; track option.value) {
-              <mat-option [value]="option.value">{{
-                option.label | translate
-              }}</mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-      }
-
-      @if (customizerService.selectedFilter() === 'timeSpent') {
-        <mat-form-field>
-          <mat-select
-            [ngModel]="customizerService.filterInputValue()"
-            (ngModelChange)="customizerService.setFilterInputValue($event)"
-          >
-            @for (option of timePresets; track option.value) {
-              <mat-option [value]="option.value">{{
-                option.label | translate
-              }}</mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-      }
-    </div>
-
-    <button
-      mat-raised-button
-      color="primary"
-      (click)="onResetAll()"
+    <mat-form-field
+      class="menu-input"
+      subscriptSizing="dynamic"
     >
-      {{ T.F.TASK_VIEW.CUSTOMIZER.RESET_ALL | translate }}
-    </button>
+      <input
+        matInput
+        [ngModel]="customizerService.filterInputValue()"
+        (ngModelChange)="onFilterInputChange('tag', $event)"
+        [placeholder]="T.F.TASK_VIEW.CUSTOMIZER.ENTER_TAG | translate"
+        (keydown.enter)="$event.stopPropagation()"
+      />
+    </mat-form-field>
   </div>
 </mat-menu>
+
+<!-- Filter: Project submenu -->
+<mat-menu #filterProjectMenu="matMenu">
+  <div
+    class="menu-input-wrapper"
+    (click)="$event.stopPropagation()"
+  >
+    <mat-form-field
+      class="menu-input"
+      subscriptSizing="dynamic"
+    >
+      <input
+        matInput
+        [ngModel]="customizerService.filterInputValue()"
+        (ngModelChange)="onFilterInputChange('project', $event)"
+        [placeholder]="T.F.TASK_VIEW.CUSTOMIZER.ENTER_PROJECT | translate"
+        (keydown.enter)="$event.stopPropagation()"
+      />
+    </mat-form-field>
+  </div>
+</mat-menu>
+
+<!-- Filter: Scheduled Date submenu -->
+<mat-menu #filterScheduledDateMenu="matMenu">
+  @for (option of scheduledPresets; track option.value) {
+    <button
+      mat-menu-item
+      (click)="onFilterWithValue('scheduledDate', option.value)"
+      [class.active]="
+        customizerService.selectedFilter() === 'scheduledDate' &&
+        customizerService.filterInputValue() === option.value
+      "
+    >
+      @if (
+        customizerService.selectedFilter() === 'scheduledDate' &&
+        customizerService.filterInputValue() === option.value
+      ) {
+        <mat-icon>check</mat-icon>
+      }
+      <span>{{ option.label | translate }}</span>
+    </button>
+  }
+</mat-menu>
+
+<!-- Filter: Estimated Time submenu -->
+<mat-menu #filterEstimatedTimeMenu="matMenu">
+  @for (option of timePresets; track option.value) {
+    <button
+      mat-menu-item
+      (click)="onFilterWithValue('estimatedTime', option.value)"
+      [class.active]="
+        customizerService.selectedFilter() === 'estimatedTime' &&
+        customizerService.filterInputValue() === option.value
+      "
+    >
+      @if (
+        customizerService.selectedFilter() === 'estimatedTime' &&
+        customizerService.filterInputValue() === option.value
+      ) {
+        <mat-icon>check</mat-icon>
+      }
+      <span>{{ option.label | translate }}</span>
+    </button>
+  }
+</mat-menu>
+
+<!-- Filter: Time Spent submenu -->
+<mat-menu #filterTimeSpentMenu="matMenu">
+  @for (option of timePresets; track option.value) {
+    <button
+      mat-menu-item
+      (click)="onFilterWithValue('timeSpent', option.value)"
+      [class.active]="
+        customizerService.selectedFilter() === 'timeSpent' &&
+        customizerService.filterInputValue() === option.value
+      "
+    >
+      @if (
+        customizerService.selectedFilter() === 'timeSpent' &&
+        customizerService.filterInputValue() === option.value
+      ) {
+        <mat-icon>check</mat-icon>
+      }
+      <span>{{ option.label | translate }}</span>
+    </button>
+  }
+</mat-menu>
diff --git a/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.scss b/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.scss
index 29fbba6d7c..1ef2ef4765 100644
--- a/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.scss
+++ b/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.scss
@@ -1,37 +1,30 @@
 ::ng-deep .customizer-menu {
-  .menu-content {
-    padding: 16px;
-    max-width: 400px;
-    min-width: 300px;
+  .mat-mdc-menu-item {
+    position: relative;
 
-    h3 {
-      text-align: center;
-      margin-top: 0;
-      margin-bottom: 20px;
+    &.active {
+      background-color: rgba(0, 0, 0, 0.04);
     }
 
-    .form-group {
-      margin-bottom: 15px;
-      display: flex;
-      flex-direction: column;
-
-      label {
-        margin-bottom: 5px;
-        font-weight: 500;
-      }
-
-      mat-form-field {
-        width: 100%;
-      }
-
-      mat-slide-toggle {
-        align-self: flex-start;
-      }
+    .current-value {
+      margin-left: auto;
+      padding-left: 16px;
+      font-size: 0.875em;
+      opacity: 0.7;
+      font-style: italic;
     }
 
-    button {
+    mat-icon:first-child {
+      margin-right: 8px;
+    }
+  }
+
+  .menu-input-wrapper {
+    padding: 8px 16px;
+    min-width: 250px;
+
+    .menu-input {
       width: 100%;
-      margin-top: 8px;
     }
   }
 }
diff --git a/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.ts b/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.ts
index 4af9a96594..13d42590fc 100644
--- a/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.ts
+++ b/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.ts
@@ -8,6 +8,8 @@ import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatMenuModule, MatMenu } from '@angular/material/menu';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDividerModule } from '@angular/material/divider';
 import { TaskViewCustomizerService } from '../task-view-customizer.service';
 import { TranslatePipe } from '@ngx-translate/core';
 import { T } from 'src/app/t.const';
@@ -28,6 +30,8 @@ import { T } from 'src/app/t.const';
     MatButtonModule,
     MatSlideToggleModule,
     MatMenuModule,
+    MatIconModule,
+    MatDividerModule,
     TranslatePipe,
   ],
 })
@@ -95,6 +99,37 @@ export class TaskViewCustomizerPanelComponent implements OnInit {
     this.filterInputValue = this.customizerService.filterInputValue();
   }
 
+  getSortLabel(value: string): string {
+    const option = this.sortOptions.find((opt) => opt.value === value);
+    return option ? option.label : '';
+  }
+
+  getGroupLabel(value: string): string {
+    const option = this.groupOptions.find((opt) => opt.value === value);
+    return option ? option.label : '';
+  }
+
+  getFilterLabel(value: string): string {
+    const option = this.filterOptions.find((opt) => opt.value === value);
+    return option ? option.label : '';
+  }
+
+  onFilterSelect(filterType: string): void {
+    this.customizerService.setFilter(filterType);
+  }
+
+  onFilterInputChange(filterType: string, value: string): void {
+    if (this.customizerService.selectedFilter() !== filterType) {
+      this.customizerService.setFilter(filterType);
+    }
+    this.customizerService.setFilterInputValue(value);
+  }
+
+  onFilterWithValue(filterType: string, value: string): void {
+    this.customizerService.setFilter(filterType);
+    this.customizerService.setFilterInputValue(value);
+  }
+
   onResetAll(): void {
     this.customizerService.resetAll();
   }

From 4f4021ee3eef1a56034a1579ad4ac4e8101746c1 Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Fri, 17 Oct 2025 18:43:31 +0200
Subject: [PATCH 3/7] feat(customizerMenu): try to move checkmark to the right

---
 .../task-view-customizer-panel.component.html | 128 ++++++++++--------
 .../task-view-customizer-panel.component.scss |  56 +++++---
 2 files changed, 114 insertions(+), 70 deletions(-)

diff --git a/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.html b/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.html
index d8aed7d856..47a00f174a 100644
--- a/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.html
+++ b/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.html
@@ -64,10 +64,12 @@
       (click)="customizerService.setSort(opt.value)"
       [class.active]="customizerService.selectedSort() === opt.value"
     >
-      @if (customizerService.selectedSort() === opt.value) {
-        <mat-icon>check</mat-icon>
-      }
-      <span>{{ opt.label | translate }}</span>
+      <span class="menu-item-content">
+        <span>{{ opt.label | translate }}</span>
+        @if (customizerService.selectedSort() === opt.value) {
+          <mat-icon class="check-icon">check</mat-icon>
+        }
+      </span>
     </button>
   }
 </mat-menu>
@@ -80,10 +82,12 @@
       (click)="customizerService.setGroup(opt.value)"
       [class.active]="customizerService.selectedGroup() === opt.value"
     >
-      @if (customizerService.selectedGroup() === opt.value) {
-        <mat-icon>check</mat-icon>
-      }
-      <span>{{ opt.label | translate }}</span>
+      <span class="menu-item-content">
+        <span>{{ opt.label | translate }}</span>
+        @if (customizerService.selectedGroup() === opt.value) {
+          <mat-icon class="check-icon">check</mat-icon>
+        }
+      </span>
     </button>
   }
 </mat-menu>
@@ -95,10 +99,12 @@
     (click)="onFilterSelect('default')"
     [class.active]="customizerService.selectedFilter() === 'default'"
   >
-    @if (customizerService.selectedFilter() === 'default') {
-      <mat-icon>check</mat-icon>
-    }
-    <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_DEFAULT | translate }}</span>
+    <span class="menu-item-content">
+      <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_DEFAULT | translate }}</span>
+      @if (customizerService.selectedFilter() === 'default') {
+        <mat-icon class="check-icon">check</mat-icon>
+      }
+    </span>
   </button>
 
   <button
@@ -106,10 +112,12 @@
     [matMenuTriggerFor]="filterTagMenu"
     [class.active]="customizerService.selectedFilter() === 'tag'"
   >
-    @if (customizerService.selectedFilter() === 'tag') {
-      <mat-icon>check</mat-icon>
-    }
-    <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_TAG | translate }}</span>
+    <span class="menu-item-content">
+      <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_TAG | translate }}</span>
+      @if (customizerService.selectedFilter() === 'tag') {
+        <mat-icon class="check-icon">check</mat-icon>
+      }
+    </span>
   </button>
 
   <button
@@ -117,10 +125,12 @@
     [matMenuTriggerFor]="filterProjectMenu"
     [class.active]="customizerService.selectedFilter() === 'project'"
   >
-    @if (customizerService.selectedFilter() === 'project') {
-      <mat-icon>check</mat-icon>
-    }
-    <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_PROJECT | translate }}</span>
+    <span class="menu-item-content">
+      <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_PROJECT | translate }}</span>
+      @if (customizerService.selectedFilter() === 'project') {
+        <mat-icon class="check-icon">check</mat-icon>
+      }
+    </span>
   </button>
 
   <button
@@ -128,10 +138,12 @@
     [matMenuTriggerFor]="filterScheduledDateMenu"
     [class.active]="customizerService.selectedFilter() === 'scheduledDate'"
   >
-    @if (customizerService.selectedFilter() === 'scheduledDate') {
-      <mat-icon>check</mat-icon>
-    }
-    <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_SCHEDULED_DATE | translate }}</span>
+    <span class="menu-item-content">
+      <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_SCHEDULED_DATE | translate }}</span>
+      @if (customizerService.selectedFilter() === 'scheduledDate') {
+        <mat-icon class="check-icon">check</mat-icon>
+      }
+    </span>
   </button>
 
   <button
@@ -139,10 +151,12 @@
     [matMenuTriggerFor]="filterEstimatedTimeMenu"
     [class.active]="customizerService.selectedFilter() === 'estimatedTime'"
   >
-    @if (customizerService.selectedFilter() === 'estimatedTime') {
-      <mat-icon>check</mat-icon>
-    }
-    <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_ESTIMATED_TIME | translate }}</span>
+    <span class="menu-item-content">
+      <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_ESTIMATED_TIME | translate }}</span>
+      @if (customizerService.selectedFilter() === 'estimatedTime') {
+        <mat-icon class="check-icon">check</mat-icon>
+      }
+    </span>
   </button>
 
   <button
@@ -150,10 +164,12 @@
     [matMenuTriggerFor]="filterTimeSpentMenu"
     [class.active]="customizerService.selectedFilter() === 'timeSpent'"
   >
-    @if (customizerService.selectedFilter() === 'timeSpent') {
-      <mat-icon>check</mat-icon>
-    }
-    <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_TIME_SPENT | translate }}</span>
+    <span class="menu-item-content">
+      <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_TIME_SPENT | translate }}</span>
+      @if (customizerService.selectedFilter() === 'timeSpent') {
+        <mat-icon class="check-icon">check</mat-icon>
+      }
+    </span>
   </button>
 </mat-menu>
 
@@ -210,13 +226,15 @@
         customizerService.filterInputValue() === option.value
       "
     >
-      @if (
-        customizerService.selectedFilter() === 'scheduledDate' &&
-        customizerService.filterInputValue() === option.value
-      ) {
-        <mat-icon>check</mat-icon>
-      }
-      <span>{{ option.label | translate }}</span>
+      <span class="menu-item-content">
+        <span>{{ option.label | translate }}</span>
+        @if (
+          customizerService.selectedFilter() === 'scheduledDate' &&
+          customizerService.filterInputValue() === option.value
+        ) {
+          <mat-icon class="check-icon">check</mat-icon>
+        }
+      </span>
     </button>
   }
 </mat-menu>
@@ -232,13 +250,15 @@
         customizerService.filterInputValue() === option.value
       "
     >
-      @if (
-        customizerService.selectedFilter() === 'estimatedTime' &&
-        customizerService.filterInputValue() === option.value
-      ) {
-        <mat-icon>check</mat-icon>
-      }
-      <span>{{ option.label | translate }}</span>
+      <span class="menu-item-content">
+        <span>{{ option.label | translate }}</span>
+        @if (
+          customizerService.selectedFilter() === 'estimatedTime' &&
+          customizerService.filterInputValue() === option.value
+        ) {
+          <mat-icon class="check-icon">check</mat-icon>
+        }
+      </span>
     </button>
   }
 </mat-menu>
@@ -254,13 +274,15 @@
         customizerService.filterInputValue() === option.value
       "
     >
-      @if (
-        customizerService.selectedFilter() === 'timeSpent' &&
-        customizerService.filterInputValue() === option.value
-      ) {
-        <mat-icon>check</mat-icon>
-      }
-      <span>{{ option.label | translate }}</span>
+      <span class="menu-item-content">
+        <span>{{ option.label | translate }}</span>
+        @if (
+          customizerService.selectedFilter() === 'timeSpent' &&
+          customizerService.filterInputValue() === option.value
+        ) {
+          <mat-icon class="check-icon">check</mat-icon>
+        }
+      </span>
     </button>
   }
 </mat-menu>
diff --git a/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.scss b/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.scss
index 1ef2ef4765..4bbc21c23b 100644
--- a/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.scss
+++ b/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.scss
@@ -1,30 +1,52 @@
 ::ng-deep .customizer-menu {
   .mat-mdc-menu-item {
     position: relative;
+    display: flex !important;
+    align-items: center;
 
     &.active {
       background-color: rgba(0, 0, 0, 0.04);
     }
-
-    .current-value {
-      margin-left: auto;
-      padding-left: 16px;
-      font-size: 0.875em;
-      opacity: 0.7;
-      font-style: italic;
-    }
-
-    mat-icon:first-child {
-      margin-right: 8px;
-    }
   }
 
-  .menu-input-wrapper {
-    padding: 8px 16px;
-    min-width: 250px;
+  .current-value {
+    padding-left: 16px;
+    font-size: 0.875em;
+    opacity: 0.7;
+    font-style: italic;
+  }
 
-    .menu-input {
-      width: 100%;
+  mat-icon:first-child:not(.check-icon) {
+    margin-right: 8px;
+  }
+
+  .menu-item-content {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    flex: 1;
+    flex-grow: 1;
+    margin-right: 0 !important;
+    border: 1px solid red !important;
+
+    > span:first-child {
+      flex: 1;
+    }
+
+    .check-icon {
+      border: 1px solid deeppink !important;
+      margin-left: auto !important;
+      flex-shrink: 0;
+      margin-right: 0 !important;
     }
   }
 }
+
+.menu-input-wrapper {
+  padding: 8px 16px;
+  min-width: 250px;
+
+  .menu-input {
+    width: 100%;
+  }
+}

From 5889c8601b85647d47d38612f19542ec206e9baf Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Fri, 17 Oct 2025 18:56:36 +0200
Subject: [PATCH 4/7] feat(customizerMenu): move filter button left of play
 button

---
 .../desktop-panel-buttons.component.ts        | 32 +------------------
 .../main-header/main-header.component.html    | 21 ++++++++++--
 .../main-header/main-header.component.scss    | 26 +++++++++++++++
 .../main-header/main-header.component.ts      |  9 ++++--
 4 files changed, 52 insertions(+), 36 deletions(-)

diff --git a/src/app/core-ui/main-header/desktop-panel-buttons/desktop-panel-buttons.component.ts b/src/app/core-ui/main-header/desktop-panel-buttons/desktop-panel-buttons.component.ts
index 2407b52948..d0a0fd048b 100644
--- a/src/app/core-ui/main-header/desktop-panel-buttons/desktop-panel-buttons.component.ts
+++ b/src/app/core-ui/main-header/desktop-panel-buttons/desktop-panel-buttons.component.ts
@@ -4,41 +4,14 @@ import { MatIcon } from '@angular/material/icon';
 import { MatTooltip } from '@angular/material/tooltip';
 import { TranslatePipe } from '@ngx-translate/core';
 import { LayoutService } from '../../layout/layout.service';
-import { TaskViewCustomizerService } from '../../../features/task-view-customizer/task-view-customizer.service';
-import { TaskViewCustomizerPanelComponent } from '../../../features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component';
 import { T } from '../../../t.const';
 import { KeyboardConfig } from '../../../features/config/keyboard-config.model';
-import { MatMenuTrigger } from '@angular/material/menu';
 
 @Component({
   selector: 'desktop-panel-buttons',
   standalone: true,
-  imports: [
-    MatIconButton,
-    MatIcon,
-    MatTooltip,
-    TranslatePipe,
-    TaskViewCustomizerPanelComponent,
-    MatMenuTrigger,
-  ],
+  imports: [MatIconButton, MatIcon, MatTooltip, TranslatePipe],
   template: `
-    <button
-      class="panel-btn"
-      [disabled]="!isWorkViewPage()"
-      [class.isCustomized]="taskViewCustomizerService.isCustomized()"
-      [matMenuTriggerFor]="customizerPanel.menu"
-      mat-icon-button
-      matTooltip="{{ T.GCF.KEYBOARD.TOGGLE_TASK_VIEW_CUSTOMIZER_PANEL | translate }} {{
-        kb()?.toggleTaskViewCustomizerPanel
-          ? '[' + kb()?.toggleTaskViewCustomizerPanel + ']'
-          : ''
-      }}"
-    >
-      <mat-icon>filter_list</mat-icon>
-    </button>
-
-    <task-view-customizer-panel #customizerPanel></task-view-customizer-panel>
-
     <button
       class="panel-btn e2e-toggle-issue-provider-panel"
       [disabled]="!isRouteWithSidePanel()"
@@ -123,12 +96,9 @@ import { MatMenuTrigger } from '@angular/material/menu';
 export class DesktopPanelButtonsComponent {
   readonly T = T;
   readonly layoutService = inject(LayoutService);
-  readonly taskViewCustomizerService = inject(TaskViewCustomizerService);
 
   readonly kb = input<KeyboardConfig | null>();
   readonly isRouteWithSidePanel = input.required<boolean>();
-  readonly isWorkViewPage = input.required<boolean>();
-  readonly isShowTaskViewCustomizerPanel = input.required<boolean>();
   readonly isShowIssuePanel = input.required<boolean>();
   readonly isShowNotes = input.required<boolean>();
 }
diff --git a/src/app/core-ui/main-header/main-header.component.html b/src/app/core-ui/main-header/main-header.component.html
index 23fe17393a..ddcc877645 100644
--- a/src/app/core-ui/main-header/main-header.component.html
+++ b/src/app/core-ui/main-header/main-header.component.html
@@ -85,6 +85,25 @@
 
     <plugin-header-btns></plugin-header-btns>
 
+    @if (showDesktopButtons()) {
+      <button
+        class="panel-btn task-filter-btn"
+        [disabled]="!isWorkViewPage()"
+        [class.isCustomized]="taskViewCustomizerService.isCustomized()"
+        [matMenuTriggerFor]="customizerPanel.menu"
+        mat-icon-button
+        matTooltip="{{ T.GCF.KEYBOARD.TOGGLE_TASK_VIEW_CUSTOMIZER_PANEL | translate }} {{
+          kb.toggleTaskViewCustomizerPanel
+            ? '[' + kb.toggleTaskViewCustomizerPanel + ']'
+            : ''
+        }}"
+      >
+        <mat-icon>filter_list</mat-icon>
+      </button>
+
+      <task-view-customizer-panel #customizerPanel></task-view-customizer-panel>
+    }
+
     <play-button
       [currentTask]="currentTask()"
       [currentTaskId]="currentTaskId()"
@@ -112,8 +131,6 @@
       <desktop-panel-buttons
         [kb]="kb"
         [isRouteWithSidePanel]="isRouteWithSidePanel()"
-        [isWorkViewPage]="isWorkViewPage()"
-        [isShowTaskViewCustomizerPanel]="isShowTaskViewCustomizerPanel()"
         [isShowIssuePanel]="isShowIssuePanel()"
         [isShowNotes]="isShowNotes()"
       ></desktop-panel-buttons>
diff --git a/src/app/core-ui/main-header/main-header.component.scss b/src/app/core-ui/main-header/main-header.component.scss
index 226c7c9775..1042e818e9 100644
--- a/src/app/core-ui/main-header/main-header.component.scss
+++ b/src/app/core-ui/main-header/main-header.component.scss
@@ -98,6 +98,32 @@ button.isActive2 {
       margin-left: var(--s);
     }
   }
+
+  .task-filter-btn {
+    position: relative;
+    transition: all 0.2s ease;
+    overflow: visible !important;
+
+    .mat-icon {
+      transition: transform 0.2s ease;
+      display: block;
+    }
+
+    &.isCustomized {
+      box-shadow: 0px -2px 3px 0px var(--separator-alpha);
+      background: var(--c-accent);
+    }
+
+    &:hover:not(.isCustomized):not(:disabled) {
+      background-color: var(--hover-color, rgba(0, 0, 0, 0.04));
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      background: transparent !important;
+    }
+  }
 }
 
 @keyframes pulse {
diff --git a/src/app/core-ui/main-header/main-header.component.ts b/src/app/core-ui/main-header/main-header.component.ts
index 0bbaa21a2d..a106a3cfe8 100644
--- a/src/app/core-ui/main-header/main-header.component.ts
+++ b/src/app/core-ui/main-header/main-header.component.ts
@@ -44,6 +44,9 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { MetricService } from '../../features/metric/metric.service';
 import { DateService } from '../../core/date/date.service';
 import { MsToMinuteClockStringPipe } from '../../ui/duration/ms-to-minute-clock-string.pipe';
+import { TaskViewCustomizerService } from '../../features/task-view-customizer/task-view-customizer.service';
+import { TaskViewCustomizerPanelComponent } from '../../features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component';
+import { MatMenuTrigger } from '@angular/material/menu';
 
 @Component({
   selector: 'main-header',
@@ -64,6 +67,8 @@ import { MsToMinuteClockStringPipe } from '../../ui/duration/ms-to-minute-clock-
     PageTitleComponent,
     PlayButtonComponent,
     DesktopPanelButtonsComponent,
+    TaskViewCustomizerPanelComponent,
+    MatMenuTrigger,
     MsToMinuteClockStringPipe,
   ],
 })
@@ -83,6 +88,7 @@ export class MainHeaderComponent implements OnDestroy {
   private readonly _configService = inject(GlobalConfigService);
   private readonly _metricService = inject(MetricService);
   private readonly _dateService = inject(DateService);
+  readonly taskViewCustomizerService = inject(TaskViewCustomizerService);
 
   T: typeof T = T;
   isShowSimpleCounterBtnsMobile = signal(false);
@@ -145,9 +151,6 @@ export class MainHeaderComponent implements OnDestroy {
   enabledSimpleCounters = toSignal(this.simpleCounterService.enabledSimpleCounters$, {
     initialValue: [],
   });
-  isShowTaskViewCustomizerPanel = computed(() =>
-    this.layoutService.isShowTaskViewCustomizerPanel(),
-  );
   isShowIssuePanel = computed(() => this.layoutService.isShowIssuePanel());
   isShowNotes = computed(() => this.layoutService.isShowNotes());
   syncIsEnabledAndReady = toSignal(this.syncWrapperService.isEnabledAndReady$);

From 1c4b12531daad43fdef578f7671b2b6eada4f3ae Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Fri, 17 Oct 2025 19:03:37 +0200
Subject: [PATCH 5/7] feat(customizerMenu): move filter button to right of
 project title

---
 .../main-header/main-header.component.html    | 19 ----
 .../main-header/main-header.component.scss    | 26 ------
 .../main-header/main-header.component.ts      |  6 --
 .../page-title/page-title.component.ts        | 92 ++++++++++++++++---
 4 files changed, 81 insertions(+), 62 deletions(-)

diff --git a/src/app/core-ui/main-header/main-header.component.html b/src/app/core-ui/main-header/main-header.component.html
index ddcc877645..7095b1ecdb 100644
--- a/src/app/core-ui/main-header/main-header.component.html
+++ b/src/app/core-ui/main-header/main-header.component.html
@@ -85,25 +85,6 @@
 
     <plugin-header-btns></plugin-header-btns>
 
-    @if (showDesktopButtons()) {
-      <button
-        class="panel-btn task-filter-btn"
-        [disabled]="!isWorkViewPage()"
-        [class.isCustomized]="taskViewCustomizerService.isCustomized()"
-        [matMenuTriggerFor]="customizerPanel.menu"
-        mat-icon-button
-        matTooltip="{{ T.GCF.KEYBOARD.TOGGLE_TASK_VIEW_CUSTOMIZER_PANEL | translate }} {{
-          kb.toggleTaskViewCustomizerPanel
-            ? '[' + kb.toggleTaskViewCustomizerPanel + ']'
-            : ''
-        }}"
-      >
-        <mat-icon>filter_list</mat-icon>
-      </button>
-
-      <task-view-customizer-panel #customizerPanel></task-view-customizer-panel>
-    }
-
     <play-button
       [currentTask]="currentTask()"
       [currentTaskId]="currentTaskId()"
diff --git a/src/app/core-ui/main-header/main-header.component.scss b/src/app/core-ui/main-header/main-header.component.scss
index 1042e818e9..226c7c9775 100644
--- a/src/app/core-ui/main-header/main-header.component.scss
+++ b/src/app/core-ui/main-header/main-header.component.scss
@@ -98,32 +98,6 @@ button.isActive2 {
       margin-left: var(--s);
     }
   }
-
-  .task-filter-btn {
-    position: relative;
-    transition: all 0.2s ease;
-    overflow: visible !important;
-
-    .mat-icon {
-      transition: transform 0.2s ease;
-      display: block;
-    }
-
-    &.isCustomized {
-      box-shadow: 0px -2px 3px 0px var(--separator-alpha);
-      background: var(--c-accent);
-    }
-
-    &:hover:not(.isCustomized):not(:disabled) {
-      background-color: var(--hover-color, rgba(0, 0, 0, 0.04));
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      background: transparent !important;
-    }
-  }
 }
 
 @keyframes pulse {
diff --git a/src/app/core-ui/main-header/main-header.component.ts b/src/app/core-ui/main-header/main-header.component.ts
index a106a3cfe8..49ce6acf2d 100644
--- a/src/app/core-ui/main-header/main-header.component.ts
+++ b/src/app/core-ui/main-header/main-header.component.ts
@@ -44,9 +44,6 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { MetricService } from '../../features/metric/metric.service';
 import { DateService } from '../../core/date/date.service';
 import { MsToMinuteClockStringPipe } from '../../ui/duration/ms-to-minute-clock-string.pipe';
-import { TaskViewCustomizerService } from '../../features/task-view-customizer/task-view-customizer.service';
-import { TaskViewCustomizerPanelComponent } from '../../features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component';
-import { MatMenuTrigger } from '@angular/material/menu';
 
 @Component({
   selector: 'main-header',
@@ -67,8 +64,6 @@ import { MatMenuTrigger } from '@angular/material/menu';
     PageTitleComponent,
     PlayButtonComponent,
     DesktopPanelButtonsComponent,
-    TaskViewCustomizerPanelComponent,
-    MatMenuTrigger,
     MsToMinuteClockStringPipe,
   ],
 })
@@ -88,7 +83,6 @@ export class MainHeaderComponent implements OnDestroy {
   private readonly _configService = inject(GlobalConfigService);
   private readonly _metricService = inject(MetricService);
   private readonly _dateService = inject(DateService);
-  readonly taskViewCustomizerService = inject(TaskViewCustomizerService);
 
   T: typeof T = T;
   isShowSimpleCounterBtnsMobile = signal(false);
diff --git a/src/app/core-ui/main-header/page-title/page-title.component.ts b/src/app/core-ui/main-header/page-title/page-title.component.ts
index 82ac675180..9dcd6ee294 100644
--- a/src/app/core-ui/main-header/page-title/page-title.component.ts
+++ b/src/app/core-ui/main-header/page-title/page-title.component.ts
@@ -12,6 +12,10 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { filter, map, startWith } from 'rxjs/operators';
 import { WorkContextService } from '../../../features/work-context/work-context.service';
+import { TaskViewCustomizerService } from '../../../features/task-view-customizer/task-view-customizer.service';
+import { TaskViewCustomizerPanelComponent } from '../../../features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component';
+import { GlobalConfigService } from '../../../features/config/global-config.service';
+import { KeyboardConfig } from '../../../features/config/keyboard-config.model';
 
 @Component({
   selector: 'page-title',
@@ -26,6 +30,7 @@ import { WorkContextService } from '../../../features/work-context/work-context.
     MatMenuContent,
     MatMenuTrigger,
     WorkContextMenuComponent,
+    TaskViewCustomizerPanelComponent,
     TranslatePipe,
   ],
   template: `
@@ -39,14 +44,33 @@ import { WorkContextService } from '../../../features/work-context/work-context.
         {{ displayTitle() }}
       </div>
       @if (!isXxxs()) {
-        <button
-          [mat-menu-trigger-for]="activeWorkContextMenu"
-          [matTooltip]="T.MH.PROJECT_MENU | translate"
-          class="project-settings-btn"
-          mat-icon-button
-        >
-          <mat-icon>more_vert</mat-icon>
-        </button>
+        <div class="page-title-actions">
+          <button
+            [mat-menu-trigger-for]="activeWorkContextMenu"
+            [matTooltip]="T.MH.PROJECT_MENU | translate"
+            class="project-settings-btn"
+            mat-icon-button
+          >
+            <mat-icon>more_vert</mat-icon>
+          </button>
+          <button
+            class="task-filter-btn"
+            [disabled]="!isWorkViewPage()"
+            [class.isCustomized]="taskViewCustomizerService.isCustomized()"
+            [matMenuTriggerFor]="customizerPanel.menu"
+            mat-icon-button
+            matTooltip="{{
+              T.GCF.KEYBOARD.TOGGLE_TASK_VIEW_CUSTOMIZER_PANEL | translate
+            }} {{
+              kb.toggleTaskViewCustomizerPanel
+                ? '[' + kb.toggleTaskViewCustomizerPanel + ']'
+                : ''
+            }}"
+          >
+            <mat-icon>filter_list</mat-icon>
+          </button>
+          <task-view-customizer-panel #customizerPanel></task-view-customizer-panel>
+        </div>
       }
       <mat-menu #activeWorkContextMenu="matMenu">
         <ng-template matMenuContent>
@@ -84,23 +108,56 @@ import { WorkContextService } from '../../../features/work-context/work-context.
         }
       }
 
+      .page-title-actions {
+        display: flex;
+        align-items: center;
+        gap: var(--s-quarter);
+        margin-left: calc(-1 * var(--s));
+        margin-right: var(--s2);
+      }
+
       .project-settings-btn {
         display: none;
         @media (min-width: 600px) {
           display: block;
           transition: var(--transition-standard);
           opacity: 0;
-          margin-right: var(--s2);
-          margin-left: calc(-1 * var(--s));
           position: relative;
           z-index: 1;
         }
 
         &:hover,
-        .page-title:hover + & {
+        .page-title:hover + .page-title-actions &,
+        .page-title-actions:hover & {
           opacity: 1;
         }
       }
+
+      .task-filter-btn {
+        position: relative;
+        transition: all 0.2s ease;
+        overflow: visible !important;
+
+        .mat-icon {
+          transition: transform 0.2s ease;
+          display: block;
+        }
+
+        &.isCustomized {
+          box-shadow: 0px -2px 3px 0px var(--separator-alpha);
+          background: var(--c-accent);
+        }
+
+        &:hover:not(.isCustomized):not(:disabled) {
+          background-color: var(--hover-color, rgba(0, 0, 0, 0.04));
+        }
+
+        &:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+          background: transparent !important;
+        }
+      }
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -109,6 +166,8 @@ export class PageTitleComponent {
   private _breakpointObserver = inject(BreakpointObserver);
   private _router = inject(Router);
   private _workContextService = inject(WorkContextService);
+  readonly taskViewCustomizerService = inject(TaskViewCustomizerService);
+  private readonly _configService = inject(GlobalConfigService);
 
   readonly T = T;
 
@@ -140,6 +199,13 @@ export class PageTitleComponent {
   );
   isBoardsSection = toSignal(this._isBoardsSection$, { initialValue: false });
 
+  private _isWorkViewPage$ = this._router.events.pipe(
+    filter((event): event is NavigationEnd => event instanceof NavigationEnd),
+    map((event) => !!event.urlAfterRedirects.match(/tasks$/)),
+    startWith(!!this._router.url.match(/tasks$/)),
+  );
+  isWorkViewPage = toSignal(this._isWorkViewPage$, { initialValue: false });
+
   // Override title for special routes
   displayTitle = computed(() => {
     if (this.isScheduleSection()) {
@@ -158,4 +224,8 @@ export class PageTitleComponent {
   isXxxs = toSignal(this._isXxxs$.pipe(map((result) => result.matches)), {
     initialValue: false,
   });
+
+  get kb(): KeyboardConfig {
+    return (this._configService.cfg()?.keyboard as KeyboardConfig) || {};
+  }
 }

From aaf731652fbbb8e2d016dcae4e1dddef45dfe533 Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Fri, 17 Oct 2025 19:07:58 +0200
Subject: [PATCH 6/7] feat(customizerMenu): change color of active filter
 button

---
 .../core-ui/main-header/page-title/page-title.component.ts    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/core-ui/main-header/page-title/page-title.component.ts b/src/app/core-ui/main-header/page-title/page-title.component.ts
index 9dcd6ee294..c132d17f1d 100644
--- a/src/app/core-ui/main-header/page-title/page-title.component.ts
+++ b/src/app/core-ui/main-header/page-title/page-title.component.ts
@@ -144,8 +144,8 @@ import { KeyboardConfig } from '../../../features/config/keyboard-config.model';
         }
 
         &.isCustomized {
-          box-shadow: 0px -2px 3px 0px var(--separator-alpha);
-          background: var(--c-accent);
+          color: var(--c-accent);
+          box-shadow: none;
         }
 
         &:hover:not(.isCustomized):not(:disabled) {

From 832f7a95a0be25b7f349ee0a0cbd69bb7add8dd7 Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Tue, 21 Oct 2025 16:37:29 +0200
Subject: [PATCH 7/7] feat(customizerMenu): polish new filter menu button and
 menu

---
 .../page-title/page-title.component.ts        | 28 ++++++------
 .../task-view-customizer-panel.component.scss | 45 +------------------
 src/assets/i18n/en.json                       |  4 +-
 src/styles/components/_components.scss        |  1 +
 src/styles/components/_customizer-menu.scss   | 41 +++++++++++++++++
 5 files changed, 61 insertions(+), 58 deletions(-)
 create mode 100644 src/styles/components/_customizer-menu.scss

diff --git a/src/app/core-ui/main-header/page-title/page-title.component.ts b/src/app/core-ui/main-header/page-title/page-title.component.ts
index c132d17f1d..e1822bb0d9 100644
--- a/src/app/core-ui/main-header/page-title/page-title.component.ts
+++ b/src/app/core-ui/main-header/page-title/page-title.component.ts
@@ -117,20 +117,22 @@ import { KeyboardConfig } from '../../../features/config/keyboard-config.model';
       }
 
       .project-settings-btn {
-        display: none;
-        @media (min-width: 600px) {
-          display: block;
-          transition: var(--transition-standard);
-          opacity: 0;
-          position: relative;
-          z-index: 1;
-        }
+        opacity: 1;
 
-        &:hover,
-        .page-title:hover + .page-title-actions &,
-        .page-title-actions:hover & {
-          opacity: 1;
-        }
+        /*display: none;*/
+        /*@media (min-width: 600px) {*/
+        /*  display: block;*/
+        /*  transition: var(--transition-standard);*/
+        /*  opacity: 0;*/
+        /*  position: relative;*/
+        /*  z-index: 1;*/
+        /*}*/
+
+        /*&:hover,*/
+        /*.page-title:hover + .page-title-actions &,*/
+        /*.page-title-actions:hover & {*/
+        /*  opacity: 1;*/
+        /*}*/
       }
 
       .task-filter-btn {
diff --git a/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.scss b/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.scss
index 4bbc21c23b..092c645048 100644
--- a/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.scss
+++ b/src/app/features/task-view-customizer/task-view-customizer-panel/task-view-customizer-panel.component.scss
@@ -1,46 +1,5 @@
-::ng-deep .customizer-menu {
-  .mat-mdc-menu-item {
-    position: relative;
-    display: flex !important;
-    align-items: center;
-
-    &.active {
-      background-color: rgba(0, 0, 0, 0.04);
-    }
-  }
-
-  .current-value {
-    padding-left: 16px;
-    font-size: 0.875em;
-    opacity: 0.7;
-    font-style: italic;
-  }
-
-  mat-icon:first-child:not(.check-icon) {
-    margin-right: 8px;
-  }
-
-  .menu-item-content {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    flex: 1;
-    flex-grow: 1;
-    margin-right: 0 !important;
-    border: 1px solid red !important;
-
-    > span:first-child {
-      flex: 1;
-    }
-
-    .check-icon {
-      border: 1px solid deeppink !important;
-      margin-left: auto !important;
-      flex-shrink: 0;
-      margin-right: 0 !important;
-    }
-  }
-}
+// Menu styles are in global styles: src/styles/components/_customizer-menu.scss
+// This is necessary because mat-menu renders in a global overlay container
 
 .menu-input-wrapper {
   padding: 8px 16px;
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 39989effac..a391ace338 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -1459,8 +1459,8 @@
     },
     "TASK_VIEW": {
       "CUSTOMIZER": {
-        "ENTER_PROJECT": "Enter project",
-        "ENTER_TAG": "Enter tag",
+        "ENTER_PROJECT": "Filter Projects",
+        "ENTER_TAG": "Filter Tag",
         "ESTIMATED_TIME": "Estimated Time",
         "FILTER_BY": "Filter By",
         "FILTER_DEFAULT": "No Filter",
diff --git a/src/styles/components/_components.scss b/src/styles/components/_components.scss
index d4d19e7ea5..e766e64843 100644
--- a/src/styles/components/_components.scss
+++ b/src/styles/components/_components.scss
@@ -16,5 +16,6 @@
 @use './planner-shared';
 @use './mentions';
 @use './bottom-panel';
+@use './customizer-menu';
 
 //@import '../../app/ui/custom-datetime-picker/sass/picker';
diff --git a/src/styles/components/_customizer-menu.scss b/src/styles/components/_customizer-menu.scss
new file mode 100644
index 0000000000..1c5e9a753f
--- /dev/null
+++ b/src/styles/components/_customizer-menu.scss
@@ -0,0 +1,41 @@
+// TASK VIEW CUSTOMIZER MENU
+// Styles for the task view customizer menu component
+// Menu renders in global overlay, so styles must be global
+
+.menu-item-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 16px;
+
+  > span:first-child {
+    flex: 1;
+  }
+
+  .check-icon {
+    flex-shrink: 0;
+    margin-left: auto;
+    margin-right: 0 !important;
+  }
+}
+
+.customizer-menu {
+  .mat-mdc-menu-item {
+    &.active {
+      background-color: rgba(0, 0, 0, 0.08);
+      font-weight: 500;
+    }
+  }
+
+  .current-value {
+    padding-left: 16px;
+    font-size: 0.875em;
+    opacity: 0.7;
+    font-style: italic;
+  }
+
+  mat-icon:first-child:not(.check-icon) {
+    margin-right: 8px;
+  }
+}