More webapp changes+fixes

webapp/src/app/features/keys/key-detail/key-detail.component.ts

@@ -1,6 +1,6 @@
 import { Component, inject, signal, OnInit } from '@angular/core';
 import { CommonModule, DatePipe } from '@angular/common';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzButtonModule } from 'ng-zorro-antd/button';
@@ -14,12 +14,15 @@ import { NzInputModule } from 'ng-zorro-antd/input';
 import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
 import { NzSelectModule } from 'ng-zorro-antd/select';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { NzTableModule } from 'ng-zorro-antd/table';
+import { NzEmptyModule } from 'ng-zorro-antd/empty';
+import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 import { ApiService } from '../../../core/services/api.service';
 import { AuthService } from '../../../core/services/auth.service';
 import { NotificationService } from '../../../core/services/notification.service';
 import { ChannelCacheService, ResolvedChannel } from '../../../core/services/channel-cache.service';
 import { UserCacheService, ResolvedUser } from '../../../core/services/user-cache.service';
-import { KeyToken, parsePermissions, TokenPermission, ChannelWithSubscription } from '../../../core/models';
+import { KeyToken, parsePermissions, TokenPermission, ChannelWithSubscription, Message } from '../../../core/models';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
 import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/components/metadata-grid';
 
@@ -36,6 +39,7 @@ interface PermissionOption {
     CommonModule,
     DatePipe,
     FormsModule,
+    RouterLink,
     NzCardModule,
     NzButtonModule,
     NzIconModule,
@@ -48,6 +52,9 @@ interface PermissionOption {
     NzCheckboxModule,
     NzSelectModule,
     NzToolTipModule,
+    NzTableModule,
+    NzEmptyModule,
+    NzPaginationModule,
     RelativeTimePipe,
     MetadataGridComponent,
     MetadataValueComponent,
@@ -71,6 +78,14 @@ export class KeyDetailComponent implements OnInit {
   availableChannels = signal<ChannelWithSubscription[]>([]);
   resolvedOwner = signal<ResolvedUser | null>(null);
 
+  // Messages
+  messages = signal<Message[]>([]);
+  loadingMessages = signal(false);
+  messagesPageSize = 16;
+  messagesTotalCount = signal(0);
+  messagesCurrentPage = signal(1);
+  messagesNextPageToken = signal<string | null>(null);
+
   // Edit modal
   showEditModal = signal(false);
   editKeyName = '';
@@ -106,6 +121,7 @@ export class KeyDetailComponent implements OnInit {
         this.loading.set(false);
         this.resolveChannelNames(key);
         this.resolveOwner(key.owner_user_id);
+        this.loadMessages(keyId);
       },
       error: () => {
         this.loading.set(false);
@@ -113,6 +129,64 @@ export class KeyDetailComponent implements OnInit {
     });
   }
 
+  loadMessages(keyId: string, nextPageToken?: string): void {
+    this.loadingMessages.set(true);
+    // Load more messages than page size to ensure we get enough after filtering
+    this.apiService.getMessages({
+      page_size: 64,
+      next_page_token: nextPageToken,
+      trimmed: true
+    }).subscribe({
+      next: (response) => {
+        // Filter messages by the key that was used to send them
+        const filtered = response.messages.filter(m => m.used_key_id === keyId);
+        this.messages.set(filtered.slice(0, this.messagesPageSize));
+        this.messagesTotalCount.set(filtered.length);
+        this.messagesNextPageToken.set(response.next_page_token || null);
+        this.loadingMessages.set(false);
+      },
+      error: () => {
+        this.loadingMessages.set(false);
+      }
+    });
+  }
+
+  messagesGoToPage(page: number): void {
+    const key = this.key();
+    if (!key) return;
+    this.messagesCurrentPage.set(page);
+    if (page === 1) {
+      this.loadMessages(key.keytoken_id);
+    } else {
+      const token = this.messagesNextPageToken();
+      if (token) {
+        this.loadMessages(key.keytoken_id, token);
+      }
+    }
+  }
+
+  viewMessage(message: Message): void {
+    this.router.navigate(['/messages', message.message_id]);
+  }
+
+  getPriorityColor(priority: number): string {
+    switch (priority) {
+      case 0: return 'default';
+      case 1: return 'blue';
+      case 2: return 'orange';
+      default: return 'default';
+    }
+  }
+
+  getPriorityLabel(priority: number): string {
+    switch (priority) {
+      case 0: return 'Low';
+      case 1: return 'Normal';
+      case 2: return 'High';
+      default: return 'Unknown';
+    }
+  }
+
   private resolveOwner(ownerId: string): void {
     this.userCacheService.resolveUser(ownerId).subscribe(resolved => {
       this.resolvedOwner.set(resolved);