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

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

@@ -22,7 +22,7 @@ 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, Message } from '../../../core/models';
+import { KeyToken, KeyTokenPreview, parsePermissions, TokenPermission, ChannelWithSubscription, Message } from '../../../core/models';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
 import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/components/metadata-grid';
 
@@ -72,6 +72,7 @@ export class KeyDetailComponent implements OnInit {
   private userCacheService = inject(UserCacheService);
 
   key = signal<KeyToken | null>(null);
+  keyPreview = signal<KeyTokenPreview | null>(null);
   currentKeyId = signal<string | null>(null);
   loading = signal(true);
   channelNames = signal<Map<string, ResolvedChannel>>(new Map());
@@ -105,8 +106,6 @@ export class KeyDetailComponent implements OnInit {
     const keyId = this.route.snapshot.paramMap.get('id');
     if (keyId) {
       this.loadKey(keyId);
-      this.loadCurrentKey();
-      this.loadAvailableChannels();
     }
   }
 
@@ -115,13 +114,29 @@ export class KeyDetailComponent implements OnInit {
     if (!userId) return;
 
     this.loading.set(true);
-    this.apiService.getKey(userId, keyId).subscribe({
-      next: (key) => {
-        this.key.set(key);
-        this.loading.set(false);
-        this.resolveChannelNames(key);
-        this.resolveOwner(key.owner_user_id);
-        this.loadMessages(keyId);
+    this.apiService.getKeyPreview(keyId).subscribe({
+      next: (preview) => {
+        this.keyPreview.set(preview);
+        this.resolveOwner(preview.owner_user_id);
+        this.resolveChannelNamesFromPreview(preview);
+        if (preview.owner_user_id === userId) {
+          this.loadCurrentKey();
+          this.loadAvailableChannels();
+          this.apiService.getKey(userId, keyId).subscribe({
+            next: (key) => {
+              this.key.set(key);
+              this.loading.set(false);
+              this.resolveChannelNames(key);
+              this.loadMessages(keyId);
+            },
+            error: () => {
+              this.loading.set(false);
+            }
+          });
+        } else {
+          this.loading.set(false);
+          this.loadMessages(keyId);
+        }
       },
       error: () => {
         this.loading.set(false);
@@ -217,6 +232,27 @@ export class KeyDetailComponent implements OnInit {
     }
   }
 
+  private resolveChannelNamesFromPreview(preview: KeyTokenPreview): void {
+    if (!preview.all_channels && preview.channels && preview.channels.length > 0) {
+      this.channelCacheService.resolveChannels(preview.channels).subscribe(resolved => {
+        this.channelNames.set(resolved);
+      });
+    }
+  }
+
+  keyData() {
+    return this.key() ?? this.keyPreview();
+  }
+
+  isOwner(): boolean {
+    const userId = this.authService.getUserId();
+    const key = this.key();
+    if (key) return key.owner_user_id === userId;
+    const preview = this.keyPreview();
+    if (preview) return preview.owner_user_id === userId;
+    return false;
+  }
+
   goBack(): void {
     this.router.navigate(['/keys']);
   }
@@ -227,8 +263,8 @@ export class KeyDetailComponent implements OnInit {
   }
 
   getPermissions(): TokenPermission[] {
-    const key = this.key();
-    return key ? parsePermissions(key.permissions) : [];
+    const data = this.keyData();
+    return data ? parsePermissions(data.permissions) : [];
   }
 
   getPermissionColor(perm: TokenPermission): string {