Feature/client of last request in users table (#8143)

* Add icon

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added an icon to indicate the client of the last request in the users table of the admin control panel
+
 ### Changed
 
 - Upgraded `ai` from version `7.0.114` to `7.0.127`

apps/client/src/app/components/admin-users/admin-users.component.ts

@@ -21,6 +21,7 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
+import { RequestClient } from '@ghostfolio/prisma/enums';
 import { NotificationService } from '@ghostfolio/ui/notifications';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { AdminService, DataService } from '@ghostfolio/ui/services';
@@ -51,10 +52,14 @@ import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import {
+  codeSlashOutline,
   contractOutline,
   ellipsisHorizontal,
+  globeOutline,
   keyOutline,
   personOutline,
+  serverOutline,
+  sparklesOutline,
   trashOutline
 } from 'ionicons/icons';
 import ms from 'ms';
@@ -85,6 +90,7 @@ export class GfAdminUsersComponent implements OnInit {
   protected dataSource = new MatTableDataSource<
     AdminUsersResponse['users'][0]
   >();
+
   protected defaultDateFormat: string;
   protected displayedColumns: string[] = [];
   protected readonly canDeleteUser = canDeleteUser;
@@ -96,8 +102,17 @@ export class GfAdminUsersComponent implements OnInit {
   protected info: InfoItem;
   protected isLoading = false;
   protected readonly pageSize = DEFAULT_PAGE_SIZE;
+
+  protected readonly requestClientIcons: Record<RequestClient, string> = {
+    API: 'code-slash-outline',
+    MCP: 'sparkles-outline',
+    SELF_HOSTING: 'server-outline',
+    WEB: 'globe-outline'
+  };
+
   protected readonly routerLinkAdminControlUsers =
     internalRoutes.adminControl.subRoutes.users.routerLink;
+
   protected totalItems = 0;
   protected user: User;
 
@@ -112,9 +127,11 @@ export class GfAdminUsersComponent implements OnInit {
   private readonly destroyRef = inject(DestroyRef);
   private readonly deviceDetectorService = inject(DeviceDetectorService);
   private readonly dialog = inject(MatDialog);
+
   private readonly impersonationStorageService = inject(
     ImpersonationStorageService
   );
+
   private readonly notificationService = inject(NotificationService);
   private readonly route = inject(ActivatedRoute);
   private readonly router = inject(Router);
@@ -182,10 +199,14 @@ export class GfAdminUsersComponent implements OnInit {
       });
 
     addIcons({
+      codeSlashOutline,
       contractOutline,
       ellipsisHorizontal,
+      globeOutline,
       keyOutline,
       personOutline,
+      serverOutline,
+      sparklesOutline,
       trashOutline
     });
   }

apps/client/src/app/components/admin-users/admin-users.html

@@ -192,12 +192,23 @@
                 class="mat-mdc-cell px-1 py-2 text-nowrap"
                 mat-cell
               >
-                {{
+                <div class="align-items-center d-flex">
-                  formatRelativeTime({
+                  @if (element.lastRequestClient) {
-                    date: element.lastActivity,
+                    <ion-icon
-                    language: user?.settings?.language
+                      class="mr-1"
-                  })
+                      [name]="requestClientIcons[element.lastRequestClient]"
-                }}
+                      [title]="element.lastRequestClient"
+                    />
+                  } @else {
+                    <ion-icon class="hidden mr-1" />
+                  }
+                  {{
+                    formatRelativeTime({
+                      date: element.lastActivity,
+                      language: user?.settings?.language
+                    })
+                  }}
+                </div>
               </td>
             </ng-container>
           }