Simple Managment webapp [LLM]

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

@@ -159,8 +159,10 @@
           [nzData]="subscriptions()"
           [nzLoading]="loadingSubscriptions()"
           [nzShowPagination]="false"
+          [nzNoResult]="noResultTpl"
           nzSize="small"
         >
+        <ng-template #noResultTpl></ng-template>
           <thead>
             <tr>
               <th>Subscriber</th>

webapp/src/app/features/channels/channel-list/channel-list.component.html

@@ -6,37 +6,27 @@
         <span nz-icon nzType="reload"></span>
         Refresh
       </button>
-      <button nz-button nzType="primary" (click)="openCreateModal()">
-        <span nz-icon nzType="plus"></span>
-        Create Channel
-      </button>
     </div>
   </div>
 
-  <nz-card class="filter-card">
-    <nz-radio-group [(ngModel)]="selector" (ngModelChange)="onSelectorChange()">
-      <label nz-radio-button nzValue="all">All</label>
-      <label nz-radio-button nzValue="owned">Owned</label>
-      <label nz-radio-button nzValue="subscribed">Subscribed</label>
-      <label nz-radio-button nzValue="subscribed_any">Subscribed (Any)</label>
-    </nz-radio-group>
-  </nz-card>
-
   <nz-card>
     <nz-table
       #channelTable
       [nzData]="channels()"
       [nzLoading]="loading()"
       [nzShowPagination]="false"
+      [nzNoResult]="noResultTpl"
       nzSize="middle"
     >
+    <ng-template #noResultTpl></ng-template>
       <thead>
         <tr>
-          <th nzWidth="25%">Name</th>
-          <th nzWidth="20%">Internal Name</th>
+          <th nzWidth="20%">Name</th>
+          <th nzWidth="15%">Internal Name</th>
+          <th nzWidth="15%">Owner</th>
           <th nzWidth="15%">Status</th>
           <th nzWidth="15%">Messages</th>
-          <th nzWidth="25%">Last Sent</th>
+          <th nzWidth="20%">Last Sent</th>
         </tr>
       </thead>
       <tbody>
@@ -51,6 +41,7 @@
             <td>
               <span class="mono">{{ channel.internal_name }}</span>
             </td>
+            <td>{{ getOwnerDisplayName(channel.owner_user_id) }}</td>
             <td>
               <nz-tag [nzColor]="getSubscriptionStatus(channel).color">
                 {{ getSubscriptionStatus(channel).label }}
@@ -69,7 +60,7 @@
           </tr>
         } @empty {
           <tr>
-            <td colspan="5">
+            <td colspan="6">
               <nz-empty nzNotFoundContent="No channels found"></nz-empty>
             </td>
           </tr>
@@ -79,32 +70,3 @@
   </nz-card>
 </div>
 
-<!-- Create Channel Modal -->
-<nz-modal
-  [(nzVisible)]="showCreateModal"
-  nzTitle="Create Channel"
-  (nzOnCancel)="closeCreateModal()"
-  (nzOnOk)="createChannel()"
-  [nzOkLoading]="creating()"
-  [nzOkDisabled]="!newChannelName.trim()"
->
-  <ng-container *nzModalContent>
-    <nz-form-item>
-      <nz-form-label>Channel Name</nz-form-label>
-      <nz-form-control>
-        <input
-          type="text"
-          nz-input
-          placeholder="Enter channel name"
-          [(ngModel)]="newChannelName"
-        />
-      </nz-form-control>
-    </nz-form-item>
-
-    <nz-form-item class="mb-0">
-      <label nz-checkbox [(ngModel)]="newChannelSubscribe">
-        Subscribe to this channel
-      </label>
-    </nz-form-item>
-  </ng-container>
-</nz-modal>

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

@@ -1,7 +1,6 @@
 import { Component, inject, signal, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
-import { FormsModule } from '@angular/forms';
 import { NzTableModule } from 'ng-zorro-antd/table';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzIconModule } from 'ng-zorro-antd/icon';
@@ -9,16 +8,11 @@ import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzBadgeModule } from 'ng-zorro-antd/badge';
 import { NzEmptyModule } from 'ng-zorro-antd/empty';
 import { NzCardModule } from 'ng-zorro-antd/card';
-import { NzRadioModule } from 'ng-zorro-antd/radio';
-import { NzModalModule, NzModalService } from 'ng-zorro-antd/modal';
-import { NzFormModule } from 'ng-zorro-antd/form';
-import { NzInputModule } from 'ng-zorro-antd/input';
-import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 import { ApiService } from '../../../core/services/api.service';
 import { AuthService } from '../../../core/services/auth.service';
-import { NotificationService } from '../../../core/services/notification.service';
-import { ChannelWithSubscription, ChannelSelector } from '../../../core/models';
+import { UserCacheService, ResolvedUser } from '../../../core/services/user-cache.service';
+import { ChannelWithSubscription } from '../../../core/models';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
 
 @Component({
@@ -26,7 +20,6 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
   standalone: true,
   imports: [
     CommonModule,
-    FormsModule,
     NzTableModule,
     NzButtonModule,
     NzIconModule,
@@ -34,11 +27,6 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
     NzBadgeModule,
     NzEmptyModule,
     NzCardModule,
-    NzRadioModule,
-    NzModalModule,
-    NzFormModule,
-    NzInputModule,
-    NzCheckboxModule,
     NzToolTipModule,
     RelativeTimePipe,
   ],
@@ -48,19 +36,12 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
 export class ChannelListComponent implements OnInit {
   private apiService = inject(ApiService);
   private authService = inject(AuthService);
-  private notification = inject(NotificationService);
-  private modal = inject(NzModalService);
+  private userCacheService = inject(UserCacheService);
   private router = inject(Router);
 
   channels = signal<ChannelWithSubscription[]>([]);
+  ownerNames = signal<Map<string, ResolvedUser>>(new Map());
   loading = signal(false);
-  selector: ChannelSelector = 'all';
-
-  // Create channel modal
-  showCreateModal = signal(false);
-  newChannelName = '';
-  newChannelSubscribe = true;
-  creating = signal(false);
 
   ngOnInit(): void {
     this.loadChannels();
@@ -71,10 +52,11 @@ export class ChannelListComponent implements OnInit {
     if (!userId) return;
 
     this.loading.set(true);
-    this.apiService.getChannels(userId, this.selector).subscribe({
+    this.apiService.getChannels(userId, 'all_any').subscribe({
       next: (response) => {
         this.channels.set(response.channels);
         this.loading.set(false);
+        this.resolveOwnerNames(response.channels);
       },
       error: () => {
         this.loading.set(false);
@@ -82,45 +64,24 @@ export class ChannelListComponent implements OnInit {
     });
   }
 
-  onSelectorChange(): void {
-    this.loadChannels();
+  private resolveOwnerNames(channels: ChannelWithSubscription[]): void {
+    const uniqueOwnerIds = [...new Set(channels.map(c => c.owner_user_id))];
+    for (const ownerId of uniqueOwnerIds) {
+      this.userCacheService.resolveUser(ownerId).subscribe(resolved => {
+        this.ownerNames.update(map => new Map(map).set(ownerId, resolved));
+      });
+    }
+  }
+
+  getOwnerDisplayName(ownerId: string): string {
+    const resolved = this.ownerNames().get(ownerId);
+    return resolved?.displayName || ownerId;
   }
 
   viewChannel(channel: ChannelWithSubscription): void {
     this.router.navigate(['/channels', channel.channel_id]);
   }
 
-  openCreateModal(): void {
-    this.newChannelName = '';
-    this.newChannelSubscribe = true;
-    this.showCreateModal.set(true);
-  }
-
-  closeCreateModal(): void {
-    this.showCreateModal.set(false);
-  }
-
-  createChannel(): void {
-    const userId = this.authService.getUserId();
-    if (!userId || !this.newChannelName.trim()) return;
-
-    this.creating.set(true);
-    this.apiService.createChannel(userId, {
-      name: this.newChannelName.trim(),
-      subscribe: this.newChannelSubscribe
-    }).subscribe({
-      next: (channel) => {
-        this.notification.success('Channel created successfully');
-        this.closeCreateModal();
-        this.creating.set(false);
-        this.loadChannels();
-      },
-      error: () => {
-        this.creating.set(false);
-      }
-    });
-  }
-
   getSubscriptionStatus(channel: ChannelWithSubscription): { label: string; color: string } {
     const userId = this.authService.getUserId();