WebApp: Fix channel-detail page for non-owned channels

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

@@ -3,35 +3,37 @@
     <div class="loading-container">
       <nz-spin nzSimple nzSize="large"></nz-spin>
     </div>
-  } @else if (key()) {
+  } @else if (keyData()) {
     <div class="detail-header">
       <button nz-button (click)="goBack()">
         <span nz-icon nzType="arrow-left" nzTheme="outline"></span>
         Back to Keys
       </button>
-      <div class="header-actions">
-        <button nz-button (click)="openEditModal()">
-          <span nz-icon nzType="edit"></span>
-          Edit
-        </button>
-        @if (!isCurrentKey()) {
-          <button
-            nz-button
-            nzDanger
-            nz-popconfirm
-            nzPopconfirmTitle="Are you sure you want to delete this key?"
-            (nzOnConfirm)="deleteKey()"
-          >
-            <span nz-icon nzType="delete"></span>
-            Delete
+      @if (isOwner()) {
+        <div class="header-actions">
+          <button nz-button (click)="openEditModal()">
+            <span nz-icon nzType="edit"></span>
+            Edit
           </button>
-        }
-      </div>
+          @if (!isCurrentKey()) {
+            <button
+              nz-button
+              nzDanger
+              nz-popconfirm
+              nzPopconfirmTitle="Are you sure you want to delete this key?"
+              (nzOnConfirm)="deleteKey()"
+            >
+              <span nz-icon nzType="delete"></span>
+              Delete
+            </button>
+          }
+        </div>
+      }
     </div>
 
     <nz-card>
       <div class="key-header">
-        <h2 class="key-title">{{ key()!.name }}</h2>
+        <h2 class="key-title">{{ keyData()!.name }}</h2>
         @if (isCurrentKey()) {
           <nz-tag nzColor="cyan">Current</nz-tag>
         }
@@ -39,7 +41,7 @@
 
       <scn-metadata-grid>
         <scn-metadata-value label="Key ID">
-          <span class="mono">{{ key()!.keytoken_id }}</span>
+          <span class="mono">{{ keyData()!.keytoken_id }}</span>
         </scn-metadata-value>
         <scn-metadata-value label="Permissions">
           <div class="permissions">
@@ -55,11 +57,11 @@
           </div>
         </scn-metadata-value>
         <scn-metadata-value label="Channel Access">
-          @if (key()!.all_channels) {
+          @if (keyData()!.all_channels) {
             <nz-tag nzColor="default">All Channels</nz-tag>
-          } @else if (key()!.channels && key()!.channels.length > 0) {
+          } @else if (keyData()!.channels && keyData()!.channels.length > 0) {
             <div class="channel-list">
-              @for (channelId of key()!.channels; track channelId) {
+              @for (channelId of keyData()!.channels; track channelId) {
                 <nz-tag nzColor="orange" nz-tooltip [nzTooltipTitle]="channelId">
                   {{ getChannelDisplayName(channelId) }}
                 </nz-tag>
@@ -69,27 +71,29 @@
             <span class="text-muted">No channels</span>
           }
         </scn-metadata-value>
-        <scn-metadata-value label="Messages Sent">
-          {{ key()!.messages_sent }}
-        </scn-metadata-value>
-        <scn-metadata-value label="Created">
-          <div class="timestamp-absolute">{{ key()!.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</div>
-          <div class="timestamp-relative">{{ key()!.timestamp_created | relativeTime }}</div>
-        </scn-metadata-value>
-        <scn-metadata-value label="Last Used">
-          @if (key()!.timestamp_lastused) {
-            <div class="timestamp-absolute">{{ key()!.timestamp_lastused | date:'yyyy-MM-dd HH:mm:ss' }}</div>
-            <div class="timestamp-relative">{{ key()!.timestamp_lastused | relativeTime }}</div>
-          } @else {
-            <span class="text-muted">Never</span>
-          }
-        </scn-metadata-value>
+        @if (key()) {
+          <scn-metadata-value label="Messages Sent">
+            {{ key()!.messages_sent }}
+          </scn-metadata-value>
+          <scn-metadata-value label="Created">
+            <div class="timestamp-absolute">{{ key()!.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+            <div class="timestamp-relative">{{ key()!.timestamp_created | relativeTime }}</div>
+          </scn-metadata-value>
+          <scn-metadata-value label="Last Used">
+            @if (key()!.timestamp_lastused) {
+              <div class="timestamp-absolute">{{ key()!.timestamp_lastused | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+              <div class="timestamp-relative">{{ key()!.timestamp_lastused | relativeTime }}</div>
+            } @else {
+              <span class="text-muted">Never</span>
+            }
+          </scn-metadata-value>
+        }
         <scn-metadata-value label="Owner">
           @if (resolvedOwner()) {
             <div class="owner-name">{{ resolvedOwner()!.displayName }}</div>
-            <div class="owner-id mono">{{ key()!.owner_user_id }}</div>
+            <div class="owner-id mono">{{ keyData()!.owner_user_id }}</div>
           } @else {
-            <span class="mono">{{ key()!.owner_user_id }}</span>
+            <span class="mono">{{ keyData()!.owner_user_id }}</span>
           }
         </scn-metadata-value>
       </scn-metadata-grid>