Simple Managment webapp [LLM]

webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.html

@@ -16,10 +16,21 @@
   <nz-card>
     <nz-tabset (nzSelectedIndexChange)="onTabChange($event)">
       <nz-tab nzTitle="All"></nz-tab>
-      <nz-tab nzTitle="Outgoing"></nz-tab>
+      <nz-tab nzTitle="Own"></nz-tab>
+      <nz-tab nzTitle="Deactivated"></nz-tab>
+      <nz-tab nzTitle="External"></nz-tab>
       <nz-tab nzTitle="Incoming"></nz-tab>
     </nz-tabset>
 
+    @if (getTabDescription()) {
+      <nz-alert
+        nzType="info"
+        [nzMessage]="getTabDescription()!"
+        nzShowIcon
+        style="margin-bottom: 16px;"
+      ></nz-alert>
+    }
+
     <nz-table
       #subscriptionTable
       [nzData]="subscriptions()"
@@ -31,7 +42,7 @@
     <ng-template #noResultTpl></ng-template>
       <thead>
         <tr>
-          <th nzWidth="10%">Direction</th>
+          <th nzWidth="10%">Type</th>
           <th nzWidth="20%">Channel</th>
           <th nzWidth="20%">Subscriber</th>
           <th nzWidth="20%">Owner</th>
@@ -44,8 +55,8 @@
         @for (sub of subscriptions(); track sub.subscription_id) {
           <tr>
             <td>
-              <nz-tag [nzColor]="isOutgoing(sub) ? 'blue' : 'purple'">
-                {{ getDirectionLabel(sub) }}
+              <nz-tag [nzColor]="getTypeLabel(sub).color">
+                {{ getTypeLabel(sub).label }}
               </nz-tag>
             </td>
             <td>

webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.ts

@@ -13,6 +13,7 @@ import { NzModalModule } from 'ng-zorro-antd/modal';
 import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzInputModule } from 'ng-zorro-antd/input';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+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';
@@ -20,7 +21,19 @@ import { UserCacheService, ResolvedUser } from '../../../core/services/user-cach
 import { Subscription, SubscriptionFilter } from '../../../core/models';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
 
-type TabDirection = 'both' | 'outgoing' | 'incoming';
+type SubscriptionTab = 'all' | 'own' | 'deactivated' | 'external' | 'incoming';
+
+interface TabConfig {
+  filter: SubscriptionFilter;
+}
+
+const TAB_CONFIGS: Record<SubscriptionTab, TabConfig> = {
+  all: { filter: {} },
+  own: { filter: { direction: 'outgoing', confirmation: 'confirmed', external: 'false' } },
+  deactivated: { filter: { direction: 'outgoing', confirmation: 'unconfirmed', external: 'false' } },
+  external: { filter: { direction: 'outgoing', confirmation: 'all', external: 'true' } },
+  incoming: { filter: { direction: 'incoming', confirmation: 'all', external: 'true' } },
+};
 
 @Component({
   selector: 'app-subscription-list',
@@ -40,6 +53,7 @@ type TabDirection = 'both' | 'outgoing' | 'incoming';
     NzFormModule,
     NzInputModule,
     NzToolTipModule,
+    NzAlertModule,
     RelativeTimePipe,
   ],
   templateUrl: './subscription-list.component.html',
@@ -54,7 +68,7 @@ export class SubscriptionListComponent implements OnInit {
   subscriptions = signal<Subscription[]>([]);
   userNames = signal<Map<string, ResolvedUser>>(new Map());
   loading = signal(false);
-  direction: TabDirection = 'both';
+  activeTab: SubscriptionTab = 'all';
 
   // Create subscription modal
   showCreateModal = signal(false);
@@ -72,10 +86,7 @@ export class SubscriptionListComponent implements OnInit {
 
     this.loading.set(true);
 
-    const filter: SubscriptionFilter = {};
-    if (this.direction !== 'both') {
-      filter.direction = this.direction;
-    }
+    const filter = TAB_CONFIGS[this.activeTab].filter;
 
     this.apiService.getSubscriptions(userId, filter).subscribe({
       next: (response) => {
@@ -108,8 +119,8 @@ export class SubscriptionListComponent implements OnInit {
   }
 
   onTabChange(index: number): void {
-    const directions: TabDirection[] = ['both', 'outgoing', 'incoming'];
-    this.direction = directions[index];
+    const tabs: SubscriptionTab[] = ['all', 'own', 'deactivated', 'external', 'incoming'];
+    this.activeTab = tabs[index];
     this.loadSubscriptions();
   }
 
@@ -199,10 +210,29 @@ export class SubscriptionListComponent implements OnInit {
     return { label: 'Pending', color: 'orange' };
   }
 
-  getDirectionLabel(sub: Subscription): string {
-    if (this.isOutgoing(sub)) {
-      return 'Outgoing';
+  getTypeLabel(sub: Subscription): { label: string; color: string } {
+    const userId = this.authService.getUserId();
+    if (sub.subscriber_user_id === sub.channel_owner_user_id) {
+      return { label: 'Own', color: 'green' };
+    }
+    if (sub.subscriber_user_id === userId) {
+      return { label: 'External', color: 'blue' };
+    }
+    return { label: 'Incoming', color: 'purple' };
+  }
+
+  getTabDescription(): string | null {
+    switch (this.activeTab) {
+      case 'own':
+        return 'Active subscriptions to your channels.';
+      case 'deactivated':
+        return 'Deactivated subscriptions to your channels. These can be reactivated by you.';
+      case 'external':
+        return 'Your subscriptions to channels owned by other users.';
+      case 'incoming':
+        return 'Subscription from other users to your channels.';
+      default:
+        return null;
     }
-    return 'Incoming';
   }
 }