More webapp changes+fixes

webapp/src/app/features/channels/channel-detail/channel-detail.component.ts

@@ -1,11 +1,10 @@
 import { Component, inject, signal, computed, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzIconModule } from 'ng-zorro-antd/icon';
-import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
@@ -19,21 +18,23 @@ import { NzEmptyModule } from 'ng-zorro-antd/empty';
 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 { ChannelWithSubscription, Subscription } from '../../../core/models';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
 import { CopyToClipboardDirective } from '../../../shared/directives/copy-to-clipboard.directive';
 import { QrCodeDisplayComponent } from '../../../shared/components/qr-code-display/qr-code-display.component';
+import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/components/metadata-grid';
 
 @Component({
   selector: 'app-channel-detail',
   standalone: true,
   imports: [
     CommonModule,
+    DatePipe,
     FormsModule,
     NzCardModule,
     NzButtonModule,
     NzIconModule,
-    NzDescriptionsModule,
     NzTagModule,
     NzSpinModule,
     NzPopconfirmModule,
@@ -47,6 +48,8 @@ import { QrCodeDisplayComponent } from '../../../shared/components/qr-code-displ
     RelativeTimePipe,
     CopyToClipboardDirective,
     QrCodeDisplayComponent,
+    MetadataGridComponent,
+    MetadataValueComponent,
   ],
   templateUrl: './channel-detail.component.html',
   styleUrl: './channel-detail.component.scss'
@@ -57,9 +60,11 @@ export class ChannelDetailComponent implements OnInit {
   private apiService = inject(ApiService);
   private authService = inject(AuthService);
   private notification = inject(NotificationService);
+  private userCacheService = inject(UserCacheService);
 
   channel = signal<ChannelWithSubscription | null>(null);
   subscriptions = signal<Subscription[]>([]);
+  userNames = signal<Map<string, ResolvedUser>>(new Map());
   loading = signal(true);
   loadingSubscriptions = signal(false);
   // Edit modal
@@ -118,6 +123,7 @@ export class ChannelDetailComponent implements OnInit {
       next: (response) => {
         this.subscriptions.set(response.subscriptions);
         this.loadingSubscriptions.set(false);
+        this.resolveUserNames(response.subscriptions);
       },
       error: () => {
         this.loadingSubscriptions.set(false);
@@ -125,6 +131,23 @@ export class ChannelDetailComponent implements OnInit {
     });
   }
 
+  private resolveUserNames(subscriptions: Subscription[]): void {
+    const userIds = new Set<string>();
+    for (const sub of subscriptions) {
+      userIds.add(sub.subscriber_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;
+  }
+
   goBack(): void {
     this.router.navigate(['/channels']);
   }