feat(dashboards): add unified pending actions api and ui improvements

LFXV2-828 LFXV2-829 LFXV2-830 LFXV2-831

- Add unified /api/user/pending-actions endpoint consolidating surveys and meetings
- Implement cookie registry service with clear cache functionality
- Improve meeting creation flow UX with internal step tracking
- Polish pending actions, foundation health, and my meetings UI styling
- Fix persona selector to use dynamic project UID

Generated with [Claude Code](https://claude.ai/code)

Signed-off-by: Asitha de Silva <asithade@gmail.com>

Author: asithade

.vscode/settings.json

@@ -10,6 +10,7 @@
     "confirmdialog",
     "contentful",
     "Contentful",
+    "DATEADD",
     "daygrid",
     "dismissable",
     "domcontentloaded",

apps/lfx-one/src/app/modules/dashboards/board-member/board-member-dashboard.component.ts

@@ -81,15 +81,14 @@ export class BoardMemberDashboardComponent {
           return project$.pipe(
             switchMap((project) => {
               // If no project/foundation selected, return empty array
-              if (!project?.slug) {
+              if (!project?.slug || !project?.uid) {
                 return of([]);
               }
 
-              // Fetch survey actions from API
-              return this.projectService.getPendingActionSurveys(project.slug).pipe(
+              // Fetch all pending actions from unified backend endpoint
+              return this.projectService.getPendingActions(project.slug, project.uid, 'board-member').pipe(
                 catchError((error) => {
-                  console.error('Failed to fetch survey actions:', error);
-                  // Return empty array on error
+                  console.error('Failed to fetch pending actions:', error);
                   return of([]);
                 })
               );

apps/lfx-one/src/app/modules/dashboards/components/foundation-health/foundation-health.component.ts

@@ -196,7 +196,7 @@ export class FoundationHealthComponent {
       icon: metric.icon,
       title: metric.title,
       value: data.totalProjects.toLocaleString(),
-      subtitle: 'Across all foundations',
+      subtitle: `Total ${this.projectContextService.selectedFoundation()?.name} projects`,
       category: metric.category as MetricCategory,
       testId: metric.testId,
       customContentType: metric.customContentType,
@@ -240,7 +240,7 @@ export class FoundationHealthComponent {
       icon: metric.icon,
       title: metric.title,
       value: data.totalMembers.toLocaleString(),
-      subtitle: 'Member organizations',
+      subtitle: `Total ${this.projectContextService.selectedFoundation()?.name} members`,
       category: metric.category as MetricCategory,
       testId: metric.testId,
       customContentType: metric.customContentType,

apps/lfx-one/src/app/modules/dashboards/components/my-meetings/my-meetings.component.html

@@ -4,7 +4,10 @@
 <section class="flex flex-col flex-1" data-testid="dashboard-my-meetings-section">
   <!-- Header -->
   <div class="flex items-center justify-between mb-4">
-    <h2>My Meetings</h2>
+    <h2 class="flex items-center gap-2">
+      <i class="fa-light fa-calendar text-lg"></i>
+      <span>My Meetings</span>
+    </h2>
     <lfx-button
       label="View All"
       icon="fa-light fa-chevron-right"

apps/lfx-one/src/app/modules/dashboards/components/pending-actions/pending-actions.component.html

@@ -3,40 +3,50 @@
 
 <section class="flex flex-col flex-1" data-testid="dashboard-pending-actions-section">
   <!-- Header -->
-  <div class="flex items-center justify-between mb-4">
-    <h2 class="py-1">Pending Actions</h2>
+  <div class="flex items-center justify-between mb-4 px-2">
+    <h2 class="py-1 flex items-center gap-2">
+      <i class="fa-light fa-list-check text-lg"></i>
+      <span>Pending Actions</span>
+    </h2>
   </div>
 
   <!-- Scrollable Content -->
-  <div class="flex flex-col flex-1 max-h-[28.125rem] overflow-y-auto">
+  <div class="flex flex-col flex-1 max-h-[28.125rem] overflow-y-auto p-2">
     @if (pendingActions().length > 0) {
       <div class="flex flex-col gap-3" data-testid="dashboard-pending-actions-list">
         @for (item of pendingActions(); track $index) {
           <div
             class="p-4 border-0 rounded-lg shadow-md"
             [ngClass]="{
               'bg-yellow-50': item.color === 'amber',
-              'bg-blue-50': item.color === 'blue',
-              'bg-green-50': item.color === 'green',
-              'bg-purple-50': item.color === 'purple',
+              'bg-blue-200': item.color === 'blue',
+              'bg-green-200': item.color === 'green',
+              'bg-purple-200': item.color === 'purple',
             }"
             [attr.data-testid]="'dashboard-pending-actions-item-' + item.type">
             <!-- Header with Type -->
             <div class="flex items-start justify-between mb-3">
-              <div class="flex items-center gap-2">
+              <div
+                class="flex items-center gap-2 px-2 py-1 rounded-md text-xs"
+                [ngClass]="{
+                  'bg-yellow-200': item.color === 'amber',
+                  'bg-blue-300': item.color === 'blue',
+                  'bg-green-300': item.color === 'green',
+                  'bg-purple-300': item.color === 'purple',
+                }">
                 <div
                   [ngClass]="{
                     'text-yellow-700': item.color === 'amber',
                     'text-blue-700': item.color === 'blue',
                     'text-green-700': item.color === 'green',
                     'text-purple-700': item.color === 'purple',
                   }">
-                  <i [ngClass]="[item.icon, 'w-4', 'h-4']"></i>
+                  <i [ngClass]="[item.icon, 'w-3']"></i>
                 </div>
                 <span
                   class="text-xs font-medium"
                   [ngClass]="{
-                    'text-yellow-700': item.color === 'amber',
+                    'text-amber-700': item.color === 'amber',
                     'text-blue-700': item.color === 'blue',
                     'text-green-700': item.color === 'green',
                     'text-purple-700': item.color === 'purple',
@@ -48,14 +58,7 @@ <h2 class="py-1">Pending Actions</h2>
 
             <!-- Action Text -->
             <div class="mb-4">
-              <p
-                class="text-sm font-medium"
-                [ngClass]="{
-                  'text-yellow-900': item.color === 'amber',
-                  'text-blue-900': item.color === 'blue',
-                  'text-green-900': item.color === 'green',
-                  'text-purple-900': item.color === 'purple',
-                }">
+              <p class="text-base font-normal">
                 {{ item.text }}
               </p>
             </div>
@@ -65,7 +68,7 @@ <h2 class="py-1">Pending Actions</h2>
               <lfx-button
                 size="small"
                 class="w-full"
-                styleClass="w-full"
+                styleClass="w-full text-sm"
                 severity="secondary"
                 rel="noopener noreferrer"
                 [link]="true"
@@ -77,7 +80,7 @@ <h2 class="py-1">Pending Actions</h2>
             } @else {
               <lfx-button
                 size="small"
-                class="w-full"
+                class="w-full text-sm"
                 styleClass="w-full text-sm"
                 severity="secondary"
                 (onClick)="handleActionClick(item)"

apps/lfx-one/src/app/modules/meetings/components/meeting-type-selection/meeting-type-selection.component.html

@@ -2,23 +2,6 @@
 <!-- SPDX-License-Identifier: MIT -->
 
 <div class="flex flex-col gap-6">
-  @if (projectOptions().length > 0) {
-    <div data-testid="meeting-project-selector">
-      <label for="project-select" class="text-sm font-semibold text-slate-900 mb-2 block">Select Project</label>
-      <p class="text-xs text-slate-500 mb-3">Choose which project this meeting is for. If not selected, the current project will be used.</p>
-      <lfx-select
-        class="w-full"
-        styleClass="w-full"
-        id="project-select"
-        [form]="form()"
-        control="selectedProjectUid"
-        [options]="projectOptions()"
-        placeholder="Select a project (optional)"
-        [showClear]="true"
-        data-testid="project-select-dropdown" />
-    </div>
-  }
-
   <div class="flex flex-col">
     <div class="text-center mb-4">
       <h2 class="mb-2">Meeting Type & Privacy</h2>

apps/lfx-one/src/app/modules/meetings/components/meeting-type-selection/meeting-type-selection.component.ts

@@ -2,20 +2,14 @@
 // SPDX-License-Identifier: MIT
 
 import { CommonModule } from '@angular/common';
-import { HttpParams } from '@angular/common/http';
 import { Component, computed, inject, input } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
 import { FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MessageComponent } from '@components/message/message.component';
-import { SelectComponent } from '@components/select/select.component';
 import { ToggleComponent } from '@components/toggle/toggle.component';
 import { lfxColors } from '@lfx-one/shared/constants';
 import { MeetingType } from '@lfx-one/shared/enums';
-import { Project } from '@lfx-one/shared/interfaces';
-import { ProjectContextService } from '@services/project-context.service';
-import { ProjectService } from '@services/project.service';
+import { PersonaService } from '@services/persona.service';
 import { TooltipModule } from 'primeng/tooltip';
-import { map, of } from 'rxjs';
 
 interface MeetingTypeInfo {
   icon: string;
@@ -27,27 +21,15 @@ interface MeetingTypeInfo {
 @Component({
   selector: 'lfx-meeting-type-selection',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, MessageComponent, SelectComponent, ToggleComponent, TooltipModule],
+  imports: [CommonModule, ReactiveFormsModule, MessageComponent, ToggleComponent, TooltipModule],
   templateUrl: './meeting-type-selection.component.html',
 })
 export class MeetingTypeSelectionComponent {
-  private readonly projectContextService = inject(ProjectContextService);
-  private readonly projectService = inject(ProjectService);
+  private readonly personaService = inject(PersonaService);
 
   // Form group input from parent
   public readonly form = input.required<FormGroup>();
 
-  // Child projects signal
-  public childProjects = this.initializeChildProjects();
-
-  // Map projects to select options
-  public projectOptions = computed(() => {
-    return this.childProjects().map((project: Project) => ({
-      label: project.name,
-      value: project.uid,
-    }));
-  });
-
   // Meeting type options with their info - computed for template efficiency
   // Filtered based on user role (currently showing only maintainers, technical, and other)
   public readonly meetingTypeOptions = computed(() => {
@@ -62,7 +44,8 @@ export class MeetingTypeSelectionComponent {
 
     // Filter to only show maintainers, technical, and other meeting types
     const allowedTypes = [MeetingType.MAINTAINERS, MeetingType.TECHNICAL, MeetingType.OTHER];
-    const filteredOptions = allOptions.filter((option) => allowedTypes.includes(option.value));
+    const filteredOptions =
+      this.personaService.currentPersona() === 'maintainer' ? allOptions.filter((option) => allowedTypes.includes(option.value)) : allOptions;
 
     return filteredOptions.map((option) => ({
       ...option,
@@ -133,24 +116,4 @@ export class MeetingTypeSelectionComponent {
     this.form().get('meeting_type')?.setValue(meetingType);
     this.form().get('meeting_type')?.markAsTouched();
   }
-
-  // Get child projects for the current project
-  private initializeChildProjects() {
-    const currentProject = this.projectContextService.selectedProject() || this.projectContextService.selectedFoundation();
-
-    if (!currentProject) {
-      return toSignal(of([]), { initialValue: [] });
-    }
-
-    const params = new HttpParams().set('tags', `parent_uid:${currentProject.uid}`);
-    return toSignal(
-      this.projectService.getProjects(params).pipe(
-        map((projects: Project[]) => {
-          // Filter out the current project from the list
-          return projects.filter((project) => project.uid !== currentProject.uid && project.writer);
-        })
-      ),
-      { initialValue: [] }
-    );
-  }
 }

apps/lfx-one/src/app/modules/meetings/meeting-manage/meeting-manage.component.ts

@@ -94,7 +94,8 @@ export class MeetingManageComponent {
   // Initialize meeting attachments with refresh capability
   private attachmentsRefresh$ = new BehaviorSubject<void>(undefined);
   public attachments = this.initializeAttachments();
-  // Stepper state
+  // Stepper state - internal step tracking for create mode
+  private internalStep = signal<number>(1);
   public currentStep = toSignal(of(1), { initialValue: 1 });
   public readonly totalSteps = TOTAL_STEPS;
   // Form state
@@ -124,18 +125,25 @@ export class MeetingManageComponent {
   );
 
   public constructor() {
-    // Initialize step from query parameter
+    // Initialize step based on mode
+    // In edit mode, read from query parameters
+    // In create mode, use internal step tracking
     this.currentStep = toSignal(
       this.route.queryParamMap.pipe(
         switchMap((params) => {
-          const stepParam = params.get('step');
-          if (stepParam) {
-            const step = parseInt(stepParam, 10);
-            if (step >= 1 && step <= this.totalSteps) {
-              return of(step);
+          // In edit mode, use query parameters
+          if (this.isEditMode()) {
+            const stepParam = params.get('step');
+            if (stepParam) {
+              const step = parseInt(stepParam, 10);
+              if (step >= 1 && step <= this.totalSteps) {
+                return of(step);
+              }
             }
+            return of(1);
           }
-          return of(1);
+          // In create mode, use internal step signal
+          return toObservable(this.internalStep);
         })
       ),
       { initialValue: 1 }
@@ -169,7 +177,13 @@ export class MeetingManageComponent {
 
   public goToStep(step: number | undefined): void {
     if (step !== undefined && this.canNavigateToStep(step)) {
-      this.router.navigate([], { queryParams: { step: step } });
+      if (this.isEditMode()) {
+        // In edit mode, update query params
+        this.router.navigate([], { queryParams: { step: step } });
+      } else {
+        // In create mode, update internal step
+        this.internalStep.set(step);
+      }
       this.scrollToStepper();
     }
   }
@@ -182,15 +196,27 @@ export class MeetingManageComponent {
         this.generateMeetingTitle();
       }
 
-      this.router.navigate([], { queryParams: { step: next } });
+      if (this.isEditMode()) {
+        // In edit mode, update query params
+        this.router.navigate([], { queryParams: { step: next } });
+      } else {
+        // In create mode, update internal step
+        this.internalStep.set(next);
+      }
       this.scrollToStepper();
     }
   }
 
   public previousStep(): void {
     const previous = this.currentStep() - 1;
     if (previous >= 1) {
-      this.router.navigate([], { queryParams: { step: previous } });
+      if (this.isEditMode()) {
+        // In edit mode, update query params
+        this.router.navigate([], { queryParams: { step: previous } });
+      } else {
+        // In create mode, update internal step
+        this.internalStep.set(previous);
+      }
       this.scrollToStepper();
     }
   }
@@ -389,7 +415,7 @@ export class MeetingManageComponent {
     }
 
     return {
-      project_uid: formValue.selectedProjectUid || this.project()?.uid,
+      project_uid: this.projectContextService.selectedProject()?.uid || this.projectContextService.selectedFoundation()?.uid || '',
       title: formValue.title,
       description: formValue.description || '',
       start_time: startDateTime,
@@ -814,7 +840,6 @@ export class MeetingManageComponent {
     return new FormGroup(
       {
         // Step 1: Meeting Type
-        selectedProjectUid: new FormControl(''),
         meeting_type: new FormControl('', [Validators.required]),
         visibility: new FormControl(MeetingVisibility.PRIVATE),
         restricted: new FormControl(false),

apps/lfx-one/src/app/shared/components/persona-selector/persona-selector.component.ts

@@ -44,11 +44,14 @@ export class PersonaSelectorComponent {
       .subscribe((value: PersonaType) => {
         if (value === 'board-member') {
           // TODO: DEMO - Remove when proper permissions are implemented
-          this.projectContextService.setFoundation({
-            uid: 'tlf',
-            name: 'The Linux Foundation',
-            slug: 'tlf',
-          });
+          const tlfProject = this.projectContextService.availableProjects.find((p) => p.slug === 'tlf');
+          if (tlfProject) {
+            this.projectContextService.setFoundation({
+              uid: tlfProject.uid,
+              name: tlfProject.name,
+              slug: tlfProject.slug,
+            });
+          }
         }
 
         this.personaService.setPersona(value);

apps/lfx-one/src/app/shared/components/sidebar/sidebar.component.html

@@ -45,6 +45,11 @@
         <lfx-persona-selector></lfx-persona-selector>
       </div>
 
+      <!-- Clear Cache nav item (feature flag controlled) -->
+      @if (showClearCacheButton()) {
+        <ng-container *ngTemplateOutlet="menuItem; context: { $implicit: clearCacheMenuItem }"></ng-container>
+      }
+
       @if (footerItems().length > 0) {
         @for (item of footerItemsWithTestIds(); track item.label) {
           <ng-container *ngTemplateOutlet="menuItem; context: { $implicit: item }"></ng-container>