From 9352ff5c2c21be2054ae10f9ff8fe612ae7bec5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mike=20Schw=C3=B6rer?= <pubgit@mikescher.com>
Date: Mon, 19 Jan 2026 19:19:43 +0100
Subject: [PATCH] UI improvements

---
 .../src/app/core/services/client-cache.service.ts   | 13 +++++--------
 .../message-detail/message-detail.component.html    | 13 +++++--------
 .../message-detail/message-detail.component.ts      |  6 +++---
 3 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/webapp/src/app/core/services/client-cache.service.ts b/webapp/src/app/core/services/client-cache.service.ts
index 41dcfa8..d2b944b 100644
--- a/webapp/src/app/core/services/client-cache.service.ts
+++ b/webapp/src/app/core/services/client-cache.service.ts
@@ -1,6 +1,7 @@
 import { Injectable, inject } from '@angular/core';
 import { Observable, of, catchError, map, shareReplay } from 'rxjs';
 import { ApiService } from './api.service';
+import { ClientPreview, UserPreview } from '../models';
 
 export interface ResolvedClient {
   clientId: string;
@@ -17,18 +18,14 @@ export interface ResolvedClient {
 export class ClientCacheService {
   private apiService = inject(ApiService);
 
-  private cache = new Map<string, Observable<ResolvedClient | null>>();
+  private cache = new Map<string, Observable<{client: ClientPreview, user: UserPreview} | null>>();
 
-  resolveClient(clientId: string): Observable<ResolvedClient | null> {
+  resolveClient(clientId: string): Observable<{client: ClientPreview, user: UserPreview} | null> {
     if (!this.cache.has(clientId)) {
       const request$ = this.apiService.getClientPreview(clientId).pipe(
         map(response => ({
-          clientId: response.client.client_id,
-          clientName: response.client.name,
-          userId: response.user.user_id,
-          userName: response.user.username,
-          agentModel: response.client.agent_model,
-          agentVersion: response.client.agent_version,
+          client: response.client,
+          user: response.user
         })),
         catchError(() => of(null)),
         shareReplay(1)
diff --git a/webapp/src/app/features/messages/message-detail/message-detail.component.html b/webapp/src/app/features/messages/message-detail/message-detail.component.html
index a10e95e..c441820 100644
--- a/webapp/src/app/features/messages/message-detail/message-detail.component.html
+++ b/webapp/src/app/features/messages/message-detail/message-detail.component.html
@@ -104,19 +104,15 @@
             @for (delivery of deliveriesTable.data; track delivery.delivery_id) {
               <tr>
                 <td>
-                  <div class="cell-name">{{ getResolvedClient(delivery.receiver_client_id)?.clientName || '-' }}</div>
+                  <div class="cell-name">{{ getResolvedClient(delivery.receiver_client_id)?.client?.name ?? '-' }}</div>
                   <div class="cell-id mono">{{ delivery.receiver_client_id }}</div>
                 </td>
                 <td>
-                  <div class="cell-name">{{ getResolvedClient(delivery.receiver_client_id)?.userName || '-' }}</div>
+                  <div class="cell-name">{{ getResolvedClient(delivery.receiver_client_id)?.user?.username ?? '-' }}</div>
                   <div class="cell-id mono">{{ delivery.receiver_user_id }}</div>
                 </td>
                 <td>
-                  @if (getResolvedClient(delivery.receiver_client_id); as client) {
-                    {{ client.agentModel }} {{ client.agentVersion }}
-                  } @else {
-                    -
-                  }
+                  {{ getResolvedClient(delivery.receiver_client_id)?.client?.agent_model ?? '-' }}
                 </td>
                 <td>
                   <nz-tag [nzColor]="getStatusColor(delivery.status)">
@@ -133,7 +129,8 @@
                       nzType="copy"
                       class="action-icon"
                       nz-tooltip
-                      nzTooltipTitle="Copy FCM ID"
+                      nzTooltipTitle="Copy Message FCM-ID"
+                      style="cursor: pointer"
                       [appCopyToClipboard]="delivery.fcm_message_id"
                     ></span>
                   } @else {
diff --git a/webapp/src/app/features/messages/message-detail/message-detail.component.ts b/webapp/src/app/features/messages/message-detail/message-detail.component.ts
index de7e113..2fc0d81 100644
--- a/webapp/src/app/features/messages/message-detail/message-detail.component.ts
+++ b/webapp/src/app/features/messages/message-detail/message-detail.component.ts
@@ -16,7 +16,7 @@ import { SettingsService } from '../../../core/services/settings.service';
 import { KeyCacheService, ResolvedKey } from '../../../core/services/key-cache.service';
 import { UserCacheService, ResolvedUser } from '../../../core/services/user-cache.service';
 import { ClientCacheService, ResolvedClient } from '../../../core/services/client-cache.service';
-import { Message, Delivery } from '../../../core/models';
+import { Message, Delivery, ClientPreview, UserPreview } from '../../../core/models';
 import { CopyToClipboardDirective } from '../../../shared/directives/copy-to-clipboard.directive';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
 import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/components/metadata-grid';
@@ -59,7 +59,7 @@ export class MessageDetailComponent implements OnInit {
   resolvedKey = signal<ResolvedKey | null>(null);
   resolvedChannelOwner = signal<ResolvedUser | null>(null);
   deliveries = signal<Delivery[]>([]);
-  resolvedClients = signal<Map<string, ResolvedClient>>(new Map());
+  resolvedClients = signal<Map<string, {client: ClientPreview, user: UserPreview}>>(new Map());
   loading = signal(true);
   deleting = signal(false);
   loadingDeliveries = signal(false);
@@ -139,7 +139,7 @@ export class MessageDetailComponent implements OnInit {
     }
   }
 
-  getResolvedClient(clientId: string): ResolvedClient | undefined {
+  getResolvedClient(clientId: string): {client: ClientPreview, user: UserPreview} | undefined {
     return this.resolvedClients().get(clientId);
   }