More webapp changes+fixes

webapp/src/app/features/channels/channel-detail/channel-detail.component.ts

@@ -1,6 +1,6 @@
 import { Component, inject, signal, computed, 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';
@@ -15,11 +15,13 @@ import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzTableModule } from 'ng-zorro-antd/table';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 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 { SettingsService } from '../../../core/services/settings.service';
 import { UserCacheService, ResolvedUser } from '../../../core/services/user-cache.service';
-import { ChannelWithSubscription, Subscription } from '../../../core/models';
+import { ChannelWithSubscription, Subscription, Message } from '../../../core/models';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
 import { CopyToClipboardDirective } from '../../../shared/directives/copy-to-clipboard.directive';
 import { QrCodeDisplayComponent } from '../../../shared/components/qr-code-display/qr-code-display.component';
@@ -32,6 +34,7 @@ import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/c
     CommonModule,
     DatePipe,
     FormsModule,
+    RouterLink,
     NzCardModule,
     NzButtonModule,
     NzIconModule,
@@ -45,6 +48,7 @@ import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/c
     NzTableModule,
     NzToolTipModule,
     NzEmptyModule,
+    NzPaginationModule,
     RelativeTimePipe,
     CopyToClipboardDirective,
     QrCodeDisplayComponent,
@@ -60,13 +64,24 @@ export class ChannelDetailComponent implements OnInit {
   private apiService = inject(ApiService);
   private authService = inject(AuthService);
   private notification = inject(NotificationService);
+  private settingsService = inject(SettingsService);
   private userCacheService = inject(UserCacheService);
 
   channel = signal<ChannelWithSubscription | null>(null);
   subscriptions = signal<Subscription[]>([]);
+  messages = signal<Message[]>([]);
   userNames = signal<Map<string, ResolvedUser>>(new Map());
   loading = signal(true);
   loadingSubscriptions = signal(false);
+  loadingMessages = signal(false);
+  deleting = signal(false);
+  expertMode = this.settingsService.expertMode;
+
+  // Messages pagination
+  messagesPageSize = 16;
+  messagesNextPageToken = signal<string | null>(null);
+  messagesTotalCount = signal(0);
+  messagesCurrentPage = signal(1);
   // Edit modal
   showEditModal = signal(false);
   editDisplayName = '';
@@ -107,6 +122,7 @@ export class ChannelDetailComponent implements OnInit {
         if (this.isOwner()) {
           this.loadSubscriptions(channelId);
         }
+        this.loadMessages(channelId);
       },
       error: () => {
         this.loading.set(false);
@@ -131,6 +147,69 @@ export class ChannelDetailComponent implements OnInit {
     });
   }
 
+  loadMessages(channelId: string, nextPageToken?: string): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.loadingMessages.set(true);
+    this.apiService.getChannelMessages(userId, channelId, {
+      page_size: this.messagesPageSize,
+      next_page_token: nextPageToken,
+      trimmed: true
+    }).subscribe({
+      next: (response) => {
+        this.messages.set(response.messages);
+        this.messagesNextPageToken.set(response.next_page_token || null);
+        this.messagesTotalCount.set(response.total_count);
+        this.loadingMessages.set(false);
+      },
+      error: () => {
+        this.loadingMessages.set(false);
+      }
+    });
+  }
+
+  messagesGoToPage(page: number): void {
+    const channel = this.channel();
+    if (!channel) return;
+
+    this.messagesCurrentPage.set(page);
+    // For pagination with tokens, we need to handle this differently
+    // The API uses next_page_token, so we'll reload from the beginning for now
+    // In a real implementation, you'd need to track tokens per page or use offset-based pagination
+    if (page === 1) {
+      this.loadMessages(channel.channel_id);
+    } else {
+      // For simplicity, use the next page token if going forward
+      const token = this.messagesNextPageToken();
+      if (token) {
+        this.loadMessages(channel.channel_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 resolveUserNames(subscriptions: Subscription[]): void {
     const userIds = new Set<string>();
     for (const sub of subscriptions) {
@@ -245,4 +324,70 @@ export class ChannelDetailComponent implements OnInit {
 
     return { label: 'Not Subscribed', color: 'default' };
   }
+
+  deleteChannel(): void {
+    const channel = this.channel();
+    const userId = this.authService.getUserId();
+    if (!channel || !userId) return;
+
+    this.deleting.set(true);
+    this.apiService.deleteChannel(userId, channel.channel_id).subscribe({
+      next: () => {
+        this.notification.success('Channel deleted');
+        this.router.navigate(['/channels']);
+      },
+      error: () => {
+        this.deleting.set(false);
+      }
+    });
+  }
+
+  viewSubscription(sub: Subscription): void {
+    this.router.navigate(['/subscriptions', sub.subscription_id]);
+  }
+
+  acceptSubscription(sub: Subscription): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.apiService.confirmSubscription(userId, sub.subscription_id, { confirmed: true }).subscribe({
+      next: () => {
+        this.notification.success('Subscription accepted');
+        const channel = this.channel();
+        if (channel) {
+          this.loadSubscriptions(channel.channel_id);
+        }
+      }
+    });
+  }
+
+  denySubscription(sub: Subscription): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.apiService.deleteSubscription(userId, sub.subscription_id).subscribe({
+      next: () => {
+        this.notification.success('Subscription denied');
+        const channel = this.channel();
+        if (channel) {
+          this.loadSubscriptions(channel.channel_id);
+        }
+      }
+    });
+  }
+
+  revokeSubscription(sub: Subscription): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.apiService.deleteSubscription(userId, sub.subscription_id).subscribe({
+      next: () => {
+        this.notification.success('Subscription revoked');
+        const channel = this.channel();
+        if (channel) {
+          this.loadSubscriptions(channel.channel_id);
+        }
+      }
+    });
+  }
 }