More webapp changes+fixes

webapp/src/app/features/messages/message-detail/message-detail.component.html

@@ -9,58 +9,55 @@
         <span nz-icon nzType="arrow-left" nzTheme="outline"></span>
         Back to Messages
       </button>
-      <button
-        nz-button
-        nzType="primary"
-        nzDanger
-        nz-popconfirm
-        nzPopconfirmTitle="Are you sure you want to delete this message?"
-        nzPopconfirmPlacement="bottomRight"
-        (nzOnConfirm)="deleteMessage()"
-        [nzLoading]="deleting()"
-      >
-        <span nz-icon nzType="delete"></span>
-        Delete
-      </button>
     </div>
 
     <nz-card [nzTitle]="message()!.title">
-      <nz-descriptions nzBordered [nzColumn]="2">
-        <nz-descriptions-item nzTitle="Message ID" [nzSpan]="2">
-          <span class="mono">{{ message()!.message_id }}</span>
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Channel">
-          {{ message()!.channel_internal_name }}
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Priority">
-          <nz-tag [nzColor]="getPriorityColor(message()!.priority)">
-            {{ getPriorityLabel(message()!.priority) }}
-          </nz-tag>
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Sender Name">
-          {{ message()!.sender_name || '-' }}
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Sender IP">
-          {{ message()!.sender_ip }}
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Timestamp" [nzSpan]="2">
-          {{ message()!.timestamp }} ({{ message()!.timestamp | relativeTime }})
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="User Message ID" [nzSpan]="2">
-          <span class="mono">{{ message()!.usr_message_id || '-' }}</span>
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Used Key ID" [nzSpan]="2">
-          <span class="mono">{{ message()!.used_key_id }}</span>
-        </nz-descriptions-item>
-      </nz-descriptions>
-
       @if (message()!.content) {
-        <nz-divider nzText="Content"></nz-divider>
         <div class="message-content">
           <pre>{{ message()!.content }}</pre>
         </div>
+      } @else {
+        <div class="no-content">No content</div>
       }
     </nz-card>
+
+    <nz-card nzTitle="Metadata">
+      <scn-metadata-grid>
+        <scn-metadata-value label="Message ID">
+          <span class="mono">{{ message()!.message_id }}</span>
+        </scn-metadata-value>
+        <scn-metadata-value label="Channel">
+          <a [routerLink]="['/channels', message()!.channel_id]" class="metadata-link">
+            <div class="cell-name">{{ message()!.channel_internal_name }}</div>
+            <div class="cell-id mono">{{ message()!.channel_id }}</div>
+          </a>
+        </scn-metadata-value>
+        <scn-metadata-value label="Priority">
+          <nz-tag [nzColor]="getPriorityColor(message()!.priority)">
+            {{ getPriorityLabel(message()!.priority) }}
+          </nz-tag>
+        </scn-metadata-value>
+        <scn-metadata-value label="Sender Name">
+          {{ message()!.sender_name || '-' }}
+        </scn-metadata-value>
+        <scn-metadata-value label="Sender IP">
+          {{ message()!.sender_ip }}
+        </scn-metadata-value>
+        <scn-metadata-value label="Timestamp">
+          <div class="timestamp-absolute">{{ message()!.timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+          <div class="timestamp-relative">{{ message()!.timestamp | relativeTime }}</div>
+        </scn-metadata-value>
+        <scn-metadata-value label="User Message ID">
+          <span class="mono">{{ message()!.usr_message_id || '-' }}</span>
+        </scn-metadata-value>
+        <scn-metadata-value label="Used Key">
+          <a [routerLink]="['/keys', message()!.used_key_id]" class="metadata-link">
+            <div class="cell-name">{{ resolvedKey()?.name || message()!.used_key_id }}</div>
+            <div class="cell-id mono">{{ message()!.used_key_id }}</div>
+          </a>
+        </scn-metadata-value>
+      </scn-metadata-grid>
+    </nz-card>
   } @else {
     <nz-card>
       <div class="not-found">

webapp/src/app/features/messages/message-detail/message-detail.component.scss

@@ -20,6 +20,11 @@
   }
 }
 
+.no-content {
+  color: rgba(0, 0, 0, 0.45);
+  font-style: italic;
+}
+
 .not-found {
   text-align: center;
   padding: 48px;
@@ -29,3 +34,39 @@
     margin-bottom: 16px;
   }
 }
+
+nz-card + nz-card {
+  margin-top: 16px;
+}
+
+.cell-name {
+  font-weight: 500;
+  color: #333;
+}
+
+.cell-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.metadata-link {
+  text-decoration: none;
+  display: block;
+
+  &:hover {
+    .cell-name {
+      color: #1890ff;
+    }
+  }
+}
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+}
+
+.timestamp-relative {
+  font-size: 12px;
+  color: #999;
+}

webapp/src/app/features/messages/message-detail/message-detail.component.ts

@@ -1,33 +1,33 @@
 import { Component, inject, signal, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ActivatedRoute, Router } from '@angular/router';
+import { CommonModule, DatePipe } from '@angular/common';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 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';
-import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { ApiService } from '../../../core/services/api.service';
 import { NotificationService } from '../../../core/services/notification.service';
+import { KeyCacheService, ResolvedKey } from '../../../core/services/key-cache.service';
 import { Message } from '../../../core/models';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
+import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/components/metadata-grid';
 
 @Component({
   selector: 'app-message-detail',
   standalone: true,
   imports: [
     CommonModule,
+    DatePipe,
     NzCardModule,
     NzButtonModule,
     NzIconModule,
-    NzDescriptionsModule,
     NzTagModule,
     NzSpinModule,
-    NzPopconfirmModule,
-    NzDividerModule,
+    RouterLink,
     RelativeTimePipe,
+    MetadataGridComponent,
+    MetadataValueComponent,
   ],
   templateUrl: './message-detail.component.html',
   styleUrl: './message-detail.component.scss'
@@ -37,8 +37,10 @@ export class MessageDetailComponent implements OnInit {
   private router = inject(Router);
   private apiService = inject(ApiService);
   private notification = inject(NotificationService);
+  private keyCacheService = inject(KeyCacheService);
 
   message = signal<Message | null>(null);
+  resolvedKey = signal<ResolvedKey | null>(null);
   loading = signal(true);
   deleting = signal(false);
 
@@ -55,6 +57,7 @@ export class MessageDetailComponent implements OnInit {
       next: (message) => {
         this.message.set(message);
         this.loading.set(false);
+        this.resolveKey(message.used_key_id);
       },
       error: () => {
         this.loading.set(false);
@@ -62,6 +65,12 @@ export class MessageDetailComponent implements OnInit {
     });
   }
 
+  private resolveKey(keyId: string): void {
+    this.keyCacheService.resolveKey(keyId).subscribe({
+      next: (resolved) => this.resolvedKey.set(resolved)
+    });
+  }
+
   goBack(): void {
     this.router.navigate(['/messages']);
   }

webapp/src/app/features/messages/message-list/message-list.component.html

@@ -67,26 +67,26 @@
     <ng-template #noResultTpl></ng-template>
       <thead>
         <tr>
-          <th nzWidth="40%">Title</th>
+          <th>Title</th>
+          <th>Content</th>
           <th
-            nzWidth="15%"
             [nzFilters]="channelFilters()"
             [nzFilterMultiple]="true"
             (nzFilterChange)="onChannelFilterChange($event)"
           >Channel</th>
           <th
-            nzWidth="15%"
+            nzWidth="0"
             [nzFilters]="senderFilters()"
             [nzFilterMultiple]="true"
             (nzFilterChange)="onSenderFilterChange($event)"
           >Sender</th>
           <th
-            nzWidth="10%"
+            nzWidth="0"
             [nzFilters]="priorityFilters"
             [nzFilterMultiple]="false"
             (nzFilterChange)="onPriorityFilterChange($event)"
           >Priority</th>
-          <th nzWidth="20%" nzCustomFilter>
+          <th nzWidth="0" nzCustomFilter>
             Time
             <nz-filter-trigger [(nzVisible)]="dateFilterVisible" [nzActive]="!!dateRange" [nzDropdownMenu]="dateMenu">
               <span nz-icon nzType="filter" nzTheme="fill"></span>
@@ -110,12 +110,18 @@
           <tr class="clickable-row" (click)="viewMessage(message)">
             <td>
               <div class="message-title">{{ message.title }}</div>
-              @if (message.content && !message.trimmed) {
-                <div class="message-preview">{{ message.content | slice:0:100 }}{{ message.content.length > 100 ? '...' : '' }}</div>
+              <div class="message-id mono">{{ message.message_id }}</div>
+            </td>
+            <td>
+              @if (message.content) {
+                <div class="message-content">{{ message.content | slice:0:128 }}{{ message.content.length > 128 ? '...' : '' }}</div>
+              } @else {
+                <span class="text-muted"></span>
               }
             </td>
             <td>
-              <span class="mono">{{ message.channel_internal_name }}</span>
+              <div class="cell-name">{{ message.channel_internal_name }}</div>
+              <div class="cell-id">{{ message.channel_id }}</div>
             </td>
             <td>
               {{ message.sender_name || '-' }}
@@ -126,14 +132,13 @@
               </nz-tag>
             </td>
             <td>
-              <span nz-tooltip [nzTooltipTitle]="message.timestamp">
-                {{ message.timestamp | relativeTime }}
-              </span>
+              <div class="timestamp-absolute">{{ message.timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+              <div class="timestamp-relative">{{ message.timestamp | relativeTime }}</div>
             </td>
           </tr>
         } @empty {
           <tr>
-            <td colspan="5">
+            <td colspan="6">
               <nz-empty nzNotFoundContent="No messages found"></nz-empty>
             </td>
           </tr>

webapp/src/app/features/messages/message-list/message-list.component.scss

@@ -41,10 +41,40 @@
   color: #333;
 }
 
-.message-preview {
+.message-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.message-content {
+  font-size: 12px;
+  color: #666;
+}
+
+.text-muted {
+  color: #999;
+}
+
+.cell-name {
+  font-weight: 500;
+  color: #333;
+}
+
+.cell-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+}
+
+.timestamp-relative {
   font-size: 12px;
   color: #999;
-  margin-top: 4px;
 }
 
 .pagination-controls {