Simple Managment webapp [LLM]

webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.html

@@ -25,16 +25,19 @@
       [nzData]="subscriptions()"
       [nzLoading]="loading()"
       [nzShowPagination]="false"
+      [nzNoResult]="noResultTpl"
       nzSize="middle"
     >
+    <ng-template #noResultTpl></ng-template>
       <thead>
         <tr>
-          <th nzWidth="15%">Direction</th>
-          <th nzWidth="25%">Channel</th>
-          <th nzWidth="20%">Subscriber / Owner</th>
-          <th nzWidth="15%">Status</th>
-          <th nzWidth="15%">Created</th>
-          <th nzWidth="10%">Actions</th>
+          <th nzWidth="10%">Direction</th>
+          <th nzWidth="20%">Channel</th>
+          <th nzWidth="20%">Subscriber</th>
+          <th nzWidth="20%">Owner</th>
+          <th nzWidth="10%">Status</th>
+          <th nzWidth="12%">Created</th>
+          <th nzWidth="8%">Actions</th>
         </tr>
       </thead>
       <tbody>
@@ -48,15 +51,8 @@
             <td>
               <span class="mono">{{ sub.channel_internal_name }}</span>
             </td>
-            <td>
-              @if (isOutgoing(sub)) {
-                <span class="label">Owner:</span>
-                <span class="mono">{{ sub.channel_owner_user_id }}</span>
-              } @else {
-                <span class="label">Subscriber:</span>
-                <span class="mono">{{ sub.subscriber_user_id }}</span>
-              }
-            </td>
+            <td>{{ getUserDisplayName(sub.subscriber_user_id) }}</td>
+            <td>{{ getUserDisplayName(sub.channel_owner_user_id) }}</td>
             <td>
               <nz-tag [nzColor]="getStatusInfo(sub).color">
                 {{ getStatusInfo(sub).label }}
@@ -113,7 +109,7 @@
           </tr>
         } @empty {
           <tr>
-            <td colspan="6">
+            <td colspan="7">
               <nz-empty nzNotFoundContent="No subscriptions found"></nz-empty>
             </td>
           </tr>

webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.ts

@@ -16,6 +16,7 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 import { ApiService } from '../../../core/services/api.service';
 import { AuthService } from '../../../core/services/auth.service';
 import { NotificationService } from '../../../core/services/notification.service';
+import { UserCacheService, ResolvedUser } from '../../../core/services/user-cache.service';
 import { Subscription, SubscriptionFilter } from '../../../core/models';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
 
@@ -48,8 +49,10 @@ export class SubscriptionListComponent implements OnInit {
   private apiService = inject(ApiService);
   private authService = inject(AuthService);
   private notification = inject(NotificationService);
+  private userCacheService = inject(UserCacheService);
 
   subscriptions = signal<Subscription[]>([]);
+  userNames = signal<Map<string, ResolvedUser>>(new Map());
   loading = signal(false);
   direction: TabDirection = 'both';
 
@@ -78,6 +81,7 @@ export class SubscriptionListComponent implements OnInit {
       next: (response) => {
         this.subscriptions.set(response.subscriptions);
         this.loading.set(false);
+        this.resolveUserNames(response.subscriptions);
       },
       error: () => {
         this.loading.set(false);
@@ -85,6 +89,24 @@ export class SubscriptionListComponent implements OnInit {
     });
   }
 
+  private resolveUserNames(subscriptions: Subscription[]): void {
+    const userIds = new Set<string>();
+    for (const sub of subscriptions) {
+      userIds.add(sub.subscriber_user_id);
+      userIds.add(sub.channel_owner_user_id);
+    }
+    for (const id of userIds) {
+      this.userCacheService.resolveUser(id).subscribe(resolved => {
+        this.userNames.update(map => new Map(map).set(id, resolved));
+      });
+    }
+  }
+
+  getUserDisplayName(userId: string): string {
+    const resolved = this.userNames().get(userId);
+    return resolved?.displayName || userId;
+  }
+
   onTabChange(index: number): void {
     const directions: TabDirection[] = ['both', 'outgoing', 'incoming'];
     this.direction = directions[index];