feat(ui): improve UX with contextual descriptions and UI polish (#172)

Comprehensive UI/UX improvements across meetings, dashboards, and
components to enhance user understanding and consistency.

Meeting Creation Flow (LFXV2-778):
- Add contextual headers and descriptions to all meeting setup steps
- Improve copy clarity for Meeting Details, Platform, Guests, Resources
- Update text colors for consistency (text-slate-500 → text-neutral-500)
- Hide "Add Guest" button when form is already open

Dashboard Descriptions (LFXV2-779):
- Add page descriptions to Committees and Meetings dashboards
- Provide context about page purposes for better user understanding
- Adjust layout structure to accommodate descriptions

Filter Label Consistency (LFXV2-780):
- Standardize filter labels to singular form
- Update Foundation Health: Contributors → Contribution, etc.
- Update Organization Involvement filter labels
- Fix import statement ordering

Data Copilot Rebranding (LFXV2-781):
- Rename "LFX Data Copilot" to "Ask LFX Lens"
- Improve drawer responsive sizing (xl:w-2/5 lg:w-2/3)
- Adjust committee table column width for better readability

LFXV2-778 LFXV2-779 LFXV2-780 LFXV2-781

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

Author: asithade

apps/lfx-one/src/app/modules/committees/committee-dashboard/committee-dashboard.component.html

@@ -11,19 +11,22 @@
     </div>
   } @else {
     <div class="mb-8">
-      <!-- Page Title with Create Group Button -->
-      <div class="flex justify-between items-center w-full gap-4 mb-8">
-        <h1>{{ committeeLabelPlural }}</h1>
-        @if (canCreateGroup()) {
-          <lfx-button
-            [label]="'Create ' + committeeLabel"
-            icon="fa-light fa-users mr-1"
-            severity="primary"
-            size="small"
-            (onClick)="openCreateDialog()"
-            data-testid="committee-new-cta">
-          </lfx-button>
-        }
+      <div class="mb-8">
+        <!-- Page Title with Create Group Button -->
+        <div class="flex justify-between items-center w-full gap-4">
+          <h1>{{ committeeLabelPlural }}</h1>
+          @if (canCreateGroup()) {
+            <lfx-button
+              [label]="'Create ' + committeeLabel"
+              icon="fa-light fa-users mr-1"
+              severity="primary"
+              size="small"
+              (onClick)="openCreateDialog()"
+              data-testid="committee-new-cta">
+            </lfx-button>
+          }
+        </div>
+        <p class="mt-2 text-neutral-500">A group is a team of people like committees, boards, or working groups organized to collaborate across your project</p>
       </div>
 
       <!-- Sticky Top Bar with Search and Filters -->

apps/lfx-one/src/app/modules/committees/components/committee-table/committee-table.component.html

@@ -6,7 +6,7 @@
     <table class="min-w-full" data-testid="committee-dashboard-table">
       <thead>
         <tr>
-          <th class="px-3 py-3 text-left text-xs font-medium text-[#62748e] w-[180px]">{{ committeeLabel() }}</th>
+          <th class="px-3 py-3 text-left text-xs font-medium text-[#62748e] min-w-[250px]">{{ committeeLabel() }}</th>
           <th class="px-3 py-3 text-left text-xs font-medium text-[#62748e] min-w-[300px]">Description</th>
           <th class="px-3 py-3 text-left text-xs font-medium text-[#62748e] w-[80px]">Members</th>
           <th class="px-3 py-3 text-left text-xs font-medium text-[#62748e] w-[80px]">Voting</th>

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

@@ -2,10 +2,10 @@
 // SPDX-License-Identifier: MIT
 
 import { CommonModule } from '@angular/common';
-import { Component, computed, ElementRef, signal, ViewChild, input } from '@angular/core';
+import { Component, computed, ElementRef, input, signal, ViewChild } from '@angular/core';
 import { ChartComponent } from '@components/chart/chart.component';
 import { FilterOption, FilterPillsComponent } from '@components/filter-pills/filter-pills.component';
-import { AGGREGATE_FOUNDATION_METRICS, FOUNDATION_SPARKLINE_CHART_OPTIONS, FOUNDATION_BAR_CHART_OPTIONS } from '@lfx-one/shared/constants';
+import { AGGREGATE_FOUNDATION_METRICS, FOUNDATION_BAR_CHART_OPTIONS, FOUNDATION_SPARKLINE_CHART_OPTIONS } from '@lfx-one/shared/constants';
 import { FoundationMetricCard, MetricCategory, TopProjectDisplay } from '@lfx-one/shared/interfaces';
 import { hexToRgba } from '@lfx-one/shared/utils';
 
@@ -25,9 +25,9 @@ export class FoundationHealthComponent {
 
   public readonly filterOptions: FilterOption[] = [
     { id: 'all', label: 'All' },
-    { id: 'contributors', label: 'Contributors' },
-    { id: 'projects', label: 'Projects' },
-    { id: 'events', label: 'Events' },
+    { id: 'contributors', label: 'Contribution' },
+    { id: 'projects', label: 'Project' },
+    { id: 'events', label: 'Event' },
   ];
 
   public readonly sparklineOptions = FOUNDATION_SPARKLINE_CHART_OPTIONS;

apps/lfx-one/src/app/modules/dashboards/components/organization-involvement/organization-involvement.component.ts

@@ -46,8 +46,8 @@ export class OrganizationInvolvementComponent {
   public readonly barChartOptions = BAR_CHART_OPTIONS;
   public readonly filterOptions: FilterOption[] = [
     { id: 'all', label: 'All' },
-    { id: 'contributions', label: 'Contributions' },
-    { id: 'events', label: 'Events' },
+    { id: 'contributions', label: 'Contribution' },
+    { id: 'events', label: 'Event' },
     { id: 'education', label: 'Education' },
   ];
 

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

@@ -4,7 +4,7 @@
 <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.5">Pending Actions</h2>
+    <h2 class="py-1">Pending Actions</h2>
   </div>
 
   <!-- Scrollable Content -->

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

@@ -2,6 +2,11 @@
 <!-- SPDX-License-Identifier: MIT -->
 
 <div class="space-y-6">
+  <div class="text-center mb-4">
+    <h2 class="mb-2">Meeting Details</h2>
+    <p class="text-neutral-500 text-base">Set the date, time, and schedule to help participants plan and prepare effectively</p>
+  </div>
+
   <!-- Basic Information Section -->
   <div class="flex flex-col gap-4">
     <!-- Meeting Title (Required) -->

apps/lfx-one/src/app/modules/meetings/components/meeting-platform-features/meeting-platform-features.component.html

@@ -5,7 +5,7 @@
   <!-- Header -->
   <div class="text-center mb-8">
     <h2 class="mb-2">Meeting Platform & Features</h2>
-    <p class="text-slate-500 text-sm">Choose your meeting platform and enable helpful features.</p>
+    <p class="text-neutral-500 text-base">Select your video platform and enable transparency features like recording and public calendars</p>
   </div>
 
   <!-- Meeting Platform Selection -->
@@ -14,6 +14,7 @@ <h2 class="mb-2">Meeting Platform & Features</h2>
 
     <lfx-select
       [form]="form()"
+      class="mb-4"
       control="platform"
       [options]="platformDropdownOptions"
       placeholder="Select meeting platform"

apps/lfx-one/src/app/modules/meetings/components/meeting-registrants-manager/meeting-registrants-manager.component.html

@@ -6,19 +6,26 @@
   <p-confirmDialog></p-confirmDialog>
 
   <!-- Main Card Container (following React pattern) -->
+  <!-- Header -->
+  <div class="text-center mb-8">
+    <h2 class="mb-2">Invite Guests</h2>
+    <p class="text-neutral-500 text-base">Include key stakeholders and contributors who should participate in this discussion</p>
+  </div>
 
   <div class="flex items-center mb-4">
     <div class="flex items-center gap-3">
       <!-- <lfx-button size="small" label="Bulk Add" icon="fa-light fa-upload" severity="secondary" data-testid="bulk-add-button" (click)="onBulkAdd()">
       </lfx-button> -->
-      <lfx-button
-        size="small"
-        label="Add Guest"
-        icon="fa-light fa-user-plus"
-        severity="secondary"
-        data-testid="add-guest-button"
-        (click)="onToggleAddRegistrant()">
-      </lfx-button>
+      @if (!showAddForm()) {
+        <lfx-button
+          size="small"
+          label="Add Guest"
+          icon="fa-light fa-user-plus"
+          severity="secondary"
+          data-testid="add-guest-button"
+          (click)="onToggleAddRegistrant()">
+        </lfx-button>
+      }
     </div>
   </div>
 

apps/lfx-one/src/app/modules/meetings/components/meeting-registrants-manager/meeting-registrants-manager.component.ts

@@ -54,7 +54,7 @@ export class MeetingRegistrantsManagerComponent implements OnInit {
   // Writable signals for state management
   public registrantsWithState: WritableSignal<MeetingRegistrantWithState[]> = signal([]);
   public loading: WritableSignal<boolean> = signal(true);
-  public showAddForm = signal<boolean>(false);
+  public showAddForm = signal<boolean>(true);
   public showImport = signal<boolean>(false);
   public editingRegistrantId = signal<string | null>(null);
   public searchTerm = signal<string>('');

apps/lfx-one/src/app/modules/meetings/components/meeting-resources-summary/meeting-resources-summary.component.html

@@ -4,7 +4,7 @@
 <div class="space-y-6">
   <div class="text-center mb-8">
     <h2 class="mb-2">Resources & Links</h2>
-    <p class="text-slate-500 text-base">Add any important links or resources guests should review.</p>
+    <p class="text-neutral-500 text-base">Share documents, agendas, and reference materials so participants come prepared</p>
   </div>
 
   <div class="space-y-6">