More webapp changes+fixes

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

@@ -1,4 +1,4 @@
-import { Component, inject, signal, OnInit } from '@angular/core';
+import { Component, inject, signal, computed, OnInit } from '@angular/core';
 import { CommonModule, DatePipe } from '@angular/common';
 import { Router, RouterLink } from '@angular/router';
 import { NzTableModule } from 'ng-zorro-antd/table';
@@ -9,13 +9,19 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge';
 import { NzEmptyModule } from 'ng-zorro-antd/empty';
 import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { NzTabsModule } from 'ng-zorro-antd/tabs';
+import { NzAlertModule } from 'ng-zorro-antd/alert';
 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 } from '../../../core/models';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
 import { ChannelSubscribersComponent } from '../channel-subscribers/channel-subscribers.component';
 
+type ChannelTab = 'all' | 'owned' | 'foreign';
+
 @Component({
   selector: 'app-channel-list',
   standalone: true,
@@ -31,6 +37,8 @@ import { ChannelSubscribersComponent } from '../channel-subscribers/channel-subs
     NzEmptyModule,
     NzCardModule,
     NzToolTipModule,
+    NzTabsModule,
+    NzAlertModule,
     RelativeTimePipe,
     ChannelSubscribersComponent,
   ],
@@ -40,12 +48,31 @@ import { ChannelSubscribersComponent } from '../channel-subscribers/channel-subs
 export class ChannelListComponent implements OnInit {
   private apiService = inject(ApiService);
   private authService = inject(AuthService);
+  private notification = inject(NotificationService);
+  private settingsService = inject(SettingsService);
   private userCacheService = inject(UserCacheService);
   private router = inject(Router);
 
-  channels = signal<ChannelWithSubscription[]>([]);
+  allChannels = signal<ChannelWithSubscription[]>([]);
   ownerNames = signal<Map<string, ResolvedUser>>(new Map());
   loading = signal(false);
+  expertMode = this.settingsService.expertMode;
+  activeTab = signal<ChannelTab>('all');
+
+  channels = computed(() => {
+    const userId = this.authService.getUserId();
+    const all = this.allChannels();
+    const tab = this.activeTab();
+
+    switch (tab) {
+      case 'owned':
+        return all.filter(c => c.owner_user_id === userId);
+      case 'foreign':
+        return all.filter(c => c.owner_user_id !== userId);
+      default:
+        return all;
+    }
+  });
 
   ngOnInit(): void {
     this.loadChannels();
@@ -58,7 +85,7 @@ export class ChannelListComponent implements OnInit {
     this.loading.set(true);
     this.apiService.getChannels(userId, 'all_any').subscribe({
       next: (response) => {
-        this.channels.set(response.channels);
+        this.allChannels.set(response.channels);
         this.loading.set(false);
         this.resolveOwnerNames(response.channels);
       },
@@ -68,6 +95,22 @@ export class ChannelListComponent implements OnInit {
     });
   }
 
+  onTabChange(index: number): void {
+    const tabs: ChannelTab[] = ['all', 'owned', 'foreign'];
+    this.activeTab.set(tabs[index]);
+  }
+
+  getTabDescription(): string | null {
+    switch (this.activeTab()) {
+      case 'owned':
+        return 'Channels that you own and can configure.';
+      case 'foreign':
+        return 'Channels owned by other users that you are subscribed to.';
+      default:
+        return null;
+    }
+  }
+
   private resolveOwnerNames(channels: ChannelWithSubscription[]): void {
     const uniqueOwnerIds = [...new Set(channels.map(c => c.owner_user_id))];
     for (const ownerId of uniqueOwnerIds) {
@@ -109,4 +152,28 @@ export class ChannelListComponent implements OnInit {
 
     return { label: 'Not Subscribed', color: 'default' };
   }
+
+  toggleSelfSubscription(channel: ChannelWithSubscription, event: Event): void {
+    event.stopPropagation();
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    if (channel.subscription) {
+      // Unsubscribe
+      this.apiService.deleteSubscription(userId, channel.subscription.subscription_id).subscribe({
+        next: () => {
+          this.notification.success('Unsubscribed from channel');
+          this.loadChannels();
+        }
+      });
+    } else {
+      // Subscribe
+      this.apiService.createSubscription(userId, { channel_id: channel.channel_id }).subscribe({
+        next: () => {
+          this.notification.success('Subscribed to channel');
+          this.loadChannels();
+        }
+      });
+    }
+  }
 }