feat(ui): comprehensive ui improvements and persona system enhancement (#128)

Multiple enhancements across the application:

- LFXV2-670: Relocate footer to main layout for consistency
- LFXV2-671: Replace "old-ui" with "home" persona and simplify routing
- LFXV2-672: Add scrollable containers and refactor dashboard charts
- LFXV2-673: Add meeting attachments display with file type icons
- LFXV2-674: Enhance meeting join with password support and new tab
- LFXV2-675: Improve error handling and null safety across services

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

Signed-off-by: Asitha de Silva <[email protected]>

Author: asithade

apps/lfx-one/src/app/app.component.html

@@ -8,6 +8,3 @@
 <div class="top-20">
   <router-outlet />
 </div>
-
-<!-- Footer Component -->
-<lfx-footer class="py-8"></lfx-footer>

apps/lfx-one/src/app/app.component.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 
 import { CommonModule } from '@angular/common';
-import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, makeStateKey, REQUEST_CONTEXT, TransferState } from '@angular/core';
+import { Component, inject, makeStateKey, REQUEST_CONTEXT, TransferState } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { AuthContext } from '@lfx-one/shared/interfaces';
 import { ToastModule } from 'primeng/toast';
@@ -16,7 +16,6 @@ import { UserService } from './shared/services/user.service';
   imports: [RouterOutlet, HeaderComponent, CommonModule, ToastModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class AppComponent {
   private readonly userService = inject(UserService);

apps/lfx-one/src/app/app.routes.ts

@@ -21,12 +21,6 @@ export const routes: Routes = [
       },
     ],
   },
-  // Old UI route - shows when "Old UI" persona is selected
-  {
-    path: 'old-ui',
-    canActivate: [authGuard],
-    loadComponent: () => import('./modules/pages/home/home.component').then((m) => m.HomeComponent),
-  },
   {
     path: 'meetings',
     loadChildren: () => import('./modules/meeting/meeting.routes').then((m) => m.MEETING_ROUTES),

apps/lfx-one/src/app/layouts/main-layout/main-layout.component.html

@@ -32,5 +32,7 @@ <h2 class="text-lg font-semibold text-gray-900">Menu</h2>
   <!-- Main Content Area -->
   <main class="flex-1 min-w-0 transition-all duration-300 lg:ml-72" data-testid="main-content">
     <router-outlet />
+    <!-- Footer Component -->
+    <lfx-footer class="py-8"></lfx-footer>
   </main>
 </div>

apps/lfx-one/src/app/layouts/main-layout/main-layout.component.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 
 import { CommonModule } from '@angular/common';
-import { Component, inject } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import { AppService } from '@app/shared/services/app.service';
@@ -16,6 +16,7 @@ import { filter } from 'rxjs';
   imports: [CommonModule, RouterModule, SidebarComponent],
   templateUrl: './main-layout.component.html',
   styleUrl: './main-layout.component.scss',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class MainLayoutComponent {
   private readonly router = inject(Router);

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

@@ -17,7 +17,7 @@ <h2 class="font-display font-semibold text-gray-900">My Meetings</h2>
   </div>
 
   <!-- Scrollable Content -->
-  <div class="flex flex-col flex-1">
+  <div class="flex flex-col flex-1 max-h-[28.125rem] overflow-y-auto">
     <div class="flex flex-col gap-6" data-testid="dashboard-my-meetings-list">
       @if (todayMeetings().length > 0 || upcomingMeetings().length > 0) {
         <!-- TODAY Section - only show if there are meetings today -->

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

@@ -57,66 +57,14 @@ <h2 class="font-display font-semibold text-[16px]">My Projects</h2>
             <!-- Code Activities Chart -->
             <td class="py-2 px-3 border-t border-gray-200">
               <div class="h-12 w-[12.5rem]">
-                <lfx-chart
-                  type="line"
-                  [data]="{
-                    labels: generateLabels(project.codeActivities.length),
-                    datasets: [
-                      {
-                        data: project.codeActivities,
-                        borderColor: '#009AFF',
-                        backgroundColor: 'rgba(0, 154, 255, 0.1)',
-                        fill: true,
-                        tension: 0.4,
-                        borderWidth: 2,
-                        pointRadius: 0,
-                      },
-                    ],
-                  }"
-                  [options]="{
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: { legend: { display: false }, tooltip: { enabled: false } },
-                    scales: {
-                      x: { display: false },
-                      y: { display: false },
-                    },
-                  }"
-                  height="100%">
-                </lfx-chart>
+                <lfx-chart type="line" [data]="project.codeActivitiesChartData" [options]="chartOptions" height="100%"></lfx-chart>
               </div>
             </td>
 
             <!-- Non-Code Activities Chart -->
             <td class="py-2 px-3 border-t border-gray-200">
               <div class="h-12 w-[12.5rem]">
-                <lfx-chart
-                  type="line"
-                  [data]="{
-                    labels: generateLabels(project.nonCodeActivities.length),
-                    datasets: [
-                      {
-                        data: project.nonCodeActivities,
-                        borderColor: '#10b981',
-                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
-                        fill: true,
-                        tension: 0.4,
-                        borderWidth: 2,
-                        pointRadius: 0,
-                      },
-                    ],
-                  }"
-                  [options]="{
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: { legend: { display: false }, tooltip: { enabled: false } },
-                    scales: {
-                      x: { display: false },
-                      y: { display: false },
-                    },
-                  }"
-                  height="100%">
-                </lfx-chart>
+                <lfx-chart type="line" [data]="project.nonCodeActivitiesChartData" [options]="chartOptions" height="100%"></lfx-chart>
               </div>
             </td>
           </tr>

apps/lfx-one/src/app/modules/dashboards/components/my-projects/my-projects.component.ts

@@ -6,8 +6,17 @@ import { Component } from '@angular/core';
 import { ChartComponent } from '@components/chart/chart.component';
 import { TableComponent } from '@components/table/table.component';
 
+import type { ChartData, ChartOptions } from 'chart.js';
 import type { ProjectItem } from '@lfx-one/shared/interfaces';
 
+/**
+ * Extended project item with pre-generated chart data
+ */
+interface ProjectItemWithCharts extends ProjectItem {
+  codeActivitiesChartData: ChartData<'line'>;
+  nonCodeActivitiesChartData: ChartData<'line'>;
+}
+
 @Component({
   selector: 'lfx-my-projects',
   standalone: true,
@@ -16,42 +25,96 @@ import type { ProjectItem } from '@lfx-one/shared/interfaces';
   styleUrl: './my-projects.component.scss',
 })
 export class MyProjectsComponent {
-  protected readonly projects: ProjectItem[] = [
-    {
-      name: 'Kubernetes',
-      logo: 'https://avatars.githubusercontent.com/u/13455738?s=280&v=4',
-      role: 'Maintainer',
-      affiliations: ['CNCF', 'Google'],
-      codeActivities: [28, 32, 30, 35, 38, 40, 42],
-      nonCodeActivities: [8, 10, 12, 11, 13, 14, 15],
-      status: 'active',
-    },
-    {
-      name: 'Linux Kernel',
-      logo: 'https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg',
-      role: 'Contributor',
-      affiliations: ['Linux Foundation'],
-      codeActivities: [15, 18, 20, 22, 24, 26, 28],
-      nonCodeActivities: [3, 4, 5, 6, 7, 7, 8],
-      status: 'active',
-    },
-    {
-      name: 'Node.js',
-      logo: 'https://nodejs.org/static/logos/nodejsHex.svg',
-      role: 'Reviewer',
-      affiliations: ['OpenJS Foundation'],
-      codeActivities: [18, 16, 15, 14, 13, 12, 12],
-      nonCodeActivities: [8, 7, 6, 6, 5, 5, 5],
-      status: 'archived',
+  /**
+   * Chart options for activity charts
+   */
+  protected readonly chartOptions: ChartOptions<'line'> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: { legend: { display: false }, tooltip: { enabled: false } },
+    scales: {
+      x: { display: false },
+      y: { display: false },
     },
-  ];
+  };
+
+  /**
+   * Projects with pre-generated chart data
+   */
+  protected readonly projects: ProjectItemWithCharts[];
+
+  public constructor() {
+    // Initialize projects with randomized chart data
+    const baseProjects: ProjectItem[] = [
+      {
+        name: 'Kubernetes',
+        logo: 'https://avatars.githubusercontent.com/u/13455738?s=280&v=4',
+        role: 'Maintainer',
+        affiliations: ['CNCF', 'Google'],
+        codeActivities: this.generateRandomData(7, 25, 45),
+        nonCodeActivities: this.generateRandomData(7, 8, 16),
+        status: 'active',
+      },
+      {
+        name: 'Linux Kernel',
+        logo: 'https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg',
+        role: 'Contributor',
+        affiliations: ['Linux Foundation'],
+        codeActivities: this.generateRandomData(7, 12, 30),
+        nonCodeActivities: this.generateRandomData(7, 3, 9),
+        status: 'active',
+      },
+      {
+        name: 'Node.js',
+        logo: 'https://nodejs.org/static/logos/nodejsHex.svg',
+        role: 'Reviewer',
+        affiliations: ['OpenJS Foundation'],
+        codeActivities: this.generateRandomData(7, 10, 20),
+        nonCodeActivities: this.generateRandomData(7, 4, 10),
+        status: 'archived',
+      },
+    ];
+
+    // Generate chart data for each project
+    this.projects = baseProjects.map((project) => ({
+      ...project,
+      codeActivitiesChartData: this.createChartData(project.codeActivities, '#009AFF', 'rgba(0, 154, 255, 0.1)'),
+      nonCodeActivitiesChartData: this.createChartData(project.nonCodeActivities, '#10b981', 'rgba(16, 185, 129, 0.1)'),
+    }));
+  }
 
   /**
-   * Generates labels for chart based on data length
+   * Generates random data array
    * @param length - Number of data points
-   * @returns Array of empty strings for chart labels
+   * @param min - Minimum value
+   * @param max - Maximum value
+   * @returns Array of random numbers
+   */
+  private generateRandomData(length: number, min: number, max: number): number[] {
+    return Array.from({ length }, () => Math.floor(Math.random() * (max - min + 1)) + min);
+  }
+
+  /**
+   * Creates chart data configuration
+   * @param data - Array of values
+   * @param borderColor - Chart border color
+   * @param backgroundColor - Chart background color
+   * @returns Chart.js data configuration
    */
-  protected generateLabels(length: number): string[] {
-    return Array.from({ length }, () => '');
+  private createChartData(data: number[], borderColor: string, backgroundColor: string): ChartData<'line'> {
+    return {
+      labels: Array.from({ length: data.length }, () => ''),
+      datasets: [
+        {
+          data,
+          borderColor,
+          backgroundColor,
+          fill: true,
+          tension: 0.4,
+          borderWidth: 2,
+          pointRadius: 0,
+        },
+      ],
+    };
   }
 }

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

@@ -17,7 +17,7 @@ <h2 class="font-display font-semibold text-gray-900">Pending Actions</h2>
   </div>
 
   <!-- Scrollable Content -->
-  <div class="flex flex-col flex-1">
+  <div class="flex flex-col flex-1 max-h-[28.125rem] overflow-y-auto">
     <div class="flex flex-col gap-3" data-testid="dashboard-pending-actions-list">
       @for (item of pendingActions(); track item.text) {
         <div

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

@@ -8,7 +8,7 @@
   @case ('maintainer') {
     <lfx-maintainer-dashboard />
   }
-  @default {
-    <lfx-core-developer-dashboard />
+  @case ('projects') {
+    <lfx-home />
   }
 }